altence · Rozhkow · Dec 5, 2023 · Mar 10, 2023 · Mar 14, 2023 · Mar 17, 2023
diff --git a/package.json b/package.json
@@ -11,12 +11,12 @@
     "url": "https://github.com/altence/lightence-admin/issues"
   },
   "dependencies": {
-    "@ant-design/icons": "^4.6.2",
+    "@ant-design/icons": "^5.2.4",
     "@craco/craco": "^6.1.2",
     "@lit-labs/react": "^1.0.2",
     "@react-google-maps/api": "^2.18.1",
     "@reduxjs/toolkit": "^1.7.1",
-    "antd": "^4.22.4",
+    "antd": "^5.11.5",
     "antd-mask-input": "^2.0.7",
     "axios": "^0.24.0",
     "axios-mock-adapter": "^1.20.0",
@@ -35,15 +35,14 @@
     "react-helmet-async": "^1.3.0",
     "react-i18next": "^11.11.4",
     "react-infinite-scroll-component": "^6.1.0",
-    "react-insta-stories": "^2.3.0",
+    "react-insta-stories": "^2.6.0",
     "react-leaflet": "next",
-    "react-phone-number-input": "^3.2.17",
+    "react-phone-number-input": "^3.3.7",
     "react-redux": "^7.2.6",
     "react-responsive": "^9.0.2",
     "react-router-dom": "^6.0.2",
     "react-router-hash-link": "^2.4.3",
     "react-scripts": "4.0.3",
-    "react-simple-maps": "^2.3.0",
     "react-slick": "^0.28.1",
     "react-verification-input": "^2.0.3",
     "round-slider": "altence/round-slider#refactor/slider",
@@ -68,14 +67,13 @@
     "workbox-streams": "^5.1.3"
   },
   "scripts": {
-    "start": "yarn buildThemes && craco start",
-    "build": "yarn buildThemes && craco build",
+    "start": "craco start",
+    "build": "craco build",
     "test": "craco test",
     "eject": "craco eject",
     "lint": "eslint \"*/**/*.{js,ts,tsx}\" --fix",
     "lint:styles": "stylelint '*/**/*.{js,ts,tsx}'",
-    "prepare": "husky install",
-    "buildThemes": "lessc --js --clean-css=\"--s1 --advanced\" src/styles/themes/main.less public/themes/main.css"
+    "prepare": "husky install"
   },
   "browserslist": [
     ">0.2%",
@@ -86,13 +84,12 @@
   "devDependencies": {
     "@types/country-list": "^2.1.0",
     "@types/leaflet": "^1.7.9",
-    "@types/react": "^18.0.28",
-    "@types/react-dom": "^18.0.11",
+    "@types/react": "^18.2.13",
+    "@types/react-dom": "^18.2.6",
     "@types/react-helmet": "^6.1.5",
     "@types/react-responsive": "^8.0.5",
     "@types/react-router-dom": "^5.1.7",
     "@types/react-router-hash-link": "^2.4.4",
-    "@types/react-simple-maps": "^1.0.7",
     "@types/react-slick": "^0.23.8",
     "@types/styled-components": "^5.1.10",
     "@types/uuid": "^8.3.4",
@@ -105,8 +102,6 @@
     "eslint-plugin-react": "^7.24.0",
     "eslint-plugin-react-hooks": "^4.3.0",
     "husky": "^6.0.0",
-    "less": "^4.1.2",
-    "less-plugin-clean-css": "^1.5.1",
     "lint-staged": "^11.0.0",
     "prettier": "^2.3.1",
     "stylelint": "^13.13.1",
@@ -123,7 +118,7 @@
     "node": "16.x"
   },
   "resolutions": {
-    "@types/react": "^18.0.28",
+    "@types/react": "^18.2.13",
     "react-error-overlay": "6.0.9"
   },
   "packageManager": "[email protected]",

diff --git a/public/index.html b/public/index.html
@@ -3,7 +3,6 @@
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <link rel="stylesheet" href="%PUBLIC_URL%/themes/main.css"  type = "text/css" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="description" content="Free and easy-to-use admin template based on React 17+" />
     <meta name="keywords" content="altence lightence admin template react redux responsive free" />

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
-import { ConfigProvider } from 'antd';
+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';
@@ -13,10 +14,13 @@ import { usePWA } from './hooks/usePWA';
 import { useThemeWatcher } from './hooks/useThemeWatcher';
 import { useAppSelector } from './hooks/reduxHooks';
 import { themeObject } from './styles/themes/themeVariables';
+import { getThemeConfig } from './styles/themeConfig';
 
 const App: React.FC = () => {
   const { language } = useLanguage();
   const theme = useAppSelector((state) => state.theme.theme);
+  const currentTheme = themeObject[theme];
+  const themeConfig = React.useMemo(() => getThemeConfig(currentTheme), [currentTheme]);
 
   usePWA();
 
@@ -25,15 +29,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 locale={language === 'en' ? enUS : deDe}>
-          <AppRouter />
+        <ConfigProvider theme={themeConfig} 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, 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,40 +35,45 @@ 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;
   }
 `;
 
 export const Title = styled(BaseTypography.Text)`
   font-size: 2.25rem;
-  font-weight: 600;
+  font-weight: ${({ theme }) => theme.fontWeights.semibold};
   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;
   }
 `;
 
 export const Text = styled(Title)`
-  font-size: 0.875rem;
+  font-size: ${({ theme }) => theme.fontSizes.xs};
   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} {
-    font-size: 1.5rem;
+  @media only screen and (${media('xl')}) {
+    font-size: ${({ theme }) => theme.fontSizes.xxl};
     margin-bottom: 1.8rem;
   }
 `;
+
+export const Link = styled(BaseTypography.Link)`
+  font-weight: ${({ theme }) => theme.fontWeights.semibold};
+  line-height: ${({ theme }) => theme.heights.md};
+  padding-inline: 15px;
+`;
diff --git a/src/components/Error/Error.tsx b/src/components/Error/Error.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import * as S from './Error.styles';
-import { Link } from 'react-router-dom';
 
 interface ErrorProps {
   img: string;
@@ -18,9 +17,7 @@ export const Error: React.FC<ErrorProps> = ({ img, msg }) => {
         <S.Title>{t('common.oops')}</S.Title>
         <S.Text>{msg}</S.Text>
         {/*TODO make common component */}
-        <Link to="/" className="ant-btn ant-btn-link">
-          {t('error404.comeBack')}
-        </Link>
+        <S.Link href="/">{t('error404.comeBack')}</S.Link>
       </S.ContentWrapper>
     </S.Wrapper>
   );