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.0.1",
     "@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.2.3",
     "antd-mask-input": "^2.0.7",
     "axios": "^0.24.0",
     "axios-mock-adapter": "^1.20.0",
@@ -68,14 +68,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%",
@@ -105,8 +104,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",

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
@@ -13,6 +13,7 @@ import { usePWA } from './hooks/usePWA';
 import { useThemeWatcher } from './hooks/useThemeWatcher';
 import { useAppSelector } from './hooks/reduxHooks';
 import { themeObject } from './styles/themes/themeVariables';
+import { ThemeConfigProvider } from './styles/ThemeConfigProvider';
 
 const App: React.FC = () => {
   const { language } = useLanguage();
@@ -28,11 +29,13 @@ const App: React.FC = () => {
     <>
       <meta name="theme-color" content={themeObject[theme].primary} />
       <GlobalStyle />
-      <HelmetProvider>
-        <ConfigProvider locale={language === 'en' ? enUS : deDe}>
-          <AppRouter />
-        </ConfigProvider>
-      </HelmetProvider>
+      <ThemeConfigProvider theme={theme}>
+        <HelmetProvider>
+          <ConfigProvider locale={language === 'en' ? enUS : deDe}>
+            <AppRouter />
+          </ConfigProvider>
+        </HelmetProvider>
+      </ThemeConfigProvider>
     </>
   );
 };

