dark theme and i18n config

Web3Auth · Dec 16, 2024 · 0b7713b · 0b7713b
1 parent c0fe4ed
commit 0b7713b
Show file tree

Hide file tree

Showing 10 changed files with 103 additions and 50 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/modal-ui/package.json b/packages/modal-ui/package.json
@@ -66,7 +66,8 @@
     "solid-js": "^1.8.11",
     "tailwind-merge": "^2.5.5",
     "@solid-primitives/i18n": "^2.1.1",
-    "solid-qr-code": "^0.1.11"
+    "solid-qr-code": "^0.1.11",
+    "solid-i18n": "^1.1.0"
   },
   "lint-staged": {
     "!(*d).ts": [

diff --git a/packages/modal-ui/src/components/Body/Body.tsx b/packages/modal-ui/src/components/Body/Body.tsx
@@ -112,10 +112,7 @@ const Body = (props: BodyProps) => {
       acc.push(
         <li class="w3a--w-full">
           <a href={appUrl} rel="noopener noreferrer" target="_blank">
-            <button
-              type="button"
-              class="w3a--flex w3a--items-center w3a--gap-x-2 w3a--w-full w3a--bg-app-gray-100 w3a--px-4 w3a--py-2 w3a--rounded-full"
-            >
+            <button type="button" class="w3a--flex w3a--items-center w3a--gap-x-2 w3a--w-full w3a--t-btn w3a--px-4 w3a--py-2 w3a--rounded-full">
               <Image
                 imageId={logoLight}
                 darkImageId={logoDark}
@@ -147,10 +144,7 @@ const Body = (props: BodyProps) => {
     const installLink = browserExtensionUrl ? (
       <li>
         <a href={browserExtensionUrl} rel="noopener noreferrer" target="_blank">
-          <button
-            type="button"
-            class="w3a--flex w3a--items-center w3a--gap-x-2 w3a--w-full w3a--bg-app-gray-100 dark:w3a--bg-app-gray-700 w3a--px-4 w3a--py-2 w3a--rounded-full"
-          >
+          <button type="button" class="w3a--flex w3a--items-center w3a--gap-x-2 w3a--w-full w3a--t-btn w3a--px-4 w3a--py-2 w3a--rounded-full">
             <Image
               imageId={deviceDetails().browser}
               darkImageId={deviceDetails().browser}
@@ -219,7 +213,7 @@ const Body = (props: BodyProps) => {
             class="w3a--absolute w3a--h-full w3a--w-full w3a--top-0 w3a--left-0 w3a--bottom-sheet-bg w3a--rounded-3xl"
             onClick={() => setBodyState({ showWalletDetails: false })}
           />
-          <div class="w3a--absolute w3a--bottom w3a--left-0 w3a--bg-app-white w3a--rounded-3xl w3a--p-4 w3a--bottom-sheet-width w3a--flex w3a--flex-col w3a--gap-y-2 w3a--shadow-sm w3a--border w3a--border-app-gray-100">
+          <div class="w3a--absolute w3a--bottom w3a--left-0 w3a--bg-app-light-surface-main dark:w3a--bg-app-dark-surface-main w3a--rounded-3xl w3a--p-4 w3a--bottom-sheet-width w3a--flex w3a--flex-col w3a--gap-y-2 w3a--shadow-sm w3a--border w3a--border-app-gray-100 dark:w3a--border-app-gray-600">
             <div class="w3a--flex w3a--justify-center w3a--my-6">
               <Image
                 imageId={`login-${bodyState.walletDetails.name}`}

diff --git a/packages/modal-ui/src/components/Body/ConnectWallet.tsx b/packages/modal-ui/src/components/Body/ConnectWallet.tsx
@@ -252,10 +252,10 @@ const ConnectWallet = (props: ConnectWalletProps) => {
                 e.target.placeholder = `modal.external.search-wallet, ${totalExternalWallets()}`;
               }}
               placeholder={`Search through wallets... ${totalExternalWallets()}`}
-              class="w3a--w-full w3a--px-4 w3a--py-2.5 w3a--border w3a--border-app-gray-300 w3a--bg-app-gray-50 placeholder:w3a--text-app-gray-400 placeholder:w3a--text-sm placeholder:w3a--font-normal w3a--rounded-full"
+              class="w3a--appearance-none w3a--px-4 w3a--py-2.5 w3a--border w3a--text-app-gray-900 w3a--border-app-gray-300 w3a--bg-app-gray-50 dark:w3a--bg-app-gray-700 dark:w3a--border-app-gray-600 dark:w3a--text-app-white placeholder:w3a--text-app-gray-500 dark:placeholder:w3a--text-app-gray-400 placeholder:w3a--text-sm placeholder:w3a--font-normal w3a--rounded-full w3a--outline-none focus:w3a--outline-none active:w3a--outline-none"
             />
           </Show>
-          <ul class="w3a--flex w3a--flex-col w3a--gap-y-2 w3a--h-[calc(100dvh_-_240px)] w3a--overflow-y-auto">
+          <ul class="w3a--h-[calc(100dvh_-_240px)] w3a--overflow-y-auto">
             <Show
               when={externalButtons().length !== 0}
               fallback={
@@ -264,17 +264,19 @@ const ConnectWallet = (props: ConnectWalletProps) => {
                 </div>
               }
             >
-              <For each={externalButtons()}>
-                {(button) => (
-                  <WalletButton
-                    label={button.displayName}
-                    onClick={() => handleWalletClick(button)}
-                    button={button}
-                    deviceDetails={deviceDetails()}
-                    walletConnectUri={props.walletConnectUri}
-                  />
-                )}
-              </For>
+              <div class="w3a--flex w3a--flex-col w3a--gap-y-2 w3a--pr-1.5">
+                <For each={externalButtons()}>
+                  {(button) => (
+                    <WalletButton
+                      label={button.displayName}
+                      onClick={() => handleWalletClick(button)}
+                      button={button}
+                      deviceDetails={deviceDetails()}
+                      walletConnectUri={props.walletConnectUri}
+                    />
+                  )}
+                </For>
+              </div>
             </Show>
           </ul>
         </div>
@@ -295,13 +297,16 @@ const ConnectWallet = (props: ConnectWalletProps) => {
               maskType={MaskType.FLOWER_IN_SQAURE}
             />
           </div>
-          <p class="w3a--text-center w3a--text-sm w3a--text-app-gray-500 w3a--font-normal">
+          <p class="w3a--text-center w3a--text-sm w3a--text-app-gray-500 dark:w3a--text-app-gray-400 w3a--font-normal">
             Scan with a WalletConnect-supported wallet or click the QR code to copy to your clipboard.
           </p>
-          <div class="w3a--flex w3a--items-center w3a--justify-between w3a--w-full w3a--mt-auto w3a--bg-app-gray-50 w3a--rounded-xl w3a--p-3">
-            <p class="w3a--text-sm w3a--text-app-gray-900">Don't have Trust Wallet?</p>
+          <div
+            class="w3a--flex w3a--items-center w3a--justify-between w3a--w-full w3a--mt-auto w3a--border w3a--text-app-gray-900 w3a--border-app-gray-300 w3a--bg-app-gray-50 
+      dark:w3a--bg-app-gray-700 dark:w3a--border-app-gray-600 dark:w3a--text-app-white w3a--rounded-xl w3a--p-3"
+          >
+            <p class="w3a--text-sm w3a--text-app-gray-900 dark:w3a--text-app-white">Don't have Trust Wallet?</p>
             <button
-              class="w3a--appearance-none w3a--border w3a--border-app-gray-900 w3a--text-xs w3a--text-app-gray-900 w3a--rounded-full w3a--px-2 w3a--py-2"
+              class="w3a--appearance-none w3a--border w3a--border-app-gray-900 w3a--text-xs w3a--text-app-gray-900 dark:w3a--text-app-white dark:w3a--border-app-white w3a--rounded-full w3a--px-2 w3a--py-2"
               onClick={() => {
                 setBodyState({
                   ...bodyState,

diff --git a/packages/modal-ui/src/components/Body/Login.tsx b/packages/modal-ui/src/components/Body/Login.tsx
@@ -120,7 +120,7 @@ const Login = (props: LoginProps) => {
         <form class="w3a--flex w3a--flex-col w3a--gap-y-4 w3a--mt-auto">
           <Show when={mergedProps.showPasswordLessInput}>
             <div class="w3a--flex w3a--flex-col w3a--gap-y-2">
-              <label class="w3a--text-sm w3a--font-semibold w3a--text-app-gray-500 dark:w3a--text-app-gray-400 w3a--text-start">{title()}</label>
+              <label class="w3a--text-sm w3a--font-medium w3a--text-app-gray-500 dark:w3a--text-app-gray-400 w3a--text-start">{title()}</label>
               <input
                 onInput={handleInputChange}
                 value={fieldValue()}
@@ -131,7 +131,8 @@ const Login = (props: LoginProps) => {
                 onBlur={(e) => {
                   e.target.placeholder = `${placeholder()}`;
                 }}
-                class="w3a--px-4 w3a--py-2.5 w3a--border w3a--border-app-gray-300 w3a--bg-app-gray-50 placeholder:w3a--text-app-gray-400 placeholder:w3a--text-sm placeholder:w3a--font-normal w3a--rounded-full"
+                class="w3a--appearance-none w3a--px-4 w3a--py-2.5 w3a--border w3a--text-app-gray-900 w3a--border-app-gray-300
+                 w3a--bg-app-gray-50 dark:w3a--bg-app-gray-700 dark:w3a--border-app-gray-600 dark:w3a--text-app-white placeholder:w3a--text-app-gray-500 dark:placeholder:w3a--text-app-gray-400 placeholder:w3a--text-sm placeholder:w3a--font-normal w3a--rounded-full w3a--outline-none focus:w3a--outline-none active:w3a--outline-none"
               />
             </div>
             <Show when={isValidInput() === false}>
@@ -141,7 +142,7 @@ const Login = (props: LoginProps) => {
             </Show>
             <button
               class={cn("w3a--w-full w3a--px-5 w3a--py-3 w3a--rounded-full w3a--text-sm w3a--font-medium", {
-                "w3a--bg-app-gray-100 disabled:w3a--text-app-gray-400 w3a--text-app-gray-900": !props.isEmailPrimary,
+                "w3a--t-btn": !props.isEmailPrimary,
                 "w3a--bg-app-primary-600 disabled:w3a--bg-app-primary-500 w3a--text-app-white w3a--opacity-15": props.isEmailPrimary,
               })}
               onClick={handleFormSubmit}
@@ -151,12 +152,12 @@ const Login = (props: LoginProps) => {
           </Show>
           <Show when={mergedProps.showExternalWalletButton}>
             <div class="w3a--flex w3a--flex-col w3a--gap-y-2">
-              <label class="w3a--text-sm w3a--font-semibold w3a--text-app-gray-500 dark:w3a--text-app-gray-400 w3a--text-start">
+              <label class="w3a--text-sm w3a--font-medium w3a--text-app-gray-500 dark:w3a--text-app-gray-400 w3a--text-start">
                 {"modal.external.title"}
               </label>
               <button
                 class={cn("w3a--w-full w3a--px-5 w3a--py-3 w3a--rounded-full w3a--text-sm w3a--font-medium", {
-                  "w3a--bg-app-gray-100 disabled:w3a--text-app-gray-400 w3a--text-app-gray-900": !props.isExternalPrimary,
+                  "w3a--t-btn": !props.isEmailPrimary,
                   "w3a--bg-app-primary-600 disabled:w3a--bg-app-primary-500 w3a--text-app-white w3a--opacity-15": props.isExternalPrimary,
                 })}
                 onClick={handleConnectWallet}

diff --git a/packages/modal-ui/src/components/Loader/Loader.tsx b/packages/modal-ui/src/components/Loader/Loader.tsx
@@ -52,16 +52,31 @@ const Loader = (props: LoaderProps) => {
       </Show>
 
       <Show when={props.modalStatus === ADAPTER_STATUS.CONNECTED}>
-        <div class="w3a--flex w3a--flex-col w3a--items-center">
-          {/* <Icon iconName="connected" /> */}
-          <p>Connected</p>
-          <div class="w3ajs-modal-loader__message w3a-spinner-message w3a--mt-4">{props.message}</div>
+        <div class="w3a--flex w3a--flex-col w3a--items-center w3a--gap-y-2">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20" class="w3a--connected-logo">
+            <path
+              fill="currentColor"
+              fill-rule="evenodd"
+              d="M6.267 3.455a3.07 3.07 0 0 0 1.745-.723 3.066 3.066 0 0 1 3.976 0 3.07 3.07 0 0 0 1.745.723 3.066 3.066 0 0 1 2.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 0 1 0 3.976 3.07 3.07 0 0 0-.723 1.745 3.066 3.066 0 0 1-2.812 2.812 3.07 3.07 0 0 0-1.745.723 3.066 3.066 0 0 1-3.976 0 3.07 3.07 0 0 0-1.745-.723 3.066 3.066 0 0 1-2.812-2.812 3.07 3.07 0 0 0-.723-1.745 3.066 3.066 0 0 1 0-3.976 3.07 3.07 0 0 0 .723-1.745 3.066 3.066 0 0 1 2.812-2.812m7.44 5.252a1 1 0 0 0-1.414-1.414L9 10.586 7.707 9.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0z"
+              clip-rule="evenodd"
+            />
+          </svg>
+          <p class="w3a--text-sm w3a--text-app-gray-500 dark:w3a--text-app-gray-400 w3a--text-center">{props.message}</p>
         </div>
       </Show>
 
       <Show when={props.modalStatus === ADAPTER_STATUS.ERRORED}>
-        <p>Errored</p>
-        <div class="w3ajs-modal-loader__message w3a-spinner-message w3a-spinner-message--error">{props.message}</div>
+        <div class="w3a--flex w3a--flex-col w3a--items-center w3a--gap-y-2">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20" class="w3a--error-logo">
+            <path
+              fill="currentColor"
+              fill-rule="evenodd"
+              d="M18 10a8 8 0 1 1-16.001 0A8 8 0 0 1 18 10m-7 4a1 1 0 1 1-2 0 1 1 0 0 1 2 0m-1-9a1 1 0 0 0-1 1v4a1 1 0 1 0 2 0V6a1 1 0 0 0-1-1"
+              clip-rule="evenodd"
+            />
+          </svg>
+          <p class="w3a--text-sm w3a--text-app-gray-500 dark:w3a--text-app-gray-400 w3a--text-center">{props.message}</p>
+        </div>
       </Show>
     </div>
   );

diff --git a/packages/modal-ui/src/components/Modal/Modal.tsx b/packages/modal-ui/src/components/Modal/Modal.tsx
@@ -57,7 +57,7 @@ const Modal: Component<ModalProps> = (props: ModalProps) => {
       })}
     >
       <div
-        class={cn("w3a--bg-app-white dark:!w3a--bg-app-gray-900 w3a--rounded-3xl w3a--w-full sm:w3a--w-[400px] w3a--duration-500", {
+        class={cn("w3a--modal-bg w3a--rounded-3xl w3a--w-full sm:w3a--w-[400px] w3a--duration-500", {
           "w3a--translate-y-0 w3a--delay-100": isOpen(),
           "w3a--translate-y-[100vh]": !isOpen(),
           "w3a--p-4": mergedProps.padding,

diff --git a/packages/modal-ui/src/components/WalletButton/WalletButton.tsx b/packages/modal-ui/src/components/WalletButton/WalletButton.tsx
@@ -1,4 +1,4 @@
-import { createMemo } from "solid-js";
+import { createMemo, Show } from "solid-js";
 
 import { ExternalButton } from "../../interfaces";
 import { Image } from "../Image";
@@ -43,7 +43,8 @@ const WalletButton = (props: WalletButtonProps) => {
 
   return (
     <button
-      class="w3a--w-full w3a--flex w3a--items-center w3a--justify-between w3a--p-4 w3a--rounded-xl w3a--bg-app-gray-100 hover:w3a--shadow-md hover:w3a--translate-y-[0.5px] w3a--border w3a--border-app-gray-100 hover:w3a--border-app-gray-200"
+      class="w3a--w-full w3a--flex w3a--items-center w3a--justify-between w3a--p-4 w3a--rounded-xl w3a--border w3a--text-app-gray-900 w3a--border-app-gray-300 w3a--bg-app-gray-50 
+      dark:w3a--bg-app-gray-700 dark:w3a--border-app-gray-600 dark:w3a--text-app-white hover:w3a--border-app-gray-300 hover:w3a--shadow-md hover:w3a--translate-y-[0.5px]"
       onClick={handleBtnClick}
       {...props}
     >
@@ -59,13 +60,16 @@ const WalletButton = (props: WalletButtonProps) => {
             extension={props.button.imgExtension}
           />
         </figure>
-        <p class="w3a--text-sm w3a--font-medium w3a--text-app-gray-900">{props.label}</p>
+        <p class="w3a--text-sm w3a--font-medium w3a--text-app-gray-900 dark:w3a--text-app-white">{props.label}</p>
       </div>
-      {props.button.hasInjectedWallet && (
-        <span class="w3a--inline-flex w3a--items-center w3a--rounded-lg w3a--px-2 w3a--py-1 w3a--text-xs w3a--font-medium w3a--bg-app-primary-100 w3a--text-app-primary-800">
+      <Show when={true}>
+        <span
+          class="w3a--inline-flex w3a--items-center w3a--rounded-lg w3a--px-2 w3a--py-1 w3a--text-xs w3a--font-medium w3a--bg-app-primary-100 w3a--text-app-primary-800 
+        dark:w3a--bg-transparent dark:w3a--text-app-primary-400 dark:w3a--border dark:w3a--border-app-primary-400"
+        >
           Installed
         </span>
-      )}
+      </Show>
     </button>
   );
 };

diff --git a/packages/modal-ui/src/index.css b/packages/modal-ui/src/index.css
@@ -17,6 +17,9 @@
 }
 
 @layer utilities {
+  .w3a--modal-bg {
+    @apply w3a--bg-app-light-surface1 dark:w3a--bg-app-dark-surface-main;
+  }
   .w3a--loader-logo-size {
     @apply w3a--h-10 w3a--w-10;
   }
@@ -40,4 +43,16 @@
   .w3a--bottom-sheet-width {
     @apply w3a--w-[98%];
   }
+
+  .w3a--connected-logo {
+    @apply w3a--w-16 w3a--h-16 w3a--text-app-green-500 dark:w3a--text-app-green-400;
+  }
+
+  .w3a--error-logo {
+    @apply w3a--w-16 w3a--h-16 w3a--text-app-red-500 dark:w3a--text-app-red-400;
+  }
+
+  .w3a--t-btn {
+    @apply w3a--bg-app-gray-200 dark:w3a--bg-app-gray-500 w3a--text-app-gray-900 dark:w3a--text-app-white hover:w3a--bg-app-gray-300 dark:hover:w3a--bg-app-gray-400 disabled:w3a--bg-app-gray-300 disabled:w3a--text-app-gray-400 dark:disabled:w3a--bg-app-gray-700 dark:disabled:w3a--text-app-gray-600;
+  }
 }
diff --git a/packages/modal-ui/src/loginModal.tsx b/packages/modal-ui/src/loginModal.tsx
@@ -1,5 +1,6 @@
 import "./index.css";
 
+// import * as i18n from "@solid-primitives/i18n";
 import { applyWhiteLabelTheme, SafeEventEmitter } from "@web3auth/auth";
 import {
   ADAPTER_EVENTS,
@@ -16,10 +17,12 @@ import {
   Web3AuthError,
   Web3AuthNoModalEvents,
 } from "@web3auth/base";
+// import { createResource } from "solid-js";
 import { render } from "solid-js/web";
 
 import { LoginModal as Modal } from "./components/LoginModal";
 import { ThemedContext } from "./context/ThemeContext";
+// import { en } from "./i18n";
 import {
   DEFAULT_LOGO_DARK,
   DEFAULT_LOGO_LIGHT,
@@ -32,6 +35,7 @@ import {
   StateEmitterEvents,
   UIConfig,
 } from "./interfaces";
+// import fetchDictionary from "./localeImport";
 // import i18n from "./localeImport";
 import { getUserLanguage } from "./utils/modal";
 
@@ -88,6 +92,12 @@ export class LoginModal extends SafeEventEmitter {
 
     // const useLang = this.uiConfig.defaultLanguage || LANGUAGES.en;
 
+    // const [dict] = createResource(useLang, fetchDictionary, {
+    //   initialValue: i18n.flatten(en),
+    // });
+    // dict();
+
+    // const t = i18n.translator(dict);
     // Load new language resource
 
     // if (useLang === LANGUAGES.de) {