Image fix, height fix

Web3Auth · Sep 19, 2024 · cc1efac · cc1efac
1 parent 46ea53c
commit cc1efac
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 14 deletions.
diff --git a/packages/ui/src/components/ExternalWallet/ExternalWalletInstall.tsx b/packages/ui/src/components/ExternalWallet/ExternalWalletInstall.tsx
@@ -65,12 +65,14 @@ export default function ExternalWalletInstall(props: ExternalWalletInstallProps)
   const { connectButton, goBack, closeModal } = props;
   const [t] = useTranslation(undefined, { i18n });
 
-  const deviceDetails = useMemo<{ platform: platform; browser: browser; os: mobileOs }>(() => {
+  const deviceDetails = useMemo<{ platform: platform; browser: browser; os: mobileOs; logoLight: string; logoDark: string }>(() => {
     const browser = Bowser.getParser(window.navigator.userAgent);
     return {
       platform: browser.getPlatformType() as platform,
       browser: browser.getBrowserName().toLowerCase() as browser,
       os: browser.getOSName() as mobileOs,
+      logoLight: `${browser.getBrowserName().toLowerCase()}-light`,
+      logoDark: `${browser.getBrowserName().toLowerCase()}-dark`,
     };
   }, []);
 
@@ -82,12 +84,22 @@ export default function ExternalWalletInstall(props: ExternalWalletInstallProps)
       if (!appId) return acc;
       const appUrl = getMobileInstallLink(os as mobileOs, appId);
       if (!appUrl) return acc;
+      const logoLight = `${os}-light`;
+      const logoDark = `${os}-dark`;
       acc.push(
         <li key={os} className="w-full">
           <a href={appUrl} rel="noopener noreferrer" target="_blank">
-            <Button type="button" variant="tertiary" className="w-full !justify-start flex items-center gap-2">
-              <Image imageId={os} hoverImageId={os} height="30" width="30" isButton />
-              <span>{t("modal.external.install-mobile-app", { os: getOsName(os) })}</span>
+            <Button type="button" variant="tertiary" className="w-full !justify-start flex items-center gap-2 wallet-link-btn">
+              <Image
+                imageId={logoLight}
+                darkImageId={logoDark}
+                hoverImageId={logoLight}
+                darkHoverImageId={logoDark}
+                height="28"
+                width="28"
+                isButton
+              />
+              <span className="text-sm font-medium">{t("modal.external.install-mobile-app", { os: getOsName(os) })}</span>
             </Button>
           </a>
         </li>
@@ -106,9 +118,19 @@ export default function ExternalWalletInstall(props: ExternalWalletInstallProps)
     const installLink = browserExtensionUrl ? (
       <li key={deviceDetails.browser}>
         <a href={browserExtensionUrl} rel="noopener noreferrer" target="_blank">
-          <Button type="button" variant="tertiary" className="w-full !justify-start flex items-center gap-2">
-            <Image imageId={deviceDetails.browser} hoverImageId={deviceDetails.browser} height="30" width="30" isButton />
-            <span>{t("modal.external.install-browser-extension", { browser: getBrowserName(deviceDetails.browser) })}</span>
+          <Button type="button" variant="tertiary" className="w-full !justify-start flex items-center gap-2 wallet-link-btn">
+            <Image
+              imageId={deviceDetails.logoLight}
+              darkImageId={deviceDetails.logoDark}
+              hoverImageId={deviceDetails.logoLight}
+              darkHoverImageId={deviceDetails.logoDark}
+              height="30"
+              width="30"
+              isButton
+            />
+            <span className="text-sm font-medium">
+              {t("modal.external.install-browser-extension", { browser: getBrowserName(deviceDetails.browser) })}
+            </span>
           </Button>
         </a>
       </li>

diff --git a/packages/ui/src/components/Image.tsx b/packages/ui/src/components/Image.tsx
@@ -1,3 +1,7 @@
+import { useContext } from "react";
+
+import { ThemedContext } from "../context/ThemeContext";
+
 export interface ImageProps {
   hoverImageId?: string;
   imageId: string;
@@ -6,13 +10,30 @@ export interface ImageProps {
   width?: string;
   fallbackImageId?: string;
   extension?: string;
+  darkImageId?: string;
+  darkHoverImageId?: string;
 }
 export default function Image(props: ImageProps) {
-  const { hoverImageId, imageId, isButton = false, height = "auto", width = "auto", fallbackImageId, extension = "svg" } = props;
+  const {
+    hoverImageId,
+    darkHoverImageId,
+    imageId,
+    darkImageId,
+    isButton = false,
+    height = "auto",
+    width = "auto",
+    fallbackImageId,
+    extension = "svg",
+  } = props;
+  const { isDark } = useContext(ThemedContext);
+
+  const imgName = isDark && darkImageId ? darkImageId : imageId;
+  const hoverImgName = isDark && darkHoverImageId ? darkHoverImageId : hoverImageId;
+
   return (
     <>
       <img
-        src={`https://images.web3auth.io/${imageId}.${extension}`}
+        src={`https://images.web3auth.io/${imgName}.${extension}`}
         height={height}
         width={width}
         alt={imageId}
@@ -28,7 +49,7 @@ export default function Image(props: ImageProps) {
       />
       {isButton ? (
         <img
-          src={`https://images.web3auth.io/${hoverImageId}.${extension}`}
+          src={`https://images.web3auth.io/${hoverImgName}.${extension}`}
           height={height}
           width={width}
           alt={hoverImageId}

diff --git a/packages/ui/src/components/Modal.tsx b/packages/ui/src/components/Modal.tsx
@@ -193,7 +193,7 @@ export default function Modal(props: ModalProps) {
           className={`${modalTransitionClasses.join(" ")} ${modalState.status !== MODAL_STATUS.INITIALIZED ? "p-6 pt-7" : ""} ${
             (areSocialLoginsVisible || isEmailPasswordlessLoginVisible || isSmsPasswordlessLoginVisible) && !modalState.externalWalletsVisibility
               ? ""
-              : "h-[567px]"
+              : "wallet-adapter-container"
           }`}
         >
           {modalState.status !== MODAL_STATUS.INITIALIZED ? (

diff --git a/packages/ui/src/css/web3auth.css b/packages/ui/src/css/web3auth.css
@@ -267,7 +267,7 @@
 
 /* Adapter List */
 #w3a-modal div.w3a-adapter-list-container {
-  height: 380px;
+  height: 362px;
   scrollbar-width: none;
   overflow-y: auto;
 }
@@ -341,15 +341,15 @@
 }
 
 #w3a-modal .w3a-wallet-connect {
-  @apply block mb-4 text-center;
+  @apply block mb-2.5 text-center;
 }
 
 #w3a-modal .w3a-wallet-connect.w3a-wallet-connect--hidden {
   @apply hidden;
 }
 
 #w3a-modal .w3a-wallet-connect__container {
-  @apply bg-app-white dark:bg-app-gray-800 rounded-[10px] text-app-gray-500 dark:text-app-gray-400 text-xxs w-fit mx-auto min-w-[250px] py-4;
+  @apply bg-app-white dark:bg-app-gray-800 rounded-[10px] text-app-gray-500 dark:text-app-gray-400 text-xxs w-fit mx-auto min-w-[250px] py-2.5;
 }
 
 #w3a-modal .w3a-wallet-connect__container-desktop,
@@ -678,6 +678,18 @@
   @apply !bg-app-gray-100 hover:!bg-app-gray-200 dark:!bg-app-gray-700 dark:hover:bg-app-gray-800;
 }
 
+.wallet-link-btn {
+  @apply dark:!bg-app-gray-700 dark:hover:!bg-app-gray-700 !text-app-gray-900 dark:!text-app-white;
+}
+
+.wallet-link-btn img {
+  @apply w-7 h-7;
+}
+
+.wallet-adapter-container {
+  @apply h-[551px];
+}
+
 @keyframes beat1 {
   0% {
     transform: scale(0);