created simpler moon/sun icons

Author: kaimsfd

frontend/package.json

@@ -80,6 +80,7 @@
   },
   "dependencies": {
     "@apollo/client": "3.5.4",
+    "@chakra-ui/icons": "^2.1.1",
     "@chakra-ui/react": "^2.8.1",
     "@diamondlightsource/ui-components": "^1.0.2",
     "@emotion/react": "^11.11.1",

frontend/src/App.tsx

@@ -7,6 +7,7 @@ import { ChakraProvider, Alert, AlertIcon, AlertTitle, AlertDescription, Button,
 import { Table } from "./components/Table";
 import {Helmet} from 'react-helmet';
 import { DarkModeSwitch } from 'react-toggle-dark-mode';
+import { DarkModeButton } from "./components/DarkModeButton";
 
 const GET_INFO = gql(`
 query pinInfo ($after: String) {
@@ -90,11 +91,13 @@ function DisplayPinInfo(): React.JSX.Element {
   return (
     <>
     <div>
-    <DarkModeSwitch
+    <DarkModeButton
+      aria-label='Search database'
       style={{ marginBottom: '1rem', marginLeft: '.25rem', marginTop: '.25rem', position: 'relative', left: '1875px'}}
-      checked={colorMode === 'dark'}
-      onChange={toggleColorMode}
-      size={30}
+      isDark={colorMode === 'dark'}
+      onClick={toggleColorMode}
+      variant={'unstyled'}
+      colorScheme={colorMode === 'dark' ? '#a3a3a3' : 'white'}
     />
         <Helmet>
         <style>{`body { background-color: ${bgColour} }`}</style>

frontend/src/components/DarkModeButton.tsx

@@ -0,0 +1,15 @@
+import { IconButton,  IconButtonProps} from '@chakra-ui/react'
+import React from 'react'
+import { SunIcon, MoonIcon } from '@chakra-ui/icons'
+
+export interface DarkModeButtonProps extends IconButtonProps {
+    isDark: boolean
+}
+
+const DarkModeButton = ({isDark, ...props}: DarkModeButtonProps) => {
+    return (
+        <IconButton icon={isDark ? <MoonIcon color='white'/> : <SunIcon color='#2b2b2b'/>} {...props}/>
+    )
+}
+
+export {DarkModeButton}

frontend/yarn.lock

@@ -1468,6 +1468,13 @@
   dependencies:
     "@chakra-ui/shared-utils" "2.0.5"
 
+"@chakra-ui/icons@^2.1.1":
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/icons/-/icons-2.1.1.tgz#58ff0f9e703f2f4f89debd600ce4e438f43f9c9a"
+  integrity sha512-3p30hdo4LlRZTT5CwoAJq3G9fHI0wDc0pBaMHj4SUn0yomO+RcDRlzhdXqdr5cVnzax44sqXJVnf3oQG0eI+4g==
+  dependencies:
+    "@chakra-ui/icon" "3.2.0"
+
 "@chakra-ui/image@2.1.0":
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/@chakra-ui/image/-/image-2.1.0.tgz#6c205f1ca148e3bf58345b0b5d4eb3d959eb9f87"