From 384ecd0248cc58c954f785d00e117b5d2babeb21 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Tue, 15 Nov 2022 20:55:48 -0800
Subject: [PATCH] add sun icon when in dark mode

---
 src/components/UI/Header.tsx        |  7 ++++---
 src/components/UI/icons/SunIcon.tsx | 19 +++++++++++++++++++
 src/components/UI/icons/index.ts    |  1 +
 3 files changed, 24 insertions(+), 3 deletions(-)
 create mode 100644 src/components/UI/icons/SunIcon.tsx

diff --git a/src/components/UI/Header.tsx b/src/components/UI/Header.tsx
index e0e435f266..b8bc168946 100644
--- a/src/components/UI/Header.tsx
+++ b/src/components/UI/Header.tsx
@@ -2,11 +2,12 @@ import { Box, Flex, Input, InputGroup, Link, Stack, Text, useColorMode } from '@
 import { FC } from 'react';
 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';
 
 export const Header: FC = () => {
-  const { toggleColorMode } = useColorMode();
+  const { colorMode, toggleColorMode } = useColorMode();
+  const isDark = colorMode === 'dark';
   return (
     <Flex
       mb={4}
@@ -107,7 +108,7 @@ export const Header: FC = () => {
           borderColor='primary'
           onClick={toggleColorMode}
         >
-          <MoonIcon color="primary" />
+          {isDark ? <SunIcon color="primary" /> : <MoonIcon color="primary" />}
         </Box>
 
         {/* HAMBURGER MENU */}
diff --git a/src/components/UI/icons/SunIcon.tsx b/src/components/UI/icons/SunIcon.tsx
new file mode 100644
index 0000000000..d866d86daf
--- /dev/null
+++ b/src/components/UI/icons/SunIcon.tsx
@@ -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>
+  )
+});
diff --git a/src/components/UI/icons/index.ts b/src/components/UI/icons/index.ts
index 3ebd814f42..5bbac7fd7a 100644
--- a/src/components/UI/icons/index.ts
+++ b/src/components/UI/icons/index.ts
@@ -3,4 +3,5 @@ export * from './GitHubIcon';
 export * from './HamburgerIcon';
 export * from './LensIcon';
 export * from './MoonIcon';
+export * from './SunIcon';
 export * from './TwitterIcon';