19302: css tweaks Arvados-DCO-1.1-Signed-off-by: Lisa Knox <lisa.knox@curii.com>

[arvados.git] / src / views-components / side-panel / side-panel-collapsed.tsx

diff --git a/src/views-components/side-panel/side-panel-collapsed.tsx b/src/views-components/side-panel/side-panel-collapsed.tsx
index 9108e6200cf0ad5c61717e83c5bcc58ad672219d..18e4df25272d69a8212eb359326e9b26a7013590 100644 (file)
--- a/src/views-components/side-panel/side-panel-collapsed.tsx
+++ b/src/views-components/side-panel/side-panel-collapsed.tsx
@@ -6,7 +6,7 @@ import React, { ReactElement } from 'react'
 import { connect } from 'react-redux'
 import { ProjectsIcon, ProcessIcon, FavoriteIcon, ShareMeIcon, TrashIcon, PublicFavoriteIcon, GroupsIcon } from 'components/icon/icon'
 import { TerminalIcon } from 'components/icon/icon'
-import { List, ListItem, Tooltip } from '@material-ui/core'
+import { IconButton, List, ListItem, Tooltip } from '@material-ui/core'
 import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles'
 import { ArvadosTheme } from 'common/custom-theme'
 import { navigateTo } from 'store/navigation/navigation-action'
@@ -20,14 +20,19 @@ import {
     navigateToAllProcesses,
     navigateToTrash,
 } from 'store/navigation/navigation-action'
-import { openUserVirtualMachines } from 'store/virtual-machines/virtual-machines-actions'
 import { navigateToUserVirtualMachines } from 'store/navigation/navigation-action'
 import { RouterAction } from 'react-router-redux'
 
-type CssRules = 'root' | 'unselected' | 'selected'
+type CssRules = 'button' | 'unselected' | 'selected'
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
-    root: {},
+    button: {
+        width: '40px',
+        height: '40px',
+        paddingLeft: '-2rem',
+        marginLeft: '-0.6rem',
+        marginBottom: '-1rem'
+    },
     unselected: {
         color: theme.customs.colors.grey600,
     },
@@ -86,7 +91,7 @@ const sidePanelCollapsedCategories: TCollapsedCategory[] = [
     },
     {
         name: SidePanelCollapsedCategory.GROUPS,
-        icon: <GroupsIcon style={{marginLeft: '3px'}}/>,
+        icon: <GroupsIcon style={{marginLeft: '2px', scale: '85%'}}/>,
         navTarget: navigateToGroups,
     },
     {
@@ -97,10 +102,14 @@ const sidePanelCollapsedCategories: TCollapsedCategory[] = [
 ]
 
 const mapStateToProps = ({auth, properties }: RootState) => {
-    return {
-        user: auth.user,
-        selectedPath: properties.breadcrumbs ? properties.breadcrumbs[0].label : SidePanelCollapsedCategory.PROJECTS,
-    }
+        return {
+            user: auth.user,
+            selectedPath: properties.breadcrumbs
+                ? properties.breadcrumbs[0].label !== 'Virtual Machines'
+                ? properties.breadcrumbs[0].label
+                : SidePanelCollapsedCategory.SHELL_ACCESS
+                : SidePanelCollapsedCategory.PROJECTS,
+        }
 }
 
 const mapDispatchToProps = (dispatch: Dispatch) => {
@@ -118,21 +127,22 @@ export const SidePanelCollapsed = withStyles(styles)(
             else navTo(cat.navTarget)
         }
 
-        const { root, unselected, selected } = classes
+        const { button, unselected, selected } = classes
         return (
-            <List data-cy="side-panel-collapsed" className={root}>
+            <List data-cy="side-panel-collapsed">
                 {sidePanelCollapsedCategories.map((cat) => (
+                    
                     <ListItem
                         key={cat.name}
                         data-cy={`collapsed-${cat.name.toLowerCase().replace(/\s+/g, '-')}`}
-                        className={selectedPath === cat.name ? selected : unselected}
                         onClick={() => handleClick(cat)}
-                    >
+                        >
                         <Tooltip
+                            className={selectedPath === cat.name ? selected : unselected}
                             title={cat.name}
                             disableFocusListener
-                        >
-                            {cat.icon}
+                            >
+                            <IconButton className={button}>{cat.icon}</IconButton>
                         </Tooltip>
                     </ListItem>
                 ))}