From 7edb15a7e48115c119ff4c2616e256b877a96c60 Mon Sep 17 00:00:00 2001 From: v1rtl Date: Sat, 14 Dec 2024 21:38:56 +0200 Subject: [PATCH] wip dark mode --- package.json | 2 +- pnpm-lock.yaml | 10 +- .../@molecules/Hamburger/MainMenu.tsx | 9 +- .../ContractSection/ContractSection.tsx | 2 +- .../RolesSection/components/RoleRow.tsx | 2 +- src/pages/_app.tsx | 91 +++++++++++-------- 6 files changed, 68 insertions(+), 48 deletions(-) diff --git a/package.json b/package.json index 857d18c8a..feb91e4b6 100644 --- a/package.json +++ b/package.json @@ -56,7 +56,7 @@ "@ensdomains/content-hash": "^3.0.0-beta.5", "@ensdomains/ens-contracts": "1.2.0-beta.0", "@ensdomains/ensjs": "4.0.2", - "@ensdomains/thorin": "1.0.0-beta.15", + "@ensdomains/thorin": "1.0.0-beta.16", "@metamask/post-message-stream": "^6.1.2", "@metamask/providers": "^14.0.2", "@noble/hashes": "^1.3.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 04c53da01..5874df4f2 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -128,8 +128,8 @@ importers: specifier: 4.0.2 version: 4.0.2(encoding@0.1.13)(typescript@5.4.5)(viem@2.19.4(bufferutil@4.0.8)(typescript@5.4.5)(utf-8-validate@5.0.10)(zod@3.23.8))(zod@3.23.8) '@ensdomains/thorin': - specifier: 1.0.0-beta.15 - version: 1.0.0-beta.15(@vanilla-extract/css@1.14.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: 1.0.0-beta.16 + version: 1.0.0-beta.16(@vanilla-extract/css@1.14.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@metamask/post-message-stream': specifier: ^6.1.2 version: 6.2.0 @@ -1648,8 +1648,8 @@ packages: '@ensdomains/solsha1@0.0.3': resolution: {integrity: sha512-uhuG5LzRt/UJC0Ux83cE2rCKwSleRePoYdQVcqPN1wyf3/ekMzT/KZUF9+v7/AG5w9jlMLCQkUM50vfjr0Yu9Q==} - '@ensdomains/thorin@1.0.0-beta.15': - resolution: {integrity: sha512-liYNJFUadSWTN9/2cNpgjqZ5km6CnExduflFg4WbvhUoZq3dNNsBqixb/HypZx2MJq3WRCzzNvdGeBGElcNcKw==} + '@ensdomains/thorin@1.0.0-beta.16': + resolution: {integrity: sha512-4iUyTL/UdwkRxXOW9y/bkcDmJUZkY3uYE03kdeQTCIRdJBlOvluZOS+pQpmQhgAoEhNqd/kYMmO+sz/g71PjyQ==} engines: {node: '>=20'} peerDependencies: react: ^18.2.0 @@ -11600,7 +11600,7 @@ snapshots: dependencies: hash-test-vectors: 1.3.2 - '@ensdomains/thorin@1.0.0-beta.15(@vanilla-extract/css@1.14.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + '@ensdomains/thorin@1.0.0-beta.16(@vanilla-extract/css@1.14.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@vanilla-extract/sprinkles': 1.6.3(@vanilla-extract/css@1.14.0) clsx: 2.1.1 diff --git a/src/components/@molecules/Hamburger/MainMenu.tsx b/src/components/@molecules/Hamburger/MainMenu.tsx index e9bd75cd7..ed2e34b44 100644 --- a/src/components/@molecules/Hamburger/MainMenu.tsx +++ b/src/components/@molecules/Hamburger/MainMenu.tsx @@ -37,7 +37,7 @@ const Container = styled.div( flex-direction: column; align-items: stretch; justify-content: flex-start; - background-color: ${theme.colors.background}; + background-color: ${theme.colors.backgroundPrimary}; padding: ${theme.space['4']}; gap: ${theme.space['2']}; @@ -220,8 +220,10 @@ const DarkModeItem = styled.div( display: flex; flex-direction: row; align-items: center; - justify-content: center; + justify-content: space-between; gap: ${theme.space['2']}; + + padding: ${theme.space['4']} ${theme.space['6']}; `, ) @@ -297,8 +299,9 @@ const MainMenu = ({ setCurrentView }: { setCurrentView: (view: 'main' | 'languag - NEW! + Theme { const newValue = e.target.checked ? 'light' : 'dark' diff --git a/src/components/pages/profile/[name]/tabs/OwnershipTab/sections/ContractSection/ContractSection.tsx b/src/components/pages/profile/[name]/tabs/OwnershipTab/sections/ContractSection/ContractSection.tsx index 3a5d957a6..f83574e34 100644 --- a/src/components/pages/profile/[name]/tabs/OwnershipTab/sections/ContractSection/ContractSection.tsx +++ b/src/components/pages/profile/[name]/tabs/OwnershipTab/sections/ContractSection/ContractSection.tsx @@ -29,7 +29,7 @@ export const ContractSection = ({ details }: Props) => { {address} - + {t('tabs.ownership.sections.contract.warning')} diff --git a/src/components/pages/profile/[name]/tabs/OwnershipTab/sections/RolesSection/components/RoleRow.tsx b/src/components/pages/profile/[name]/tabs/OwnershipTab/sections/RolesSection/components/RoleRow.tsx index c0e5a86f8..792f217a6 100644 --- a/src/components/pages/profile/[name]/tabs/OwnershipTab/sections/RolesSection/components/RoleRow.tsx +++ b/src/components/pages/profile/[name]/tabs/OwnershipTab/sections/RolesSection/components/RoleRow.tsx @@ -146,7 +146,7 @@ export const RoleRow = ({ name, address, roles, actions, isWrapped, isEmancipate colorStyle="accentSecondary" size="small" > - + diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index f7ed932a8..aec873cae 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -1,5 +1,5 @@ /* eslint-disable @typescript-eslint/naming-convention */ -import { lightTheme, RainbowKitProvider, Theme } from '@rainbow-me/rainbowkit' +import { darkTheme, lightTheme, RainbowKitProvider, Theme } from '@rainbow-me/rainbowkit' import '@rainbow-me/rainbowkit/styles.css' import '@ensdomains/thorin/dist/style.css' @@ -14,8 +14,10 @@ import { createGlobalStyle, keyframes, ThemeProvider } from 'styled-components' import { Mode, + darkTheme as thorinDarkTheme, lightTheme as thorinLightTheme, ThemeProvider as ThorinThemeProvider, + useTheme, } from '@ensdomains/thorin' import { Notifications } from '@app/components/Notifications' @@ -35,16 +37,6 @@ import '../styles.css' const INTERCOM_ID = process.env.NEXT_PUBLIC_INTERCOM_ID || 'eotmigir' -const rainbowKitTheme: Theme = { - ...lightTheme({ - accentColor: thorinLightTheme.colors.accent, - borderRadius: 'medium', - }), - fonts: { - body: 'Satoshi, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif', - }, -} - const anim = keyframes` 0% { opacity: 1; @@ -97,6 +89,10 @@ const GlobalStyle = createGlobalStyle` } } + [data-theme="dark"] body { + background: rgb(20, 20, 22); + } + a { color: inherit; text-decoration: none; @@ -153,37 +149,58 @@ declare global { } } -function MyApp({ Component, pageProps }: AppPropsWithLayout) { +const AppWithThorin = ({ Component, pageProps }: Omit) => { const getLayout = Component.getLayout ?? ((page) => page) + const theme = useTheme() + + const baseRainbowKitTheme = theme.mode === 'dark' ? darkTheme : lightTheme + + const rainbowKitTheme: Theme = { + ...baseRainbowKitTheme({ + accentColor: thorinLightTheme.colors.accent, + borderRadius: 'medium', + }), + fonts: { + body: 'Satoshi, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif', + }, + } + + return ( + + + + + + + + + + + + {getLayout()} + + + + + + + + + ) +} + +function MyApp({ Component, pageProps }: AppPropsWithLayout) { + const defaultMode = typeof window !== 'undefined' ? window.__theme : 'light' return ( - - - - - window.__setPreferredTheme(mode)} - defaultMode={typeof window !== 'undefined' ? window.__theme : 'light'} - > - - - - - - - - {getLayout()} - - - - - - - - - + window.__setPreferredTheme(mode)} + defaultMode={defaultMode} + > + + )