19302: cleanup 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 0f43fb7142b9b3e37b324854262748ce2d6b8255..d2f5cfec3b43b7850f8008c2977502ac1f011da8 100644 (file)
--- a/src/views-components/side-panel/side-panel-collapsed.tsx
+++ b/src/views-components/side-panel/side-panel-collapsed.tsx
@@ -22,16 +22,16 @@ import {
 } from 'store/navigation/navigation-action'
 import { navigateToUserVirtualMachines } from 'store/navigation/navigation-action'
 import { RouterAction } from 'react-router-redux'
+import { User } from 'models/user'
 
-type CssRules = 'root' | 'unselected' | 'selected'
+type CssRules = 'button' | 'unselected' | 'selected'
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
-    root: {
+    button: {
         width: '40px',
         height: '40px',
-        // padding: '1rem'
-        paddingLeft: '-1rem',
-        marginLeft: '-0.3rem',
+        paddingLeft: '-2rem',
+        marginLeft: '-0.6rem',
         marginBottom: '-1rem'
     },
     unselected: {
@@ -102,6 +102,13 @@ const sidePanelCollapsedCategories: TCollapsedCategory[] = [
     },
 ]
 
+type SidePanelCollapsedProps = {
+    user: User;
+    selectedPath: string;
+    navToHome: (uuid: string) => void;
+    navTo: (navTarget: RouterAction | '') => void;
+};
+
 const mapStateToProps = ({auth, properties }: RootState) => {
         return {
             user: auth.user,
@@ -121,35 +128,32 @@ const mapDispatchToProps = (dispatch: Dispatch) => {
 }
 
 export const SidePanelCollapsed = withStyles(styles)(
-    connect(mapStateToProps, mapDispatchToProps)(({ classes, user, selectedPath, navToHome, navTo }: WithStyles & any) => {
+    connect(mapStateToProps, mapDispatchToProps)(({ classes, user, selectedPath, navToHome, navTo }: WithStyles & SidePanelCollapsedProps) => {
 
         const handleClick = (cat: TCollapsedCategory) => {
             if (cat.name === SidePanelCollapsedCategory.PROJECTS) navToHome(user.uuid)
             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
                             >
-                    <IconButton className={root}>
-                            {cat.icon}
-                            </IconButton>
+                            <IconButton className={button}>{cat.icon}</IconButton>
                         </Tooltip>
                     </ListItem>
                 ))}
             </List>
-        )
+        );
     })
 )