improve folder icon styles

kubeshop · Aug 10, 2021 · 74ad567 · 74ad567
1 parent d3946ab
commit 74ad567
Showing 1 changed file with 10 additions and 3 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -64,17 +64,23 @@ const StyledContent = styled(Content)`
   overflow-y: clip;
 `;
 
-const MenuIcon = (props: {icon: React.ElementType; active: boolean; isSelected: boolean}) => {
-  const {icon: IconComponent, active, isSelected} = props;
+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.whitePure;
+    style.color = Colors.grey400;
   }
 
   return (
@@ -155,6 +161,7 @@ const App = () => {
                     onClick={() => setActivePanes('left', 'file-explorer')}
                     icon={
                       <MenuIcon
+                        style={{marginLeft: 4}}
                         icon={FolderOpenOutlined}
                         active={leftActive}
                         isSelected={leftMenuSelection === 'file-explorer'}