alt theme

e59c6b80 · tom · 0d585442 · e59c6b80 · e59c6b80 · e59c6b80
Commit e59c6b80 authored Jun 10, 2022 by tom
7 changed files
--- a/data/watchlist.ts
+++ b/data/watchlist.ts
@@ -18,7 +18,7 @@ export const watchlist = [
    notification: false,
  },
  {
-    address: '0x8c461F78760988c4135e363a87dd736f8b671ff0',
+    address: '0x8c461F78760988c4135e363a87dd736f8b671ff1',
    tokenBalance: 200.2,
    tokenBalanceUSD: 202.4,
    totalUSD: 3000.5,

--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -2,10 +2,14 @@ import React from 'react';
 import type { AppProps } from 'next/app';
 import { ChakraProvider } from '@chakra-ui/react';
 import theme from '../theme/index';
+import altTheme from '../theme_alt/index';
+import { useRouter } from 'next/router';

 function MyApp({ Component, pageProps }: AppProps) {
+  const router = useRouter();
+
  return (
-    <ChakraProvider theme={ theme }>
+    <ChakraProvider theme={ router.query.theme === 'alt' ? altTheme : theme }>
      <Component { ...pageProps }/>
    </ChakraProvider>
  );

--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@@ -10,6 +10,10 @@ class MyDocument extends Document {
            href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"
            rel="stylesheet"
          />
+          <link
+            href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,500;0,600;1,400&display=swap"
+            rel="stylesheet"
+          />
        </Head>
        <body>
          <Main/>

--- a/theme/foundations/colors.ts
+++ b/theme/foundations/colors.ts
@@ -57,7 +57,7 @@ const colors = {
    '400': '#30f7ae',
    '500': '#1fdd9b',
    '600': '#11ad7d',
-    '700': '#047b5d',
+    '700': '#047b5d', // <-
    '800': '#004a33',
    '900': '#001b0f',
  },

--- a/theme_alt/foundations/colors.ts
+++ b/theme_alt/foundations/colors.ts
+const colors = {
+  // main colors
+  brand: {
+    '50': '#ffe2f4',
+    '100': '#ffb1d7',
+    '200': '#ff7eba',
+    '300': '#ff4c9e',
+    '400': '#fe1b83',
+    '500': '#e40169',
+    '600': '#b30052',
+    '700': '#81003a',
+    '800': '#4f0023',
+    '900': '#1f000e',
+  },
+}
+
+export default colors;
--- a/theme_alt/foundations/typography.ts
+++ b/theme_alt/foundations/typography.ts
+import { theme } from '@chakra-ui/react';
+
+const typography = {
+  fonts: {
+    heading: `Raleway, ${ theme.fonts.heading }`,
+    body: `Raleway, ${ theme.fonts.body }`,
+  },
+}
+
+export default typography;
--- a/theme_alt/index.ts
+++ b/theme_alt/index.ts
+import { extendTheme } from '@chakra-ui/react';
+
+import typography from './foundations/typography';
+import borders from '../theme/foundations/borders';
+import colors from './foundations/colors';
+
+const overrides = {
+  ...typography,
+  ...borders,
+  colors,
+}
+
+export default extendTheme(overrides);