From 956c32a410df8789ab179ab23893ad92c0aeaada Mon Sep 17 00:00:00 2001
From: Lisa Knox <lisaknox83@gmail.com>
Date: Tue, 20 Dec 2022 17:28:13 -0500
Subject: [PATCH] 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>

---
 .../side-panel-toggle/side-panel-toggle.tsx               | 8 +++++---
 src/views-components/side-panel/side-panel.tsx            | 8 ++++++--
 2 files changed, 11 insertions(+), 5 deletions(-)

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 1197c261..50628d7f 100644
--- 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 2d975b6f..a039147d 100644
--- 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>
-- 
2.30.2