fix: Layout after MUI upgrade

podkrepi-bg · Oct 9, 2024 · dde8321 · dde8321
1 parent 570816b
commit dde8321
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 7 deletions.
diff --git a/src/components/client/donation-flow/DonationFlowForm.tsx b/src/components/client/donation-flow/DonationFlowForm.tsx
@@ -252,7 +252,7 @@ export function DonationFlowForm() {
                   error={Boolean(errors.finalAmount) && Boolean(submitCount > 0)}
                 />
               </Grid2>
-              <Grid2 container size={{ xs: 12, md: 7 }} direction={'column'}>
+              <Grid2 container size={{ xs: 12, md: 7 }} gap={2} direction={'column'}>
                 <StepSplitter content="2" active={Boolean(values.mode)} />
                 <PaymentModeSelect error={Boolean(errors.mode) && Boolean(submitCount > 0)} />
               </Grid2>

diff --git a/src/components/client/donation-flow/common/RadioCardGroup.tsx b/src/components/client/donation-flow/common/RadioCardGroup.tsx
@@ -119,7 +119,7 @@ function RadioCardGroup({ options, name, columns, loading, error }: RadioCardGro
   return (
     <FormControl fullWidth required component="fieldset" error={showError}>
       <RadioGroup value={field.value} onChange={handleChange}>
-        <Grid columnSpacing={3} container>
+        <Grid columnSpacing={3} container gap={3} mx={0}>
           {options.map((option) => (
             <Grid2 size={{ xs: 4 }} key={option.value}>
               <RadioCardItem

diff --git a/src/components/client/donation-flow/steps/PaymentModeSelect.tsx b/src/components/client/donation-flow/steps/PaymentModeSelect.tsx
@@ -37,7 +37,7 @@ export default function PaymentModeSelect({ error }: PaymentModeSelectProps) {
   return (
     <Grid2 container gap={5} id={ids['mode']} direction={'column'}>
       <Typography variant="h5">{t('donation-flow:step.payment-mode.title')}</Typography>
-      <Grid2 size={{ md: 6 }} gap={3}>
+      <Grid2 container size={{ md: 6 }}>
         {error && <DonationFormSectionErrorText message={t('general.error.select-field')} />}
         <RadioButtonGroup name="mode" columns={1} options={options} error={error} />
       </Grid2>

diff --git a/src/components/client/donation-flow/steps/payment-method/PaymentMethod.tsx b/src/components/client/donation-flow/steps/payment-method/PaymentMethod.tsx
@@ -59,8 +59,8 @@ export default function PaymentMethod({
       label: t('step.payment-method.field.method.card'),
       icon: <CardIcon sx={{ width: 80, height: 80 }} />,
       content: (
-        <Box>
-          <Alert sx={{ mt: 1, mb: 2, mx: -2 }} color="info" icon={false}>
+        <Box gap={2}>
+          <Alert sx={{ mt: 1, mb: 2 }} color="info" icon={false}>
             <Typography>
               {paymentMethodAlertMap[payment.value as DonationFormPaymentMethod]}
             </Typography>
@@ -76,7 +76,7 @@ export default function PaymentMethod({
       icon: <BankIcon sx={{ width: 80, height: 80 }} />,
       content: (
         <Box>
-          <Alert sx={{ my: 2, mx: -2 }} color="info" icon={false}>
+          <Alert sx={{ my: 2 }} color="info" icon={false}>
             <Typography>
               {paymentMethodAlertMap[payment.value as DonationFormPaymentMethod]}
             </Typography>
@@ -104,7 +104,7 @@ export default function PaymentMethod({
         <div ref={sectionRef} id="select-payment--radiocard">
           <RadioCardGroup
             loading={status === 'loading'}
-            columns={2}
+            columns={4}
             name="payment"
             error={error}
             options={options}