Added a gap between label and inputs #1270

This commit is contained in:
Shaikh Mohd Mudassir Hussain
2024-12-04 15:27:02 -07:00
parent 4c051ff0ac
commit ecd1282c4d
3 changed files with 17 additions and 7 deletions

View File

@@ -21,6 +21,10 @@ const PasswordPanel = () => {
const theme = useTheme();
const dispatch = useDispatch();
// Define the constant for consistent gap
const SPACING_GAP = theme.spacing(12); // EDITED: Added a constant for gap size.
//redux state
const { authToken, isLoading } = useSelector((state) => state.auth);
@@ -127,7 +131,7 @@ const PasswordPanel = () => {
direction="row"
justifyContent={"flex-start"}
alignItems={"center"}
gap={theme.spacing(8)}
gap={SPACING_GAP} // Replaced gap with SPACING_GAP constant
flexWrap={"wrap"}
>
<Typography
@@ -152,7 +156,7 @@ const PasswordPanel = () => {
<Stack
direction="row"
alignItems={"center"}
gap={theme.spacing(8)}
gap={SPACING_GAP} //Replaced gap with SPACING_GAP constant
flexWrap={"wrap"}
>
<Typography
@@ -178,7 +182,7 @@ const PasswordPanel = () => {
<Stack
direction="row"
alignItems={"center"}
gap={theme.spacing(8)}
gap={SPACING_GAP} //Replaced gap with SPACING_GAP constant
flexWrap={"wrap"}
>
<Typography

View File

@@ -29,6 +29,9 @@ import Dialog from "../../Dialog";
const ProfilePanel = () => {
const theme = useTheme();
const dispatch = useDispatch();
// Define the constant for consistent gap
const SPACING_GAP = theme.spacing(12);
//redux state
const { user, authToken, isLoading } = useSelector((state) => state.auth);
@@ -223,7 +226,7 @@ const ProfilePanel = () => {
className="edit-profile-form"
noValidate
spellCheck="false"
gap={theme.spacing(20)}
gap={SPACING_GAP} // Applied SPACING_GAP for consistent spacing
>
<Stack direction="row">
<Box flex={0.9}>

View File

@@ -30,6 +30,9 @@ const TeamPanel = () => {
const theme = useTheme();
// Define the constant for consistent gap
const SPACING_GAP = theme.spacing(12);
const { authToken, user } = useSelector((state) => state.auth);
//TODO
// const [orgStates, setOrgStates] = useState({
@@ -228,7 +231,7 @@ const TeamPanel = () => {
{/* <Stack component="form">
<Box sx={{ alignSelf: "flex-start" }}>
<Typography component="h1">Organization name</Typography>
</Box>
</Box>
<Stack
direction="row"
justifyContent="flex-end"
@@ -275,7 +278,7 @@ const TeamPanel = () => {
component="form"
noValidate
spellCheck="false"
gap={theme.spacing(12)}
gap={SPACING_GAP} // Added a constant Spacing gap
>
<Typography component="h1">Team members</Typography>
<Stack
@@ -339,7 +342,7 @@ const TeamPanel = () => {
theme={theme}
>
<TextInput
marginBottom={theme.spacing(12)}
marginBottom={SPACING_GAP} // Applied SPACING_GAP for consistent spacing
type="email"
id="input-team-member"
placeholder="Email"