diff --git a/src/components/apps/newsFeed/NewsFilter/NewsFilter.styles.ts b/src/components/apps/newsFeed/NewsFilter/NewsFilter.styles.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import { SearchOutlined, PlusCircleFilled, CloseOutlined } from '@ant-design/icons';
-import { DayjsDatePicker } from '@app/components/common/pickers/DayjsDatePicker';
+import { BaseDatePicker } from '@app/components/common/pickers/BaseDatePicker';
 import { BORDER_RADIUS, 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';
@@ -114,7 +114,7 @@ export const Input = styled(BaseInput)`
   line-height: 1.375rem;
 `;
 
-export const RangePicker = styled(DayjsDatePicker.RangePicker)`
+export const RangePicker = styled(BaseDatePicker.RangePicker)`
   width: 100%;
   margin-bottom: 0.875rem;
 

diff --git a/src/components/common/BaseAlert/BaseAlert.styles.ts b/src/components/common/BaseAlert/BaseAlert.styles.ts
@@ -7,4 +7,8 @@ export const Alert = styled(AntAlert)`
   .ant-alert-message {
     color: var(--black);
   }
+
+  .ant-alert-action {
+    margin-inline-start: 8px;
+  }
 `;
diff --git a/src/components/common/BaseBreadcrumb/BaseBreadcrumb.styles.tsx b/src/components/common/BaseBreadcrumb/BaseBreadcrumb.styles.tsx
@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+import { Breadcrumb as AntBreadcrumb } from 'antd';
+
+export const BaseBreadcrumb = styled(AntBreadcrumb)`
+  &.ant-breadcrumb {
+    li:last-child {
+      .ant-breadcrumb-link {
+        color: var(--text-main-color);
+      }
+    }
+  }
+`;
diff --git a/src/components/common/BaseBreadcrumb/BaseBreadcrumb.tsx b/src/components/common/BaseBreadcrumb/BaseBreadcrumb.tsx
@@ -1,2 +1,2 @@
-export { Breadcrumb as BaseBreadcrumb } from 'antd';
+export { BaseBreadcrumb } from './BaseBreadcrumb.styles';
 export type { BreadcrumbProps as BaseBreadcrumbProps } from 'antd';
diff --git a/src/components/common/BaseButton/BaseButton.styles.ts b/src/components/common/BaseButton/BaseButton.styles.ts
@@ -2,6 +2,7 @@ import styled, { css } from 'styled-components';
 import { Button as AntButton } from 'antd';
 import { Severity } from '@app/interfaces/interfaces';
 import { defineColorBySeverity } from '@app/utils/utils';
+import { FONT_WEIGHT } from '@app/styles/themes/constants';
 
 interface BtnProps {
   $severity?: Severity;
@@ -14,6 +15,19 @@ export const Button = styled(AntButton)<BtnProps>`
   justify-content: center;
   gap: 0.3rem;
 
+  transition-duration: 0.3s;
+
+  font-weight: ${FONT_WEIGHT.semibold};
+  box-shadow: none;
+
+  &.ant-btn.ant-btn-icon-only > span {
+    transform: none;
+  }
+
+  &:not(:disabled):focus-visible {
+    outline: none;
+  }
+
   ${(props) =>
     props.$noStyle &&
     css`
@@ -28,70 +42,119 @@ export const Button = styled(AntButton)<BtnProps>`
   &[disabled]:hover {
     color: var(--disabled-color);
   }
-  ${(props) =>
-    !props.danger &&
-    css`
-      ${props.$severity &&
-      css`
-        box-shadow: none;
-        text-shadow: none;
-        background: rgba(${defineColorBySeverity(props.$severity, true)}, 0.2);
 
-        border-color: ${defineColorBySeverity(props.$severity)};
-
-        color: ${defineColorBySeverity(props.$severity)};
+  &.ant-btn-dangerous {
+    &.ant-btn-primary {
+      box-shadow: none;
+    }
 
-        &:hover {
-          background: var(--background-color);
+    &.ant-btn-text:not(:disabled):hover {
+      background-color: transparent;
+    }
+  }
 
-          border-color: rgba(${defineColorBySeverity(props.$severity, true)}, 0.9);
+  ${(props) =>
+    !props.danger &&
+    css`
+      &.ant-btn-default,
+      &.ant-btn-dashed {
+        &:focus {
+          background-color: var(--background-color);
+        }
 
-          color: rgba(${defineColorBySeverity(props.$severity, true)}, 0.9);
+        &:focus,
+        &:not(:disabled):hover {
+          color: var(--ant-primary-color-hover);
+          border-color: var(--ant-primary-color-hover);
         }
+      }
 
+      &.ant-btn-text {
         &:focus {
-          background: var(--background-color);
-
-          border-color: rgba(${defineColorBySeverity(props.$severity, true)}, 0.9);
-
-          color: rgba(${defineColorBySeverity(props.$severity, true)}, 0.9);
+          background-color: rgba(0, 0, 0, 0.018);
         }
-      `}
 
-      ${props.type === 'text' &&
-      css`
-        &:hover {
+        &:not(:disabled):hover {
           background: transparent;
           color: var(--secondary-color);
         }
-      `}
+      }
 
-      ${props.type === 'ghost' &&
-      css`
-        &:hover {
-          color: var(--secondary-color);
+      &.ant-btn-ghost {
+        color: var(--primary-color);
+        border-color: var(--primary-color);
 
+        &:disabled {
+          cursor: not-allowed;
+          color: var(--disabled-color);
+          border-color: var(--border-base-color);
+          background-color: var(--disabled-bg-color);
+        }
+
+        &:focus {
+          color: var(--ant-primary-color-hover);
+          border-color: var(--ant-primary-color-hover);
+        }
+
+        &:not(:disabled):hover {
+          color: var(--secondary-color);
           border-color: var(--secondary-color);
         }
-      `}
+      }
 
-      ${props.type === 'primary' &&
-      css`
+      &.ant-btn-primary:not(:disabled) {
         background: var(--primary-color);
 
+        &:focus {
+          border-color: var(--ant-primary-color-hover);
+          background: var(--ant-primary-color-hover);
+        }
+
         &:hover {
           background: var(--secondary-color);
 
           border-color: var(--secondary-color);
         }
-      `}
+      }
+
+      &.ant-btn-link {
+        color: var(--primary-color);
+
+        &:disabled {
+          color: var(--disabled-color);
+        }
+
+        &:focus {
+          color: var(--ant-primary-color-hover);
+        }
+
+        &:not(:disabled):hover {
+          text-decoration: none;
+          color: var(--ant-primary-color-hover);
+        }
 
-      ${props.type === 'link' &&
-      css`
         & span,
         a {
           text-decoration: underline;
         }
-      `};
+      }
+
+      ${props.$severity &&
+      css`
+        background: rgba(${defineColorBySeverity(props.$severity, true)}, 0.2);
+
+        border-color: ${defineColorBySeverity(props.$severity)};
+
+        color: ${defineColorBySeverity(props.$severity)};
+
+        &.ant-btn-default:focus,
+        &.ant-btn-default:not(:disabled):hover {
+          background: var(--background-color);
+
+          border-color: rgba(${defineColorBySeverity(props.$severity, true)}, 0.9);
+
+          color: rgba(${defineColorBySeverity(props.$severity, true)}, 0.9);
+        }
+      `}
     `}
 `;
diff --git a/src/components/common/BaseCalendar/BaseCalendar.tsx b/src/components/common/BaseCalendar/BaseCalendar.tsx
@@ -0,0 +1,2 @@
+export { Calendar as BaseCalendar } from 'antd';
+export type { CalendarProps as BaseCalendarProps } from 'antd';
diff --git a/src/components/common/BaseCard/BaseCard.styles.ts b/src/components/common/BaseCard/BaseCard.styles.ts
@@ -17,6 +17,10 @@ export const Card = styled(AntCard)<CardInternalProps>`
   box-shadow: var(--box-shadow);
 
   .ant-card-head {
+    padding-top: 15px;
+    padding-bottom: 15px;
+    min-height: 36px;
+
     border-bottom: 0;
 
     font-weight: ${FONT_WEIGHT.bold};
@@ -27,6 +31,12 @@ export const Card = styled(AntCard)<CardInternalProps>`
       padding-bottom: 0;
     }
 
+    @media only screen and ${media.md} {
+      padding-top: 20px;
+      padding-bottom: 0;
+      min-height: 48px;
+    }
+
     @media only screen and ${media.xl} {
       font-size: ${FONT_SIZE.xxl};
 

diff --git a/src/components/common/BaseCheckbox/BaseCheckbox.styles.ts b/src/components/common/BaseCheckbox/BaseCheckbox.styles.ts
@@ -11,16 +11,20 @@ export const Checkbox = styled(AntdCheckbox)`
     border: 1px solid var(--primary-color);
   }
 
-  .ant-checkbox-disabled.ant-checkbox-checked .ant-checkbox-inner::after {
-    border-color: var(--disabled-color);
+  .ant-checkbox-disabled .ant-checkbox-inner {
+    border-color: var(--border-base-color);
   }
 
-  .ant-checkbox-disabled + span {
-    color: var(--disabled-color);
+  &.ant-checkbox-disabled.ant-checkbox-checked .ant-checkbox-inner::after {
+    border-color: var(--disabled-color);
   }
 `;
 
 export const CheckboxGroup = styled(Group)`
+  .ant-form-vertical &.ant-checkbox-group {
+    display: inline-block;
+  }
+
   & .ant-checkbox-inner {
     border-radius: 0.1875rem;
     height: 1.25rem;

diff --git a/src/components/common/BaseFeed/BaseFeed.tsx b/src/components/common/BaseFeed/BaseFeed.tsx
@@ -22,6 +22,7 @@ export const BaseFeed: React.FC<BaseFeedProps> = ({ next, hasMore, target = 'mai
         </S.SpinnerWrapper>
       }
       scrollableTarget={target}
+      style={{ overflow: 'visible' }}
     >
       <S.NewsWrapper>{children}</S.NewsWrapper>
     </InfiniteScroll>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export { Calendar as BaseCalendar } from 'antd';
		export type { CalendarProps as BaseCalendarProps } from 'antd';