From 5d1b87a2b03a74c5e60fc16592a1d26b07554039 Mon Sep 17 00:00:00 2001
From: Lionell Briones <llenoil@gmail.com>
Date: Wed, 10 Jul 2024 15:29:51 +0800
Subject: [PATCH] - ws image dark - config form text-field values - default
 custom logo

---
 src/assets/images/wallet-services-dark.svg    | 25 +++++++++++++++++++
 src/components/LoginDetails/LoginDetails.vue  |  4 +--
 .../WalletServices/WalletServices.vue         |  7 +++++-
 .../WhiteLabelConfig/WhiteLabelConfig.vue     | 13 ++++++----
 src/composables/use-custom-config.ts          |  2 +-
 5 files changed, 42 insertions(+), 9 deletions(-)
 create mode 100644 src/assets/images/wallet-services-dark.svg

diff --git a/src/assets/images/wallet-services-dark.svg b/src/assets/images/wallet-services-dark.svg
new file mode 100644
index 0000000..7133b69
--- /dev/null
+++ b/src/assets/images/wallet-services-dark.svg
@@ -0,0 +1,25 @@
+<svg width="104" height="104" viewBox="0 0 104 104" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="51.6514" cy="51.6514" r="51.6514" fill="#131823" />
+    <path
+        d="M63.9418 33.124C66.5596 31.1618 70.1045 31.1618 72.7223 33.124L85.2526 42.516C87.8705 44.4782 88.9659 47.9563 87.966 51.1312L83.1798 66.3279C82.1799 69.5028 79.312 71.6523 76.0762 71.6523H60.5879C57.352 71.6523 54.4842 69.5028 53.4843 66.3279L48.6981 51.1312C47.6982 47.9563 48.7936 44.4782 51.4115 42.516L63.9418 33.124Z"
+        fill="url(#paint0_linear_3847_3361)" />
+    <g style="mix-blend-mode:overlay" opacity="0.5">
+        <path
+            d="M77.6119 61.7501L80.6032 51.9515C80.8293 51.2108 80.884 50.4446 80.7843 49.7083L73.1654 53.0981C72.557 53.367 71.8509 53.1002 71.5549 52.4895L69.4501 48.1465C68.9894 47.196 67.6747 47.196 67.214 48.1465L65.1091 52.4895C64.8131 53.1002 64.107 53.367 63.4987 53.0981L55.8798 49.7083C55.78 50.4446 55.8347 51.2108 56.0608 51.9515L59.0522 61.7501C59.6771 63.7972 61.4695 65.1832 63.4919 65.1832H73.1721C75.1945 65.1832 76.9869 63.7972 77.6119 61.7501Z"
+            fill="white" />
+    </g>
+    <path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd"
+        d="M14.9707 53.1523C14.9707 51.7716 16.034 50.6523 17.3457 50.6523H42.5957C43.9074 50.6523 44.9707 51.7716 44.9707 53.1523C44.9707 54.5331 43.9074 55.6523 42.5957 55.6523H17.3457C16.034 55.6523 14.9707 54.5331 14.9707 53.1523Z"
+        fill="#0364FF" />
+    <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M26.9707 44.9857C26.9707 43.697 27.9855 42.6523 29.2374 42.6523H43.5707C44.8225 42.6523 45.8374 43.697 45.8374 44.9857C45.8374 46.2743 44.8225 47.319 43.5707 47.319H29.2374C27.9855 47.319 26.9707 46.2743 26.9707 44.9857ZM30.3707 61.319C30.3707 60.0303 31.3855 58.9857 32.6374 58.9857H44.704C45.9559 58.9857 46.9707 60.0303 46.9707 61.319C46.9707 62.6077 45.9559 63.6523 44.704 63.6523H32.6374C31.3855 63.6523 30.3707 62.6077 30.3707 61.319Z"
+        fill="#4D92FF" />
+    <defs>
+        <linearGradient id="paint0_linear_3847_3361" x1="48.332" y1="31.6523" x2="88.332"
+            y2="71.6523" gradientUnits="userSpaceOnUse">
+            <stop offset="0.108859" stop-color="#66D4F7" />
+            <stop offset="0.490968" stop-color="#4D92FF" />
+            <stop offset="0.849761" stop-color="#BB65FF" />
+        </linearGradient>
+    </defs>
+</svg>
\ No newline at end of file
diff --git a/src/components/LoginDetails/LoginDetails.vue b/src/components/LoginDetails/LoginDetails.vue
index 9b4dcbe..ef49dce 100644
--- 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
index 49d7a4b..b534bec 100644
--- 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
index 0cfb7db..cc5032c 100644
--- a/src/components/WhiteLabelConfig/WhiteLabelConfig.vue
+++ b/src/components/WhiteLabelConfig/WhiteLabelConfig.vue
@@ -92,7 +92,7 @@ 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
@@ -100,7 +100,10 @@ function setPrimaryTextColor(color: string) {
               "
             />
           </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>
@@ -108,7 +111,7 @@ function setPrimaryTextColor(color: string) {
             <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
index a3b6671..e17fab0 100644
--- 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,