19434: imported and styled collapsify icons, minor cleanup

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

diff --git a/public/arrow-to-left.png b/public/arrow-to-left.png
new file mode 100644 (file)
index 0000000..262c148
Binary files /dev/null and b/public/arrow-to-left.png differ

diff --git a/public/arrow-to-right.png b/public/arrow-to-right.png
new file mode 100644 (file)
index 0000000..8205c21
Binary files /dev/null and b/public/arrow-to-right.png differ

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 b5f5dd9b8bf41864f5e2cf685120cd26e98e0665..1197c26140c4b641c23bfb0de24f43528a5497d7 100644 (file)
--- a/src/views-components/side-panel-toggle/side-panel-toggle.tsx
+++ b/src/views-components/side-panel-toggle/side-panel-toggle.tsx
@@ -13,25 +13,31 @@ type collapseButtonProps = {
   toggleSidePanel: (collapsedState: boolean) => void
 }
 
-export const COLLAPSE_ICON_SIZE = 20
+export const COLLAPSE_ICON_SIZE = 35
 
 const SidePanelToggle = (props: collapseButtonProps) =>{ 
-const collapseButtonIconStyles = {
-  root: {
-    width: `${COLLAPSE_ICON_SIZE}px`,
-    padding: '10px'
-  },
-  icon: {
+  const collapseButtonIconStyles = {
+    root: {
+      width: `${COLLAPSE_ICON_SIZE}px`,
+    },
+    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 style={collapseButtonIconStyles.icon}>{props.isCollapsed ? '>' : '<'}</div>
-              </IconButton>
+            <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, marginRight: '0.5rem'}} src='arrow-to-left.png'/>}
+              </div>
+            </IconButton>
           </Tooltip>
-  };
+};
 
 const mapStateToProps = (state: RootState) => {
   return {