Improve Edited Indicator

theADAMJR · Aug 10, 2021 · 1c97c64 · 1c97c64
1 parent 87b5ef8
commit 1c97c64
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 40 deletions.
diff --git a/frontend/src/components/channel/message/message.scoped.css b/frontend/src/components/channel/message/message.scoped.css
@@ -1,26 +1,12 @@
-.message .left-side img {
-  width: 40px;
-  height: 40px;
-}
-
-.message .message-content {
-  padding: 0 8px;
-}
-
-.message:hover .timestamp {
-  opacity: 1;
-}
-.message .timestamp {
-  opacity: 0;
-}
-
 .message:hover {
   background-color: rgba(0, 0, 0, 0.075);
 }
 
-.toolbar {
-  opacity: 0;
-}
+.message:hover .timestamp,
 .message:hover .toolbar {
   opacity: 1;
 }
+.timestamp,
+.toolbar {
+  opacity: 0;
+}
diff --git a/frontend/src/components/channel/message/message.tsx b/frontend/src/components/channel/message/message.tsx
@@ -32,12 +32,12 @@ const Message: React.FunctionComponent<MessageProps> = ({ message }: MessageProp
   }
 
   const leftSide = () => {
-    const time = moment(createdAt).format('HH:mm');
-
     return (isExtra())
-      ? <span className="timestamp text-xs">{time}</span>
+      ? <span className="timestamp text-xs">
+          {moment(createdAt).format('HH:mm')}
+        </span>
       : <img
-          className="rounded-full cursor-pointer"
+          className="rounded-full cursor-pointer w-10 h-10"
           src={`${environment.rootAPIURL}${author.avatarURL}`}
           alt={author.username} />;
   }
@@ -50,36 +50,32 @@ const Message: React.FunctionComponent<MessageProps> = ({ message }: MessageProp
       [1]: 'Yesterday',
       [0]: 'Today',
       [-1]: 'Tomorrow',
-     }[days];
-
-    const format = (day)
-      ? `[${day}] [at] HH:mm`
-      : 'DD/MM/YYYY';
-
-    const timestamp = moment(createdAt).format(format);
-
-    return (<>
-      <span className="text-base heading hover:underline cursor-pointer mr-2">{author.username}</span>
-      <span className="text-xs">{timestamp}</span>
-    </>);
+    }[days];
+    const timestamp = (day) ? `[${day}] [at] HH:mm` : 'DD/MM/YYYY';
+
+    return (
+      <>
+        <span className="text-base heading hover:underline cursor-pointer mr-2">{author.username}</span>
+        <span className="text-xs">{moment(createdAt).format(timestamp)}</span>
+      </>
+    );
   }
 
-  const isEditing = editingMessageId === message.id;
-
-  const MessageContent = () => (isEditing)
+  const MessageContent = () => (editingMessageId === message.id)
     ? <MessageBox
         content={message.content}
         editingMessageId={message.id} />
     : <div className="relative">
-        <div className="normal whitespace-pre-wrap">{message.content}{message.updatedAt && <span>(edited)</span>}</div>
+        <div className="normal whitespace-pre-wrap">{message.content}{message.updatedAt &&
+          <span className="select-none muted edited text-xs ml-1">(edited)</span>}</div>
       </div>;
 
   const messageClass = `message flex ${!isExtra() && 'mt-4'}`;
 
   return (
     <div className={messageClass}>
       <div className="left-side text-xs w-16 mr-2 pl-5 pt-1">{leftSide()}</div>
-      <div className="relative message-content flex-grow">
+      <div className="relative flex-grow px-2">
         <div className="absolute toolbar right-0 -mt-3 z-10">
           <MessageToolbar message={message} />
         </div>