From 123dc6bbfce0143077cdfbe4778dbf8a8872a1a8 Mon Sep 17 00:00:00 2001
From: nizune <9-nizune@users.noreply.gitlab.insrt.uk>
Date: Thu, 5 Aug 2021 11:54:32 +0200
Subject: [PATCH] New look to replies

---
 .../messaging/attachments/MessageReply.tsx    | 28 ++++++++++++++-----
 .../common/messaging/bars/ReplyBar.tsx        |  4 +++
 2 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/src/components/common/messaging/attachments/MessageReply.tsx b/src/components/common/messaging/attachments/MessageReply.tsx
index 88580bde..3f440c06 100644
--- a/src/components/common/messaging/attachments/MessageReply.tsx
+++ b/src/components/common/messaging/attachments/MessageReply.tsx
@@ -35,12 +35,24 @@ export const ReplyBase = styled.div<{
     display: flex;
     margin-inline-start: 30px;
     margin-inline-end: 12px;
-    margin-bottom: 4px;
+    /*margin-bottom: 4px;*/
     font-size: 0.8em;
     user-select: none;
     align-items: center;
     color: var(--secondary-foreground);
 
+    &::before {
+        content: "";
+        height: 10px;
+        width: 28px;
+        margin-inline-end: 2px;
+        align-self: flex-end;
+        display: flex;
+        border-top: 2.2px solid var(--tertiary-foreground);
+        border-inline-start: 2.2px solid var(--tertiary-foreground);
+        border-start-start-radius: 6px;
+    }
+
     * {
         overflow: hidden;
         white-space: nowrap;
@@ -54,6 +66,7 @@ export const ReplyBase = styled.div<{
         font-weight: 600;
         overflow: visible;
         align-items: center;
+        padding: 2px 0;
 
         span {
             cursor: pointer;
@@ -71,6 +84,7 @@ export const ReplyBase = styled.div<{
     }
 
     .content {
+        padding: 2px 0;
         gap: 4px;
         display: flex;
         cursor: pointer;
@@ -122,6 +136,10 @@ export const ReplyBase = styled.div<{
         `}
 `;
 
+const Arrow = styled.div`
+         
+`;
+
 export const MessageReply = observer(({ index, channel, id }: Props) => {
     const view = useRenderState(channel._id);
     if (view?.type !== "RENDER") return null;
@@ -142,7 +160,6 @@ export const MessageReply = observer(({ index, channel, id }: Props) => {
     if (!message) {
         return (
             <ReplyBase head={index === 0} fail>
-                <Reply size={16} />
                 <span>
                     <Text id="app.main.channel.misc.failed_load" />
                 </span>
@@ -154,11 +171,8 @@ export const MessageReply = observer(({ index, channel, id }: Props) => {
 
     return (
         <ReplyBase head={index === 0}>
-            <Reply size={16} />
             {message.author?.relationship === RelationshipStatus.Blocked ? (
-                <>
-                    <Text id="app.main.channel.misc.blocked_user" />
-                </>
+                <Text id="app.main.channel.misc.blocked_user" />
             ) : (
                 <>
                     {message.author_id === SYSTEM_USER_ID ? (
@@ -209,4 +223,4 @@ export const MessageReply = observer(({ index, channel, id }: Props) => {
             )}
         </ReplyBase>
     );
-});
+});
\ No newline at end of file
diff --git a/src/components/common/messaging/bars/ReplyBar.tsx b/src/components/common/messaging/bars/ReplyBar.tsx
index b3ec4a76..31d26b72 100644
--- a/src/components/common/messaging/bars/ReplyBar.tsx
+++ b/src/components/common/messaging/bars/ReplyBar.tsx
@@ -36,6 +36,10 @@ const Base = styled.div`
     > div {
         flex-grow: 1;
         margin-bottom: 0;
+
+        &::before {
+            display: none;
+        }
     }
 
     .toggle {