refactor(#267): move hardcoded values to constants

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

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 (
-    <BaseCard padding="0 0 1.875rem" title={t('charts.barLabel')}>
+    <BaseCard padding={theme.chartsCardPadding} title={t('charts.barLabel')}>
       <BaseChart option={option} />
     </BaseCard>
   );

src/components/charts/GradientStackedAreaChart/GradientStackedAreaChart.tsx

@@ -200,7 +200,7 @@ export const GradientStackedAreaChart: React.FC = () => {
   };
 
   return (
-    <BaseCard padding="0 0 1.875rem" title={t('charts.gradientLabel')}>
+    <BaseCard padding={theme.chartsCardPadding} title={t('charts.gradientLabel')}>
       <BaseChart option={option} />
     </BaseCard>
   );

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 (
-    <BaseCard padding="0 0 1.875rem" title={t('charts.lineRace')}>
+    <BaseCard padding={theme.chartsCardPadding} title={t('charts.lineRace')}>
       <BaseChart option={option} height="24rem" />
     </BaseCard>
   );

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 (
-    <BaseCard padding="0 0 1.875rem" title={t('charts.scatter')}>
+    <BaseCard padding={theme.chartsCardPadding} title={t('charts.scatter')}>
       <BaseChart option={defaultOption} />
     </BaseCard>
   );

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 (
-    <BaseCard padding="0 0 1.875rem" title={t('charts.pie')}>
+    <BaseCard padding={theme.chartsCardPadding} title={t('charts.pie')}>
       <PieChart data={data} name={name} showLegend={true} />
     </BaseCard>
   );

src/components/common/BaseButton/BaseButton.styles.ts

@@ -25,15 +25,6 @@ export const Button = styled(AntButton)<BtnProps>`
       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)<BtnProps>`
           color: ${({ theme }) => theme.primary5};
         }
 
-        &.ant-btn-text {
-          background-color: rgba(0, 0, 0, 0.018);
-        }
-
         &.ant-btn-primary {
           background-color: ${({ theme }) => theme.primary5};
         }

src/components/common/BaseCard/BaseCard.styles.tsx

@@ -70,6 +70,6 @@ export const Card = styled((props: React.ComponentProps<typeof AntCard>) => {
   }
 
   .ant-card-bordered {
-    border-color: #f0f0f0;
+    border-color: ${({ theme }) => theme.split};
   }
 `;

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;
 `;

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 {

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<typeof AntRate>) => (
-  <ConfigProvider
-    theme={{
-      components: {
-        Rate: {
-          starColor: '#ffc24b',
-          colorFillContent: '#f0f0f0',
+export const Rate = styled((props: React.ComponentProps<typeof AntRate>) => {
+  const theme = useTheme();
+  return (
+    <ConfigProvider
+      theme={{
+        components: {
+          Rate: {
+            starColor: '#ffc24b',
+            colorFillContent: theme.split,
+          },
         },
-      },
-    }}
-  >
-    <AntRate {...props} />
-  </ConfigProvider>
-))`
+      }}
+    >
+      <AntRate {...props} />
+    </ConfigProvider>
+  );
+})`
   font-size: ${({ theme }) => theme.fontSizes.lg};
 `;

src/components/common/BaseSlider/BaseSlider.styles.tsx

@@ -11,9 +11,9 @@ export const Slider = styled((props: React.ComponentProps<typeof AntSlider>) =>
             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,

src/components/common/BaseTabs/BaseTabs.styles.tsx

@@ -12,7 +12,7 @@ export const Tabs = styled((props: React.ComponentProps<typeof AntTabs>) => {
             colorPrimary: theme.primary,
             colorPrimaryActive: theme.primary7,
             colorTextDisabled: theme.disabled,
-            colorBorderSecondary: '#f0f0f0',
+            colorBorderSecondary: theme.split,
           },
         },
       }}

src/components/common/Loading/Loading.tsx

@@ -1,17 +1,15 @@
 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;
   color?: string;
 }
 
 export const Loading: React.FC<LoadingProps> = ({ size, color }) => {
-  const theme = useAppSelector((state) => state.theme.theme);
-  const spinnerColor = color || themeObject[theme].spinnerBase;
+  const theme = useTheme();
+  const spinnerColor = color || theme.spinnerBase;
 
   return (
     <SpinnerContainer>

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

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<LegendProps> = ({ legendItems, activeItemIndex }) => {
-  const theme = useAppSelector((state) => state.theme.theme);
-  const colors = getChartColors(themeObject[theme]);
+  const theme = useTheme();
+  const colors = getChartColors(theme);
 
   return (
     <>

src/components/common/selects/BaseSelect/BaseSelect.styles.ts

@@ -32,12 +32,12 @@ export const Select = styled(AntSelect)<InternalSelectProps>`
 
   &.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;
     }