refactor(#267): replace CSS variables with styled-components theme va…

…riables
altence · Dec 5, 2023 · a9ad464 · a9ad464
1 parent 63ef985
commit a9ad464
Show file tree

Hide file tree

Showing 192 changed files with 2,166 additions and 2,106 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { ConfigProvider, App as FeedbackProvider } from 'antd';
 import { HelmetProvider } from 'react-helmet-async';
+import { ThemeProvider } from 'styled-components';
 import deDe from 'antd/lib/locale/de_DE';
 import enUS from 'antd/lib/locale/en_US';
 import GlobalStyle from './styles/GlobalStyle';
@@ -18,6 +19,7 @@ import { getThemeConfig } from './styles/themeConfig';
 const App: React.FC = () => {
   const { language } = useLanguage();
   const theme = useAppSelector((state) => state.theme.theme);
+  const currentTheme = themeObject[theme];
 
   usePWA();
 
@@ -26,17 +28,17 @@ const App: React.FC = () => {
   useThemeWatcher();
 
   return (
-    <>
-      <meta name="theme-color" content={themeObject[theme].primary} />
+    <ThemeProvider theme={currentTheme}>
+      <meta name="theme-color" content={currentTheme.primary} />
       <GlobalStyle />
       <HelmetProvider>
-        <ConfigProvider theme={getThemeConfig(theme)} locale={language === 'en' ? enUS : deDe}>
+        <ConfigProvider theme={getThemeConfig(currentTheme)} locale={language === 'en' ? enUS : deDe}>
           <FeedbackProvider>
             <AppRouter />
           </FeedbackProvider>
         </ConfigProvider>
       </HelmetProvider>
-    </>
+    </ThemeProvider>
   );
 };
 

diff --git a/src/components/Error/Error.styles.ts b/src/components/Error/Error.styles.ts
@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { BORDER_RADIUS, FONT_WEIGHT, HEIGHT, media } from '@app/styles/themes/constants';
+import { media } from '@app/utils/utils';
 import { BaseImage } from '../common/BaseImage/BaseImage';
 import { BaseTypography } from '../common/BaseTypography/BaseTypography';
 
@@ -8,15 +8,14 @@ export const Wrapper = styled.div`
   flex-direction: column;
   align-items: center;
   padding: 3.75rem 1.25rem;
-  border-radius: ${BORDER_RADIUS};
+  border-radius: ${({ theme }) => theme.borderRadius};
+  background-color: ${({ theme }) => theme.background};
 
-  background-color: var(--background-color);
-
-  @media only screen and ${media.md} {
+  @media only screen and (${media('md')}) {
     padding: 2.5rem 6.25rem 6.25rem;
   }
 
-  @media only screen and ${media.xl} {
+  @media only screen and (${media('xl')}) {
     flex-direction: row-reverse;
     justify-content: center;
     padding: 12.5rem 3.5rem;
@@ -26,7 +25,7 @@ export const Wrapper = styled.div`
 export const Image = styled(BaseImage)`
   margin-bottom: 4rem;
 
-  @media only screen and ${media.xxl} {
+  @media only screen and (${media('xxl')}) {
     margin-bottom: 0;
   }
 `;
@@ -36,7 +35,7 @@ export const ContentWrapper = styled.div`
   flex-direction: column;
   align-items: center;
 
-  @media only screen and ${media.xl} {
+  @media only screen and (${media('xl')}) {
     margin-right: 7.5rem;
   }
 `;
@@ -45,15 +44,14 @@ export const Title = styled(BaseTypography.Text)`
   font-size: 2.25rem;
   font-weight: 600;
   margin-bottom: 1rem;
+  color: ${({ theme }) => theme.textMain};
 
-  color: var(--text-main-color);
-
-  @media only screen and ${media.md} {
+  @media only screen and (${media('md')}) {
     font-size: 3rem;
     margin-bottom: 1.75rem;
   }
 
-  @media only screen and ${media.xl} {
+  @media only screen and (${media('xl')}) {
     font-size: 4rem;
     margin-bottom: 2.25rem;
   }
@@ -63,19 +61,19 @@ export const Text = styled(Title)`
   font-size: 0.875rem;
   margin-bottom: 1.25rem;
 
-  @media only screen and ${media.md} {
+  @media only screen and (${media('md')}) {
     font-size: 1.12rem;
     margin-bottom: 1.45rem;
   }
 
-  @media only screen and ${media.xl} {
+  @media only screen and (${media('xl')}) {
     font-size: 1.5rem;
     margin-bottom: 1.8rem;
   }
 `;
 
 export const Link = styled(BaseTypography.Link)`
-  font-weight: ${FONT_WEIGHT.semibold};
-  line-height: ${HEIGHT.md};
+  font-weight: ${({ theme }) => theme.fontWeights.semibold};
+  line-height: ${({ theme }) => theme.heights.md};
   padding-inline: 15px;
 `;
diff --git a/src/components/apps/newsFeed/NewsFilter/NewsFilter.styles.ts b/src/components/apps/newsFeed/NewsFilter/NewsFilter.styles.ts
@@ -1,16 +1,16 @@
 import styled from 'styled-components';
 import { SearchOutlined, PlusCircleFilled, CloseOutlined } from '@ant-design/icons';
 import { BaseDatePicker } from '@app/components/common/pickers/BaseDatePicker';
-import { BORDER_RADIUS, BREAKPOINTS, FONT_SIZE, FONT_WEIGHT, media } from '@app/styles/themes/constants';
 import { BasePopover } from '@app/components/common/BasePopover/BasePopover';
 import { BaseInput } from '@app/components/common/inputs/BaseInput/BaseInput';
 import { BaseButton } from '@app/components/common/BaseButton/BaseButton';
 import { BaseCheckbox } from '@app/components/common/BaseCheckbox/BaseCheckbox';
+import { media } from '@app/utils/utils';
 
 export const AddTagText = styled.span`
-  color: var(--text-main-color);
-  font-size: ${FONT_SIZE.md};
-  font-weight: ${FONT_WEIGHT.semibold};
+  color: ${({ theme }) => theme.textMain};
+  font-size: ${({ theme }) => theme.fontSizes.md};
+  font-weight: ${({ theme }) => theme.fontWeights.semibold};
   line-height: 1.375rem;
 `;
 
@@ -26,10 +26,10 @@ export const FilterButton = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
-  background: var(--background-color);
-  border-radius: ${BORDER_RADIUS};
-  font-size: ${FONT_SIZE.xs};
-  font-weight: ${FONT_WEIGHT.semibold};
+  background: ${({ theme }) => theme.background};
+  border-radius: ${({ theme }) => theme.borderRadius};
+  font-size: ${({ theme }) => theme.fontSizes.xs};
+  font-weight: ${({ theme }) => theme.fontWeights.semibold};
   line-height: 1.25rem;
 `;
 
@@ -42,7 +42,7 @@ export const DateLabel = styled.div`
   width: 50%;
   line-height: 1.25rem;
   margin-bottom: 0.4375rem;
-  font-size: ${FONT_SIZE.xs};
+  font-size: ${({ theme }) => theme.fontSizes.xs};
 `;
 
 export const AddTagWrapper = styled.div`
@@ -65,7 +65,7 @@ export const BtnWrapper = styled.div`
 `;
 
 export const PlusIcon = styled(PlusCircleFilled)`
-  color: var(--lightgrey);
+  color: ${({ theme }) => theme.lightgray};
   font-size: 1.5625rem;
   margin-right: 1rem;
 `;
@@ -81,7 +81,7 @@ export const InputWrapper = styled.div`
   display: flex;
   height: 3.125rem;
   border-radius: 3.125rem;
-  background: var(--secondary-background-color);
+  background: ${({ theme }) => theme.secondaryBackground};
   margin-bottom: 1.25rem;
   position: relative;
 `;
@@ -98,19 +98,19 @@ export const TitleHeader = styled.div`
   margin-bottom: 1.25rem;
   box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.07);
   cursor: pointer;
-  background-color: var(--background-color);
-  border-radius: ${BORDER_RADIUS};
+  background-color: ${({ theme }) => theme.background};
+  border-radius: ${({ theme }) => theme.borderRadius};
 `;
 
 export const Input = styled(BaseInput)`
   height: 3.125rem;
   border: none;
-  background: var(--secondary-background-color);
+  background: ${({ theme }) => theme.secondaryBackground};
   border-radius: 3.125rem;
   padding-left: 3rem;
-  color: var(--text-main-color);
-  font-size: ${FONT_SIZE.md};
-  font-weight: ${FONT_WEIGHT.semibold};
+  color: ${({ theme }) => theme.textMain};
+  font-size: ${({ theme }) => theme.fontSizes.md};
+  font-weight: ${({ theme }) => theme.fontWeights.semibold};
   line-height: 1.375rem;
 `;
 
@@ -119,15 +119,15 @@ export const RangePicker = styled(BaseDatePicker.RangePicker)`
   margin-bottom: 0.875rem;
 
   &.ant-picker .ant-picker-input input {
-    color: var(--text-main-color);
-    font-size: ${FONT_SIZE.xs};
-    font-weight: ${FONT_WEIGHT.semibold};
+    color: ${({ theme }) => theme.textMain};
+    font-size: ${({ theme }) => theme.fontSizes.xs};
+    font-weight: ${({ theme }) => theme.fontWeights.semibold};
   }
 `;
 
 export const PanelWrapper = styled.div`
   .ant-picker-panels {
-    @media only screen and ${media.xs} and (max-width: ${BREAKPOINTS.md - 0.02}px) {
+    @media only screen and (${media('xs')}) and (max-width: ${({ theme }) => theme.breakpoints.md - 0.02}px) {
       display: flex;
       flex-direction: column;
     }
@@ -142,11 +142,11 @@ export const Btn = styled(BaseButton)`
 export const NewsWrapper = styled.div`
   max-width: 35rem;
 
-  @media only screen and ${media.xs} {
+  @media only screen and (${media('xs')}) {
     width: 100%;
   }
 
-  @media only screen and ${media.md} {
+  @media only screen and (${media('md')}) {
     width: calc(100% - 21.25rem);
   }
 `;
@@ -156,24 +156,24 @@ export const FilterWrapper = styled.div`
   flex-direction: column;
   height: min-content;
 
-  @media only screen and ${media.md} {
+  @media only screen and (${media('md')}) {
     margin-left: 1.875rem;
     position: sticky;
     top: 1.875rem;
     padding: 1.25rem 1rem;
     filter: drop-shadow(0 4px 40px rgba(0, 0, 0, 0.07));
-    background: var(--background-color);
-    border-radius: ${BORDER_RADIUS};
+    background: ${({ theme }) => theme.background};
+    border-radius: ${({ theme }) => theme.borderRadius};
   }
 `;
 
 export const FilterTitle = styled.div`
   display: flex;
   justify-content: center;
   line-height: 1.5625rem;
-  font-size: ${FONT_SIZE.lg};
-  font-weight: ${FONT_WEIGHT.bold};
-  color: var(--text-main-color);
+  font-size: ${({ theme }) => theme.fontSizes.lg};
+  font-weight: ${({ theme }) => theme.fontWeights.bold};
+  color: ${({ theme }) => theme.textMain};
   margin-bottom: 1rem;
 `;
 
@@ -199,7 +199,7 @@ export const ClosePopoverWrapper = styled.div`
 `;
 
 export const ClosePopover = styled(CloseOutlined)`
-  color: var(--primary-color);
+  color: ${({ theme }) => theme.primary};
   width: 0.875rem;
   height: 0.875rem;
 `;

diff --git a/src/components/apps/newsFeed/NewsFilter/NewsFilter.tsx b/src/components/apps/newsFeed/NewsFilter/NewsFilter.tsx
@@ -8,7 +8,7 @@ import { newsTags as defaultTags } from '@app/constants/newsTags';
 import { AppDate, Dates } from '@app/constants/Dates';
 import { Post } from '@app/api/news.api';
 import * as S from './NewsFilter.styles';
-import { BaseDropdown } from '@app/components/common/BaseDropdown/Dropdown';
+import { BaseDropdown } from '@app/components/common/BaseDropdown/BaseDropdown';
 
 interface NewsFilterProps {
   news: Post[];

diff --git a/src/components/apps/newsFeed/Validator.ts b/src/components/apps/newsFeed/Validator.ts
@@ -1,5 +1,5 @@
 import { IHashTag } from '@app/components/common/BaseHashTag/BaseHashTag';
-import { AppDate } from '../../../constants/Dates';
+import { AppDate } from '@app/constants/Dates';
 
 abstract class Validator {
   validate(): boolean {

diff --git a/src/components/auth/ForgotPasswordForm/ForgotPasswordForm.styles.ts b/src/components/auth/ForgotPasswordForm/ForgotPasswordForm.styles.ts
@@ -1,25 +1,25 @@
 import styled from 'styled-components';
-import { FONT_SIZE, FONT_WEIGHT, media } from '@app/styles/themes/constants';
 import { BaseButton } from '@app/components/common/BaseButton/BaseButton';
+import { media } from '@app/utils/utils';
 
 export const Description = styled.div`
   margin-bottom: 1.875rem;
-  color: var(--text-main-color);
-  font-size: ${FONT_SIZE.xs};
-  font-weight: ${FONT_WEIGHT.regular};
+  color: ${({ theme }) => theme.textMain};
+  font-size: ${({ theme }) => theme.fontSizes.xs};
+  font-weight: ${({ theme }) => theme.fontWeights.regular};
 
-  @media only screen and ${media.xs} {
-    font-size: ${FONT_SIZE.xxs};
+  @media only screen and (${media('xs')}) {
+    font-size: ${({ theme }) => theme.fontSizes.xxs};
   }
 
-  @media only screen and ${media.md} {
-    font-size: ${FONT_SIZE.xs};
+  @media only screen and (${media('md')}) {
+    font-size: ${({ theme }) => theme.fontSizes.xs};
   }
 `;
 
 export const SubmitButton = styled(BaseButton)`
-  font-size: ${FONT_SIZE.md};
-  font-weight: ${FONT_WEIGHT.semibold};
+  font-size: ${({ theme }) => theme.fontSizes.md};
+  font-weight: ${({ theme }) => theme.fontWeights.semibold};
   width: 100%;
   margin-top: 1.125rem;
   margin-bottom: 1rem;