interesting
/
go-ethereum
mirror of https://github.com/ethereum/go-ethereum.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

add sun icon when in dark mode

This commit is contained in:
Paul Wackerow 2022-11-15 20:55:48 -08:00
parent fe4014c03c
commit 384ecd0248
No known key found for this signature in database
GPG Key ID: BB63E296FE9CAB8D
3 changed files with 24 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/UI/Header.tsx
View File

@ -2,11 +2,12 @@ import { Box, Flex, Input, InputGroup, Link, Stack, Text, useColorMode } from '@
import { FC } from 'react'; import { FC } from 'react';
import NextLink from 'next/link'; import NextLink from 'next/link';
import { HamburgerIcon, LensIcon, MoonIcon } from '../UI/icons'; import { HamburgerIcon, LensIcon, MoonIcon, SunIcon } from '../UI/icons';
import { DOCS_PAGE, DOWNLOADS_PAGE } from '../../constants'; import { DOCS_PAGE, DOWNLOADS_PAGE } from '../../constants';
export const Header: FC = () => { export const Header: FC = () => {
const { toggleColorMode } = useColorMode(); const { colorMode, toggleColorMode } = useColorMode();
const isDark = colorMode === 'dark';
return ( return (
<Flex <Flex
mb={4} mb={4}
@ -107,7 +108,7 @@ export const Header: FC = () => {
borderColor='primary' borderColor='primary'
onClick={toggleColorMode} onClick={toggleColorMode}
> >
<MoonIcon color="primary" /> {isDark ? <SunIcon color="primary" /> : <MoonIcon color="primary" />}
</Box> </Box>
{/* HAMBURGER MENU */} {/* HAMBURGER MENU */}

19
src/components/UI/icons/SunIcon.tsx Normal file
View File

@ -0,0 +1,19 @@
import { createIcon } from '@chakra-ui/icons';
export const SunIcon = createIcon({
displayName: 'SunIcon',
viewBox: '0 0 44 44',
path: (
<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21 0H23V12H21V0Z" fill="currentColor"/>
<path d="M0 23V21H12V23H0Z" fill="currentColor"/>
<path d="M44 21H32V23H44V21Z" fill="currentColor"/>
<path d="M21 32H23V44H21V32Z" fill="currentColor"/>
<path d="M7.15074 5.73633L5.73653 7.15054L14.2218 15.6358L15.636 14.2216L7.15074 5.73633Z" fill="currentColor"/>
<path d="M36.8493 5.73618L38.2635 7.15039L29.7782 15.6357L28.364 14.2215L36.8493 5.73618Z" fill="currentColor"/>
<path d="M29.7782 28.3643L28.364 29.7785L36.8492 38.2638L38.2635 36.8495L29.7782 28.3643Z" fill="currentColor"/>
<path d="M14.2218 28.3641L15.636 29.7783L7.15076 38.2636L5.73655 36.8494L14.2218 28.3641Z" fill="currentColor"/>
<path d="M30 22C30 26.4183 26.4183 30 22 30C17.5817 30 14 26.4183 14 22C14 17.5817 17.5817 14 22 14C26.4183 14 30 17.5817 30 22Z" fill="currentColor"/>
</svg>
)
});

1
src/components/UI/icons/index.ts
View File

@ -3,4 +3,5 @@ export * from './GitHubIcon';
export * from './HamburgerIcon'; export * from './HamburgerIcon';
export * from './LensIcon'; export * from './LensIcon';
export * from './MoonIcon'; export * from './MoonIcon';
export * from './SunIcon';
export * from './TwitterIcon'; export * from './TwitterIcon';