frontend: Changed the background color for the dark mode. Switched fr…

…om Radix Icons to Lucide Icons. Improved notiication and theme switcher styles.

packages/frontend/package.json

@@ -14,11 +14,11 @@
     "@mysten/bcs": "^0.11.1",
     "@mysten/dapp-kit": "^0.13.0",
     "@mysten/sui.js": "^0.54.1",
-    "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-toggle": "^1.0.3",
     "@radix-ui/themes": "^3.0.3",
     "@tanstack/react-query": "^5.36.0",
     "clsx": "^2.1.1",
+    "lucide-react": "^0.378.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hot-toast": "^2.4.1",

packages/frontend/src/components/AnimatedBackground/index.tsx

@@ -9,7 +9,7 @@ const AnimatedBackground = () => {
     <svg
       // width="100%"
       // height="100%"
-      id="svg"
+      // id="svg"
       viewBox="0 0 1440 590"
       xmlns="http://www.w3.org/2000/svg"
       className="absolute bottom-0 left-0 -z-50 object-cover opacity-70 transition delay-150 duration-300 ease-in-out"

packages/frontend/src/components/Notification.tsx

@@ -1,6 +1,6 @@
-import { Cross1Icon } from '@radix-ui/react-icons'
 import { Button } from '@radix-ui/themes'
 import c from 'clsx'
+import { XIcon } from 'lucide-react'
 import { FC, PropsWithChildren } from 'react'
 import toast, { ToastType } from 'react-hot-toast'
 
@@ -21,10 +21,10 @@ const Notification: FC<PropsWithChildren<INotification>> = ({
       {isCloseButtonVisible && (
         <Button
           variant="ghost"
-          className="cursor-pointer text-sds-dark dark:text-sds-light"
+          className="cursor-pointer pr-0 text-sds-dark dark:text-sds-light"
           onClick={() => toast.dismiss(id)}
         >
-          <Cross1Icon />
+          <XIcon />
         </Button>
       )}
     </div>

packages/frontend/src/components/ThemeSwitcher.tsx

@@ -1,6 +1,6 @@
 import { detectBrowserTheme } from '@/helpers/theme'
-import { MoonIcon, SunIcon } from '@radix-ui/react-icons'
 import * as Toggle from '@radix-ui/react-toggle'
+import { MoonIcon, SunIcon } from 'lucide-react'
 import { useEffect } from 'react'
 import { useLocalStorage } from 'react-use'
 
@@ -20,11 +20,15 @@ const ThemeSwitcher = () => {
 
   return (
     <Toggle.Root
-      className="rounded-full border border-sds-dark p-2 dark:border-sds-light"
+      className="rounded-full p-2 shadow"
       aria-label="Toggle theme"
       onPressedChange={toggleTheme}
     >
-      {theme === 'dark' ? <SunIcon /> : <MoonIcon />}
+      {theme === 'dark' ? (
+        <SunIcon className="h-5 w-5" />
+      ) : (
+        <MoonIcon className="h-5 w-5" />
+      )}
     </Toggle.Root>
   )
 }

packages/frontend/src/providers/ThemeProvider.tsx

@@ -2,7 +2,11 @@ import { Theme } from '@radix-ui/themes'
 import { FC, PropsWithChildren } from 'react'
 
 const ThemeProvider: FC<PropsWithChildren> = ({ children }) => {
-  return <Theme className="w-full">{children}</Theme>
+  return (
+    <Theme className="w-full bg-sds-light text-sds-dark dark:bg-sds-dark dark:text-sds-light">
+      {children}
+    </Theme>
+  )
 }
 
 export default ThemeProvider

packages/frontend/src/styles/index.css

@@ -6,7 +6,7 @@
   @apply font-inter;
 
   --sds-light: #ffffffde;
-  --sds-dark: #242424;
+  --sds-dark: #011631;
   --sds-pink: #fed5f4;
   --sds-blue: #4da2ff;