diff --git a/public/locales/en/common.json b/public/locales/en/common.json index 948b147..e95bd49 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -1,7 +1,8 @@ { "HOME": { - "title": "ZKsync Ecosystem", - "gasPrice": "Gas Price", + "title": "ZKsync", + "subtitle": "Ecosystem", + "gasPrice": "L1 Gas Price", "transfer": "ERC-20 Transfer", "lockedAssets": "Locked assets in shared bridge", "DASHBOARD": { @@ -50,7 +51,8 @@ "FOOTER": { "docs": "Documentation", "github": "GitHub", - "madeWithLove": "Made with ❤️ by" + "madeWith": "Made with", + "by": "by" }, "LOCALES": { "en": "English", diff --git a/public/locales/es/common.json b/public/locales/es/common.json index b2a9b7e..2b7daa8 100644 --- a/public/locales/es/common.json +++ b/public/locales/es/common.json @@ -1,7 +1,8 @@ { "HOME": { - "title": "Ecosistema ZKsync", - "gasPrice": "Precio del gas", + "title": "ZKsync", + "subtitle": "Ecosistema", + "gasPrice": "Precio del gas L1", "transfer": "Transferencia ERC-20", "lockedAssets": "Activos bloqueados en puente compartido", "DASHBOARD": { @@ -50,7 +51,8 @@ "FOOTER": { "docs": "Documentación", "github": "GitHub", - "madeWithLove": "Hecho con ❤️ por" + "madeWithLove": "Hecho con", + "by": "por" }, "LOCALES": { "en": "Inglés", diff --git a/src/assets/font/css/inter.css b/src/assets/font/css/inter.css new file mode 100644 index 0000000..e2f6bb0 --- /dev/null +++ b/src/assets/font/css/inter.css @@ -0,0 +1,21 @@ +/* +Copyright 2020 The Inter Project Authors (https://github.com/rsms/inter) + +This Font Software is licensed under the SIL Open Font License, Version 1.1. +This license is copied below, and is also available with a FAQ at: +https://openfontlicense.org + +----------------------------------------------------------- +SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 +----------------------------------------------------------- +*/ + +@font-face { + font-family: 'Inter-Variable'; + src: + url('../fonts/Inter-Italic-VariableFont_opsz,wght.ttf') format('ttf'), + url('../fonts/Inter-VariableFont_opsz,wght.ttf') format('ttf'); + font-weight: 200 700; + font-display: swap; + font-style: normal; +} diff --git a/src/assets/font/fonts/Inter-Italic-VariableFont_opsz,wght.ttf b/src/assets/font/fonts/Inter-Italic-VariableFont_opsz,wght.ttf new file mode 100644 index 0000000..43ed4f5 Binary files /dev/null and b/src/assets/font/fonts/Inter-Italic-VariableFont_opsz,wght.ttf differ diff --git a/src/assets/font/fonts/Inter-VariableFont_opsz,wght.ttf b/src/assets/font/fonts/Inter-VariableFont_opsz,wght.ttf new file mode 100644 index 0000000..e31b51e Binary files /dev/null and b/src/assets/font/fonts/Inter-VariableFont_opsz,wght.ttf differ diff --git a/src/assets/icons/darkMode.svg b/src/assets/icons/darkMode.svg new file mode 100644 index 0000000..9658a20 --- /dev/null +++ b/src/assets/icons/darkMode.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/assets/icons/gasDark.svg b/src/assets/icons/gasDark.svg new file mode 100644 index 0000000..6b1864a --- /dev/null +++ b/src/assets/icons/gasDark.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/icons/gasLight.svg b/src/assets/icons/gasLight.svg new file mode 100644 index 0000000..de24c5e --- /dev/null +++ b/src/assets/icons/gasLight.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/icons/githubDark.svg b/src/assets/icons/githubDark.svg new file mode 100644 index 0000000..2bccb51 --- /dev/null +++ b/src/assets/icons/githubDark.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/githubLight.svg b/src/assets/icons/githubLight.svg new file mode 100644 index 0000000..4a0a175 --- /dev/null +++ b/src/assets/icons/githubLight.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/icons/heartDark.svg b/src/assets/icons/heartDark.svg new file mode 100644 index 0000000..6449470 --- /dev/null +++ b/src/assets/icons/heartDark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/heartLight.svg b/src/assets/icons/heartLight.svg new file mode 100644 index 0000000..b52fd38 --- /dev/null +++ b/src/assets/icons/heartLight.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/search.svg b/src/assets/icons/searchDark.svg similarity index 100% rename from src/assets/icons/search.svg rename to src/assets/icons/searchDark.svg diff --git a/src/assets/icons/searchLight.svg b/src/assets/icons/searchLight.svg new file mode 100644 index 0000000..6a938ad --- /dev/null +++ b/src/assets/icons/searchLight.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/icons/wonderlandDark.svg b/src/assets/icons/wonderlandDark.svg new file mode 100644 index 0000000..2a5fdfc --- /dev/null +++ b/src/assets/icons/wonderlandDark.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/assets/icons/wonderlandLight.svg b/src/assets/icons/wonderlandLight.svg new file mode 100644 index 0000000..78fd827 --- /dev/null +++ b/src/assets/icons/wonderlandLight.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/assets/icons/zkLogoDark.svg b/src/assets/icons/zkLogoDark.svg new file mode 100644 index 0000000..26b4294 --- /dev/null +++ b/src/assets/icons/zkLogoDark.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/icons/zkLogoLight.svg b/src/assets/icons/zkLogoLight.svg new file mode 100644 index 0000000..9ca6152 --- /dev/null +++ b/src/assets/icons/zkLogoLight.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/react.svg b/src/assets/react.svg deleted file mode 100644 index 6c87de9..0000000 --- a/src/assets/react.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/components/BasicSelect.tsx b/src/components/BasicSelect.tsx index d28afc4..57e1944 100644 --- a/src/components/BasicSelect.tsx +++ b/src/components/BasicSelect.tsx @@ -66,10 +66,13 @@ export const BasicSelect = ({ list, value, setValue, disabled, dataTest }: Basic ); }; -const SBox = styled(Box)({ - display: 'flex', - flexDirection: 'column', - gap: '0.5rem', +export const SBox = styled(Box)(() => { + const { currentTheme } = useCustomTheme(); + return { + display: 'flex', + gap: currentTheme.gap, + alignItems: 'center', + }; }); const MenuButton = styled(Button)(() => { diff --git a/src/components/Gas.tsx b/src/components/Gas.tsx new file mode 100644 index 0000000..7b587a1 --- /dev/null +++ b/src/components/Gas.tsx @@ -0,0 +1,54 @@ +import { Typography, Box, styled } from '@mui/material'; +import Image from 'next/image'; +import { useTranslation } from 'next-i18next'; + +import GasLight from '~/assets/icons/gasLight.svg'; +import GasDark from '~/assets/icons/gasDark.svg'; +import { useCustomTheme } from '~/hooks'; +import { SBox } from '~/components'; + +export const Gas = () => { + const { theme } = useCustomTheme(); + const { t } = useTranslation(); + + return ( + + gas + + + {t('HOME.gasPrice')}: + 10 wei + + + {t('HOME.transfer')}: + $10 + + + + ); +}; + +const GasContainer = styled(Box)(() => { + const { currentTheme } = useCustomTheme(); + + return { + display: 'flex', + alignItems: 'center', + color: currentTheme.textSecondary, + gap: currentTheme.gap, + fontWeight: 400, + fontSize: '0.7rem', + lineHeight: '1.25rem', + padding: '0.5rem 1rem', + }; +}); + +const GasValueText = styled(Typography)(() => { + const { currentTheme } = useCustomTheme(); + + return { + color: currentTheme.textPrimary, + fontWeight: 500, + letterSpacing: '-0.03em', + }; +}); diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx index 2dc0870..5a70701 100644 --- a/src/components/SearchBar.tsx +++ b/src/components/SearchBar.tsx @@ -1,13 +1,16 @@ import { useTranslation } from 'next-i18next'; -import { useCustomTheme, useStateContext } from '~/hooks'; import { styled, TextField, InputAdornment } from '@mui/material'; import Image from 'next/image'; -import Search from '~/assets/icons/search.svg'; +import SearchDark from '~/assets/icons/searchDark.svg'; +import SearchLight from '~/assets/icons/searchLight.svg'; +import { useCustomTheme, useStateContext } from '~/hooks'; export const SearchBar = () => { const { t } = useTranslation(); const { searchTerm, setSearchTerm } = useStateContext(); + const { theme } = useCustomTheme(); + const handleChange = (event: React.ChangeEvent) => { const value = event.target.value; setSearchTerm(value); @@ -21,7 +24,7 @@ export const SearchBar = () => { InputProps={{ startAdornment: ( - search + search ), }} diff --git a/src/components/Theme/theme.ts b/src/components/Theme/theme.ts index 770353c..adbf0c1 100644 --- a/src/components/Theme/theme.ts +++ b/src/components/Theme/theme.ts @@ -8,11 +8,13 @@ export const darkTheme: Theme = { backgroundPrimary: '#000000', backgroundSecondary: '#262B33', backgroundTertiary: '#11141A', - titleFontFamily: 'Open Sans', - textFontFamily: 'Open Sans', + titleFontFamily: 'Inter-Variable', + textFontFamily: 'Inter-Variable', borderRadius: '1.5rem', secondaryBorderRadius: '0.4rem', border: '0.1rem solid rgba(153, 164, 184, 0.1)', + gap: '0.25rem', + padding: '1rem', }; export const lightTheme: Theme = { @@ -22,11 +24,13 @@ export const lightTheme: Theme = { textPrimary: '#000000', textSecondary: '#717171', backgroundPrimary: '#ffffff', - backgroundSecondary: '#f8f8f8', + backgroundSecondary: '#E8ECF2', backgroundTertiary: '#f8f8f8', - titleFontFamily: 'Open Sans', - textFontFamily: 'Open Sans', + titleFontFamily: 'Inter-Variable', + textFontFamily: 'Inter-Variable', borderRadius: '1.5rem', secondaryBorderRadius: '0.4rem', border: '0.1rem solid rgba(183, 183, 183, 0.3)', + gap: '0.25rem', + padding: '1rem', }; diff --git a/src/components/TitleBanner.tsx b/src/components/TitleBanner.tsx index 3d650d8..c6c7aca 100644 --- a/src/components/TitleBanner.tsx +++ b/src/components/TitleBanner.tsx @@ -1,15 +1,52 @@ import { useTranslation } from 'next-i18next'; +import { Box, Typography, styled } from '@mui/material'; +import Image from 'next/image'; + +import ZkLogoDark from '~/assets/icons/zkLogoDark.svg'; +import ZkLogoLight from '~/assets/icons/zkLogoLight.svg'; +import { useCustomTheme } from '~/hooks'; export const TitleBanner = () => { const { t } = useTranslation(); + const { theme } = useCustomTheme(); return ( -
- {t('HOME.title')} - -
- {`${t('HOME.gasPrice')}: 10 wei ${t('HOME.transfer')} $10`} -
-
+ + zkLogo + + <Bold>{t('HOME.title').slice(0, 2)}</Bold> + {t('HOME.title').slice(2)} + + {t('HOME.subtitle')} + ); }; + +const TitleBox = styled(Box)(() => { + const { currentTheme } = useCustomTheme(); + + return { + display: 'flex', + alignItems: 'center', + gap: currentTheme.gap, + }; +}); + +const Title = styled(Typography)(() => ({ + fontSize: '3rem', + lineHeight: '4rem', + letterSpacing: '-0.03em', + fontWeight: 300, +})); + +const Bold = styled('span')({ + fontWeight: 700, +}); + +const Subtitle = styled(Typography)(() => ({ + fontSize: '3rem', + fontWeight: 700, + lineHeight: '4rem', + letterSpacing: '-0.03em', + textAlign: 'left', +})); diff --git a/src/components/index.ts b/src/components/index.ts index 847f081..619f451 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -12,3 +12,4 @@ export * from './TVL'; export * from './ChainInformation'; export * from './BasicSelect'; export * from './NotFound'; +export * from './Gas'; diff --git a/src/config/constants.ts b/src/config/constants.ts index 42d7405..e81f76f 100644 --- a/src/config/constants.ts +++ b/src/config/constants.ts @@ -3,6 +3,7 @@ import { Constants } from '~/types'; const constants: Constants = { SUPPORTED_LANGUAGES: ['en', 'es'], DEFAULT_LANG: 'en', + THEME_KEY: 'theme', }; export const getConstants = (): Constants => { diff --git a/src/containers/Footer/index.tsx b/src/containers/Footer/index.tsx index 45f49cb..3713eb7 100644 --- a/src/containers/Footer/index.tsx +++ b/src/containers/Footer/index.tsx @@ -1,18 +1,40 @@ import { useTranslation } from 'next-i18next'; import { styled } from '@mui/material/styles'; +import { Box, Typography } from '@mui/material'; +import Image from 'next/image'; +import Link from 'next/link'; +import WonderlandDark from '~/assets/icons/wonderlandDark.svg'; +import WonderlandLight from '~/assets/icons/wonderlandLight.svg'; +import HeartDark from '~/assets/icons/heartDark.svg'; +import HeartLight from '~/assets/icons/heartLight.svg'; +import GithubDark from '~/assets/icons/githubDark.svg'; +import GithubLight from '~/assets/icons/githubLight.svg'; import { useCustomTheme } from '~/hooks'; -import { FOOTER_HEIGHT } from '~/utils'; +import { SBox } from '~/components'; export const Footer = () => { const { t } = useTranslation(); + const { theme } = useCustomTheme(); return ( -

Footer

+ + {t('FOOTER.docs')} + + github + {t('FOOTER.github')} + + -

{t('FOOTER.madeWithLove')}

- Wonderland + + {t('FOOTER.madeWith')} + Wonderland + {t('FOOTER.by')} + + + Wonderland + ); @@ -20,27 +42,52 @@ export const Footer = () => { const FooterContainer = styled('footer')(() => { const { currentTheme } = useCustomTheme(); + return { display: 'flex', - height: `${FOOTER_HEIGHT}rem`, - padding: '0 8rem', + height: '5.5rem', + padding: currentTheme.padding, alignItems: 'center', justifyContent: 'space-between', - backgroundColor: currentTheme.backgroundSecondary, - borderTop: currentTheme.border, width: '100%', }; }); -const Subtitle = styled('div')({ - display: 'flex', - alignItems: 'center', - gap: '0.8rem', - '& p': { - display: 'inline-block', - }, - '& a': { - textDecoration: 'none', - color: 'inherit', - }, +const Subtitle = styled('div')(() => { + const { currentTheme } = useCustomTheme(); + + return { + display: 'flex', + alignItems: 'center', + gap: currentTheme.gap, + '& p': { + display: 'inline-block', + }, + '& a': { + textDecoration: 'none', + color: 'inherit', + }, + }; +}); + +const IconText = styled(Box)(() => { + const { currentTheme } = useCustomTheme(); + return { + display: 'flex', + gap: currentTheme.gap, + alignItems: 'center', + backgroundColor: currentTheme.backgroundSecondary, + borderRadius: currentTheme.borderRadius, + padding: currentTheme.padding, + }; +}); + +const SText = styled(Typography)(() => { + const { currentTheme } = useCustomTheme(); + + return { + backgroundColor: currentTheme.backgroundSecondary, + borderRadius: currentTheme.borderRadius, + padding: currentTheme.padding, + }; }); diff --git a/src/containers/Header/index.tsx b/src/containers/Header/index.tsx index c144c82..2d2a216 100644 --- a/src/containers/Header/index.tsx +++ b/src/containers/Header/index.tsx @@ -5,13 +5,11 @@ import { useRouter } from 'next/router'; import { useTranslation } from 'next-i18next'; import Image from 'next/image'; -import { BasicSelect, SearchBar } from '~/components'; +import { BasicSelect, SearchBar, Gas, SBox } from '~/components'; import { useCustomTheme } from '~/hooks/useContext/useTheme'; -import { zIndex } from '~/utils'; import { getConfig } from '~/config'; import LightMode from '~/assets/icons/lightMode.svg'; -// temporary awaiting dark mode icon -import DarkMode from '~/assets/icons/lightMode.svg'; +import DarkMode from '~/assets/icons/darkMode.svg'; const { DEFAULT_LANG } = getConfig(); @@ -50,6 +48,7 @@ export const Header = () => { + { height: '3.5rem', }; }); - -const SBox = styled(Box)({ - display: 'flex', - alignItems: 'center', - gap: '0.25rem', -}); diff --git a/src/providers/ThemeProvider.tsx b/src/providers/ThemeProvider.tsx index 8c620ee..a809d53 100644 --- a/src/providers/ThemeProvider.tsx +++ b/src/providers/ThemeProvider.tsx @@ -4,7 +4,10 @@ import { ThemeProvider as MuiThemeProvider } from '@mui/material/styles'; import { getMuiThemeConfig } from '~/components'; import { Theme, ThemeName } from '~/types'; -import { THEME_KEY, getTheme } from '~/utils'; +import { getTheme } from '~/utils'; +import { getConfig } from '~/config'; + +const { THEME_KEY } = getConfig(); type ContextType = { theme: ThemeName; diff --git a/src/types/Config.ts b/src/types/Config.ts index e818436..6ee42a9 100644 --- a/src/types/Config.ts +++ b/src/types/Config.ts @@ -10,6 +10,7 @@ export type SupportedLanguage = 'en' | 'es'; export interface Constants { SUPPORTED_LANGUAGES: SupportedLanguage[]; DEFAULT_LANG: SupportedLanguage; + THEME_KEY: string; } export interface Config extends Env, Constants {} diff --git a/src/types/Theme.ts b/src/types/Theme.ts index e2b0e90..050dee9 100644 --- a/src/types/Theme.ts +++ b/src/types/Theme.ts @@ -13,6 +13,8 @@ export interface Theme { borderRadius: string; secondaryBorderRadius: string; border: string; + gap: string; + padding: string; } export interface PropTheme { diff --git a/src/utils/Variables.ts b/src/utils/Variables.ts deleted file mode 100644 index 4ca27b9..0000000 --- a/src/utils/Variables.ts +++ /dev/null @@ -1,33 +0,0 @@ -/*============================================= -= Misc Variables = -=============================================*/ - -export const THEME_KEY = 'react-app-theme'; -export const ZERO_ADDRESS = '0x0000000000000000000000000000000000000000'; - -/*============================================= -= Style Variables = -=============================================*/ - -export const MOBILE_MAX_WIDTH = 600; -export const TABLET_MAX_WIDTH = 1024; - -export const fontSize = { - MAIN_TITLE: '5.2rem', - SECTION_TITLE: '2.4rem', - XL: '1.8rem', - LARGE: '1.6rem', - MEDIUM: '1.4rem', - SMALL: '1.2rem', -}; - -export const zIndex = { - HEADER: 100, - MODAL: 200, - BACKDROP: -1, - TOAST: 500, -}; - -export const HEADER_HEIGHT = 8; // Header height in rem units -export const FOOTER_HEIGHT = 8; // Footer height in rem units -export const SURROUND_HEIGHT = HEADER_HEIGHT + FOOTER_HEIGHT; diff --git a/src/utils/index.ts b/src/utils/index.ts index 2b5edbb..9828cc6 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -1,5 +1,4 @@ export * from './getTheme'; -export * from './Variables'; export * from './config'; export * from './format'; export * from './services';