From 090176f65ab7eb6336bf120763c0001701c9f085 Mon Sep 17 00:00:00 2001
From: Shubham Gupta <shubham.gupta2956@gmail.com>
Date: Thu, 3 Oct 2024 04:34:34 +0530
Subject: [PATCH] ui: Fix flow info cards alignments

---
 src/components/FlowsInfoCard.tsx | 94 +++++++++++++++++---------------
 1 file changed, 51 insertions(+), 43 deletions(-)

diff --git a/src/components/FlowsInfoCard.tsx b/src/components/FlowsInfoCard.tsx
index 7652966..bb36f9d 100644
--- a/src/components/FlowsInfoCard.tsx
+++ b/src/components/FlowsInfoCard.tsx
@@ -28,6 +28,10 @@ const FlowInfoCard = ({
   return (
     <Grid
       item
+      container
+      justifyContent={"space-between"}
+      alignItems={"center"}
+      direction={"column"}
       xs={12}
       md={4}
       sx={{
@@ -38,49 +42,53 @@ const FlowInfoCard = ({
         maxWidth: "30rem",
       }}
     >
-      <Box sx={{ position: "absolute", top: "10px", right: "12px" }}>
-        <MoreInfoDialog title={infoIconTitle} message={infoIconDescription} />
-      </Box>
-      {icon}
-      <Typography
-        variant="h4"
-        sx={{
-          fontWeight: "medium",
-          letterSpacing: -2,
-          paddingBottom: "10px",
-          paddingTop: "10px",
-        }}
-      >
-        {title}
-      </Typography>
-      <Typography
-        sx={{
-          color: "#848281",
-          fontWeight: "regular",
-          fontSize: {
-            xxs: "13px",
-            xs: "13px",
-            sm: "13px",
-            md: "16px",
-          },
-          paddingBottom: "14px",
-          px: "15px",
-        }}
-      >
-        {description}
-      </Typography>
-      <Box margin="auto">
-        <Tooltip title="Under Audit" placement="top">
-          <span>
-            <Button
-              onClick={handleButtonClick}
-              disabled={isButtonDisabled ?? false}
-            >
-              {buttonText}
-            </Button>
-          </span>
-        </Tooltip>
-      </Box>
+      <Grid item>
+        <Box sx={{ position: "absolute", top: "10px", right: "12px" }}>
+          <MoreInfoDialog title={infoIconTitle} message={infoIconDescription} />
+        </Box>
+        {icon}
+        <Typography
+          variant="h4"
+          sx={{
+            fontWeight: "medium",
+            letterSpacing: -2,
+            paddingBottom: "10px",
+            paddingTop: "10px",
+          }}
+        >
+          {title}
+        </Typography>
+        <Typography
+          sx={{
+            color: "#848281",
+            fontWeight: "regular",
+            fontSize: {
+              xxs: "13px",
+              xs: "13px",
+              sm: "13px",
+              md: "16px",
+            },
+            paddingBottom: "14px",
+            px: "15px",
+          }}
+        >
+          {description}
+        </Typography>
+      </Grid>
+      <Grid item>
+        <Box margin="auto">
+          <Tooltip title="Under Audit" placement="top">
+            <span>
+              <Button
+                onClick={handleButtonClick}
+                disabled={isButtonDisabled ?? false}
+              >
+                {buttonText}
+              </Button>
+            </span>
+          </Tooltip>
+        </Box>
+      </Grid>
     </Grid>
   );
 };