fixes styling of emoji picker

src/components/molecules/emoji-picker/index.tsx

@@ -3,11 +3,24 @@ import Picker, { SKIN_TONE_NEUTRAL } from "emoji-picker-react"
 import React from "react"
 import Button from "../../fundamentals/button"
 import HappyIcon from "../../fundamentals/icons/happy-icon"
+import "./style.css"
 
 type indexProps = {
   onEmojiClick: (emoji: string) => void
 }
 
+const groupNames = {
+  smileys_people: "Smileys & People",
+  animals_nature: "Animals & Nature",
+  food_drink: "Food & Drink",
+  travel_places: "Travel & Places",
+  activities: "Activities",
+  objects: "Objects",
+  symbols: "Symbols",
+  flags: "Flags",
+  recently_used: "Recently Used",
+}
+
 const EmojiPicker: React.FC<indexProps> = ({ onEmojiClick }) => {
   return (
     <DropdownMenu.Root>
@@ -32,7 +45,12 @@ const EmojiPicker: React.FC<indexProps> = ({ onEmojiClick }) => {
           skinTone={SKIN_TONE_NEUTRAL}
           groupNames={{ smileys_people: "PEOPLE" }}
           native
-          pickerStyle={{ border: "none" }}
+          pickerStyle={{
+            border: "none",
+          }}
+          disableSkinTonePicker={true}
+          searchPlaceholder={"Search Emoji..."}
+          groupNames={groupNames}
         />
       </DropdownMenu.Content>
     </DropdownMenu.Root>

src/components/molecules/emoji-picker/style.css

@@ -0,0 +1,91 @@
+.emoji-picker-react {
+    padding: 16px;
+}
+
+.emoji-picker-react .emoji-group {
+    padding: 0;
+    font-size: 12px;
+    font-weight: 400;
+}
+
+.emoji-picker-react .emoji-group:before {
+    font-family: "Inter";
+    text-transform: none !important;
+    font-size: 12px;
+    font-weight: 600;
+}
+
+.native {
+    font-size: 24px;
+}
+
+.emoji-picker-react input.emoji-search {
+    background-color: #F9FAFB;
+    border-radius: 4px;
+    border-color: #E5E7EB;
+    margin: 0;
+    width: 100%;
+    font-size: 12px;
+    font-family: "Inter";
+    color: #111827;
+    caret-color: #7C3AED;
+}
+
+.emoji-picker-react input.emoji-search::placeholder {
+    font-size: 12px;
+    font-family: "Inter";
+    color: #9CA3AF;
+}
+
+.emoji-picker-react .emoji-categories button.icn-smileys_people {
+ background-image: url("../../../assets/svg-2.0/happy.svg")
+}
+
+.emoji-picker-react .emoji-categories button.icn-animals_nature {
+    background-image: url("../../../assets/svg-2.0/sprout.svg")
+}
+
+.emoji-picker-react .emoji-categories button.icn-food_drink {
+    background-image: url("../../../assets/svg-2.0/carrot.svg")
+}
+
+.emoji-picker-react .emoji-categories button.icn-travel_places {
+    background-image: url("../../../assets/svg-2.0/plane.svg")
+}
+
+.emoji-picker-react .emoji-categories button.icn-activities {
+    background-image: url("../../../assets/svg-2.0/controller.svg")
+}
+
+.emoji-picker-react .emoji-categories button.icn-objects {
+    background-image: url("../../../assets/svg-2.0/lightbulb.svg")
+}
+
+.emoji-picker-react .emoji-categories button.icn-symbols {
+    background-image: url("../../../assets/svg-2.0/heart.svg")
+}
+
+.emoji-picker-react .emoji-categories button.icn-flags {
+    background-image: url("../../../assets/svg-2.0/flag.svg")
+}
+
+.emoji-picker-react .emoji-categories button {
+    width: 32px;
+    height: 32px;
+    border-radius: 4px;
+}
+
+.emoji-picker-react .emoji-categories button.active {
+    background-color: white;
+}
+
+.emoji-picker-react .emoji-categories {
+    background-color: #F3F4F6;
+    padding: 4px;
+    border-radius: 4px;
+    margin-bottom: 8px;
+}
+
+.emoji-picker-react .active-category-indicator-wrapper .active-category-indicator {
+    display: none;
+}

src/components/molecules/timeline-events/exchange.tsx

@@ -52,14 +52,16 @@ const Exchange: React.FC<ExchangeProps> = ({ event }) => {
   const { store } = useAdminStore()
 
   useEffect(() => {
-    if (!store) return
+    if (!store) {
+      return
+    }
 
     if (!store.payment_link_template) {
       setPaymentFormatWarning(
         "No payment link has been set for this store. Please update store settings."
       )
     }
-    if (store.payment_link_template.indexOf("{cart_id}") === -1) {
+    if (store.payment_link_template?.indexOf("{cart_id}") === -1) {
       setPaymentFormatWarning(
         "Store payment link does not have the default format, as it does not contain '{cart_id}'. Either update the payment link to include '{cart_id}' or update this method to reflect the format of your payment link."
       )