From 260f0aec6f916227566d394e7e21ff918c1b2245 Mon Sep 17 00:00:00 2001 From: ewelinagr Date: Wed, 5 Jun 2024 16:39:12 +0200 Subject: [PATCH] Add UI styling improvements. --- projects/mercury/src/App.theme.js | 47 +++++++++++++++---- .../src/collections/CollectionDetails.js | 14 +++++- .../CollectionInformationDrawer.js | 5 +- .../common/components/ColumnFilterInput.js | 13 +++-- .../ExternalStorageInformationDrawer.js | 7 ++- projects/mercury/src/layout/Layout.js | 3 +- .../mercury/src/layout/MenuDrawer.styles.js | 7 ++- .../views/MetadataViewFacetFactory.styles.js | 3 ++ .../src/metadata/views/MetadataViewFacets.js | 4 +- .../views/MetadataViewInformationDrawer.js | 7 ++- .../src/metadata/views/MetadataViewTable.js | 9 +++- .../views/MetadataViewTableContainer.js | 4 +- .../src/metadata/views/MetadataViewTabs.js | 10 ++-- .../mercury/src/permissions/PermissionCard.js | 5 +- 14 files changed, 104 insertions(+), 34 deletions(-) diff --git a/projects/mercury/src/App.theme.js b/projects/mercury/src/App.theme.js index 1f4d4b25b..b2556b3dd 100644 --- 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 index 23ecf5d6f..56c2017d7 100644 --- 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 { static defaultProps = { onChangeOwner: () => {}, @@ -351,7 +360,7 @@ class CollectionDetails extends React.Component - + @@ -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 index 077ea2bce..111d12169 100644 --- 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 index 9ffd4cbb3..34c63d070 100644 --- a/projects/mercury/src/common/components/ColumnFilterInput.js +++ b/projects/mercury/src/common/components/ColumnFilterInput.js @@ -11,10 +11,6 @@ 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')]: { @@ -22,7 +18,14 @@ const useStyles = makeStyles(theme => ({ } }, 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 index 9c5097198..cf4748a52 100644 --- 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 index 5d4807065..7b9734225 100644 --- 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 index db63068c3..7b2d058b3 100644 --- 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 index 3ef7905c7..157ea4456 100644 --- 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 index 8b8e024f2..15181201f 100644 --- 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 index 984132590..bd79309f1 100644 --- 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 index 99ac875e3..dd241dcc8 100644 --- 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 ( - - + + ({ +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 index 39929db44..9b5026b31 100644 --- 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 index 6d508d585..15a5c38f9 100644 --- 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,