Tab UX colors (#1349)

portal-ui/src/screens/Console/Common/GenericWizard/GenericWizard.tsx

@@ -85,16 +85,18 @@ const styles = (theme: Theme) =>
       maxHeight: 90,
     },
     verticalSteps: {
-      borderRight: "1px solid #EAEAEA",
-      background: "#FBFAFA",
+      borderRight: "1px solid #E5E5E5",
+      background: "#F8F8F8",
     },
     stepsContainer: {
       paddingTop: 0,
       "& .MuiButtonBase-root.Mui-selected": {
-        background: "#EAEAEA",
+        background: "#E5E5E5",
       },
     },
     stepItem: {
+      minHeight: 60,
+      borderBottom: "1px solid #E5E5E5",
       "&:hover": {
         background: "rgba(247,247,247,0.7)",
       },

portal-ui/src/screens/Console/Common/VerticalTabs/VerticalTabs.tsx

@@ -28,7 +28,7 @@ const styles = (theme: Theme) =>
     },
     tabsHeaderContainer: {
       width: "300px",
-      background: "#FBFAFA",
+      background: "#F8F8F8",
       borderRight: "1px solid #EAEAEA",
       "& .MuiTabs-root": {
         "& .MuiTabs-indicator": {
@@ -46,6 +46,7 @@ const styles = (theme: Theme) =>
           },
           "&.Mui-selected": {
             background: "#E5E5E5",
+            fontWeight: 600,
           },
         },
 
@@ -79,6 +80,10 @@ const styles = (theme: Theme) =>
     },
   });
 
+const tabStripStyle = {
+  minHeight: 60,
+};
+
 const VerticalTabs = ({
   children,
   classes,
@@ -123,6 +128,7 @@ const VerticalTabs = ({
                     className={classes.tabHeader}
                     key={`v-tab-${index}`}
                     value={`${index}`}
+                    style={tabStripStyle}
                     {...item}
                     disableRipple
                     disableTouchRipple