From c61c5024d08ca2a1b93422e82a9f774893a384b3 Mon Sep 17 00:00:00 2001
From: jinapurapu <65002498+jinapurapu@users.noreply.github.com>
Date: Fri, 16 Dec 2022 11:41:39 -0800
Subject: [PATCH] Add hover effect to Tier Type buttons (#2509)

---
 .../TiersConfiguration/TierTypeCard.tsx       | 82 +++++++++++--------
 .../TiersConfiguration/TierTypeSelector.tsx   |  2 +-
 2 files changed, 49 insertions(+), 35 deletions(-)

diff --git a/portal-ui/src/screens/Console/Configurations/TiersConfiguration/TierTypeCard.tsx b/portal-ui/src/screens/Console/Configurations/TiersConfiguration/TierTypeCard.tsx
index 6f2706edc..990fa601b 100644
--- a/portal-ui/src/screens/Console/Configurations/TiersConfiguration/TierTypeCard.tsx
+++ b/portal-ui/src/screens/Console/Configurations/TiersConfiguration/TierTypeCard.tsx
@@ -15,7 +15,9 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { Box } from "@mui/material";
+import { Box, Grid } from "@mui/material";
+
+import { Button } from "mds";
 
 type TierTypeCardProps = {
   onClick: (name: string) => void;
@@ -23,44 +25,56 @@ type TierTypeCardProps = {
   name: string;
 };
 const TierTypeCard = ({ onClick, icon, name }: TierTypeCardProps) => {
+  const styles = {
+    tierTypeCard: {
+      height: "80px",
+      width: "300px",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "start",
+      padding: 5,
+      border: "1px solid #E5E5E5",
+      borderRadius: 2,
+      cursor: "pointer",
+      "&:hover": { background: "#ebebeb" },
+    },
+  };
   return (
-    <button
-      style={{
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "flex-start",
-        padding: 10,
-        background: "transparent",
-        border: "1px solid #E5E5E5",
-        borderRadius: 2,
-        cursor: "pointer",
-      }}
+    <Button
+      id={name}
       onClick={() => {
         onClick(name);
       }}
+      style={styles.tierTypeCard}
     >
-      {icon ? (
-        <Box
-          sx={{
-            "& .min-icon": {
-              height: "60px",
-              width: "60px",
-            },
-          }}
-        >
-          {icon}
-        </Box>
-      ) : null}
-
-      <div
-        style={{
-          fontWeight: 600,
-          marginLeft: 20,
-        }}
-      >
-        {name}
-      </div>
-    </button>
+      <Grid container alignItems={"center"}>
+        {icon ? (
+          <Grid item padding={5}>
+            <Box
+              sx={{
+                "& .min-icon": {
+                  height: "30px",
+                  width: "30px",
+                },
+              }}
+            >
+              {icon}
+            </Box>
+          </Grid>
+        ) : null}
+        <Grid item>
+          <div
+            style={{
+              fontWeight: 600,
+              marginLeft: 10,
+              fontSize: 14,
+            }}
+          >
+            {name}
+          </div>
+        </Grid>
+      </Grid>
+    </Button>
   );
 };
 
diff --git a/portal-ui/src/screens/Console/Configurations/TiersConfiguration/TierTypeSelector.tsx b/portal-ui/src/screens/Console/Configurations/TiersConfiguration/TierTypeSelector.tsx
index bc295919d..896bc18bf 100644
--- a/portal-ui/src/screens/Console/Configurations/TiersConfiguration/TierTypeSelector.tsx
+++ b/portal-ui/src/screens/Console/Configurations/TiersConfiguration/TierTypeSelector.tsx
@@ -52,7 +52,7 @@ const TierTypeSelector = () => {
             sx={{
               margin: "0 auto",
               display: "grid",
-              gridGap: "47px",
+              gridGap: "20px",
               gridTemplateColumns: {
                 xs: "repeat(1, 1fr)",
                 sm: "repeat(2, 1fr)",