From 348782fe0b250be07124863f9e6e36c05036ba41 Mon Sep 17 00:00:00 2001
From: Katina Anachkova <kanachkova@theoremus.com>
Date: Sun, 10 Nov 2024 12:42:08 +0200
Subject: [PATCH 1/5] switch admin related styles to sx and styled

---
 src/components/admin/AdminPage.tsx                    |  4 ++--
 src/components/admin/DetailsDialog.tsx                |  2 +-
 src/components/admin/InfoRequestGrid.tsx              |  2 +-
 src/components/admin/affiliates/AffiliatesPage.tsx    |  3 ++-
 .../admin/bank-transactions/grid/Filter.tsx           |  8 ++------
 src/components/admin/bank-transactions/grid/Grid.tsx  |  2 +-
 .../grid/RenderEditBankDonationStatusCell.tsx         | 11 +++--------
 src/components/admin/styles/Admin.styled.tsx          | 10 ++++++++++
 src/components/client/campaigns/CampaignDetails.tsx   |  2 +-
 9 files changed, 23 insertions(+), 21 deletions(-)
 create mode 100644 src/components/admin/styles/Admin.styled.tsx

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`,
                 }}>
-                <div onClick={() => router.push(href)} style={{ cursor: 'pointer' }}>
+                <Box onClick={() => router.push(href)} sx={{ cursor: 'pointer' }}>
                   <CardContent>
                     <Box textAlign="center">
                       <Icon fontSize="large" />
@@ -87,7 +87,7 @@ export default function AdminPage() {
                       {label}
                     </Typography>
                   </CardContent>
-                </div>
+                </Box>
               </Card>
             </Grid>
           ))}
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 (
     <Dialog open={isDetailsOpen} onClose={hideDetails} sx={containerStyles}>
-      <Card style={{ paddingTop: '35px' }}>
+      <Card sx={{ pt: '35px' }}>
         <CloseModalButton onClose={hideDetails} />
         <CardContent>
           {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 (
     <DataGrid
-      style={{
+      sx={{
         background: theme.palette.common.white,
         height: 'calc(100vh - 300px)',
         border: 'none',
diff --git a/src/components/admin/affiliates/AffiliatesPage.tsx b/src/components/admin/affiliates/AffiliatesPage.tsx
index 8df41bd2a..d0f8aa658 100644
--- a/src/components/admin/affiliates/AffiliatesPage.tsx
+++ b/src/components/admin/affiliates/AffiliatesPage.tsx
@@ -197,11 +197,12 @@ export default function AffiliatesPage() {
       },
     },
   ]
+
   return (
     <AdminLayout>
       <AdminContainer title={t('profile:affiliate.index')}>
         <DataGrid
-          style={{
+          sx={{
             background: theme.palette.common.white,
             position: 'absolute',
             height: 'calc(100vh - 300px)',
diff --git a/src/components/admin/bank-transactions/grid/Filter.tsx b/src/components/admin/bank-transactions/grid/Filter.tsx
index 97e4de66e..b171f70f6 100644
--- a/src/components/admin/bank-transactions/grid/Filter.tsx
+++ b/src/components/admin/bank-transactions/grid/Filter.tsx
@@ -47,16 +47,12 @@ export default function DropdownFilter(props: DropdownFilterProps) {
   }
 
   return (
-    <FormControl style={selectElementStyle}>
+    <FormControl sx={selectElementStyle}>
       <InputLabel size="small">{t(label)}</InputLabel>
       <Select
         startAdornment={
           value ? (
-            <Close
-              fontSize="small"
-              style={closeIconStyle}
-              onClick={(e) => handleClear(e, name, '')}
-            />
+            <Close fontSize="small" sx={closeIconStyle} onClick={(e) => handleClear(e, name, '')} />
           ) : null
         }
         name={name}
diff --git a/src/components/admin/bank-transactions/grid/Grid.tsx b/src/components/admin/bank-transactions/grid/Grid.tsx
index 4982dc484..1e2157132 100644
--- a/src/components/admin/bank-transactions/grid/Grid.tsx
+++ b/src/components/admin/bank-transactions/grid/Grid.tsx
@@ -136,7 +136,7 @@ export default observer(function Grid() {
     <>
       <Box sx={{ mx: 'auto', width: 700 }}>
         <DataGrid
-          style={{
+          sx={{
             background: theme.palette.common.white,
             position: 'absolute',
             height: 'calc(100vh - 300px)',
diff --git a/src/components/admin/bank-transactions/grid/RenderEditBankDonationStatusCell.tsx b/src/components/admin/bank-transactions/grid/RenderEditBankDonationStatusCell.tsx
index 5a7beed63..a48c619c4 100644
--- a/src/components/admin/bank-transactions/grid/RenderEditBankDonationStatusCell.tsx
+++ b/src/components/admin/bank-transactions/grid/RenderEditBankDonationStatusCell.tsx
@@ -17,6 +17,7 @@ import { useMutation } from '@tanstack/react-query'
 import { useEditTransactionPaymentRef } from 'service/bankTransaction'
 import { AlertStore } from 'stores/AlertStore'
 import { ApiError } from 'next/dist/server/api-utils'
+import { StyledDialogContent } from 'components/admin/styles/Admin.styled'
 
 interface RenderCellProps {
   params: GridRenderCellParams
@@ -97,13 +98,7 @@ export default function RenderBankDonationStatusCell({ params }: RenderCellProps
 
     return (
       <Dialog open onClose={handleClose} sx={{ scroll: 'none' }} fullWidth={true} maxWidth={'sm'}>
-        <DialogContent
-          style={{
-            overflow: 'hidden',
-            padding: '4rem',
-            paddingTop: '1rem',
-            width: '100%',
-          }}>
+        <StyledDialogContent>
           <Grid style={{ display: 'flex', justifyContent: 'end', marginRight: '-4rem' }}>
             <CloseModalButton href={''} onClose={handleClose} />
           </Grid>
@@ -133,7 +128,7 @@ export default function RenderBankDonationStatusCell({ params }: RenderCellProps
               </Grid>
             </GenericForm>
           </Grid>
-        </DialogContent>
+        </StyledDialogContent>
       </Dialog>
     )
   }
diff --git a/src/components/admin/styles/Admin.styled.tsx b/src/components/admin/styles/Admin.styled.tsx
new file mode 100644
index 000000000..738f7a194
--- /dev/null
+++ b/src/components/admin/styles/Admin.styled.tsx
@@ -0,0 +1,10 @@
+import { styled } from '@mui/material/styles'
+import theme from 'common/theme'
+import { DialogContent } from '@mui/material'
+
+export const StyledDialogContent = styled(DialogContent)({
+  overflow: 'hidden',
+  padding: '4rem',
+  paddingTop: '1rem',
+  width: '100%',
+})
diff --git a/src/components/client/campaigns/CampaignDetails.tsx b/src/components/client/campaigns/CampaignDetails.tsx
index 142c4ad78..3422f22c2 100644
--- a/src/components/client/campaigns/CampaignDetails.tsx
+++ b/src/components/client/campaigns/CampaignDetails.tsx
@@ -153,7 +153,7 @@ export default function CampaignDetails({ campaign }: Props) {
             {t('common:notifications.subscribe')}
           </Typography>
         </Grid>
-        <Grid item xs={12} style={{ paddingTop: '20px' }}>
+        <Grid item xs={12} sx={{ pt: '20px' }}>
           <ReactQuill readOnly theme="bubble" value={campaign.description} />
         </Grid>
         <Grid item xs={12}>

From 597d9a33f2cb7b8f483be4656503a6d1a14f9213 Mon Sep 17 00:00:00 2001
From: Katina Anachkova <kanachkova@theoremus.com>
Date: Sun, 10 Nov 2024 22:23:20 +0200
Subject: [PATCH 2/5] set sx prop and styled components in admin panel

---
 .../grid/RenderEditBankDonationStatusCell.tsx   | 10 ++++------
 .../grid/RerunTransactionsSyncDialog.tsx        | 17 +++++------------
 .../bankaccounts/grid/BankAccountsGrid.tsx      |  2 +-
 .../grid/BankAccountsGridHelper.tsx             |  9 +++++----
 src/components/admin/benefactor/grid/Grid.tsx   |  2 +-
 src/components/admin/beneficiary/grid/Grid.tsx  |  2 +-
 .../CampaignApplicationsGrid.tsx                |  2 +-
 .../admin/campaign-news/CampaignNewsGrid.tsx    |  2 +-
 .../admin/campaign-news/GridActions.tsx         |  2 +-
 .../admin/campaigns/grid/CampaignGrid.tsx       |  2 +-
 .../admin/campaigns/grid/GridActions.tsx        |  2 +-
 src/components/admin/cities/grid/CityGrid.tsx   |  2 +-
 .../coordinators/grid/CoordinatorsGrid.tsx      |  2 +-
 .../grid/CoordinatorsGridHelper.tsx             |  3 ++-
 .../admin/countries/grid/CountryGrid.tsx        |  2 +-
 src/components/admin/donations/grid/Filter.tsx  |  2 +-
 src/components/admin/styles/Admin.styled.tsx    |  8 +++++++-
 17 files changed, 35 insertions(+), 36 deletions(-)

diff --git a/src/components/admin/bank-transactions/grid/RenderEditBankDonationStatusCell.tsx b/src/components/admin/bank-transactions/grid/RenderEditBankDonationStatusCell.tsx
index a48c619c4..10837d4a0 100644
--- a/src/components/admin/bank-transactions/grid/RenderEditBankDonationStatusCell.tsx
+++ b/src/components/admin/bank-transactions/grid/RenderEditBankDonationStatusCell.tsx
@@ -17,7 +17,7 @@ import { useMutation } from '@tanstack/react-query'
 import { useEditTransactionPaymentRef } from 'service/bankTransaction'
 import { AlertStore } from 'stores/AlertStore'
 import { ApiError } from 'next/dist/server/api-utils'
-import { StyledDialogContent } from 'components/admin/styles/Admin.styled'
+import { StyledDialogContent, StyledDialogTitle } from 'components/admin/styles/Admin.styled'
 
 interface RenderCellProps {
   params: GridRenderCellParams
@@ -99,19 +99,17 @@ export default function RenderBankDonationStatusCell({ params }: RenderCellProps
     return (
       <Dialog open onClose={handleClose} sx={{ scroll: 'none' }} fullWidth={true} maxWidth={'sm'}>
         <StyledDialogContent>
-          <Grid style={{ display: 'flex', justifyContent: 'end', marginRight: '-4rem' }}>
+          <Grid sx={{ display: 'flex', justifyContent: 'end', mr: '-4rem' }}>
             <CloseModalButton href={''} onClose={handleClose} />
           </Grid>
-          <DialogTitle style={{ display: 'flex', justifyContent: 'center', width: '100%' }}>
-            {t('bank-transactions:cta.apply-ref-heading')}
-          </DialogTitle>
+          <StyledDialogTitle>{t('bank-transactions:cta.apply-ref-heading')}</StyledDialogTitle>
           <Grid container direction="column" component="section">
             <GenericForm
               onSubmit={onSubmit}
               initialValues={{ paymentRef: '' }}
               validationSchema={validationSchema}>
               <Grid container spacing={3}>
-                <Grid item xs={12} sx={{ marginBottom: '1rem' }}>
+                <Grid item xs={12} sx={{ mb: '1rem' }}>
                   <FormTextField
                     type="text"
                     label="bank-transactions:payment-ref"
diff --git a/src/components/admin/bank-transactions/grid/RerunTransactionsSyncDialog.tsx b/src/components/admin/bank-transactions/grid/RerunTransactionsSyncDialog.tsx
index 21f5582da..11d97ad03 100644
--- a/src/components/admin/bank-transactions/grid/RerunTransactionsSyncDialog.tsx
+++ b/src/components/admin/bank-transactions/grid/RerunTransactionsSyncDialog.tsx
@@ -10,6 +10,7 @@ import { useRerunBankImportForDate } from 'service/bankTransaction'
 import FormDatePicker from 'components/common/form/FormDatePicker'
 import { useMutation } from '@tanstack/react-query'
 import { AlertStore } from 'stores/AlertStore'
+import { StyledDialogContent, StyledDialogTitle } from 'components/admin/styles/Admin.styled'
 
 const validationSchema: yup.SchemaOf<RerunTransactionsDatesInput> = yup
   .object()
@@ -54,19 +55,11 @@ export default function RerunTransactionSyncModal({
       sx={{ scroll: 'none' }}
       fullWidth={true}
       maxWidth={'sm'}>
-      <DialogContent
-        style={{
-          overflow: 'hidden',
-          padding: '4rem',
-          paddingTop: '1rem',
-          width: '100%',
-        }}>
-        <Grid style={{ display: 'flex', justifyContent: 'end', marginRight: '-4rem' }}>
+      <StyledDialogContent>
+        <Grid sx={{ display: 'flex', justifyContent: 'end', mr: '-4rem' }}>
           <CloseModalButton href={''} onClose={handleClose} />
         </Grid>
-        <DialogTitle style={{ display: 'flex', justifyContent: 'center', width: '100%' }}>
-          {t('bank-transactions:rerun-dates')}
-        </DialogTitle>
+        <StyledDialogTitle> {t('bank-transactions:rerun-dates')}</StyledDialogTitle>
         <Grid container direction="column" component="section">
           <GenericForm
             onSubmit={onSubmit}
@@ -89,7 +82,7 @@ export default function RerunTransactionSyncModal({
             </Grid>
           </GenericForm>
         </Grid>
-      </DialogContent>
+      </StyledDialogContent>
     </Dialog>
   )
 }
diff --git a/src/components/admin/bankaccounts/grid/BankAccountsGrid.tsx b/src/components/admin/bankaccounts/grid/BankAccountsGrid.tsx
index c5aaf6e22..e04d147d1 100644
--- a/src/components/admin/bankaccounts/grid/BankAccountsGrid.tsx
+++ b/src/components/admin/bankaccounts/grid/BankAccountsGrid.tsx
@@ -64,7 +64,7 @@ export default observer(function BankAccountsGrid() {
   return (
     <>
       <DataGrid
-        style={{
+        sx={{
           background: theme.palette.common.white,
           position: 'absolute',
           height: 'calc(100vh - 300px)',
diff --git a/src/components/admin/bankaccounts/grid/BankAccountsGridHelper.tsx b/src/components/admin/bankaccounts/grid/BankAccountsGridHelper.tsx
index 9c61e18aa..6f5e1cc73 100644
--- a/src/components/admin/bankaccounts/grid/BankAccountsGridHelper.tsx
+++ b/src/components/admin/bankaccounts/grid/BankAccountsGridHelper.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import { GridColDef, GridRenderCellParams } from '@mui/x-data-grid'
+import { Box } from '@mui/material'
 
 const renderCell = (cellValues: GridRenderCellParams): React.ReactNode => {
   const style =
@@ -15,14 +16,14 @@ const renderCell = (cellValues: GridRenderCellParams): React.ReactNode => {
       ? { color: 'green' }
       : { color: '' }
 
-  return <div style={style}>{cellValues.value}</div>
+  return <Box sx={style}>{cellValues.value}</Box>
 }
 
 export const renderCellWithdraws = (): React.ReactNode => {
   return (
-    <div style={{ width: '100%' }}>
-      <p style={{ cursor: 'pointer', color: 'hsl(206,100%,40%)' }}>Отваряне</p>
-    </div>
+    <Box sx={{ width: '100%' }}>
+      <Box sx={{ cursor: 'pointer', color: 'hsl(206,100%,40%)' }}>Отваряне</Box>
+    </Box>
   )
 }
 
diff --git a/src/components/admin/benefactor/grid/Grid.tsx b/src/components/admin/benefactor/grid/Grid.tsx
index 65c006fea..214f3819d 100644
--- a/src/components/admin/benefactor/grid/Grid.tsx
+++ b/src/components/admin/benefactor/grid/Grid.tsx
@@ -69,7 +69,7 @@ export default observer(function Grid() {
     <>
       <Box sx={{ marginTop: '2%', mx: 'auto', width: 700 }}>
         <DataGrid
-          style={{
+          sx={{
             background: theme.palette.common.white,
             position: 'absolute',
             height: 'calc(100vh - 300px)',
diff --git a/src/components/admin/beneficiary/grid/Grid.tsx b/src/components/admin/beneficiary/grid/Grid.tsx
index ebe34e5a0..0ed91c65b 100644
--- a/src/components/admin/beneficiary/grid/Grid.tsx
+++ b/src/components/admin/beneficiary/grid/Grid.tsx
@@ -121,7 +121,7 @@ export default observer(function Grid() {
     <>
       <Box sx={{ marginTop: '2%', mx: 'auto', width: 700 }}>
         <DataGrid
-          style={{
+          sx={{
             background: theme.palette.common.white,
             position: 'absolute',
             height: 'calc(100vh - 300px)',
diff --git a/src/components/admin/campaign-applications/CampaignApplicationsGrid.tsx b/src/components/admin/campaign-applications/CampaignApplicationsGrid.tsx
index d6d3b3f78..6c9c5f014 100644
--- a/src/components/admin/campaign-applications/CampaignApplicationsGrid.tsx
+++ b/src/components/admin/campaign-applications/CampaignApplicationsGrid.tsx
@@ -80,7 +80,7 @@ export default function CampaignApplicationsGrid() {
 
   return (
     <DataGrid
-      style={{
+      sx={{
         background: theme.palette.common.white,
         position: 'absolute',
         height: 'calc(100vh - 299px)',
diff --git a/src/components/admin/campaign-news/CampaignNewsGrid.tsx b/src/components/admin/campaign-news/CampaignNewsGrid.tsx
index 83024653b..82d97e2c0 100644
--- a/src/components/admin/campaign-news/CampaignNewsGrid.tsx
+++ b/src/components/admin/campaign-news/CampaignNewsGrid.tsx
@@ -150,7 +150,7 @@ export default function CampaignNewsGrid() {
         </Link>
       </Toolbar>
       <DataGrid
-        style={{
+        sx={{
           background: theme.palette.common.white,
           position: 'absolute',
           height: 'calc(100vh - 300px)',
diff --git a/src/components/admin/campaign-news/GridActions.tsx b/src/components/admin/campaign-news/GridActions.tsx
index 3fa4a6cc7..35557c05f 100644
--- a/src/components/admin/campaign-news/GridActions.tsx
+++ b/src/components/admin/campaign-news/GridActions.tsx
@@ -17,7 +17,7 @@ type Props = {
 export default function GridActions({ id, allowDelete = false, onView, onDelete }: Props) {
   return (
     <Box
-      style={{
+      sx={{
         width: '100%',
         height: '100%',
         display: 'flex',
diff --git a/src/components/admin/campaigns/grid/CampaignGrid.tsx b/src/components/admin/campaigns/grid/CampaignGrid.tsx
index 6d2c7c993..d93f2f584 100644
--- a/src/components/admin/campaigns/grid/CampaignGrid.tsx
+++ b/src/components/admin/campaigns/grid/CampaignGrid.tsx
@@ -298,7 +298,7 @@ export default function CampaignGrid() {
         </Link>
       </Toolbar>
       <DataGrid
-        style={{
+        sx={{
           background: theme.palette.common.white,
           position: 'absolute',
           height: 'calc(100vh - 300px)',
diff --git a/src/components/admin/campaigns/grid/GridActions.tsx b/src/components/admin/campaigns/grid/GridActions.tsx
index d65712d70..596887c5a 100644
--- a/src/components/admin/campaigns/grid/GridActions.tsx
+++ b/src/components/admin/campaigns/grid/GridActions.tsx
@@ -17,7 +17,7 @@ type Props = {
 export default function GridActions({ id, allowDelete = false, onView, onDelete }: Props) {
   return (
     <Box
-      style={{
+      sx={{
         width: '100%',
         height: '100%',
         display: 'flex',
diff --git a/src/components/admin/cities/grid/CityGrid.tsx b/src/components/admin/cities/grid/CityGrid.tsx
index 73aee6fc5..95c366e71 100644
--- a/src/components/admin/cities/grid/CityGrid.tsx
+++ b/src/components/admin/cities/grid/CityGrid.tsx
@@ -65,7 +65,7 @@ export default observer(function CitiesGrid() {
   return (
     <>
       <DataGrid
-        style={{
+        sx={{
           background: theme.palette.common.white,
           position: 'absolute',
           height: 'calc(100vh - 300px)',
diff --git a/src/components/admin/coordinators/grid/CoordinatorsGrid.tsx b/src/components/admin/coordinators/grid/CoordinatorsGrid.tsx
index ce0343488..7529e2eae 100644
--- a/src/components/admin/coordinators/grid/CoordinatorsGrid.tsx
+++ b/src/components/admin/coordinators/grid/CoordinatorsGrid.tsx
@@ -79,7 +79,7 @@ export default function CoordinatorsGrid() {
   return (
     <>
       <DataGrid
-        style={{
+        sx={{
           background: theme.palette.common.white,
           position: 'absolute',
           height: 'calc(100vh - 300px)',
diff --git a/src/components/admin/coordinators/grid/CoordinatorsGridHelper.tsx b/src/components/admin/coordinators/grid/CoordinatorsGridHelper.tsx
index 6daf390d7..cd64528cd 100644
--- a/src/components/admin/coordinators/grid/CoordinatorsGridHelper.tsx
+++ b/src/components/admin/coordinators/grid/CoordinatorsGridHelper.tsx
@@ -1,3 +1,4 @@
+import { Box } from '@mui/material'
 import { GridColDef, GridRenderCellParams } from '@mui/x-data-grid'
 
 import React from 'react'
@@ -16,7 +17,7 @@ const renderCell = (cellValues: GridRenderCellParams): React.ReactNode => {
       ? { color: 'green' }
       : { color: '' }
 
-  return <div style={style}>{cellValues.value}</div>
+  return <Box sx={style}>{cellValues.value}</Box>
 }
 
 export const commonProps: Partial<GridColDef> = {
diff --git a/src/components/admin/countries/grid/CountryGrid.tsx b/src/components/admin/countries/grid/CountryGrid.tsx
index 28f7f9311..f08a0e659 100644
--- a/src/components/admin/countries/grid/CountryGrid.tsx
+++ b/src/components/admin/countries/grid/CountryGrid.tsx
@@ -77,7 +77,7 @@ export default observer(function Grid() {
     <Root>
       <Box sx={{ marginTop: '2%', mx: 'auto', width: 700 }}>
         <DataGrid
-          style={{
+          sx={{
             background: theme.palette.common.white,
             position: 'absolute',
             height: 'calc(100vh - 300px)',
diff --git a/src/components/admin/donations/grid/Filter.tsx b/src/components/admin/donations/grid/Filter.tsx
index 97e4de66e..c6dc690f7 100644
--- a/src/components/admin/donations/grid/Filter.tsx
+++ b/src/components/admin/donations/grid/Filter.tsx
@@ -47,7 +47,7 @@ export default function DropdownFilter(props: DropdownFilterProps) {
   }
 
   return (
-    <FormControl style={selectElementStyle}>
+    <FormControl sx={selectElementStyle}>
       <InputLabel size="small">{t(label)}</InputLabel>
       <Select
         startAdornment={
diff --git a/src/components/admin/styles/Admin.styled.tsx b/src/components/admin/styles/Admin.styled.tsx
index 738f7a194..004459ea5 100644
--- a/src/components/admin/styles/Admin.styled.tsx
+++ b/src/components/admin/styles/Admin.styled.tsx
@@ -1,6 +1,6 @@
 import { styled } from '@mui/material/styles'
 import theme from 'common/theme'
-import { DialogContent } from '@mui/material'
+import { DialogContent, DialogTitle } from '@mui/material'
 
 export const StyledDialogContent = styled(DialogContent)({
   overflow: 'hidden',
@@ -8,3 +8,9 @@ export const StyledDialogContent = styled(DialogContent)({
   paddingTop: '1rem',
   width: '100%',
 })
+
+export const StyledDialogTitle = styled(DialogTitle)({
+  display: 'flex',
+  justifyContent: 'center',
+  width: '100%',
+})

From 91035573b625c04964c9092cc86c133f868c0105 Mon Sep 17 00:00:00 2001
From: Katina Anachkova <kanachkova@theoremus.com>
Date: Mon, 11 Nov 2024 12:48:27 +0200
Subject: [PATCH 3/5] adjust donations grid filter stlye

---
 src/components/admin/donations/grid/Filter.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/admin/donations/grid/Filter.tsx b/src/components/admin/donations/grid/Filter.tsx
index c6dc690f7..453e21511 100644
--- a/src/components/admin/donations/grid/Filter.tsx
+++ b/src/components/admin/donations/grid/Filter.tsx
@@ -37,8 +37,8 @@ export default function DropdownFilter(props: DropdownFilterProps) {
 
   const selectElementStyle = {
     minWidth: 115,
-    marginRight: 1,
-    marginLeft: 1,
+    mr: 0.125,
+    ml: 0.125,
   }
 
   const closeIconStyle = {

From eaa87ed6a8ebf3242de975fc926ca1797835023b Mon Sep 17 00:00:00 2001
From: Katina Anachkova <katianachkova@gmail.com>
Date: Mon, 16 Dec 2024 10:50:02 +0200
Subject: [PATCH 4/5] refactor styles

---
 .../SupervisoryBoardSection.tsx               |   6 +-
 .../client/auth/profile/MyCampaignsTable.tsx  |  24 ++--
 src/components/common/CookieConsentPopup.tsx  |  68 ++++++-----
 src/components/common/LinkButton.tsx          |  31 ++---
 src/components/common/LinkMenuItem.tsx        |   9 +-
 .../common/campaign-types/grid/Grid.tsx       |  26 ++--
 .../common/file-upload/FileUpload.tsx         |  10 +-
 .../common/file-upload/UploadedFilesList.tsx  |  51 ++++----
 .../common/navigation/NestedMenu.tsx          |   2 +-
 .../common/person/grid/Grid.styled.tsx        |  56 +++++++++
 src/components/common/person/grid/Grid.tsx    | 111 ++++--------------
 11 files changed, 201 insertions(+), 193 deletions(-)
 create mode 100644 src/components/common/person/grid/Grid.styled.tsx

diff --git a/src/components/client/about/sections/SupervisoryBoardSection/SupervisoryBoardSection.tsx b/src/components/client/about/sections/SupervisoryBoardSection/SupervisoryBoardSection.tsx
index e34316c5f..875cd8575 100644
--- a/src/components/client/about/sections/SupervisoryBoardSection/SupervisoryBoardSection.tsx
+++ b/src/components/client/about/sections/SupervisoryBoardSection/SupervisoryBoardSection.tsx
@@ -22,6 +22,7 @@ import {
 
 export default function SupervisoryBoardSection() {
   const { t } = useTranslation('about')
+  console.log(data)
 
   return (
     <Grid component="section">
@@ -38,10 +39,7 @@ export default function SupervisoryBoardSection() {
               />
               <NameLinkedInWrapper>
                 <TeamMemberName variant="subtitle1">{teamMember.name}</TeamMemberName>
-                <LinkedInButton
-                  href={teamMember.linkedInProfile}
-                  target="_blank"
-                  style={{ float: 'left' }}>
+                <LinkedInButton href={teamMember.linkedInProfile} target="_blank">
                   <LinkedInIcon color="action" fontSize="large" />
                   <LinkedInText variant="subtitle1">{t('about.linkedIn')}</LinkedInText>
                 </LinkedInButton>
diff --git a/src/components/client/auth/profile/MyCampaignsTable.tsx b/src/components/client/auth/profile/MyCampaignsTable.tsx
index 0da8bbd4d..fcd2888ae 100644
--- a/src/components/client/auth/profile/MyCampaignsTable.tsx
+++ b/src/components/client/auth/profile/MyCampaignsTable.tsx
@@ -2,6 +2,7 @@ import { useTranslation } from 'next-i18next'
 import { useState, useMemo } from 'react'
 import { DataGrid, GridColDef, GridRenderCellParams } from '@mui/x-data-grid'
 import { Tooltip, Button, Box, Typography } from '@mui/material'
+import { styled } from '@mui/material/styles'
 
 import { getExactDateTime, getRelativeDate } from 'common/util/date'
 import { money } from 'common/util/money'
@@ -43,6 +44,17 @@ export default function MyCampaingsTable() {
     width: 100,
     headerAlign: 'left',
   }
+
+  const StyledDataGrid = styled(DataGrid)({
+    background: theme.palette.common.white,
+    border: 'none',
+    width: 'calc(100% - 48px)',
+    left: '24px',
+    overflowY: 'auto',
+    overflowX: 'hidden',
+    borderRadius: '0 0 13px 13px',
+  })
+
   const columns: GridColDef[] = [
     {
       field: 'actions',
@@ -232,6 +244,7 @@ export default function MyCampaingsTable() {
       headerAlign: 'left',
     },
   ]
+
   return (
     <>
       {campaigns.length !== 0 ? (
@@ -240,16 +253,7 @@ export default function MyCampaingsTable() {
             <Typography className={classes.h3}>{t('profile:myCampaigns.history')}</Typography>
           </Box>
           <ProfileTab name={ProfileTabs.myCampaigns}>
-            <DataGrid
-              style={{
-                background: theme.palette.common.white,
-                border: 'none',
-                width: 'calc(100% - 48px)',
-                left: '24px',
-                overflowY: 'auto',
-                overflowX: 'hidden',
-                borderRadius: '0 0 13px 13px',
-              }}
+            <StyledDataGrid
               rows={campaigns || []}
               columns={columns}
               initialState={{ pagination: { paginationModel: { pageSize: 5 } } }}
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 (
     <CookieConsent
       enableDeclineButton
@@ -22,36 +56,10 @@ const CookieConsentPopup = ({
       onDecline={handleDeclineCookie}
       buttonText={t('cookieConsentButton')}
       declineButtonText={t('cookieRejectButton')}
-      style={{
-        backgroundColor: '#EAF4FC',
-        alignItems: 'center',
-        justifyContent: 'space-evenly',
-        padding: theme.spacing(2.5),
-        gap: theme.spacing(2.5),
-      }}
-      contentStyle={{
-        fontSize: theme.typography.pxToRem(16),
-        color: theme.palette.common.black,
-        padding: theme.spacing(0, 2),
-        margin: 0,
-        maxWidth: theme.spacing(132.5),
-      }}
-      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),
-      }}
-      declineButtonStyle={{
-        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),
-      }}>
+      style={containerStyle}
+      contentStyle={contentStyle}
+      buttonStyle={buttonStyle}
+      declineButtonStyle={declineBtnStyle}>
       {t('cookieConsent')}
     </CookieConsent>
   )
diff --git a/src/components/common/LinkButton.tsx b/src/components/common/LinkButton.tsx
index 4ef53939a..f04d4fc03 100644
--- a/src/components/common/LinkButton.tsx
+++ b/src/components/common/LinkButton.tsx
@@ -1,6 +1,6 @@
 import { Button, ButtonProps } from '@mui/material'
 import Link, { LinkProps } from 'next/link'
-import { forwardRef, Ref } from 'react'
+import { type CSSProperties, forwardRef, Ref } from 'react'
 
 export type LinkRef = HTMLButtonElement
 export type NextLinkProps = ButtonProps &
@@ -9,18 +9,21 @@ export type NextLinkProps = ButtonProps &
 const LinkButton = (
   { href, as, prefetch, legacyBehavior, locale, disabled, ...props }: NextLinkProps,
   ref: Ref<LinkRef>,
-) => (
-  <Link
-    href={href}
-    as={as}
-    prefetch={prefetch}
-    locale={locale}
-    passHref
-    tabIndex={disabled ? -1 : 0}
-    legacyBehavior={legacyBehavior}
-    style={{ pointerEvents: disabled ? 'none' : 'all' }}>
-    <Button tabIndex={-1} ref={ref} disabled={disabled} {...props} />
-  </Link>
-)
+) => {
+  const style = { pointerEvents: disabled ? 'none' : 'all' } as CSSProperties
 
+  return (
+    <Link
+      href={href}
+      as={as}
+      prefetch={prefetch}
+      locale={locale}
+      passHref
+      tabIndex={disabled ? -1 : 0}
+      legacyBehavior={legacyBehavior}
+      style={style}>
+      <Button tabIndex={-1} ref={ref} disabled={disabled} {...props} />
+    </Link>
+  )
+}
 export default forwardRef(LinkButton)
diff --git a/src/components/common/LinkMenuItem.tsx b/src/components/common/LinkMenuItem.tsx
index 4e8b9ef9d..f9a811c19 100644
--- a/src/components/common/LinkMenuItem.tsx
+++ b/src/components/common/LinkMenuItem.tsx
@@ -6,14 +6,9 @@ import theme from 'common/theme'
 export type LinkRef = HTMLAnchorElement
 export type NextLinkProps = MenuItemProps & Pick<LinkProps, 'href' | 'as' | 'prefetch' | 'locale'>
 export default function LinkMenuItem({ href, as, prefetch, locale, ...props }: NextLinkProps) {
+  const style = { color: theme.palette.text.primary }
   return (
-    <Link
-      as={as}
-      passHref
-      href={href}
-      prefetch={prefetch}
-      locale={locale}
-      style={{ color: theme.palette.text.primary }}>
+    <Link as={as} passHref href={href} prefetch={prefetch} locale={locale} style={style}>
       <MenuItem {...props} />
     </Link>
   )
diff --git a/src/components/common/campaign-types/grid/Grid.tsx b/src/components/common/campaign-types/grid/Grid.tsx
index 2e2b423ee..540d33406 100644
--- a/src/components/common/campaign-types/grid/Grid.tsx
+++ b/src/components/common/campaign-types/grid/Grid.tsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react'
 import { UseQueryResult } from '@tanstack/react-query'
 import { useTranslation } from 'next-i18next'
 import { Box, Typography } from '@mui/material'
+import { styled } from '@mui/material/styles'
 import { DataGrid, GridColDef, GridRenderCellParams } from '@mui/x-data-grid'
 import { observer } from 'mobx-react'
 
@@ -31,6 +32,18 @@ export default observer(function Grid() {
     headerAlign: 'left',
   }
 
+  const StyledDataGrid = styled(DataGrid)({
+    background: theme.palette.common.white,
+    position: 'absolute',
+    height: 'calc(100vh - 300px)',
+    border: 'none',
+    width: 'calc(100% - 48px)',
+    left: '24px',
+    overflowY: 'auto',
+    overflowX: 'hidden',
+    borderRadius: '0 0 13px 13px',
+  })
+
   const columns: GridColDef[] = [
     {
       field: 'actions',
@@ -82,18 +95,7 @@ export default observer(function Grid() {
   return (
     <>
       <Box sx={{ marginTop: '2%', mx: 'auto', width: 700 }}>
-        <DataGrid
-          style={{
-            background: theme.palette.common.white,
-            position: 'absolute',
-            height: 'calc(100vh - 300px)',
-            border: 'none',
-            width: 'calc(100% - 48px)',
-            left: '24px',
-            overflowY: 'auto',
-            overflowX: 'hidden',
-            borderRadius: '0 0 13px 13px',
-          }}
+        <StyledDataGrid
           rows={data || []}
           columns={columns}
           pageSizeOptions={[5, 10]}
diff --git a/src/components/common/file-upload/FileUpload.tsx b/src/components/common/file-upload/FileUpload.tsx
index 8ad2af498..75d8f9979 100644
--- a/src/components/common/file-upload/FileUpload.tsx
+++ b/src/components/common/file-upload/FileUpload.tsx
@@ -1,4 +1,5 @@
-import { Button } from '@mui/material'
+import Button from '@mui/material/Button'
+import { styled } from '@mui/material/styles'
 
 function FileUpload({
   onUpload,
@@ -9,13 +10,16 @@ function FileUpload({
   buttonLabel: string
   accept?: string
 }) {
+  const Input = styled('input')({
+    display: 'none',
+  })
+
   return (
     <label htmlFor="contained-button-file">
-      <input
+      <Input
         id="contained-button-file"
         multiple
         type="file"
-        style={{ display: 'none' }}
         onChange={(e) => onUpload([...(e.target.files as FileList)])}
         {...rest}
       />
diff --git a/src/components/common/file-upload/UploadedFilesList.tsx b/src/components/common/file-upload/UploadedFilesList.tsx
index 4c3e15a25..71df63634 100644
--- a/src/components/common/file-upload/UploadedFilesList.tsx
+++ b/src/components/common/file-upload/UploadedFilesList.tsx
@@ -9,6 +9,8 @@ import {
   ListItemText,
   Tooltip,
 } from '@mui/material'
+
+import { styled } from '@mui/material/styles'
 import { useTranslation } from 'next-i18next'
 import { createContext, useContext, useEffect, useState } from 'react'
 import CenteredSpinner from '../CenteredSpinner'
@@ -100,6 +102,28 @@ export function FilePreview(f: UploadedFile) {
   const [display, setDisplay] = useState<'block' | 'none'>('none')
   const [blobUrl, setBlobUrl] = useState<string | undefined>()
 
+  const StyledDiv = styled('div')({
+    position: 'fixed',
+    top: '5vw',
+    left: '5vh',
+    boxShadow: '2px 4px 5px',
+    width: '90vw',
+    height: '90vh',
+    zIndex: 99999,
+    display,
+    backgroundColor: 'white',
+  })
+
+  const FixedDimentionsDiv = styled('div')({
+    width: '100%',
+    height: '100%',
+  })
+
+  const StyledIFrame = styled('iframe')({
+    width: '100%',
+    height: '100%',
+  })
+
   useEffect(() => {
     if (fetch) {
       setDisplay('block')
@@ -111,6 +135,7 @@ export function FilePreview(f: UploadedFile) {
         })
     }
   }, [fetch])
+
   return (
     <>
       <Tooltip title={'preview'}>
@@ -118,29 +143,13 @@ export function FilePreview(f: UploadedFile) {
           <Preview />
         </IconButton>
       </Tooltip>
-      <div
-        style={{
-          position: 'fixed',
-          top: '5vw',
-          left: '5vh',
-          boxShadow: '2px 4px 5px',
-          width: '90vw',
-          height: '90vh',
-          zIndex: 99999,
-          display,
-          backgroundColor: 'white',
-        }}>
+      <StyledDiv>
         {display === 'block' ? (
-          <iframe
-            id={f.id}
-            src={blobUrl}
-            allowFullScreen={true}
-            style={{ width: '100%', height: '100%' }}
-          />
+          <StyledIFrame id={f.id} src={blobUrl} allowFullScreen={true} />
         ) : (
-          <div style={{ width: '100%', height: '100%' }}>
+          <FixedDimentionsDiv>
             <CenteredSpinner />
-          </div>
+          </FixedDimentionsDiv>
         )}
         <Button
           color="secondary"
@@ -149,7 +158,7 @@ export function FilePreview(f: UploadedFile) {
           onClick={() => setDisplay('none')}>
           <Close />
         </Button>
-      </div>
+      </StyledDiv>
     </>
   )
 }
diff --git a/src/components/common/navigation/NestedMenu.tsx b/src/components/common/navigation/NestedMenu.tsx
index 9c4454dda..9a9274259 100644
--- a/src/components/common/navigation/NestedMenu.tsx
+++ b/src/components/common/navigation/NestedMenu.tsx
@@ -25,7 +25,7 @@ export default observer(function NestedMenu() {
     padding: 0,
   }
   return (
-    <Accordion expanded={accordionOpen} elevation={0} style={{ margin: '0px' }}>
+    <Accordion expanded={accordionOpen} elevation={0} sx={{ margin: 0 }}>
       <AccordionSummary
         sx={{ p: 0, height: '60px' }}
         aria-controls="panel1a-content"
diff --git a/src/components/common/person/grid/Grid.styled.tsx b/src/components/common/person/grid/Grid.styled.tsx
new file mode 100644
index 000000000..23ac24e3f
--- /dev/null
+++ b/src/components/common/person/grid/Grid.styled.tsx
@@ -0,0 +1,56 @@
+import theme from 'common/theme'
+import { styled } from '@mui/material/styles'
+import { DataGrid } from '@mui/x-data-grid'
+import CheckIcon from '@mui/icons-material/Check'
+import CloseOutlinedIcon from '@mui/icons-material/CloseOutlined'
+import { Avatar } from '@mui/material'
+
+export const StyledDataGrid = styled(DataGrid)({
+    background: theme.palette.common.white,
+    position: 'absolute',
+    height: 'calc(100vh - 300px)',
+    border: 'none',
+    width: 'calc(100% - 48px)',
+    left: '24px',
+    overflowY: 'auto',
+    overflowX: 'hidden',
+    borderRadius: '0 0 13px 13px',
+  })
+
+  export const Centered = styled('div')({
+    flex: 1,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+  })
+  
+  export const NameContainer = styled('div')({
+    display: 'flex',
+    alignItems: 'center',
+  })
+  
+  export const StyledLink = styled('a')({
+    textDecoration: 'underline',
+    color: '#0070f3',
+    cursor: 'pointer',
+  })
+  
+  export const StyledCheckIcon = styled(CheckIcon)({
+    color: '#00b386',
+  })
+  
+  export const CloseIcon = styled(CloseOutlinedIcon)({
+    color: '#ff5050',
+  })
+  
+  export const StyledAvatar = styled(Avatar)<{ color: string }>(({ color }) => ({
+    marginRight: 8,
+    backgroundColor: color,
+    fontWeight: 'bold',
+    fontSize: 14,
+    width: 32,
+    height: 32,
+    borderRadius: '50%',
+    border: '1px solid rgba(0, 0, 0, 0.1)',
+    transition: 'box-shadow 0.3s ease-in-out',
+  }))
\ No newline at end of file
diff --git a/src/components/common/person/grid/Grid.tsx b/src/components/common/person/grid/Grid.tsx
index d6575d8df..a2f442b58 100644
--- a/src/components/common/person/grid/Grid.tsx
+++ b/src/components/common/person/grid/Grid.tsx
@@ -2,10 +2,8 @@ import { observer } from 'mobx-react'
 import React, { useState } from 'react'
 import { UseQueryResult } from '@tanstack/react-query'
 import { useTranslation } from 'next-i18next'
-import { Box, Avatar, Typography } from '@mui/material'
-import { styled } from '@mui/material/styles'
+import { Box, Typography } from '@mui/material'
 import {
-  DataGrid,
   GridCellParams,
   GridColDef,
   GridPaginationModel,
@@ -13,8 +11,6 @@ import {
   GridSortDirection,
   GridSortModel,
 } from '@mui/x-data-grid'
-import CheckIcon from '@mui/icons-material/Check'
-import CloseOutlinedIcon from '@mui/icons-material/CloseOutlined'
 
 import GridActions from 'components/admin/GridActions'
 import DeleteModal from './DeleteModal'
@@ -26,23 +22,24 @@ import {
   usePersonList,
 } from 'common/hooks/person'
 import { routes } from 'common/routes'
-import theme from 'common/theme'
 import { PersonPaginatedResponse } from 'gql/person'
 import { PaginationData, SortData } from 'gql/types'
 import Switch from '@mui/material/Switch'
+import {
+  Centered,
+  CloseIcon,
+  NameContainer,
+  StyledAvatar,
+  StyledCheckIcon,
+  StyledDataGrid,
+  StyledLink,
+} from './Grid.styled'
 
 const defaultSort: SortData = {
   sortBy: 'createdAt',
   sortOrder: 'desc',
 }
 
-const Centered = styled('div')({
-  flex: 1,
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-})
-
 export default observer(function Grid() {
   const { t } = useTranslation()
 
@@ -163,23 +160,10 @@ export default observer(function Grid() {
         const color = getColor(initials)
 
         return (
-          <div style={{ display: 'flex', alignItems: 'center' }}>
-            <Avatar
-              style={{
-                marginRight: 8,
-                backgroundColor: color,
-                fontWeight: 'bold',
-                fontSize: 14,
-                width: 32,
-                height: 32,
-                borderRadius: '50%',
-                border: '1px solid rgba(0, 0, 0, 0.1)',
-                transition: 'box-shadow 0.3s ease-in-out',
-              }}>
-              {initials}
-            </Avatar>
+          <NameContainer>
+            <StyledAvatar color={color}>{initials}</StyledAvatar>
             {name}
-          </div>
+          </NameContainer>
         )
       },
     },
@@ -189,17 +173,7 @@ export default observer(function Grid() {
       editable: false,
       minWidth: 240,
       renderCell: (params: GridRenderCellParams): React.ReactNode => {
-        return (
-          <a
-            href={`mailto:${params.row.email}`}
-            style={{
-              textDecoration: 'underline',
-              color: '#0070f3',
-              cursor: 'pointer',
-            }}>
-            {params.row.email}
-          </a>
-        )
+        return <StyledLink href={`mailto:${params.row.email}`}>{params.row.email}</StyledLink>
       },
     },
     {
@@ -221,15 +195,7 @@ export default observer(function Grid() {
       headerName: t('person:admin.fields.organizer'),
       minWidth: 130,
       renderCell: (params: GridRenderCellParams): React.ReactNode => {
-        return (
-          <Centered>
-            {params.row.organizer ? (
-              <CheckIcon style={{ color: '#00b386' }} />
-            ) : (
-              <CloseOutlinedIcon style={{ color: '#ff5050' }} />
-            )}
-          </Centered>
-        )
+        return <Centered>{params.row.organizer ? <StyledCheckIcon /> : <CloseIcon />}</Centered>
       },
     },
     {
@@ -237,15 +203,7 @@ export default observer(function Grid() {
       headerName: t('person:admin.fields.coordinator'),
       minWidth: 130,
       renderCell: (params: GridRenderCellParams): React.ReactNode => {
-        return (
-          <Centered>
-            {params.row.coordinators ? (
-              <CheckIcon style={{ color: '#00b386' }} />
-            ) : (
-              <CloseOutlinedIcon style={{ color: '#ff5050' }} />
-            )}
-          </Centered>
-        )
+        return <Centered>{params.row.coordinators ? <StyledCheckIcon /> : <CloseIcon />}</Centered>
       },
     },
     {
@@ -255,11 +213,7 @@ export default observer(function Grid() {
       renderCell: (params: GridRenderCellParams): React.ReactNode => {
         return (
           <Centered>
-            {params.row.beneficiaries.length > 0 ? (
-              <CheckIcon style={{ color: '#00b386' }} />
-            ) : (
-              <CloseOutlinedIcon style={{ color: '#ff5050' }} />
-            )}
+            {params.row.beneficiaries.length > 0 ? <StyledCheckIcon /> : <CloseIcon />}
           </Centered>
         )
       },
@@ -270,13 +224,7 @@ export default observer(function Grid() {
       minWidth: 140,
       renderCell: (params: GridRenderCellParams): React.ReactNode => {
         return (
-          <Centered>
-            {params.row.emailConfirmed ? (
-              <CheckIcon style={{ color: '#00b386' }} />
-            ) : (
-              <CloseOutlinedIcon style={{ color: '#ff5050' }} />
-            )}
-          </Centered>
+          <Centered>{params.row.emailConfirmed ? <StyledCheckIcon /> : <CloseIcon />}</Centered>
         )
       },
     },
@@ -285,15 +233,7 @@ export default observer(function Grid() {
       headerName: t('person:admin.fields.newsletter'),
       minWidth: 130,
       renderCell: (params: GridRenderCellParams): React.ReactNode => {
-        return (
-          <Centered>
-            {params.row.newsletter ? (
-              <CheckIcon style={{ color: '#00b386' }} />
-            ) : (
-              <CloseOutlinedIcon style={{ color: '#ff5050' }} />
-            )}
-          </Centered>
-        )
+        return <Centered>{params.row.newsletter ? <StyledCheckIcon /> : <CloseIcon />}</Centered>
       },
     },
     {
@@ -315,18 +255,7 @@ export default observer(function Grid() {
   return (
     <>
       <Box>
-        <DataGrid
-          style={{
-            background: theme.palette.common.white,
-            position: 'absolute',
-            height: 'calc(100vh - 300px)',
-            border: 'none',
-            width: 'calc(100% - 48px)',
-            left: '24px',
-            overflowY: 'auto',
-            overflowX: 'hidden',
-            borderRadius: '0 0 13px 13px',
-          }}
+        <StyledDataGrid
           rows={items}
           columns={columns}
           columnVisibilityModel={{

From 5f88da18f4122734c5d5c01261e1c8c0b04c62d6 Mon Sep 17 00:00:00 2001
From: Katina Anachkova <katianachkova@gmail.com>
Date: Sat, 11 Jan 2025 22:44:14 +0200
Subject: [PATCH 5/5] remove inline styles

---
 .../grid/RenderEditBankDonationStatusCell.tsx |  2 +-
 .../grid/RerunTransactionsSyncDialog.tsx      |  2 +-
 .../coordinators/grid/CoordinatorsGrid.tsx    | 42 +++++++-------
 src/components/admin/documents/grid/Grid.tsx  | 27 ++++-----
 src/components/admin/donations/grid/Grid.tsx  | 27 +++++----
 .../admin/irregularity/admin/grid/Grid.tsx    | 27 ++++-----
 .../admin/marketing/MarketingPage.tsx         | 12 +++-
 src/components/admin/organizers/grid/Grid.tsx | 27 ++++-----
 src/components/admin/payments/grid/Grid.tsx   | 27 +++++----
 .../admin/payments/modals/RefundModal.tsx     | 28 +++++----
 .../admin/recurring-donation/grid/Grid.tsx    | 27 ++++-----
 src/components/admin/styles/Admin.styled.tsx  |  1 -
 src/components/admin/transfers/grid/Grid.tsx  | 27 ++++-----
 src/components/admin/vaults/grid/Grid.tsx     | 28 ++++-----
 .../admin/withdrawals/grid/Grid.tsx           | 27 ++++-----
 .../auth/profile/AffiliateProgramTab.tsx      | 21 +++----
 .../auth/profile/DisableAccountModal.tsx      |  7 ++-
 .../profile/MyCampaignNotificationsTable.tsx  | 19 +++---
 .../profile/MyDonatedToCampaignsTable.tsx     | 23 ++++----
 .../MyNotificationsCampaignConfirmModal.tsx   | 58 +++++++++++++------
 .../profile/MyNotificationsConfirmModal.tsx   | 52 ++++++++++++-----
 .../auth/profile/MyNotificationsTab.tsx       |  2 +-
 .../profile/MyRecurringCampaignsTable.tsx     | 22 +++----
 .../client/auth/profile/ProfilePage.tsx       |  6 +-
 .../client/auth/register/RegisterPage.tsx     |  4 +-
 .../client/campaign-news/CampaignNewsList.tsx |  4 +-
 .../client/campaign-news/CampaignNewsPage.tsx |  2 +-
 .../campaign-news/SingleArticlePage.tsx       | 12 +---
 .../campaign-news/secured/NewsAdminPage.tsx   |  6 +-
 .../client/campaigns/CampaignNewsSection.tsx  |  2 +-
 .../CumulativeDonationsChart.tsx              |  2 +-
 .../GroupedDonationsChart.tsx                 |  6 +-
 .../HourlyDonationsChart.tsx                  |  2 +-
 .../UniqueDonationsChart.tsx                  |  2 +-
 .../client/campaigns/StatisticsPage.tsx       |  4 +-
 .../donation-flow/common/RadioCardGroup.tsx   |  2 +-
 .../client/layout/Footer/LogoSocialIcons.tsx  |  2 +-
 .../notifications/CampaignSubscribeModal.tsx  | 42 ++++++--------
 .../notifications/GeneralSubscribeModal.tsx   | 44 +++++++-------
 .../client/notifications/SubscriptionPage.tsx | 20 +++----
 .../notifications/UNsubscriptionsPage.tsx     | 35 ++++++-----
 .../client/support-form/steps/Role.tsx        |  2 +-
 src/components/common/BankTransfer.tsx        |  4 +-
 .../common/ExternalLinkMenuItem.tsx           | 10 +++-
 src/components/common/ImageSlider.tsx         |  8 ++-
 45 files changed, 418 insertions(+), 338 deletions(-)

diff --git a/src/components/admin/bank-transactions/grid/RenderEditBankDonationStatusCell.tsx b/src/components/admin/bank-transactions/grid/RenderEditBankDonationStatusCell.tsx
index 10837d4a0..2d3770014 100644
--- a/src/components/admin/bank-transactions/grid/RenderEditBankDonationStatusCell.tsx
+++ b/src/components/admin/bank-transactions/grid/RenderEditBankDonationStatusCell.tsx
@@ -1,5 +1,5 @@
 import { Edit } from '@mui/icons-material'
-import { Dialog, Box, Tooltip, Grid, DialogContent, DialogTitle } from '@mui/material'
+import { Dialog, Box, Tooltip, Grid } from '@mui/material'
 import { GridRenderCellParams, useGridApiContext } from '@mui/x-data-grid'
 import { paymentRef } from 'common/form/validation'
 import FormTextField from 'components/common/form/FormTextField'
diff --git a/src/components/admin/bank-transactions/grid/RerunTransactionsSyncDialog.tsx b/src/components/admin/bank-transactions/grid/RerunTransactionsSyncDialog.tsx
index 11d97ad03..5552f435a 100644
--- a/src/components/admin/bank-transactions/grid/RerunTransactionsSyncDialog.tsx
+++ b/src/components/admin/bank-transactions/grid/RerunTransactionsSyncDialog.tsx
@@ -1,4 +1,4 @@
-import { Dialog, Grid, DialogContent, DialogTitle } from '@mui/material'
+import { Dialog, Grid } from '@mui/material'
 import GenericForm from 'components/common/form/GenericForm'
 import SubmitButton from 'components/common/form/SubmitButton'
 import { useState } from 'react'
diff --git a/src/components/admin/coordinators/grid/CoordinatorsGrid.tsx b/src/components/admin/coordinators/grid/CoordinatorsGrid.tsx
index 7529e2eae..802a26477 100644
--- a/src/components/admin/coordinators/grid/CoordinatorsGrid.tsx
+++ b/src/components/admin/coordinators/grid/CoordinatorsGrid.tsx
@@ -11,6 +11,13 @@ import { ModalStore } from '../CoordinatorsPage'
 import DeleteModal from './DeleteModal'
 import DetailsModal from './DetailsModal'
 import { useTranslation } from 'next-i18next'
+import { styled } from '@mui/material/styles'
+
+const StyledMailLink = styled('a')(() => ({
+  textDecoration: 'underline',
+  color: '#0070f3',
+  cursor: 'pointer',
+}))
 
 export default function CoordinatorsGrid() {
   const { t } = useTranslation('coordinator')
@@ -47,15 +54,9 @@ export default function CoordinatorsGrid() {
       width: 250,
       renderCell: (params: GridRenderCellParams): React.ReactNode => {
         return (
-          <a
-            href={`mailto:${params.row.person.email}`}
-            style={{
-              textDecoration: 'underline',
-              color: '#0070f3',
-              cursor: 'pointer',
-            }}>
+          <StyledMailLink href={`mailto:${params.row.person.email}`}>
             {params.row.person.email}
-          </a>
+          </StyledMailLink>
         )
       },
     },
@@ -76,20 +77,21 @@ export default function CoordinatorsGrid() {
     page: 0,
   })
 
+  const StyledDataGrid = styled(DataGrid)({
+    background: theme.palette.common.white,
+    position: 'absolute',
+    height: 'calc(100vh - 300px)',
+    border: 'none',
+    width: 'calc(100% - 48px)',
+    left: '24px',
+    overflowY: 'auto',
+    overflowX: 'hidden',
+    borderRadius: '0 0 13px 13px',
+  })
+
   return (
     <>
-      <DataGrid
-        sx={{
-          background: theme.palette.common.white,
-          position: 'absolute',
-          height: 'calc(100vh - 300px)',
-          border: 'none',
-          width: 'calc(100% - 48px)',
-          left: '24px',
-          overflowY: 'auto',
-          overflowX: 'hidden',
-          borderRadius: '0 0 13px 13px',
-        }}
+      <StyledDataGrid
         rows={data || []}
         columns={columns}
         pageSizeOptions={[5, 10]}
diff --git a/src/components/admin/documents/grid/Grid.tsx b/src/components/admin/documents/grid/Grid.tsx
index e2367d6fc..5c03b34a6 100644
--- a/src/components/admin/documents/grid/Grid.tsx
+++ b/src/components/admin/documents/grid/Grid.tsx
@@ -4,17 +4,29 @@ import { useTranslation } from 'next-i18next'
 import { Box } from '@mui/material'
 import { DataGrid, GridColDef, GridRenderCellParams } from '@mui/x-data-grid'
 import { observer } from 'mobx-react'
+import { styled } from '@mui/material/styles'
 
 import { routes } from 'common/routes'
 import { DocumentResponse } from 'gql/document'
 import GridActions from 'components/admin/GridActions'
 import { useDocumentsList } from 'common/hooks/documents'
-import theme from 'common/theme'
 
 import { ModalStore } from '../DocumentsPage'
 import DeleteModal from './DeleteModal'
 import DetailsModal from './DetailsModal'
 
+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 [paginationModel, setPaginationModel] = useState({
     pageSize: 10,
@@ -84,18 +96,7 @@ export default observer(function Grid() {
   return (
     <>
       <Box sx={{ marginTop: '2%', mx: 'auto', width: 700 }}>
-        <DataGrid
-          style={{
-            background: theme.palette.common.white,
-            position: 'absolute',
-            height: 'calc(100vh - 300px)',
-            border: 'none',
-            width: 'calc(100% - 48px)',
-            left: '24px',
-            overflowY: 'auto',
-            overflowX: 'hidden',
-            borderRadius: '0 0 13px 13px',
-          }}
+        <StyledDataGrid
           rows={data || []}
           columns={columns}
           pageSizeOptions={[5, 10]}
diff --git a/src/components/admin/donations/grid/Grid.tsx b/src/components/admin/donations/grid/Grid.tsx
index dd40b655d..03f5e8b3e 100644
--- a/src/components/admin/donations/grid/Grid.tsx
+++ b/src/components/admin/donations/grid/Grid.tsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react'
 import { UseQueryResult, useMutation, useQueryClient } from '@tanstack/react-query'
 import { useTranslation } from 'next-i18next'
 import { Box, IconButton, Tooltip } from '@mui/material'
+import { styled } from '@mui/material/styles'
 
 import { Autorenew, Edit } from '@mui/icons-material'
 import {
@@ -40,6 +41,19 @@ const addIconStyles = {
   padding: 0.7,
   boxShadow: 3,
 }
+
+const StyledDataGrid = styled(DataGrid)({
+  background: theme.palette.common.white,
+  position: 'absolute',
+  height: 'calc(100vh - 300px)',
+  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()
   const queryClient = useQueryClient()
@@ -280,18 +294,7 @@ export default observer(function Grid() {
   return (
     <>
       <Box sx={{ mx: 'auto', width: 700 }}>
-        <DataGrid
-          style={{
-            background: theme.palette.common.white,
-            position: 'absolute',
-            height: 'calc(100vh - 300px)',
-            border: 'none',
-            width: 'calc(100% - 48px)',
-            left: '24px',
-            overflowY: 'auto',
-            overflowX: 'hidden',
-            borderRadius: '0 0 13px 13px',
-          }}
+        <StyledDataGrid
           rows={donations || []}
           columns={columns}
           columnVisibilityModel={{
diff --git a/src/components/admin/irregularity/admin/grid/Grid.tsx b/src/components/admin/irregularity/admin/grid/Grid.tsx
index 7cdfad884..6554a0d7d 100644
--- a/src/components/admin/irregularity/admin/grid/Grid.tsx
+++ b/src/components/admin/irregularity/admin/grid/Grid.tsx
@@ -2,6 +2,7 @@ import { observer } from 'mobx-react'
 import React, { useState } from 'react'
 import { UseQueryResult } from '@tanstack/react-query'
 import { useTranslation } from 'next-i18next'
+import { styled } from '@mui/material/styles'
 
 import { Box } from '@mui/material'
 import { DataGrid, GridColDef, GridRenderCellParams } from '@mui/x-data-grid'
@@ -9,7 +10,6 @@ import { DataGrid, GridColDef, GridRenderCellParams } from '@mui/x-data-grid'
 import { useIrregularityList } from 'common/hooks/irregularity'
 
 import { routes } from 'common/routes'
-import theme from 'common/theme'
 import GridActions from 'components/admin/GridActions'
 
 import DeleteModal from './DeleteModal'
@@ -17,6 +17,18 @@ import DetailsModal from './DetailsModal'
 import { ModalStore } from '../IrregularityPage'
 import { IrregularityResponse } from 'components/client/irregularity/helpers/irregularity.types'
 
+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('irregularity')
 
@@ -124,18 +136,7 @@ export default observer(function Grid() {
   return (
     <>
       <Box>
-        <DataGrid
-          style={{
-            background: theme.palette.common.white,
-            position: 'absolute',
-            height: 'calc(100vh - 300px)',
-            border: 'none',
-            width: 'calc(100% - 48px)',
-            left: '24px',
-            overflowY: 'auto',
-            overflowX: 'hidden',
-            borderRadius: '0 0 13px 13px',
-          }}
+        <StyledDataGrid
           rows={data || []}
           columns={columns}
           columnVisibilityModel={{
diff --git a/src/components/admin/marketing/MarketingPage.tsx b/src/components/admin/marketing/MarketingPage.tsx
index 394f9587d..9c8bc4548 100644
--- a/src/components/admin/marketing/MarketingPage.tsx
+++ b/src/components/admin/marketing/MarketingPage.tsx
@@ -3,10 +3,16 @@ import AdminContainer from 'components/common/navigation/AdminContainer'
 import AdminLayout from 'components/common/navigation/AdminLayout'
 import React from 'react'
 import { useTranslation } from 'next-i18next'
-import Link from 'next/link'
+import { styled } from '@mui/material/styles'
 import { marketingCards } from './navigation/marketingCards'
 
 const colors = ['#0179a8', '#346cb0', '#5f4b8b', '#b76ba3', '#a7c796', '#00a28a', '#3686a0']
+
+const StyledLink = styled('a')({
+  textDecoration: 'none',
+  color: 'inherit',
+})
+
 export default function MarketingPage() {
   const { t } = useTranslation('marketing')
   return (
@@ -37,7 +43,7 @@ export default function MarketingPage() {
                     },
                     border: '1px solid ' + `${colors[index % colors.length]}7A`,
                   }}>
-                  <Link href={href} style={{ textDecoration: 'none', color: 'inherit' }}>
+                  <StyledLink href={href}>
                     <CardContent>
                       <Box textAlign="center">
                         <Icon fontSize="large" />
@@ -46,7 +52,7 @@ export default function MarketingPage() {
                         {label}
                       </Typography>
                     </CardContent>
-                  </Link>
+                  </StyledLink>
                 </Button>
               </Grid>
             ))}
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 (
     <>
       <Box>
-        <DataGrid
-          style={{
-            background: theme.palette.common.white,
-            position: 'absolute',
-            height: 'calc(100vh - 300px)',
-            border: 'none',
-            width: 'calc(100% - 48px)',
-            left: '24px',
-            overflowY: 'auto',
-            overflowX: 'hidden',
-            borderRadius: '0 0 13px 13px',
-          }}
+        <StyledDataGrid
           rows={data || []}
           columns={columns}
           columnVisibilityModel={{
diff --git a/src/components/admin/payments/grid/Grid.tsx b/src/components/admin/payments/grid/Grid.tsx
index f7ba32b0b..0ce6c19b2 100644
--- a/src/components/admin/payments/grid/Grid.tsx
+++ b/src/components/admin/payments/grid/Grid.tsx
@@ -10,6 +10,7 @@ import {
   GridRenderEditCellParams,
 } from '@mui/x-data-grid'
 import { observer } from 'mobx-react'
+import { styled } from '@mui/material/styles'
 
 import { usePaymentsList } from 'common/hooks/donation'
 
@@ -41,6 +42,19 @@ const addIconStyles = {
   padding: 0.7,
   boxShadow: 3,
 }
+
+const StyledDataGrid = styled(DataGrid<PaymentAdminResponse>)(({ 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 (
     <>
       <Box sx={{ mx: 'auto', width: 700 }}>
-        <DataGrid
-          style={{
-            background: theme.palette.common.white,
-            position: 'absolute',
-            height: 'calc(100vh - 300px)',
-            border: 'none',
-            width: 'calc(100% - 48px)',
-            left: '24px',
-            overflowY: 'auto',
-            overflowX: 'hidden',
-            borderRadius: '0 0 13px 13px',
-          }}
+        <StyledDataGrid
           rows={payments || []}
           columns={columns}
           columnVisibilityModel={{
diff --git a/src/components/admin/payments/modals/RefundModal.tsx b/src/components/admin/payments/modals/RefundModal.tsx
index 9f95406af..59a629dcf 100644
--- a/src/components/admin/payments/modals/RefundModal.tsx
+++ b/src/components/admin/payments/modals/RefundModal.tsx
@@ -10,6 +10,7 @@ import {
   CardContent,
   CircularProgress,
 } from '@mui/material'
+import { styled } from '@mui/material/styles'
 import { useRefundStripeDonation } from 'service/donation'
 import { AlertStore } from 'stores/AlertStore'
 import { UseQueryResult, useMutation } from '@tanstack/react-query'
@@ -58,6 +59,18 @@ export default observer(function RefundModal() {
     refundMutation.mutate(values.extPaymentIntentId)
   }
 
+  const StyledDialogContent = styled(DialogContent)({
+    overflow: 'hidden',
+    padding: '2rem',
+    width: '100%',
+  })
+
+  const StyledDialogTitle = styled(DialogTitle)({
+    display: 'flex',
+    justifyContent: 'center',
+    width: '100%',
+  })
+
   return (
     <Dialog
       open={isRefundOpen}
@@ -65,18 +78,11 @@ export default observer(function RefundModal() {
       sx={{ scroll: 'none' }}
       fullWidth={true}
       maxWidth={'sm'}>
-      <DialogContent
-        style={{
-          overflow: 'hidden',
-          padding: '2rem',
-          width: '100%',
-        }}>
-        <Grid style={{ display: 'flex', justifyContent: 'end', marginRight: '-4rem' }}>
+      <StyledDialogContent>
+        <Grid sx={{ display: 'flex', justifyContent: 'end', marginRight: '-4rem' }}>
           <CloseModalButton href={''} onClose={hideRefund} />
         </Grid>
-        <DialogTitle style={{ display: 'flex', justifyContent: 'center', width: '100%' }}>
-          {t('refund.title')}
-        </DialogTitle>
+        <StyledDialogTitle>{t('refund.title')}</StyledDialogTitle>
         <Grid container direction="column" component="section">
           <GenericForm onSubmit={onSubmit} initialValues={initialValues}>
             <CardContent>
@@ -101,7 +107,7 @@ export default observer(function RefundModal() {
             </CardContent>
           </GenericForm>
         </Grid>
-      </DialogContent>
+      </StyledDialogContent>
     </Dialog>
   )
 })
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 (
     <>
       <Box sx={{ marginTop: '2%', mx: 'auto', width: 700 }}>
-        <DataGrid
-          style={{
-            background: theme.palette.common.white,
-            position: 'absolute',
-            height: 'calc(100vh - 300px)',
-            border: 'none',
-            width: 'calc(100% - 48px)',
-            left: '24px',
-            overflowY: 'auto',
-            overflowX: 'hidden',
-            borderRadius: '0 0 13px 13px',
-          }}
+        <StyledDataGrid
           rows={data || []}
           columns={columns}
           pageSizeOptions={[5, 10]}
diff --git a/src/components/admin/styles/Admin.styled.tsx b/src/components/admin/styles/Admin.styled.tsx
index 004459ea5..bab9198b6 100644
--- a/src/components/admin/styles/Admin.styled.tsx
+++ b/src/components/admin/styles/Admin.styled.tsx
@@ -1,5 +1,4 @@
 import { styled } from '@mui/material/styles'
-import theme from 'common/theme'
 import { DialogContent, DialogTitle } from '@mui/material'
 
 export const StyledDialogContent = styled(DialogContent)({
diff --git a/src/components/admin/transfers/grid/Grid.tsx b/src/components/admin/transfers/grid/Grid.tsx
index 1d5092139..c8f343d72 100644
--- a/src/components/admin/transfers/grid/Grid.tsx
+++ b/src/components/admin/transfers/grid/Grid.tsx
@@ -14,7 +14,19 @@ import { ModalStore } from '../TransferPage'
 import DeleteModal from './DeleteModal'
 import DetailsModal from './DetailsModal'
 import { fromMoney } from 'common/util/money'
-import theme from 'common/theme'
+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('transfer')
@@ -128,18 +140,7 @@ export default observer(function Grid() {
   return (
     <>
       <Box>
-        <DataGrid
-          style={{
-            background: theme.palette.common.white,
-            position: 'absolute',
-            height: 'calc(100vh - 300px)',
-            border: 'none',
-            width: 'calc(100% - 48px)',
-            left: '24px',
-            overflowY: 'auto',
-            overflowX: 'hidden',
-            borderRadius: '0 0 13px 13px',
-          }}
+        <StyledDataGrid
           rows={data || []}
           columns={columns}
           columnVisibilityModel={{
diff --git a/src/components/admin/vaults/grid/Grid.tsx b/src/components/admin/vaults/grid/Grid.tsx
index bb77b1e54..f2b2961fa 100644
--- a/src/components/admin/vaults/grid/Grid.tsx
+++ b/src/components/admin/vaults/grid/Grid.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import { UseQueryResult } from '@tanstack/react-query'
 import { useTranslation } from 'next-i18next'
-import { Box } from '@mui/material'
+import { Box, styled } from '@mui/material'
 import {
   DataGrid,
   GridColDef,
@@ -19,7 +19,18 @@ import { ModalStore } from '../VaultsPage'
 import DeleteModal from './DeleteModal'
 import DetailsModal from './DetailsModal'
 import { money } from 'common/util/money'
-import theme from 'common/theme'
+
+const StyledDataGrid = styled(DataGrid<VaultResponse>)(({ 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 (
     <>
       <Box sx={{ marginTop: '2%', mx: 'auto', width: 700 }}>
-        <DataGrid
-          style={{
-            background: theme.palette.common.white,
-            position: 'absolute',
-            height: 'calc(100vh - 300px)',
-            border: 'none',
-            width: 'calc(100% - 48px)',
-            left: '24px',
-            overflowY: 'auto',
-            overflowX: 'hidden',
-            borderRadius: '0 0 13px 13px',
-          }}
+        <StyledDataGrid
           rows={data || []}
           columns={columns}
           pageSizeOptions={[5, 10]}
diff --git a/src/components/admin/withdrawals/grid/Grid.tsx b/src/components/admin/withdrawals/grid/Grid.tsx
index fa21221ab..7f36cb4ce 100644
--- a/src/components/admin/withdrawals/grid/Grid.tsx
+++ b/src/components/admin/withdrawals/grid/Grid.tsx
@@ -4,6 +4,7 @@ import { useTranslation } from 'next-i18next'
 import { Box } from '@mui/material'
 import { DataGrid, GridColDef, GridRenderCellParams } from '@mui/x-data-grid'
 import { observer } from 'mobx-react'
+import { styled } from '@mui/material/styles'
 
 import { routes } from 'common/routes'
 import { WithdrawalResponse } from 'gql/withdrawals'
@@ -14,7 +15,18 @@ import { ModalStore } from '../WithdrawalPage'
 import DetailsModal from './DetailsModal'
 import DeleteModal from './DeleteModal'
 import { fromMoney } from 'common/util/money'
-import theme from 'common/theme'
+
+const StyledDataGrid = styled(DataGrid)`
+  background: ${({ theme }) => 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 (
     <>
       <Box>
-        <DataGrid
-          style={{
-            background: theme.palette.common.white,
-            position: 'absolute',
-            height: 'calc(100vh - 300px)',
-            border: 'none',
-            width: 'calc(100% - 48px)',
-            left: '24px',
-            overflowY: 'auto',
-            overflowX: 'hidden',
-            borderRadius: '0 0 13px 13px',
-          }}
+        <StyledDataGrid
           rows={data || []}
           columns={columns}
           pageSizeOptions={[5, 10]}
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<DonationResponse>)(({ 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)
       <Typography className={classes.h3} sx={{ py: 1 }}>
         {t('profile:affiliate.guaranteedDonationsList')}
       </Typography>
-      <DataGrid
-        style={{
-          background: theme.palette.common.white,
-          border: 'none',
-          width: 'calc(100% - 48px)',
-          left: '24px',
-          overflowY: 'auto',
-          overflowX: 'hidden',
-          borderRadius: '0 0 13px 13px',
-        }}
+      <StyledDataGrid
         columnVisibilityModel={{ id: false }}
         rows={affiliate.payments.flatMap((e) => 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<Pick<UpdateUserAccount, 'password'>> = yup
@@ -158,7 +163,7 @@ function DisableAccountModal({
         <Typography className={classes.graySpan}>
           {t('profile:disableModal.beforeDisableMsg')}
         </Typography>
-        <ul style={{ listStyle: 'disc', paddingLeft: '20px' }}>
+        <ul className={classes.bulletList}>
           <li className={classes.graySpan}>
             {t('profile:disableModal.deactivateEmails')}
             <Link href={routes.profile.myNotifications}>{t('profile:disableModal.link')}</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 ? (
-        <DataGrid
-          style={{
-            background: theme.palette.common.white,
-            width: 'calc(100% - 48px)',
-            left: '24px',
-            overflowY: 'auto',
-            overflowX: 'hidden',
-            borderRadius: '0 0 13px 13px',
-          }}
+        <StyledDataGrid
           rows={data || []}
           columns={columns}
           initialState={{ pagination: { paginationModel: { pageSize: 5 } } }}
diff --git a/src/components/client/auth/profile/MyDonatedToCampaignsTable.tsx b/src/components/client/auth/profile/MyDonatedToCampaignsTable.tsx
index 40c67550b..010903e24 100644
--- a/src/components/client/auth/profile/MyDonatedToCampaignsTable.tsx
+++ b/src/components/client/auth/profile/MyDonatedToCampaignsTable.tsx
@@ -1,10 +1,10 @@
 import { useTranslation } from 'next-i18next'
 import { DataGrid, GridColDef, GridRenderCellParams } from '@mui/x-data-grid'
 import { Tooltip, Button, Box } from '@mui/material'
+import { styled } from '@mui/material/styles'
 
 import { getExactDateTime, getRelativeDate } from 'common/util/date'
 import { money } from 'common/util/money'
-import theme from 'common/theme'
 import { useUserDonationsCampaigns } from 'common/hooks/campaigns'
 import Link from 'components/common/Link'
 import {
@@ -14,6 +14,16 @@ import {
   DisplayReachedAmount,
 } from 'components/admin/campaigns/grid/CampaignGrid'
 
+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',
+}))
+
 export default function MyDonatedToCampaignTable() {
   const { t, i18n } = useTranslation()
   const { data = [] } = useUserDonationsCampaigns()
@@ -179,16 +189,7 @@ export default function MyDonatedToCampaignTable() {
   return (
     <>
       {data.length !== 0 ? (
-        <DataGrid
-          style={{
-            background: theme.palette.common.white,
-            border: 'none',
-            width: 'calc(100% - 48px)',
-            left: '24px',
-            overflowY: 'auto',
-            overflowX: 'hidden',
-            borderRadius: '0 0 13px 13px',
-          }}
+        <StyledDataGrid
           rows={data || []}
           columns={columns}
           initialState={{ pagination: { paginationModel: { pageSize: 5 } } }}
diff --git a/src/components/client/auth/profile/MyNotificationsCampaignConfirmModal.tsx b/src/components/client/auth/profile/MyNotificationsCampaignConfirmModal.tsx
index 4e580fe35..8516baf79 100644
--- a/src/components/client/auth/profile/MyNotificationsCampaignConfirmModal.tsx
+++ b/src/components/client/auth/profile/MyNotificationsCampaignConfirmModal.tsx
@@ -35,6 +35,37 @@ const StyledGrid = styled(Grid)(({ theme }) => ({
   },
 }))
 
+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<React.SetStateAction<string>>
@@ -88,22 +119,16 @@ export default function RenderCampaignNotificationsConfirmModal({
   }
 
   return (
-    <Dialog open onClose={handleClose} sx={{ scroll: 'none' }} fullWidth={true} maxWidth={'sm'}>
-      <DialogContent
-        style={{
-          overflow: 'hidden',
-          padding: '4rem',
-          paddingTop: '1rem',
-          width: '100%',
-        }}>
-        <Grid style={{ display: 'flex', justifyContent: 'end', marginRight: '-4rem' }}>
+    <NoScrollDialog open onClose={handleClose} fullWidth maxWidth="sm">
+      <StyledDialogContent>
+        <CloseButtonGrid>
           <CloseModalButton onClose={handleClose} />
-        </Grid>
+        </CloseButtonGrid>
         {!isSuccess ? (
           <React.Fragment>
-            <DialogTitle style={{ textAlign: 'center', width: '100%' }}>
+            <CenteredDialogTitle>
               {t('profile:myNotifications.modal.campaign-title-unsubscribe')}
-            </DialogTitle>
+            </CenteredDialogTitle>
             <Grid container direction="column" component="section">
               <GenericForm onSubmit={onSubmit} initialValues={{}}>
                 <StyledGrid container spacing={2}>
@@ -120,12 +145,11 @@ export default function RenderCampaignNotificationsConfirmModal({
             </Grid>
           </React.Fragment>
         ) : (
-          <DialogContent
-            style={{ textAlign: 'center', fontSize: 20, fontWeight: 600, paddingBottom: 6 }}>
+          <SuccessMessage>
             {t('profile:myNotifications.modal.campaign-unsubscribe-msg')}
-          </DialogContent>
+          </SuccessMessage>
         )}
-      </DialogContent>
-    </Dialog>
+      </StyledDialogContent>
+    </NoScrollDialog>
   )
 }
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<React.SetStateAction<boolean>>
@@ -107,23 +136,17 @@ export default function RenderNotificationsConfirmModal({ type, setOpen }: Modal
 
   return (
     <Dialog open onClose={handleClose} sx={{ scroll: 'none' }} fullWidth={true} maxWidth={'sm'}>
-      <DialogContent
-        style={{
-          overflow: 'hidden',
-          padding: '4rem',
-          paddingTop: '1rem',
-          width: '100%',
-        }}>
-        <Grid style={{ display: 'flex', justifyContent: 'end', marginRight: '-4rem' }}>
+      <StyledDialogContent>
+        <StyledCloseButtonWrapper>
           <CloseModalButton onClose={handleClose} />
-        </Grid>
+        </StyledCloseButtonWrapper>
         {!isSuccess ? (
           <React.Fragment>
-            <DialogTitle style={{ textAlign: 'center', width: '100%' }}>
+            <StyledDialogTitle>
               {type === 'subscribe'
                 ? t('profile:myNotifications.modal.title-subscribe')
                 : t('profile:myNotifications.modal.title-unsubscribe')}
-            </DialogTitle>
+            </StyledDialogTitle>
             <Grid container direction="column" component="section">
               <GenericForm onSubmit={onSubmit} initialValues={{}}>
                 <StyledGrid container spacing={2}>
@@ -140,14 +163,13 @@ export default function RenderNotificationsConfirmModal({ type, setOpen }: Modal
             </Grid>
           </React.Fragment>
         ) : (
-          <DialogContent
-            style={{ textAlign: 'center', fontSize: 20, fontWeight: 600, paddingBottom: 6 }}>
+          <StyledSuccessMessage>
             {type === 'subscribe'
               ? t('profile:myNotifications.modal.unsubscribe-msg')
               : t('profile:myNotifications.modal.subscribe-msg')}
-          </DialogContent>
+          </StyledSuccessMessage>
         )}
-      </DialogContent>
+      </StyledDialogContent>
     </Dialog>
   )
 }
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() {
             </Typography>
             <Button
               className={classes.statusBtn}
-              style={{ opacity: user?.user.newsletter ? '80%' : '100%' }}
+              sx={{ opacity: user?.user.newsletter ? '80%' : '100%' }}
               onClick={() => setShowConfirmModal(true)}>
               {user?.user.newsletter
                 ? t('profile:myNotifications.cta.deactivate')
diff --git a/src/components/client/auth/profile/MyRecurringCampaignsTable.tsx b/src/components/client/auth/profile/MyRecurringCampaignsTable.tsx
index a3672dbfa..59211d64a 100644
--- a/src/components/client/auth/profile/MyRecurringCampaignsTable.tsx
+++ b/src/components/client/auth/profile/MyRecurringCampaignsTable.tsx
@@ -18,6 +18,17 @@ import { useGetUserRecurringDonations } from 'common/hooks/recurringDonation'
 import Link from 'components/common/Link'
 import { apiClient } from 'service/apiClient'
 import { authConfig } from 'service/restRequests'
+import { styled } from '@mui/material/styles'
+
+const StyledDataGrid = styled(DataGrid)({
+  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 MyRecurringCampaignsTable() {
   const { t } = useTranslation()
@@ -122,16 +133,7 @@ export default function MyRecurringCampaignsTable() {
   return (
     <>
       {recurringDonations && recurringDonations.length !== 0 ? (
-        <DataGrid
-          style={{
-            background: theme.palette.common.white,
-            border: 'none',
-            width: 'calc(100% - 48px)',
-            left: '24px',
-            overflowY: 'auto',
-            overflowX: 'hidden',
-            borderRadius: '0 0 13px 13px',
-          }}
+        <StyledDataGrid
           rows={recurringDonations || []}
           columns={columns}
           initialState={{ pagination: { paginationModel: { pageSize: 5 } } }}
diff --git a/src/components/client/auth/profile/ProfilePage.tsx b/src/components/client/auth/profile/ProfilePage.tsx
index 5e78a694e..c4decf767 100644
--- a/src/components/client/auth/profile/ProfilePage.tsx
+++ b/src/components/client/auth/profile/ProfilePage.tsx
@@ -1,4 +1,4 @@
-import { Box, LinearProgress, useMediaQuery } from '@mui/material'
+import { Box, LinearProgress, Typography, useMediaQuery } from '@mui/material'
 import { styled } from '@mui/material/styles'
 import Tab from '@mui/material/Tab'
 import Tabs from '@mui/material/Tabs'
@@ -83,9 +83,9 @@ export default function ProfilePage() {
             padding: '10px 10px',
             boxShadow: 3,
           }}>
-          <h1 className={classes.h1} style={{ marginLeft: '20px' }}>
+          <Typography variant="h1" className={classes.h1} sx={{ marginLeft: '20px' }}>
             {!person?.user.company ? t('profile:header') : t('profile:corporate-header')}
-          </h1>
+          </Typography>
           <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
             <Tabs value={tab.slug} variant="scrollable" scrollButtons allowScrollButtonsMobile>
               <Tab
diff --git a/src/components/client/auth/register/RegisterPage.tsx b/src/components/client/auth/register/RegisterPage.tsx
index 45cddf2aa..664056b40 100644
--- a/src/components/client/auth/register/RegisterPage.tsx
+++ b/src/components/client/auth/register/RegisterPage.tsx
@@ -132,7 +132,7 @@ export default function RegisterPage({ providers }: RegisterPageProps) {
               title={t('auth:register.individual-subtitle')}
               sx={{ padding: 0 }}>
               <Button
-                startIcon={<InfoIcon style={{ width: 20 }} />}
+                startIcon={<InfoIcon sx={{ width: 20 }} />}
                 sx={{
                   paddingTop: 0,
                   textTransform: 'lowercase',
@@ -174,7 +174,7 @@ export default function RegisterPage({ providers }: RegisterPageProps) {
               title={t('auth:register.corporate-subtitle')}
               sx={{ padding: 0 }}>
               <Button
-                startIcon={<InfoIcon style={{ width: 20 }} />}
+                startIcon={<InfoIcon sx={{ width: 20 }} />}
                 sx={{
                   paddingTop: 0,
                   marginBottom: 2,
diff --git a/src/components/client/campaign-news/CampaignNewsList.tsx b/src/components/client/campaign-news/CampaignNewsList.tsx
index a1d5da083..c20489fb6 100644
--- a/src/components/client/campaign-news/CampaignNewsList.tsx
+++ b/src/components/client/campaign-news/CampaignNewsList.tsx
@@ -115,7 +115,7 @@ export default function CampaignNewsList({ articles }: Props) {
                     {dateToTime(article.publishedAt, i18n?.language)}
                   </Typography>
                 </Grid>
-                <Grid container item gap={1} xs="auto" style={{ maxWidth: '100%' }} wrap="nowrap">
+                <Grid container item gap={1} xs="auto" sx={{ maxWidth: '100%' }} wrap="nowrap">
                   <SupervisedUserCircleOutlinedIcon color="primary" />
                   <Typography className={classes.articleAuthor}>{article.author}</Typography>
                 </Grid>
@@ -160,7 +160,7 @@ export default function CampaignNewsList({ articles }: Props) {
                 </Grid>
                 {article.newsFiles.length > 0 && (
                   <>
-                    <Grid container item gap={1} xs={'auto'} style={{ maxWidth: '100%' }}>
+                    <Grid container item gap={1} xs={'auto'} sx={{ maxWidth: '100%' }}>
                       <Gallery images={images}>
                         {images.map((file) => {
                           return (
diff --git a/src/components/client/campaign-news/CampaignNewsPage.tsx b/src/components/client/campaign-news/CampaignNewsPage.tsx
index 2e269ec1f..c45c9c622 100644
--- a/src/components/client/campaign-news/CampaignNewsPage.tsx
+++ b/src/components/client/campaign-news/CampaignNewsPage.tsx
@@ -63,7 +63,7 @@ export default function CampaignNewsPage({ page, slug = null }: Props) {
   return (
     <Root
       maxWidth={false}
-      style={{ padding: theme.spacing(0) }}
+      sx={{ padding: theme.spacing(0) }}
       prevPage={
         data?.pagination.prevPage
           ? `${baseUrl}${routes.campaigns.news.listNewsPaginated(data?.pagination.prevPage, slug)}`
diff --git a/src/components/client/campaign-news/SingleArticlePage.tsx b/src/components/client/campaign-news/SingleArticlePage.tsx
index 287d89e05..4d2cb1b02 100644
--- a/src/components/client/campaign-news/SingleArticlePage.tsx
+++ b/src/components/client/campaign-news/SingleArticlePage.tsx
@@ -99,19 +99,13 @@ export default function SingleArticlePage({ slug }: Props) {
                 {formatDateString(article.publishedAt, i18n?.language)}
               </Typography>
             </Grid>
-            <Grid container item gap={1} xs="auto" style={{ maxWidth: '100%' }} wrap="nowrap">
+            <Grid container item gap={1} xs="auto" sx={{ maxWidth: '100%' }} wrap="nowrap">
               <SupervisedUserCircleOutlinedIcon color="primary" />
               <Typography className={classes.articleAuthor}>{article.author}</Typography>
             </Grid>
           </Grid>
           <Grid container rowGap={1} columnGap={4}>
-            <Grid
-              container
-              item
-              direction={'column'}
-              gap={1}
-              xs={'auto'}
-              style={{ maxWidth: '100%' }}>
+            <Grid container item direction={'column'} gap={1} xs={'auto'} sx={{ maxWidth: '100%' }}>
               <Typography className={classes.articleHeader}>{article.title}</Typography>
               <Grid container item>
                 <QuillStypeWrapper>
@@ -140,7 +134,7 @@ export default function SingleArticlePage({ slug }: Props) {
                 ))}
               </Grid>
             </Grid>
-            <Grid container item gap={1} xs={'auto'} style={{ maxWidth: '100%' }}>
+            <Grid container item gap={1} xs={'auto'} sx={{ maxWidth: '100%' }}>
               {images.map((file) => (
                 <Grid item key={file.id}>
                   <Image src={file.src} width={220} height={120} alt={file.id} />
diff --git a/src/components/client/campaign-news/secured/NewsAdminPage.tsx b/src/components/client/campaign-news/secured/NewsAdminPage.tsx
index 8b8970413..23c2f9bdb 100644
--- a/src/components/client/campaign-news/secured/NewsAdminPage.tsx
+++ b/src/components/client/campaign-news/secured/NewsAdminPage.tsx
@@ -36,6 +36,10 @@ const Root = styled(Layout)({
   },
 })
 
+const StyledSpan = styled('span')({
+  overflow: 'visible',
+})
+
 type Props = {
   slug: string
   isAdmin: boolean
@@ -66,7 +70,7 @@ export function NewsAdminPage({ slug, isAdmin }: Props) {
       flex: 1,
       minWidth: 200,
       renderCell: (params: GridRenderCellParams): React.ReactNode => {
-        return <span style={{ overflow: 'visible' }}>{params.row.title}</span>
+        return <StyledSpan>{params.row.title}</StyledSpan>
       },
     },
     {
diff --git a/src/components/client/campaigns/CampaignNewsSection.tsx b/src/components/client/campaigns/CampaignNewsSection.tsx
index 7d7c00dfc..ef47ec001 100644
--- a/src/components/client/campaigns/CampaignNewsSection.tsx
+++ b/src/components/client/campaigns/CampaignNewsSection.tsx
@@ -239,7 +239,7 @@ export default function CampaignNewsSection({ campaign, canCreateArticle }: Prop
                           item
                           gap={1}
                           xs="auto"
-                          style={{ maxWidth: '40%' }}
+                          sx={{ maxWidth: '40%' }}
                           wrap="nowrap">
                           <SupervisedUserCircleOutlinedIcon color="action" />
                           <Typography className={classes.articleAuthor}>
diff --git a/src/components/client/campaigns/CampaignStatistics/CumulativeDonationsChart.tsx b/src/components/client/campaigns/CampaignStatistics/CumulativeDonationsChart.tsx
index 06421042e..52e106655 100644
--- a/src/components/client/campaigns/CampaignStatistics/CumulativeDonationsChart.tsx
+++ b/src/components/client/campaigns/CampaignStatistics/CumulativeDonationsChart.tsx
@@ -160,7 +160,7 @@ export default function CumulativeDonationsChart({
 
   return (
     <Box>
-      <Stack style={{ marginBottom: '10px' }}>
+      <Stack sx={{ marginBottom: '10px' }}>
         <Typography variant="h6">{t('campaigns:statistics.cumulativeTitle')}</Typography>
         <Typography variant="caption">{t('campaigns:statistics.cumulativeDesc')}</Typography>
       </Stack>
diff --git a/src/components/client/campaigns/CampaignStatistics/GroupedDonationsChart.tsx b/src/components/client/campaigns/CampaignStatistics/GroupedDonationsChart.tsx
index b38cdec88..c0716240d 100644
--- a/src/components/client/campaigns/CampaignStatistics/GroupedDonationsChart.tsx
+++ b/src/components/client/campaigns/CampaignStatistics/GroupedDonationsChart.tsx
@@ -139,14 +139,14 @@ export default function GroupedDonationsChart({ campaignId, startDate, endDate }
 
   return (
     <Box>
-      <Stack style={{ marginBottom: '10px' }}>
+      <Stack sx={{ marginBottom: '10px' }}>
         <Typography variant="h6">{t('campaigns:statistics.groupedTitle')}</Typography>
         <Typography variant="caption">{t('campaigns:statistics.groupedDesc')}</Typography>
       </Stack>
       <Bar options={options} data={data} />
-      <Stack style={{ marginTop: '10px' }}>
+      <Stack sx={{ marginTop: '10px' }}>
         <Typography>{t('campaigns:statistics.groupBy')}:</Typography>
-        <Stack direction="row" style={{ marginTop: '10px', gap: 10 }}>
+        <Stack direction="row" sx={{ marginTop: '10px', gap: 10 }}>
           <Button
             variant={timePeriod === StatisticsGroupBy.DAY ? 'contained' : 'outlined'}
             onClick={() => setTimePeriod(StatisticsGroupBy.DAY)}>
diff --git a/src/components/client/campaigns/CampaignStatistics/HourlyDonationsChart.tsx b/src/components/client/campaigns/CampaignStatistics/HourlyDonationsChart.tsx
index 78415c7e8..eb6d5a035 100644
--- a/src/components/client/campaigns/CampaignStatistics/HourlyDonationsChart.tsx
+++ b/src/components/client/campaigns/CampaignStatistics/HourlyDonationsChart.tsx
@@ -101,7 +101,7 @@ export default function HourlyDonationsChart({ campaignId }: Props) {
 
   return (
     <Box>
-      <Stack style={{ marginBottom: '10px' }}>
+      <Stack sx={{ marginBottom: '10px' }}>
         <Typography variant="h6">{t('campaigns:statistics.hourlyTitle')}</Typography>
         <Typography variant="caption">{t('campaigns:statistics.hourlyDesc')}</Typography>
       </Stack>
diff --git a/src/components/client/campaigns/CampaignStatistics/UniqueDonationsChart.tsx b/src/components/client/campaigns/CampaignStatistics/UniqueDonationsChart.tsx
index 19e05932f..b18548bf0 100644
--- a/src/components/client/campaigns/CampaignStatistics/UniqueDonationsChart.tsx
+++ b/src/components/client/campaigns/CampaignStatistics/UniqueDonationsChart.tsx
@@ -73,7 +73,7 @@ export default function UniqueDonationsChart({ campaignId }: Props) {
 
   return (
     <Box>
-      <Stack style={{ marginBottom: '10px' }}>
+      <Stack sx={{ marginBottom: '10px' }}>
         <Typography variant="h6">{t('campaigns:statistics.uniqueTitle')}</Typography>
         <Typography variant="caption">{t('campaigns:statistics.uniqueDesc')}</Typography>
       </Stack>
diff --git a/src/components/client/campaigns/StatisticsPage.tsx b/src/components/client/campaigns/StatisticsPage.tsx
index 98a4e560b..495288072 100644
--- a/src/components/client/campaigns/StatisticsPage.tsx
+++ b/src/components/client/campaigns/StatisticsPage.tsx
@@ -30,14 +30,14 @@ export default function StatisticsPage({ slug }: Props) {
         <Link href={routes.campaigns.viewCampaignBySlug(slug)}>
           <Typography>{t('campaigns:statistics.backButton')}</Typography>
         </Link>
-        <Stack style={{ marginBottom: '30px' }}>
+        <Stack sx={{ marginBottom: '30px' }}>
           <Typography variant="h4" component="h1">
             {campaignTitle}
           </Typography>
           <Typography variant="caption">{t('campaigns:statistics.cachedMessage')}</Typography>
         </Stack>
         {hasDonations && (
-          <Stack style={{ gap: 50 }}>
+          <Stack sx={{ gap: 50 }}>
             <CumulativeDonationsChart
               campaignId={campaign.id}
               startDate={campaign.startDate}
diff --git a/src/components/client/donation-flow/common/RadioCardGroup.tsx b/src/components/client/donation-flow/common/RadioCardGroup.tsx
index c183fa03b..1e7ab76a0 100644
--- a/src/components/client/donation-flow/common/RadioCardGroup.tsx
+++ b/src/components/client/donation-flow/common/RadioCardGroup.tsx
@@ -124,7 +124,7 @@ function RadioCardGroup({ options, name, columns, loading, error }: RadioCardGro
             <Grid2 size={{ xs: 4 }} key={option.value}>
               <RadioCardItem
                 onClick={() => setValue(option.value)}
-                style={{
+                sx={{
                   border: `1px solid ${
                     showError ? theme.palette.error.main : theme.palette.common.black
                   }`,
diff --git a/src/components/client/layout/Footer/LogoSocialIcons.tsx b/src/components/client/layout/Footer/LogoSocialIcons.tsx
index d7ca2f413..22e93c19e 100644
--- a/src/components/client/layout/Footer/LogoSocialIcons.tsx
+++ b/src/components/client/layout/Footer/LogoSocialIcons.tsx
@@ -13,7 +13,7 @@ export const LogoSocialIcons = () => {
 
   return (
     <Grid item xs={12} sm={8} md={5} container direction="column" gap={1}>
-      <Grid container style={{ maxWidth: 236, maxHeight: 48 }} item justifyContent={'flex-start'}>
+      <Grid container sx={{ maxWidth: 236, maxHeight: 48 }} item justifyContent={'flex-start'}>
         <Link href={routes.index} passHref aria-label={t('meta.title')}>
           <PodkrepiLogo locale={locale} size="large" variant="adaptive" />
         </Link>
diff --git a/src/components/client/notifications/CampaignSubscribeModal.tsx b/src/components/client/notifications/CampaignSubscribeModal.tsx
index bdbe946d6..5eaaac874 100644
--- a/src/components/client/notifications/CampaignSubscribeModal.tsx
+++ b/src/components/client/notifications/CampaignSubscribeModal.tsx
@@ -28,6 +28,7 @@ const PREFIX = 'CampaignSubscribeModal'
 
 const classes = {
   subscribeBtn: `${PREFIX}-subscribe`,
+  dialogContent: `${PREFIX}-dialogContent`,
 }
 
 const StyledGrid = styled(Grid)(({ theme }) => ({
@@ -37,6 +38,15 @@ const StyledGrid = styled(Grid)(({ theme }) => ({
   },
 }))
 
+const StyledDialogContent = styled(DialogContent)({
+  overflow: 'hidden',
+  padding: '3rem',
+  paddingTop: '1rem',
+  width: '100%',
+  display: 'grid',
+  justifyItems: 'center',
+})
+
 interface ModalProps {
   campaign: CampaignResponse
   setOpen: React.Dispatch<React.SetStateAction<boolean>>
@@ -152,19 +162,11 @@ export default function RenderCampaignSubscribeModal({ campaign, setOpen }: Moda
   if (!isGuest) {
     return (
       <Dialog open onClose={handleClose} sx={{ scroll: 'none' }} fullWidth={true} maxWidth={'sm'}>
-        <DialogContent
-          style={{
-            overflow: 'hidden',
-            padding: '3rem',
-            paddingTop: '1rem',
-            width: '100%',
-            display: 'grid',
-            justifyItems: 'center',
-          }}>
+        <StyledDialogContent>
           <CloseModalButton onClose={handleClose} />
           <React.Fragment>
             <EmailIcon color="primary" sx={{ fontSize: '64px' }} />
-            <DialogTitle style={{ textAlign: 'center', width: '100%' }}>
+            <DialogTitle sx={{ textAlign: 'center', width: '100%' }}>
               {t('common:notifications.subscribe-campaign-title')}
             </DialogTitle>
             <Grid container direction="column" component="section">
@@ -206,26 +208,18 @@ export default function RenderCampaignSubscribeModal({ campaign, setOpen }: Moda
               </StyledGrid>
             </Grid>
           </React.Fragment>
-        </DialogContent>
+        </StyledDialogContent>
       </Dialog>
     )
   } else {
     return (
       <Dialog open onClose={handleClose} sx={{ scroll: 'none' }} fullWidth={true} maxWidth={'sm'}>
-        <DialogContent
-          style={{
-            overflow: 'hidden',
-            padding: '3rem',
-            paddingTop: '1rem',
-            width: '100%',
-            display: 'grid',
-            justifyItems: 'center',
-          }}>
+        <StyledDialogContent>
           <CloseModalButton onClose={handleClose} />
           {!isSuccess ? (
             <React.Fragment>
               <EmailIcon color="primary" sx={{ fontSize: theme.typography.pxToRem(64) }} />
-              <DialogTitle style={{ textAlign: 'center', width: '100%' }}>
+              <DialogTitle sx={{ textAlign: 'center', width: '100%' }}>
                 {t('common:notifications.subscribe-campaign-title')}
               </DialogTitle>
               <Grid container direction="column" component="section" sx={{ textAlign: 'center' }}>
@@ -234,14 +228,14 @@ export default function RenderCampaignSubscribeModal({ campaign, setOpen }: Moda
             </React.Fragment>
           ) : (
             <DialogContent
-              style={{ textAlign: 'center', fontSize: 20, fontWeight: 600, paddingBottom: 6 }}>
+              sx={{ textAlign: 'center', fontSize: 20, fontWeight: 600, paddingBottom: 6 }}>
               <CloseModalButton onClose={handleClose} />
               <React.Fragment>
                 <ThumbUpIcon sx={{ fontSize: theme.typography.pxToRem(64), color: '#03C03C' }} />
                 <DialogTitle>
                   <Typography
                     variant="h5"
-                    style={{ textAlign: 'center', width: '100%', color: '#03C03C' }}>
+                    sx={{ textAlign: 'center', width: '100%', color: '#03C03C' }}>
                     {t('common:notifications.confirm-subscribe')}
                   </Typography>
                 </DialogTitle>
@@ -255,7 +249,7 @@ export default function RenderCampaignSubscribeModal({ campaign, setOpen }: Moda
               </React.Fragment>
             </DialogContent>
           )}
-        </DialogContent>
+        </StyledDialogContent>
       </Dialog>
     )
   }
diff --git a/src/components/client/notifications/GeneralSubscribeModal.tsx b/src/components/client/notifications/GeneralSubscribeModal.tsx
index fd354836f..4a2ec8515 100644
--- a/src/components/client/notifications/GeneralSubscribeModal.tsx
+++ b/src/components/client/notifications/GeneralSubscribeModal.tsx
@@ -28,6 +28,7 @@ const PREFIX = 'GeneralSubscribeModal'
 
 const classes = {
   subscribeBtn: `${PREFIX}-subscribe`,
+  dialogContent: `${PREFIX}-dialogContent`,
 }
 
 const StyledGrid = styled(Grid)(({ theme }) => ({
@@ -44,6 +45,17 @@ const StyledGrid = styled(Grid)(({ theme }) => ({
   },
 }))
 
+const StyledDialogContent = styled(DialogContent)(({ theme }) => ({
+  [`&.${classes.dialogContent}`]: {
+    overflow: 'hidden',
+    padding: theme.spacing(6),
+    paddingTop: theme.spacing(2),
+    width: '100%',
+    display: 'grid',
+    justifyItems: 'center',
+  },
+}))
+
 interface ModalProps {
   setOpen: React.Dispatch<React.SetStateAction<boolean>>
 }
@@ -156,19 +168,11 @@ export default function RenderSubscribeModal({ setOpen }: ModalProps) {
   if (!isGuest) {
     return (
       <Dialog open onClose={handleClose} sx={{ scroll: 'none' }} fullWidth={true} maxWidth={'sm'}>
-        <DialogContent
-          style={{
-            overflow: 'hidden',
-            padding: '3rem',
-            paddingTop: '1rem',
-            width: '100%',
-            display: 'grid',
-            justifyItems: 'center',
-          }}>
+        <StyledDialogContent className={classes.dialogContent}>
           <CloseModalButton onClose={handleClose} />
           <React.Fragment>
             <EmailIcon color="primary" sx={{ fontSize: theme.typography.pxToRem(64) }} />
-            <DialogTitle style={{ textAlign: 'center', width: '100%' }}>
+            <DialogTitle sx={{ textAlign: 'center', width: '100%' }}>
               {t('common:notifications.subscribe-title')}
             </DialogTitle>
             <Grid container direction="column" component="section">
@@ -223,26 +227,18 @@ export default function RenderSubscribeModal({ setOpen }: ModalProps) {
               </StyledGrid>
             </Grid>
           </React.Fragment>
-        </DialogContent>
+        </StyledDialogContent>
       </Dialog>
     )
   } else {
     return (
       <Dialog open onClose={handleClose} sx={{ scroll: 'none' }} fullWidth={true} maxWidth={'sm'}>
-        <DialogContent
-          style={{
-            overflow: 'hidden',
-            padding: '3rem',
-            paddingTop: '1rem',
-            width: '100%',
-            display: 'grid',
-            justifyItems: 'center',
-          }}>
+        <StyledDialogContent className={classes.dialogContent}>
           <CloseModalButton onClose={handleClose} />
           {!isSuccess ? (
             <React.Fragment>
               <EmailIcon color="primary" sx={{ fontSize: theme.typography.pxToRem(64) }} />
-              <DialogTitle style={{ textAlign: 'center', width: '100%' }}>
+              <DialogTitle sx={{ textAlign: 'center', width: '100%' }}>
                 {t('common:notifications.subscribe-title')}
               </DialogTitle>
               <Grid container direction="column" component="section" sx={{ textAlign: 'center' }}>
@@ -251,14 +247,14 @@ export default function RenderSubscribeModal({ setOpen }: ModalProps) {
             </React.Fragment>
           ) : (
             <DialogContent
-              style={{ textAlign: 'center', fontSize: 20, fontWeight: 600, paddingBottom: 6 }}>
+              sx={{ textAlign: 'center', fontSize: 20, fontWeight: 600, paddingBottom: 6 }}>
               <CloseModalButton onClose={handleClose} />
               <React.Fragment>
                 <ThumbUpIcon sx={{ fontSize: theme.typography.pxToRem(64), color: '#03C03C' }} />
                 <DialogTitle>
                   <Typography
                     variant="h5"
-                    style={{ textAlign: 'center', width: '100%', color: '#03C03C' }}>
+                    sx={{ textAlign: 'center', width: '100%', color: '#03C03C' }}>
                     {t('common:notifications.confirm-subscribe')}
                   </Typography>
                 </DialogTitle>
@@ -272,7 +268,7 @@ export default function RenderSubscribeModal({ setOpen }: ModalProps) {
               </React.Fragment>
             </DialogContent>
           )}
-        </DialogContent>
+        </StyledDialogContent>
       </Dialog>
     )
   }
diff --git a/src/components/client/notifications/SubscriptionPage.tsx b/src/components/client/notifications/SubscriptionPage.tsx
index 5e76e1fae..e19ab3754 100644
--- a/src/components/client/notifications/SubscriptionPage.tsx
+++ b/src/components/client/notifications/SubscriptionPage.tsx
@@ -76,6 +76,13 @@ const StyledGrid = styled(Grid)(({ theme }) => ({
   },
 }))
 
+const StyledSuccessTypography = styled(Typography)(({ theme }) => ({
+  textAlign: 'center',
+  width: '100%',
+  color: '#03C03C',
+  wordBreak: 'break-word',
+}))
+
 export default function SubscriptionPage(data: Props) {
   const { t } = useTranslation()
   const { locale } = useRouter()
@@ -177,16 +184,9 @@ export default function SubscriptionPage(data: Props) {
                 alignItems={'center'}>
                 <ThumbUpIcon sx={{ fontSize: theme.typography.pxToRem(64), color: '#03C03C' }} />
                 <DialogTitle>
-                  <Typography
-                    variant="h5"
-                    style={{
-                      textAlign: 'center',
-                      width: '100%',
-                      color: '#03C03C',
-                      wordBreak: 'break-word',
-                    }}>
+                  <StyledSuccessTypography variant="h5">
                     {t('notifications:subscribe.thank-you-msg-heading')}
-                  </Typography>
+                  </StyledSuccessTypography>
                 </DialogTitle>
                 <Typography sx={{ wordBreak: 'break-word' }}>
                   <Trans
@@ -227,7 +227,7 @@ export default function SubscriptionPage(data: Props) {
                     <Typography
                       variant="h5"
                       component={'p'}
-                      style={{ textAlign: 'center', width: '100%', color: '#FF007F' }}>
+                      sx={{ textAlign: 'center', width: '100%', color: '#FF007F' }}>
                       {t('notifications:subscribe.subscription-fail-heading')}
                     </Typography>
                   </DialogTitle>
diff --git a/src/components/client/notifications/UNsubscriptionsPage.tsx b/src/components/client/notifications/UNsubscriptionsPage.tsx
index 8272ab2ff..2b5a84be5 100644
--- a/src/components/client/notifications/UNsubscriptionsPage.tsx
+++ b/src/components/client/notifications/UNsubscriptionsPage.tsx
@@ -67,6 +67,13 @@ const StyledGrid = styled(Grid)(({ theme }) => ({
   },
 }))
 
+const StyledDialogContent = styled(DialogContent)(({ theme }) => ({
+  textAlign: 'center',
+  fontSize: 23,
+  fontWeight: 600,
+  paddingBottom: theme.spacing(6),
+}))
+
 export default function UNsubscriptionPage(data: Props) {
   const { t } = useTranslation()
   const { locale } = useRouter()
@@ -135,10 +142,9 @@ export default function UNsubscriptionPage(data: Props) {
         {isSuccess ? (
           <React.Fragment>
             <Grid item mt={5}>
-              <DialogContent
-                style={{ textAlign: 'center', fontSize: 23, fontWeight: 600, paddingBottom: 6 }}>
+              <StyledDialogContent>
                 {t('notifications:unsubscribe.thank-you-msg')}
-              </DialogContent>
+              </StyledDialogContent>
             </Grid>
             <StyledGrid mt={5} display="grid" alignItems="center" justifyContent="center">
               <LinkButton className={classes.siteBtn} href="/">
@@ -148,19 +154,16 @@ export default function UNsubscriptionPage(data: Props) {
           </React.Fragment>
         ) : (
           <React.Fragment>
-            <React.Fragment>
-              <Grid item mt={5}>
-                <DialogContent
-                  style={{ textAlign: 'center', fontSize: 23, fontWeight: 600, paddingBottom: 6 }}>
-                  {t('notifications:unsubscribe.subscription-fail')}
-                </DialogContent>
-              </Grid>
-              <StyledGrid mt={5} display="grid" alignItems="center" justifyContent="center">
-                <Button className={classes.siteBtn} onClick={() => router.reload()}>
-                  {t('notifications:unsubscribe.cta-retry')}
-                </Button>
-              </StyledGrid>{' '}
-            </React.Fragment>
+            <Grid item mt={5}>
+              <StyledDialogContent>
+                {t('notifications:unsubscribe.subscription-fail')}
+              </StyledDialogContent>
+            </Grid>
+            <StyledGrid mt={5} display="grid" alignItems="center" justifyContent="center">
+              <Button className={classes.siteBtn} onClick={() => router.reload()}>
+                {t('notifications:unsubscribe.cta-retry')}
+              </Button>
+            </StyledGrid>{' '}
           </React.Fragment>
         )}
       </Grid>
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) {
       <CheckboxField label={label} name={name} />
       {description && (
         <Tooltip title={description}>
-          <InfoIcon color="primary" style={{ opacity: '0.45' }} />
+          <InfoIcon color="primary" sx={{ opacity: '0.45' }} />
         </Tooltip>
       )}
     </Box>
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 (
     <StyledGrid container justifyContent="space-between" className={classes.firstRow}>
       <Grid item xs={12}>
-        <Typography variant="body2" style={{ fontWeight: 'bold' }}>
+        <Typography variant="body2" sx={{ fontWeight: 'bold' }}>
           {t('about-project:association-name')}
         </Typography>
         <Typography variant="body2">{t('about-project:bank-name')}</Typography>
@@ -38,7 +38,7 @@ export const BankTransfer = () => {
               whiteSpace="nowrap"
               variant="body2"
               component="strong"
-              style={{ fontWeight: 'bold' }}>
+              sx={{ fontWeight: 'bold' }}>
               {ibanNumber}
             </Typography>
           </Grid>
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<HTMLAnchorElement, 'href' | 'target'>) {
   return (
-    <a style={{ color: theme.palette.text.primary }} href={href} target={target}>
+    <StyledLink href={href} target={target}>
       <MenuItem {...props} />
-    </a>
+    </StyledLink>
   )
 }
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 (
       <Root className={classes.container}>
-        <div style={{ textAlign: 'center' }}>
+        <div className={classes.singleImageContainer}>
           <Image
             src={sliderImages[0].src}
             alt={sliderImages[0].fileName}