X-Git-Url: https://git.arvados.org/arvados.git/blobdiff_plain/2590a02fd6bc7021321d32601f6bbdcfb28b2efa..599aa352ade599966cf2a4606a1e6a1776a0738d:/src/views-components/side-panel-toggle/side-panel-toggle.tsx
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 1197c26140..5c3069cd29 100644
--- a/src/views-components/side-panel-toggle/side-panel-toggle.tsx
+++ b/src/views-components/side-panel-toggle/side-panel-toggle.tsx
@@ -3,54 +3,55 @@
// SPDX-License-Identifier: AGPL-3.0
import React from 'react';
-import { Tooltip, IconButton } from '@material-ui/core';
+import { Tooltip, IconButton } from '@material-ui/core';
import { connect } from 'react-redux';
import { toggleSidePanel } from "store/side-panel/side-panel-action";
import { RootState } from 'store/store';
type collapseButtonProps = {
- isCollapsed: boolean;
- toggleSidePanel: (collapsedState: boolean) => void
+ isCollapsed: boolean;
+ toggleSidePanel: (collapsedState: boolean) => void
}
export const COLLAPSE_ICON_SIZE = 35
-const SidePanelToggle = (props: collapseButtonProps) =>{
- const collapseButtonIconStyles = {
- root: {
- width: `${COLLAPSE_ICON_SIZE}px`,
- },
- icon: {
- width: '1.5rem',
- height: '1.5rem',
- marginTop: '0.5rem'
+const SidePanelToggle = (props: collapseButtonProps) => {
+ const collapseButtonIconStyles = {
+ root: {
+ width: `${COLLAPSE_ICON_SIZE}px`,
+ height: `${COLLAPSE_ICON_SIZE}px`,
+ marginTop: '0.4rem',
+ marginLeft: '0.7rem',
+ },
+ icon: {
+ opacity: '0.5',
+ },
}
- }
-
- return
- {props.toggleSidePanel(props.isCollapsed)}}>
-
- {props.isCollapsed?
-
- :
-
}
-
-
-
+
+ return
+ { props.toggleSidePanel(props.isCollapsed) }}>
+
+ {props.isCollapsed ?
+
+ :
+
}
+
+
+
};
const mapStateToProps = (state: RootState) => {
- return {
- isCollapsed: state.sidePanel.collapsedState
- }
+ return {
+ isCollapsed: state.sidePanel.collapsedState
+ }
}
- const mapDispatchToProps = (dispatch) => {
+const mapDispatchToProps = (dispatch) => {
return {
- toggleSidePanel: (collapsedState)=>{
+ toggleSidePanel: (collapsedState) => {
return dispatch(toggleSidePanel(collapsedState))
}
}
};
-export default connect(mapStateToProps, mapDispatchToProps)(SidePanelToggle)
\ No newline at end of file
+export default connect(mapStateToProps, mapDispatchToProps)(SidePanelToggle)