From 1fe959762ff3da30c5831075839e88914fbcb594 Mon Sep 17 00:00:00 2001
From: ewelinagr <ewelina@thehyve.nl>
Date: Fri, 7 Jun 2024 12:27:27 +0200
Subject: [PATCH] Adjust paddings and text color.

---
 projects/mercury/src/App.theme.js                   | 13 ++++++++++++-
 .../src/collections/CollectionsPage.styles.js       |  3 ++-
 projects/mercury/src/layout/MainMenu.js             |  5 +++--
 projects/mercury/src/layout/MenuDrawer.js           |  2 +-
 projects/mercury/src/layout/MenuDrawer.styles.js    |  6 ++++++
 .../src/metadata/views/MetadataView.styles.js       |  3 +--
 .../metadata/views/MetadataViewTableContainer.js    |  2 +-
 projects/mercury/src/status/StatusAlert.js          |  2 +-
 8 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/projects/mercury/src/App.theme.js b/projects/mercury/src/App.theme.js
index b2556b3dd..1bf046be5 100644
--- a/projects/mercury/src/App.theme.js
+++ b/projects/mercury/src/App.theme.js
@@ -25,6 +25,10 @@ const globalTheme = createTheme({
         },
         background: {
             default: '#eef0eb'
+        },
+        text: {
+            primary: COLORS.fsBlueDark,
+            secondary: COLORS.fsBlueMedium
         }
     },
     shape: {
@@ -32,7 +36,7 @@ const globalTheme = createTheme({
     }
 });
 
-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
index 3e8cf9c57..ab26d2317 100644
--- 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
index 43b8d51fe..42b782c8c 100644
--- a/projects/mercury/src/layout/MainMenu.js
+++ b/projects/mercury/src/layout/MainMenu.js
@@ -14,12 +14,13 @@ import ExternalMetadataSourceContext from '../metadata/metadata-sources/External
 import {getExternalStoragePathPrefix} from '../external-storage/externalStorageUtils';
 import {getExternalMetadataSourcePathPrefix} from '../metadata/external-views/externalMetadataSourceUtils';
 import InternalMetadataSourceContext from '../metadata/metadata-sources/InternalMetadataSourceContext';
-import {COLORS} from '../App.theme';
+import {COLORS, scrollbarStyles} 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
index 75c6b324e..c1635e356 100644
--- 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
index 7b2d058b3..ef0c990c0 100644
--- 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
index ed8ca0cbe..a7b3b020e 100644
--- 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
index d51e5ba1f..4265ecc4e 100644
--- 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
index d6af85106..0a9409e59 100644
--- 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
     }
 });