Added in general styles to the dropdown

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

@@ -17,11 +17,9 @@ class AdminContextMenu extends React.Component {
 
     render() {
         return (
-            <div className='bg-white absolute'>
-                <button onClick={this.deleteComment}>
-                    Hide comment
-                </button>
-            </div>
+            <button onClick={this.deleteComment}>
+                Hide comment
+            </button>
         );
     }
 }

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

@@ -17,14 +17,14 @@ class AuthorContextMenu extends React.Component {
 
     render() {
         return (
-            <div className='bg-white absolute'>
-                <button>
+            <>
+                <button className="w-full mb-3 text-left">
                     Edit
                 </button>
-                <button onClick={this.deleteComment}>
+                <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>
+            <div className="bg-white absolute font-sans rounded py-3 px-4 drop-shadow-xl text-sm">
                 {this.isAuthor ? <AuthorContextMenu comment={comment}/> : (this.isAdmin ? <AdminContextMenu comment={comment}/> : <NotAuthorContextMenu comment={comment}/>)}
             </div>
         );

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

@@ -17,11 +17,9 @@ class NotAuthorContextMenu extends React.Component {
 
     render() {
         return (
-            <div className='bg-white absolute'>
-                <button onClick={this.reportComment}>
-                    Report comment
-                </button>
-            </div>
+            <button onClick={this.reportComment}>
+                Report comment
+            </button>
         );
     }
 }

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

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.0006 17.1242L3.60858 10.4576C3.04681 9.89625 2.67602 9.17229 2.54882 8.38838C2.42162 7.60448 2.54446 6.80042 2.89992 6.09025V6.09025C3.16795 5.55433 3.55949 5.08977 4.04228 4.73484C4.52507 4.37991 5.08528 4.14478 5.67675 4.04882C6.26823 3.95285 6.87404 3.9988 7.44428 4.18288C8.01452 4.36696 8.53285 4.6839 8.95658 5.10758L10.0006 6.15092L11.0446 5.10758C11.4683 4.6839 11.9866 4.36696 12.5569 4.18288C13.1271 3.9988 13.7329 3.95285 14.3244 4.04882C14.9159 4.14478 15.4761 4.37991 15.9589 4.73484C16.4417 5.08977 16.8332 5.55433 17.1012 6.09025C17.4562 6.80014 17.5789 7.60372 17.4518 8.38718C17.3247 9.17064 16.9544 9.89427 16.3932 10.4556L10.0006 17.1242Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

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">
-<circle cx="5" cy="10" r="1.5" fill="black"/>
-<circle cx="10" cy="10" r="1.5" fill="black"/>
-<circle cx="15" cy="10" r="1.5" fill="black"/>
+<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"/>
 </svg>

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

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.8438 4.12365C7.84353 3.89764 7.77519 3.67694 7.64769 3.49033C7.52018 3.30372 7.33942 3.15984 7.12897 3.07744C6.91851 2.99503 6.68812 2.97793 6.4678 3.02836C6.24748 3.07879 6.04746 3.1944 5.89381 3.36015L1.79806 7.79565C1.60641 8.00343 1.5 8.27573 1.5 8.5584C1.5 8.84106 1.60641 9.11337 1.79806 9.32115L5.89156 13.7566C6.04521 13.9224 6.24523 14.038 6.46555 14.0884C6.68586 14.1389 6.91626 14.1218 7.12672 14.0394C7.33717 13.957 7.51793 13.8131 7.64544 13.6265C7.77294 13.4399 7.84128 13.2192 7.84156 12.9931V10.8084H12.3416C13.8334 10.8084 15.2641 11.401 16.319 12.4559C17.3739 13.5108 17.9666 14.9416 17.9666 16.4334V11.9334C17.9666 10.4416 17.3739 9.01082 16.319 7.95592C15.2641 6.90103 13.8334 6.3084 12.3416 6.3084H7.84156L7.8438 4.12365Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>