From 09e2efe8fd1a94e570e60de79ac0f0a2ce7f25fe Mon Sep 17 00:00:00 2001
From: Peter Zimon <peter.zimon@gmail.com>
Date: Thu, 7 Jul 2022 14:28:13 +0200
Subject: [PATCH] Updated comment list layouts

---
 apps/comments-ui/src/components/Avatar.js  |  4 ++--
 apps/comments-ui/src/components/Comment.js | 16 ++++++++--------
 apps/comments-ui/src/components/Like.js    |  4 ++--
 apps/comments-ui/src/components/More.js    |  2 +-
 apps/comments-ui/src/components/Reply.js   |  4 ++--
 apps/comments-ui/tailwind.config.js        |  9 +++++++++
 6 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/apps/comments-ui/src/components/Avatar.js b/apps/comments-ui/src/components/Avatar.js
index 7ef4eb0c22..a948e8ae0c 100644
--- a/apps/comments-ui/src/components/Avatar.js
+++ b/apps/comments-ui/src/components/Avatar.js
@@ -53,8 +53,8 @@ class Avatar extends React.Component {
     }
 
     render() {
-        let dimensionClasses = (this.props.size === 'small' ? 'w-8 h-8' : 'w-12 h-12');
-        let initialsClasses = (this.props.size === 'small' ? 'text-sm' : 'text-base');
+        let dimensionClasses = (this.props.size === 'small' ? 'w-8 h-8' : 'w-11 h-11');
+        let initialsClasses = (this.props.size === 'small' ? 'text-sm' : 'text-lg');
         let commentMember = (this.props.comment ? this.props.comment.member : this.context.member);
 
         const bgColor = this.HSLtoString(this.generateHSL());
diff --git a/apps/comments-ui/src/components/Comment.js b/apps/comments-ui/src/components/Comment.js
index 86d6ac311d..e2493ca8e8 100644
--- a/apps/comments-ui/src/components/Comment.js
+++ b/apps/comments-ui/src/components/Comment.js
@@ -36,21 +36,21 @@ const Comment = (props) => {
     } else {
         return (
             <>
-                <div className={`flex flex-col ${hasReplies ? 'mb-4' : 'mb-10'}`}>
+                <div className={`flex flex-col ${hasReplies ? 'mb-4' : 'mb-12'}`}>
                     <div>
-                        <div className="flex mb-3 justify-start items-center">
+                        <div className="flex justify-start items-center">
                             <Avatar comment={comment} saturation={props.avatarSaturation} />
-                            <div className="ml-[14px]">
-                                <h4 className="text-lg font-sans font-bold mb-1 tracking-tight dark:text-neutral-300">{comment.member.name}</h4>
-                                <h6 className="text-[13px] text-neutral-400 font-sans">{formatRelativeTime(comment.created_at)}</h6>
+                            <div className="ml-3">
+                                <h4 className="text-lg font-sans font-semibold mb-1 tracking-tight dark:text-neutral-300">{comment.member.name}</h4>
                             </div>
                         </div>
-                        <div className={`mb-3 pr-4 font-sans leading-normal ${isNotPublished && 'text-neutral-500'} dark:text-neutral-300`}>
-                            <p dangerouslySetInnerHTML={html} className="whitespace-pre-wrap"></p>
+                        <div className={`ml-14 mb-4 pr-4 font-sans leading-normal ${isNotPublished ? 'text-neutral-400' : 'text-neutral-900'} dark:text-neutral-300`}>
+                            <p dangerouslySetInnerHTML={html} className="whitespace-pre-wrap text-[16.5px] leading-normal"></p>
                         </div>
-                        <div className="flex gap-6">
+                        <div className="ml-14 flex gap-5 items-center">
                             <Like comment={comment} />
                             {isNotPublished || !props.parent && <Reply comment={comment} toggleReply={toggleReplyMode} isReplying={isInReplyMode} />}
+                            <h6 className="text-sm text-neutral-400 font-sans">{formatRelativeTime(comment.created_at)}</h6>
                             <More comment={comment} toggleEdit={toggleEditMode} />
                         </div>
                     </div>    
diff --git a/apps/comments-ui/src/components/Like.js b/apps/comments-ui/src/components/Like.js
index 92ab0d2f99..d88f2be1dc 100644
--- a/apps/comments-ui/src/components/Like.js
+++ b/apps/comments-ui/src/components/Like.js
@@ -14,8 +14,8 @@ function Like(props) {
     };
 
     return (
-        <button className="flex font-sans items-center dark:text-white" onClick={toggleLike}>
-            <LikeIcon className={`mr-[6px] stroke-black dark:stroke-white ${props.comment.liked ? 'fill-black dark:fill-white' : ''}`} />
+        <button className={`flex font-sans items-center text-sm dark:text-white ${props.comment.liked ? 'text-neutral-900' : 'text-neutral-400'}`} onClick={toggleLike}>
+            <LikeIcon className={`mr-[6px] stroke-neutral-400 ${props.comment.liked ? 'fill-neutral-900 stroke-neutral-900 dark:fill-white dark:stroke-white' : ''}`} />
             {props.comment.likes_count}
         </button>
     );
diff --git a/apps/comments-ui/src/components/More.js b/apps/comments-ui/src/components/More.js
index 058e32440d..13115717a8 100644
--- a/apps/comments-ui/src/components/More.js
+++ b/apps/comments-ui/src/components/More.js
@@ -21,7 +21,7 @@ const More = (props) => {
 
     return (
         <div className="relative">
-            {show ? <button onClick={toggleContextMenu}><MoreIcon className='gh-comments-icon gh-comments-icon-more dark:fill-white' /></button> : null}
+            {show ? <button onClick={toggleContextMenu}><MoreIcon className='gh-comments-icon gh-comments-icon-more fill-neutral-400 dark:fill-white' /></button> : null}
             {isContextMenuOpen ? <CommentContextMenu comment={comment} close={toggleContextMenu} toggleEdit={props.toggleEdit} /> : null}
         </div>
     );
diff --git a/apps/comments-ui/src/components/Reply.js b/apps/comments-ui/src/components/Reply.js
index 3f11dcf497..f3788275b3 100644
--- a/apps/comments-ui/src/components/Reply.js
+++ b/apps/comments-ui/src/components/Reply.js
@@ -6,8 +6,8 @@ function Reply(props) {
     const {member} = useContext(AppContext);
 
     return member ?
-        (<button className="flex font-sans items-center dark:text-white" onClick={props.toggleReply}>
-            <ReplyIcon className={`mr-[6px] stroke-dark dark:stroke-white ${props.isReplying ? 'fill-black dark:fill-white' : ''}`} />Reply
+        (<button className={`flex font-sans items-center text-sm dark:text-white ${props.isReplying ? 'text-neutral-900' : 'text-neutral-400'}`} onClick={props.toggleReply}>
+            <ReplyIcon className={`mr-[6px] stroke-neutral-400 dark:stroke-white ${props.isReplying ? 'fill-neutral-900 stroke-neutral-900 dark:fill-white dark:stroke-white' : ''}`} />Reply
         </button>) : null;
 }
 
diff --git a/apps/comments-ui/tailwind.config.js b/apps/comments-ui/tailwind.config.js
index 27cf3fe7a5..493a644072 100644
--- a/apps/comments-ui/tailwind.config.js
+++ b/apps/comments-ui/tailwind.config.js
@@ -91,6 +91,15 @@ module.exports = {
             '7xl': ['7.2rem', '1'],
             '8xl': ['9.6rem', '1'],
             '9xl': ['12.8rem', '1']
+        },
+        letterSpacing: {
+            tightest: '-.075em',
+            tighter: '-.05em',
+            tight: '-.018em',
+            normal: '0',
+            wide: '.018em',
+            wider: '.05em',
+            widest: '.1em'
         }
     },
     content: [