updated darkModeButton format to match ui comp library

Author: kaimsfd

frontend/src/App.tsx

@@ -3,7 +3,7 @@ import { useQuery } from "@apollo/client";
 import { gql } from './__generated__/gql';
 import React from "react";
 import { theme } from "./styles/theme"
-import { ChakraProvider, Alert, AlertIcon, AlertTitle, AlertDescription, Button, HStack, useColorMode } from "@chakra-ui/react";
+import { ChakraProvider, Alert, AlertIcon, AlertTitle, AlertDescription, Button, HStack, useColorMode, useColorModeValue } from "@chakra-ui/react";
 import { Table } from "./components/Table";
 import {Helmet} from 'react-helmet';
 import { DarkModeSwitch } from 'react-toggle-dark-mode';
@@ -47,7 +47,7 @@ function DisplayPinInfo(): React.JSX.Element {
   const { colorMode, toggleColorMode } = useColorMode()
 
   var loadingRows = loading ? 2 : 0
-  var bgColour = colorMode === 'dark' ? "black" : "white"
+  const bgColour = useColorModeValue('white', 'black')
 
   if (error) return (
     <Alert status='error'>
@@ -92,12 +92,9 @@ function DisplayPinInfo(): React.JSX.Element {
     <>
     <div>
     <DarkModeButton
-      aria-label='Search database'
       style={{ marginBottom: '1rem', marginLeft: '.25rem', marginTop: '.25rem', position: 'relative', left: '1875px'}}
-      isDark={colorMode === 'dark'}
       onClick={toggleColorMode}
       variant={'unstyled'}
-      colorScheme={colorMode === 'dark' ? '#a3a3a3' : 'white'}
     />
         <Helmet>
         <style>{`body { background-color: ${bgColour} }`}</style>

frontend/src/components/DarkModeButton.tsx

@@ -1,15 +1,24 @@
-import { IconButton,  IconButtonProps} from '@chakra-ui/react'
-import React from 'react'
+import { IconButton, IconButtonProps, useColorMode, useColorModeValue } from '@chakra-ui/react'
 import { SunIcon, MoonIcon } from '@chakra-ui/icons'
+import React from 'react'
 
-export interface DarkModeButtonProps extends IconButtonProps {
-    isDark: boolean
-}
+export interface DarkModeButtonProps extends Omit<IconButtonProps, "aria-label"> { }
+
+const DarkModeButton = ({ ...props }: DarkModeButtonProps) => {
+    const { toggleColorMode } = useColorMode()
+
+    const label = useColorModeValue('Light Mode', 'Dark Mode')
+    const iconColor = useColorModeValue('#2b2b2b', 'white')
+    const icon = useColorModeValue(<SunIcon color={iconColor} />, <MoonIcon color={iconColor} />)
 
-const DarkModeButton = ({isDark, ...props}: DarkModeButtonProps) => {
     return (
-        <IconButton icon={isDark ? <MoonIcon color='white'/> : <SunIcon color='#2b2b2b'/>} {...props}/>
+        <IconButton
+            aria-label={label}
+            icon={icon}
+            onClick={toggleColorMode}
+            {...props}
+        />
     )
 }
 
-export {DarkModeButton}
+export { DarkModeButton }