From 02b43471cad566597e71a8887a3513763c4de5c3 Mon Sep 17 00:00:00 2001 From: Alexandr Buhlak <48954743+saha80@users.noreply.github.com> Date: Mon, 18 Sep 2023 18:09:54 +0300 Subject: [PATCH] refactor(#267): move hardcoded values to constants --- .../newsFeed/NewsFilter/NewsFilter.styles.ts | 4 +-- .../BarAnimationDelayChart.tsx | 13 ++++---- .../GradientStackedAreaChart.tsx | 2 +- .../charts/LineRaceChart/LineRaceChart.tsx | 9 +++--- .../charts/ScatterChart/ScatterChart.tsx | 4 ++- src/components/charts/VisitorsPieChart.tsx | 4 ++- .../common/BaseButton/BaseButton.styles.ts | 13 -------- .../common/BaseCard/BaseCard.styles.tsx | 2 +- .../common/BaseHashTag/BaseHashTag.styles.ts | 2 +- .../common/BaseRadio/BaseRadio.styles.ts | 4 +-- .../common/BaseRate/BaseRate.styles.tsx | 31 ++++++++++--------- .../common/BaseSlider/BaseSlider.styles.tsx | 6 ++-- .../common/BaseTabs/BaseTabs.styles.tsx | 2 +- src/components/common/Loading/Loading.tsx | 8 ++--- src/components/common/charts/BaseChart.tsx | 8 ++--- .../common/charts/Legend/Legend.tsx | 7 ++--- .../selects/BaseSelect/BaseSelect.styles.ts | 4 +-- .../activityCard/ActivityChart.tsx | 11 +++---- .../BloodScreeningChart.tsx | 15 +++++---- .../covidCard/CovidChart.tsx | 17 +++++----- .../ScreeningsChart/ScreeningsChart.tsx | 17 +++++----- .../StatisticsCard/StatisticsCard.tsx | 7 ++--- .../TreatmentCalendar.styles.ts | 4 +-- .../TotalEarningChart/TotalEarningChart.tsx | 9 +++--- src/components/tables/Tables/Tables.tsx | 7 +++-- src/controllers/notificationController.tsx | 2 +- src/pages/AdvancedFormsPage.tsx | 9 +++--- src/styles/themeConfig.tsx | 2 +- src/styles/themes/dark/darkTheme.ts | 7 +++++ src/styles/themes/light/lightTheme.ts | 7 +++++ src/styles/themes/types.ts | 7 +++++ 31 files changed, 124 insertions(+), 120 deletions(-) diff --git a/src/components/apps/newsFeed/NewsFilter/NewsFilter.styles.ts b/src/components/apps/newsFeed/NewsFilter/NewsFilter.styles.ts index 4c843b8e1..ec2f2ab6b 100644 --- a/src/components/apps/newsFeed/NewsFilter/NewsFilter.styles.ts +++ b/src/components/apps/newsFeed/NewsFilter/NewsFilter.styles.ts @@ -96,7 +96,7 @@ export const TitleHeader = styled.div` display: inline-block; padding: 1rem; margin-bottom: 1.25rem; - box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.07); + box-shadow: ${({ theme }) => theme.newsFilterBoxShadow}; cursor: pointer; background-color: ${({ theme }) => theme.background}; border-radius: ${({ theme }) => theme.borderRadius}; @@ -161,7 +161,7 @@ export const FilterWrapper = styled.div` position: sticky; top: 1.875rem; padding: 1.25rem 1rem; - filter: drop-shadow(0 4px 40px rgba(0, 0, 0, 0.07)); + filter: drop-shadow(${({ theme }) => theme.newsFilterBoxShadow}); background: ${({ theme }) => theme.background}; border-radius: ${({ theme }) => theme.borderRadius}; } diff --git a/src/components/charts/BarAnimationDelayChart/BarAnimationDelayChart.tsx b/src/components/charts/BarAnimationDelayChart/BarAnimationDelayChart.tsx index 3bf37cee1..76e5dd1db 100644 --- a/src/components/charts/BarAnimationDelayChart/BarAnimationDelayChart.tsx +++ b/src/components/charts/BarAnimationDelayChart/BarAnimationDelayChart.tsx @@ -1,13 +1,12 @@ import React, { useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; +import { useTheme } from 'styled-components'; import { BaseCard } from '@app/components/common/BaseCard/BaseCard'; import { BaseChart } from '@app/components/common/charts/BaseChart'; -import { useAppSelector } from '@app/hooks/reduxHooks'; -import { themeObject } from '@app/styles/themes/themeVariables'; export const BarAnimationDelayChart: React.FC = () => { const { t } = useTranslation(); - const theme = useAppSelector((state) => state.theme.theme); + const theme = useTheme(); const [data, setData] = useState<{ data1: number[]; data2: number[]; xAxisData: string[] }>({ data1: [], @@ -36,7 +35,7 @@ export const BarAnimationDelayChart: React.FC = () => { left: 20, top: 0, textStyle: { - color: themeObject[theme].textMain, + color: theme.textMain, }, }, grid: { @@ -65,7 +64,7 @@ export const BarAnimationDelayChart: React.FC = () => { name: t('charts.females'), type: 'bar', data: data.data1, - color: themeObject[theme].chartColor2, + color: theme.chartColor2, emphasis: { focus: 'series', }, @@ -75,7 +74,7 @@ export const BarAnimationDelayChart: React.FC = () => { name: t('charts.males'), type: 'bar', data: data.data2, - color: themeObject[theme].chartColor3, + color: theme.chartColor3, emphasis: { focus: 'series', }, @@ -85,7 +84,7 @@ export const BarAnimationDelayChart: React.FC = () => { animationEasing: 'elasticOut', }; return ( - + ); diff --git a/src/components/charts/GradientStackedAreaChart/GradientStackedAreaChart.tsx b/src/components/charts/GradientStackedAreaChart/GradientStackedAreaChart.tsx index 06d505031..a535f2c14 100644 --- a/src/components/charts/GradientStackedAreaChart/GradientStackedAreaChart.tsx +++ b/src/components/charts/GradientStackedAreaChart/GradientStackedAreaChart.tsx @@ -200,7 +200,7 @@ export const GradientStackedAreaChart: React.FC = () => { }; return ( - + ); diff --git a/src/components/charts/LineRaceChart/LineRaceChart.tsx b/src/components/charts/LineRaceChart/LineRaceChart.tsx index f5acbdfb9..a7d5c66e9 100644 --- a/src/components/charts/LineRaceChart/LineRaceChart.tsx +++ b/src/components/charts/LineRaceChart/LineRaceChart.tsx @@ -3,8 +3,7 @@ import { useTranslation } from 'react-i18next'; import { BaseCard } from '@app/components/common/BaseCard/BaseCard'; import { BaseChart } from '@app/components/common/charts/BaseChart'; import Data from './data.json'; -import { useAppSelector } from '@app/hooks/reduxHooks'; -import { themeObject } from '@app/styles/themes/themeVariables'; +import { useTheme } from 'styled-components'; interface DataRow { id: string; @@ -46,7 +45,7 @@ export const LineRaceChart: React.FC = () => { const rawData = JSON.parse(JSON.stringify(Data)); const { t } = useTranslation(); - const theme = useAppSelector((state) => state.theme.theme); + const theme = useTheme(); const runAnimation = useCallback(() => { const countries = ['Finland', 'Germany', 'Iceland', 'Norway', 'United Kingdom']; @@ -76,7 +75,7 @@ export const LineRaceChart: React.FC = () => { endLabel: { show: true, formatter: (params) => `${params.value[3]}: ${params.value[0]}`, - color: themeObject[theme].textMain, + color: theme.textMain, }, labelLayout: { moveOverlap: 'shiftY', @@ -133,7 +132,7 @@ export const LineRaceChart: React.FC = () => { }; return ( - + ); diff --git a/src/components/charts/ScatterChart/ScatterChart.tsx b/src/components/charts/ScatterChart/ScatterChart.tsx index 4ac1ec721..074ddea03 100644 --- a/src/components/charts/ScatterChart/ScatterChart.tsx +++ b/src/components/charts/ScatterChart/ScatterChart.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { BaseCard } from '@app/components/common/BaseCard/BaseCard'; import { BaseChart } from 'components/common/charts/BaseChart'; import { useTranslation } from 'react-i18next'; +import { useTheme } from 'styled-components'; const data = [ [170.0, 59.0], @@ -109,9 +110,10 @@ const defaultOption = { export const ScatterChart: React.FC = () => { const { t } = useTranslation(); + const theme = useTheme(); return ( - + ); diff --git a/src/components/charts/VisitorsPieChart.tsx b/src/components/charts/VisitorsPieChart.tsx index 0b986c0f3..516475d66 100644 --- a/src/components/charts/VisitorsPieChart.tsx +++ b/src/components/charts/VisitorsPieChart.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { BaseCard } from '@app/components/common/BaseCard/BaseCard'; import { useTranslation } from 'react-i18next'; import { PieChart } from '../common/charts/PieChart'; +import { useTheme } from 'styled-components'; export const VisitorsPieChart: React.FC = () => { const { t } = useTranslation(); @@ -13,9 +14,10 @@ export const VisitorsPieChart: React.FC = () => { { value: 300, name: t('charts.video') }, ]; const name = t('charts.visitorsFrom'); + const theme = useTheme(); return ( - + ); diff --git a/src/components/common/BaseButton/BaseButton.styles.ts b/src/components/common/BaseButton/BaseButton.styles.ts index 6f25c8cbd..67a54058d 100644 --- a/src/components/common/BaseButton/BaseButton.styles.ts +++ b/src/components/common/BaseButton/BaseButton.styles.ts @@ -25,15 +25,6 @@ export const Button = styled(AntButton)` height: unset; `} - &.ant-btn-dangerous { - &.ant-btn-text { - &:focus, - &:not(:disabled):hover { - background: rgba(0, 0, 0, 0.018); - } - } - } - ${(props) => !props.danger && css` @@ -68,10 +59,6 @@ export const Button = styled(AntButton)` color: ${({ theme }) => theme.primary5}; } - &.ant-btn-text { - background-color: rgba(0, 0, 0, 0.018); - } - &.ant-btn-primary { background-color: ${({ theme }) => theme.primary5}; } diff --git a/src/components/common/BaseCard/BaseCard.styles.tsx b/src/components/common/BaseCard/BaseCard.styles.tsx index bc23d6091..3eeb65e9b 100644 --- a/src/components/common/BaseCard/BaseCard.styles.tsx +++ b/src/components/common/BaseCard/BaseCard.styles.tsx @@ -70,6 +70,6 @@ export const Card = styled((props: React.ComponentProps) => { } .ant-card-bordered { - border-color: #f0f0f0; + border-color: ${({ theme }) => theme.split}; } `; diff --git a/src/components/common/BaseHashTag/BaseHashTag.styles.ts b/src/components/common/BaseHashTag/BaseHashTag.styles.ts index 6d8ea1fb9..17f07e707 100644 --- a/src/components/common/BaseHashTag/BaseHashTag.styles.ts +++ b/src/components/common/BaseHashTag/BaseHashTag.styles.ts @@ -9,7 +9,7 @@ export const RemoveTagWrapper = styled.span` `; export const RemoveTagIcon = styled(CloseOutlined)` - color: #ffffff; + color: ${({ theme }) => theme.white}; font-size: ${({ theme }) => theme.fontSizes.xxs}; cursor: pointer; `; diff --git a/src/components/common/BaseRadio/BaseRadio.styles.ts b/src/components/common/BaseRadio/BaseRadio.styles.ts index 518dc6989..62e0c25b0 100644 --- a/src/components/common/BaseRadio/BaseRadio.styles.ts +++ b/src/components/common/BaseRadio/BaseRadio.styles.ts @@ -4,7 +4,7 @@ import { Radio as AntRadio } from 'antd'; export const Radio = styled(AntRadio)` .ant-radio-input:focus-visible + .ant-radio-inner { border-color: ${({ theme }) => theme.primary}; - box-shadow: 0 0 0 3px rgba(${({ theme }) => theme.rgb.primary}, 0.12); + box-shadow: ${({ theme }) => theme.radioBoxShadow}; } &.ant-radio-wrapper { @@ -32,7 +32,7 @@ export const Radio = styled(AntRadio)` export const RadioButton = styled(AntRadio.Button)` &.ant-radio-button-wrapper:has(:focus-visible) { - box-shadow: 0 0 0 3px rgba(${({ theme }) => theme.rgb.primary}, 0.12); + box-shadow: ${({ theme }) => theme.radioBoxShadow}; } &.ant-radio-button-wrapper-disabled { diff --git a/src/components/common/BaseRate/BaseRate.styles.tsx b/src/components/common/BaseRate/BaseRate.styles.tsx index b68691047..ea5f44dcd 100644 --- a/src/components/common/BaseRate/BaseRate.styles.tsx +++ b/src/components/common/BaseRate/BaseRate.styles.tsx @@ -1,19 +1,22 @@ -import styled from 'styled-components'; +import styled, { useTheme } from 'styled-components'; import { Rate as AntRate, ConfigProvider } from 'antd'; -export const Rate = styled((props: React.ComponentProps) => ( - ) => { + const theme = useTheme(); + return ( + - - -))` + }} + > + + + ); +})` font-size: ${({ theme }) => theme.fontSizes.lg}; `; diff --git a/src/components/common/BaseSlider/BaseSlider.styles.tsx b/src/components/common/BaseSlider/BaseSlider.styles.tsx index a74c33c29..995115f9a 100644 --- a/src/components/common/BaseSlider/BaseSlider.styles.tsx +++ b/src/components/common/BaseSlider/BaseSlider.styles.tsx @@ -11,9 +11,9 @@ export const Slider = styled((props: React.ComponentProps) => colorPrimaryBorder: theme.primary3, colorPrimary: theme.primary4, colorPrimaryBorderHover: theme.primary4, - colorFillSecondary: '#e1e1e1', - colorBorderSecondary: '#e1e1e1', - colorFillContentHover: '#e1e1e1', + colorFillSecondary: theme.sliderFillColor, + colorBorderSecondary: theme.sliderFillColor, + colorFillContentHover: theme.sliderFillColor, colorFillTertiary: theme.backgroundColorBase, handleSize: 11, handleSizeHover: 11, diff --git a/src/components/common/BaseTabs/BaseTabs.styles.tsx b/src/components/common/BaseTabs/BaseTabs.styles.tsx index 57a19a91a..c4d94f21d 100644 --- a/src/components/common/BaseTabs/BaseTabs.styles.tsx +++ b/src/components/common/BaseTabs/BaseTabs.styles.tsx @@ -12,7 +12,7 @@ export const Tabs = styled((props: React.ComponentProps) => { colorPrimary: theme.primary, colorPrimaryActive: theme.primary7, colorTextDisabled: theme.disabled, - colorBorderSecondary: '#f0f0f0', + colorBorderSecondary: theme.split, }, }, }} diff --git a/src/components/common/Loading/Loading.tsx b/src/components/common/Loading/Loading.tsx index a68e7799e..c5eca5ac2 100644 --- a/src/components/common/Loading/Loading.tsx +++ b/src/components/common/Loading/Loading.tsx @@ -1,8 +1,6 @@ import React from 'react'; -import styled from 'styled-components'; +import styled, { useTheme } from 'styled-components'; import { GlobalSpinner } from '@app/components/common/GlobalSpinner/GlobalSpinner'; -import { useAppSelector } from '@app/hooks/reduxHooks'; -import { themeObject } from '@app/styles/themes/themeVariables'; interface LoadingProps { size?: string; @@ -10,8 +8,8 @@ interface LoadingProps { } export const Loading: React.FC = ({ size, color }) => { - const theme = useAppSelector((state) => state.theme.theme); - const spinnerColor = color || themeObject[theme].spinnerBase; + const theme = useTheme(); + const spinnerColor = color || theme.spinnerBase; return ( diff --git a/src/components/common/charts/BaseChart.tsx b/src/components/common/charts/BaseChart.tsx index 112cbe1b5..383813f3f 100644 --- a/src/components/common/charts/BaseChart.tsx +++ b/src/components/common/charts/BaseChart.tsx @@ -1,10 +1,8 @@ import React, { CSSProperties, useEffect, useState } from 'react'; -import { DefaultTheme } from 'styled-components'; +import { DefaultTheme, useTheme } from 'styled-components'; import { EChartsOption } from 'echarts-for-react'; import ReactECharts from 'echarts-for-react'; import { Loading } from '../Loading/Loading'; -import { useAppSelector } from '@app/hooks/reduxHooks'; -import { themeObject } from '@app/styles/themes/themeVariables'; export interface BaseChartProps { option?: EChartsOption; @@ -47,13 +45,13 @@ export const getDefaultTooltipStyles = (theme: DefaultTheme): DefaultTooltipStyl }); export const BaseChart: React.FC = ({ option, width, height, onEvents, style, ...props }) => { - const theme = useAppSelector((state) => state.theme.theme); + const theme = useTheme(); const [loading, setLoading] = useState(true); const chartHeight = height || '400px'; const defaultOption = { - color: getChartColors(themeObject[theme]), + color: getChartColors(theme), }; useEffect(() => { diff --git a/src/components/common/charts/Legend/Legend.tsx b/src/components/common/charts/Legend/Legend.tsx index f3d0c0b2a..241cd1de9 100644 --- a/src/components/common/charts/Legend/Legend.tsx +++ b/src/components/common/charts/Legend/Legend.tsx @@ -2,8 +2,7 @@ import React from 'react'; import * as S from './Legend.styles'; import { BasePopover } from '@app/components/common/BasePopover/BasePopover'; import { getChartColors } from '@app/components/common/charts/BaseChart'; -import { useAppSelector } from '@app/hooks/reduxHooks'; -import { themeObject } from '@app/styles/themes/themeVariables'; +import { useTheme } from 'styled-components'; export interface LegendItem { name: string; @@ -17,8 +16,8 @@ interface LegendProps { } export const Legend: React.FC = ({ legendItems, activeItemIndex }) => { - const theme = useAppSelector((state) => state.theme.theme); - const colors = getChartColors(themeObject[theme]); + const theme = useTheme(); + const colors = getChartColors(theme); return ( <> diff --git a/src/components/common/selects/BaseSelect/BaseSelect.styles.ts b/src/components/common/selects/BaseSelect/BaseSelect.styles.ts index 275d22780..8936716cf 100644 --- a/src/components/common/selects/BaseSelect/BaseSelect.styles.ts +++ b/src/components/common/selects/BaseSelect/BaseSelect.styles.ts @@ -32,12 +32,12 @@ export const Select = styled(AntSelect)` &.ant-select-multiple { &.ant-select-disabled .ant-select-selection-item { - color: #bfbfbf; + color: ${({ theme }) => theme.selectionDisabled}; border: 1px solid ${({ theme }) => theme.borderBase}; } .ant-select-selection-item { - border: 1px solid #f0f0f0; + border: 1px solid ${({ theme }) => theme.split}; margin-inline-end: 11px; } diff --git a/src/components/medical-dashboard/activityCard/ActivityChart.tsx b/src/components/medical-dashboard/activityCard/ActivityChart.tsx index 75ab6849f..fcf33f87d 100644 --- a/src/components/medical-dashboard/activityCard/ActivityChart.tsx +++ b/src/components/medical-dashboard/activityCard/ActivityChart.tsx @@ -5,8 +5,7 @@ import { dashboardPaddings } from '@app/components/medical-dashboard/DashboardCa import { useResponsive } from '@app/hooks/useResponsive'; import { Dates } from '@app/constants/Dates'; import { ChartData, ChartSeriesData } from '@app/interfaces/interfaces'; -import { useAppSelector } from '@app/hooks/reduxHooks'; -import { themeObject } from '@app/styles/themes/themeVariables'; +import { useTheme } from 'styled-components'; import { graphic } from 'echarts'; interface ActivityChartProps { @@ -14,7 +13,7 @@ interface ActivityChartProps { } export const ActivityChart: React.FC = ({ data }) => { - const theme = useAppSelector((state) => state.theme.theme); + const theme = useTheme(); const { t } = useTranslation(); @@ -53,7 +52,7 @@ export const ActivityChart: React.FC = ({ data }) => { data: days, position: 'top', axisLabel: { - color: themeObject[theme].primary, + color: theme.primary, fontWeight: 500, fontSize: 14, }, @@ -63,7 +62,7 @@ export const ActivityChart: React.FC = ({ data }) => { min: 1500, axisLabel: { formatter: '{value} kcal', - color: themeObject[theme].textLight, + color: theme.textLight, fontWeight: 500, fontSize: 14, }, @@ -79,7 +78,7 @@ export const ActivityChart: React.FC = ({ data }) => { }, ], tooltip: { - ...getDefaultTooltipStyles(themeObject[theme]), + ...getDefaultTooltipStyles(theme), trigger: 'axis', formatter: (data: ChartSeriesData) => { const currentItem = data[0]; diff --git a/src/components/medical-dashboard/bloodScreeningCard/BloodScreeningChart/BloodScreeningChart.tsx b/src/components/medical-dashboard/bloodScreeningCard/BloodScreeningChart/BloodScreeningChart.tsx index 234829ea7..2795d0fb5 100644 --- a/src/components/medical-dashboard/bloodScreeningCard/BloodScreeningChart/BloodScreeningChart.tsx +++ b/src/components/medical-dashboard/bloodScreeningCard/BloodScreeningChart/BloodScreeningChart.tsx @@ -3,15 +3,14 @@ import { EChartsInstance } from 'echarts-for-react'; import { BaseChart } from '@app/components/common/charts/BaseChart'; import { Dates } from '@app/constants/Dates'; import { useResponsive } from 'hooks/useResponsive'; -import { useAppSelector } from '@app/hooks/reduxHooks'; -import { themeObject } from '@app/styles/themes/themeVariables'; +import { useTheme } from 'styled-components'; interface BloodScreeningChartsProps { data: number[]; } export const BloodScreeningChart: React.FC = ({ data }) => { - const theme = useAppSelector((state) => state.theme.theme); + const theme = useTheme(); const { isTablet, isDesktop, isMobile } = useResponsive(); const months = Dates.getMonths(); @@ -57,21 +56,21 @@ export const BloodScreeningChart: React.FC = ({ data showSymbol: false, symbol: 'circle', itemStyle: { - color: themeObject[theme].chartColor5, - borderColor: themeObject[theme].background, + color: theme.chartColor5, + borderColor: theme.background, borderWidth: 5, - shadowColor: themeObject[theme].shadow, + shadowColor: theme.shadow, shadowOffsetX: 0, shadowOffsetY: 5, opacity: 1, }, symbolSize: 18, areaStyle: { - color: themeObject[theme].chartSecondaryGradient, + color: theme.chartSecondaryGradient, }, lineStyle: { width: 2, - color: themeObject[theme].error, + color: theme.error, }, }, ], diff --git a/src/components/medical-dashboard/covidCard/CovidChart.tsx b/src/components/medical-dashboard/covidCard/CovidChart.tsx index 9a26b304d..4b092134c 100644 --- a/src/components/medical-dashboard/covidCard/CovidChart.tsx +++ b/src/components/medical-dashboard/covidCard/CovidChart.tsx @@ -2,8 +2,7 @@ import React from 'react'; import { BaseChart, getDefaultTooltipStyles } from '@app/components/common/charts/BaseChart'; import { getMarkAreaData, hexToRGB } from '@app/utils/utils'; import { ChartData, xData } from '@app/interfaces/interfaces'; -import { useAppSelector } from '@app/hooks/reduxHooks'; -import { themeObject } from '@app/styles/themes/themeVariables'; +import { useTheme } from 'styled-components'; interface CovidData { title: string; @@ -15,10 +14,10 @@ export const CovidChart: React.FC<{ deaths: CovidData; dateArr: xData; }> = ({ confirmed, deaths, dateArr }) => { - const theme = useAppSelector((state) => state.theme.theme); + const theme = useTheme(); const option = { - color: [themeObject[theme].chartPrimaryGradient, themeObject[theme].chartSecondaryGradientSpecular], + color: [theme.chartPrimaryGradient, theme.chartSecondaryGradientSpecular], grid: [ { top: 10, @@ -70,7 +69,7 @@ export const CovidChart: React.FC<{ areaStyle: {}, markArea: { itemStyle: { - color: `rgba(${hexToRGB(themeObject[theme].chartColor1)}, 0.02)`, + color: `rgba(${hexToRGB(theme.chartColor1)}, 0.02)`, }, data: dateArr && getMarkAreaData(dateArr), }, @@ -78,7 +77,7 @@ export const CovidChart: React.FC<{ smooth: true, lineStyle: { width: 2, - color: themeObject[theme].chartColor1, + color: theme.chartColor1, }, }, { @@ -90,7 +89,7 @@ export const CovidChart: React.FC<{ areaStyle: {}, markArea: { itemStyle: { - color: `rgba(${hexToRGB(themeObject[theme].chartColor5)}, 0.02)`, + color: `rgba(${hexToRGB(theme.chartColor5)}, 0.02)`, }, data: dateArr && getMarkAreaData(dateArr), }, @@ -98,12 +97,12 @@ export const CovidChart: React.FC<{ smooth: true, lineStyle: { width: 2, - color: themeObject[theme].chartColor5, + color: theme.chartColor5, }, }, ], tooltip: { - ...getDefaultTooltipStyles(themeObject[theme]), + ...getDefaultTooltipStyles(theme), trigger: 'axis', }, }; diff --git a/src/components/medical-dashboard/screeningsCard/ScreeningsChart/ScreeningsChart.tsx b/src/components/medical-dashboard/screeningsCard/ScreeningsChart/ScreeningsChart.tsx index 1e53a5850..f75b458ac 100644 --- a/src/components/medical-dashboard/screeningsCard/ScreeningsChart/ScreeningsChart.tsx +++ b/src/components/medical-dashboard/screeningsCard/ScreeningsChart/ScreeningsChart.tsx @@ -4,8 +4,7 @@ import { BaseChart, getDefaultTooltipStyles } from '@app/components/common/chart import { hexToRGB } from '@app/utils/utils'; import { getMarkAreaData } from '@app/utils/utils'; import { ChartSeriesData } from '@app/interfaces/interfaces'; -import { themeObject } from '@app/styles/themes/themeVariables'; -import { useAppSelector } from '@app/hooks/reduxHooks'; +import { useTheme } from 'styled-components'; interface StatisticsData { day: number; @@ -25,14 +24,14 @@ interface ScreeningsChartProps { const xAxisData = Array.from({ length: 16 }, (_, i) => i + 1); export const ScreeningsChart: React.FC = ({ firstUser, secondUser }) => { - const theme = useAppSelector((state) => state.theme.theme); + const theme = useTheme(); const { t } = useTranslation(); const option = { - color: [themeObject[theme].chartPrimaryGradient, themeObject[theme].chartSecondaryGradient], + color: [theme.chartPrimaryGradient, theme.chartSecondaryGradient], tooltip: { - ...getDefaultTooltipStyles(themeObject[theme]), + ...getDefaultTooltipStyles(theme), trigger: 'axis', formatter: (series: ChartSeriesData) => { const firstUser = series[1]; @@ -76,7 +75,7 @@ export const ScreeningsChart: React.FC = ({ firstUser, sec showSymbol: false, lineStyle: { width: 2, - color: themeObject[theme].chartColor1, + color: theme.chartColor1, }, areaStyle: { opacity: 1, @@ -87,7 +86,7 @@ export const ScreeningsChart: React.FC = ({ firstUser, sec data: firstUser?.data, markArea: { itemStyle: { - color: `rgba(${hexToRGB(themeObject[theme].chartColor1)}, 0.01)`, + color: `rgba(${hexToRGB(theme.chartColor1)}, 0.01)`, }, data: getMarkAreaData(xAxisData), }, @@ -98,7 +97,7 @@ export const ScreeningsChart: React.FC = ({ firstUser, sec smooth: true, lineStyle: { width: 2, - color: themeObject[theme].chartColor5, + color: theme.chartColor5, }, showSymbol: false, areaStyle: { @@ -110,7 +109,7 @@ export const ScreeningsChart: React.FC = ({ firstUser, sec data: secondUser?.data, markArea: { itemStyle: { - color: `rgba(${hexToRGB(themeObject[theme].chartColor1)}, 0.01)`, + color: `rgba(${hexToRGB(theme.chartColor1)}, 0.01)`, }, data: getMarkAreaData(xAxisData), }, diff --git a/src/components/medical-dashboard/statisticsCards/statisticsCard/StatisticsCard/StatisticsCard.tsx b/src/components/medical-dashboard/statisticsCards/statisticsCard/StatisticsCard/StatisticsCard.tsx index fbdb34ff9..083203e59 100644 --- a/src/components/medical-dashboard/statisticsCards/statisticsCard/StatisticsCard/StatisticsCard.tsx +++ b/src/components/medical-dashboard/statisticsCards/statisticsCard/StatisticsCard/StatisticsCard.tsx @@ -5,8 +5,7 @@ import { StatisticsProgress } from '../StatisticsProgress/StatisticsProgress'; import { useResponsive } from '@app/hooks/useResponsive'; import { StatisticColor } from '@app/constants/config/statistics'; import * as S from './StatisticsCard.styles'; -import { themeObject } from '@app/styles/themes/themeVariables'; -import { useAppSelector } from '@app/hooks/reduxHooks'; +import { useTheme } from 'styled-components'; import { BaseRow } from '@app/components/common/BaseRow/BaseRow'; import { BaseCol } from '@app/components/common/BaseCol/BaseCol'; @@ -20,7 +19,7 @@ interface StatisticsCardProps { } export const StatisticsCard: React.FC = ({ name, value, prevValue, color, unit, Icon }) => { - const theme = useAppSelector((state) => state.theme.theme); + const theme = useTheme(); const { isTablet: isTabletOrHigher } = useResponsive(); const { t } = useTranslation(); @@ -41,7 +40,7 @@ export const StatisticsCard: React.FC = ({ name, value, pre - + diff --git a/src/components/medical-dashboard/treatmentCard/TreatmentCalendar/TreatmentCalendar.styles.ts b/src/components/medical-dashboard/treatmentCard/TreatmentCalendar/TreatmentCalendar.styles.ts index 837f2b7b8..9598fcedb 100644 --- a/src/components/medical-dashboard/treatmentCard/TreatmentCalendar/TreatmentCalendar.styles.ts +++ b/src/components/medical-dashboard/treatmentCard/TreatmentCalendar/TreatmentCalendar.styles.ts @@ -14,7 +14,7 @@ export const Event = styled.div` right: 0; width: 100%; height: 100%; - box-shadow: 0 5px 15px rgba(0, 89, 171, 0.3); + box-shadow: ${({ theme }) => theme.treatmentCalendarEventBoxShadow}; font-weight: ${({ theme }) => theme.fontWeights.bold}; background: ${({ theme }) => theme.secondaryBackground}; color: ${(props) => (props.$isPast ? props.theme.textMain : props.theme.primary)}; @@ -51,7 +51,7 @@ export const Calendar = styled(BaseCalendar)` &.ant-picker-cell-selected { .ant-picker-cell-inner { - box-shadow: 0 5px 15px rgba(0, 89, 171, 0.3); + box-shadow: ${({ theme }) => theme.treatmentCalendarEventBoxShadow}; background: ${({ theme }) => theme.primary}; .ant-picker-calendar-date-value, diff --git a/src/components/nft-dashboard/totalEarning/TotalEarningChart/TotalEarningChart.tsx b/src/components/nft-dashboard/totalEarning/TotalEarningChart/TotalEarningChart.tsx index 388e26ab3..dda0b844c 100644 --- a/src/components/nft-dashboard/totalEarning/TotalEarningChart/TotalEarningChart.tsx +++ b/src/components/nft-dashboard/totalEarning/TotalEarningChart/TotalEarningChart.tsx @@ -2,8 +2,7 @@ import React from 'react'; import { BaseChart, getDefaultTooltipStyles } from '@app/components/common/charts/BaseChart'; import { ChartData, ChartSeriesData, CurrencyTypeEnum } from '@app/interfaces/interfaces'; import { formatNumberWithCommas, getCurrencyPrice } from '@app/utils/utils'; -import { useAppSelector } from '@app/hooks/reduxHooks'; -import { themeObject } from '@app/styles/themes/themeVariables'; +import { useTheme } from 'styled-components'; interface LineData { data: ChartData; @@ -15,10 +14,10 @@ interface TotalEarningChartProps { } export const TotalEarningChart: React.FC = ({ xAxisData, earningData }) => { - const theme = useAppSelector((state) => state.theme.theme); + const theme = useTheme(); const option = { tooltip: { - ...getDefaultTooltipStyles(themeObject[theme]), + ...getDefaultTooltipStyles(theme), trigger: 'axis', crossStyle: { color: 'red', @@ -59,7 +58,7 @@ export const TotalEarningChart: React.FC = ({ xAxisData, showSymbol: false, lineStyle: { width: 3, - color: themeObject[theme].chartColor3, + color: theme.chartColor3, }, emphasis: { focus: 'series', diff --git a/src/components/tables/Tables/Tables.tsx b/src/components/tables/Tables/Tables.tsx index 420017766..a524525c3 100644 --- a/src/components/tables/Tables/Tables.tsx +++ b/src/components/tables/Tables/Tables.tsx @@ -7,16 +7,17 @@ import * as S from './Tables.styles'; export const Tables: React.FC = () => { const { t } = useTranslation(); + const padding = '1.25rem 1.25rem 0'; return ( <> - + - + - + diff --git a/src/controllers/notificationController.tsx b/src/controllers/notificationController.tsx index f42ff0a4a..79fdca0cf 100644 --- a/src/controllers/notificationController.tsx +++ b/src/controllers/notificationController.tsx @@ -42,7 +42,7 @@ const Message = styled.div` `; const Description = styled.div` - color: #404040; + color: ${({ theme }) => theme.textDark}; font-size: ${({ theme }) => theme.fontSizes.md}; font-weight: ${({ theme }) => theme.fontWeights.semibold}; line-height: 1.375rem; diff --git a/src/pages/AdvancedFormsPage.tsx b/src/pages/AdvancedFormsPage.tsx index cd6027b01..84a6af077 100644 --- a/src/pages/AdvancedFormsPage.tsx +++ b/src/pages/AdvancedFormsPage.tsx @@ -11,12 +11,13 @@ import { BaseCol } from '@app/components/common/BaseCol/BaseCol'; const AdvancedFormsPage: React.FC = () => { const { t } = useTranslation(); + const padding = '1.25rem'; return ( <> {t('common.advancedForms')} - + @@ -24,17 +25,17 @@ const AdvancedFormsPage: React.FC = () => { - + - + - + diff --git a/src/styles/themeConfig.tsx b/src/styles/themeConfig.tsx index 6a88daa65..92c042aa2 100644 --- a/src/styles/themeConfig.tsx +++ b/src/styles/themeConfig.tsx @@ -49,7 +49,7 @@ export const getThemeConfig = (theme: DefaultTheme): ThemeConfig => { borderRadius, borderRadiusLG: borderRadius, borderRadiusOuter: borderRadius, - colorSplit: '#f0f0f0', + colorSplit: theme.split, wireframe: true, controlOutline, controlTmpOutline: controlOutline, diff --git a/src/styles/themes/dark/darkTheme.ts b/src/styles/themes/dark/darkTheme.ts index 7ce520e86..f771cbe6a 100644 --- a/src/styles/themes/dark/darkTheme.ts +++ b/src/styles/themes/dark/darkTheme.ts @@ -136,4 +136,11 @@ export const darkColorsTheme = { fontWeights: FONT_WEIGHT, fontFamilies: FONT_FAMILY, breakpoints: BREAKPOINTS, + selectionDisabled: '#bfbfbf', + split: '#f0f0f0', + sliderFillColor: '#e1e1e1', + newsFilterBoxShadow: '0 4px 40px rgba(0, 0, 0, 0.07)', + radioBoxShadow: `0 0 0 3px rgba(${hexToRGB(colorTypes.primary)}, 0.12)`, + chartsCardPadding: '0 0 1.875rem', + treatmentCalendarEventBoxShadow: '0 5px 15px rgba(0, 89, 171, 0.3)', } as const satisfies ITheme; diff --git a/src/styles/themes/light/lightTheme.ts b/src/styles/themes/light/lightTheme.ts index e07ec9da0..d32c14fb4 100644 --- a/src/styles/themes/light/lightTheme.ts +++ b/src/styles/themes/light/lightTheme.ts @@ -136,4 +136,11 @@ export const lightColorsTheme = { fontWeights: FONT_WEIGHT, fontFamilies: FONT_FAMILY, breakpoints: BREAKPOINTS, + selectionDisabled: '#bfbfbf', + split: '#f0f0f0', + sliderFillColor: '#e1e1e1', + newsFilterBoxShadow: '0 4px 40px rgba(0, 0, 0, 0.07)', + radioBoxShadow: `0 0 0 3px rgba(${hexToRGB(colorTypes.primary)}, 0.12)`, + chartsCardPadding: '0 0 1.875rem', + treatmentCalendarEventBoxShadow: '0 5px 15px rgba(0, 89, 171, 0.3)', } as const satisfies ITheme; diff --git a/src/styles/themes/types.ts b/src/styles/themes/types.ts index fd529b9bf..9fbb32581 100644 --- a/src/styles/themes/types.ts +++ b/src/styles/themes/types.ts @@ -106,4 +106,11 @@ export interface ITheme extends ColorTypes, IndexedPrimary, ChartColor, Partial< fontSizes: Partial; heights: Partial; breakpoints: Partial; + selectionDisabled: string; + split: string; + sliderFillColor: string; + radioBoxShadow: string; + newsFilterBoxShadow: string; + chartsCardPadding: string; + treatmentCalendarEventBoxShadow: string; }