Improve styling

thehyve · Jul 23, 2024 · a3937a3 · a3937a3
1 parent f0d635c
commit a3937a3
Show file tree

Hide file tree

Showing 14 changed files with 24 additions and 17 deletions.
diff --git a/projects/mercury/src/App.theme.js b/projects/mercury/src/App.theme.js
@@ -17,15 +17,15 @@ const globalTheme = createTheme({
             contrastText: 'white'
         },
         secondary: {
-            main: '#fd759e',
-            contrastText: 'white'
+            main: '#ffdb56',
+            contrastText: 'black'
         },
         error: pink,
         success: {
             main: '#08a045'
         },
         background: {
-            default: '#eef0eb'
+            default: '#ECEDF0'
         },
         text: {
             primary: COLORS.fsBlueDark,
@@ -66,7 +66,7 @@ export const scrollbarStyles = {
 export default createTheme({
     ...globalTheme,
     typography: {
-        fontFamily: ['Sora', 'Palanquin'].join(','),
+        fontFamily: 'Poppins',
         fontSize: 13,
         button: {
             textTransform: 'none'

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
@@ -225,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/constants.js b/projects/mercury/src/constants.js
@@ -12,7 +12,7 @@ export const LEFT_MENU_EXPANSION_DELAY = 500;
 export const MAIN_CONTENT_WIDTH = '65%';
 export const SIDE_PANEL_WIDTH = '35%';
 export const MAIN_CONTENT_MAX_HEIGHT = 'calc(100vh - 156px)';
-export const LEFT_PANEL_MAX_WIDTH = 230;
+export const LEFT_PANEL_MAX_WIDTH = 305;
 export const COLLECTIONS_PATH = 'collections';
 export const METADATA_PATH = '/metadata';
 export const CROSS_WORKSPACES_SEARCH_PATH = '/workspaces/_all';

diff --git a/projects/mercury/src/dashboard/DashboardPage.js b/projects/mercury/src/dashboard/DashboardPage.js
@@ -90,7 +90,7 @@ const DashboardPage = props => {
                             </Typography>
                             <Typography variant="body2" paragraph className={classes.footer} align="center">
                                 {/* eslint-disable-next-line prettier/prettier */}
-                                {"Created by "}
+                                {'Created by '}
                                 <Link className={classes.link} href={THE_HYVE_URL}>
                                     The Hyve
                                 </Link>

diff --git a/projects/mercury/src/dashboard/DomainInfo.styles.js b/projects/mercury/src/dashboard/DomainInfo.styles.js
@@ -1,6 +1,6 @@
 const styles = theme => ({
     paper: {
-        width: '160px',
+        width: '180px',
         height: '100px',
         border: 'none',
         background: theme.palette.primary.main,

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

diff --git a/projects/mercury/src/layout/Layout.js b/projects/mercury/src/layout/Layout.js
@@ -90,7 +90,10 @@ const Layout = ({classes, renderMenu, renderMain = () => {}}) => {
                     onMouseEnter={handleMouseEnter}
                 />
             )}
-            <main style={{marginLeft: menuExpanded ? LEFT_PANEL_MAX_WIDTH : 0}} className={classes.main}>
+            <main
+                style={{marginLeft: menuExpanded ? LEFT_PANEL_MAX_WIDTH : 0, paddingLeft: menuExpanded ? 20 : 80}}
+                className={classes.main}
+            >
                 {renderMain()}
             </main>
         </>

diff --git a/projects/mercury/src/layout/Layout.styles.js b/projects/mercury/src/layout/Layout.styles.js
@@ -1,7 +1,9 @@
 const styles = theme => ({
     main: {
         backgroundColor: theme.palette.background.default,
-        padding: '14px 0 14px 80px',
+        paddingTop: 14,
+        paddingBottom: 14,
+        paddingRight: 0,
         minWidth: 0, // So the Typography noWrap works
         overflowY: 'scroll',
         overflowX: 'hidden',

diff --git a/projects/mercury/src/layout/MainMenu.js b/projects/mercury/src/layout/MainMenu.js
@@ -31,7 +31,8 @@ const styles = theme => ({
         paddingBottom: 15,
         textAlign: 'center',
         color: theme.palette.primary.contrastText,
-        height: 40
+        height: 40,
+        fontSize: 14
     },
     mainMenuButtonSmall: {
         minWidth: 40,

diff --git a/projects/mercury/src/layout/MenuDrawer.styles.js b/projects/mercury/src/layout/MenuDrawer.styles.js
@@ -1,10 +1,11 @@
 import {scrollbarStyles} from '../App.theme';
+import {LEFT_PANEL_MAX_WIDTH} from '../constants';
 
 const styles = theme => ({
     drawerPaper: {
         position: 'fixed',
         whiteSpace: 'nowrap',
-        width: 280,
+        width: LEFT_PANEL_MAX_WIDTH,
         marginTop: '0',
         border: 'none',
         overflow: 'hidden',

diff --git a/projects/mercury/src/layout/UserMenu.js b/projects/mercury/src/layout/UserMenu.js
@@ -124,7 +124,7 @@ const UserMenu = ({menuOpen, classes}) => {
                             <ClickAwayListener onClickAway={handleClose}>
                                 <MenuList className={classes.menu}>
                                     <MenuItem className={classes.userMenu} disablefocusonhover="true">
-                                        <Card sx={{minWidth: 275}}>
+                                        <Card sx={{minWidth: 250}}>
                                             <CardContent>
                                                 <Typography sx={{fontSize: 12}} color="text.secondary" gutterBottom>
                                                     Welcome

diff --git a/projects/mercury/src/metadata/views/MetadataView.styles.js b/projects/mercury/src/metadata/views/MetadataView.styles.js
@@ -5,7 +5,7 @@ const styles = theme => ({
     leftPanel: {
         marginTop: 8,
         paddingBottom: 10,
-        minWidth: 282
+        minWidth: 275
     },
     overallPanelContainer: {
         height: 'calc(100vh - 64px)'

diff --git a/projects/mercury/src/permissions/UserPermissionsTable.js b/projects/mercury/src/permissions/UserPermissionsTable.js
@@ -35,7 +35,7 @@ const styles = {
         fontStyle: 'italic'
     },
     accessDropdown: {
-        fontSize: 14
+        fontSize: 13
     },
     accessIcon: {
         verticalAlign: 'middle',