Add app styling improvements.

thehyve · Jun 4, 2024 · 267b559 · 267b559
1 parent ec76836
commit 267b559
Show file tree

Hide file tree

Showing 16 changed files with 166 additions and 56 deletions.
diff --git a/projects/mercury/src/App.theme.js b/projects/mercury/src/App.theme.js
@@ -13,18 +13,26 @@ const globalTheme = createTheme({
         primary: {
             main: COLORS.fsBlueMedium,
             light: COLORS.fsBlueLight,
-            dark: COLORS.fsBlueDark
+            dark: COLORS.fsBlueDark,
+            contrastText: 'white'
+        },
+        secondary: {
+            main: '#758bfd'
+        },
+        error: pink,
+        success: {
+            main: '#08a045'
         },
-        secondary: pink,
         background: {
-            default: '#d9d9d9'
+            default: '#eef0eb'
         }
     }
 });
 
 export default createTheme({
     ...globalTheme,
     typography: {
+        fontFamily: ['Sora', 'Palanquin'].join(','),
         button: {
             textTransform: 'none'
         }
@@ -115,20 +123,43 @@ export default createTheme({
             styleOverrides: {
                 root: {
                     background: globalTheme.palette.primary.dark,
+                    '&:hover': {
+                        background: globalTheme.palette.primary.light
+                    },
                     borderRadius: 15,
                     borderColor: globalTheme.palette.primary.light,
                     paddingBottom: 0,
                     paddingTop: 0,
                     minHeight: 35
+                },
+                text: {
+                    color: globalTheme.palette.primary.contrastText
                 }
             }
         },
         MuiCardHeader: {
             styleOverrides: {
                 root: {
-                    backgroundColor: 'whitesmoke',
+                    backgroundColor: globalTheme.palette.primary.dark,
                     marginBottom: 0,
-                    padding: 5
+                    padding: 5,
+                    borderRadius: 15
+                },
+                title: {
+                    color: globalTheme.palette.primary.contrastText
+                },
+                avatar: {
+                    color: globalTheme.palette.primary.contrastText
+                },
+                subheader: {
+                    color: globalTheme.palette.primary.contrastText
+                }
+            }
+        },
+        MuiCardContent: {
+            styleOverrides: {
+                root: {
+                    borderRadius: 15
                 }
             }
         },
@@ -157,15 +188,10 @@ export default createTheme({
             styleOverrides: {
                 root: {
                     backgroundColor: globalTheme.palette.background.default,
-                    // borderRadius: 15,
                     border: '1px solid',
                     borderColor: globalTheme.palette.primary.dark
-                }
-            }
-        },
-        MuiBox: {
-            styleOverrides: {
-                root: {
+                },
+                rounded: {
                     borderRadius: 15
                 }
             }

diff --git a/projects/mercury/src/collections/CollectionsPage.js b/projects/mercury/src/collections/CollectionsPage.js
@@ -98,7 +98,7 @@ const CollectionsPage = (props: CollectionsPageProperties) => {
                         </Grid>
                         {showMetadataSearchButton && (
                             <Grid item container xs={4} justifyContent="flex-end">
-                                <Grid item>
+                                <Grid item className={classes.metadataButton}>
                                     <Button variant="text" color="primary" href={getMetadataViewsPath(RESOURCES_VIEW)}>
                                         Collection metadata search
                                     </Button>

diff --git a/projects/mercury/src/collections/CollectionsPage.styles.js b/projects/mercury/src/collections/CollectionsPage.styles.js
@@ -6,9 +6,13 @@ const styles = () => ({
         width: consts.MAIN_CONTENT_WIDTH
     },
     topBarSwitch: {
+        paddingLeft: 8,
         textAlign: 'right',
         whiteSpace: 'nowrap'
     },
+    metadataButton: {
+        paddingRight: 8
+    },
     centralPanel: {
         width: consts.MAIN_CONTENT_WIDTH,
         maxHeight: consts.MAIN_CONTENT_MAX_HEIGHT

diff --git a/projects/mercury/src/dashboard/DomainInfo.styles.js b/projects/mercury/src/dashboard/DomainInfo.styles.js
@@ -4,6 +4,7 @@ const styles = theme => ({
         height: '100px',
         borderStyle: 'solid',
         borderColor: theme.palette.primary.light,
+        background: theme.palette.primary.dark,
         borderWidth: 2,
         textAlign: 'center'
     },
@@ -25,7 +26,7 @@ const styles = theme => ({
         width: 'inherit'
     },
     domainText: {
-        color: theme.palette.grey[700]
+        color: theme.palette.primary.contrastText
     },
     link: {
         textDecoration: 'none'

diff --git a/projects/mercury/src/file/FilesPage.js b/projects/mercury/src/file/FilesPage.js
@@ -150,7 +150,7 @@ export const FilesPage = (props: FilesPageProperties) => {
                         </Grid>
                         {showMetadataSearchButton && (
                             <Grid item container xs={4} justifyContent="flex-end">
-                                <Grid item>
+                                <Grid item className={classes.metadataButton}>
                                     <Button
                                         variant="text"
                                         color="primary"

diff --git a/projects/mercury/src/file/FilesPage.styles.js b/projects/mercury/src/file/FilesPage.styles.js
@@ -10,9 +10,13 @@ const styles = () => ({
         width: consts.MAIN_CONTENT_WIDTH
     },
     topBarSwitch: {
+        paddingLeft: 8,
         textAlign: 'right',
         whiteSpace: 'nowrap'
     },
+    metadataButton: {
+        paddingRight: 8
+    },
     centralPanel: {
         width: consts.MAIN_CONTENT_WIDTH,
         maxHeight: consts.MAIN_CONTENT_MAX_HEIGHT

diff --git a/projects/mercury/src/index.css b/projects/mercury/src/index.css
@@ -1,3 +1,6 @@
+@import url('https://fonts.googleapis.com/css?family=Sora&display=swap');
+@import url('https://fonts.googleapis.com/css?family=Palanquin&display=swap');
+
 body {
     margin: 0;
     padding: 0;

diff --git a/projects/mercury/src/layout/MainMenu.js b/projects/mercury/src/layout/MainMenu.js
@@ -14,8 +14,9 @@ import ExternalMetadataSourceContext from '../metadata/metadata-sources/External
 import {getExternalStoragePathPrefix} from '../external-storage/externalStorageUtils';
 import {getExternalMetadataSourcePathPrefix} from '../metadata/external-views/externalMetadataSourceUtils';
 import InternalMetadataSourceContext from '../metadata/metadata-sources/InternalMetadataSourceContext';
+import {COLORS} from '../App.theme';
 
-const styles = {
+const styles = theme => ({
     buttonStack: {
         paddingLeft: 20,
         paddingRight: 20
@@ -28,7 +29,7 @@ const styles = {
         paddingTop: 15,
         paddingBottom: 15,
         textAlign: 'center',
-        color: 'white',
+        color: theme.palette.primary.contrastText,
         height: 40
     },
     mainMenuButtonSmall: {
@@ -40,6 +41,9 @@ const styles = {
             marginLeft: 0
         }
     },
+    mainMenuButtonSelected: {
+        backgroundColor: COLORS.fsBlueLightTransp25
+    },
     imageIcon: {
         display: 'flex',
         height: 'inherit',
@@ -48,7 +52,7 @@ const styles = {
     iconRoot: {
         textAlign: 'center'
     }
-};
+});
 const MainMenu = ({open, classes}) => {
     const {pathname} = window.location;
     const {services} = useContext(ServicesContext);
@@ -65,33 +69,42 @@ const MainMenu = ({open, classes}) => {
                 <Button
                     variant="outlined"
                     size="small"
-                    className={classNames(classes.mainMenuButton, !open && classes.mainMenuButtonSmall)}
+                    className={classNames(
+                        classes.mainMenuButton,
+                        !open && classes.mainMenuButtonSmall,
+                        pathname.startsWith('/dashboard') && classes.mainMenuButtonSelected
+                    )}
                     component={NavLink}
                     to="/dashboard"
-                    selected={pathname.startsWith('/dashboard')}
                     startIcon={<HomeIcon />}
                 >
                     {open && 'Home'}
                 </Button>
                 <Button
                     variant="outlined"
                     size="small"
-                    className={classNames(classes.mainMenuButton, !open && classes.mainMenuButtonSmall)}
+                    className={classNames(
+                        classes.mainMenuButton,
+                        !open && classes.mainMenuButtonSmall,
+                        pathname.startsWith('/workspace') && classes.mainMenuButtonSelected
+                    )}
                     component={NavLink}
                     to="/workspaces"
-                    selected={pathname.startsWith('/workspace')}
                     startIcon={<Widgets />}
                 >
                     {open ? 'Workspaces' : null}
                 </Button>
                 <Button
                     variant="outlined"
                     size="small"
-                    className={classNames(classes.mainMenuButton, !open && classes.mainMenuButtonSmall)}
+                    className={classNames(
+                        classes.mainMenuButton,
+                        !open && classes.mainMenuButtonSmall,
+                        pathname.startsWith('/collections') && classes.mainMenuButtonSelected
+                    )}
                     key="collections"
                     component={NavLink}
                     to="/collections"
-                    selected={pathname.startsWith('/collections')}
                     startIcon={<Folder />}
                 >
                     {open && 'Collections'}
@@ -101,11 +114,15 @@ const MainMenu = ({open, classes}) => {
                         <Button
                             variant="outlined"
                             size="small"
-                            className={classNames(classes.mainMenuButton, !open && classes.mainMenuButtonSmall)}
+                            className={classNames(
+                                classes.mainMenuButton,
+                                !open && classes.mainMenuButtonSmall,
+                                pathname.startsWith(getExternalStoragePathPrefix(storage.name)) &&
+                                    classes.mainMenuButtonSelected
+                            )}
                             key={getExternalStoragePathPrefix(storage.name)}
                             component={NavLink}
                             to={getExternalStoragePathPrefix(storage.name)}
-                            selected={pathname.startsWith(getExternalStoragePathPrefix(storage.name))}
                             startIcon={<FolderSpecial />}
                         >
                             {open && storage.label}
@@ -115,11 +132,14 @@ const MainMenu = ({open, classes}) => {
                     <Button
                         variant="outlined"
                         size="small"
-                        className={classNames(classes.mainMenuButton, !open && classes.mainMenuButtonSmall)}
+                        className={classNames(
+                            classes.mainMenuButton,
+                            !open && classes.mainMenuButtonSmall,
+                            pathname.startsWith('/metadata-views') && classes.mainMenuButtonSelected
+                        )}
                         key="metadata-views"
                         component={NavLink}
                         to="/metadata-views"
-                        selected={pathname.startsWith('/metadata-views')}
                         startIcon={
                             internalMetadataIcon ? (
                                 <Icon classes={{root: classes.iconRoot}}>
@@ -139,11 +159,15 @@ const MainMenu = ({open, classes}) => {
                         <Button
                             variant="outlined"
                             size="small"
-                            className={classNames(classes.mainMenuButton, !open && classes.mainMenuButtonSmall)}
+                            className={classNames(
+                                classes.mainMenuButton,
+                                !open && classes.mainMenuButtonSmall,
+                                pathname.startsWith(getExternalMetadataSourcePathPrefix(source.name)) &&
+                                    classes.mainMenuButtonSelected
+                            )}
                             key={getExternalMetadataSourcePathPrefix(source.name)}
                             component={NavLink}
                             to={getExternalMetadataSourcePathPrefix(source.name)}
-                            selected={pathname.startsWith(getExternalMetadataSourcePathPrefix(source.name))}
                             startIcon={
                                 source.icon ? (
                                     <Icon classes={{root: classes.iconRoot}}>
@@ -165,11 +189,14 @@ const MainMenu = ({open, classes}) => {
                     <Button
                         variant="outlined"
                         size="small"
-                        className={classNames(classes.mainMenuButton, !open && classes.mainMenuButtonSmall)}
+                        className={classNames(
+                            classes.mainMenuButton,
+                            !open && classes.mainMenuButtonSmall,
+                            pathname.startsWith('/users') && classes.mainMenuButtonSelected
+                        )}
                         key="users"
                         component={NavLink}
                         to="/users"
-                        selected={pathname.startsWith('/users')}
                         startIcon={<VerifiedUser />}
                     >
                         {open && 'Users'}

diff --git a/projects/mercury/src/layout/MenuDrawer.js b/projects/mercury/src/layout/MenuDrawer.js
@@ -7,6 +7,7 @@ import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 
 import styles from './MenuDrawer.styles';
+import UserMenu from './UserMenu';
 
 const MenuDrawer = ({open, renderMenu, toggleMenuExpansion, onMouseEnter, onMouseLeave, classes}) => (
     <Drawer
@@ -25,7 +26,8 @@ const MenuDrawer = ({open, renderMenu, toggleMenuExpansion, onMouseEnter, onMous
         <div onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
             {renderMenu(open)}
         </div>
-        <div className={classes.toolbar}>
+        <div className={open ? classes.toolbar : classes.toolbarCollapsed}>
+            <UserMenu menuOpen={open} />
             <IconButton onClick={toggleMenuExpansion} size="medium" className={classes.toolbarIcon}>
                 {open ? <ChevronLeftIcon /> : <ChevronRightIcon />}
             </IconButton>

diff --git a/projects/mercury/src/layout/MenuDrawer.styles.js b/projects/mercury/src/layout/MenuDrawer.styles.js
@@ -27,13 +27,24 @@ const styles = theme => ({
     },
     toolbar: {
         display: 'flex',
-        alignItems: 'center',
         justifyContent: 'flex-end',
+        alignItems: 'center',
+        padding: '0 8px',
+        marginTop: 20,
+        ...theme.mixins.toolbar
+    },
+    toolbarCollapsed: {
+        display: 'flex',
+        flexDirection: 'column',
+        height: 80,
+        alignItems: 'center',
         padding: '0 8px',
+        marginTop: 20,
         ...theme.mixins.toolbar
     },
     toolbarIcon: {
-        color: 'white'
+        color: 'white',
+        marginLeft: 'auto'
     },
     mainLogo: {
         flexGrow: 1,

diff --git a/projects/mercury/src/layout/TopBar.js b/projects/mercury/src/layout/TopBar.js
@@ -4,8 +4,6 @@ import {AppBar, Toolbar} from '@mui/material';
 
 import withStyles from '@mui/styles/withStyles';
 
-import UserMenu from './UserMenu';
-
 const styles = theme => ({
     root: {
         zIndex: theme.zIndex.drawer + 1
@@ -24,7 +22,6 @@ const TopBar = ({classes, children}) => (
                 <img src="/images/icon_white.png" alt="Fairspace" height="60" />
             </div>
             {children}
-            <UserMenu />
         </Toolbar>
     </AppBar>
 );