feat: add dark color scheme support

lifinance · May 26, 2022 · b70526a · b70526a
1 parent 6186760
commit b70526a
Show file tree

Hide file tree

Showing 36 changed files with 403 additions and 261 deletions.
diff --git a/packages/widget-embedded/src/index.css b/packages/widget-embedded/src/index.css
@@ -4,3 +4,9 @@ body {
   -moz-osx-font-smoothing: grayscale;
   background-color: #F4F5F6;
 }
+
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color: #000;
+  }
+}
diff --git a/packages/widget-embedded/src/index.tsx b/packages/widget-embedded/src/index.tsx
@@ -1,5 +1,5 @@
 import { LiFiWidget, WidgetConfig } from '@lifinance/widget';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 import './index.css';
 import { reportWebVitals } from './reportWebVitals';
@@ -10,7 +10,7 @@ if (!rootElement) {
 }
 const root = createRoot(rootElement);
 
-const config: WidgetConfig = {
+const widgetConfig: WidgetConfig = {
   enabledChains: JSON.parse(process.env.LIFI_ENABLED_CHAINS_JSON!),
   fromChain: 'pol',
   toChain: 'bsc',
@@ -20,16 +20,42 @@ const config: WidgetConfig = {
   containerStyle: {
     width: 480,
     height: 640,
-    border: '1px solid rgb(234, 234, 234)',
+    border: `1px solid ${
+      window.matchMedia('(prefers-color-scheme: dark)').matches
+        ? 'rgb(66, 66, 66)'
+        : 'rgb(234, 234, 234)'
+    }`,
     borderRadius: '16px',
     display: 'flex',
     maxWidth: '480px',
     flex: 1,
   },
+  baselineStyle: {
+    borderRadius: '16px',
+  },
 };
 
-root.render(
-  <React.StrictMode>
+const App = () => {
+  const [config, setConfig] = useState(widgetConfig);
+  useEffect(() => {
+    const eventHadler = (event: MediaQueryListEvent) => {
+      setConfig((config) => ({
+        ...config,
+        containerStyle: {
+          ...config.containerStyle,
+          border: `1px solid ${
+            event.matches ? 'rgb(66, 66, 66)' : 'rgb(234, 234, 234)'
+          }`,
+        },
+      }));
+    };
+    const matchMedia = window.matchMedia('(prefers-color-scheme: dark)');
+    matchMedia.addEventListener('change', eventHadler);
+    return () => {
+      matchMedia.removeEventListener('change', eventHadler);
+    };
+  }, [config]);
+  return (
     <div
       style={{
         display: 'flex',
@@ -40,6 +66,12 @@ root.render(
     >
       <LiFiWidget config={config} />
     </div>
+  );
+};
+
+root.render(
+  <React.StrictMode>
+    <App />
   </React.StrictMode>,
 );
 

diff --git a/packages/widget/src/App.tsx b/packages/widget/src/App.tsx
@@ -1,5 +1,3 @@
-import { ScopedCssBaseline } from '@mui/material';
-import { ThemeProvider } from '@mui/material/styles';
 import { FC, PropsWithChildren } from 'react';
 import { QueryClientProvider, QueryClientProviderProps } from 'react-query';
 import { MemoryRouter, Route, Routes } from 'react-router-dom';
@@ -14,9 +12,9 @@ import { SettingsPage } from './pages/SettingsPage';
 import { SwapPage } from './pages/SwapPage';
 import { SwapRoutesPage } from './pages/SwapRoutesPage';
 import { SwapFormProvider } from './providers/SwapFormProvider';
+import { ThemeProvider } from './providers/ThemeProvider';
 import { WalletProvider } from './providers/WalletProvider';
 import { WidgetProvider } from './providers/WidgetProvider';
-import { theme } from './theme';
 import { routes } from './utils/routes';
 
 interface AppProps {
@@ -29,46 +27,44 @@ const QueryProvider = QueryClientProvider as FC<
 
 export const App: React.FC<AppProps> = ({ config }) => {
   return (
-    <ThemeProvider theme={theme}>
-      <QueryProvider client={queryClient}>
-        <MemoryRouter>
-          <WidgetProvider config={config}>
+    <WidgetProvider config={config}>
+      <ThemeProvider>
+        <QueryProvider client={queryClient}>
+          <MemoryRouter>
             <WalletProvider>
               <SwapFormProvider>
-                <ScopedCssBaseline enableColorScheme>
-                  <AppContainer sx={config.containerStyle}>
-                    <Header />
-                    <Routes>
-                      <Route path={routes.home} element={<MainPage />} />
-                      <Route
-                        path={routes.selectWallet}
-                        element={<SelectWalletPage />}
-                      />
-                      <Route
-                        path={routes.settings}
-                        element={<SettingsPage />}
-                      />
-                      <Route
-                        path={routes.fromToken}
-                        element={<SelectTokenPage formType="from" />}
-                      />
-                      <Route
-                        path={routes.toToken}
-                        element={<SelectTokenPage formType="to" />}
-                      />
-                      <Route
-                        path={routes.swapRoutes}
-                        element={<SwapRoutesPage />}
-                      />
-                      <Route path={routes.swap} element={<SwapPage />} />
-                    </Routes>
-                  </AppContainer>
-                </ScopedCssBaseline>
+                <AppContainer
+                  sx={config.containerStyle}
+                  style={config.baselineStyle}
+                >
+                  <Header />
+                  <Routes>
+                    <Route path={routes.home} element={<MainPage />} />
+                    <Route
+                      path={routes.selectWallet}
+                      element={<SelectWalletPage />}
+                    />
+                    <Route path={routes.settings} element={<SettingsPage />} />
+                    <Route
+                      path={routes.fromToken}
+                      element={<SelectTokenPage formType="from" />}
+                    />
+                    <Route
+                      path={routes.toToken}
+                      element={<SelectTokenPage formType="to" />}
+                    />
+                    <Route
+                      path={routes.swapRoutes}
+                      element={<SwapRoutesPage />}
+                    />
+                    <Route path={routes.swap} element={<SwapPage />} />
+                  </Routes>
+                </AppContainer>
               </SwapFormProvider>
             </WalletProvider>
-          </WidgetProvider>
-        </MemoryRouter>
-      </QueryProvider>
-    </ThemeProvider>
+          </MemoryRouter>
+        </QueryProvider>
+      </ThemeProvider>
+    </WidgetProvider>
   );
 };
diff --git a/packages/widget/src/components/AppContainer.tsx b/packages/widget/src/components/AppContainer.tsx
@@ -1,4 +1,9 @@
-import { Box, BoxProps, Container as MuiContainer } from '@mui/material';
+import {
+  Box,
+  BoxProps,
+  Container as MuiContainer,
+  ScopedCssBaseline,
+} from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { PropsWithChildren, RefObject, useLayoutEffect, useRef } from 'react';
 import { useLocation } from 'react-router-dom';
@@ -20,7 +25,7 @@ const Container = styled(MuiContainer)(({ theme }) => ({
 const RelativeContainer = styled(Box)(({ theme }) => ({
   position: 'relative',
   width: '480px',
-  background: theme.palette.common.white,
+  background: theme.palette.background.default,
   overflow: 'auto',
 }));
 
@@ -35,10 +40,11 @@ const ScrollableContainer = styled(Box)({
 export const AppContainer: React.FC<PropsWithChildren<BoxProps>> = ({
   children,
   sx,
+  style,
 }) => {
   const ref = useRef<HTMLElement>(null);
   return (
-    <>
+    <ScopedCssBaseline enableColorScheme style={style}>
       <RelativeContainer sx={sx}>
         <ScrollableContainer id={ElementId.ScrollableContainer} ref={ref}>
           <Container maxWidth={false} disableGutters>
@@ -48,7 +54,7 @@ export const AppContainer: React.FC<PropsWithChildren<BoxProps>> = ({
         </ScrollableContainer>
       </RelativeContainer>
       <ScrollToLocation elementRef={ref} />
-    </>
+    </ScopedCssBaseline>
   );
 };
 

diff --git a/packages/widget/src/components/BottomSheet/BottomSheet.tsx b/packages/widget/src/components/BottomSheet/BottomSheet.tsx
@@ -65,13 +65,14 @@ export const BottomSheet = forwardRef<BottomSheetBase, BottomSheetProps>(
             borderTopLeftRadius: (theme.shape.borderRadius as number) * 2,
             borderTopRightRadius: (theme.shape.borderRadius as number) * 2,
           }),
+          // elevation: 5,
         }}
         BackdropProps={{
-          sx: {
+          sx: (theme) => ({
             position: 'absolute',
-            backgroundColor: 'rgba(0,0,0,0.48)',
+            backgroundColor: 'rgb(0 0 0 / 48%)',
             backdropFilter: 'blur(3px)',
-          },
+          }),
         }}
         SlideProps={{
           container: containerElement,

diff --git a/packages/widget/src/components/Card/CardContainer.tsx b/packages/widget/src/components/Card/CardContainer.tsx
@@ -4,9 +4,13 @@ import { styled } from '@mui/material/styles';
 export const CardContainer = styled(Box, {
   shouldForwardProp: (prop) => prop !== 'isError',
 })<{ isError?: boolean }>(({ theme, isError }) => ({
-  backgroundColor: theme.palette.common.white,
+  backgroundColor: theme.palette.background.paper,
   border: `1px solid`,
-  borderColor: isError ? theme.palette.error.main : theme.palette.grey[300],
+  borderColor: isError
+    ? theme.palette.error.main
+    : theme.palette.mode === 'light'
+    ? theme.palette.grey[300]
+    : theme.palette.grey[800],
   borderRadius: (theme.shape.borderRadius as number) * 2,
   overflow: 'hidden',
   position: 'relative',

diff --git a/packages/widget/src/components/Header/Header.style.ts b/packages/widget/src/components/Header/Header.style.ts
@@ -4,8 +4,8 @@ import { styled } from '@mui/material/styles';
 export const HeaderAppBar = styled(AppBar, {
   shouldForwardProp: (prop) => prop !== 'pt',
 })<{ pt?: number }>(({ theme, pt }) => ({
-  backgroundColor: 'transparent',
-  color: theme.palette.common.black,
+  backgroundColor: theme.palette.background.default,
+  color: theme.palette.text.primary,
   flexDirection: 'row',
   alignItems: 'center',
   position: 'relative',
@@ -16,7 +16,7 @@ export const HeaderAppBar = styled(AppBar, {
 export const Container = styled(Box, {
   shouldForwardProp: (prop) => prop !== 'sticky',
 })<{ sticky?: boolean }>(({ theme, sticky }) => ({
-  backgroundColor: sticky ? theme.palette.common.white : 'transparent',
+  backgroundColor: theme.palette.background.default,
   position: sticky ? 'sticky' : 'relative',
   top: 0,
   zIndex: 1200,

diff --git a/packages/widget/src/components/Header/NavigationHeader.tsx b/packages/widget/src/components/Header/NavigationHeader.tsx
@@ -61,7 +61,6 @@ export const NavigationHeader: React.FC = () => {
         <IconButton
           size="medium"
           aria-label="settings"
-          color="inherit"
           edge="start"
           onClick={handleBack}
         >
@@ -70,7 +69,6 @@ export const NavigationHeader: React.FC = () => {
       ) : null}
       {/* </Collapse> */}
       <Typography
-        color="black"
         fontSize={pathname === '/' ? 32 : 24}
         align={pathname === '/' ? 'left' : 'center'}
         fontWeight="700"
@@ -90,7 +88,6 @@ export const NavigationHeader: React.FC = () => {
             <IconButton
               size="medium"
               aria-label="settings"
-              color="inherit"
               edge="end"
               onClick={handleSettings}
             >
@@ -104,7 +101,6 @@ export const NavigationHeader: React.FC = () => {
         <IconButton
           size="medium"
           aria-label="settings"
-          color="inherit"
           edge="end"
           onClick={handleSettings}
         >

diff --git a/packages/widget/src/components/Header/WalletHeader.tsx b/packages/widget/src/components/Header/WalletHeader.tsx
@@ -30,22 +30,16 @@ export const WalletHeader: React.FC = () => {
             }}
             mr={0.5}
           >
-            <Typography variant="caption" align="right" color="black">
+            <Typography variant="caption" align="right">
               {t(`header.walletConnected`)}
             </Typography>
-            <Typography
-              variant="body2"
-              align="right"
-              color="black"
-              fontWeight="600"
-            >
+            <Typography variant="body2" align="right" fontWeight="600">
               {walletAddress}
             </Typography>
           </Box>
           <IconButton
             size="medium"
             aria-label="disconnect"
-            color="inherit"
             edge="end"
             onClick={disconnect}
           >
@@ -57,7 +51,6 @@ export const WalletHeader: React.FC = () => {
           <Typography
             variant="body2"
             align="right"
-            color="black"
             fontWeight="600"
             flex={1}
             mr={0.5}
@@ -81,7 +74,6 @@ const ConnectButton = () => {
     <IconButton
       size="medium"
       aria-label="disconnect"
-      color="inherit"
       edge="end"
       onClick={pathname !== routes.selectWallet ? connect : undefined}
     >

diff --git a/packages/widget/src/components/Input.tsx b/packages/widget/src/components/Input.tsx
@@ -6,7 +6,7 @@ export const Input = styled(InputBase)(({ theme }) => ({
   backgroundColor:
     theme.palette.mode === 'light'
       ? theme.palette.common.white
-      : theme.palette.grey[900],
+      : theme.palette.background.paper,
   paddingRight: theme.spacing(2),
   [`.${inputBaseClasses.input}`]: {
     padding: theme.spacing(1.5, 1, 1.5, 2),

diff --git a/packages/widget/src/components/LiFiLogo.tsx b/packages/widget/src/components/LiFiLogo.tsx
@@ -0,0 +1,22 @@
+import { useTheme } from '@mui/material/styles';
+import { CSSProperties } from 'react';
+import { ReactComponent as LiFiFullLogo } from '../icons/LiFiFullLogo.svg';
+import { ReactComponent as LiFiIconLogo } from '../icons/LiFiLogo.svg';
+
+export const LiFiLogo: React.FC<{
+  variant?: 'icon' | 'full';
+  style?: CSSProperties;
+}> = ({ variant = 'icon', style }) => {
+  const theme = useTheme();
+  const Component = variant === 'icon' ? LiFiIconLogo : LiFiFullLogo;
+  return (
+    <Component
+      style={style}
+      fill={
+        theme.palette.mode === 'light'
+          ? theme.palette.common.black
+          : theme.palette.common.white
+      }
+    />
+  );
+};