Update theme

coecms · Dec 18, 2023 · cf896aa · cf896aa
1 parent 16f9d79
commit cf896aa
Show file tree

Hide file tree

Showing 7 changed files with 164 additions and 21 deletions.
diff --git a/index.html b/index.html
@@ -108,7 +108,7 @@
         </style>
         <link rel="preconnect" href="https://fonts.gstatic.com" />
         <link
-            href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
+            href="https://fonts.googleapis.com/css2?family=Barlow:wght@400;600;700&family=Open+Sans:wght@300;400;600&family=Ubuntu:wght@400;500;700&display=swap"
             rel="stylesheet"
         />
     </head>

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,36 +1,55 @@
-import { fetchUtils, Admin, Resource } from "react-admin";
+import {
+  fetchUtils,
+  Admin,
+  Resource,
+  AppBar,
+  Layout,
+  Button,
+  TitlePortal,
+} from "react-admin";
 import { UserList } from "./components/users";
 import { UserPage } from "./components/userpage";
 import { GroupList } from "./components/groups";
 import { GroupPage } from "./components/grouppage";
 import { MyLoginPage } from "./components/loginpage";
 import { QueryClient } from "react-query";
-import authProvider from "./auth"
+import authProvider from "./auth";
+import { dashboardTheme } from "./util/theme/theme";
+
+import Avatar from "@mui/material/Avatar";
 
 import simpleRestProvider from "ra-data-simple-rest";
 
