From 3a5d536219b48c7b190e46b4dd6bcb415f468ac8 Mon Sep 17 00:00:00 2001 From: ani-kalpachka Date: Thu, 14 Sep 2023 19:45:05 +0300 Subject: [PATCH] Reuse main colors from theme.ts, remove inlined color values --- .../admin/InfoRequestBottomAppBar.tsx | 4 +++- .../admin/SupportersBottomAppBar.tsx | 4 +++- .../bank-transactions/grid/GridAppbar.tsx | 3 ++- .../grid/RenderEditBankDonationStatusCell.tsx | 3 ++- .../admin/bankaccounts/grid/GridAppbar.tsx | 3 ++- .../admin/benefactor/grid/GridAppbar.tsx | 3 ++- .../admin/beneficiary/grid/GridAppbar.tsx | 3 ++- .../admin/cities/grid/GridAppbar.tsx | 3 ++- .../admin/coordinators/grid/GridAppbar.tsx | 3 ++- .../admin/countries/grid/GridAppbar.tsx | 3 ++- .../admin/documents/grid/GridAppbar.tsx | 3 ++- src/components/admin/donations/grid/Grid.tsx | 3 ++- .../admin/donations/grid/GridAppbar.tsx | 3 ++- .../grid/RenderEditBillingEmailCell.tsx | 3 ++- .../donations/grid/RenderEditPersonCell.tsx | 3 ++- .../admin/expenses/grid/GridAppbar.tsx | 3 ++- .../irregularity/admin/grid/GridAppbar.tsx | 3 ++- .../admin/organizers/grid/GridAppbar.tsx | 3 ++- .../recurring-donation/grid/GridAppbar.tsx | 3 ++- .../admin/transfers/grid/GridAppbar.tsx | 3 ++- .../admin/vaults/grid/GridAppbar.tsx | 3 ++- .../client/auth/profile/DonationTable.tsx | 7 ++++++- .../client/auth/profile/PersonalInfoTab.tsx | 5 +++-- .../grid/CampaignGridAppbar.tsx | 3 ++- .../client/campaign-news/CampaignNewsList.tsx | 5 +++-- .../client/campaigns/CampaignFilter.tsx | 21 ++++++++++++------- .../client/campaigns/CampaignSlider.tsx | 2 +- .../client/layout/nav/MainNavMenu.tsx | 3 ++- .../common/campaign-types/grid/GridAppbar.tsx | 3 ++- .../common/navigation/NestedMenu.tsx | 2 +- .../common/navigation/PanelFooter.tsx | 4 +++- .../common/person/grid/GridAppbar.tsx | 3 ++- 32 files changed, 82 insertions(+), 41 deletions(-) diff --git a/src/components/admin/InfoRequestBottomAppBar.tsx b/src/components/admin/InfoRequestBottomAppBar.tsx index 9bcb951a6..252a72b27 100644 --- 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 index eb9b6f131..7b1d497ab 100644 --- 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 index d50d4a2ac..c7b3001b8 100644 --- 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 index 27052725b..897e7a1e8 100644 --- 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 index 632cb265c..6a646f25a 100644 --- 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 index 7f71618bd..7d0a44100 100644 --- 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 index 6875e2341..d4315635c 100644 --- 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 index 20d4640c2..93d25928f 100644 --- 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 index 3716f8b04..21ec02c4b 100644 --- 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 index f5170124d..9a506de30 100644 --- 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 index 7bd66b782..00ec9d144 100644 --- 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 index e9122a21c..ae34f78e7 100644 --- 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 index f153ba4bd..5290519fd 100644 --- 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 index 943428c60..3fa49a481 100644 --- a/src/components/admin/donations/grid/RenderEditBillingEmailCell.tsx +++ b/src/components/admin/donations/grid/RenderEditBillingEmailCell.tsx @@ -12,6 +12,7 @@ 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 @@ -19,7 +20,7 @@ interface RenderEditCellProps { 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 index 0419c3736..bed0413d9 100644 --- a/src/components/admin/donations/grid/RenderEditPersonCell.tsx +++ b/src/components/admin/donations/grid/RenderEditPersonCell.tsx @@ -12,6 +12,7 @@ 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 @@ -19,7 +20,7 @@ interface RenderEditCellProps { 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 index 7e4bf3b61..feaf44a68 100644 --- 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 index 3453afd67..76546b7b9 100644 --- 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 index 3f7c8155c..4a5bf93ff 100644 --- 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 index a897fbf90..1e9155679 100644 --- 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 index 02078275e..d3569c4cc 100644 --- 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 index e6a6b5f03..1c36f0dc0 100644 --- 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 index caed15350..67f50c88a 100644 --- 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={}> {t('profile:donations.download')} diff --git a/src/components/client/auth/profile/PersonalInfoTab.tsx b/src/components/client/auth/profile/PersonalInfoTab.tsx index 1a5d8e539..d4766c1f0 100644 --- 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() { setIsDisableAccountModalOpen(true)}> {t('profile:personalInfo.delete')} diff --git a/src/components/client/campaign-expenses/grid/CampaignGridAppbar.tsx b/src/components/client/campaign-expenses/grid/CampaignGridAppbar.tsx index 47a5f8073..db1316187 100644 --- 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 index 20c56077e..4e6d5cb9d 100644 --- 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', }}> diff --git a/src/components/client/campaigns/CampaignFilter.tsx b/src/components/client/campaigns/CampaignFilter.tsx index 2c533f613..5993d5458 100644 --- a/src/components/client/campaigns/CampaignFilter.tsx +++ b/src/components/client/campaigns/CampaignFilter.tsx @@ -21,6 +21,7 @@ import { VolunteerActivism, } from '@mui/icons-material' import useMobile from 'common/hooks/useMobile' +import theme from 'common/theme' const PREFIX = 'CampaignFilter' @@ -35,22 +36,26 @@ const Root = styled('div')(() => ({ borderRadius: 0, borderBottom: '1px solid transparent', padding: 1, + '&:active': { - color: '#4AC3FF', - borderBottom: '5px solid #4AC3FF', + color: theme.palette.primary.light, + borderBottom: `5px solid ${theme.palette.primary.light}`, }, + '&:hover': { backgroundColor: 'white', - borderBottom: '5px solid #4AC3FF', - color: '#4AC3FF', + borderBottom: `5px solid ${theme.palette.primary.light}`, + color: theme.palette.primary.light, }, + '&:focus': { - color: '#4AC3FF', - borderBottom: '5px solid #4AC3FF', + color: theme.palette.primary.light, + borderBottom: `5px solid ${theme.palette.primary.light}`, }, + '&:selected': { - color: '#4AC3FF', - borderBottom: '5px solid #4AC3FF', + color: theme.palette.primary.light, + borderBottom: `5px solid ${theme.palette.primary.light}`, }, }, })) diff --git a/src/components/client/campaigns/CampaignSlider.tsx b/src/components/client/campaigns/CampaignSlider.tsx index 8bea6f50a..a1a2cb823 100644 --- a/src/components/client/campaigns/CampaignSlider.tsx +++ b/src/components/client/campaigns/CampaignSlider.tsx @@ -43,7 +43,7 @@ const Root = styled('div')(() => ({ }, '& .slick-dots li button:before': { fontSize: theme.spacing(1), - color: '#32a9fe', + color: theme.palette.primary.main, }, }, })) diff --git a/src/components/client/layout/nav/MainNavMenu.tsx b/src/components/client/layout/nav/MainNavMenu.tsx index 78bb9599a..fb6877c42 100644 --- a/src/components/client/layout/nav/MainNavMenu.tsx +++ b/src/components/client/layout/nav/MainNavMenu.tsx @@ -3,6 +3,7 @@ import { Grid, Typography } from '@mui/material' import { useTranslation } from 'next-i18next' import { routes } from 'common/routes' +import theme from 'common/theme' import DonationMenu from './DonationMenu' import ProjectMenu from './ProjectMenu' @@ -18,7 +19,7 @@ export default function MainNavMenu({ children }: { children?: React.ReactNode } variant="outlined" size="large" color="inherit" - sx={{ borderColor: '#32A9FE' }} + sx={{ borderColor: theme.palette.primary.main }} href={routes.campaigns.index}> {t('nav.donate')} diff --git a/src/components/common/campaign-types/grid/GridAppbar.tsx b/src/components/common/campaign-types/grid/GridAppbar.tsx index d6c74133c..d9f6b4e23 100644 --- a/src/components/common/campaign-types/grid/GridAppbar.tsx +++ b/src/components/common/campaign-types/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/common/navigation/NestedMenu.tsx b/src/components/common/navigation/NestedMenu.tsx index f3d993b7b..44e542bfc 100644 --- a/src/components/common/navigation/NestedMenu.tsx +++ b/src/components/common/navigation/NestedMenu.tsx @@ -13,7 +13,7 @@ export default observer(function NestedMenu() { const commongStyles = { display: { xs: 'none', sm: 'block' }, letterSpacing: '1px', - color: '#4ac3ff', + color: 'black', width: '100%', padding: 0, } diff --git a/src/components/common/navigation/PanelFooter.tsx b/src/components/common/navigation/PanelFooter.tsx index cd5b607df..ee8487676 100644 --- a/src/components/common/navigation/PanelFooter.tsx +++ b/src/components/common/navigation/PanelFooter.tsx @@ -1,5 +1,7 @@ import { Box } from '@mui/material' +import theme from 'common/theme' + type Props = { children: React.ReactNode } @@ -12,7 +14,7 @@ function PanelFooter({ children }: Props) { bottom: 0, width: '100%', height: '45x', - background: '#294e85', + background: theme.palette.primary.dark, display: 'flex', alignItems: 'center', justifyContent: 'flex-end', diff --git a/src/components/common/person/grid/GridAppbar.tsx b/src/components/common/person/grid/GridAppbar.tsx index c0ab9d9b3..bd1a0e418 100644 --- a/src/components/common/person/grid/GridAppbar.tsx +++ b/src/components/common/person/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,