Merge pull request #1529 from thehyve/ui-redesign

Add initial version of a new Fairspace 2.0 user interface
thehyve · Jul 24, 2024 · f4f471e · f4f471e
2 parents d1350dd + 824ae93
commit f4f471e
Show file tree

Hide file tree

Showing 57 changed files with 859 additions and 383 deletions.
diff --git a/VERSION b/VERSION
@@ -1 +1 @@
-1.0.1
+2.0.0
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,90 @@
 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,
+            contrastText: 'white'
+        },
+        secondary: {
+            main: '#ffdb56',
+            contrastText: 'black'
+        },
+        error: pink,
+        success: {
+            main: '#08a045'
+        },
+        background: {
+            default: '#ECEDF0'
+        },
+        text: {
+            primary: COLORS.fsBlueDark,
+            secondary: COLORS.fsBlueMedium
+        },
+        mellow: {
+            light: '#cfd8dc',
+            main: '#b0bec5',
+            dark: '#37474f',
+            contrastText: '#47008F'
+        }
+    },
+    shape: {
+        borderRadius: 15
+    }
+});
+
+export const scrollbarStyles = {
+    '&::-webkit-scrollbar': {
+        width: '0.5em',
+        height: '0.5em'
+    },
+    '&::-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)',
+        margin: 2
+    },
+    '&::-webkit-scrollbar-thumb': {
+        backgroundColor: globalTheme.palette.mellow.light,
+        borderRadius: 5,
+        margin: 1
+    },
+    '&::-webkit-scrollbar-thumb:hover': {
+        backgroundColor: globalTheme.palette.mellow.main
+    }
+};
+
+export default createTheme({
+    ...globalTheme,
+    typography: {
+        fontFamily: 'Poppins',
+        fontSize: 13,
+        button: {
+            textTransform: 'none'
+        },
+        h3: {
+            fontSize: '1.4rem',
+            fontWeight: 600
+        },
+        h4: {
+            fontSize: '1.3rem',
+            fontWeight: 600
+        },
+        h5: {
+            fontSize: '1rem'
+        },
+        body2: {
+            fontSize: '0.8rem'
+        }
     },
     components: {
         MuiMenu: {
@@ -26,7 +106,8 @@ export default createTheme({
         MuiDivider: {
             styleOverrides: {
                 root: {
-                    margin: 0
+                    margin: 0,
+                    borderColor: globalTheme.palette.mellow.main
                 },
                 margin: 0
             }
@@ -88,12 +169,51 @@ export default createTheme({
                 }
             }
         },
+        MuiButton: {
+            styleOverrides: {
+                root: {
+                    background: globalTheme.palette.primary.dark,
+                    '&:hover': {
+                        background: globalTheme.palette.primary.light
+                    },
+                    '&:disabled': {
+                        opacity: 0.4,
+                        color: globalTheme.palette.primary.contrastText,
+                        background: globalTheme.palette.mellow.main
+                    },
+                    borderRadius: globalTheme.shape.borderRadius,
+                    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.main,
                     marginBottom: 0,
                     padding: 5
+                },
+                title: {
+                    color: globalTheme.palette.primary.contrastText
+                },
+                avatar: {
+                    color: globalTheme.palette.primary.contrastText
+                },
+                subheader: {
+                    color: globalTheme.palette.primary.contrastText
+                }
+            }
+        },
+        MuiCardContent: {
+            styleOverrides: {
+                root: {
+                    borderRadius: globalTheme.shape.borderRadius
                 }
             }
         },
@@ -117,6 +237,45 @@ export default createTheme({
                     }
                 }
             }
+        },
+        MuiPaper: {
+            styleOverrides: {
+                root: {
+                    backgroundColor: globalTheme.palette.background.default,
+                    border: '1px solid',
+                    borderColor: globalTheme.palette.primary.dark,
+                    ...scrollbarStyles
+                }
+            }
+        },
+        MuiGrid: {
+            styleOverrides: {
+                root: {
+                    ...scrollbarStyles
+                }
+            }
+        },
+        MuiTableContainer: {
+            styleOverrides: {
+                root: {
+                    ...scrollbarStyles
+                }
+            }
+        },
+        MuiTablePagination: {
+            styleOverrides: {
+                root: {
+                    ...scrollbarStyles
+                }
+            }
+        },
+        MuiTableCell: {
+            styleOverrides: {
+                root: {
+                    borderBottom: '1px solid',
+                    borderColor: globalTheme.palette.mellow.main
+                }
+            }
         }
     }
 });
diff --git a/projects/mercury/src/collections/CollectionDetails.js b/projects/mercury/src/collections/CollectionDetails.js
@@ -4,6 +4,7 @@ import {
     Card,
     CardContent,
     CardHeader,
+    Divider,
     FormControl,
     FormGroup,
     FormLabel,
@@ -18,6 +19,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 +77,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: () => {},
@@ -265,6 +275,7 @@ class CollectionDetails extends React.Component<CollectionDetailsProps, Collecti
 
     renderDeleted = (dateDeleted: string, deletedBy: User) =>
         dateDeleted && [
+            <Divider component="li" />,
             <ListItem key="dateDeleted" disableGutters>
                 <FormControl>
                     <FormLabel>Deleted</FormLabel>
@@ -273,6 +284,7 @@ class CollectionDetails extends React.Component<CollectionDetailsProps, Collecti
                     </FormGroup>
                 </FormControl>
             </ListItem>,
+            <Divider component="li" />,
             <ListItem key="deletedBy" disableGutters>
                 <FormControl>
                     <FormLabel>Deleted by</FormLabel>
@@ -351,7 +363,7 @@ class CollectionDetails extends React.Component<CollectionDetailsProps, Collecti
 
         return (
             <>
-                <Card>
+                <Card className={this.props.classes.card}>
                     <CardHeader
                         action={
                             menuItems &&
@@ -363,6 +375,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>
@@ -388,7 +401,10 @@ class CollectionDetails extends React.Component<CollectionDetailsProps, Collecti
                             {collection.description}
                         </Typography>
                         <List>
-                            <ListItem disableGutters>{this.renderCollectionOwner(ownerWorkspace)}</ListItem>
+                            <ListItem disableGutters divider>
+                                {this.renderCollectionOwner(ownerWorkspace)}
+                            </ListItem>
+                            <Divider component="li" />
                             <ListItem disableGutters>{this.renderCollectionStatus()}</ListItem>
                             {this.renderDeleted(collection.dateDeleted, deletedBy)}
                         </List>
@@ -540,4 +556,4 @@ const ContextualCollectionDetails = props => {
     );
 };
 
-export default withRouter(ContextualCollectionDetails);
+export default withRouter(withStyles(styles)(ContextualCollectionDetails));
diff --git a/projects/mercury/src/collections/CollectionEditor.js b/projects/mercury/src/collections/CollectionEditor.js
@@ -45,7 +45,7 @@ export const formatPrefix = (prefix: string) => (prefix ? `[${prefix.replace(/[/
 
 const styles = theme => ({
     textHelperBasic: {
-        color: theme.palette.grey['600']
+        color: theme.palette.mellow.main
     },
     textHelperWarning: {
         color: theme.palette.warning.dark

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,
@@ -222,6 +225,7 @@ const MetadataCard = props => {
                                                 {'Download '}
                                                 <Link
                                                     download="metadata.csv"
+                                                    color="secondary"
                                                     href={
                                                         'data:text/csv;charset=utf-8,' +
                                                         encodeURIComponent(fileTemplate)

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>
@@ -156,7 +156,7 @@ const CollectionsPage = (props: CollectionsPageProperties) => {
                         ' Your pending changes will be lost.'
                     }
                     agreeButtonText="Navigate"
-                    disagreeButtonText="back to form"
+                    disagreeButtonText="Back to form"
                     onAgree={handleConfirmSwitchCollection}
                     onDisagree={handleCancelSwitchCollection}
                 />

diff --git a/projects/mercury/src/collections/CollectionsPage.styles.js b/projects/mercury/src/collections/CollectionsPage.styles.js
@@ -6,12 +6,17 @@ 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
+        maxHeight: consts.MAIN_CONTENT_MAX_HEIGHT,
+        paddingLeft: 0
     },
     sidePanel: {
         width: consts.SIDE_PANEL_WIDTH

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/common/components/LoadingOverlayWrapper.js b/projects/mercury/src/common/components/LoadingOverlayWrapper.js
@@ -23,12 +23,13 @@ const useStyles = makeStyles(theme => ({
         opacity: 0.4
     },
     backdrop: {
-        backgroundColor: '#747474',
+        backgroundColor: theme.palette.mellow.dark,
         position: 'absolute',
         top: 0,
         left: 0,
         width: '100%',
-        height: '100%'
+        height: '100%',
+        borderRadius: theme.shape.borderRadius
     }
 }));