Reuse main colors from theme.ts, remove inlined color values

podkrepi-bg · Sep 14, 2023 · 3a5d536 · 3a5d536
1 parent e08ff3c
commit 3a5d536
Show file tree

Hide file tree

Showing 32 changed files with 82 additions and 41 deletions.
diff --git a/src/components/admin/InfoRequestBottomAppBar.tsx b/src/components/admin/InfoRequestBottomAppBar.tsx
@@ -1,8 +1,10 @@
 import { Box, Toolbar, Tooltip, Typography } from '@mui/material'
 import { Add as AddIcon } from '@mui/icons-material'
 
+import theme from 'common/theme'
+
 const addIconStyles = {
-  background: '#4ac3ff',
+  background: theme.palette.primary.light,
   borderRadius: '50%',
   cursor: 'pointer',
   padding: 1.2,

diff --git a/src/components/admin/SupportersBottomAppBar.tsx b/src/components/admin/SupportersBottomAppBar.tsx
@@ -7,8 +7,10 @@ import {
   EventNote as EventNoteIcon,
 } from '@mui/icons-material'
 
+import theme from 'common/theme'
+
 const addIconStyles = {
-  background: '#4ac3ff',
+  background: theme.palette.primary.light,
   borderRadius: '50%',
   cursor: 'pointer',
   padding: 1.2,

diff --git a/src/components/admin/bank-transactions/grid/GridAppbar.tsx b/src/components/admin/bank-transactions/grid/GridAppbar.tsx
@@ -8,11 +8,12 @@ import { AlertStore } from 'stores/AlertStore'
 import { downloadFile } from '../../../../common/util/downloadFile'
 import { useMemo, useState } from 'react'
 import { useStores } from 'common/hooks/useStores'
+import theme from 'common/theme'
 import { debounce } from 'lodash'
 import RerunTransactionSyncModal from './RerunTransactionsSyncDialog'
 
 const addIconStyles = {
-  background: '#4ac3ff',
+  background: theme.palette.primary.light,
   borderRadius: '50%',
   cursor: 'pointer',
   padding: 1.2,

diff --git a/src/components/admin/bank-transactions/grid/RenderEditBankDonationStatusCell.tsx b/src/components/admin/bank-transactions/grid/RenderEditBankDonationStatusCell.tsx
@@ -5,6 +5,7 @@ import { paymentRef } from 'common/form/validation'
 import FormTextField from 'components/common/form/FormTextField'
 import GenericForm from 'components/common/form/GenericForm'
 import SubmitButton from 'components/common/form/SubmitButton'
+import theme from 'common/theme'
 import { BankDonationStatus } from 'gql/bank-transactions.enums'
 import { useState } from 'react'
 import { useTranslation } from 'next-i18next'
@@ -22,7 +23,7 @@ interface RenderCellProps {
 }
 
 const addIconStyles = {
-  background: '#4ac3ff',
+  background: theme.palette.primary.light,
   borderRadius: '50%',
   cursor: 'pointer',
   padding: 0.7,

diff --git a/src/components/admin/bankaccounts/grid/GridAppbar.tsx b/src/components/admin/bankaccounts/grid/GridAppbar.tsx
@@ -3,9 +3,10 @@ import { Box, Toolbar, Tooltip, Typography } from '@mui/material'
 import { Add as AddIcon } from '@mui/icons-material'
 
 import { routes } from 'common/routes'
+import theme from 'common/theme'
 
 const addIconStyles = {
-  background: '#4ac3ff',
+  background: theme.palette.primary.light,
   borderRadius: '50%',
   cursor: 'pointer',
   padding: 1.2,

diff --git a/src/components/admin/benefactor/grid/GridAppbar.tsx b/src/components/admin/benefactor/grid/GridAppbar.tsx
@@ -4,9 +4,10 @@ import { Box, Toolbar, Tooltip, Typography } from '@mui/material'
 import { Add as AddIcon } from '@mui/icons-material'
 
 import { routes } from 'common/routes'
+import theme from 'common/theme'
 
 const addIconStyles = {
-  background: '#4ac3ff',
+  background: theme.palette.primary.light,
   borderRadius: '50%',
   cursor: 'pointer',
   padding: 1.2,

diff --git a/src/components/admin/beneficiary/grid/GridAppbar.tsx b/src/components/admin/beneficiary/grid/GridAppbar.tsx
@@ -4,9 +4,10 @@ import { Box, Toolbar, Tooltip, Typography } from '@mui/material'
 import { Add as AddIcon } from '@mui/icons-material'
 
 import { routes } from 'common/routes'
+import theme from 'common/theme'
 
 const addIconStyles = {
-  background: '#4ac3ff',
+  background: theme.palette.primary.light,
   borderRadius: '50%',
   cursor: 'pointer',
   padding: 1.2,

diff --git a/src/components/admin/cities/grid/GridAppbar.tsx b/src/components/admin/cities/grid/GridAppbar.tsx
@@ -3,9 +3,10 @@ import { Box, Toolbar, Tooltip, Typography } from '@mui/material'
 import { Add as AddIcon } from '@mui/icons-material'
 
 import { routes } from 'common/routes'
+import theme from 'common/theme'
 
 const addIconStyles = {
-  background: '#4ac3ff',
+  background: theme.palette.primary.light,
   borderRadius: '50%',
   cursor: 'pointer',
   padding: 1.2,

diff --git a/src/components/admin/coordinators/grid/GridAppbar.tsx b/src/components/admin/coordinators/grid/GridAppbar.tsx
@@ -4,9 +4,10 @@ import { Add as AddIcon } from '@mui/icons-material'
 import { useTranslation } from 'next-i18next'
 
 import { routes } from 'common/routes'
+import theme from 'common/theme'
 
 const addIconStyles = {
-  background: '#4ac3ff',
+  background: theme.palette.primary.light,
   borderRadius: '50%',
   cursor: 'pointer',
   padding: 1.2,

diff --git a/src/components/admin/countries/grid/GridAppbar.tsx b/src/components/admin/countries/grid/GridAppbar.tsx
@@ -4,9 +4,10 @@ import { Box, Toolbar, Tooltip, Typography } from '@mui/material'
 import { Add as AddIcon } from '@mui/icons-material'
 
 import { routes } from 'common/routes'
+import theme from 'common/theme'
 
 const addIconStyles = {
-  background: '#4ac3ff',
+  background: theme.palette.primary.light,
   borderRadius: '50%',
   cursor: 'pointer',
   padding: 1.2,

diff --git a/src/components/admin/documents/grid/GridAppbar.tsx b/src/components/admin/documents/grid/GridAppbar.tsx
@@ -4,9 +4,10 @@ import { Box, Toolbar, Tooltip, Typography } from '@mui/material'
 import { Add as AddIcon } from '@mui/icons-material'
 
 import { routes } from 'common/routes'
+import theme from 'common/theme'
 
 const addIconStyles = {
-  background: '#4ac3ff',
+  background: theme.palette.primary.light,
   borderRadius: '50%',
   cursor: 'pointer',
   padding: 1.2,

diff --git a/src/components/admin/donations/grid/Grid.tsx b/src/components/admin/donations/grid/Grid.tsx
@@ -21,6 +21,7 @@ import { useRouter } from 'next/router'
 import { money } from 'common/util/money'
 import { CampaignDonationHistoryResponse } from 'gql/campaigns'
 import { usePersonList } from 'common/hooks/person'
+import theme from 'common/theme'
 import RenderEditPersonCell from './RenderEditPersonCell'
 import { useStores } from '../../../../common/hooks/useStores'
 import RenderEditBillingEmailCell from './RenderEditBillingEmailCell'
@@ -29,7 +30,7 @@ interface RenderCellProps {
   params: GridRenderCellParams
 }
 const addIconStyles = {
-  background: '#4ac3ff',
+  background: theme.palette.primary.light,
   borderRadius: '50%',
   cursor: 'pointer',
   padding: 0.7,

diff --git a/src/components/admin/donations/grid/GridAppbar.tsx b/src/components/admin/donations/grid/GridAppbar.tsx
@@ -10,10 +10,11 @@ import { AlertStore } from 'stores/AlertStore'
 import { downloadFile } from '../../../../common/util/downloadFile'
 import { useMemo, useState } from 'react'
 import { useStores } from 'common/hooks/useStores'
+import theme from 'common/theme'
 import { debounce } from 'lodash'
 
 const addIconStyles = {
-  background: '#4ac3ff',
+  background: theme.palette.primary.light,
   borderRadius: '50%',
   cursor: 'pointer',
   padding: 1.2,

diff --git a/src/components/admin/donations/grid/RenderEditBillingEmailCell.tsx b/src/components/admin/donations/grid/RenderEditBillingEmailCell.tsx
@@ -12,14 +12,15 @@ import { useEditDonation } from 'service/donation'
 import { ApiErrors } from 'service/apiErrors'
 import { AlertStore } from 'stores/AlertStore'
 import { personFilter } from 'components/common/person/PersonAutoCompleteFilter'
+import theme from 'common/theme'
 
 interface RenderEditCellProps {
   params: GridRenderEditCellParams
   personList?: PersonResponse[]
   onUpdate(): void
 }
 const addIconStyles = {
-  background: '#4ac3ff',
+  background: theme.palette.primary.light,
   borderRadius: '50%',
   cursor: 'pointer',
   padding: 0.7,

diff --git a/src/components/admin/donations/grid/RenderEditPersonCell.tsx b/src/components/admin/donations/grid/RenderEditPersonCell.tsx
@@ -12,14 +12,15 @@ import { useEditDonation } from 'service/donation'
 import { ApiErrors } from 'service/apiErrors'
 import { AlertStore } from 'stores/AlertStore'
 import { personFilter } from 'components/common/person/PersonAutoCompleteFilter'
+import theme from 'common/theme'
 
 interface RenderEditCellProps {
   params: GridRenderEditCellParams
   personList?: PersonResponse[]
   onUpdate(): void
 }
 const addIconStyles = {
-  background: '#4ac3ff',
+  background: theme.palette.primary.light,
   borderRadius: '50%',
   cursor: 'pointer',
   padding: 0.7,

diff --git a/src/components/admin/expenses/grid/GridAppbar.tsx b/src/components/admin/expenses/grid/GridAppbar.tsx
@@ -3,9 +3,10 @@ import { Box, Toolbar, Tooltip, Typography } from '@mui/material'
 import { Add as AddIcon } from '@mui/icons-material'
 
 import { routes } from 'common/routes'
+import theme from 'common/theme'
 
 const addIconStyles = {
-  background: '#4ac3ff',
+  background: theme.palette.primary.light,
   borderRadius: '50%',
   cursor: 'pointer',
   padding: 1.2,

diff --git a/src/components/admin/irregularity/admin/grid/GridAppbar.tsx b/src/components/admin/irregularity/admin/grid/GridAppbar.tsx
@@ -5,6 +5,7 @@ import { Add as AddIcon } from '@mui/icons-material'
 import { Box, Toolbar, Tooltip, Typography } from '@mui/material'
 
 import { routes } from 'common/routes'
+import theme from 'common/theme'
 
 const toolbarStyles = {
   background: 'white',
@@ -15,7 +16,7 @@ const toolbarStyles = {
 }
 
 const addIconStyles = {
-  background: '#4ac3ff',
+  background: theme.palette.primary.light,
   borderRadius: '50%',
   cursor: 'pointer',
   padding: 1.2,

diff --git a/src/components/admin/organizers/grid/GridAppbar.tsx b/src/components/admin/organizers/grid/GridAppbar.tsx
@@ -5,6 +5,7 @@ import { Add as AddIcon } from '@mui/icons-material'
 import { Box, Toolbar, Tooltip, Typography } from '@mui/material'
 
 import { routes } from 'common/routes'
+import theme from 'common/theme'
 
 const toolbarStyles = {
   background: 'white',
@@ -15,7 +16,7 @@ const toolbarStyles = {
 }
 
 const addIconStyles = {
-  background: '#4ac3ff',
+  background: theme.palette.primary.light,
   borderRadius: '50%',
   cursor: 'pointer',
   padding: 1.2,

diff --git a/src/components/admin/recurring-donation/grid/GridAppbar.tsx b/src/components/admin/recurring-donation/grid/GridAppbar.tsx
@@ -4,9 +4,10 @@ import { Box, Toolbar, Tooltip, Typography } from '@mui/material'
 import { Add as AddIcon } from '@mui/icons-material'
 
 import { routes } from 'common/routes'
+import theme from 'common/theme'
 
 const addIconStyles = {
-  background: '#4ac3ff',
+  background: theme.palette.primary.light,
   borderRadius: '50%',
   cursor: 'pointer',
   padding: 1.2,

diff --git a/src/components/admin/transfers/grid/GridAppbar.tsx b/src/components/admin/transfers/grid/GridAppbar.tsx
@@ -4,6 +4,7 @@ import { Add as AddIcon } from '@mui/icons-material'
 import { Box, Toolbar, Tooltip, Typography } from '@mui/material'
 
 import { routes } from 'common/routes'
+import theme from 'common/theme'
 
 const toolbarStyles = {
   background: 'white',
@@ -14,7 +15,7 @@ const toolbarStyles = {
 }
 
 const addIconStyles = {
-  background: '#4ac3ff',
+  background: theme.palette.primary.light,
   borderRadius: '50%',
   cursor: 'pointer',
   padding: 1.2,

diff --git a/src/components/admin/vaults/grid/GridAppbar.tsx b/src/components/admin/vaults/grid/GridAppbar.tsx
@@ -4,9 +4,10 @@ import { Box, Toolbar, Tooltip, Typography } from '@mui/material'
 import { Add as AddIcon } from '@mui/icons-material'
 
 import { routes } from 'common/routes'
+import theme from 'common/theme'
 
 const addIconStyles = {
-  background: '#4ac3ff',
+  background: theme.palette.primary.light,
   borderRadius: '50%',
   cursor: 'pointer',
   padding: 1.2,

diff --git a/src/components/client/auth/profile/DonationTable.tsx b/src/components/client/auth/profile/DonationTable.tsx
@@ -118,7 +118,12 @@ function DonationTable({ donations }: DonationTableProps) {
                       disabled={donation.status !== 'succeeded'}
                       endIcon={<ArrowForwardIcon />}>
                       <Link
-                        sx={{ color: donation.status !== 'succeeded' ? 'inherit' : '#32A9FE' }}
+                        sx={{
+                          color:
+                            donation.status !== 'succeeded'
+                              ? 'inherit'
+                              : theme.palette.primary.main,
+                        }}
                         target="_blank"
                         href={routes.donation.viewCertificate(donation.id)}>
                         {t('profile:donations.download')}

diff --git a/src/components/client/auth/profile/PersonalInfoTab.tsx b/src/components/client/auth/profile/PersonalInfoTab.tsx
@@ -6,6 +6,7 @@ import { Box, Divider, Link, Typography } from '@mui/material'
 
 import { formatDateString } from 'common/util/date'
 import { useCurrentPerson } from 'common/util/useCurrentPerson'
+import theme from 'common/theme'
 
 import ProfileTab from './ProfileTab'
 import { ProfileTabs } from './tabs'
@@ -35,7 +36,7 @@ const classes = {
 
 const Root = styled('div')(({ theme }) => ({
   [`& .${classes.editSpan}`]: {
-    color: '#294E85',
+    color: theme.palette.primary.dark,
   },
 
   [`& .${classes.editIcon}`]: { position: 'relative', top: '7px' },
@@ -200,7 +201,7 @@ export default function PersonalInfoTab() {
           <Divider className={classes.divider} />
           <Link
             href="#"
-            sx={{ color: '#294E85', float: 'right' }}
+            sx={{ color: theme.palette.primary.dark, float: 'right' }}
             onClick={() => setIsDisableAccountModalOpen(true)}>
             {t('profile:personalInfo.delete')}
           </Link>

diff --git a/src/components/client/campaign-expenses/grid/CampaignGridAppbar.tsx b/src/components/client/campaign-expenses/grid/CampaignGridAppbar.tsx
@@ -6,9 +6,10 @@ import { useViewCampaign } from 'common/hooks/campaigns'
 import { useCampaignExpensesList } from 'common/hooks/expenses'
 import { useTranslation } from 'next-i18next'
 import { moneyPublic } from 'common/util/money'
+import theme from 'common/theme'
 
 const addIconStyles = {
-  background: '#4ac3ff',
+  background: theme.palette.primary.light,
   borderRadius: '50%',
   cursor: 'pointer',
   padding: 1.2,

diff --git a/src/components/client/campaign-news/CampaignNewsList.tsx b/src/components/client/campaign-news/CampaignNewsList.tsx
@@ -12,6 +12,7 @@ import Image from 'next/image'
 import { GetArticleDocuments, GetArticleGalleryPhotos } from 'common/util/newsFilesUrls'
 import { useShowMoreContent } from './hooks/useShowMoreContent'
 import { HTMLContentSeparator } from 'common/util/htmlUtils'
+import theme from 'common/theme'
 import { QuillStypeWrapper } from 'components/common/QuillStyleWrapper'
 import { scrollToTop } from './utils/scrollToTop'
 import { getArticleHeight } from './utils/getArticleHeight'
@@ -93,9 +94,9 @@ export default function CampaignNewsList({ articles }: Props) {
             container
             key={article.id}
             sx={{
-              backgroundColor: index % 2 === 0 ? '#FFFFFF' : '#E3E3E3',
+              backgroundColor: index % 2 === 0 ? theme.palette.common.white : '#E3E3E3',
               borderBottom: 1,
-              borderColor: index % 2 === 0 ? '#FFFFFF' : '#C4C4C4',
+              borderColor: index % 2 === 0 ? theme.palette.common.white : '#C4C4C4',
             }}>
             <ArticleSection id={article.id}>
               <Grid container columnGap={2} rowGap={1} className={classes.dateAndAuthorContainer}>