Add dark mode

frontend/package.json

@@ -66,7 +66,7 @@
     "@ant-design/icons": "5.2.6",
     "@ctrl/tinycolor": "^4.1.0",
     "@react-keycloak/web": "3.4.0",
-    "antd": "^5.22.2",
+    "antd": "^5.23.0",
     "autoprefixer": "10.4.14",
     "axios": "0.26.1",
     "dayjs": "1.11.10",

frontend/src/components/App/App.tsx

@@ -15,8 +15,10 @@ import {
   Layout,
   Result,
   message,
+  theme,
 } from 'antd';
 import React from 'react';
+import { useRecoilState } from 'recoil';
 import { useAsync } from 'react-async';
 import { hotjar } from 'react-hotjar';
 import { Link, Navigate, Route, Routes } from 'react-router-dom';
@@ -64,10 +66,11 @@ import StartPopup from '../Messaging/StartPopup';
 import startupDisplayData from '../Messaging/messageDisplayData';
 import './App.css';
 import { miscTargets } from '../../common/reactJoyrideSteps';
+import { isDarkModeAtom } from './recoil/atoms';
 
 const styles: CSSinJS = {
   bodySider: {
-    background: '#fff',
+    background: 'rgba(255, 255, 255, 0.2)',
     padding: '12px 12px 12px 12px',
     width: '384px',
     marginRight: '2px',
@@ -144,6 +147,9 @@ const App: React.FC<React.PropsWithChildren<Props>> = ({ searchQuery }) => {
     JSON.parse(localStorage.getItem('userSearchQueries') || '[]') as UserSearchQueries
   );
 
+  const { defaultAlgorithm, darkAlgorithm } = theme;
+  const [isDarkMode] = useRecoilState<boolean>(isDarkModeAtom);
+
   React.useEffect(() => {
     /* istanbul ignore else */
     if (isAuthenticated) {
@@ -458,9 +464,10 @@ const App: React.FC<React.PropsWithChildren<Props>> = ({ searchQuery }) => {
         token: {
           borderRadius: 3,
         },
+        algorithm: isDarkMode ? darkAlgorithm : defaultAlgorithm,
       }}
     >
-      <div>
+      <Layout>
         <Routes>
           <Route
             path="*"
@@ -649,7 +656,7 @@ const App: React.FC<React.PropsWithChildren<Props>> = ({ searchQuery }) => {
         </Affix>
         <Support open={supportModalVisible} onClose={() => setSupportModalVisible(false)} />
         <StartPopup />
-      </div>
+      </Layout>
     </ConfigProvider>
   );
 };

frontend/src/components/App/recoil/atoms.ts

@@ -0,0 +1,8 @@
+import { atom } from 'recoil';
+
+export const isDarkModeAtom = atom<boolean>({
+  key: 'isDarkMode',
+  default: false,
+});
+
+export default isDarkModeAtom;

frontend/src/components/Cart/Summary.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Card, Collapse, Divider, List } from 'antd';
+import { Card, Collapse, Divider, List, Typography } from 'antd';
 import { useRecoilState } from 'recoil';
 import Button from '../General/Button';
 import cartImg from '../../assets/img/cart.svg';
@@ -13,6 +13,8 @@ import { GlobusTaskItem } from '../Globus/types';
 import GlobusStateKeys, { globusTaskItems } from '../Globus/recoil/atom';
 import { DataPersister } from '../../common/DataPersister';
 
+const { Title } = Typography;
+
 const styles: CSSinJS = {
   headerContainer: { display: 'flex', justifyContent: 'center' },
   summaryHeader: {
@@ -63,19 +65,21 @@ const Summary: React.FC<React.PropsWithChildren<Props>> = ({ userCart }) => {
         <img style={styles.image} src={folderImg} alt="Folder" />
       </div>
 
-      <h1 style={styles.summaryHeader}>Your Cart Summary</h1>
+      <Title level={3} style={styles.summaryHeader}>
+        Your Cart Summary
+      </Title>
 
       <Divider />
 
-      <h1>
+      <Title level={4}>
         Number of Datasets: <span style={styles.statistic}>{userCart.length}</span>
-      </h1>
-      <h1>
+      </Title>
+      <Title level={4}>
         Number of Files: <span style={styles.statistic}>{numFiles}</span>
-      </h1>
-      <h1>
+      </Title>
+      <Title level={4}>
         Total File Size: <span style={styles.statistic}>{totalDataSize}</span>
-      </h1>
+      </Title>
       <Divider />
 
       {taskItems.length > 0 && (

frontend/src/components/Facets/index.tsx

@@ -1,4 +1,4 @@
-import { Button, Tooltip } from 'antd';
+import { Button, Tooltip, Typography } from 'antd';
 import React, { useEffect } from 'react';
 import { useAsync } from 'react-async';
 import { fetchProjects, ResponseError } from '../../api';
@@ -43,6 +43,8 @@ const Facets: React.FC<React.PropsWithChildren<Props>> = ({
 }) => {
   const { data, error, isLoading } = useAsync(fetchProjects);
 
+  const { Title } = Typography;
+
   const [curProject, setCurProject] = React.useState<RawProject>();
 
   const handleSubmitProjectForm = (selectedProject: string): void => {
@@ -72,7 +74,7 @@ const Facets: React.FC<React.PropsWithChildren<Props>> = ({
       style={styles.form}
       className={leftSidebarTargets.leftSideBar.class()}
     >
-      <h3>Select a Project</h3>
+      <Title level={5}>Select a Project</Title>
       <ProjectForm
         activeSearchQuery={activeSearchQuery}
         projectsFetched={data}

frontend/src/components/NavBar/RightMenu.tsx

@@ -10,16 +10,18 @@ import {
 } from '@ant-design/icons';
 
 import { useKeycloak } from '@react-keycloak/web';
-import { Badge, Menu, MenuProps } from 'antd';
+import { Badge, Menu, MenuProps, Space, Switch } from 'antd';
 import { KeycloakTokenParsed } from 'keycloak-js';
 
 import React, { CSSProperties } from 'react';
 import { Link, useLocation } from 'react-router-dom';
+import { useRecoilState } from 'recoil';
 import { navBarTargets } from '../../common/reactJoyrideSteps';
 import Button from '../General/Button';
 import RightDrawer from '../Messaging/RightDrawer';
 
 import { AuthContext } from '../../contexts/AuthContext';
+import { isDarkModeAtom } from '../App/recoil/atoms';
 
 const menuItemStyling: CSSProperties = { margin: '8px' };
 
@@ -110,6 +112,8 @@ const RightMenu: React.FC<React.PropsWithChildren<Props>> = ({
     setShowNotices(false);
   };
 
+  const [isDarkMode, setIsDarkMode] = useRecoilState<boolean>(isDarkModeAtom);
+
   type MenuItem = Required<MenuProps>['items'][number];
 
   function getSignInItem(): MenuItem {
@@ -213,6 +217,21 @@ const RightMenu: React.FC<React.PropsWithChildren<Props>> = ({
       style: menuItemStyling,
       className: navBarTargets.helpBtn.class(),
     },
+    {
+      label: (
+        <Space>
+          <Switch
+            checkedChildren="Light"
+            unCheckedChildren="Dark"
+            onChange={(checked) => setIsDarkMode(!checked)}
+            defaultChecked={!isDarkMode}
+          ></Switch>
+          <span>Theme</span>
+        </Space>
+      ),
+      key: 'display-mode',
+      style: menuItemStyling,
+    },
   ];
 
   /**

frontend/src/components/NavBar/index.tsx

@@ -3,7 +3,7 @@ import { Drawer, Typography } from 'antd';
 import React from 'react';
 import { useAsync } from 'react-async';
 import { fetchProjects, ResponseError } from '../../api';
-import esgfLogo from '../../assets/img/esgf_logo.png';
+import esgfLogo from '../../assets/img/esgf.png';
 import { RawProject } from '../Facets/types';
 import Button from '../General/Button';
 import LeftMenu from './LeftMenu';
@@ -41,9 +41,10 @@ const NavBar: React.FC<React.PropsWithChildren<Props>> = ({
           >
             <img
               style={{
-                height: '42px',
+                height: '82px',
                 marginLeft: '-5px',
-                marginBottom: '-10px',
+                marginBottom: '-30px',
+                marginTop: '-20px',
               }}
               src={esgfLogo}
               alt="ESGF Federated Nodes"

frontend/src/components/NodeStatus/NodeSummary.tsx

@@ -1,18 +1,22 @@
 import { CheckCircleTwoTone, CloseCircleTwoTone } from '@ant-design/icons';
-import { Divider } from 'antd';
+import { Divider, Typography } from 'antd';
 import React from 'react';
 import nodeImg from '../../assets/img/nodes.svg';
 import { nodeTourTargets } from '../../common/reactJoyrideSteps';
 import { CSSinJS } from '../../common/types';
 import { NodeStatusArray } from './types';
 
+const { Title } = Typography;
 const styles: CSSinJS = {
   headerContainer: { display: 'flex', justifyContent: 'center' },
   summaryHeader: {
     fontWeight: 'bold',
     textAlign: 'center',
   },
-  image: { margin: '1em', width: '25%' },
+  image: {
+    margin: '1em',
+    width: '25%',
+  },
   statistic: { float: 'right' },
 };
 
@@ -39,27 +43,29 @@ const NodeSummary: React.FC<React.PropsWithChildren<Props>> = ({ nodeStatus }) =
         <img style={styles.image} src={nodeImg} alt="Node" />
       </div>
 
-      <h1 style={styles.summaryHeader}>Node Status Summary</h1>
+      <Title level={3} style={styles.summaryHeader}>
+        Node Status Summary
+      </Title>
 
       <Divider />
-      <h1>
+      <Title level={3}>
         Number of Nodes:{' '}
         <span style={styles.statistic} data-testid="numNodes">
           {numNodes}
         </span>
-      </h1>
-      <h1>
+      </Title>
+      <Title level={3}>
         Online <CheckCircleTwoTone twoToneColor="#52c41a" />:
         <span style={styles.statistic} data-testid="numOnline">
           {numOnline}
         </span>
-      </h1>
-      <h1>
+      </Title>
+      <Title level={3}>
         Offline <CloseCircleTwoTone twoToneColor="#eb2f96" />:
         <span style={styles.statistic} data-testid="numOffline">
           {numOffline}
         </span>
-      </h1>
+      </Title>
       <Divider />
     </div>
   );

frontend/src/index.css

@@ -12,5 +12,5 @@ code {
 }
 
 .site-collapse-custom-collapse .ant-collapse-content-box {
-  background-color: rgba(237, 240, 255, 0.75);
+  background-color: rgba(237, 240, 255, 0.25);
 }