From 481578880f9554965c843fdab60d07915a36a9f9 Mon Sep 17 00:00:00 2001
From: kaimsfd <kai.mansfield@diamond.ac.uk>
Date: Thu, 26 Oct 2023 08:15:28 +0000
Subject: [PATCH] created simpler moon/sun icons

---
 frontend/package.json                      |  1 +
 frontend/src/App.tsx                       | 11 +++++++----
 frontend/src/components/DarkModeButton.tsx | 15 +++++++++++++++
 frontend/yarn.lock                         |  7 +++++++
 4 files changed, 30 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/components/DarkModeButton.tsx

diff --git a/frontend/package.json b/frontend/package.json
index 8fe8a897..f8c842dc 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -83,6 +83,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",
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 7914f4db..2b15a437 100644
--- a/frontend/src/App.tsx
+++ b/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>
diff --git a/frontend/src/components/DarkModeButton.tsx b/frontend/src/components/DarkModeButton.tsx
new file mode 100644
index 00000000..8f63047b
--- /dev/null
+++ b/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}
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 7fb8d365..97348a31 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -1462,6 +1462,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"