created simpler moon/sun icons

DiamondLightSource · Oct 26, 2023 · 4815788 · 4815788
1 parent 9694695
commit 4815788
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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/[email protected]":
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/@chakra-ui/image/-/image-2.1.0.tgz#6c205f1ca148e3bf58345b0b5d4eb3d959eb9f87"