Add UI styling improvements.

thehyve · Jun 5, 2024 · 260f0ae · 260f0ae
1 parent 267b559
commit 260f0ae
Show file tree

Hide file tree

Showing 14 changed files with 104 additions and 34 deletions.
diff --git a/projects/mercury/src/App.theme.js b/projects/mercury/src/App.theme.js
@@ -26,13 +26,33 @@ const globalTheme = createTheme({
         background: {
             default: '#eef0eb'
         }
+    },
+    shape: {
+        borderRadius: 15
     }
 });
 
+const scrollbarStyles = {
+    '&::-webkit-scrollbar': {
+        width: '0.3em',
+        height: '0.3em'
+    },
+    '&::-webkit-scrollbar-track': {
+        boxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)',
+        webkitBoxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)'
+    },
+    '&::-webkit-scrollbar-thumb': {
+        backgroundColor: globalTheme.palette.primary.light,
+        outline: `1px solid ${globalTheme.palette.primary.light}`,
+        borderRadius: 5
+    }
+};
+
 export default createTheme({
     ...globalTheme,
     typography: {
         fontFamily: ['Sora', 'Palanquin'].join(','),
+        fontSize: 13,
         button: {
             textTransform: 'none'
         }
@@ -126,7 +146,7 @@ export default createTheme({
                     '&:hover': {
                         background: globalTheme.palette.primary.light
                     },
-                    borderRadius: 15,
+                    borderRadius: globalTheme.shape.borderRadius,
                     borderColor: globalTheme.palette.primary.light,
                     paddingBottom: 0,
                     paddingTop: 0,
@@ -142,8 +162,7 @@ export default createTheme({
                 root: {
                     backgroundColor: globalTheme.palette.primary.dark,
                     marginBottom: 0,
-                    padding: 5,
-                    borderRadius: 15
+                    padding: 5
                 },
                 title: {
                     color: globalTheme.palette.primary.contrastText
@@ -159,7 +178,7 @@ export default createTheme({
         MuiCardContent: {
             styleOverrides: {
                 root: {
-                    borderRadius: 15
+                    borderRadius: globalTheme.shape.borderRadius
                 }
             }
         },
@@ -189,10 +208,22 @@ export default createTheme({
                 root: {
                     backgroundColor: globalTheme.palette.background.default,
                     border: '1px solid',
-                    borderColor: globalTheme.palette.primary.dark
-                },
-                rounded: {
-                    borderRadius: 15
+                    borderColor: globalTheme.palette.primary.dark,
+                    ...scrollbarStyles
+                }
+            }
+        },
+        MuiGrid: {
+            styleOverrides: {
+                root: {
+                    ...scrollbarStyles
+                }
+            }
+        },
+        MuiTableContainer: {
+            styleOverrides: {
+                root: {
+                    ...scrollbarStyles
                 }
             }
         }

diff --git a/projects/mercury/src/collections/CollectionDetails.js b/projects/mercury/src/collections/CollectionDetails.js
@@ -18,6 +18,7 @@ import {
 } from '@mui/material';
 import {CloudDownload, Folder, MoreVert} from '@mui/icons-material';
 import {useHistory, withRouter} from 'react-router-dom';
+import withStyles from '@mui/styles/withStyles';
 
 import CollectionEditor from './CollectionEditor';
 import type {Collection, Resource, Status} from './CollectionAPI';
@@ -75,6 +76,14 @@ type CollectionDetailsState = {
     anchorEl: any
 };
 
+const styles = theme => ({
+    card: {
+        '& .MuiCardHeader-root .MuiSvgIcon-root': {
+            color: theme.palette.primary.contrastText
+        }
+    }
+});
+
 class CollectionDetails extends React.Component<CollectionDetailsProps, CollectionDetailsState> {
     static defaultProps = {
         onChangeOwner: () => {},
@@ -351,7 +360,7 @@ class CollectionDetails extends React.Component<CollectionDetailsProps, Collecti
 
         return (
             <>
-                <Card>
+                <Card className={this.props.classes.card}>
                     <CardHeader
                         action={
                             menuItems &&
@@ -363,6 +372,7 @@ class CollectionDetails extends React.Component<CollectionDetailsProps, Collecti
                                             aria-owns={anchorEl ? 'long-menu' : undefined}
                                             aria-haspopup="true"
                                             onClick={this.handleMenuClick}
+                                            styles={{color: 'white'}}
                                         >
                                             <MoreVert />
                                         </IconButton>
@@ -540,4 +550,4 @@ const ContextualCollectionDetails = props => {
     );
 };
 
-export default withRouter(ContextualCollectionDetails);
+export default withRouter(withStyles(styles)(ContextualCollectionDetails));
diff --git a/projects/mercury/src/collections/CollectionInformationDrawer.js b/projects/mercury/src/collections/CollectionInformationDrawer.js
@@ -50,7 +50,10 @@ const useStyles = makeStyles(theme => ({
         flexDirection: 'column',
         outline: 'none',
         transitionBorder: '.24s',
-        easeInOut: true
+        easeInOut: true,
+        '& .MuiCardHeader-root .MuiSvgIcon-root': {
+            color: theme.palette.primary.contrastText
+        }
     },
     activeStyle: {
         borderColor: theme.palette.info.main,

diff --git a/projects/mercury/src/common/components/ColumnFilterInput.js b/projects/mercury/src/common/components/ColumnFilterInput.js
@@ -11,18 +11,21 @@ const useStyles = makeStyles(theme => ({
         position: 'relative',
         flex: 0.8,
         borderRadius: theme.shape.borderRadius,
-        backgroundColor: alpha(theme.palette.common.white, 0.15),
-        '&:hover': {
-            backgroundColor: alpha(theme.palette.common.white, 0.25)
-        },
         marginLeft: 0,
         width: '100%',
         [theme.breakpoints.up('sm')]: {
             width: 'auto'
         }
     },
     inputRoot: {
-        color: 'inherit',
+        borderRadius: theme.shape.borderRadius,
+        borderColor: theme.palette.primary.main,
+        backgroundColor: alpha(theme.palette.primary.main, 0.15),
+        color: theme.palette.primary.contrastText,
+        '&:hover': {
+            backgroundColor: alpha(theme.palette.primary.main, 0.25),
+            borderColor: theme.palette.primary.main
+        },
         width: '100%',
         fontSize: '0.9rem',
         minWidth: 180,

diff --git a/projects/mercury/src/external-storage/ExternalStorageInformationDrawer.js b/projects/mercury/src/external-storage/ExternalStorageInformationDrawer.js
@@ -27,7 +27,7 @@ import LinkedDataLink from '../metadata/common/LinkedDataLink';
 import type {DisplayProperty} from './UseExternalStorageMetadata';
 import useExternalStorageMetadata from './UseExternalStorageMetadata';
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles(theme => ({
     expandOpen: {
         transform: 'rotate(180deg)'
     },
@@ -38,7 +38,10 @@ const useStyles = makeStyles(() => ({
         flexDirection: 'column',
         outline: 'none',
         transitionBorder: '.24s',
-        easeInOut: true
+        easeInOut: true,
+        '& .MuiCardHeader-root .MuiSvgIcon-root': {
+            color: theme.palette.primary.contrastText
+        }
     }
 }));
 

diff --git a/projects/mercury/src/layout/Layout.js b/projects/mercury/src/layout/Layout.js
@@ -76,9 +76,8 @@ const Layout = ({classes, renderMenu, renderMain = () => {}}) => {
         return <></>;
     };
 
-    // The topbar is shown even if the user has no proper authorization
     return (
-        // The app itself consists of a topbar, a drawer and the actual page
+        // The app itself consists of a drawer and the actual page
         <>
             {renderAlert()}
             {renderMenu && (

diff --git a/projects/mercury/src/layout/MenuDrawer.styles.js b/projects/mercury/src/layout/MenuDrawer.styles.js
@@ -4,6 +4,7 @@ const styles = theme => ({
         whiteSpace: 'nowrap',
         width: 280,
         marginTop: '0',
+        border: 'none',
         overflow: 'hidden',
         transition: theme.transitions.create('width', {
             easing: theme.transitions.easing.sharp,
@@ -30,7 +31,8 @@ const styles = theme => ({
         justifyContent: 'flex-end',
         alignItems: 'center',
         padding: '0 8px',
-        marginTop: 20,
+        marginTop: 'auto',
+        marginBottom: 0,
         ...theme.mixins.toolbar
     },
     toolbarCollapsed: {
@@ -39,7 +41,8 @@ const styles = theme => ({
         height: 80,
         alignItems: 'center',
         padding: '0 8px',
-        marginTop: 20,
+        marginTop: 'auto',
+        marginBottom: 0,
         ...theme.mixins.toolbar
     },
     toolbarIcon: {

diff --git a/projects/mercury/src/metadata/views/MetadataViewFacetFactory.styles.js b/projects/mercury/src/metadata/views/MetadataViewFacetFactory.styles.js
@@ -10,6 +10,9 @@ const styles = theme => ({
         '& .MuiCardHeader-action': {
             alignSelf: 'auto',
             margin: 0
+        },
+        '& .MuiIconButton-root': {
+            color: theme.palette.primary.contrastText
         }
     },
     content: {

diff --git a/projects/mercury/src/metadata/views/MetadataViewFacets.js b/projects/mercury/src/metadata/views/MetadataViewFacets.js
@@ -29,7 +29,7 @@ const styles = theme => ({
         background: theme.palette.primary.main
     },
     facetsContainer: {
-        maxHeight: 'calc(100vh - 212px)',
+        maxHeight: 'calc(100vh - 100px)',
         overflowY: 'auto',
         paddingTop: 8
     },
@@ -48,7 +48,7 @@ const styles = theme => ({
     facet: {
         borderColor: theme.palette.primary.light,
         borderWidth: 1.8,
-        borderRadius: 15,
+        borderRadius: theme.shape.borderRadius,
         marginLeft: 8,
         marginTop: 6
     }

diff --git a/projects/mercury/src/metadata/views/MetadataViewInformationDrawer.js b/projects/mercury/src/metadata/views/MetadataViewInformationDrawer.js
@@ -10,7 +10,7 @@ import {LinkedDataEntityFormWithLinkedData} from '../common/LinkedDataEntityForm
 import type {MetadataViewEntityWithLinkedFiles} from './metadataViewUtils';
 import CopyButton from '../../common/components/CopyButton';
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles(theme => ({
     expandOpen: {
         transform: 'rotate(180deg)'
     },
@@ -21,7 +21,10 @@ const useStyles = makeStyles(() => ({
         flexDirection: 'column',
         outline: 'none',
         transitionBorder: '.24s',
-        easeInOut: true
+        easeInOut: true,
+        '& .MuiCardHeader-root .MuiSvgIcon-root': {
+            color: theme.palette.primary.contrastText
+        }
     },
     emptyLinkedFiles: {
         fontStyle: 'italic'

diff --git a/projects/mercury/src/metadata/views/MetadataViewTable.js b/projects/mercury/src/metadata/views/MetadataViewTable.js
@@ -31,6 +31,11 @@ type MetadataViewTableProperties = {
 };
 
 const useStyles = makeStyles(() => ({
+    headerRow: {
+        '& .MuiTableCell-root': {
+            borderRadius: 20
+        }
+    },
     headerCellContents: {
         verticalAlign: 'top',
         whiteSpace: 'nowrap'
@@ -206,8 +211,8 @@ export const MetadataViewTable = (props: MetadataViewTableProperties) => {
 
     return (
         <Table data-testid="results-table" size="small" stickyHeader={!loading}>
-            <TableHead>
-                <TableRow>
+            <TableHead className={classes.headerRow}>
+                <TableRow sx={{'&:last-child td, &:last-child th': {border: 0}}}>
                     <TableCell style={{padding: 0}}>
                         <Checkbox
                             id="checkAll"

diff --git a/projects/mercury/src/metadata/views/MetadataViewTableContainer.js b/projects/mercury/src/metadata/views/MetadataViewTableContainer.js
@@ -53,7 +53,7 @@ type MetadataViewTableContainerProperties = {
     classes: any
 };
 
-const styles = () => ({
+const styles = theme => ({
     footerButtonDiv: {
         display: 'flex',
         padding: 0,
@@ -74,7 +74,7 @@ const styles = () => ({
         overflowY: 'auto',
         overflowX: 'auto',
         '& .MuiTableCell-stickyHeader': {
-            backgroundColor: 'white'
+            backgroundColor: theme.palette.background.default
         }
     },
     tableFooter: {

diff --git a/projects/mercury/src/metadata/views/MetadataViewTabs.js b/projects/mercury/src/metadata/views/MetadataViewTabs.js
@@ -22,13 +22,17 @@ type MetadataViewTabsProperties = {
     classes: any
 };
 
-const styles = () => ({
+const styles = theme => ({
     tabsPanel: {
-        paddingRight: 70
+        paddingRight: 70,
+        '& .MuiButtonBase-root': {
+            borderRadius: 30
+        }
     },
     tab: {
         '& .MuiBox-root': {
-            padding: 0
+            padding: 0,
+            borderRadius: theme.shape.borderRadius
         }
     }
 });

diff --git a/projects/mercury/src/permissions/PermissionCard.js b/projects/mercury/src/permissions/PermissionCard.js
@@ -50,7 +50,10 @@ const styles = theme => ({
         transform: 'rotate(180deg)'
     },
     permissionsCard: {
-        marginTop: 10
+        marginTop: 10,
+        '& .MuiCardHeader-root .MuiSvgIcon-root': {
+            color: theme.palette.primary.contrastText
+        }
     },
     avatar: {
         width: 20,