feat: add Inter font

lifinance · May 25, 2022 · f814b3a · f814b3a
1 parent c8ecde7
commit f814b3a
Show file tree

Hide file tree

Showing 58 changed files with 305 additions and 63 deletions.
diff --git a/packages/widget-embedded/src/index.css b/packages/widget-embedded/src/index.css
@@ -1,14 +1,5 @@
-html,
-body,
-#root {
-  /* height: 100%; */
-}
-
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   background-color: #F4F5F6;

diff --git a/packages/widget/src/App.tsx b/packages/widget/src/App.tsx
@@ -1,3 +1,4 @@
+import { ScopedCssBaseline } from '@mui/material';
 import { ThemeProvider } from '@mui/material/styles';
 import { FC, PropsWithChildren } from 'react';
 import { QueryClientProvider, QueryClientProviderProps } from 'react-query';
@@ -31,36 +32,41 @@ export const App: React.FC<AppProps> = ({ config }) => {
     <ThemeProvider theme={theme}>
       <QueryProvider client={queryClient}>
         <MemoryRouter>
-          <AppContainer sx={config.containerStyle}>
-            <WidgetProvider config={config}>
-              <WalletProvider>
-                <SwapFormProvider>
-                  <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>
-                </SwapFormProvider>
-              </WalletProvider>
-            </WidgetProvider>
-          </AppContainer>
+          <WidgetProvider config={config}>
+            <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>
+              </SwapFormProvider>
+            </WalletProvider>
+          </WidgetProvider>
         </MemoryRouter>
       </QueryProvider>
     </ThemeProvider>

diff --git a/packages/widget/src/components/Card/CardHeader.tsx b/packages/widget/src/components/Card/CardHeader.tsx
@@ -3,7 +3,6 @@ import { cardHeaderClasses } from '@mui/material/CardHeader';
 import { styled } from '@mui/material/styles';
 
 export const CardHeader = styled(MuiCardHeader)(({ theme }) => ({
-  height: '32px',
   [`.${cardHeaderClasses.action}`]: {
     marginTop: -2,
     alignSelf: 'center',

diff --git a/packages/widget/src/components/Card/CardTitle.tsx b/packages/widget/src/components/Card/CardTitle.tsx
@@ -5,6 +5,6 @@ export const CardTitle = styled(Typography)(({ theme }) => ({
   fontSize: '0.875rem',
   lineHeight: '1.286',
   letterSpacing: '0.01071em',
-  fontWeight: 'bold',
+  fontWeight: 700,
   padding: theme.spacing(1.75, 2, 0, 2),
 }));
diff --git a/packages/widget/src/components/Header/NavigationHeader.tsx b/packages/widget/src/components/Header/NavigationHeader.tsx
@@ -73,7 +73,7 @@ export const NavigationHeader: React.FC = () => {
         color="black"
         fontSize={pathname === '/' ? 32 : 24}
         align={pathname === '/' ? 'left' : 'center'}
-        fontWeight="bold"
+        fontWeight="700"
         flex={1}
         noWrap
       >

diff --git a/packages/widget/src/components/Header/WalletHeader.tsx b/packages/widget/src/components/Header/WalletHeader.tsx
@@ -37,7 +37,7 @@ export const WalletHeader: React.FC = () => {
               variant="body2"
               align="right"
               color="black"
-              fontWeight="bold"
+              fontWeight="600"
             >
               {walletAddress}
             </Typography>
@@ -58,7 +58,7 @@ export const WalletHeader: React.FC = () => {
             variant="body2"
             align="right"
             color="black"
-            fontWeight="bold"
+            fontWeight="600"
             flex={1}
             mr={0.5}
           >

diff --git a/packages/widget/src/components/ReverseTokensButton.tsx b/packages/widget/src/components/ReverseTokensButton.tsx
@@ -21,7 +21,7 @@ export const ReverseTokensButton: React.FC = () => {
   return (
     <IconButton
       onClick={handleClick}
-      size="medium"
+      size="small"
       aria-label="swap-destinations"
       color="inherit"
     >

diff --git a/packages/widget/src/components/SelectTokenButton/SelectTokenButton.style.tsx b/packages/widget/src/components/SelectTokenButton/SelectTokenButton.style.tsx
@@ -13,6 +13,7 @@ export const Card = styled(MuiCard)(({ theme }) => ({
 export const SelectTokenCardHeader = styled(CardHeader, {
   shouldForwardProp: (prop) => prop !== 'selected',
 })<{ selected?: boolean }>(({ theme, selected }) => ({
+  height: 64,
   [`.${cardHeaderClasses.title}`]: {
     color: selected ? theme.palette.text.primary : theme.palette.text.secondary,
   },

diff --git a/packages/widget/src/components/StepActions/StepActions.style.tsx b/packages/widget/src/components/StepActions/StepActions.style.tsx
@@ -27,15 +27,15 @@ export const StepConnector = styled(MuiStepConnector)(({ theme }) => ({
 export const StepLabel = styled(MuiStepLabel)(({ theme }) => ({
   padding: 0,
   [`.${stepLabelClasses.iconContainer}`]: {
-    paddingLeft: theme.spacing(1),
-    paddingRight: theme.spacing(3),
+    paddingLeft: theme.spacing(1.25),
+    paddingRight: theme.spacing(3.25),
   },
 }));
 
 export const StepContent = styled(MuiStepContent)(({ theme }) => ({
   borderLeft: `2px solid ${theme.palette.grey[300]}`,
   marginLeft: theme.spacing(1.875),
-  paddingLeft: theme.spacing(3.9375),
+  paddingLeft: theme.spacing(3.875),
   [`&.${stepContentClasses.last}`]: {
     borderLeft: 'none',
     paddingLeft: theme.spacing(4.1875),

diff --git a/packages/widget/src/components/SwapInput/SwapInput.style.tsx b/packages/widget/src/components/SwapInput/SwapInput.style.tsx
@@ -4,7 +4,7 @@ import { styled } from '@mui/material/styles';
 
 export const Input = styled(InputBase)(({ theme }) => ({
   fontSize: 24,
-  fontWeight: 'bold',
+  fontWeight: 700,
   padding: theme.spacing(2, 2, 2, 0),
   [`.${inputBaseClasses.input}`]: {
     height: 32,

diff --git a/packages/widget/src/components/SwapInputAdornment/SwapInputAdornment.style.tsx b/packages/widget/src/components/SwapInputAdornment/SwapInputAdornment.style.tsx
@@ -3,7 +3,7 @@ import { styled } from '@mui/material/styles';
 
 export const SwapMaxAmountTypography = styled(Typography)(({ theme }) => ({
   fontSize: 24,
-  fontWeight: 'bold',
+  fontWeight: '700',
   color: theme.palette.grey[600],
   transition: theme.transitions.create(['color']),
   padding: theme.spacing(0.5, 0),

diff --git a/packages/widget/src/components/SwapRouteCard/SwapRouteCard.style.ts b/packages/widget/src/components/SwapRouteCard/SwapRouteCard.style.ts
@@ -1,4 +1,4 @@
-import { Box } from '@mui/material';
+import { Box, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
 
 export const Card = styled(Box, {
@@ -23,7 +23,7 @@ export const Card = styled(Box, {
   }),
 );
 
-export const Label = styled(Box, {
+export const Label = styled(Typography, {
   shouldForwardProp: (prop) => prop !== 'active',
 })<{ active?: boolean }>(({ theme, active }) => ({
   backgroundColor: active
@@ -35,7 +35,9 @@ export const Label = styled(Box, {
   color: active ? theme.palette.common.white : theme.palette.common.black,
   padding: theme.spacing(0.5, 0.75),
   fontSize: 12,
+  lineHeight: 1.2,
   fontWeight: '600',
+  height: 24,
   letterSpacing: '0.05rem',
   textTransform: 'uppercase',
   display: 'inline-flex',

diff --git a/packages/widget/src/components/SwapRouteCard/SwapRouteCard.tsx b/packages/widget/src/components/SwapRouteCard/SwapRouteCard.tsx
@@ -45,7 +45,7 @@ export const SwapRouteCard: React.FC<SwapRouteCardProps & BoxProps> = ({
             {route.toToken.symbol[0]}
           </Avatar>
           <Box>
-            <Typography fontSize={32} fontWeight="bold" lineHeight="normal">
+            <Typography fontSize={32} fontWeight="700" lineHeight="normal">
               {formatTokenAmount(route.toAmount, route.toToken.decimals)}
             </Typography>
             <Typography fontSize={14} color="text.secondary">
@@ -73,7 +73,12 @@ export const SwapRouteCard: React.FC<SwapRouteCardProps & BoxProps> = ({
             </Typography>
           </Box>
           <Box>
-            <Typography fontSize={18} fontWeight="500">
+            <Typography
+              fontSize={18}
+              fontWeight="500"
+              display="flex"
+              justifyContent="flex-end"
+            >
               ~
               {(
                 route.steps

diff --git a/packages/widget/src/fonts/Inter-Black.woff b/packages/widget/src/fonts/Inter-Black.woff
diff --git a/packages/widget/src/fonts/Inter-Black.woff2 b/packages/widget/src/fonts/Inter-Black.woff2
diff --git a/packages/widget/src/fonts/Inter-BlackItalic.woff b/packages/widget/src/fonts/Inter-BlackItalic.woff
diff --git a/packages/widget/src/fonts/Inter-BlackItalic.woff2 b/packages/widget/src/fonts/Inter-BlackItalic.woff2
diff --git a/packages/widget/src/fonts/Inter-Bold.woff b/packages/widget/src/fonts/Inter-Bold.woff
diff --git a/packages/widget/src/fonts/Inter-Bold.woff2 b/packages/widget/src/fonts/Inter-Bold.woff2
diff --git a/packages/widget/src/fonts/Inter-BoldItalic.woff b/packages/widget/src/fonts/Inter-BoldItalic.woff
diff --git a/packages/widget/src/fonts/Inter-BoldItalic.woff2 b/packages/widget/src/fonts/Inter-BoldItalic.woff2
diff --git a/packages/widget/src/fonts/Inter-ExtraBold.woff b/packages/widget/src/fonts/Inter-ExtraBold.woff
diff --git a/packages/widget/src/fonts/Inter-ExtraBold.woff2 b/packages/widget/src/fonts/Inter-ExtraBold.woff2
diff --git a/packages/widget/src/fonts/Inter-ExtraBoldItalic.woff b/packages/widget/src/fonts/Inter-ExtraBoldItalic.woff
diff --git a/packages/widget/src/fonts/Inter-ExtraBoldItalic.woff2 b/packages/widget/src/fonts/Inter-ExtraBoldItalic.woff2
diff --git a/packages/widget/src/fonts/Inter-ExtraLight.woff b/packages/widget/src/fonts/Inter-ExtraLight.woff
diff --git a/packages/widget/src/fonts/Inter-ExtraLight.woff2 b/packages/widget/src/fonts/Inter-ExtraLight.woff2
diff --git a/packages/widget/src/fonts/Inter-ExtraLightItalic.woff b/packages/widget/src/fonts/Inter-ExtraLightItalic.woff
diff --git a/packages/widget/src/fonts/Inter-ExtraLightItalic.woff2 b/packages/widget/src/fonts/Inter-ExtraLightItalic.woff2
diff --git a/packages/widget/src/fonts/Inter-Italic.woff b/packages/widget/src/fonts/Inter-Italic.woff
diff --git a/packages/widget/src/fonts/Inter-Italic.woff2 b/packages/widget/src/fonts/Inter-Italic.woff2
diff --git a/packages/widget/src/fonts/Inter-Light.woff b/packages/widget/src/fonts/Inter-Light.woff
diff --git a/packages/widget/src/fonts/Inter-Light.woff2 b/packages/widget/src/fonts/Inter-Light.woff2
diff --git a/packages/widget/src/fonts/Inter-LightItalic.woff b/packages/widget/src/fonts/Inter-LightItalic.woff
diff --git a/packages/widget/src/fonts/Inter-LightItalic.woff2 b/packages/widget/src/fonts/Inter-LightItalic.woff2
diff --git a/packages/widget/src/fonts/Inter-Medium.woff b/packages/widget/src/fonts/Inter-Medium.woff
diff --git a/packages/widget/src/fonts/Inter-Medium.woff2 b/packages/widget/src/fonts/Inter-Medium.woff2
diff --git a/packages/widget/src/fonts/Inter-MediumItalic.woff b/packages/widget/src/fonts/Inter-MediumItalic.woff
diff --git a/packages/widget/src/fonts/Inter-MediumItalic.woff2 b/packages/widget/src/fonts/Inter-MediumItalic.woff2
diff --git a/packages/widget/src/fonts/Inter-Regular.woff b/packages/widget/src/fonts/Inter-Regular.woff
diff --git a/packages/widget/src/fonts/Inter-Regular.woff2 b/packages/widget/src/fonts/Inter-Regular.woff2
diff --git a/packages/widget/src/fonts/Inter-SemiBold.woff b/packages/widget/src/fonts/Inter-SemiBold.woff
diff --git a/packages/widget/src/fonts/Inter-SemiBold.woff2 b/packages/widget/src/fonts/Inter-SemiBold.woff2
diff --git a/packages/widget/src/fonts/Inter-SemiBoldItalic.woff b/packages/widget/src/fonts/Inter-SemiBoldItalic.woff
diff --git a/packages/widget/src/fonts/Inter-SemiBoldItalic.woff2 b/packages/widget/src/fonts/Inter-SemiBoldItalic.woff2
diff --git a/packages/widget/src/fonts/Inter-Thin.woff b/packages/widget/src/fonts/Inter-Thin.woff
diff --git a/packages/widget/src/fonts/Inter-Thin.woff2 b/packages/widget/src/fonts/Inter-Thin.woff2
diff --git a/packages/widget/src/fonts/Inter-ThinItalic.woff b/packages/widget/src/fonts/Inter-ThinItalic.woff
diff --git a/packages/widget/src/fonts/Inter-ThinItalic.woff2 b/packages/widget/src/fonts/Inter-ThinItalic.woff2
diff --git a/packages/widget/src/fonts/Inter-italic.var.woff2 b/packages/widget/src/fonts/Inter-italic.var.woff2
diff --git a/packages/widget/src/fonts/Inter-roman.var.woff2 b/packages/widget/src/fonts/Inter-roman.var.woff2
diff --git a/packages/widget/src/fonts/Inter.var.woff2 b/packages/widget/src/fonts/Inter.var.woff2