fix: [GSW-2040] Light mode UI

gnoswap-labs · Jan 17, 2025 · f76d978 · f76d978
1 parent 2acfd27
commit f76d978
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 4 deletions.
diff --git a/...nents/common/header/wallet-connector-button/wallet-connector-menu/WalletConnectorMenu.tsx b/...nents/common/header/wallet-connector-button/wallet-connector-menu/WalletConnectorMenu.tsx
@@ -3,6 +3,7 @@ import { useAtomValue } from "jotai";
 import { useTranslation } from "next-i18next";
 import React, { useCallback, useMemo, useRef, useState } from "react";
 import Link from "next/link";
+import { useTheme } from "@emotion/react";
 
 import { SOCIAL_WALLET_EXTERNAL_URL } from "@constants/external-url.contant";
 import Button, { ButtonHierarchy } from "@components/common/button/Button";
@@ -111,6 +112,7 @@ const WalletConnectorMenu: React.FC<WalletConnectorMenuProps> = ({
   const { i18n, t } = useTranslation();
   const { getAccountUrl } = useGnoscanUrl();
   const network = useAtomValue(CommonState.network);
+  const theme = useTheme();
 
   const [copied, setCopied] = useState(false);
   const copyClick = async () => {
@@ -164,7 +166,7 @@ const WalletConnectorMenu: React.FC<WalletConnectorMenuProps> = ({
                 {formatAddress(account?.address || "")}
                 {breakpoint === DEVICE_TYPE.MOBILE && (
                   <Tooltip floatClassName="test" FloatingContent={<SocialWalletNotificationTooltip />} placement="top">
-                    <IconInfo className="tooltip" fill="#596782" size={16} />
+                    <IconInfo className="tooltip" fill={theme.themeKey === "dark" ? "#596782" : "#90A2C0"} size={16} />
                   </Tooltip>
                 )}
               </span>

diff --git a/packages/web/src/components/common/icons/defaultIcon/IconEmailLogo.tsx b/packages/web/src/components/common/icons/defaultIcon/IconEmailLogo.tsx
@@ -1,4 +1,8 @@
+import { useTheme } from "@emotion/react";
+
 const IconEmailLogo = ({ className }: { className?: string }) => {
+  const theme = useTheme();
+
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -8,10 +12,15 @@ const IconEmailLogo = ({ className }: { className?: string }) => {
       fill="none"
       className={className}
     >
-      <path d="M14.8574 3H1.14307V13H14.8574V3Z" stroke="#596782" stroke-linecap="round" stroke-linejoin="round" />
+      <path
+        d="M14.8574 3H1.14307V13H14.8574V3Z"
+        stroke={theme.themeKey === "dark" ? "#596782" : "#90A2C0"}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
       <path
         d="M1.71436 3.03711L7.99951 8.66602L14.2858 3.03711"
-        stroke="#596782"
+        stroke={theme.themeKey === "dark" ? "#596782" : "#90A2C0"}
         strokeLinecap="round"
         strokeLinejoin="round"
       />

diff --git a/packages/web/src/providers/social-wallet-provider/SocialWalletProvider.tsx b/packages/web/src/providers/social-wallet-provider/SocialWalletProvider.tsx
@@ -6,7 +6,12 @@ import { useGnoswapContext } from "@hooks/common/use-gnoswap-context";
 import { useAtom } from "jotai";
 import { CommonState, WalletState } from "@states/index";
 import { SocialWalletClient } from "@common/clients/wallet-client/social/social-wallet-client";
-import { ACCOUNT_SESSION_INFO_KEY, GNOSWAP_SOCIAL_LOGIN_TYPE_KEY, GNOSWAP_WALLET_TYPE_KEY } from "@states/common";
+import {
+  ACCOUNT_SESSION_INFO_KEY,
+  GNOSWAP_SOCIAL_LOGIN_TYPE_KEY,
+  GNOSWAP_WALLET_TYPE_KEY,
+  SOCIAL_WALLET_MODAL_SHOWN_IN_SESSION,
+} from "@states/common";
 import { SocialLoginType } from "src/types/wallet.types";
 import { useConnectedSocialWalletModal } from "@hooks/wallet/ui/use-connected-social-wallet-modal";
 
@@ -40,6 +45,7 @@ export const SocialWalletProvider = ({ children }: { children: React.ReactNode }
     sessionStorage.removeItem(GNOSWAP_WALLET_TYPE_KEY);
     sessionStorage.removeItem(GNOSWAP_SOCIAL_LOGIN_TYPE_KEY);
     sessionStorage.removeItem(ACCOUNT_SESSION_INFO_KEY);
+    sessionStorage.removeItem(SOCIAL_WALLET_MODAL_SHOWN_IN_SESSION);
   };
 
   const resetConnectingState = (delay = 1000) => {