diff --git a/packages/widget-embedded/src/index.css b/packages/widget-embedded/src/index.css index 45f307f5b..725952d74 100644 --- 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 index bffe8122c..8ad09f22e 100644 --- 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 = ({ config }) => { - - - - -
- - } /> - } - /> - } /> - } - /> - } - /> - } - /> - } /> - - - - - + + + + + +
+ + } /> + } + /> + } + /> + } + /> + } + /> + } + /> + } /> + + + + + + diff --git a/packages/widget/src/components/Card/CardHeader.tsx b/packages/widget/src/components/Card/CardHeader.tsx index 78c31b9d5..bb265c0f4 100644 --- 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 index 35fc75965..913cb3f36 100644 --- 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 index 76d78529b..8d14a12b2 100644 --- 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 index 431040fbb..f8e05af29 100644 --- 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} @@ -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 index 5323ee96e..e31eae7be 100644 --- a/packages/widget/src/components/ReverseTokensButton.tsx +++ b/packages/widget/src/components/ReverseTokensButton.tsx @@ -21,7 +21,7 @@ export const ReverseTokensButton: React.FC = () => { return ( diff --git a/packages/widget/src/components/SelectTokenButton/SelectTokenButton.style.tsx b/packages/widget/src/components/SelectTokenButton/SelectTokenButton.style.tsx index 13802e63b..b2a2d0ddd 100644 --- 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 index 2a8896622..89f77f40c 100644 --- 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 index e1d4264dd..d5a7f9f16 100644 --- 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 index 024e834d7..31ad07f6e 100644 --- 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 index a1350c8eb..dc2243a9e 100644 --- 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 index ef21a8536..fa77a2bf7 100644 --- 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 = ({ {route.toToken.symbol[0]} - + {formatTokenAmount(route.toAmount, route.toToken.decimals)} @@ -73,7 +73,12 @@ export const SwapRouteCard: React.FC = ({ - + ~ {( route.steps diff --git a/packages/widget/src/fonts/Inter-Black.woff b/packages/widget/src/fonts/Inter-Black.woff new file mode 100644 index 000000000..a18593a09 Binary files /dev/null and b/packages/widget/src/fonts/Inter-Black.woff differ diff --git a/packages/widget/src/fonts/Inter-Black.woff2 b/packages/widget/src/fonts/Inter-Black.woff2 new file mode 100644 index 000000000..68f64c9ed Binary files /dev/null and b/packages/widget/src/fonts/Inter-Black.woff2 differ diff --git a/packages/widget/src/fonts/Inter-BlackItalic.woff b/packages/widget/src/fonts/Inter-BlackItalic.woff new file mode 100644 index 000000000..b6b01943d Binary files /dev/null and b/packages/widget/src/fonts/Inter-BlackItalic.woff differ diff --git a/packages/widget/src/fonts/Inter-BlackItalic.woff2 b/packages/widget/src/fonts/Inter-BlackItalic.woff2 new file mode 100644 index 000000000..1c9c7ca8b Binary files /dev/null and b/packages/widget/src/fonts/Inter-BlackItalic.woff2 differ diff --git a/packages/widget/src/fonts/Inter-Bold.woff b/packages/widget/src/fonts/Inter-Bold.woff new file mode 100644 index 000000000..eaf3d4bfd Binary files /dev/null and b/packages/widget/src/fonts/Inter-Bold.woff differ diff --git a/packages/widget/src/fonts/Inter-Bold.woff2 b/packages/widget/src/fonts/Inter-Bold.woff2 new file mode 100644 index 000000000..2846f29cc Binary files /dev/null and b/packages/widget/src/fonts/Inter-Bold.woff2 differ diff --git a/packages/widget/src/fonts/Inter-BoldItalic.woff b/packages/widget/src/fonts/Inter-BoldItalic.woff new file mode 100644 index 000000000..327507616 Binary files /dev/null and b/packages/widget/src/fonts/Inter-BoldItalic.woff differ diff --git a/packages/widget/src/fonts/Inter-BoldItalic.woff2 b/packages/widget/src/fonts/Inter-BoldItalic.woff2 new file mode 100644 index 000000000..0b1fe8e12 Binary files /dev/null and b/packages/widget/src/fonts/Inter-BoldItalic.woff2 differ diff --git a/packages/widget/src/fonts/Inter-ExtraBold.woff b/packages/widget/src/fonts/Inter-ExtraBold.woff new file mode 100644 index 000000000..c2c17edea Binary files /dev/null and b/packages/widget/src/fonts/Inter-ExtraBold.woff differ diff --git a/packages/widget/src/fonts/Inter-ExtraBold.woff2 b/packages/widget/src/fonts/Inter-ExtraBold.woff2 new file mode 100644 index 000000000..c24c2bdc2 Binary files /dev/null and b/packages/widget/src/fonts/Inter-ExtraBold.woff2 differ diff --git a/packages/widget/src/fonts/Inter-ExtraBoldItalic.woff b/packages/widget/src/fonts/Inter-ExtraBoldItalic.woff new file mode 100644 index 000000000..c42f70526 Binary files /dev/null and b/packages/widget/src/fonts/Inter-ExtraBoldItalic.woff differ diff --git a/packages/widget/src/fonts/Inter-ExtraBoldItalic.woff2 b/packages/widget/src/fonts/Inter-ExtraBoldItalic.woff2 new file mode 100644 index 000000000..4a81dc798 Binary files /dev/null and b/packages/widget/src/fonts/Inter-ExtraBoldItalic.woff2 differ diff --git a/packages/widget/src/fonts/Inter-ExtraLight.woff b/packages/widget/src/fonts/Inter-ExtraLight.woff new file mode 100644 index 000000000..d0de5f397 Binary files /dev/null and b/packages/widget/src/fonts/Inter-ExtraLight.woff differ diff --git a/packages/widget/src/fonts/Inter-ExtraLight.woff2 b/packages/widget/src/fonts/Inter-ExtraLight.woff2 new file mode 100644 index 000000000..f2ea706fa Binary files /dev/null and b/packages/widget/src/fonts/Inter-ExtraLight.woff2 differ diff --git a/packages/widget/src/fonts/Inter-ExtraLightItalic.woff b/packages/widget/src/fonts/Inter-ExtraLightItalic.woff new file mode 100644 index 000000000..81f1a28ef Binary files /dev/null and b/packages/widget/src/fonts/Inter-ExtraLightItalic.woff differ diff --git a/packages/widget/src/fonts/Inter-ExtraLightItalic.woff2 b/packages/widget/src/fonts/Inter-ExtraLightItalic.woff2 new file mode 100644 index 000000000..9af717ba9 Binary files /dev/null and b/packages/widget/src/fonts/Inter-ExtraLightItalic.woff2 differ diff --git a/packages/widget/src/fonts/Inter-Italic.woff b/packages/widget/src/fonts/Inter-Italic.woff new file mode 100644 index 000000000..a806b3820 Binary files /dev/null and b/packages/widget/src/fonts/Inter-Italic.woff differ diff --git a/packages/widget/src/fonts/Inter-Italic.woff2 b/packages/widget/src/fonts/Inter-Italic.woff2 new file mode 100644 index 000000000..a619fc548 Binary files /dev/null and b/packages/widget/src/fonts/Inter-Italic.woff2 differ diff --git a/packages/widget/src/fonts/Inter-Light.woff b/packages/widget/src/fonts/Inter-Light.woff new file mode 100644 index 000000000..c496464d0 Binary files /dev/null and b/packages/widget/src/fonts/Inter-Light.woff differ diff --git a/packages/widget/src/fonts/Inter-Light.woff2 b/packages/widget/src/fonts/Inter-Light.woff2 new file mode 100644 index 000000000..bc4be6658 Binary files /dev/null and b/packages/widget/src/fonts/Inter-Light.woff2 differ diff --git a/packages/widget/src/fonts/Inter-LightItalic.woff b/packages/widget/src/fonts/Inter-LightItalic.woff new file mode 100644 index 000000000..f84a9de35 Binary files /dev/null and b/packages/widget/src/fonts/Inter-LightItalic.woff differ diff --git a/packages/widget/src/fonts/Inter-LightItalic.woff2 b/packages/widget/src/fonts/Inter-LightItalic.woff2 new file mode 100644 index 000000000..842b2dfcb Binary files /dev/null and b/packages/widget/src/fonts/Inter-LightItalic.woff2 differ diff --git a/packages/widget/src/fonts/Inter-Medium.woff b/packages/widget/src/fonts/Inter-Medium.woff new file mode 100644 index 000000000..d546843f2 Binary files /dev/null and b/packages/widget/src/fonts/Inter-Medium.woff differ diff --git a/packages/widget/src/fonts/Inter-Medium.woff2 b/packages/widget/src/fonts/Inter-Medium.woff2 new file mode 100644 index 000000000..f92498a2e Binary files /dev/null and b/packages/widget/src/fonts/Inter-Medium.woff2 differ diff --git a/packages/widget/src/fonts/Inter-MediumItalic.woff b/packages/widget/src/fonts/Inter-MediumItalic.woff new file mode 100644 index 000000000..459a65688 Binary files /dev/null and b/packages/widget/src/fonts/Inter-MediumItalic.woff differ diff --git a/packages/widget/src/fonts/Inter-MediumItalic.woff2 b/packages/widget/src/fonts/Inter-MediumItalic.woff2 new file mode 100644 index 000000000..0e3019f4a Binary files /dev/null and b/packages/widget/src/fonts/Inter-MediumItalic.woff2 differ diff --git a/packages/widget/src/fonts/Inter-Regular.woff b/packages/widget/src/fonts/Inter-Regular.woff new file mode 100644 index 000000000..62d3a6187 Binary files /dev/null and b/packages/widget/src/fonts/Inter-Regular.woff differ diff --git a/packages/widget/src/fonts/Inter-Regular.woff2 b/packages/widget/src/fonts/Inter-Regular.woff2 new file mode 100644 index 000000000..6c2b6893d Binary files /dev/null and b/packages/widget/src/fonts/Inter-Regular.woff2 differ diff --git a/packages/widget/src/fonts/Inter-SemiBold.woff b/packages/widget/src/fonts/Inter-SemiBold.woff new file mode 100644 index 000000000..a815f43a9 Binary files /dev/null and b/packages/widget/src/fonts/Inter-SemiBold.woff differ diff --git a/packages/widget/src/fonts/Inter-SemiBold.woff2 b/packages/widget/src/fonts/Inter-SemiBold.woff2 new file mode 100644 index 000000000..611e90c95 Binary files /dev/null and b/packages/widget/src/fonts/Inter-SemiBold.woff2 differ diff --git a/packages/widget/src/fonts/Inter-SemiBoldItalic.woff b/packages/widget/src/fonts/Inter-SemiBoldItalic.woff new file mode 100644 index 000000000..909e43a97 Binary files /dev/null and b/packages/widget/src/fonts/Inter-SemiBoldItalic.woff differ diff --git a/packages/widget/src/fonts/Inter-SemiBoldItalic.woff2 b/packages/widget/src/fonts/Inter-SemiBoldItalic.woff2 new file mode 100644 index 000000000..545685bd2 Binary files /dev/null and b/packages/widget/src/fonts/Inter-SemiBoldItalic.woff2 differ diff --git a/packages/widget/src/fonts/Inter-Thin.woff b/packages/widget/src/fonts/Inter-Thin.woff new file mode 100644 index 000000000..62bc58cd1 Binary files /dev/null and b/packages/widget/src/fonts/Inter-Thin.woff differ diff --git a/packages/widget/src/fonts/Inter-Thin.woff2 b/packages/widget/src/fonts/Inter-Thin.woff2 new file mode 100644 index 000000000..abbc3a5c9 Binary files /dev/null and b/packages/widget/src/fonts/Inter-Thin.woff2 differ diff --git a/packages/widget/src/fonts/Inter-ThinItalic.woff b/packages/widget/src/fonts/Inter-ThinItalic.woff new file mode 100644 index 000000000..700a7f069 Binary files /dev/null and b/packages/widget/src/fonts/Inter-ThinItalic.woff differ diff --git a/packages/widget/src/fonts/Inter-ThinItalic.woff2 b/packages/widget/src/fonts/Inter-ThinItalic.woff2 new file mode 100644 index 000000000..ab0b2002a Binary files /dev/null and b/packages/widget/src/fonts/Inter-ThinItalic.woff2 differ diff --git a/packages/widget/src/fonts/Inter-italic.var.woff2 b/packages/widget/src/fonts/Inter-italic.var.woff2 new file mode 100644 index 000000000..b826d5af8 Binary files /dev/null and b/packages/widget/src/fonts/Inter-italic.var.woff2 differ diff --git a/packages/widget/src/fonts/Inter-roman.var.woff2 b/packages/widget/src/fonts/Inter-roman.var.woff2 new file mode 100644 index 000000000..6a256a068 Binary files /dev/null and b/packages/widget/src/fonts/Inter-roman.var.woff2 differ diff --git a/packages/widget/src/fonts/Inter.var.woff2 b/packages/widget/src/fonts/Inter.var.woff2 new file mode 100644 index 000000000..365eedc50 Binary files /dev/null and b/packages/widget/src/fonts/Inter.var.woff2 differ diff --git a/packages/widget/src/fonts/inter.css b/packages/widget/src/fonts/inter.css new file mode 100644 index 000000000..f45001012 --- /dev/null +++ b/packages/widget/src/fonts/inter.css @@ -0,0 +1,200 @@ +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 100; + font-display: swap; + src: url("Inter-Thin.woff2?v=3.19") format("woff2"), + url("Inter-Thin.woff?v=3.19") format("woff"); +} +@font-face { + font-family: 'Inter'; + font-style: italic; + font-weight: 100; + font-display: swap; + src: url("Inter-ThinItalic.woff2?v=3.19") format("woff2"), + url("Inter-ThinItalic.woff?v=3.19") format("woff"); +} + +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 200; + font-display: swap; + src: url("Inter-ExtraLight.woff2?v=3.19") format("woff2"), + url("Inter-ExtraLight.woff?v=3.19") format("woff"); +} +@font-face { + font-family: 'Inter'; + font-style: italic; + font-weight: 200; + font-display: swap; + src: url("Inter-ExtraLightItalic.woff2?v=3.19") format("woff2"), + url("Inter-ExtraLightItalic.woff?v=3.19") format("woff"); +} + +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 300; + font-display: swap; + src: url("Inter-Light.woff2?v=3.19") format("woff2"), + url("Inter-Light.woff?v=3.19") format("woff"); +} +@font-face { + font-family: 'Inter'; + font-style: italic; + font-weight: 300; + font-display: swap; + src: url("Inter-LightItalic.woff2?v=3.19") format("woff2"), + url("Inter-LightItalic.woff?v=3.19") format("woff"); +} + +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url("Inter-Regular.woff2?v=3.19") format("woff2"), + url("Inter-Regular.woff?v=3.19") format("woff"); +} +@font-face { + font-family: 'Inter'; + font-style: italic; + font-weight: 400; + font-display: swap; + src: url("Inter-Italic.woff2?v=3.19") format("woff2"), + url("Inter-Italic.woff?v=3.19") format("woff"); +} + +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 500; + font-display: swap; + src: url("Inter-Medium.woff2?v=3.19") format("woff2"), + url("Inter-Medium.woff?v=3.19") format("woff"); +} +@font-face { + font-family: 'Inter'; + font-style: italic; + font-weight: 500; + font-display: swap; + src: url("Inter-MediumItalic.woff2?v=3.19") format("woff2"), + url("Inter-MediumItalic.woff?v=3.19") format("woff"); +} + +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 600; + font-display: swap; + src: url("Inter-SemiBold.woff2?v=3.19") format("woff2"), + url("Inter-SemiBold.woff?v=3.19") format("woff"); +} +@font-face { + font-family: 'Inter'; + font-style: italic; + font-weight: 600; + font-display: swap; + src: url("Inter-SemiBoldItalic.woff2?v=3.19") format("woff2"), + url("Inter-SemiBoldItalic.woff?v=3.19") format("woff"); +} + +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url("Inter-Bold.woff2?v=3.19") format("woff2"), + url("Inter-Bold.woff?v=3.19") format("woff"); +} +@font-face { + font-family: 'Inter'; + font-style: italic; + font-weight: 700; + font-display: swap; + src: url("Inter-BoldItalic.woff2?v=3.19") format("woff2"), + url("Inter-BoldItalic.woff?v=3.19") format("woff"); +} + +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 800; + font-display: swap; + src: url("Inter-ExtraBold.woff2?v=3.19") format("woff2"), + url("Inter-ExtraBold.woff?v=3.19") format("woff"); +} +@font-face { + font-family: 'Inter'; + font-style: italic; + font-weight: 800; + font-display: swap; + src: url("Inter-ExtraBoldItalic.woff2?v=3.19") format("woff2"), + url("Inter-ExtraBoldItalic.woff?v=3.19") format("woff"); +} + +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 900; + font-display: swap; + src: url("Inter-Black.woff2?v=3.19") format("woff2"), + url("Inter-Black.woff?v=3.19") format("woff"); +} +@font-face { + font-family: 'Inter'; + font-style: italic; + font-weight: 900; + font-display: swap; + src: url("Inter-BlackItalic.woff2?v=3.19") format("woff2"), + url("Inter-BlackItalic.woff?v=3.19") format("woff"); +} + +/* ------------------------------------------------------- +Variable font. +Usage: + + html { font-family: 'Inter', sans-serif; } + @supports (font-variation-settings: normal) { + html { font-family: 'Inter var', sans-serif; } + } +*/ +@font-face { + font-family: 'Inter var'; + font-weight: 100 900; + font-display: swap; + font-style: normal; + font-named-instance: 'Regular'; + src: url("Inter-roman.var.woff2?v=3.19") format("woff2"); +} +@font-face { + font-family: 'Inter var'; + font-weight: 100 900; + font-display: swap; + font-style: italic; + font-named-instance: 'Italic'; + src: url("Inter-italic.var.woff2?v=3.19") format("woff2"); +} + + +/* -------------------------------------------------------------------------- +[EXPERIMENTAL] Multi-axis, single variable font. + +Slant axis is not yet widely supported (as of February 2019) and thus this +multi-axis single variable font is opt-in rather than the default. + +When using this, you will probably need to set font-variation-settings +explicitly, e.g. + + * { font-variation-settings: "slnt" 0deg } + .italic { font-variation-settings: "slnt" 10deg } + +*/ +@font-face { + font-family: 'Inter var experimental'; + font-weight: 100 900; + font-display: swap; + font-style: oblique 0deg 10deg; + src: url("Inter.var.woff2?v=3.19") format("woff2"); +} diff --git a/packages/widget/src/index.ts b/packages/widget/src/index.ts index 97e3f1105..936d38c10 100644 --- a/packages/widget/src/index.ts +++ b/packages/widget/src/index.ts @@ -1,4 +1,5 @@ import { App } from './App'; +import './fonts/inter.css'; import { configureReactI18next } from './i18n'; export * from './types'; diff --git a/packages/widget/src/pages/MainPage/MainPage.tsx b/packages/widget/src/pages/MainPage/MainPage.tsx index 400f87ab6..b7b96c996 100644 --- a/packages/widget/src/pages/MainPage/MainPage.tsx +++ b/packages/widget/src/pages/MainPage/MainPage.tsx @@ -13,10 +13,7 @@ export const MainPage: React.FC = () => { - + @@ -27,7 +24,7 @@ export const MainPage: React.FC = () => { - + diff --git a/packages/widget/src/pages/SelectWalletPage/SelectWalletPage.style.tsx b/packages/widget/src/pages/SelectWalletPage/SelectWalletPage.style.tsx index d4753ac1d..c9d7b4757 100644 --- a/packages/widget/src/pages/SelectWalletPage/SelectWalletPage.style.tsx +++ b/packages/widget/src/pages/SelectWalletPage/SelectWalletPage.style.tsx @@ -1,5 +1,11 @@ -import { ListItem, ListItemButton, Typography } from '@mui/material'; +import { + ListItem, + ListItemButton, + ListItemText, + Typography, +} from '@mui/material'; import { listItemSecondaryActionClasses } from '@mui/material/ListItemSecondaryAction'; +import { listItemTextClasses } from '@mui/material/ListItemText'; import { styled } from '@mui/material/styles'; export const WalletListItemButton = styled(ListItemButton)(({ theme }) => ({ @@ -18,6 +24,12 @@ export const WalletListItem = styled(ListItem)(({ theme }) => ({ }, })); +export const WalletListItemText = styled(ListItemText)(({ theme }) => ({ + [`.${listItemTextClasses.primary}`]: { + fontWeight: 400, + }, +})); + export const WalletIdentityPopoverContent = styled(Typography)({ maxWidth: 400, }); diff --git a/packages/widget/src/pages/SelectWalletPage/SelectWalletPage.tsx b/packages/widget/src/pages/SelectWalletPage/SelectWalletPage.tsx index d2b44fc1a..46acbf5cb 100644 --- a/packages/widget/src/pages/SelectWalletPage/SelectWalletPage.tsx +++ b/packages/widget/src/pages/SelectWalletPage/SelectWalletPage.tsx @@ -4,7 +4,6 @@ import { Container, List, ListItemAvatar, - ListItemText, Popover, } from '@mui/material'; import { useCallback, useState } from 'react'; @@ -13,6 +12,7 @@ import { useWallet } from '../../providers/WalletProvider'; import { WalletIdentityPopoverContent, WalletListItemButton, + WalletListItemText, } from './SelectWalletPage.style'; export const SelectWalletPage = () => { @@ -72,7 +72,7 @@ export const SelectWalletPage = () => { {wallet.name[0]} - + ))} diff --git a/packages/widget/src/theme.ts b/packages/widget/src/theme.ts index 4527424b8..1c3a82eb5 100644 --- a/packages/widget/src/theme.ts +++ b/packages/widget/src/theme.ts @@ -10,7 +10,25 @@ import { createTheme } from '@mui/material/styles'; // } // } +declare module '@mui/material/styles' { + interface TypographyVariants { + '@supports (font-variation-settings: normal)': React.CSSProperties; + } + interface TypographyVariantsOptions { + '@supports (font-variation-settings: normal)'?: React.CSSProperties; + } +} + +declare module '@mui/material/Typography' { + interface TypographyPropsVariantOverrides { + '@supports (font-variation-settings: normal)': true; + } +} + export const theme = createTheme({ + typography: { + fontFamily: 'Inter var, Inter, sans-serif', + }, palette: { primary: { main: '#3F49E1', @@ -20,7 +38,7 @@ export const theme = createTheme({ main: '#F5B5FF', }, background: { - default: '#FBFCFC', + default: '#F4F5F6', }, text: { primary: '#000', @@ -43,6 +61,16 @@ export const theme = createTheme({ borderRadius: 6, }, components: { + MuiScopedCssBaseline: { + styleOverrides: { + root: { + fontFamily: 'Inter, sans-serif', + '@supports (font-variation-settings: normal)': { + fontFamily: 'Inter var, sans-serif', + }, + }, + }, + }, MuiAvatar: { styleOverrides: { root: {