Change main menu, header and footer.

thehyve · Jun 3, 2024 · ec76836 · ec76836
1 parent aaaf771
commit ec76836
Show file tree

Hide file tree

Showing 13 changed files with 215 additions and 137 deletions.
diff --git a/projects/mercury/public/public/images/icon_white.png b/projects/mercury/public/public/images/icon_white.png
diff --git a/projects/mercury/public/public/images/logo_white.png b/projects/mercury/public/public/images/logo_white.png
diff --git a/projects/mercury/src/App.theme.js b/projects/mercury/src/App.theme.js
@@ -1,10 +1,33 @@
 import {createTheme} from '@mui/material';
-import {blue, indigo, pink} from '@mui/material/colors';
+import {pink} from '@mui/material/colors';
 
-export default createTheme({
+export const COLORS = {
+    fsBlueLight: 'rgba(106,134,232,1)',
+    fsBlueLightTransp25: 'rgba(106,134,232,0.25)',
+    fsBlueMedium: 'rgba(63,102,177,1)',
+    fsBlueDark: 'rgba(7, 59, 82, 1)'
+};
+
+const globalTheme = createTheme({
     palette: {
-        primary: process.env.NODE_ENV === 'development' ? blue : indigo,
-        secondary: pink
+        primary: {
+            main: COLORS.fsBlueMedium,
+            light: COLORS.fsBlueLight,
+            dark: COLORS.fsBlueDark
+        },
+        secondary: pink,
+        background: {
+            default: '#d9d9d9'
+        }
+    }
+});
+
+export default createTheme({
+    ...globalTheme,
+    typography: {
+        button: {
+            textTransform: 'none'
+        }
     },
     components: {
         MuiMenu: {
@@ -88,6 +111,18 @@ export default createTheme({
                 }
             }
         },
+        MuiButton: {
+            styleOverrides: {
+                root: {
+                    background: globalTheme.palette.primary.dark,
+                    borderRadius: 15,
+                    borderColor: globalTheme.palette.primary.light,
+                    paddingBottom: 0,
+                    paddingTop: 0,
+                    minHeight: 35
+                }
+            }
+        },
         MuiCardHeader: {
             styleOverrides: {
                 root: {
@@ -117,6 +152,23 @@ export default createTheme({
                     }
                 }
             }
+        },
+        MuiPaper: {
+            styleOverrides: {
+                root: {
+                    backgroundColor: globalTheme.palette.background.default,
+                    // borderRadius: 15,
+                    border: '1px solid',
+                    borderColor: globalTheme.palette.primary.dark
+                }
+            }
+        },
+        MuiBox: {
+            styleOverrides: {
+                root: {
+                    borderRadius: 15
+                }
+            }
         }
     }
 });
diff --git a/projects/mercury/src/layout/Layout.js b/projects/mercury/src/layout/Layout.js
@@ -3,11 +3,8 @@ import PropTypes from 'prop-types';
 import withStyles from '@mui/styles/withStyles';
 import Link from '@mui/material/Link';
 import styles from './Layout.styles';
-import Footer from './Footer';
-import TopBar from './TopBar';
 import MenuDrawer from './MenuDrawer';
 import LoadingInlay from '../common/components/LoadingInlay';
-import versionInfo from '../common/VersionInfo';
 import UserContext from '../users/UserContext';
 import StatusContext, {VALID_USER_SESSION} from '../status/StatusContext';
 import {SERVER_STATUS_UP} from '../status/StatusAPI';
@@ -16,12 +13,7 @@ import StatusAlert from '../status/StatusAlert';
 const LOCAL_STORAGE_MENU_KEY = 'FAIRSPACE_MENU_EXPANDED';
 const LEFT_MENU_EXPANSION_DELAY = 500;
 
-const Layout = ({
-    classes,
-    renderMenu,
-    renderMain = () => {},
-    renderTopbar = () => <TopBar title={versionInfo.name} />
-}) => {
+const Layout = ({classes, renderMenu, renderMain = () => {}}) => {
     const [menuExpanded, setMenuExpanded] = useState(window.localStorage.getItem(LOCAL_STORAGE_MENU_KEY) !== 'false');
     const [menuOpenDueToHover, setMenuOpenDueToHover] = useState(false);
     const [timeoutId, setTimeoutId] = useState();
@@ -88,7 +80,6 @@ const Layout = ({
     return (
         // The app itself consists of a topbar, a drawer and the actual page
         <>
-            {renderTopbar()}
             {renderAlert()}
             {renderMenu && (
                 <MenuDrawer
@@ -99,18 +90,16 @@ const Layout = ({
                     onMouseEnter={handleMouseEnter}
                 />
             )}
-            <main style={{marginLeft: menuExpanded ? 175 : 0}} className={classes.main}>
+            <main style={{marginLeft: menuExpanded ? 220 : 0}} className={classes.main}>
                 {renderMain()}
             </main>
-            <Footer />
         </>
     );
 };
 
 Layout.propTypes = {
     renderMenu: PropTypes.func,
-    renderMain: PropTypes.func,
-    renderTopbar: PropTypes.func
+    renderMain: PropTypes.func
 };
 
 export default withStyles(styles)(Layout);
diff --git a/projects/mercury/src/layout/Layout.styles.js b/projects/mercury/src/layout/Layout.styles.js
@@ -5,7 +5,7 @@ const styles = theme => ({
         minWidth: 0, // So the Typography noWrap works
         overflowY: 'scroll',
         overflowX: 'hidden',
-        height: 'calc(100vh - 115px)'
+        height: '100vh'
     }
 });