Added in a fake like along with dropdown together

apps/comments-ui/src/components/Comment.js

@@ -1,4 +1,5 @@
 import {formatRelativeTime} from '../utils/helpers';
+import {ReactComponent as LikeIcon} from '../images/icons/like.svg';
 import {ReactComponent as MoreIcon} from '../images/icons/more.svg';
 import React from 'react';
 import AppContext from '../AppContext';
@@ -28,21 +29,24 @@ class Comment extends React.Component {
         const html = {__html: comment.html};
 
         return (
-            <div className="flex mb-6">
+            <div className="flex mb-8">
                 <div>
-                    <div className="flex mb-2 space-x-4 justify-start items-center">
+                    <div className="flex mb-3 space-x-4 justify-start items-center">
                         <Avatar comment={comment} />
                         <div>
                             <h4 className="text-lg font-sans font-bold mb-1 tracking-tight dark:text-neutral-300">{comment.member.name}</h4>
                             <h6 className="text-xs text-neutral-400 font-sans">{formatRelativeTime(comment.created_at)}</h6>
                         </div>
                     </div>
-                    <div className="ml-14 mb-2 font-sans leading-normal dark:text-neutral-300">
+                    <div className="ml-14 mb-3 pr-4 font-sans leading-normal dark:text-neutral-300">
                         <p dangerouslySetInnerHTML={html} className="whitespace-pre-wrap"></p>
                     </div>
-                    <div className="ml-14">
-                        <button onClick={this.toggleContextMenu}><MoreIcon className='gh-comments-icon gh-comments-icon-more -m-[3px]' /></button>
-                        {this.state.isContextMenuOpen ? <CommentContextMenu comment={comment} /> : null}
+                    <div className="ml-14 flex">
+                        <button className="flex font-sans mr-5"><LikeIcon className='gh-comments-icon gh-comments-icon-like mr-1' />3</button>
+                        <div className="relative">
+                            <button onClick={this.toggleContextMenu}><MoreIcon className='gh-comments-icon gh-comments-icon-more -m-[3px]' /></button>
+                            {this.state.isContextMenuOpen ? <CommentContextMenu comment={comment} /> : null}
+                        </div>
                     </div>
                 </div>
             </div>

apps/comments-ui/src/components/modals/AuthorContextMenu.js

@@ -17,14 +17,14 @@ class AuthorContextMenu extends React.Component {
 
     render() {
         return (
-            <>
+            <div class="flex flex-col">
                 <button className="w-full mb-3 text-left">
                     Edit
                 </button>
                 <button className="w-full text-left" onClick={this.deleteComment}>
                     Delete
                 </button>
-            </>
+            </div>
         );
     }
 }

apps/comments-ui/src/components/modals/CommentContextMenu.js

@@ -24,7 +24,7 @@ class CommentContextMenu extends React.Component {
         const comment = this.props.comment;
 
         return (
-            <div className="bg-white absolute font-sans rounded py-3 px-4 drop-shadow-xl text-sm">
+            <div className="bg-white absolute font-sans rounded py-3 px-4 drop-shadow-xl text-sm whitespace-nowrap">
                 {this.isAuthor ? <AuthorContextMenu comment={comment}/> : (this.isAdmin ? <AdminContextMenu comment={comment}/> : <NotAuthorContextMenu comment={comment}/>)}
             </div>
         );

apps/comments-ui/src/images/icons/more.svg

@@ -1,5 +1,5 @@
 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M5 11.5C5.82843 11.5 6.5 10.8284 6.5 10C6.5 9.17157 5.82843 8.5 5 8.5C4.17157 8.5 3.5 9.17157 3.5 10C3.5 10.8284 4.17157 11.5 5 11.5Z" fill="black"/>
-<path d="M10 11.5C10.8284 11.5 11.5 10.8284 11.5 10C11.5 9.17157 10.8284 8.5 10 8.5C9.17157 8.5 8.5 9.17157 8.5 10C8.5 10.8284 9.17157 11.5 10 11.5Z" fill="black"/>
-<path d="M15 11.5C15.8284 11.5 16.5 10.8284 16.5 10C16.5 9.17157 15.8284 8.5 15 8.5C14.1716 8.5 13.5 9.17157 13.5 10C13.5 10.8284 14.1716 11.5 15 11.5Z" fill="black"/>
+<path d="M5 13.5C5.82843 13.5 6.5 12.8284 6.5 12C6.5 11.1716 5.82843 10.5 5 10.5C4.17157 10.5 3.5 11.1716 3.5 12C3.5 12.8284 4.17157 13.5 5 13.5Z" fill="black"/>
+<path d="M10 13.5C10.8284 13.5 11.5 12.8284 11.5 12C11.5 11.1716 10.8284 10.5 10 10.5C9.17157 10.5 8.5 11.1716 8.5 12C8.5 12.8284 9.17157 13.5 10 13.5Z" fill="black"/>
+<path d="M15 13.5C15.8284 13.5 16.5 12.8284 16.5 12C16.5 11.1716 15.8284 10.5 15 10.5C14.1716 10.5 13.5 11.1716 13.5 12C13.5 12.8284 14.1716 13.5 15 13.5Z" fill="black"/>
 </svg>