Merge pull request #35 from Web3Auth/fix/ui-fixes

UI Fixes
Web3Auth · Aug 7, 2024 · 27e05c8 · 27e05c8
2 parents 5e514db + 5d1b87a
commit 27e05c8
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 9 deletions.
diff --git a/src/assets/images/wallet-services-dark.svg b/src/assets/images/wallet-services-dark.svg
diff --git a/src/components/LoginDetails/LoginDetails.vue b/src/components/LoginDetails/LoginDetails.vue
@@ -85,11 +85,11 @@ const returnAvatarLetter = (name: string) => {
         <div class="relative">
           <div
             v-if="isCopied"
-            class="absolute bottom-[150%] left-1/2 -translate-x-1/2 bg-app-white py-2 px-4 rounded-lg text-black text-sm text-center w-max shadow-md"
+            class="absolute bottom-[150%] left-1/2 -translate-x-1/2 bg-app-white dark:bg-app-gray-600 py-2 px-4 rounded-lg text-black text-sm text-center w-max shadow-md"
           >
             Copied
             <div
-              class="absolute border-8 border-b-0 border-r-transparent border-t-app-white border-l-transparent top-[100%] left-[calc(50%_-_8px)]"
+              class="absolute border-8 border-b-0 border-r-transparent border-t-app-white dark:border-t-app-gray-600 border-l-transparent top-[100%] left-[calc(50%_-_8px)]"
             ></div>
           </div>
           <div>

diff --git a/src/components/WalletServices/WalletServices.vue b/src/components/WalletServices/WalletServices.vue
@@ -47,10 +47,15 @@ async function signMessage() {
       <p class="text-xs text-app-gray-500 dark:text-app-gray-400">Production-ready wallet UI</p>
     </div>
     <img
-      class="mx-auto mb-6 w-[100px] h-[100px]"
+      class="dark:hidden mx-auto mb-6 w-[100px] h-[100px]"
       src="@/assets/images/wallet-services.svg"
       alt="Wallet Services"
     />
+    <img
+      class="hidden dark:block mx-auto mb-6 w-[100px] h-[100px]"
+      src="@/assets/images/wallet-services-dark.svg"
+      alt="Wallet Services"
+    />
 
     <div class="space-y-2">
       <Button

diff --git a/src/components/WhiteLabelConfig/WhiteLabelConfig.vue b/src/components/WhiteLabelConfig/WhiteLabelConfig.vue
@@ -92,23 +92,26 @@ function setPrimaryTextColor(color: string) {
             <TextField
               label="Logo URL"
               placeholder="Logo URL"
-              :value="customConfig.config.logoUrl"
+              :model-value="customConfig.config.logoUrl"
               @change="
                 (e) => {
                   customConfig.config.logoUrl = (e.target as HTMLInputElement).value
                 }
               "
             />
           </div>
-          <div class="flex justify-between items-center mb-6">
+          <div
+            v-if="customConfig.config.addBrandLogo"
+            class="flex justify-between items-center mb-6"
+          >
             <div class="text-app-gray-900 dark:text-app-white">Use Logo as Loader</div>
             <Toggle size="small" v-model="customConfig.config.useLogoAsLoader" />
           </div>
           <div class="mb-6">
             <TextField
               label="Application Name"
               placeholder="dApp Name"
-              :value="customConfig.config.dappName"
+              :model-value="customConfig.config.dappName"
               @change="
                 (e) => {
                   customConfig.config.dappName = (e.target as HTMLInputElement).value
@@ -165,7 +168,7 @@ function setPrimaryTextColor(color: string) {
             <TextField
               label="Primary Color"
               helper-text="Applies to primary elements like buttons, text links, tabs, focus, spinners, nav tabs"
-              :value="customConfig.config.primaryColor"
+              :model-value="customConfig.config.primaryColor"
               @change="
                 (e) => {
                   const color = (e.target as InputHTMLAttributes).value
@@ -193,7 +196,7 @@ function setPrimaryTextColor(color: string) {
             <TextField
               label="Primary Text Color"
               helper-text="Applies to text elements set against the primary color background"
-              :value="customConfig.config.primaryTextColor"
+              :model-value="customConfig.config.primaryTextColor"
               @change="
                 (e) => {
                   setPrimaryTextColor((e.target as HTMLInputElement).value)

diff --git a/src/composables/use-custom-config.ts b/src/composables/use-custom-config.ts
@@ -7,7 +7,7 @@ const web3Auth = useWeb3authStore()
 const config = reactive<CustomConfig>({
   dappName: '',
   addBrandLogo: false,
-  logoUrl: 'https://images.web3auth.io/example-login-hello-hover.svg',
+  logoUrl: 'https://images.web3auth.io/demo-logo.svg',
   useLogoAsLoader: false,
   selectedLanguage: 'en',
   isDark: false,