created toggleable dark theme

Author: kaimsfd

.devcontainer/docker-compose.yaml

@@ -7,11 +7,13 @@ services:
       dockerfile: Dockerfile.backend
     volumes:
       - ..:/workspace:z
-    command: sleep infinity
+    command: cargo run --manifest-path /workspace/backend/Cargo.toml --release -p pin_packing  serve --database-url postgres://postgres:password@postgres/pin_packing
     environment:
       OPA_URL: http://opa:8181
       DATABASE_URL: postgres://postgres:password@postgres
       RABBITMQ_URL: amqp://rabbitmq:password@rabbitmq
+    ports:
+      - "8080:80"
 
   frontend:
     build:

frontend/package.json

@@ -91,7 +91,9 @@
     "graphql": "^16.3.0",
     "http-proxy-middleware": "^2.0.6",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-helmet": "^6.1.0",
+    "react-toggle-dark-mode": "^1.1.1"
   },
   "jest": {
     "roots": [

frontend/src/App.tsx

@@ -1,9 +1,12 @@
+/* eslint-disable no-template-curly-in-string */
 import { useQuery } from "@apollo/client";
 import { gql } from './__generated__/gql';
 import React from "react";
-import { theme } from "@diamondlightsource/ui-components"
-import { ChakraProvider, Alert, AlertIcon, AlertTitle, AlertDescription, Button, HStack } from "@chakra-ui/react";
+import { theme } from "./styles/theme"
+import { ChakraProvider, Alert, AlertIcon, AlertTitle, AlertDescription, Button, HStack, useColorMode } from "@chakra-ui/react";
 import { Table } from "./components/Table";
+import {Helmet} from 'react-helmet';
+import { DarkModeSwitch } from 'react-toggle-dark-mode';
 
 const GET_INFO = gql(`
 query pinInfo ($after: String) {
@@ -34,7 +37,16 @@ function DisplayPinInfo(): React.JSX.Element {
       notifyOnNetworkStatusChange: true,
     });
 
+  //const [isDarkMode, setDarkMode] = React.useState(false);
+
+  /* const toggleDarkMode = (checked: boolean) => {
+    setDarkMode(checked);
+  };*/
+
+  const { colorMode, toggleColorMode } = useColorMode()
+
   var loadingRows = loading ? 2 : 0
+  var bgColour = colorMode === 'dark' ? "black" : "white"
 
   if (error) return (
     <Alert status='error'>
@@ -77,6 +89,16 @@ function DisplayPinInfo(): React.JSX.Element {
 
   return (
     <>
+    <div>
+    <DarkModeSwitch
+      style={{ marginBottom: '1rem', marginLeft: '.25rem', marginTop: '.25rem', position: 'relative', left: '1875px'}}
+      checked={colorMode === 'dark'}
+      onChange={toggleColorMode}
+      size={30}
+    />
+        <Helmet>
+        <style>{`body { background-color: ${bgColour} }`}</style>
+      </Helmet>
       <Table 
         headers={[
           {
@@ -97,9 +119,10 @@ function DisplayPinInfo(): React.JSX.Element {
         ]}
         data={data ? data.libraryPins.edges.map((edge) => edge.node): []}
         loadingRows={loadingRows}
+        rowVariant={"diamondStriped"}
       />
       <HStack justify='center' width='100%'>
-        <Button 
+        <Button marginTop={'10px'}
           colorScheme='teal' 
           variant='outline' 
           onClick={loadMore} 
@@ -110,6 +133,7 @@ function DisplayPinInfo(): React.JSX.Element {
           Load More
         </Button>
       </HStack>
+    </div>
     </>
   );
 }

frontend/src/styles/colours.tsx

@@ -0,0 +1,23 @@
+const colours = {
+    diamond: {
+      50: { default: "#FBFBFB", _dark: "#525151" },
+      75: "#F7F7F7",
+      100: { default: "#E7ECEF", _dark: "#383838" },
+      200: { default: "#CBD5E0", _dark: "#030303" },
+      300: "#39435E",
+      400: "#9BBBFA",
+      500: "#fcd021",
+      600: "#385BBD",
+      700: "#1040A1",
+      800: "#001d55",
+      1000: { default: "#faf7f7", _dark: "#030303" },
+      2000: { default: "#19191a", _dark: "#d7d8d9" },
+      3000: { default: "#303030", _dark: "#d7d8d9" },
+    },
+  };
+  
+  const fillColours = ["#ff5733", "#19D3FF", "#FF9B40", "#FF2677", "#FF9B40"];
+  
+  const getFillColour = (j: number) => fillColours[j % fillColours.length];
+  
+  export { colours, getFillColour };