podkrepi-bg · katina-anachkova · Nov 10, 2024 · Nov 10, 2024 · Nov 11, 2024 · Dec 16, 2024
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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'
@@ -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, StyledDialogTitle } from 'components/admin/styles/Admin.styled'
 
 interface RenderCellProps {
   params: GridRenderCellParams
@@ -97,26 +98,18 @@ 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%',
-          }}>
-          <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: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"
@@ -133,7 +126,7 @@ export default function RenderBankDonationStatusCell({ params }: RenderCellProps
               </Grid>
             </GenericForm>
           </Grid>
-        </DialogContent>
+        </StyledDialogContent>
       </Dialog>
     )
   }

diff --git 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'
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
-        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/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
@@ -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)',