Skip to content

F
frontend
Commit 6249bdaa authored by N's avatar N Committed by GitHub
Browse files
Options

Merge pull request #41 from blockscout/dark-theme 

dark mode: first part
parents 3cee2624 f4754163
Hide whitespace changes
Inline Side-by-side
Showing with 275 additions and 193 deletions
README.md
View file @ 6249bdaa
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
icons/networks.svg
View file @ 6249bdaa
<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 2.632a2.632 2.632 0 1 1 5.263 0 2.632 2.632 0 0 1-5.263 0Zm7.368 0a2.632 2.632 0 1 1 5.263 0 2.632 2.632 0 0 1-5.263 0Zm10-2.632a2.632 2.632 0 1 0 0 5.263 2.632 2.632 0 0 0 0-5.263ZM0 10a2.632 2.632 0 1 1 5.263 0A2.632 2.632 0 0 1 0 10Zm7.368 0a2.632 2.632 0 1 1 5.263 0 2.632 2.632 0 0 1-5.263 0Zm10-2.632a2.632 2.632 0 1 0 0 5.264 2.632 2.632 0 0 0 0-5.264Zm-2.631 10a2.632 2.632 0 1 1 5.263 0 2.632 2.632 0 0 1-5.263 0ZM2.632 14.737a2.632 2.632 0 1 0 0 5.263 2.632 2.632 0 0 0 0-5.263Zm7.368 0A2.632 2.632 0 1 0 10 20a2.632 2.632 0 0 0 0-5.263Z" fill="#718096"/></svg> <svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 2.632a2.632 2.632 0 1 1 5.263 0 2.632 2.632 0 0 1-5.263 0Zm7.368 0a2.632 2.632 0 1 1 5.263 0 2.632 2.632 0 0 1-5.263 0Zm10-2.632a2.632 2.632 0 1 0 0 5.263 2.632 2.632 0 0 0 0-5.263ZM0 10a2.632 2.632 0 1 1 5.263 0A2.632 2.632 0 0 1 0 10Zm7.368 0a2.632 2.632 0 1 1 5.263 0 2.632 2.632 0 0 1-5.263 0Zm10-2.632a2.632 2.632 0 1 0 0 5.264 2.632 2.632 0 0 0 0-5.264Zm-2.631 10a2.632 2.632 0 1 1 5.263 0 2.632 2.632 0 0 1-5.263 0ZM2.632 14.737a2.632 2.632 0 1 0 0 5.263 2.632 2.632 0 0 0 0-5.263Zm7.368 0A2.632 2.632 0 1 0 10 20a2.632 2.632 0 0 0 0-5.263Z" fill="currentColor"/></svg>
\ No newline at end of file \ No newline at end of file
pages/_app.tsx
View file @ 6249bdaa
...@@ -2,14 +2,10 @@ import React from 'react'; ...@@ -2,14 +2,10 @@ 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 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 theme={ router.query.theme === 'alt' ? altTheme : theme }> <ChakraProvider theme={ theme }>
<Component { ...pageProps }/> <Component { ...pageProps }/>
</ChakraProvider> </ChakraProvider>
); );
......
pages/_document.tsx
View file @ 6249bdaa
import React from 'react'; import React from 'react';
import Document, { Html, Head, Main, NextScript } from 'next/document' import Document, { Html, Head, Main, NextScript } from 'next/document'
import { ColorModeScript } from '@chakra-ui/react';
import theme from '../theme'
class MyDocument extends Document { class MyDocument extends Document {
render() { render() {
...@@ -16,6 +18,7 @@ class MyDocument extends Document { ...@@ -16,6 +18,7 @@ class MyDocument extends Document {
/> />
</Head> </Head>
<body> <body>
<ColorModeScript initialColorMode={ theme.config.initialColorMode }/>
<Main/> <Main/>
<NextScript/> <NextScript/>
</body> </body>
......
theme/components/Button.ts
View file @ 6249bdaa
import type { ComponentStyleConfig } from '@chakra-ui/theme'; import type { ComponentStyleConfig } from '@chakra-ui/theme';
import { mode } from '@chakra-ui/theme-tools';
import type { SystemStyleFunction } from '@chakra-ui/theme-tools';
const Button: ComponentStyleConfig = { const variantPrimary = {
baseStyle: { bg: 'blue.600',
fontWeight: 'normal', color: 'white',
}, fontWeight: 600,
variants: { _hover: {
primary: { bg: 'blue.400',
_disabled: {
bg: 'blue.600', bg: 'blue.600',
color: 'white',
fontWeight: 600,
_hover: {
bg: 'blue.400',
_disabled: {
bg: 'blue.600',
},
},
_disabled: {
opacity: 0.2,
},
},
secondary: {
bg: 'white',
color: 'blue.600',
fontWeight: 600,
borderColor: 'blue.600',
border: '2px solid',
_hover: {
color: 'blue.400',
borderColor: 'blue.400',
},
_disabled: {
opacity: 0.2,
},
}, },
iconBlue: { },
color: 'blue.600', _disabled: {
_hover: { opacity: 0.2,
color: 'blue.400', },
}, }
const variantSecondary = {
bg: 'white',
color: 'blue.600',
fontWeight: 600,
borderColor: 'blue.600',
border: '2px solid',
_hover: {
color: 'blue.400',
borderColor: 'blue.400',
},
_disabled: {
opacity: 0.2,
},
}
const variantIconBlue: SystemStyleFunction = (props) => {
return {
color: mode('blue.600', 'blue.300')(props),
_hover: {
color: mode('blue.400', 'blue.200')(props),
}, },
}
}
const variants = {
primary: variantPrimary,
secondary: variantSecondary,
iconBlue: variantIconBlue,
}
const Button: ComponentStyleConfig = {
baseStyle: {
fontWeight: 'normal',
}, },
variants,
sizes: { sizes: {
lg: { lg: {
h: 12, h: 12,
......
theme/components/Input.ts
View file @ 6249bdaa
...@@ -22,8 +22,8 @@ const variantOutline: PartsStyleFunction<typeof parts> = (props) => { ...@@ -22,8 +22,8 @@ const variantOutline: PartsStyleFunction<typeof parts> = (props) => {
return { return {
field: { field: {
border: '2px solid', border: '2px solid',
borderColor: 'inherit',
bg: 'inherit', bg: 'inherit',
borderColor: mode('gray.100', 'whiteAlpha.200')(props),
_hover: { _hover: {
borderColor: mode('gray.300', 'whiteAlpha.400')(props), borderColor: mode('gray.300', 'whiteAlpha.400')(props),
}, },
...@@ -47,8 +47,8 @@ const variantOutline: PartsStyleFunction<typeof parts> = (props) => { ...@@ -47,8 +47,8 @@ const variantOutline: PartsStyleFunction<typeof parts> = (props) => {
}, },
addon: { addon: {
border: '2px solid', border: '2px solid',
borderColor: mode('inherit', 'whiteAlpha.50')(props), borderColor: mode('gray.100', 'whiteAlpha.200')(props),
bg: mode('gray.100', 'whiteAlpha.300')(props), bg: mode('gray.100', 'whiteAlpha.200')(props),
}, },
} }
} }
......
theme/components/Link.ts 0 → 100644
View file @ 6249bdaa
import type { ComponentStyleConfig } from '@chakra-ui/theme';
import { mode } from '@chakra-ui/theme-tools';
import type { SystemStyleFunction } from '@chakra-ui/theme-tools';
const variantPrimary: SystemStyleFunction = (props) => {
return {
color: mode('blue.600', 'blue.300')(props),
_hover: {
color: mode('blue.400', 'blue.200')(props),
},
}
}
const variantSecondary: SystemStyleFunction = (props) => {
return {
color: mode('gray.500', 'gray.500')(props),
_hover: {
color: mode('gray.600', 'gray.400')(props),
},
}
}
const variants = {
primary: variantPrimary,
secondary: variantSecondary,
}
const defaultProps = {
variant: 'primary',
}
const Link: ComponentStyleConfig = {
variants,
defaultProps,
}
export default Link;
theme/components/Modal.ts
View file @ 6249bdaa
import { modalAnatomy as parts } from '@chakra-ui/anatomy'
import type { PartsStyleFunction, SystemStyleFunction } from '@chakra-ui/theme-tools'
import { mode } from '@chakra-ui/theme-tools'
import type { ComponentMultiStyleConfig } from '@chakra-ui/theme'; import type { ComponentMultiStyleConfig } from '@chakra-ui/theme';
const Modal: ComponentMultiStyleConfig = { const baseStyleDialog: SystemStyleFunction = (props) => {
parts: [ ], return {
sizes: { padding: 8,
md: { borderRadius: 'lg',
dialog: { bg: mode('white', 'gray.800')(props),
maxW: '760px', }
}, }
},
}, const baseStyleHeader = {
baseStyle: { padding: 0,
marginBottom: 8,
fontSize: '2xl',
lineHeight: 10,
}
const baseStyleBody = {
padding: 0,
marginBottom: 8,
}
const baseStyleFooter = {
padding: 0,
justifyContent: 'flex-start',
}
const baseStyleCloseButton: SystemStyleFunction = (props) => {
return {
top: 8,
right: 8,
height: 10,
width: 10,
color: mode('gray.700', 'gray.600')(props),
_hover: { color: 'blue.400' },
_active: { bg: 'none' },
}
}
const baseStyle: PartsStyleFunction<typeof parts> = (props) => ({
dialog: baseStyleDialog(props),
header: baseStyleHeader,
body: baseStyleBody,
footer: baseStyleFooter,
closeButton: baseStyleCloseButton(props),
})
const sizes = {
md: {
dialog: { dialog: {
padding: 8, maxW: '760px',
borderRadius: 'lg',
},
header: {
padding: 0,
marginBottom: 8,
fontSize: '2xl',
lineHeight: 10,
},
body: {
padding: 0,
marginBottom: 8,
},
footer: {
padding: 0,
justifyContent: 'flex-start',
},
closeButton: {
top: 8,
right: 8,
height: 10,
width: 10,
color: 'gray.700',
_hover: { color: 'blue.400' },
_active: { bg: 'none' },
}, },
}, },
} }
const Modal: ComponentMultiStyleConfig = {
parts: parts.keys,
sizes,
baseStyle,
}
export default Modal; export default Modal;
theme/components/Table.ts
View file @ 6249bdaa
import type { tableAnatomy as parts } from '@chakra-ui/anatomy';
import type { ComponentMultiStyleConfig } from '@chakra-ui/theme'; import type { ComponentMultiStyleConfig } from '@chakra-ui/theme';
import { mode } from '@chakra-ui/theme-tools';
import type { PartsStyleFunction } from '@chakra-ui/theme-tools';
const variantSimple: PartsStyleFunction<typeof parts> = (props) => {
return {
th: {
border: 0,
color: mode('gray.500', 'gray.50')(props),
},
thead: {
backgroundColor: mode('gray.50', 'whiteAlpha.100')(props),
},
td: {
borderColor: mode('gray.200', 'whiteAlpha.200')(props),
},
}
}
const Table: ComponentMultiStyleConfig = { const Table: ComponentMultiStyleConfig = {
parts: [ 'th', 'td', 'table' ], parts: [ 'th', 'td', 'table', 'thead' ],
baseStyle: { baseStyle: {
thead: { thead: {
backgroundColor: 'gray.50', backgroundColor: 'gray.50',
...@@ -38,14 +56,7 @@ const Table: ComponentMultiStyleConfig = { ...@@ -38,14 +56,7 @@ const Table: ComponentMultiStyleConfig = {
}, },
}, },
variants: { variants: {
simple: { simple: variantSimple,
th: {
border: 0,
},
td: {
borderColor: 'gray.200',
},
},
}, },
} }
......
theme/components/index.ts
View file @ 6249bdaa
import Button from './Button'; import Button from './Button';
import Modal from './Modal';
import Table from './Table';
import Form from './Form'; import Form from './Form';
import Input from './Input'; import Input from './Input';
import Tabs from './Tabs'; import Link from './Link';
import Modal from './Modal';
import Table from './Table';
import Tag from './Tag'; import Tag from './Tag';
import Tooltip from './Tooltip'; import Tooltip from './Tooltip';
const components = { const components = {
Button, Button,
Modal,
Table,
Input, Input,
Form, Form,
Tabs, Link,
Modal,
Table,
Tag, Tag,
Tooltip, Tooltip,
} }
......
theme/config.ts 0 → 100644
View file @ 6249bdaa
import { type ThemeConfig } from '@chakra-ui/react';
const config: ThemeConfig = {
initialColorMode: 'system',
useSystemColorMode: false,
}
export default config;
theme/global.ts 0 → 100644
View file @ 6249bdaa
import type { StyleFunctionProps } from '@chakra-ui/theme-tools';
import { mode } from '@chakra-ui/theme-tools';
const global = (props: StyleFunctionProps) => ({
body: {
bg: mode('white', 'black')(props),
},
})
export default global;
theme/index.ts
View file @ 6249bdaa
...@@ -4,12 +4,18 @@ import typography from './foundations/typography'; ...@@ -4,12 +4,18 @@ import typography from './foundations/typography';
import borders from './foundations/borders'; import borders from './foundations/borders';
import colors from './foundations/colors'; import colors from './foundations/colors';
import components from './components/index'; import components from './components/index';
import config from './config';
import global from './global';
const overrides = { const overrides = {
...typography, ...typography,
...borders, ...borders,
colors, colors,
components, components,
config,
styles: {
global,
},
} }
export default extendTheme(overrides); export default extendTheme(overrides);
theme_alt/foundations/colors.ts deleted 100644 → 0
View file @ 3cee2624
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 deleted 100644 → 0
View file @ 3cee2624
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 deleted 100644 → 0
View file @ 3cee2624
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);
ui/Page/Page.tsx
View file @ 6249bdaa
import React from 'react'; import React from 'react';
import { Box, HStack, LightMode, VStack } from '@chakra-ui/react'; import { Box, HStack, VStack } from '@chakra-ui/react';
import Navigation from '../navigation/Navigation'; import Navigation from '../navigation/Navigation';
import Header from '../header/Header'; import Header from '../header/Header';
...@@ -10,31 +10,27 @@ interface Props { ...@@ -10,31 +10,27 @@ interface Props {
const Page = ({ children }: Props) => { const Page = ({ children }: Props) => {
return ( return (
<LightMode> <HStack
<HStack w="100%"
w="100%" minH="100vh"
minH="100vh" spacing={ 16 }
bgColor="white" alignItems="stretch"
spacing={ 16 } paddingRight="60px"
alignItems="stretch" >
paddingRight="60px" <Navigation/>
> <VStack width="100%">
<Navigation/> <Header/>
<VStack width="100%"> <Box
<Header/> as="main"
<Box borderRadius="base"
as="main" w="100%"
borderRadius="base" overflow="hidden"
w="100%" py={ 8 }
overflow="hidden" >
bgColor="white" { children }
py={ 8 } </Box>
> </VStack>
{ children } </HStack>
</Box>
</VStack>
</HStack>
</LightMode>
); );
}; };
......
ui/header/Header.tsx
View file @ 6249bdaa
import React from 'react'; import React from 'react';
import { Box, HStack, InputGroup, Input, InputLeftAddon, InputLeftElement, Center } from '@chakra-ui/react'; import { HStack, InputGroup, Input, InputLeftAddon, InputLeftElement, Center, Switch, useColorMode, useColorModeValue } from '@chakra-ui/react';
import { SearchIcon } from '@chakra-ui/icons' import { SearchIcon } from '@chakra-ui/icons'
import Identicon from 'react-identicons'; import Identicon from 'react-identicons';
import styles from './Header.module.css'; import styles from './Header.module.css';
const AccountNav = () => { const Header = () => {
const { toggleColorMode } = useColorMode();
return ( return (
<HStack <HStack
as="header" as="header"
...@@ -23,8 +25,8 @@ const AccountNav = () => { ...@@ -23,8 +25,8 @@ const AccountNav = () => {
</InputLeftElement> </InputLeftElement>
<Input paddingInlineStart="50px" placeholder="Search by addresses / transactions /block/ token ... "/> <Input paddingInlineStart="50px" placeholder="Search by addresses / transactions /block/ token ... "/>
</InputGroup> </InputGroup>
<Box>Switch</Box> <Switch size="lg" onChange={ toggleColorMode }/>
<Center minWidth="50px" width="50px" height="50px" bg="blackAlpha.100" borderRadius="50%" overflow="hidden"> <Center minWidth="50px" width="50px" height="50px" bg={ useColorModeValue('blackAlpha.100', 'white') } borderRadius="50%" overflow="hidden">
{ /* the displayed size is 40px, but we need to generate x2 for retina displays */ } { /* the displayed size is 40px, but we need to generate x2 for retina displays */ }
<Identicon className={ styles.identicon } string="randomness" size={ 80 }/> <Identicon className={ styles.identicon } string="randomness" size={ 80 }/>
</Center> </Center>
...@@ -32,4 +34,4 @@ const AccountNav = () => { ...@@ -32,4 +34,4 @@ const AccountNav = () => {
) )
} }
export default AccountNav; export default Header;
ui/navigation/AccountNavLink.tsx
View file @ 6249bdaa
...@@ -2,6 +2,7 @@ import React from 'react'; ...@@ -2,6 +2,7 @@ import React from 'react';
import { Link, Icon, Text, HStack } from '@chakra-ui/react'; import { Link, Icon, Text, HStack } from '@chakra-ui/react';
import NextLink from 'next/link'; import NextLink from 'next/link';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import useColors from './useColors';
interface Props { interface Props {
pathname: string; pathname: string;
...@@ -13,6 +14,8 @@ const AccountNavLink = ({ text, pathname, icon }: Props) => { ...@@ -13,6 +14,8 @@ const AccountNavLink = ({ text, pathname, icon }: Props) => {
const router = useRouter(); const router = useRouter();
const isActive = router.pathname === pathname; const isActive = router.pathname === pathname;
const colors = useColors();
return ( return (
<NextLink href={ pathname } passHref> <NextLink href={ pathname } passHref>
<Link <Link
...@@ -21,9 +24,9 @@ const AccountNavLink = ({ text, pathname, icon }: Props) => { ...@@ -21,9 +24,9 @@ const AccountNavLink = ({ text, pathname, icon }: Props) => {
w="220px" w="220px"
px={ 4 } px={ 4 }
py={ 2.5 } py={ 2.5 }
color={ isActive ? 'blue.700' : 'gray.600' } color={ isActive ? colors.text.active : colors.text.default }
bgColor={ isActive ? 'blue.50' : 'transparent' } bgColor={ isActive ? colors.bg.active : colors.bg.default }
_hover={{ color: 'blue.400' }} _hover={{ color: colors.text.hover }}
borderRadius="base" borderRadius="base"
> >
<HStack spacing={ 3 }> <HStack spacing={ 3 }>
......
ui/navigation/MainNavLink.tsx
View file @ 6249bdaa
...@@ -3,6 +3,7 @@ import { Link, Icon, Text, HStack } from '@chakra-ui/react'; ...@@ -3,6 +3,7 @@ import { Link, Icon, Text, HStack } from '@chakra-ui/react';
import NextLink from 'next/link'; import NextLink from 'next/link';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import { ChevronRightIcon } from '@chakra-ui/icons' import { ChevronRightIcon } from '@chakra-ui/icons'
import useColors from './useColors';
interface Props { interface Props {
pathname: string; pathname: string;
...@@ -14,6 +15,8 @@ const MainNavLink = ({ text, pathname, icon }: Props) => { ...@@ -14,6 +15,8 @@ const MainNavLink = ({ text, pathname, icon }: Props) => {
const router = useRouter(); const router = useRouter();
const isActive = router.pathname === pathname; const isActive = router.pathname === pathname;
const colors = useColors();
return ( return (
<NextLink href={ pathname } passHref> <NextLink href={ pathname } passHref>
<Link <Link
...@@ -22,10 +25,10 @@ const MainNavLink = ({ text, pathname, icon }: Props) => { ...@@ -22,10 +25,10 @@ const MainNavLink = ({ text, pathname, icon }: Props) => {
w="220px" w="220px"
px={ 4 } px={ 4 }
py={ 2.5 } py={ 2.5 }
color={ isActive ? 'blue.700' : 'gray.600' } color={ isActive ? colors.text.active : colors.text.default }
bgColor={ isActive ? 'blue.50' : 'transparent' } bgColor={ isActive ? colors.bg.active : colors.bg.default }
_hover={{ color: colors.text.hover }}
borderRadius="base" borderRadius="base"
_hover={{ color: 'blue.400' }}
> >
<HStack justifyContent="space-between"> <HStack justifyContent="space-between">
<HStack spacing={ 3 }> <HStack spacing={ 3 }>
......
ui/navigation/NavFooter.tsx
View file @ 6249bdaa
import React from 'react'; import React from 'react';
import { VStack, Text, HStack, Icon, Link } from '@chakra-ui/react'; import { VStack, Text, HStack, Icon, Link, useColorModeValue } from '@chakra-ui/react';
import ghIcon from '../../icons/social/git.svg'; import ghIcon from '../../icons/social/git.svg';
import twIcon from '../../icons/social/tweet.svg'; import twIcon from '../../icons/social/tweet.svg';
...@@ -20,7 +20,7 @@ const NavFooter = () => { ...@@ -20,7 +20,7 @@ const NavFooter = () => {
as="footer" as="footer"
spacing={ 8 } spacing={ 8 }
borderTop="1px solid" borderTop="1px solid"
borderColor="gray.200" borderColor={ useColorModeValue('gray.200', 'whiteAlpha.200') }
paddingTop={ 8 } paddingTop={ 8 }
w="100%" w="100%"
alignItems="baseline" alignItems="baseline"
...@@ -30,7 +30,7 @@ const NavFooter = () => { ...@@ -30,7 +30,7 @@ const NavFooter = () => {
<HStack> <HStack>
{ SOCIAL_LINKS.map(sl => { { SOCIAL_LINKS.map(sl => {
return ( return (
<Link href={ sl.link } key={ sl.link }> <Link href={ sl.link } key={ sl.link } variant="secondary">
<Icon as={ sl.icon } boxSize={ 5 }/> <Icon as={ sl.icon } boxSize={ 5 }/>
</Link> </Link>
) )
......
ui/navigation/Navigation.tsx
View file @ 6249bdaa
import React from 'react'; import React from 'react';
import { VStack, HStack, Icon } from '@chakra-ui/react'; import { VStack, HStack, Icon, useColorModeValue } from '@chakra-ui/react';
import AccountNavigation from './AccountNavigation'; import AccountNavigation from './AccountNavigation';
import MainNavigation from './MainNavigation'; import MainNavigation from './MainNavigation';
...@@ -14,14 +14,14 @@ const Navigation = () => { ...@@ -14,14 +14,14 @@ const Navigation = () => {
alignItems="flex-start" alignItems="flex-start"
spacing={ 12 } spacing={ 12 }
borderRight="1px solid" borderRight="1px solid"
borderColor="gray.200" borderColor={ useColorModeValue('gray.200', 'whiteAlpha.200') }
px={ 10 } px={ 10 }
py={ 12 } py={ 12 }
width="300px" width="300px"
> >
<HStack as="header" justifyContent="space-between" w="100%" px={ 4 } mb={ 2 } h={ 10 } alignItems="center"> <HStack as="header" justifyContent="space-between" w="100%" px={ 4 } mb={ 2 } h={ 10 } alignItems="center">
<Icon as={ logoIcon } width="142px" height="26px" color="blue.600"/> <Icon as={ logoIcon } width="142px" height="26px" color={ useColorModeValue('blue.600', 'white') }/>
<Icon as={ networksIcon } width="20px" height="20px"/> <Icon as={ networksIcon } width="20px" height="20px" color={ useColorModeValue('gray.500', 'white') }/>
</HStack> </HStack>
<MainNavigation/> <MainNavigation/>
<AccountNavigation/> <AccountNavigation/>
......
ui/navigation/useColors.ts 0 → 100644
View file @ 6249bdaa
import { useColorModeValue } from '@chakra-ui/react';
export default function useColors() {
return {
text: {
'default': useColorModeValue('gray.600', 'gray.300'),
active: useColorModeValue('blue.700', 'gray.300'),
hover: useColorModeValue('blue.400', 'gray.100'),
},
bg: {
'default': 'transparent',
active: useColorModeValue('blue.50', 'gray.900'),
},
}
}
ui/shared/AddressLinkWithTooltip.tsx
View file @ 6249bdaa
...@@ -10,12 +10,9 @@ const AddressLinkWithTooltip = ({ address }: {address: string}) => { ...@@ -10,12 +10,9 @@ const AddressLinkWithTooltip = ({ address }: {address: string}) => {
<HStack spacing={ 2 } alignContent="center" overflow="hidden"> <HStack spacing={ 2 } alignContent="center" overflow="hidden">
<Link <Link
href="#" href="#"
color="blue.500"
overflow="hidden" overflow="hidden"
fontWeight={ 600 } fontWeight={ 600 }
lineHeight="24px" lineHeight="24px"
// need theme
_hover={{ color: 'blue.400' }}
> >
<Tooltip label={ address }> <Tooltip label={ address }>
<Box overflow="hidden"><AddressWithDots address={ address }/></Box> <Box overflow="hidden"><AddressWithDots address={ address }/></Box>
......
ui/watchlist/AddressModal/AddressForm.tsx
View file @ 6249bdaa
...@@ -93,11 +93,11 @@ const AddressModal: React.FC<Props> = ({ data }) => { ...@@ -93,11 +93,11 @@ const AddressModal: React.FC<Props> = ({ data }) => {
<Grid templateColumns="repeat(3, max-content)" gap="20px 24px"> <Grid templateColumns="repeat(3, max-content)" gap="20px 24px">
{ NOTIFICATIONS.map((notification: string) => { { NOTIFICATIONS.map((notification: string) => {
return ( return (
<> <React.Fragment key={ notification }>
<GridItem>{ notification }</GridItem> <GridItem>{ notification }</GridItem>
<GridItem><Checkbox colorScheme="blue" size="lg">Incoming</Checkbox></GridItem> <GridItem><Checkbox colorScheme="blue" size="lg">Incoming</Checkbox></GridItem>
<GridItem><Checkbox colorScheme="blue" size="lg">Outgoing</Checkbox></GridItem> <GridItem><Checkbox colorScheme="blue" size="lg">Outgoing</Checkbox></GridItem>
</> </React.Fragment>
) )
}) } }) }
</Grid> </Grid>
......
ui/watchlist/WatchlistTable/WatchListAddressItem.tsx
View file @ 6249bdaa
import React from 'react'; import React from 'react';
import { Link, HStack, VStack, Image, Text, Icon } from '@chakra-ui/react'; import { Link, HStack, VStack, Image, Text, Icon, useColorModeValue } from '@chakra-ui/react';
import AddressIcon from '../../shared/AddressIcon'; import AddressIcon from '../../shared/AddressIcon';
import AddressLinkWithTooltip from '../../shared/AddressLinkWithTooltip'; import AddressLinkWithTooltip from '../../shared/AddressLinkWithTooltip';
...@@ -10,6 +10,9 @@ import TokensIcon from '../../../icons/tokens.svg'; ...@@ -10,6 +10,9 @@ import TokensIcon from '../../../icons/tokens.svg';
import WalletIcon from '../../../icons/wallet.svg'; import WalletIcon from '../../../icons/wallet.svg';
const WatchListAddressItem = ({ item }: {item: TWatchlistItem}) => { const WatchListAddressItem = ({ item }: {item: TWatchlistItem}) => {
const mainTextColor = useColorModeValue('gray.700', 'gray.50');
const secondaryTextColor = useColorModeValue('gray.500', 'gray.400');
return ( return (
<HStack spacing={ 3 } align="top"> <HStack spacing={ 3 } align="top">
<AddressIcon address={ item.address }/> <AddressIcon address={ item.address }/>
...@@ -18,22 +21,22 @@ const WatchListAddressItem = ({ item }: {item: TWatchlistItem}) => { ...@@ -18,22 +21,22 @@ const WatchListAddressItem = ({ item }: {item: TWatchlistItem}) => {
{ item.tokenBalance && ( { item.tokenBalance && (
<HStack spacing={ 0 } fontSize="sm" h={ 6 }> <HStack spacing={ 0 } fontSize="sm" h={ 6 }>
<Image src="./xdai.png" alt="chain-logo" marginRight="10px" w="16px" h="16px"/> <Image src="./xdai.png" alt="chain-logo" marginRight="10px" w="16px" h="16px"/>
<Text>{ `xDAI balance:${ nbsp }` + item.tokenBalance }</Text> <Text color={ mainTextColor }>{ `xDAI balance:${ nbsp }` + item.tokenBalance }</Text>
<Text color="gray.500">{ `${ nbsp }($${ item.tokenBalanceUSD } USD)` }</Text> <Text color={ secondaryTextColor }>{ `${ nbsp }($${ item.tokenBalanceUSD } USD)` }</Text>
</HStack> </HStack>
) } ) }
{ item.tokensAmount && ( { item.tokensAmount && (
<HStack spacing={ 0 } fontSize="sm" h={ 6 }> <HStack spacing={ 0 } fontSize="sm" h={ 6 }>
<Icon as={ TokensIcon } marginRight="10px" w="17px" h="16px"/> <Icon as={ TokensIcon } marginRight="10px" w="17px" h="16px"/>
<Text>{ `Tokens:${ nbsp }` + item.tokensAmount }</Text> <Text color={ mainTextColor }>{ `Tokens:${ nbsp }` + item.tokensAmount }</Text>
<Text color="gray.500">{ `${ nbsp }($${ item.tokensUSD } USD)` }</Text> <Text color={ secondaryTextColor }>{ `${ nbsp }($${ item.tokensUSD } USD)` }</Text>
</HStack> </HStack>
) } ) }
{ item.totalUSD && ( { item.totalUSD && (
<HStack spacing={ 0 } fontSize="sm" h={ 6 }> <HStack spacing={ 0 } fontSize="sm" h={ 6 }>
<Icon as={ WalletIcon } marginRight="10px" w="16px" h="16px"/> <Icon as={ WalletIcon } marginRight="10px" w="16px" h="16px"/>
<Text>{ `Net worth:${ nbsp }` }</Text> <Text color={ mainTextColor }>{ `Net worth:${ nbsp }` }</Text>
<Link href="#" color="blue.500" _hover={{ color: 'blue.400' }}>{ `$${ item.totalUSD } USD` }</Link> <Link href="#">{ `$${ item.totalUSD } USD` }</Link>
</HStack> </HStack>
) } ) }
</VStack> </VStack>
......
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