Improve thread reply layout (#2410)

diff --git a/src/app/components/message/Reply.css.ts b/src/app/components/message/Reply.css.ts
index 0679939143ea84ebe6ecd83107028701f54798c5..7e5540fdbcce584f7843544404c57961398b7f8a 100644 (file)
--- a/src/app/components/message/Reply.css.ts
+++ b/src/app/components/message/Reply.css.ts
@@ -7,7 +7,6 @@ export const ReplyBend = style({
 
 export const ThreadIndicator = style({
   opacity: config.opacity.P300,
-  gap: toRem(2),
 
   selectors: {
     'button&': {
@@ -19,11 +18,6 @@ export const ThreadIndicator = style({
   },
 });
 
-export const ThreadIndicatorIcon = style({
-  width: toRem(14),
-  height: toRem(14),
-});
-
 export const Reply = style({
   marginBottom: toRem(1),
   minWidth: 0,

diff --git a/src/app/components/message/Reply.tsx b/src/app/components/message/Reply.tsx
index 563d1bf8ed941b7738b5ed93df9b95584f87c8fc..dc92bf833875010355131f043aa19a4777bbbcdc 100644 (file)
--- a/src/app/components/message/Reply.tsx
+++ b/src/app/components/message/Reply.tsx
@@ -38,9 +38,16 @@ export const ReplyLayout = as<'div', ReplyLayoutProps>(
 );
 
 export const ThreadIndicator = as<'div'>(({ ...props }, ref) => (
-  <Box className={css.ThreadIndicator} alignItems="Center" {...props} ref={ref}>
-    <Icon className={css.ThreadIndicatorIcon} src={Icons.Message} />
-    <Text size="T200">Threaded reply</Text>
+  <Box
+    shrink="No"
+    className={css.ThreadIndicator}
+    alignItems="Center"
+    gap="100"
+    {...props}
+    ref={ref}
+  >
+    <Icon size="50" src={Icons.Thread} />
+    <Text size="L400">Thread</Text>
   </Box>
 ));
 
@@ -97,7 +104,7 @@ export const Reply = as<'div', ReplyProps>(
     const bodyJSX = body ? scaleSystemEmoji(trimReplyFromBody(body)) : fallbackBody;
 
     return (
-      <Box direction="Column" alignItems="Start" {...props} ref={ref}>
+      <Box direction="Row" gap="200" alignItems="Center" {...props} ref={ref}>
         {threadRootId && (
           <ThreadIndicator as="button" data-event-id={threadRootId} onClick={onClick} />
         )}

diff --git a/src/app/features/room/RoomInput.tsx b/src/app/features/room/RoomInput.tsx
index 501ee0dc2e6b0642f98cb43c2f298cabe4371957..1399ec15dc2780e73bcb71ca6f073cf0b5cec105 100644 (file)
--- a/src/app/features/room/RoomInput.tsx
+++ b/src/app/features/room/RoomInput.tsx
@@ -543,7 +543,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
                   >
                     <Icon src={Icons.Cross} size="50" />
                   </IconButton>
-                  <Box direction="Column">
+                  <Box direction="Row" gap="200" alignItems="Center">
                     {replyDraft.relation?.rel_type === RelationType.Thread && <ThreadIndicator />}
                     <ReplyLayout
                       userColor={replyUsernameColor}