Adjust paddings and text color.

thehyve · Jun 17, 2024 · e65062e · e65062e
1 parent 260f0ae
commit e65062e
Show file tree

Hide file tree

Showing 8 changed files with 26 additions and 8 deletions.
diff --git a/projects/mercury/src/App.theme.js b/projects/mercury/src/App.theme.js
@@ -25,14 +25,18 @@ const globalTheme = createTheme({
         },
         background: {
             default: '#eef0eb'
+        },
+        text: {
+            primary: COLORS.fsBlueDark,
+            secondary: COLORS.fsBlueMedium
         }
     },
     shape: {
         borderRadius: 15
     }
 });
 
-const scrollbarStyles = {
+export const scrollbarStyles = {
     '&::-webkit-scrollbar': {
         width: '0.3em',
         height: '0.3em'
@@ -226,6 +230,13 @@ export default createTheme({
                     ...scrollbarStyles
                 }
             }
+        },
+        MuiTablePagination: {
+            styleOverrides: {
+                root: {
+                    ...scrollbarStyles
+                }
+            }
         }
     }
 });
diff --git a/projects/mercury/src/collections/CollectionsPage.styles.js b/projects/mercury/src/collections/CollectionsPage.styles.js
@@ -15,7 +15,8 @@ const styles = () => ({
     },
     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/layout/MainMenu.js b/projects/mercury/src/layout/MainMenu.js
@@ -19,7 +19,8 @@ import {COLORS} from '../App.theme';
 const styles = theme => ({
     buttonStack: {
         paddingLeft: 20,
-        paddingRight: 20
+        paddingRight: 20,
+        overflowY: 'auto'
     },
     buttonStackCollapsed: {
         paddingLeft: 10,

diff --git a/projects/mercury/src/layout/MenuDrawer.js b/projects/mercury/src/layout/MenuDrawer.js
@@ -23,7 +23,7 @@ const MenuDrawer = ({open, renderMenu, toggleMenuExpansion, onMouseEnter, onMous
                 <img src="/public/images/icon_white.png" alt="Fairspace" width="40" />
             )}
         </div>
-        <div onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
+        <div className={classes.menu} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
             {renderMenu(open)}
         </div>
         <div className={open ? classes.toolbar : classes.toolbarCollapsed}>

diff --git a/projects/mercury/src/layout/MenuDrawer.styles.js b/projects/mercury/src/layout/MenuDrawer.styles.js
@@ -1,3 +1,5 @@
+import {scrollbarStyles} from '../App.theme';
+
 const styles = theme => ({
     drawerPaper: {
         position: 'fixed',
@@ -60,6 +62,10 @@ const styles = theme => ({
         position: 'absolute',
         bottom: 50,
         height: 100
+    },
+    menu: {
+        overflowY: 'auto',
+        ...scrollbarStyles
     }
 });
 

diff --git a/projects/mercury/src/metadata/views/MetadataView.styles.js b/projects/mercury/src/metadata/views/MetadataView.styles.js
@@ -20,8 +20,7 @@ const styles = theme => ({
     centralPanel: {
         overflowX: 'auto',
         width: '100%',
-        overflowY: 'hidden',
-        maxHeight: 'calc(100vh - 150px)'
+        overflowY: 'hidden'
     },
     clearAllButtonContainer: {
         textAlign: 'end'

diff --git a/projects/mercury/src/metadata/views/MetadataViewTableContainer.js b/projects/mercury/src/metadata/views/MetadataViewTableContainer.js
@@ -70,7 +70,7 @@ const styles = theme => ({
     },
     tableContents: {
         minHeight: '200px',
-        maxHeight: 'calc(100vh - 310px)',
+        maxHeight: 'calc(100vh - 250px)',
         overflowY: 'auto',
         overflowX: 'auto',
         '& .MuiTableCell-stickyHeader': {

diff --git a/projects/mercury/src/status/StatusAlert.js b/projects/mercury/src/status/StatusAlert.js
@@ -10,7 +10,7 @@ const styles = theme => ({
         border: `1px solid ${theme.palette.error.main}`
     },
     snackbarRoot: {
-        paddingTop: 50
+        paddingTop: 0
     }
 });