From 0b7713b563dc659c73402136aec537ddf54b25ca Mon Sep 17 00:00:00 2001 From: smgv Date: Mon, 16 Dec 2024 14:49:42 +0530 Subject: [PATCH] dark theme and i18n config --- package-lock.json | 18 ++++++--- packages/modal-ui/package.json | 3 +- .../modal-ui/src/components/Body/Body.tsx | 12 ++---- .../src/components/Body/ConnectWallet.tsx | 39 +++++++++++-------- .../modal-ui/src/components/Body/Login.tsx | 11 +++--- .../modal-ui/src/components/Loader/Loader.tsx | 27 ++++++++++--- .../modal-ui/src/components/Modal/Modal.tsx | 2 +- .../components/WalletButton/WalletButton.tsx | 16 +++++--- packages/modal-ui/src/index.css | 15 +++++++ packages/modal-ui/src/loginModal.tsx | 10 +++++ 10 files changed, 103 insertions(+), 50 deletions(-) diff --git a/package-lock.json b/package-lock.json index 3e73fa88c..6a95c4524 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16323,6 +16323,11 @@ "url": "https://github.com/sponsors/typicode" } }, + "node_modules/i18n-mini": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/i18n-mini/-/i18n-mini-1.1.0.tgz", + "integrity": "sha512-Y7R8/ITtjYAAklY9a8vizkFpUlgJDFLGWUlppH7Lcx2R3dXQaZXrugJtGXYjL9vK1ym5CzhbN2kU4lj8ELA6vg==" + }, "node_modules/i18next": { "version": "23.16.8", "resolved": "https://registry.npmjs.org/i18next/-/i18next-23.16.8.tgz", @@ -27267,12 +27272,15 @@ } } }, - "node_modules/solid-icons": { + "node_modules/solid-i18n": { "version": "1.1.0", - "resolved": "https://registry.npmjs.org/solid-icons/-/solid-icons-1.1.0.tgz", - "integrity": "sha512-IesTfr/F1ElVwH2E1110s2RPXH4pujKfSs+koT8rwuTAdleO5s26lNSpqJV7D1+QHooJj18mcOiz2PIKs0ic+A==", + "resolved": "https://registry.npmjs.org/solid-i18n/-/solid-i18n-1.1.0.tgz", + "integrity": "sha512-CyIUJSV/DtPNK6PW3DowL4QpWqDuRHjun+n85CZRQiuEkkHIa/j4dglOOcP4q3egqLVdbzbMNQF7OtxI8/CeKw==", + "dependencies": { + "i18n-mini": "1.1.x" + }, "peerDependencies": { - "solid-js": "*" + "solid-js": "1.x.x" } }, "node_modules/solid-js": { @@ -31267,7 +31275,7 @@ "clsx": "^2.1.1", "copy-to-clipboard": "^3.3.3", "deepmerge": "^4.3.1", - "solid-icons": "^1.1.0", + "solid-i18n": "^1.1.0", "solid-js": "^1.8.11", "solid-qr-code": "^0.1.11", "tailwind-merge": "^2.5.5" diff --git a/packages/modal-ui/package.json b/packages/modal-ui/package.json index e1d510f62..2b24fa1fe 100644 --- 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 index a3f3969f7..3fc86277b 100644 --- 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(
  • - ); }; diff --git a/packages/modal-ui/src/index.css b/packages/modal-ui/src/index.css index 00579e5dc..31e322649 100644 --- 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 index ea30056d8..53a396fd3 100644 --- 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) {