fix: updated div's with box and removed unwanted css (#1236)

Signed-off-by: Darshan Simha <[email protected]>
numaproj · Oct 19, 2023 · 3038299 · 3038299
1 parent 3a12b59
commit 3038299
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 33 deletions.
diff --git a/ui/src/components/common/StatusCounts/StatusCounts.tsx b/ui/src/components/common/StatusCounts/StatusCounts.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import { IconsStatusMap } from "../../../utils";
+import Box from "@mui/material/Box";
 
 import "./style.css";
 export interface StatusCountsProps {
@@ -12,12 +13,21 @@ export interface StatusCountsProps {
 
 export function StatusCounts(counts: StatusCountsProps) {
   return (
-    <div className="flex row" style={{ marginLeft: "0.5rem" }}>
+    <Box sx={{ display: "flex", flexDirection: "row", marginLeft: "0.5rem" }}>
       {Object.keys(counts.counts).map((key) => {
         return (
-          <div className="flex row status-block" key={key}>
-            <div className="flex column">
-              <div className="flex row">
+          <Box
+            sx={{
+              display: "flex",
+              flexDirection: "row",
+              alignItems: "center",
+              justifyContent: "center",
+              flexGrow: "1",
+            }}
+            key={key}
+          >
+            <Box sx={{ display: "flex", flexDirection: "column" }}>
+              <Box sx={{ display: "flex", flexDirection: "row" }}>
                 <img
                   src={IconsStatusMap[key]}
                   alt={key}
@@ -26,12 +36,25 @@ export function StatusCounts(counts: StatusCountsProps) {
                 <span style={{ marginLeft: "0.5rem" }} className="bold-text">
                   : {counts.counts[key]}
                 </span>
-              </div>
-              <div className="flex row title-case regular-text">{key}</div>
-            </div>
-          </div>
+              </Box>
+              <Box
+                sx={{
+                  display: "flex",
+                  flexDirection: "row",
+                  textTransform: "capitalize",
+                  color: "#3C4348",
+                  fontSize: "12px",
+                  fontWeight: "400",
+                  lineHeight: "23.5px",
+                  wordWrap: "break-word",
+                }}
+              >
+                {key}
+              </Box>
+            </Box>
+          </Box>
         );
       })}
-    </div>
+    </Box>
   );
 }
diff --git a/ui/src/components/common/StatusCounts/style.css b/ui/src/components/common/StatusCounts/style.css
@@ -1,27 +1,3 @@
-.flex{
-    display: flex;
-}
-.row{
-    flex-direction: row;
-}
-.column{
-    flex-direction: column;
-} 
-.status-block{
-    align-items: center;
-    justify-content: center;
-    flex-grow: 1;
-}
-.title-case{
-    text-transform: capitalize;
-}
-.regular-text{
-    color: #3C4348;
-    font-size: 12px;
-    font-weight: 400;
-    line-height: 23.50px;
-    word-wrap: break-word
-}
 .bold-text{
     color: #3C4348;
     font-size: 12px;