switch admin related styles to sx and styled

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>
           ))}

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) => (

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',

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)',

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}

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)',

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>
     )
   }

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%',
+})

src/components/client/campaigns/CampaignDetails.tsx

@@ -150,7 +150,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}>