feat: new replies

src/components/common/messaging/attachments/MessageReply.tsx

@@ -28,30 +28,24 @@ export const ReplyBase = styled.div<{
     fail?: boolean;
     preview?: boolean;
 }>`
-    gap: 4px;
+    gap: 8px;
     min-width: 0;
     display: flex;
     margin-inline-start: 30px;
     margin-inline-end: 12px;
     font-size: 0.8em;
     user-select: none;
-    align-items: center;
+    align-items: end;
     color: var(--secondary-foreground);
 
-    /* nizune's Discord replies,
-        does not scale properly with messages,
-        reverted temporarily
     &::before {
         content: "";
+        width: 22px;
         height: 10px;
-        width: 28px;
-        margin-inline-end: 2px;
+        border-inline-start: 3px solid #4f515d;
+        border-top: 3px solid #4f515d;
         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;
@@ -75,13 +69,6 @@ export const ReplyBase = styled.div<{
                 text-decoration: underline;
             }
         }
-
-        /*&::before {
-            position:relative;
-            width: 50px;
-            height: 2px;
-            background: red;
-        }*/
     }
 
     .content {
@@ -120,10 +107,6 @@ export const ReplyBase = styled.div<{
         > * {
             pointer-events: none;
         }
-
-        /*> span > p {
-            display: flex;
-        }*/
     }
 
     > svg:first-child {
@@ -142,6 +125,10 @@ export const ReplyBase = styled.div<{
         props.head &&
         css`
             margin-top: 12px;
+
+            &::before {
+                border-start-start-radius: 4px;
+            }
         `}
 
     ${(props) =>
@@ -184,7 +171,8 @@ export const MessageReply = observer(
 
         return (
             <ReplyBase head={index === 0}>
-                <Reply size={16} />
+                {/*<Reply size={16} />*/}
+
                 {message.author?.relationship === RelationshipStatus.Blocked ? (
                     <Text id="app.main.channel.misc.blocked_user" />
                 ) : (
@@ -195,7 +183,7 @@ export const MessageReply = observer(
                             <>
                                 <div className="user">
                                     <UserShort
-                                        size={16}
+                                        size={14}
                                         showServerIdentity
                                         user={message.author}
                                         masquerade={message.masquerade!}