fix: choose appropriate theme for emoji picker

uigywnkiub · Jul 28, 2024 · df4b214 · df4b214
1 parent 15b699b
commit df4b214
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 37 deletions.
diff --git a/app/ui/categories/custom-emoji-picker.tsx b/app/ui/categories/custom-emoji-picker.tsx
@@ -1,5 +1,7 @@
 import { memo, useMemo } from 'react'
 
+import { useTheme } from 'next-themes'
+
 import EmojiPicker, {
   EmojiClickData,
   SkinTonePickerLocation,
@@ -13,6 +15,7 @@ type TProps = {
 }
 
 function CustomEmojiPicker({ showEmojiPicker, onEmojiClick }: TProps) {
+  const { theme } = useTheme()
   const emojiPicker = useMemo(
     () => (
       <EmojiPicker
@@ -21,13 +24,13 @@ function CustomEmojiPicker({ showEmojiPicker, onEmojiClick }: TProps) {
         searchPlaceHolder='Search emoji...'
         // width={300}
         // height={400}
-        theme={Theme.AUTO}
+        theme={theme === 'system' ? Theme.AUTO : (theme as Theme)}
         suggestedEmojisMode={SuggestionMode.RECENT}
         skinTonePickerLocation={SkinTonePickerLocation.PREVIEW}
         className='my-2'
       />
     ),
-    [onEmojiClick],
+    [onEmojiClick, theme],
   )
 
   return <>{showEmojiPicker && emojiPicker}</>

diff --git a/package.json b/package.json
@@ -26,11 +26,11 @@
     "@vercel/speed-insights": "^1.0.12",
     "date-fns": "^3.6.0",
     "emoji-picker-react": "^4.11.1",
-    "framer-motion": "^11.3.17",
+    "framer-motion": "^11.3.19",
     "mongoose": "^8.5.1",
     "mongoose-encryption-decryption": "^1.2.1",
     "next": "14.2.5",
-    "next-auth": "^5.0.0-beta.19",
+    "next-auth": "^5.0.0-beta.20",
     "next-themes": "^0.3.0",
     "next13-progressbar": "^1.2.1",
     "react": "^18.3.1",
@@ -49,7 +49,7 @@
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.0.0",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
-    "@types/node": "^20.14.12",
+    "@types/node": "^20.14.13",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@types/react-is": "^18.3.0",
@@ -58,7 +58,7 @@
     "eslint": "^8.57.0",
     "eslint-config-next": "14.2.5",
     "eslint-config-prettier": "^9.1.0",
-    "husky": "^9.1.2",
+    "husky": "^9.1.3",
     "jsdom": "^24.1.1",
     "lint-staged": "^15.2.7",
     "postcss": "^8.4.40",

diff --git a/yarn.lock b/yarn.lock
@@ -35,15 +35,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@auth/core@npm:0.32.0":
-  version: 0.32.0
-  resolution: "@auth/core@npm:0.32.0"
+"@auth/core@npm:0.34.2":
+  version: 0.34.2
+  resolution: "@auth/core@npm:0.34.2"
   dependencies:
     "@panva/hkdf": "npm:^1.1.1"
     "@types/cookie": "npm:0.6.0"
     cookie: "npm:0.6.0"
     jose: "npm:^5.1.3"
-    oauth4webapi: "npm:^2.9.0"
+    oauth4webapi: "npm:^2.10.4"
     preact: "npm:10.11.3"
     preact-render-to-string: "npm:5.2.3"
   peerDependencies:
@@ -57,7 +57,7 @@ __metadata:
       optional: true
     nodemailer:
       optional: true
-  checksum: 10c0/8e48d6938feca1ce4af76983cbe070684c1b10cf1f3f6799492376d4ef81559c2f841f46da07ed9e9f59d2356abe649937deeefa36fa5f94ff5c43ab5466963e
+  checksum: 10c0/c4f0899f652200fd8516fc9c715dbc0c704fd7b8f99a4470fe398052c385284896cbc18e52028a8688e4d274a4972cff8acc50b28965268904679bef8ff15707
   languageName: node
   linkType: hard
 
@@ -6017,12 +6017,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/node@npm:^20.14.12":
-  version: 20.14.12
-  resolution: "@types/node@npm:20.14.12"
+"@types/node@npm:^20.14.13":
+  version: 20.14.13
+  resolution: "@types/node@npm:20.14.13"
   dependencies:
     undici-types: "npm:~5.26.4"
-  checksum: 10c0/59bc5fa11fdd23fd517f859063118f54a1ab53d3399ef63c926f8902429d7453abc0db22ef4b0a6110026b6ab81b6472fee894e1d235c24b01a0b3e10cfae0bb
+  checksum: 10c0/10bb3ece675308742301c652ab8c6cb88b1ebddebed22316103c58f94fe7eff131edd5f679e487c19077fadb6b5e6b1ad9a60a2cee2869aa1f20452b9761d570
   languageName: node
   linkType: hard
 
@@ -8776,7 +8776,7 @@ __metadata:
     "@testing-library/dom": "npm:^10.4.0"
     "@testing-library/react": "npm:^16.0.0"
     "@trivago/prettier-plugin-sort-imports": "npm:^4.3.0"
-    "@types/node": "npm:^20.14.12"
+    "@types/node": "npm:^20.14.13"
     "@types/react": "npm:^18.3.3"
     "@types/react-dom": "npm:^18.3.0"
     "@types/react-is": "npm:^18.3.0"
@@ -8789,14 +8789,14 @@ __metadata:
     eslint: "npm:^8.57.0"
     eslint-config-next: "npm:14.2.5"
     eslint-config-prettier: "npm:^9.1.0"
-    framer-motion: "npm:^11.3.17"
-    husky: "npm:^9.1.2"
+    framer-motion: "npm:^11.3.19"
+    husky: "npm:^9.1.3"
     jsdom: "npm:^24.1.1"
     lint-staged: "npm:^15.2.7"
     mongoose: "npm:^8.5.1"
     mongoose-encryption-decryption: "npm:^1.2.1"
     next: "npm:14.2.5"
-    next-auth: "npm:^5.0.0-beta.19"
+    next-auth: "npm:^5.0.0-beta.20"
     next-themes: "npm:^0.3.0"
     next13-progressbar: "npm:^1.2.1"
     postcss: "npm:^8.4.40"
@@ -9009,9 +9009,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"framer-motion@npm:^11.3.17":
-  version: 11.3.17
-  resolution: "framer-motion@npm:11.3.17"
+"framer-motion@npm:^11.3.19":
+  version: 11.3.19
+  resolution: "framer-motion@npm:11.3.19"
   dependencies:
     tslib: "npm:^2.4.0"
   peerDependencies:
@@ -9025,7 +9025,7 @@ __metadata:
       optional: true
     react-dom:
       optional: true
-  checksum: 10c0/4ac6f224416a965f1cd406a66413cc8b5dea52eb476affff8689111f215be457cd231cd94e2bfa54b4b625bf672eab87633c2391dee7237653decff3ca52cc39
+  checksum: 10c0/323a844cdd5990e6cdaf4816a6ee8c32672ffa4892a2e350a7b9daa66495c368efbfac90ad9c6bc02c155b9bd8bc2632761fa15823367c6a32be2906c6783735
   languageName: node
   linkType: hard
 
@@ -9581,12 +9581,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"husky@npm:^9.1.2":
-  version: 9.1.2
-  resolution: "husky@npm:9.1.2"
+"husky@npm:^9.1.3":
+  version: 9.1.3
+  resolution: "husky@npm:9.1.3"
   bin:
     husky: bin.js
-  checksum: 10c0/7e25c31ef98ac35d357147005d6e5d87db2abca7297e7c5aac931de3699acd32a3f1a9f8e53f101daeab818f0cfe9d18fa7e34f7cf5c9c4437c3665123456dea
+  checksum: 10c0/3fb8657ff97f529dab0b9a0afa6b818ec604f60c39abc13e8e3f4263ea30a3aa6fff7a1b625b8a53700899ce0ea2f5f656981c46b8f1837cfd84ddb6da883fb2
   languageName: node
   linkType: hard
 
@@ -11343,15 +11343,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"next-auth@npm:^5.0.0-beta.19":
-  version: 5.0.0-beta.19
-  resolution: "next-auth@npm:5.0.0-beta.19"
+"next-auth@npm:^5.0.0-beta.20":
+  version: 5.0.0-beta.20
+  resolution: "next-auth@npm:5.0.0-beta.20"
   dependencies:
-    "@auth/core": "npm:0.32.0"
+    "@auth/core": "npm:0.34.2"
   peerDependencies:
     "@simplewebauthn/browser": ^9.0.1
     "@simplewebauthn/server": ^9.0.2
-    next: ^14 || ^15.0.0-0
+    next: ^14.0.0-0 || ^15.0.0-0
     nodemailer: ^6.6.5
     react: ^18.2.0 || ^19.0.0-0
   peerDependenciesMeta:
@@ -11361,7 +11361,7 @@ __metadata:
       optional: true
     nodemailer:
       optional: true
-  checksum: 10c0/30804eae158b9e57cdeeeef81d4aee10aabff8c415403b34cab673eb5eeadfe2232d77d782a7b1ad862bb3dc60faacf51794a23e52679243d156531609b7875f
+  checksum: 10c0/c10430f905822d7b9f8a4d96000f7760d8842a41aeaad9318e72038a6b6556a292772d39e906ea0a26aed988ec97a014cc3c0c04035211f474c7603fe0078979
   languageName: node
   linkType: hard
 
@@ -11561,10 +11561,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"oauth4webapi@npm:^2.9.0":
-  version: 2.10.4
-  resolution: "oauth4webapi@npm:2.10.4"
-  checksum: 10c0/e24f4febc82eae738405038fd8fa27a473b45afe18b01ef939ec328a0a0b47ce4fa7d4fcf1041635372374a9dc9ce6f1e67bbc9b633e26c659d664a9c462898b
+"oauth4webapi@npm:^2.10.4":
+  version: 2.11.1
+  resolution: "oauth4webapi@npm:2.11.1"
+  checksum: 10c0/69446298b68ac18179a4e8c818e2ad5610e39271405b8af7df1288e8180d6b9ca4051bd7563d9be1e94aa558453290051fdc7a441ed91a3ac238028908660a79
   languageName: node
   linkType: hard