Merge pull request #218 from kubeshop/catalinhoha/refactor/styling-ch…

…anges styling changes
kubeshop · Aug 10, 2021 · d0d001d · d0d001d
2 parents 375b51b + 74ad567
commit d0d001d
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 25 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -64,8 +64,28 @@ const StyledContent = styled(Content)`
   overflow-y: clip;
 `;
 
-const iconStyle = {
-  fontSize: 25,
+const MenuIcon = (props: {
+  icon: React.ElementType;
+  active: boolean;
+  isSelected: boolean;
+  style?: React.CSSProperties;
+}) => {
+  const {icon: IconComponent, active, isSelected, style: customStyle = {}} = props;
+  const [isHovered, setIsHovered] = useState<boolean>(false);
+
+  const style = {
+    ...customStyle,
+    fontSize: 25,
+    color: Colors.grey7,
+  };
+
+  if (isHovered || (active && isSelected)) {
+    style.color = Colors.grey400;
+  }
+
+  return (
+    <IconComponent style={style} onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} />
+  );
 };
 
 const iconMenuWidth = 45;
@@ -140,12 +160,11 @@ const App = () => {
                     type="text"
                     onClick={() => setActivePanes('left', 'file-explorer')}
                     icon={
-                      <FolderOpenOutlined
-                        style={{
-                          ...iconStyle,
-                          color: leftMenuSelection === 'file-explorer' ? Colors.whitePure : Colors.grey7,
-                          marginLeft: 4,
-                        }}
+                      <MenuIcon
+                        style={{marginLeft: 4}}
+                        icon={FolderOpenOutlined}
+                        active={leftActive}
+                        isSelected={leftMenuSelection === 'file-explorer'}
                       />
                     }
                   />
@@ -156,11 +175,10 @@ const App = () => {
                     type="text"
                     onClick={() => setActivePanes('left', 'cluster-explorer')}
                     icon={
-                      <ClusterOutlined
-                        style={{
-                          ...iconStyle,
-                          color: leftMenuSelection === 'cluster-explorer' ? Colors.whitePure : Colors.grey7,
-                        }}
+                      <MenuIcon
+                        icon={ClusterOutlined}
+                        active={leftActive}
+                        isSelected={leftMenuSelection === 'cluster-explorer'}
                       />
                     }
                   />
@@ -186,7 +204,7 @@ const App = () => {
                   </>
                 }
                 hideLeft={!leftActive}
-                nav={<NavigatorPane />}
+                nav={<NavigatorPane windowHeight={size.height} />}
                 editor={<ActionsPane contentHeight={contentHeight} />}
                 right={
                   <>
@@ -208,11 +226,10 @@ const App = () => {
                   type="text"
                   onClick={() => setActivePanes('right', 'graph')}
                   icon={
-                    <ApartmentOutlined
-                      style={{
-                        ...iconStyle,
-                        color: rightMenuSelection === 'graph' ? Colors.whitePure : Colors.grey7,
-                      }}
+                    <MenuIcon
+                      icon={ApartmentOutlined}
+                      active={rightActive}
+                      isSelected={rightMenuSelection === 'graph'}
                     />
                   }
                   style={{display: featureJson.ShowGraphView ? 'inline' : 'none'}}
@@ -223,9 +240,7 @@ const App = () => {
                   type="text"
                   onClick={() => setActivePanes('right', 'logs')}
                   icon={
-                    <CodeOutlined
-                      style={{...iconStyle, color: rightMenuSelection === 'logs' ? Colors.whitePure : Colors.grey7}}
-                    />
+                    <MenuIcon icon={CodeOutlined} active={rightActive} isSelected={rightMenuSelection === 'logs'} />
                   }
                 />
               </Space>

diff --git a/src/components/organisms/FileTreePane/FileTreePane.tsx b/src/components/organisms/FileTreePane/FileTreePane.tsx
@@ -233,6 +233,8 @@ const BrowseButton = styled(Button)`
   margin-top: 1px;
 `;
 
+const FILE_TREE_HEIGHT_OFFSET = 122;
+
 const FileTreePane = (props: {windowHeight: number | undefined}) => {
   const {windowHeight} = props;
   const dispatch = useAppDispatch();
@@ -405,7 +407,7 @@ const FileTreePane = (props: {windowHeight: number | undefined}) => {
       ) : tree ? (
         <StyledTreeDirectoryTree
           // height is needed to enable Tree's virtual scroll ToDo: Do constants based on the hights of app title and pane title, or get height of parent.
-          height={windowHeight && windowHeight > 122 ? windowHeight - 122 : 0}
+          height={windowHeight && windowHeight > FILE_TREE_HEIGHT_OFFSET ? windowHeight - FILE_TREE_HEIGHT_OFFSET : 0}
           onSelect={onSelect}
           treeData={[tree]}
           ref={treeRef}

diff --git a/src/components/organisms/NavigatorPane/NavigatorPane.tsx b/src/components/organisms/NavigatorPane/NavigatorPane.tsx
@@ -115,7 +115,10 @@ const SectionHeader = (props: {
   );
 };
 
-const NavigatorPane = () => {
+const NAVIGATOR_HEIGHT_OFFSET = 112;
+
+const NavigatorPane = (props: {windowHeight: number}) => {
+  const {windowHeight} = props;
   const previewLoader = useAppSelector(state => state.main.previewLoader);
   const uiState = useAppSelector(state => state.ui);
   const helmCharts = useSelector(selectHelmCharts);
@@ -150,7 +153,12 @@ const NavigatorPane = () => {
           </MonoPaneTitle>
         </MonoPaneTitleCol>
       </TitleRow>
-      <NavigatorPaneContainer>
+      <NavigatorPaneContainer
+        style={{
+          height:
+            windowHeight && windowHeight > NAVIGATOR_HEIGHT_OFFSET ? windowHeight - NAVIGATOR_HEIGHT_OFFSET : '100%',
+        }}
+      >
         {uiState.isFolderLoading ? (
           <StyledSkeleton active />
         ) : (