Merge pull request #871 from IntersectMBO/fix/716-drep-explorer-visua…

…l-defects fix/716-drep-explorer-visual-defects
IntersectMBO · Apr 29, 2024 · 76b8c89 · 76b8c89
2 parents 38fbb34 + 6e9f9a7
commit 76b8c89
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 23 deletions.
diff --git a/govtool/frontend/src/components/atoms/StatusPill.tsx b/govtool/frontend/src/components/atoms/StatusPill.tsx
@@ -5,40 +5,37 @@ import { DRepStatus } from "@/models";
 interface StatusPillProps {
   status: DRepStatus;
   label?: string;
-  size?: 'small' | 'medium';
-  sx?: ChipProps['sx'];
+  size?: "small" | "medium";
+  sx?: ChipProps["sx"];
 }
 
 export const StatusPill = ({
   status,
   label = status,
-  size = 'small',
-  sx
+  size = "small",
+  sx,
 }: StatusPillProps) => (
-  <StyledChip
-    status={status}
-    size={size}
-    label={label}
-    sx={sx}
-  />
+  <StyledChip status={status} size={size} label={label} sx={sx} />
 );
 
 const bgColor = {
   [DRepStatus.Active]: successGreen.c200,
-  [DRepStatus.Inactive]: cyan.c100,
-  [DRepStatus.Retired]: errorRed.c100,
+  [DRepStatus.Inactive]: errorRed.c100,
+  [DRepStatus.Retired]: cyan.c100,
 };
 
 const textColor = {
   [DRepStatus.Active]: successGreen.c700,
-  [DRepStatus.Inactive]: cyan.c500,
-  [DRepStatus.Retired]: errorRed.c500,
+  [DRepStatus.Inactive]: errorRed.c500,
+  [DRepStatus.Retired]: cyan.c500,
 };
 
-const StyledChip = styled(Chip)<{ status: DRepStatus }>(({ theme, status }) => ({
-  backgroundColor: bgColor[status],
-  color: textColor[status],
-  border: `2px solid ${theme.palette.neutralWhite}`,
-  fontSize: '0.75rem',
-  textTransform: 'capitalize',
-}));
+const StyledChip = styled(Chip)<{ status: DRepStatus }>(
+  ({ theme, status }) => ({
+    backgroundColor: bgColor[status],
+    color: textColor[status],
+    border: `2px solid ${theme.palette.neutralWhite}`,
+    fontSize: "0.75rem",
+    textTransform: "capitalize",
+  }),
+);
diff --git a/govtool/frontend/src/components/organisms/DRepCard.tsx b/govtool/frontend/src/components/organisms/DRepCard.tsx
@@ -102,8 +102,8 @@ export const DRepCard = ({
               </ButtonBase>
             </Box>
 
-            <Box display="flex" gap={3}>
-              <Box>
+            <Box sx={{ display: "flex", flex: { xl: 1 }, gap: 3 }}>
+              <Box sx={{ flex: { xl: 1 } }}>
                 <Typography
                   variant="caption"
                   color="textSecondary"