From c339870bcec93ad182c4424e728b0ecd4491914b Mon Sep 17 00:00:00 2001
From: Samir Kamal <1954121+skamril@users.noreply.github.com>
Date: Wed, 18 Sep 2024 16:12:51 +0200
Subject: [PATCH] feat(ui-commons): update style of Fieldset

---
 webapp/src/components/common/Fieldset.tsx | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/webapp/src/components/common/Fieldset.tsx b/webapp/src/components/common/Fieldset.tsx
index 442e4078b6..87dc5e9119 100644
--- a/webapp/src/components/common/Fieldset.tsx
+++ b/webapp/src/components/common/Fieldset.tsx
@@ -1,4 +1,4 @@
-import { Box, BoxProps, Divider, Typography } from "@mui/material";
+import { Box, BoxProps, Divider } from "@mui/material";
 import * as RA from "ramda-adjunct";
 import { mergeSxProp } from "../../utils/muiUtils";
 
@@ -30,7 +30,7 @@ function Fieldset(props: FieldsetProps) {
           border: "none",
           m: 0,
           p: 0,
-          pb: 5,
+          pb: 4,
           "> .MuiBox-root": {
             display: "flex",
             flexWrap: "wrap",
@@ -40,6 +40,10 @@ function Fieldset(props: FieldsetProps) {
               m: 0,
             },
           },
+          // Increase padding from the last child
+          ".Form__Content > &:last-child": {
+            pb: 2,
+          },
           // Remove padding from the last child of the dialog content
           ".MuiDialogContent-root .Form__Content > &:last-child": {
             pb: 0,
@@ -51,19 +55,14 @@ function Fieldset(props: FieldsetProps) {
       {legend && (
         <>
           {RA.isString(legend) ? (
-            <Typography
-              variant="h5"
-              sx={{ fontSize: "1.25rem", fontWeight: 400, lineHeight: 1.334 }}
-            >
-              {legend}
-            </Typography>
+            <Box component="legend">{legend}</Box>
           ) : (
             legend
           )}
           <Divider sx={{ mt: 1 }} />
         </>
       )}
-      <Box {...contentProps} sx={mergeSxProp({ pt: 1 }, contentProps?.sx)}>
+      <Box {...contentProps} sx={mergeSxProp({ pt: 3 }, contentProps?.sx)}>
         {children}
       </Box>
     </Box>