remove inline styles

podkrepi-bg · Jan 11, 2025 · 5f88da1 · 5f88da1
1 parent eaa87ed
commit 5f88da1
Show file tree

Hide file tree

Showing 45 changed files with 418 additions and 338 deletions.
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'

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'

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
-        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
@@ -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
@@ -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
@@ -2,21 +2,33 @@ 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'
 
 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'
 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
@@ -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
@@ -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
@@ -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={{