diff --git a/src/components/client/support-us-form/SupportUs.styled.tsx b/src/components/client/support-us-form/SupportUs.styled.tsx new file mode 100644 index 000000000..5c77c7328 --- /dev/null +++ b/src/components/client/support-us-form/SupportUs.styled.tsx @@ -0,0 +1,10 @@ +import { Typography } from '@mui/material' +import { styled } from '@mui/material/styles' + +import theme from 'common/theme' + +export const BankDetailsLabel = styled(Typography)(() => ({ + [theme.breakpoints.up('sm')]: { + paddingLeft: theme.spacing(2), + }, +})) diff --git a/src/components/client/support-us-form/SupportUsForm.tsx b/src/components/client/support-us-form/SupportUsForm.tsx index b7c460fe9..1f80d76e4 100644 --- a/src/components/client/support-us-form/SupportUsForm.tsx +++ b/src/components/client/support-us-form/SupportUsForm.tsx @@ -1,12 +1,12 @@ import React from 'react' - import { useTranslation } from 'next-i18next' import { Grid, List, Typography, Divider } from '@mui/material' -import theme from 'common/theme' import { CopyTextButton } from 'components/common/CopyTextButton' import { ibanNumber, BIC } from 'common/iban' +import { BankDetailsLabel } from './SupportUs.styled' + export default function SupportUsForm() { const { t } = useTranslation('one-time-donation') @@ -22,14 +22,14 @@ export default function SupportUsForm() { return ( - - {t('support_us:support-info')} + {t('support_us:support-info')} + + {t('third-step.bank-details')} - {t('third-step.bank-details')} - - - {t('third-step.owner_name')} + + + {t('third-step.owner_name')} {t('third-step.owner_value')} @@ -41,12 +41,13 @@ export default function SupportUsForm() { variant="contained" size="small" color="info" + sx={{ display: 'flex', justifyContent: 'center' }} /> - - {t('third-step.bank_name')} + + {t('third-step.bank_name')} - + {t('third-step.bank_value')} @@ -58,10 +59,10 @@ export default function SupportUsForm() { color="info" /> - - IBAN: + + IBAN: - + {ibanNumber} @@ -73,10 +74,10 @@ export default function SupportUsForm() { color="info" /> - - BIC: + + BIC: - + {BIC} @@ -88,12 +89,10 @@ export default function SupportUsForm() { color="info" /> - - - {t('third-step.reason-donation')} - + + {t('third-step.reason-donation')} - + {bankAccountInfo.paymentReference} diff --git a/src/components/client/support-us-form/SupportUsPage.tsx b/src/components/client/support-us-form/SupportUsPage.tsx index 268d5c9b5..4caca553b 100644 --- a/src/components/client/support-us-form/SupportUsPage.tsx +++ b/src/components/client/support-us-form/SupportUsPage.tsx @@ -9,7 +9,7 @@ import SupportUsForm from './SupportUsForm' export default function SupportPage() { const { t } = useTranslation() return ( - +