From 708ec3befeb52b44671d3880272f0dec8138e4f6 Mon Sep 17 00:00:00 2001
From: vkovtun <vkovtun@ethz.ch>
Date: Thu, 20 Jul 2023 13:43:11 +0200
Subject: [PATCH] SSDM-13579: Made toggle button look nicer.

---
 .../database/data-browser/DataBrowser.jsx     |  2 +-
 .../database/data-browser/Toolbar.jsx         | 48 +++++++++----------
 2 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/ui-admin/src/js/components/database/data-browser/DataBrowser.jsx b/ui-admin/src/js/components/database/data-browser/DataBrowser.jsx
index a4ca4ee27a1..5f702d0fcf5 100644
--- a/ui-admin/src/js/components/database/data-browser/DataBrowser.jsx
+++ b/ui-admin/src/js/components/database/data-browser/DataBrowser.jsx
@@ -48,7 +48,7 @@ const styles = theme => ({
   },
   content: {
     flex: '1 1 100%',
-    height: 'calc(100vh - ' + theme.spacing(10) + 'px)',
+    height: 0,
     overflowY: 'hidden'
   }
 })
diff --git a/ui-admin/src/js/components/database/data-browser/Toolbar.jsx b/ui-admin/src/js/components/database/data-browser/Toolbar.jsx
index b65048fd9e2..f26c5ab8000 100644
--- a/ui-admin/src/js/components/database/data-browser/Toolbar.jsx
+++ b/ui-admin/src/js/components/database/data-browser/Toolbar.jsx
@@ -28,6 +28,7 @@ import CreateNewFolderIcon from '@material-ui/icons/CreateNewFolderOutlined'
 import autoBind from 'auto-bind'
 import { ToggleButton } from '@material-ui/lab'
 import Button from '@material-ui/core/Button'
+import IconButton from '@material-ui/core/IconButton'
 
 const color = 'secondary'
 
@@ -37,15 +38,13 @@ const styles = (theme) => ({
     display: 'flex',
     whiteSpace: 'nowrap',
     marginLeft: theme.spacing(1),
-    marginBottom: theme.spacing(1)
+    marginBottom: theme.spacing(1),
+    marginRight: theme.spacing(1)
   },
   buttons: {
     flex: '0 0 auto',
     display: 'flex',
     whiteSpace: 'nowrap',
-    '& button': {
-      marginRight: theme.spacing(1)
-    }
   },
   leftSection: {
     flexGrow: 1,
@@ -54,8 +53,10 @@ const styles = (theme) => ({
     flexShrink: 0
   },
   toggleButton: {
-    marginRight: theme.spacing(1),
-    border: '1px solid ' + theme.palette[color].main + '80',
+    border: 'none',
+    borderRadius: '50%',
+    display: 'inline-flex',
+    padding: theme.spacing(1.5) + 'px',
     '& *': {
       color: theme.palette[color].main
     }
@@ -72,14 +73,15 @@ class Toolbar extends React.Component {
   render() {
     const { viewType, onViewTypeChange, classes, showInfo, onShowInfoChange } =
       this.props
-    const size = 'small'
+    const buttonSize = 'small'
+    const iconButtonSize = 'medium'
     return (
       <div className={classes.toolbar}>
         <div className={[classes.buttons, classes.leftSection].join(' ')}>
           <Button
             classes={{ root: classes.button }}
             color={color}
-            size={size}
+            size={buttonSize}
             variant='outlined'
             startIcon={<CreateNewFolderIcon />}
           >
@@ -90,7 +92,7 @@ class Toolbar extends React.Component {
           <ToggleButton
             classes={{ root: classes.toggleButton }}
             color={color}
-            size={size}
+            size={buttonSize}
             selected={showInfo}
             onChange={onShowInfoChange}
             value={messages.get(messages.INFO)}
@@ -98,52 +100,50 @@ class Toolbar extends React.Component {
           >
             <InfoIcon />
           </ToggleButton>
-          <Button
+          <IconButton
             classes={{ root: classes.button }}
             color={color}
-            size={size}
+            size={iconButtonSize}
             variant='outlined'
           >
             <SearchIcon />
-          </Button>
+          </IconButton>
           {viewType === 'list' && (
-            <Button
+            <IconButton
                 classes={{ root: classes.button }}
                 color={color}
-                size={size}
+                size={iconButtonSize}
                 variant='outlined'
                 onClick={() => onViewTypeChange('grid')}
               >
               <ViewComfyIcon />
-            </Button>
+            </IconButton>
           )}
           {viewType === 'grid' && (
-            <Button
+            <IconButton
               classes={{ root: classes.button }}
               color={color}
-              size={size}
+              size={iconButtonSize}
               variant='outlined'
               onClick={() => onViewTypeChange('list')}
             >
               <ViewListIcon />
-            </Button>
+            </IconButton>
           )}
-          <Button
+          <IconButton
             classes={{ root: classes.button }}
             color={color}
-            size={size}
+            size={iconButtonSize}
             variant='outlined'
-            onClick={() => onViewTypeChange('list')}
           >
             <SettingsIcon />
-          </Button>
+          </IconButton>
           <Button
             classes={{ root: classes.button }}
             color={color}
-            size={size}
+            size={buttonSize}
             variant='contained'
             startIcon={<PublishIcon />}
-            onClick={() => onViewTypeChange('list')}
           >
             {messages.get(messages.UPLOAD)}
           </Button>
-- 
GitLab