19434: fixed ripple shape, moved some inline styles to where they should be

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

diff --git a/src/views-components/side-panel-toggle/side-panel-toggle.tsx b/src/views-components/side-panel-toggle/side-panel-toggle.tsx
index 1197c26140c4b641c23bfb0de24f43528a5497d7..50628d7f2e2db50155eb873bc0b1e85c3c5cd632 100644 (file)
--- a/src/views-components/side-panel-toggle/side-panel-toggle.tsx
+++ b/src/views-components/side-panel-toggle/side-panel-toggle.tsx
@@ -19,21 +19,23 @@ const SidePanelToggle = (props: collapseButtonProps) =>{
   const collapseButtonIconStyles = {
     root: {
       width: `${COLLAPSE_ICON_SIZE}px`,
+      height: `${COLLAPSE_ICON_SIZE}px`,
+      marginTop: '0.4rem'
     },
     icon: {
       width: '1.5rem',
       height: '1.5rem',
       marginTop: '0.5rem'
-    }
+    },
   }
 
   return <Tooltip disableFocusListener title="Toggle Side Panel">
             <IconButton style={collapseButtonIconStyles.root} onClick={()=>{props.toggleSidePanel(props.isCollapsed)}}>
               <div>
               {props.isCollapsed? 
-                <img style={collapseButtonIconStyles.icon} src='arrow-to-right.png'/>
+                <img style={{...collapseButtonIconStyles.icon, marginLeft: '0.25rem'}} src='/arrow-to-right.png'/>
                 :
-                <img style={{...collapseButtonIconStyles.icon, marginRight: '0.5rem'}} src='arrow-to-left.png'/>}
+                <img style={{...collapseButtonIconStyles.icon, marginRight: '0.5rem'}} src='/arrow-to-left.png'/>}
               </div>
             </IconButton>
           </Tooltip>

diff --git a/src/views-components/side-panel/side-panel.tsx b/src/views-components/side-panel/side-panel.tsx
index 2d975b6f9f70db68e1878ec2d1b4bb6a13ba56dd..a039147d44125344e5e499ca1a012880e4d619a6 100644 (file)
--- a/src/views-components/side-panel/side-panel.tsx
+++ b/src/views-components/side-panel/side-panel.tsx
@@ -17,7 +17,7 @@ import SidePanelToggle from 'views-components/side-panel-toggle/side-panel-toggl
 
 const DRAWER_WIDTH = 240;
 
-type CssRules = 'root';
+type CssRules = 'root' | 'topButtonContainer';
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     root: {
@@ -26,6 +26,10 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
         height: '100%',
         overflowX: 'auto',
         width: DRAWER_WIDTH,
+    },
+    topButtonContainer: {
+        display: 'flex', 
+        justifyContent: 'space-between'
     }
 });
 
@@ -46,7 +50,7 @@ export const SidePanel = withStyles(styles)(
             <Grid item xs>
                 {props.isCollapsed ? <SidePanelToggle /> :
                 <>
-                    <Grid style={{display: 'flex', justifyContent: 'space-between'}}>
+                    <Grid className={classes.topButtonContainer}>
                         <SidePanelButton key={props.currentRoute} />
                         <SidePanelToggle/>
                     </Grid>