From 3d357c8c2225b290f475df243c72e74d96765cce Mon Sep 17 00:00:00 2001
From: Prakash Senthil Vel <23444145+prakashsvmx@users.noreply.github.com>
Date: Thu, 30 Dec 2021 19:22:36 +0000
Subject: [PATCH] Tab UX colors (#1349)

---
 .../Console/Common/GenericWizard/GenericWizard.tsx        | 8 +++++---
 .../screens/Console/Common/VerticalTabs/VerticalTabs.tsx  | 8 +++++++-
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/portal-ui/src/screens/Console/Common/GenericWizard/GenericWizard.tsx b/portal-ui/src/screens/Console/Common/GenericWizard/GenericWizard.tsx
index eb22ffefe..e4caaf022 100644
--- a/portal-ui/src/screens/Console/Common/GenericWizard/GenericWizard.tsx
+++ b/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)",
       },
diff --git a/portal-ui/src/screens/Console/Common/VerticalTabs/VerticalTabs.tsx b/portal-ui/src/screens/Console/Common/VerticalTabs/VerticalTabs.tsx
index fb5a44454..788d20360 100644
--- a/portal-ui/src/screens/Console/Common/VerticalTabs/VerticalTabs.tsx
+++ b/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