wip dark mode

ensdomains · Dec 14, 2024 · 7edb15a · 7edb15a
1 parent 378b2d7
commit 7edb15a
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 48 deletions.
diff --git 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
diff --git 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
           </div>
         </SettingsItem>
         <DarkModeItem>
-          NEW!
+          <Typography fontWeight="bold">Theme</Typography>
           <ThemeToggle
+            checked={mode === 'light'}
             size="extraSmall"
             onChange={(e) => {
               const newValue = e.target.checked ? 'light' : 'dark'

diff --git a/...nents/pages/profile/[name]/tabs/OwnershipTab/sections/ContractSection/ContractSection.tsx b/...nents/pages/profile/[name]/tabs/OwnershipTab/sections/ContractSection/ContractSection.tsx
@@ -29,7 +29,7 @@ export const ContractSection = ({ details }: Props) => {
       <RecordItem as="a" value={address} link={makeEtherscanLink(address, chainName, 'address')}>
         {address}
       </RecordItem>
-      <Helper alert="info" alignment={breakpoint.sm ? 'horizontal' : 'vertical'}>
+      <Helper alert="info" color="text" alignment={breakpoint.sm ? 'horizontal' : 'vertical'}>
         {t('tabs.ownership.sections.contract.warning')}
       </Helper>
     </Card>

diff --git a/...nents/pages/profile/[name]/tabs/OwnershipTab/sections/RolesSection/components/RoleRow.tsx b/...nents/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"
             >
-              <VerticalDotsSVG />
+              <VerticalDotsSVG width={12} height={12} />
             </Button>
           </Dropdown>
         </div>

diff --git 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<AppPropsWithLayout, 'router'>) => {
   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 (
+    <RainbowKitProvider theme={rainbowKitTheme}>
+      <TransactionStoreProvider>
+        <ThemeProvider theme={theme.mode === 'dark' ? thorinDarkTheme : thorinLightTheme}>
+          <BreakpointProvider queries={breakpoints}>
+            <IntercomProvider appId={INTERCOM_ID}>
+              <GlobalStyle />
+              <SyncProvider>
+                <TransactionFlowProvider>
+                  <SyncDroppedTransaction>
+                    <Notifications />
+                    <TestnetWarning />
+                    <Basic>{getLayout(<Component {...pageProps} />)}</Basic>
+                  </SyncDroppedTransaction>
+                </TransactionFlowProvider>
+              </SyncProvider>
+            </IntercomProvider>
+          </BreakpointProvider>
+        </ThemeProvider>
+      </TransactionStoreProvider>
+    </RainbowKitProvider>
+  )
+}
+
+function MyApp({ Component, pageProps }: AppPropsWithLayout) {
+  const defaultMode = typeof window !== 'undefined' ? window.__theme : 'light'
 
   return (
     <I18nextProvider i18n={i18n}>
       <QueryProviders>
-        <RainbowKitProvider theme={rainbowKitTheme}>
-          <TransactionStoreProvider>
-            <ThemeProvider theme={thorinLightTheme}>
-              <BreakpointProvider queries={breakpoints}>
-                <ThorinThemeProvider
-                  onThemeChange={(mode) => window.__setPreferredTheme(mode)}
-                  defaultMode={typeof window !== 'undefined' ? window.__theme : 'light'}
-                >
-                  <IntercomProvider appId={INTERCOM_ID}>
-                    <GlobalStyle />
-                    <SyncProvider>
-                      <TransactionFlowProvider>
-                        <SyncDroppedTransaction>
-                          <Notifications />
-                          <TestnetWarning />
-                          <Basic>{getLayout(<Component {...pageProps} />)}</Basic>
-                        </SyncDroppedTransaction>
-                      </TransactionFlowProvider>
-                    </SyncProvider>
-                  </IntercomProvider>
-                </ThorinThemeProvider>
-              </BreakpointProvider>
-            </ThemeProvider>
-          </TransactionStoreProvider>
-        </RainbowKitProvider>
+        <ThorinThemeProvider
+          onThemeChange={(mode) => window.__setPreferredTheme(mode)}
+          defaultMode={defaultMode}
+        >
+          <AppWithThorin {...{ Component, pageProps }} />
+        </ThorinThemeProvider>
       </QueryProviders>
     </I18nextProvider>
   )