Skip to content

F
frontend
Commit a11c59bb authored by Arminaairen's avatar Arminaairen Committed by GitHub
Browse files
Options

Merge pull request #5 from tom2drum/theme_config 

setup theme config
parents 8ab8cf0a 909d6da7
Show whitespace changes
Inline Side-by-side
Showing with 233 additions and 7 deletions
README.md
View file @ a11c59bb
https://block-scout.vercel.app/ https://block-scout.vercel.app/
https://block-scout.vercel.app/?theme=alt - alt theme for demo purpose only
https://www.figma.com/file/07zoJSAP7Vo655ertmlppA/My_Account?node-id=279%3A1006 https://www.figma.com/file/07zoJSAP7Vo655ertmlppA/My_Account?node-id=279%3A1006
components/AccountNav/AccountNavLink.tsx
View file @ a11c59bb
...@@ -20,8 +20,8 @@ const AccountNavLink = ({ text, pathname, icon }: Props) => { ...@@ -20,8 +20,8 @@ const AccountNavLink = ({ text, pathname, icon }: Props) => {
w="220px" w="220px"
p="15px 20px" p="15px 20px"
color={ isActive ? 'white' : 'black' } color={ isActive ? 'white' : 'black' }
bgColor={ isActive ? 'green.700' : 'transparent' } bgColor={ isActive ? 'brand.700' : 'transparent' }
borderRadius="10px" borderRadius="base"
> >
<HStack spacing="4"> <HStack spacing="4">
<Icon as={ icon } boxSize="5"/> <Icon as={ icon } boxSize="5"/>
......
components/Page/Page.tsx
View file @ a11c59bb
...@@ -14,12 +14,12 @@ const Page = ({ children }: Props) => { ...@@ -14,12 +14,12 @@ const Page = ({ children }: Props) => {
w="100%" w="100%"
minH="100vh" minH="100vh"
padding="140px 48px 48px 48px" padding="140px 48px 48px 48px"
bgColor="gray.200" bgColor="gray.50"
spacing="12" spacing="12"
alignItems="stretch" alignItems="stretch"
> >
<AccountNav/> <AccountNav/>
<Box borderRadius="10px" w="100%" overflow="hidden" bgColor="white">{ children }</Box> <Box borderRadius="base" w="100%" overflow="hidden" bgColor="white">{ children }</Box>
</HStack> </HStack>
</LightMode> </LightMode>
); );
......
components/WatchlistTable/WatchlistTable.tsx
View file @ a11c59bb
...@@ -45,7 +45,7 @@ const WatchlistTable = ({ data }: Props) => { ...@@ -45,7 +45,7 @@ const WatchlistTable = ({ data }: Props) => {
<Td> <Td>
<HStack spacing="30px"> <HStack spacing="30px">
<Icon as={ FaEdit } w="20px" h="20px" cursor="pointer" color="blue.500"/> <Icon as={ FaEdit } w="20px" h="20px" cursor="pointer" color="blue.500"/>
<Icon as={ FaTrash } w="20px" h="20px" cursor="pointer" color="red.500"/> <Icon as={ FaTrash } w="20px" h="20px" cursor="pointer" color="red.200"/>
</HStack> </HStack>
</Td> </Td>
</Tr> </Tr>
......
data/watchlist.ts
View file @ a11c59bb
...@@ -18,7 +18,7 @@ export const watchlist = [ ...@@ -18,7 +18,7 @@ export const watchlist = [
notification: false, notification: false,
}, },
{ {
address: '0x8c461F78760988c4135e363a87dd736f8b671ff0', address: '0x8c461F78760988c4135e363a87dd736f8b671ff1',
tokenBalance: 200.2, tokenBalance: 200.2,
tokenBalanceUSD: 202.4, tokenBalanceUSD: 202.4,
totalUSD: 3000.5, totalUSD: 3000.5,
......
package.json
View file @ a11c59bb
...@@ -11,6 +11,7 @@ ...@@ -11,6 +11,7 @@
}, },
"dependencies": { "dependencies": {
"@chakra-ui/react": "^2.1.2", "@chakra-ui/react": "^2.1.2",
"@chakra-ui/theme-tools": "^2.0.2",
"@emotion/react": "^11", "@emotion/react": "^11",
"@emotion/styled": "^11", "@emotion/styled": "^11",
"framer-motion": "^6", "framer-motion": "^6",
......
pages/_app.tsx
View file @ a11c59bb
import React from 'react'; import React from 'react';
import type { AppProps } from 'next/app'; import type { AppProps } from 'next/app';
import { ChakraProvider } from '@chakra-ui/react'; 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) { function MyApp({ Component, pageProps }: AppProps) {
const router = useRouter();
return ( return (
<ChakraProvider> <ChakraProvider theme={ router.query.theme === 'alt' ? altTheme : theme }>
<Component { ...pageProps }/> <Component { ...pageProps }/>
</ChakraProvider> </ChakraProvider>
); );
......
pages/_document.tsx 0 → 100644
View file @ a11c59bb
import React from 'react';
import Document, { Html, Head, Main, NextScript } from 'next/document'
class MyDocument extends Document {
render() {
return (
<Html>
<Head>
<link
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/>
<NextScript/>
</body>
</Html>
)
}
}
export default MyDocument
theme/components/Switch.ts 0 → 100644
View file @ a11c59bb
import type { ComponentMultiStyleConfig } from '@chakra-ui/theme';
import { cssVar } from '@chakra-ui/theme-tools';
const $width = cssVar('switch-track-width');
const $height = cssVar('switch-track-height');
const Switch: ComponentMultiStyleConfig = {
parts: [ ],
sizes: {
md: {
container: {
[$width.variable]: '38px',
[$height.variable]: '18px',
},
},
},
baseStyle: {
track: {
p: '1px',
},
},
}
export default Switch;
theme/components/index.ts 0 → 100644
View file @ a11c59bb
import Switch from './Switch';
const components = {
Switch,
}
export default components;
theme/foundations/borders.ts 0 → 100644
View file @ a11c59bb
const borders = {
radii: {
none: '0',
sm: '4px',
base: '10px',
lg: '30px',
full: '9999px',
},
}
export default borders;
theme/foundations/colors.ts 0 → 100644
View file @ a11c59bb
const colors = {
// standard colors
green: {
'50': '#dcfff0',
'100': '#b1feda',
'200': '#84fbc8',
'300': '#56f9b8',
'400': '#30f7ae',
'500': '#1fdd9b',
'600': '#11ad7d',
'700': '#047b5d', // <-
'800': '#004a33',
'900': '#001b0f',
},
blue: {
'50': '#e7f0ff',
'100': '#c2d2f1',
'200': '#9db3e3',
'300': '#7895d4',
'400': '#5277c6',
'500': '#395ead', // <-
'600': '#2b4987',
'700': '#1e3462',
'800': '#0f1f3e',
'900': '#010a1b',
},
red: {
'50': '#ffe4ef',
'100': '#feb7cc',
'200': '#f689aa',
'300': '#f15a88',
'400': '#ec2d66', // <-
'500': '#d2134c',
'600': '#a50c3b',
'700': '#77062a',
'800': '#490118',
'900': '#1e0008',
},
gray: {
'50': '#f0f2f4', // <-
'100': '#d7d8d9',
'200': '#bcbec0',
'300': '#a0a5aa',
'400': '#848b93',
'500': '#6a727a',
'600': '#53585e',
'700': '#3c3f43',
'800': '#242628',
'900': '#0b0d0f',
},
// main colors
brand: {
'50': '#dcfff0',
'100': '#b1feda',
'200': '#84fbc8',
'300': '#56f9b8',
'400': '#30f7ae',
'500': '#1fdd9b',
'600': '#11ad7d',
'700': '#047b5d', // <-
'800': '#004a33',
'900': '#001b0f',
},
}
export default colors;
theme/foundations/typography.ts 0 → 100644
View file @ a11c59bb
import { theme } from '@chakra-ui/react';
const typography = {
fonts: {
heading: `Inter, ${ theme.fonts.heading }`,
body: `Inter, ${ theme.fonts.body }`,
},
}
export default typography;
theme/index.ts 0 → 100644
View file @ a11c59bb
import { extendTheme } from '@chakra-ui/react';
import typography from './foundations/typography';
import borders from './foundations/borders';
import colors from './foundations/colors';
import components from './components/index';
const overrides = {
...typography,
...borders,
colors,
components,
}
export default extendTheme(overrides);
theme_alt/foundations/colors.ts 0 → 100644
View file @ a11c59bb
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;
theme_alt/foundations/typography.ts 0 → 100644
View file @ a11c59bb
import { theme } from '@chakra-ui/react';
const typography = {
fonts: {
heading: `Raleway, ${ theme.fonts.heading }`,
body: `Raleway, ${ theme.fonts.body }`,
},
}
export default typography;
theme_alt/index.ts 0 → 100644
View file @ a11c59bb
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);
yarn.lock
View file @ a11c59bb
...@@ -556,6 +556,14 @@ ...@@ -556,6 +556,14 @@
"@chakra-ui/utils" "2.0.1" "@chakra-ui/utils" "2.0.1"
"@ctrl/tinycolor" "^3.4.0" "@ctrl/tinycolor" "^3.4.0"
"@chakra-ui/theme-tools@^2.0.2":
version "2.0.2"
resolved "https://registry.yarnpkg.com/@chakra-ui/theme-tools/-/theme-tools-2.0.2.tgz#2f59f14f553dcb5ccc8e8492cb9524954fe1bf89"
integrity sha512-E01ZJZB4XVqkvn2hOXKQ/uVkvaPLQN1SyxAYXjFZGyZ1ppBLl362EWfY9IgWNzDITgq9MCJyQFfm2mXwQDUNzA==
dependencies:
"@chakra-ui/utils" "2.0.2"
"@ctrl/tinycolor" "^3.4.0"
"@chakra-ui/theme@2.0.3": "@chakra-ui/theme@2.0.3":
version "2.0.3" version "2.0.3"
resolved "https://registry.yarnpkg.com/@chakra-ui/theme/-/theme-2.0.3.tgz#51be178bdc841b9a54c4e6db320d75c004fc49f0" resolved "https://registry.yarnpkg.com/@chakra-ui/theme/-/theme-2.0.3.tgz#51be178bdc841b9a54c4e6db320d75c004fc49f0"
...@@ -609,6 +617,16 @@ ...@@ -609,6 +617,16 @@
framesync "5.3.0" framesync "5.3.0"
lodash.mergewith "4.6.2" lodash.mergewith "4.6.2"
"@chakra-ui/utils@2.0.2":
version "2.0.2"
resolved "https://registry.yarnpkg.com/@chakra-ui/utils/-/utils-2.0.2.tgz#130ba1647ea2b94ad956ae4cbcf685838d350593"
integrity sha512-9AC/ir9zm0shgFG7kdzOKUH2Wx5VB71M3uRMEsMZf75YlhhiU7AvBNtWXnJu+CBiTi41rKa5A+2ImMOsuPfGbA==
dependencies:
"@types/lodash.mergewith" "4.6.6"
css-box-model "1.2.1"
framesync "5.3.0"
lodash.mergewith "4.6.2"
"@chakra-ui/visually-hidden@2.0.1": "@chakra-ui/visually-hidden@2.0.1":
version "2.0.1" version "2.0.1"
resolved "https://registry.yarnpkg.com/@chakra-ui/visually-hidden/-/visually-hidden-2.0.1.tgz#93fc6dba340a8d32e5b17144de3a575b8b16250c" resolved "https://registry.yarnpkg.com/@chakra-ui/visually-hidden/-/visually-hidden-2.0.1.tgz#93fc6dba340a8d32e5b17144de3a575b8b16250c"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment