A few quick tweaks to emoji component

web/src/components/EmojiReaction/EmojiReaction.js

@@ -38,12 +38,15 @@ const EmojiReaction = ({ emotes, callback = () => {} }) => {
 
   return [
     <div className="flex justify-between">
-      <Fab variant="round" aria-describedby={popoverId} onClick={togglePopover}>
-        <Svg name="dots-vertical" />
-      </Fab>
+        <Fab size="medium" variant="round" aria-describedby={popoverId} onClick={togglePopover}>
+          <div className="bg-gray-200 border-2 m-px border-gray-300 text-gray-500 absolute inset-0 rounded-full flex justify-center items-center">
+            <Svg name="dots-vertical" />
+          </div>
+        </Fab>
+
       <div>
-        {emotes.map((emote) => (
-          <IconButton onClick={() => handleEmojiClick(emote.emoji)}>
+        {emotes.map((emote, i) => (
+          <IconButton key={`${emote.emoji}--${i}`} onClick={() => handleEmojiClick(emote.emoji)}>
             {emote.emoji} <span>{emote.count}</span>
           </IconButton>
         ))}
@@ -63,8 +66,8 @@ const EmojiReaction = ({ emotes, callback = () => {} }) => {
         horizontal: 'center',
       }}
     >
-      {emojiMenu.map((emoji) => (
-        <IconButton onClick={() => handleEmojiClick(emoji)}>{emoji}</IconButton>
+      {emojiMenu.map((emoji, i) => (
+        <IconButton key={`${emoji}-${i}}`} onClick={() => handleEmojiClick(emoji)}>{emoji}</IconButton>
       ))}
     </Popover>,
   ]

web/src/components/Parts/Parts.js

@@ -1,6 +1,7 @@
 import { useMutation, useFlash } from '@redwoodjs/web'
 import { Link, routes } from '@redwoodjs/router'
 import { Image as CloudinaryImage } from 'cloudinary-react'
+import EmojiiReaction from 'src/components/EmojiReaction/EmojiReaction'
 
 import avatar from 'src/assets/harold.jpg'
 
@@ -53,6 +54,17 @@ const PartsList = ({ parts }) => {
   }
 
   return (
+    <>
+      <EmojiiReaction emotes={[
+      {
+         emoji: '❤️',
+         count: 3,
+      },
+      {
+         emoji: '😁',
+         count: 2,
+      },
+   ]} callback={(e) => console.log(e)} />
     <div className="max-w-xs sm:max-w-sm md:max-w-2xl lg:max-w-5xl xl:max-w-6xl mx-auto grid gap-8 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid- cols-4">
       {parts.map((part) => {
         return (
@@ -82,7 +94,7 @@ const PartsList = ({ parts }) => {
             </div>
           </Link>
       )})}
-    </div>
+    </div></>
   )
 }
 

web/src/components/Svg/Svg.js

@@ -11,7 +11,7 @@ const Svg = ({name, className: className2, strokeWidth = 2}) => {
       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={strokeWidth} d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
     </svg>,
     "dots-vertical": <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={strokeWidth} d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
     </svg>
   }
 

web/src/index.css

@@ -36,7 +36,7 @@
 
 body {
   /* TODO can I use a tailwind class here? */
-  background-color: #4a5568;
+  background-color: #E5E5E5;
 }
 
 button, input, label, textarea {