Merge pull request #1951 from Web3Auth/feat/ux-review-changes

Image fix, height fix
Web3Auth · Sep 19, 2024 · b6862b3 · b6862b3
2 parents 46ea53c + 3e69836
commit b6862b3
Show file tree

Hide file tree

Showing 9 changed files with 107 additions and 43 deletions.
diff --git a/demo/vue-app-new/src/MainView.vue b/demo/vue-app-new/src/MainView.vue
@@ -178,11 +178,9 @@ const configs = computed(() => {
 <template>
   <Web3AuthProvider :config="configs">
     <AppHeader />
-    <main class="flex-1 p-1">
-      <div class="relative">
-        <AppSettings />
-        <AppDashboard />
-      </div>
+    <main class="relative flex flex-col lg:h-[calc(100dvh_-_110px)]">
+      <AppSettings />
+      <AppDashboard />
     </main>
   </Web3AuthProvider>
 </template>
diff --git a/demo/vue-app-new/src/components/AppDashboard.vue b/demo/vue-app-new/src/components/AppDashboard.vue
@@ -218,12 +218,11 @@ const onSignPersonalMsg = async () => {
 </script>
 
 <template>
-  <div v-if="isDisplay('dashboard')" class="grid gap-0">
-    <div class="grid grid-cols-8 gap-0">
-      <div class="col-span-1"></div>
-      <Card class="px-4 py-4 gird col-span-2">
+  <div v-if="isDisplay('dashboard')" class="w-full h-full px-10">
+    <div class="grid grid-cols-1 md:grid-cols-4 lg:grid-cols-6 h-full">
+      <Card class="px-4 py-4 gird col-span-1 lg:col-span-2 h-full !rounded-3xl md:!rounded-r-none !shadow-none">
         <div class="mb-2">
-          <Button block size="xs" pill variant="secondary" data-testid="btnClearConsole" @click="clearConsole">
+          <Button block size="xs" pill variant="tertiary" data-testid="btnClearConsole" @click="clearConsole">
             {{ $t("app.buttons.btnClearConsole") }}
           </Button>
         </div>
@@ -244,7 +243,7 @@ const onSignPersonalMsg = async () => {
             {{ $t("app.buttons.btnShowCheckout") }}
           </Button>
         </Card>
-        <Card v-if="isDisplay('ethServices')" class="px-4 py-4 gap-4 h-auto mb-2" :shadow="false">
+        <Card v-if="isDisplay('ethServices')" class="px-4 py-4 gap-4 !h-auto lg:!h-[calc(100dvh_-_240px)]" :shadow="false">
           <div class="text-xl font-bold leading-tight text-left mb-2">Sample Transaction</div>
           <Button block size="xs" pill class="mb-2" @click="onGetAccounts">
             {{ t("app.buttons.btnGetAccounts") }}
@@ -280,7 +279,10 @@ const onSignPersonalMsg = async () => {
           </Button>
         </Card>
       </Card>
-      <Card id="console" class="px-4 py-4 col-span-4 overflow-y-auto">
+      <Card
+        id="console"
+        class="px-4 py-4 col-span-1 md:col-span-3 lg:col-span-4 overflow-y-auto h-full !rounded-3xl md:!rounded-l-none md:!border-l-0 !shadow-none"
+      >
         <pre class="whitespace-pre-line overflow-x-auto font-normal text-base leading-6 text-black break-words overflow-y-auto max-h-screen"></pre>
       </Card>
     </div>

diff --git a/demo/vue-app-new/src/components/AppHeader.vue b/demo/vue-app-new/src/components/AppHeader.vue
@@ -33,23 +33,23 @@ watch(status, () => {
 </script>
 
 <template>
-  <nav class="bg-white sticky top-0 z-50 w-full z-20 top-0 start-0 border-gray-200 dark:border-gray-600">
+  <nav class="bg-white sticky w-full z-20 top-0 start-0 border-gray-200 dark:border-gray-600">
     <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
       <a href="#" class="flex items-center space-x-3 rtl:space-x-reverse">
         <img :src="`/web3auth.svg`" class="h-8" alt="W3A Logo" />
       </a>
       <div class="flex md:order-2 space-x-3 md:space-x-0 rtl:space-x-reverse">
-        <Button v-if="isDisplay('btnLogout')" block size="xs" pill variant="secondary" @click="onLogout">
+        <Button v-if="isDisplay('btnLogout')" block size="xs" pill variant="tertiary" @click="onLogout">
           {{ t("app.btnLogout") }}
         </Button>
         <Button v-else block size="xs" pill variant="secondary" @click="() => {}">
           {{ t("app.documentation") }}
         </Button>
       </div>
-      <div id="navbar-sticky" class="items-center justify-between w-full md:flex md:w-auto md:order-1">
-        <div v-if="isDisplay('appHeading')" class="max-sm:w-full">
-          <h1 class="leading-tight text-3xl font-extrabold">{{ $t("app.title") }}</h1>
-          <p class="leading-tight text-1xl">{{ $t("app.description") }}</p>
+      <div id="navbar-sticky" class="items-center justify-between w-full md:flex md:w-auto md:order-1 text-center">
+        <div v-if="isDisplay('appHeading')" class="max-sm:w-full max-sm:mt-4">
+          <h1 class="leading-tight text-2xl sm:text-3xl font-bold">{{ $t("app.title") }}</h1>
+          <p class="leading-tight text-lg sm:text-xl">{{ $t("app.description") }}</p>
         </div>
       </div>
     </div>

diff --git a/demo/vue-app-new/src/components/AppSettings.vue b/demo/vue-app-new/src/components/AppSettings.vue
@@ -64,18 +64,20 @@ const isActiveTab = (index: number) => activeTab.value === index;
 <template>
   <div v-if="isDisplay('form')" class="grid grid-cols-8 gap-0">
     <div class="col-span-0 sm:col-span-1 lg:col-span-2"></div>
-    <Card class="h-auto px-8 py-8 col-span-8 sm:col-span-6 lg:col-span-4">
-      <div class="text-3xl font-bold leading-tight text-center">{{ $t("app.greeting") }}</div>
-      <div class="leading-tight font-extrabold text-center mb-12">
-        <Tag v-bind="{ minWidth: 'inherit' }">{{ status }}</Tag>
+    <Card class="h-auto p-4 sm:p-8 col-span-8 sm:col-span-6 lg:col-span-4 max-sm:!shadow-none max-sm:!border-0">
+      <div class="text-2xl sm:text-3xl font-bold leading-tight text-center">{{ $t("app.greeting") }}</div>
+      <div class="leading-tight font-extrabold text-center my-4">
+        <Tag v-bind="{ minWidth: 'inherit' }" :class="['uppercase', { '!bg-blue-400 text-white': status === 'ready' }]">{{ status }}</Tag>
         &nbsp;
-        <Tag v-bind="{ minWidth: 'inherit' }">{{ isInitialized ? "INITIALIZED" : "NOT_INITIALIZE_YET" }}</Tag>
+        <Tag v-bind="{ minWidth: 'inherit' }" :class="['uppercase', { '!bg-blue-400 text-white': isInitialized }]">
+          {{ isInitialized ? "INITIALIZED" : "NOT_INITIALIZE_YET" }}
+        </Tag>
       </div>
-      <Tabs>
-        <Tab variant="button" :active="isActiveTab(0)" @click="onTabChange(0)">General</Tab>
-        <Tab variant="button" :active="isActiveTab(1)" @click="onTabChange(1)">WhiteLabel</Tab>
-        <Tab variant="button" :active="isActiveTab(2)" @click="onTabChange(2)">Login Provider</Tab>
-        <Tab variant="button" :active="isActiveTab(3)" @click="onTabChange(3)">Wallet Plugin</Tab>
+      <Tabs class="mb-4">
+        <Tab variant="underline" :active="isActiveTab(0)" @click="onTabChange(0)">General</Tab>
+        <Tab variant="underline" :active="isActiveTab(1)" @click="onTabChange(1)">WhiteLabel</Tab>
+        <Tab variant="underline" :active="isActiveTab(2)" @click="onTabChange(2)">Login Provider</Tab>
+        <Tab variant="underline" :active="isActiveTab(3)" @click="onTabChange(3)">Wallet Plugin</Tab>
       </Tabs>
       <Card v-if="isActiveTab(0)" class="grid grid-cols-1 gap-2 py-4 px-4" :shadow="false">
         <Select
@@ -330,7 +332,7 @@ const isActiveTab = (index: number) => activeTab.value === index;
           Connect
         </Button>
       </div>
-      <div class="text-base text-app-gray-900 dark:text-app-gray-200 font-medium mt-4 mb-5 px-0">
+      <div class="text-sm text-app-gray-900 dark:text-app-gray-200 font-normal mt-4 mb-5 px-0">
         Reach out to us at
         <a class="text-app-primary-600 dark:text-app-primary-500 underline" href="mailto:hello@tor.us">hello@tor.us</a>
         or

diff --git a/demo/vue-app-new/src/style.css b/demo/vue-app-new/src/style.css
@@ -1,3 +1,10 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+body {
+  @apply h-dvh min-h-dvh w-full flex flex-col;
+}
+ #app {
+  @apply h-full w-full;
+ }
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);