X-Git-Url: https://git.arvados.org/arvados.git/blobdiff_plain/0f5b0542513b572959e39400bae42e69aeb1a7b6..96f0b43ee4bb07e87dbeef8514a51857db069351:/services/workbench2/src/views-components/side-panel-toggle/side-panel-toggle.tsx

diff --git a/services/workbench2/src/views-components/side-panel-toggle/side-panel-toggle.tsx b/services/workbench2/src/views-components/side-panel-toggle/side-panel-toggle.tsx
index 9984886b8a..a7ec9d7d61 100644
--- a/services/workbench2/src/views-components/side-panel-toggle/side-panel-toggle.tsx
+++ b/services/workbench2/src/views-components/side-panel-toggle/side-panel-toggle.tsx
@@ -20,22 +20,24 @@ const SidePanelToggle = (props: collapseButtonProps) => {
         root: {
             width: `${COLLAPSE_ICON_SIZE}px`,
             height: `${COLLAPSE_ICON_SIZE}px`,
-            marginTop: '0.4rem'
+            marginTop: '0.4rem',
+            marginLeft: '0.7rem',
+            paddingTop: '1rem',
+            paddingRight: '1rem'
         },
         icon: {
-            height: '1.5rem',
-            width: '3rem',
-            opacity: '0.6',
+            opacity: '0.5',
+            marginBottom: '0.54rem'
         },
     }
 
     return <Tooltip disableFocusListener title="Toggle Side Panel">
-        <IconButton style={collapseButtonIconStyles.root} onClick={() => { props.toggleSidePanel(props.isCollapsed) }}>
+        <IconButton data-cy="side-panel-toggle" style={collapseButtonIconStyles.root} onClick={() => { props.toggleSidePanel(props.isCollapsed) }}>
             <div>
                 {props.isCollapsed ?
-                    <img style={{ ...collapseButtonIconStyles.icon, transform: "rotate(180deg)" }} src='/collapseLHS-New.svg#svgView(preserveAspectRatio(none))' alt='expand button' />
+                    <img style={{...collapseButtonIconStyles.icon, marginLeft:'0.25rem'}} src='/mui-start-icon.svg' alt='an arrow pointing right'/>
                     :
-                    <img style={{ ...collapseButtonIconStyles.icon, }} src='/collapseLHS-New.svg#svgView(preserveAspectRatio(none))' alt='collapse button' />}
+                    <img style={{ ...collapseButtonIconStyles.icon, transform: "rotate(180deg)"}} src='/mui-start-icon.svg' alt='an arrow pointing right'/>}
             </div>
         </IconButton>
     </Tooltip>