-const httpClient = async ( url: string, options: fetchUtils.Options = {}) => {
-  const authkey = localStorage.getItem('auth');
-  const customHeaders = ( options.headers || new Headers({}) ) as Headers;
-  if ( authkey ) {
-    customHeaders.set("Authorization",authkey);
+const httpClient = async (url: string, options: fetchUtils.Options = {}) => {
+  const authkey = localStorage.getItem("auth");
+  const customHeaders = (options.headers || new Headers({})) as Headers;
+  if (authkey) {
+    customHeaders.set("Authorization", authkey);
   }
   options.headers = customHeaders;
-  const { status, headers, body, json } = await fetchUtils.fetchJson(url,options);
+  const { status, headers, body, json } = await fetchUtils.fetchJson(
+    url,
+    options
+  );
 
-  if ( status == 401 ) {
-    localStorage.removeItem('auth');
-    window.location.href = window.location.protocol + '//' + window.location.hostname + window.location.pathname + '#/login';
+  if (status == 401) {
+    localStorage.removeItem("auth");
+    window.location.href =
+      window.location.protocol +
+      "//" +
+      window.location.hostname +
+      window.location.pathname +
+      "#/login";
   }
 
-  return { status, headers, body, json }
-}
+  return { status, headers, body, json };
+};
 
 export const dataProvider = simpleRestProvider(
-  import.meta.env.VITE_SIMPLE_REST_URL, httpClient
+  import.meta.env.VITE_SIMPLE_REST_URL,
+  httpClient
 );
 
-
 export const App = () => {
   const queryClient = new QueryClient({
     defaultOptions: {
@@ -39,8 +58,32 @@ export const App = () => {
       },
     },
   });
+
+  const ClexLogo = () => (
+    <Button href="http://climateextremes.org.au">
+      <img src="https://home.climateextremes.org.au/wp-content/uploads/sites/2/2023/06/CLEX-ARC-Centre-_logo_WHITE-1.png" width="180"/>
+    </Button>
+  );
+
+  const myAppBar = () => (
+    <AppBar userMenu={false}>
+      <TitlePortal />
+      <ClexLogo />
+    </AppBar>
+  );
+  const myLayout = (props) => <Layout {...props} appBar={myAppBar} />;
+
   return (
-    <Admin dataProvider={dataProvider} queryClient={queryClient} loginPage={MyLoginPage} authProvider={authProvider} requireAuth disableTelemetry>
+    <Admin
+      layout={myLayout}
+      dataProvider={dataProvider}
+      queryClient={queryClient}
+      loginPage={MyLoginPage}
+      authProvider={authProvider}
+      theme={dashboardTheme}
+      requireAuth
+      disableTelemetry
+    >
       <Resource name="users" list={UserList} show={UserPage} />
       <Resource name="groups" list={GroupList} show={GroupPage} />
     </Admin>

diff --git a/src/components/groups/index.tsx b/src/components/groups/index.tsx
@@ -16,6 +16,8 @@ import InputAdornment from "@mui/material/InputAdornment";
 import { formatSU } from "../../util/formatting/formatSU";
 import { formatStorage } from "../../util/formatting/formatStorage";
 
+import { clex_secondary_colours_dark } from "../../util/theme/colours";
+
 import React from "react";
 
 const groupFilters = [
@@ -300,7 +302,22 @@ function MassdataUsage() {
 export const GroupList = () => {
   return (
     <List filters={groupFilters}>
-      <Datagrid rowClick="show" bulkActionButtons={false}>
+      <Datagrid
+        rowClick="show"
+        bulkActionButtons={false}
+        sx={{
+          "& .MuiTableRow-hover": {
+            ":hover": {
+              backgroundColor: clex_secondary_colours_dark["purple"],
+              color: "white",
+            },
+          },
+          "& .MuiTableCell-root": {
+            color:"inherit",
+          }
+
+        }}
+      >
         <TextField source="id" label="Group Name" />
         <FunctionField label="Compute Usage" render={ComputeUsage} />
         <FunctionField label="Scratch Usage" render={ScratchUsage} />

diff --git a/src/components/users/index.tsx b/src/components/users/index.tsx
@@ -16,6 +16,8 @@ import InputAdornment from "@mui/material/InputAdornment";
 import { formatSU } from "../../util/formatting/formatSU";
 import { formatStorage } from "../../util/formatting/formatStorage";
 
+import { clex_secondary_colours_dark } from "../../util/theme/colours";
+
 const userFilters = [
   <TextInput
     source="id"
@@ -234,8 +236,22 @@ function scratchUsage() {
 
 export const UserList = () => {
   return (
-    <List filters={userFilters}>
-      <Datagrid rowClick="show" bulkActionButtons={false}>
+    <List filters={userFilters} sx={{ padding: 2 }}>
+      <Datagrid
+        rowClick="show"
+        bulkActionButtons={false}
+        sx={{
+          "& .MuiTableRow-hover": {
+            ":hover": {
+              backgroundColor: clex_secondary_colours_dark["purple"],
+              color: "white",
+            },
+          },
+          "& .MuiTableCell-root": {
+            color: "inherit",
+          },
+        }}
+      >
         <TextField source="id" label="Username" />
         <TextField source="pw_name" label="Name" />
         <FunctionField

diff --git a/src/util/formatting/colourPicker.tsx b/src/util/formatting/colourPicker.tsx
@@ -13,6 +13,6 @@ const colours = [
   "#a3de83",
 ];
 
-export function colourPicker(index) {
+export function colourPicker(index: number) {
   return colours[index % colours.length];
 }
diff --git a/src/util/theme/colours.jsx b/src/util/theme/colours.jsx
@@ -0,0 +1,28 @@
+const clex_primary_colours = {
+    "CLEX Red":"#DA1E48",
+    "CLEX Pink":"#F48580",
+    "CLEX Sky Blue":"#00BDF2",
+    "CLEX Mid Blue":"#008DD0",
+    "CLEX Cobalt Blue":"#0066B3",
+    "CLEX Midnight Blue":"#113559",
+    "CLEX Grey":"#4D4D4F"
+};
+
+const clex_secondary_colours_light = {
+    "orange":"#E27833",
+    "yellow":"#D0B252",
+    "purple":"#7A7CB9",
+    "blue":"#5D9BAA",
+    "green":"#51AA62"
+};
+
+const clex_secondary_colours_dark = {
+    "orange":"#711E18",
+    "yellow":"#695B29",
+    "purple":"#3E437B",
+    "blue":"#024E62",
+    "green":"#346D53"
+};
+
+
+export {clex_primary_colours,clex_secondary_colours_light,clex_secondary_colours_dark}
diff --git a/src/util/theme/theme.tsx b/src/util/theme/theme.tsx
@@ -0,0 +1,39 @@
+import { defaultTheme } from "react-admin";
+import {
+  clex_primary_colours,
+  clex_secondary_colours_light,
+  clex_secondary_colours_dark,
+} from "./colours";
+import { setUncaughtExceptionCaptureCallback } from "process";
+
+const dashboardTheme = {
+    ...defaultTheme,
+    palette: {
+        background: {default: '#f1f1f1'},
+    },
+    typography: {
+        fontFamily: [
+            'Ubuntu',
+            'sans-serif',
+        ].join(','),
+    },
+    components: {
+        ...defaultTheme.components,
+        RaAppBar: {
+            styleOverrides: {
+                root: {
+                    backgroundColor: clex_secondary_colours_dark['blue'],
+                },
+            },
+        },
+        RaDatagridHeaderCell: {
+            styleOverrides: {
+                root: {
+                    fontSize: 16,
+                },
+            },
+        },
+    },
+};
+
+export {dashboardTheme};