diff --git a/src/components/admin/AdminPage.tsx b/src/components/admin/AdminPage.tsx index 436f8d36c..056de36a4 100644 --- a/src/components/admin/AdminPage.tsx +++ b/src/components/admin/AdminPage.tsx @@ -78,7 +78,7 @@ export default function AdminPage() { }, border: '1px solid ' + `${colors[index % colors.length]}7A`, }}> -
router.push(href)} style={{ cursor: 'pointer' }}> + router.push(href)} sx={{ cursor: 'pointer' }}> @@ -87,7 +87,7 @@ export default function AdminPage() { {label} -
+ ))} diff --git a/src/components/admin/DetailsDialog.tsx b/src/components/admin/DetailsDialog.tsx index cd9b60292..4b6db678a 100644 --- a/src/components/admin/DetailsDialog.tsx +++ b/src/components/admin/DetailsDialog.tsx @@ -29,7 +29,7 @@ export default observer(function DetailsDialog({ modalStore, data }: Prop) { return ( - + {data.map((field) => ( diff --git a/src/components/admin/InfoRequestGrid.tsx b/src/components/admin/InfoRequestGrid.tsx index ad9e6a541..2ca40dd7a 100644 --- a/src/components/admin/InfoRequestGrid.tsx +++ b/src/components/admin/InfoRequestGrid.tsx @@ -43,7 +43,7 @@ export default function InfoRequestGrid() { return ( + {t(label)} - ({ + background: theme.palette.common.white, + position: 'absolute', + height: 'calc(100vh - 300px) !important', + border: 'none', + width: 'calc(100% - 48px)', + left: '24px', + overflowY: 'auto', + overflowX: 'hidden', + borderRadius: '0 0 13px 13px', +})) + export default observer(function Grid() { const { t } = useTranslation('irregularity') @@ -124,18 +136,7 @@ export default observer(function Grid() { return ( <> - - + @@ -46,7 +52,7 @@ export default function MarketingPage() { {label} - + ))} diff --git a/src/components/admin/organizers/grid/Grid.tsx b/src/components/admin/organizers/grid/Grid.tsx index 451c53f76..7e3ed9dbb 100644 --- a/src/components/admin/organizers/grid/Grid.tsx +++ b/src/components/admin/organizers/grid/Grid.tsx @@ -5,12 +5,24 @@ import { useTranslation } from 'next-i18next' import { Box } from '@mui/material' import { DataGrid, GridColDef, GridRenderCellParams } from '@mui/x-data-grid' import GridActions from 'components/admin/GridActions' -import theme from 'common/theme' import DeleteModal from './DeleteModal' import DetailsModal from './DetailsModal' import { ModalStore } from '../OrganizerPage' import { useOrganizersList } from 'common/hooks/organizer' import { OrganizerResponse } from 'gql/organizer' +import { styled } from '@mui/material/styles' + +const StyledDataGrid = styled(DataGrid)(({ theme }) => ({ + background: theme.palette.common.white, + position: 'absolute', + height: 'calc(100vh - 300px) !important', + border: 'none', + width: 'calc(100% - 48px)', + left: '24px', + overflowY: 'auto', + overflowX: 'hidden', + borderRadius: '0 0 13px 13px', +})) export default observer(function Grid() { const { t } = useTranslation() @@ -75,18 +87,7 @@ export default observer(function Grid() { return ( <> - )(({ theme }) => ({ + background: theme.palette.common.white, + position: 'absolute', + height: 'calc(100vh - 300px) !important', + border: 'none', + width: 'calc(100% - 48px)', + left: '24px', + overflowY: 'auto', + overflowX: 'hidden', + borderRadius: '0 0 13px 13px', +})) + export default observer(function Grid() { const { donationStore } = useStores() @@ -241,18 +255,7 @@ export default observer(function Grid() { return ( <> - - - + + - - {t('refund.title')} - + {t('refund.title')} @@ -101,7 +107,7 @@ export default observer(function RefundModal() { - + ) }) diff --git a/src/components/admin/recurring-donation/grid/Grid.tsx b/src/components/admin/recurring-donation/grid/Grid.tsx index 05dcc34ab..0176967c0 100644 --- a/src/components/admin/recurring-donation/grid/Grid.tsx +++ b/src/components/admin/recurring-donation/grid/Grid.tsx @@ -3,6 +3,7 @@ import { UseQueryResult } from '@tanstack/react-query' import { useTranslation } from 'next-i18next' import { IconButton, Tooltip, Box } from '@mui/material' import { DataGrid, GridColDef, GridRenderCellParams } from '@mui/x-data-grid' +import { styled } from '@mui/material/styles' import { RecurringDonationResponse } from 'gql/recurring-donation' import { useAllRecurringDonations } from 'common/hooks/recurringDonation' @@ -20,7 +21,18 @@ import { authConfig } from 'service/restRequests' import CancelPresentationIcon from '@mui/icons-material/CancelPresentation' import EditIcon from '@mui/icons-material/Edit' import { routes } from 'common/routes' -import theme from 'common/theme' + +const StyledDataGrid = styled(DataGrid)(({ theme }) => ({ + background: theme.palette.common.white, + position: 'absolute', + height: 'calc(100vh - 300px) !important', + border: 'none', + width: 'calc(100% - 48px)', + left: '24px', + overflowY: 'auto', + overflowX: 'hidden', + borderRadius: '0 0 13px 13px', +})) export default function Grid() { const { t } = useTranslation('recurring-donation') @@ -133,18 +145,7 @@ export default function Grid() { return ( <> - ({ + background: theme.palette.common.white, + position: 'absolute', + height: 'calc(100vh - 300px) !important', + border: 'none', + width: 'calc(100% - 48px)', + left: '24px', + overflowY: 'auto', + overflowX: 'hidden', + borderRadius: '0 0 13px 13px', +})) export default observer(function Grid() { const { t } = useTranslation('transfer') @@ -128,18 +140,7 @@ export default observer(function Grid() { return ( <> - )(({ theme }) => ({ + background: theme.palette.common.white, + position: 'absolute', + height: 'calc(100vh - 300px) !important', + border: 'none', + width: 'calc(100% - 48px)', + left: '24px', + overflowY: 'auto', + overflowX: 'hidden', + borderRadius: '0 0 13px 13px', +})) export default observer(function Grid() { const { t, i18n } = useTranslation('vaults') @@ -124,18 +135,7 @@ export default observer(function Grid() { return ( <> - theme.palette.common.white}; + position: absolute; + height: calc(100vh - 300px) !important; + border: none; + width: calc(100% - 48px); + left: 24px; + overflow-y: auto; + overflow-x: hidden; + border-radius: 0 0 13px 13px; +` export default observer(function Grid() { const { t } = useTranslation() @@ -131,18 +143,7 @@ export default observer(function Grid() { return ( <> - @@ -38,10 +39,7 @@ export default function SupervisoryBoardSection() { /> {teamMember.name} - + {t('about.linkedIn')} diff --git a/src/components/client/auth/profile/AffiliateProgramTab.tsx b/src/components/client/auth/profile/AffiliateProgramTab.tsx index 7164ad0aa..f857f7a86 100644 --- a/src/components/client/auth/profile/AffiliateProgramTab.tsx +++ b/src/components/client/auth/profile/AffiliateProgramTab.tsx @@ -71,6 +71,16 @@ const Root = styled(Box)(({ theme }) => ({ }, })) +const StyledDataGrid = styled(DataGrid)(({ theme }) => ({ + background: theme.palette.common.white, + border: 'none', + width: 'calc(100% - 48px)', + left: '24px', + overflowY: 'auto', + overflowX: 'hidden', + borderRadius: '0 0 13px 13px', +})) + type Props = { t: TFunction children: React.ReactNode @@ -218,16 +228,7 @@ function GuaranteedDonationsTable({ affiliate }: GuaranteedDonationsTableProps) {t('profile:affiliate.guaranteedDonationsList')} - e.donations) || []} columns={columns} diff --git a/src/components/client/auth/profile/DisableAccountModal.tsx b/src/components/client/auth/profile/DisableAccountModal.tsx index 600391b2b..bfb11d8ed 100644 --- a/src/components/client/auth/profile/DisableAccountModal.tsx +++ b/src/components/client/auth/profile/DisableAccountModal.tsx @@ -26,6 +26,7 @@ const classes = { graySpan: `${PREFIX}-graySpan`, irrevirsibleAction: `${PREFIX}-irrevirsibleAction`, close: `${PREFIX}-close`, + bulletList: `${PREFIX}-bulletList`, } const StyledModal = styled(Modal)(({ theme }) => ({ @@ -69,6 +70,10 @@ const StyledModal = styled(Modal)(({ theme }) => ({ position: 'absolute', right: '10px', }, + [`& .${classes.bulletList}`]: { + listStyle: 'disc', + paddingLeft: '20px', + }, })) const validationSchema: yup.SchemaOf> = yup @@ -158,7 +163,7 @@ function DisableAccountModal({ {t('profile:disableModal.beforeDisableMsg')} -
    +
    • {t('profile:disableModal.deactivateEmails')} {t('profile:disableModal.link')}. diff --git a/src/components/client/auth/profile/MyCampaignNotificationsTable.tsx b/src/components/client/auth/profile/MyCampaignNotificationsTable.tsx index b68e0fec0..0883dce2b 100644 --- a/src/components/client/auth/profile/MyCampaignNotificationsTable.tsx +++ b/src/components/client/auth/profile/MyCampaignNotificationsTable.tsx @@ -47,6 +47,15 @@ const StyledGrid = styled('div')(({ theme }) => ({ }, })) +const StyledDataGrid = styled(DataGrid)(({ theme }) => ({ + background: theme.palette.common.white, + width: 'calc(100% - 48px)', + left: '24px', + overflowY: 'auto', + overflowX: 'hidden', + borderRadius: '0 0 13px 13px', +})) + export default function MyCampaignNotificationsTable() { const { t, i18n } = useTranslation() const { data = [] } = useUserCampaignNotificationSubscriptions() @@ -124,15 +133,7 @@ export default function MyCampaignNotificationsTable() { /> )} {data.length !== 0 ? ( - {campaigns.length !== 0 ? ( @@ -240,16 +253,7 @@ export default function MyCampaingsTable() { {t('profile:myCampaigns.history')} - ({ + background: theme.palette.common.white, + border: 'none', + width: 'calc(100% - 48px)', + left: '24px', + overflowY: 'auto', + overflowX: 'hidden', + borderRadius: '0 0 13px 13px', +})) + export default function MyDonatedToCampaignTable() { const { t, i18n } = useTranslation() const { data = [] } = useUserDonationsCampaigns() @@ -179,16 +189,7 @@ export default function MyDonatedToCampaignTable() { return ( <> {data.length !== 0 ? ( - ({ }, })) +const StyledDialogContent = styled(DialogContent)({ + overflow: 'hidden', + padding: '4rem', + paddingTop: '1rem', + width: '100%', +}) + +const CloseButtonGrid = styled(Grid)({ + display: 'flex', + justifyContent: 'end', + marginRight: '-4rem', +}) + +const SuccessMessage = styled(DialogContent)({ + textAlign: 'center', + fontSize: 20, + fontWeight: 600, + paddingBottom: 6, +}) + +const CenteredDialogTitle = styled(DialogTitle)({ + textAlign: 'center', + width: '100%', +}) + +const NoScrollDialog = styled(Dialog)({ + '& .MuiDialog-paper': { + overflow: 'hidden', + }, +}) + interface ModalProps { campaignId: string setOpen: React.Dispatch> @@ -88,22 +119,16 @@ export default function RenderCampaignNotificationsConfirmModal({ } return ( - - - + + + - + {!isSuccess ? ( - + {t('profile:myNotifications.modal.campaign-title-unsubscribe')} - + @@ -120,12 +145,11 @@ export default function RenderCampaignNotificationsConfirmModal({ ) : ( - + {t('profile:myNotifications.modal.campaign-unsubscribe-msg')} - + )} - - + + ) } diff --git a/src/components/client/auth/profile/MyNotificationsConfirmModal.tsx b/src/components/client/auth/profile/MyNotificationsConfirmModal.tsx index 8ce724ee5..f5c516972 100644 --- a/src/components/client/auth/profile/MyNotificationsConfirmModal.tsx +++ b/src/components/client/auth/profile/MyNotificationsConfirmModal.tsx @@ -24,6 +24,10 @@ const PREFIX = 'ProfileNotificationsModal' const classes = { actionBtn: `${PREFIX}-subscriptions`, + dialogContent: `${PREFIX}-dialogContent`, + closeButtonWrapper: `${PREFIX}-closeButtonWrapper`, + dialogTitle: `${PREFIX}-dialogTitle`, + successMessage: `${PREFIX}-successMessage`, } const StyledGrid = styled(Grid)(({ theme }) => ({ @@ -40,6 +44,31 @@ const StyledGrid = styled(Grid)(({ theme }) => ({ }, })) +const StyledDialogContent = styled(DialogContent)({ + overflow: 'hidden', + padding: '4rem', + paddingTop: '1rem', + width: '100%', +}) + +const StyledCloseButtonWrapper = styled(Grid)({ + display: 'flex', + justifyContent: 'end', + marginRight: '-4rem', +}) + +const StyledDialogTitle = styled(DialogTitle)({ + textAlign: 'center', + width: '100%', +}) + +const StyledSuccessMessage = styled(DialogContent)({ + textAlign: 'center', + fontSize: 20, + fontWeight: 600, + paddingBottom: 6, +}) + interface ModalProps { type: 'subscribe' | 'unsubscribe' setOpen: React.Dispatch> @@ -107,23 +136,17 @@ export default function RenderNotificationsConfirmModal({ type, setOpen }: Modal return ( - - + + - + {!isSuccess ? ( - + {type === 'subscribe' ? t('profile:myNotifications.modal.title-subscribe') : t('profile:myNotifications.modal.title-unsubscribe')} - + @@ -140,14 +163,13 @@ export default function RenderNotificationsConfirmModal({ type, setOpen }: Modal ) : ( - + {type === 'subscribe' ? t('profile:myNotifications.modal.unsubscribe-msg') : t('profile:myNotifications.modal.subscribe-msg')} - + )} - + ) } diff --git a/src/components/client/auth/profile/MyNotificationsTab.tsx b/src/components/client/auth/profile/MyNotificationsTab.tsx index ba994e552..4b697d589 100644 --- a/src/components/client/auth/profile/MyNotificationsTab.tsx +++ b/src/components/client/auth/profile/MyNotificationsTab.tsx @@ -133,7 +133,7 @@ export default function MyNotificationsTab() { - {' '} - + + + {t('notifications:unsubscribe.subscription-fail')} + + + + + {' '} )} diff --git a/src/components/client/support-form/steps/Role.tsx b/src/components/client/support-form/steps/Role.tsx index 030049cbd..dbebb4661 100644 --- a/src/components/client/support-form/steps/Role.tsx +++ b/src/components/client/support-form/steps/Role.tsx @@ -16,7 +16,7 @@ export default function Role({ name, label, description }: RoleProps) { {description && ( - + )} diff --git a/src/components/common/BankTransfer.tsx b/src/components/common/BankTransfer.tsx index 101b50b9f..686641503 100644 --- a/src/components/common/BankTransfer.tsx +++ b/src/components/common/BankTransfer.tsx @@ -25,7 +25,7 @@ export const BankTransfer = () => { return ( - + {t('about-project:association-name')} {t('about-project:bank-name')} @@ -38,7 +38,7 @@ export const BankTransfer = () => { whiteSpace="nowrap" variant="body2" component="strong" - style={{ fontWeight: 'bold' }}> + sx={{ fontWeight: 'bold' }}> {ibanNumber} diff --git a/src/components/common/CookieConsentPopup.tsx b/src/components/common/CookieConsentPopup.tsx index 5973fae2f..481d57004 100644 --- a/src/components/common/CookieConsentPopup.tsx +++ b/src/components/common/CookieConsentPopup.tsx @@ -14,6 +14,40 @@ const CookieConsentPopup = ({ }: CookieConsentPopupProps) => { const { t } = useTranslation() + const containerStyle = { + backgroundColor: '#EAF4FC', + alignItems: 'center', + justifyContent: 'space-evenly', + padding: theme.spacing(2.5), + gap: theme.spacing(2.5), + } + + const contentStyle = { + fontSize: theme.typography.pxToRem(16), + color: theme.palette.common.black, + padding: theme.spacing(0, 2), + margin: 0, + maxWidth: theme.spacing(132.5), + } + + const buttonStyle = { + color: theme.palette.primary.main, + borderRadius: theme.borders.semiRound, + padding: theme.spacing(1.125, 1.5), + backgroundColor: theme.palette.common.white, + border: `1px solid ${theme.palette.primary.main}`, + margin: theme.spacing(0, 3.75), + } + + const declineBtnStyle = { + color: theme.palette.primary.main, + borderRadius: theme.borders.semiRound, + padding: theme.spacing(1, 1.5), + backgroundColor: theme.palette.common.white, + border: `1px solid ${theme.palette.primary.main}`, + margin: theme.spacing(0, 3.75, 0, 0), + } + return ( + style={containerStyle} + contentStyle={contentStyle} + buttonStyle={buttonStyle} + declineButtonStyle={declineBtnStyle}> {t('cookieConsent')} ) diff --git a/src/components/common/ExternalLinkMenuItem.tsx b/src/components/common/ExternalLinkMenuItem.tsx index 26f5b1877..565d63bd3 100644 --- a/src/components/common/ExternalLinkMenuItem.tsx +++ b/src/components/common/ExternalLinkMenuItem.tsx @@ -1,15 +1,19 @@ import React from 'react' import { MenuItem, MenuItemProps } from '@mui/material' -import theme from 'common/theme' +import { styled } from '@mui/material/styles' +const StyledLink = styled('a')(({ theme }) => ({ + color: theme.palette.text.primary, + textDecoration: 'none', +})) export default function ExternalLinkMenuItem({ href, target, ...props }: MenuItemProps & Pick) { return ( - + - + ) } diff --git a/src/components/common/ImageSlider.tsx b/src/components/common/ImageSlider.tsx index d2f94b66f..41c575773 100644 --- a/src/components/common/ImageSlider.tsx +++ b/src/components/common/ImageSlider.tsx @@ -7,7 +7,7 @@ import { styled } from '@mui/material/styles' import { IconButton, Modal, Typography } from '@mui/material' import { useTranslation } from 'next-i18next' import theme from 'common/theme' -import { ImageSlider } from 'components/common/campaign-file/roles' +import { type ImageSlider} from 'components/common/campaign-file/roles' import Gallery from './Gallery' import FullscreenExitIcon from '@mui/icons-material/FullscreenExit' @@ -17,6 +17,7 @@ const classes = { slider: `${PREFIX}-slider`, carouselFullScreen: `${PREFIX}-fullScreen`, minimizeFullScreenBtn: `${PREFIX}-minimizeFullScreenBtn`, + singleImageContainer: `${PREFIX}-singleImageContainer`, } const Root = styled('div')(() => ({ @@ -109,6 +110,9 @@ const Root = styled('div')(() => ({ fontSize: 50, }, }, + [`& .${classes.singleImageContainer}`]: { + textAlign: 'center', + }, })) type Props = { @@ -141,7 +145,7 @@ export function ImageSlider({ sliderImages }: Props) { if (sliderImages.length === 1) { return ( -
      +
      {sliderImages[0].fileName}, -) => ( - -