diff --git a/package.json b/package.json
index 5b85d58d5..7388e93ef 100644
--- 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": "yarn@3.1.1",
diff --git a/public/index.html b/public/index.html
index c2d469a97..a862f16c5 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,7 +3,6 @@
-
diff --git a/src/App.tsx b/src/App.tsx
index d63562885..a3ae46a12 100644
--- 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 (
- <>
-
+
+
-
-
+
+
+
+
- >
+
);
};
diff --git a/src/components/Error/Error.styles.ts b/src/components/Error/Error.styles.ts
index dbf360817..15c2c84fe 100644
--- 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
index c8ca43fcb..1dea20ae4 100644
--- 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 = ({ img, msg }) => {
{t('common.oops')}
{msg}
{/*TODO make common component */}
-
- {t('error404.comeBack')}
-
+ {t('error404.comeBack')}
);
diff --git a/src/components/apps/newsFeed/NewsFilter/NewsFilter.styles.ts b/src/components/apps/newsFeed/NewsFilter/NewsFilter.styles.ts
index 562e2c559..5ad59c9d2 100644
--- 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 { DayjsDatePicker } from '@app/components/common/pickers/DayjsDatePicker';
-import { BORDER_RADIUS, FONT_SIZE, FONT_WEIGHT, media } from '@app/styles/themes/constants';
+import { BaseDatePicker } from '@app/components/common/pickers/BaseDatePicker';
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, mediaRange } 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;
`;
@@ -21,15 +21,15 @@ export const TitleWrapper = styled.div`
`;
export const FilterButton = styled.div`
- height: 3.125rem;
+ height: ${({ theme }) => theme.heights.md};
width: 6.125rem;
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;
`;
@@ -79,9 +79,9 @@ export const SearchIcon = styled(SearchOutlined)`
export const InputWrapper = styled.div`
display: flex;
- height: 3.125rem;
+ height: ${({ theme }) => theme.heights.md};
border-radius: 3.125rem;
- background: var(--secondary-background-color);
+ background: ${({ theme }) => theme.secondaryBackground};
margin-bottom: 1.25rem;
position: relative;
`;
@@ -96,32 +96,41 @@ 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: 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;
+ height: ${({ theme }) => theme.heights.md};
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;
`;
-export const RangePicker = styled(DayjsDatePicker.RangePicker)`
+export const RangePicker = styled(BaseDatePicker.RangePicker)`
width: 100%;
margin-bottom: 0.875rem;
- & input {
- color: var(--text-main-color);
- font-size: ${FONT_SIZE.xs};
- font-weight: ${FONT_WEIGHT.semibold};
+ &.ant-picker .ant-picker-input input {
+ 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 (${mediaRange('xs', 'md')}) {
+ display: flex;
+ flex-direction: column;
+ }
}
`;
@@ -133,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);
}
`;
@@ -147,14 +156,14 @@ 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};
+ filter: drop-shadow(${({ theme }) => theme.newsFilterBoxShadow});
+ background: ${({ theme }) => theme.background};
+ border-radius: ${({ theme }) => theme.borderRadius};
}
`;
@@ -162,9 +171,9 @@ 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;
`;
@@ -190,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
index 077b47138..f2aff2336 100644
--- 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[];
@@ -115,7 +115,7 @@ const Filter: React.FC = ({
{originalPanel}}
value={dates}
onChange={(dates: RangeValue) =>
updateFilteredField('dates', [dates?.length ? dates[0] : null, dates?.length ? dates[1] : null])
diff --git a/src/components/apps/newsFeed/Validator.ts b/src/components/apps/newsFeed/Validator.ts
index 9021e1aae..73fb9688e 100644
--- 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
index 7e72638a4..5b3a8590e 100644
--- 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;
diff --git a/src/components/auth/ForgotPasswordForm/ForgotPasswordForm.tsx b/src/components/auth/ForgotPasswordForm/ForgotPasswordForm.tsx
index 51a6571e4..580c8c461 100644
--- a/src/components/auth/ForgotPasswordForm/ForgotPasswordForm.tsx
+++ b/src/components/auth/ForgotPasswordForm/ForgotPasswordForm.tsx
@@ -6,7 +6,7 @@ import * as S from './ForgotPasswordForm.styles';
import * as Auth from '@app/components/layouts/AuthLayout/AuthLayout.styles';
import { useAppDispatch } from '@app/hooks/reduxHooks';
import { doResetPassword } from '@app/store/slices/authSlice';
-import { notificationController } from '@app/controllers/notificationController';
+import { useFeedback } from '@app/hooks/useFeedback';
interface ForgotPasswordFormData {
email: string;
@@ -18,6 +18,7 @@ const initValues = {
export const ForgotPasswordForm: React.FC = () => {
const { t } = useTranslation();
+ const { notification } = useFeedback();
const navigate = useNavigate();
const dispatch = useAppDispatch();
const [isLoading, setLoading] = useState(false);
@@ -30,7 +31,7 @@ export const ForgotPasswordForm: React.FC = () => {
navigate('/auth/security-code');
})
.catch((err) => {
- notificationController.error({ message: err.message });
+ notification.error({ message: err.message });
setLoading(false);
});
};
diff --git a/src/components/auth/LockForm/LockForm.styles.ts b/src/components/auth/LockForm/LockForm.styles.ts
index 46e756447..6a2142291 100644
--- a/src/components/auth/LockForm/LockForm.styles.ts
+++ b/src/components/auth/LockForm/LockForm.styles.ts
@@ -1,6 +1,6 @@
import styled from 'styled-components';
import * as Auth from '@app/components/layouts/AuthLayout/AuthLayout.styles';
-import { FONT_SIZE, FONT_WEIGHT, media } from '@app/styles/themes/constants';
+import { media } from '@app/utils/utils';
export const FormItem = styled(Auth.FormItem)`
margin-bottom: 1rem;
@@ -8,15 +8,15 @@ export const FormItem = styled(Auth.FormItem)`
export const AvatarCircle = styled.div`
border-radius: 50%;
- background: var(--background-color);
+ background: ${({ theme }) => theme.background};
padding: 1px;
margin-bottom: 1rem;
- @media only screen and ${media.xs} {
+ @media only screen and (${media('xs')}) {
height: 3.6875rem;
width: 3.6875rem;
}
- @media only screen and ${media.md} {
+ @media only screen and (${media('md')}) {
height: 4.8125rem;
width: 4.8125rem;
}
@@ -30,52 +30,52 @@ export const ContentWrapper = styled.div`
export const Time = styled.div`
margin-bottom: 1rem;
- color: var(--text-main-color);
+ color: ${({ theme }) => theme.textMain};
- @media only screen and ${media.xs} {
+ @media only screen and (${media('xs')}) {
margin-bottom: 0.625rem;
line-height: 1.5625rem;
- font-size: ${FONT_SIZE.lg};
- font-weight: ${FONT_WEIGHT.bold};
+ font-size: ${({ theme }) => theme.fontSizes.lg};
+ font-weight: ${({ theme }) => theme.fontWeights.bold};
}
- @media only screen and ${media.md} {
+ @media only screen and (${media('md')}) {
margin-bottom: 1rem;
line-height: 2.125rem;
- font-size: ${FONT_SIZE.xxxl};
- font-weight: ${FONT_WEIGHT.extraBold};
+ font-size: ${({ theme }) => theme.fontSizes.xxxl};
+ font-weight: ${({ theme }) => theme.fontWeights.extraBold};
}
`;
export const Date = styled.div`
margin-bottom: 2.5rem;
- color: var(--text-main-color);
+ color: ${({ theme }) => theme.textMain};
- @media only screen and ${media.xs} {
+ @media only screen and (${media('xs')}) {
margin-bottom: 3.4375rem;
line-height: 1.25rem;
- font-size: ${FONT_SIZE.xs};
- font-weight: ${FONT_WEIGHT.semibold};
+ font-size: ${({ theme }) => theme.fontSizes.xs};
+ font-weight: ${({ theme }) => theme.fontWeights.semibold};
}
- @media only screen and ${media.md} {
+ @media only screen and (${media('md')}) {
margin-bottom: 2.5rem;
line-height: 1.5rem;
- font-size: ${FONT_SIZE.xxl};
- font-weight: ${FONT_WEIGHT.bold};
+ font-size: ${({ theme }) => theme.fontSizes.xxl};
+ font-weight: ${({ theme }) => theme.fontWeights.bold};
}
`;
export const Name = styled.div`
margin-bottom: 1.5625rem;
- color: var(--text-main-color);
+ color: ${({ theme }) => theme.textMain};
- @media only screen and ${media.xs} {
- font-size: ${FONT_SIZE.xs};
- font-weight: ${FONT_WEIGHT.semibold};
+ @media only screen and (${media('xs')}) {
+ font-size: ${({ theme }) => theme.fontSizes.xs};
+ font-weight: ${({ theme }) => theme.fontWeights.semibold};
}
- @media only screen and ${media.md} {
- font-size: ${FONT_SIZE.md};
+ @media only screen and (${media('md')}) {
+ font-size: ${({ theme }) => theme.fontSizes.md};
}
`;
diff --git a/src/components/auth/LockForm/LockForm.tsx b/src/components/auth/LockForm/LockForm.tsx
index 0202dd93b..0b1e13bdf 100644
--- a/src/components/auth/LockForm/LockForm.tsx
+++ b/src/components/auth/LockForm/LockForm.tsx
@@ -3,7 +3,7 @@ import { useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { BaseForm } from '@app/components/common/forms/BaseForm/BaseForm';
import { initValues as loginInitVal } from '@app/components/auth/LoginForm/LoginForm';
-import { notificationController } from '@app/controllers/notificationController';
+import { useFeedback } from '@app/hooks/useFeedback';
import { useAppDispatch, useAppSelector } from '@app/hooks/reduxHooks';
import { useResponsive } from '@app/hooks/useResponsive';
import { Dates } from '@app/constants/Dates';
@@ -24,6 +24,7 @@ export const LockForm: React.FC = () => {
const navigate = useNavigate();
const { mobileOnly } = useResponsive();
const { t } = useTranslation();
+ const { notification } = useFeedback();
const dispatch = useAppDispatch();
const [isLoading, setLoading] = useState(false);
@@ -48,7 +49,7 @@ export const LockForm: React.FC = () => {
navigate(-1);
})
.catch((e) => {
- notificationController.error({ message: e.message });
+ notification.error({ message: e.message });
setLoading(false);
});
};
diff --git a/src/components/auth/LoginForm/LoginForm.styles.ts b/src/components/auth/LoginForm/LoginForm.styles.ts
index ed21cc2c7..c8f1a9d8b 100644
--- a/src/components/auth/LoginForm/LoginForm.styles.ts
+++ b/src/components/auth/LoginForm/LoginForm.styles.ts
@@ -1,33 +1,33 @@
-import { FONT_SIZE, FONT_WEIGHT, media } from '@app/styles/themes/constants';
import styled from 'styled-components';
+import { media } from '@app/utils/utils';
export const LoginDescription = styled.div`
margin-bottom: 1.875rem;
- color: var(--text-main-color);
- font-size: ${FONT_SIZE.xs};
+ color: ${({ theme }) => theme.textMain};
+ font-size: ${({ theme }) => theme.fontSizes.xs};
- @media only screen and ${media.xs} {
+ @media only screen and (${media('xs')}) {
margin-bottom: 1.5625rem;
- font-weight: ${FONT_WEIGHT.bold};
+ font-weight: ${({ theme }) => theme.fontWeights.bold};
}
- @media only screen and ${media.md} {
+ @media only screen and (${media('md')}) {
margin-bottom: 1.75rem;
- font-weight: ${FONT_WEIGHT.regular};
+ font-weight: ${({ theme }) => theme.fontWeights.regular};
}
- @media only screen and ${media.xl} {
+ @media only screen and (${media('xl')}) {
margin-bottom: 1.875rem;
}
`;
export const RememberMeText = styled.span`
- color: var(--primary-color);
- font-size: ${FONT_SIZE.xs};
+ color: ${({ theme }) => theme.primary};
+ font-size: ${({ theme }) => theme.fontSizes.xs};
`;
export const ForgotPasswordText = styled.span`
- color: var(--text-light-color);
- font-size: ${FONT_SIZE.xs};
+ color: ${({ theme }) => theme.textLight};
+ font-size: ${({ theme }) => theme.fontSizes.xs};
text-decoration: underline;
`;
diff --git a/src/components/auth/LoginForm/LoginForm.tsx b/src/components/auth/LoginForm/LoginForm.tsx
index 6becf9930..e262e55d7 100644
--- a/src/components/auth/LoginForm/LoginForm.tsx
+++ b/src/components/auth/LoginForm/LoginForm.tsx
@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
import { BaseForm } from '@app/components/common/forms/BaseForm/BaseForm';
import { useAppDispatch } from '@app/hooks/reduxHooks';
import { doLogin } from '@app/store/slices/authSlice';
-import { notificationController } from '@app/controllers/notificationController';
+import { useFeedback } from '@app/hooks/useFeedback';
import { ReactComponent as FacebookIcon } from '@app/assets/icons/facebook.svg';
import { ReactComponent as GoogleIcon } from '@app/assets/icons/google.svg';
import * as S from './LoginForm.styles';
@@ -24,6 +24,7 @@ export const LoginForm: React.FC = () => {
const navigate = useNavigate();
const dispatch = useAppDispatch();
const { t } = useTranslation();
+ const { notification } = useFeedback();
const [isLoading, setLoading] = useState(false);
@@ -33,7 +34,7 @@ export const LoginForm: React.FC = () => {
.unwrap()
.then(() => navigate('/'))
.catch((err) => {
- notificationController.error({ message: err.message });
+ notification.error({ message: err.message });
setLoading(false);
});
};
diff --git a/src/components/auth/NewPasswordForm/NewPasswordForm.styles.ts b/src/components/auth/NewPasswordForm/NewPasswordForm.styles.ts
index 7e72638a4..7f99d2c54 100644
--- a/src/components/auth/NewPasswordForm/NewPasswordForm.styles.ts
+++ b/src/components/auth/NewPasswordForm/NewPasswordForm.styles.ts
@@ -1,25 +1,25 @@
import styled from 'styled-components';
-import { FONT_SIZE, FONT_WEIGHT, media } from '@app/styles/themes/constants';
+import { media } from '@app/utils/utils';
import { BaseButton } from '@app/components/common/BaseButton/BaseButton';
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;
diff --git a/src/components/auth/NewPasswordForm/NewPasswordForm.tsx b/src/components/auth/NewPasswordForm/NewPasswordForm.tsx
index 2ef46e631..76ebbc25e 100644
--- a/src/components/auth/NewPasswordForm/NewPasswordForm.tsx
+++ b/src/components/auth/NewPasswordForm/NewPasswordForm.tsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { BaseForm } from '@app/components/common/forms/BaseForm/BaseForm';
-import { notificationController } from '@app/controllers/notificationController';
+import { useFeedback } from '@app/hooks/useFeedback';
import { useAppDispatch } from '@app/hooks/reduxHooks';
import { doSetNewPassword } from '@app/store/slices/authSlice';
import * as S from './NewPasswordForm.styles';
@@ -20,6 +20,7 @@ const initStates = {
export const NewPasswordForm: React.FC = () => {
const { t } = useTranslation();
+ const { notification } = useFeedback();
const navigate = useNavigate();
const dispatch = useAppDispatch();
const [isLoading, setLoading] = useState(false);
@@ -30,13 +31,13 @@ export const NewPasswordForm: React.FC = () => {
.unwrap()
.then(() => {
navigate('/auth/login');
- notificationController.success({
+ notification.success({
message: t('newPassword.successMessage'),
description: t('newPassword.successDescription'),
});
})
.catch((err) => {
- notificationController.error({ message: err.message });
+ notification.error({ message: err.message });
setLoading(false);
});
};
@@ -72,7 +73,6 @@ export const NewPasswordForm: React.FC = () => {
},
}),
]}
- hasFeedback
>
diff --git a/src/components/auth/SecurityCodeForm/SecurityCodeForm.styles.ts b/src/components/auth/SecurityCodeForm/SecurityCodeForm.styles.ts
index 73d0c22d3..0a0c8b2fd 100644
--- a/src/components/auth/SecurityCodeForm/SecurityCodeForm.styles.ts
+++ b/src/components/auth/SecurityCodeForm/SecurityCodeForm.styles.ts
@@ -1,4 +1,4 @@
-import { FONT_SIZE, FONT_WEIGHT, media } from '@app/styles/themes/constants';
+import { media } from '@app/utils/utils';
import styled from 'styled-components';
export const ImageWrapper = styled.div`
@@ -7,24 +7,24 @@ export const ImageWrapper = styled.div`
export const VerifyEmailDescription = 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 NoCodeText = styled.div`
margin-top: 1rem;
- color: var(--primary-color);
- font-size: ${FONT_SIZE.xs};
- font-weight: ${FONT_WEIGHT.regular};
+ color: ${({ theme }) => theme.primary};
+ font-size: ${({ theme }) => theme.fontSizes.xs};
+ font-weight: ${({ theme }) => theme.fontWeights.regular};
text-decoration: underline;
cursor: pointer;
`;
diff --git a/src/components/auth/SecurityCodeForm/SecurityCodeForm.tsx b/src/components/auth/SecurityCodeForm/SecurityCodeForm.tsx
index 850d84535..e18464853 100644
--- a/src/components/auth/SecurityCodeForm/SecurityCodeForm.tsx
+++ b/src/components/auth/SecurityCodeForm/SecurityCodeForm.tsx
@@ -5,7 +5,7 @@ import { BaseForm } from '@app/components/common/forms/BaseForm/BaseForm';
import { VerificationCodeInput } from '@app/components/common/inputs/VerificationCodeInput/VerificationCodeInput';
import { useAppDispatch } from '@app/hooks/reduxHooks';
import { doVerifySecurityCode } from '@app/store/slices/authSlice';
-import { notificationController } from '@app/controllers/notificationController';
+import { useFeedback } from '@app/hooks/useFeedback';
import VerifyEmailImage from '@app/assets/images/verify-email.webp';
import * as Auth from '@app/components/layouts/AuthLayout/AuthLayout.styles';
import * as S from './SecurityCodeForm.styles';
@@ -20,6 +20,7 @@ interface SecurityCodeFormProps {
export const SecurityCodeForm: React.FC = ({ onBack, onFinish }) => {
const navigate = useNavigate();
const { t } = useTranslation();
+ const { notification } = useFeedback();
const dispatch = useAppDispatch();
const navigateBack = useCallback(() => navigate(-1), [navigate]);
@@ -35,11 +36,11 @@ export const SecurityCodeForm: React.FC = ({ onBack, onFi
.unwrap()
.then(onFinish || navigateForward)
.catch((err) => {
- notificationController.error({ message: err.message });
+ notification.error({ message: err.message });
setLoading(false);
});
}
- }, [securityCode, navigateForward, onFinish, dispatch]);
+ }, [securityCode, navigateForward, onFinish, dispatch, notification]);
return (
diff --git a/src/components/auth/SignUpForm/SignUpForm.styles.tsx b/src/components/auth/SignUpForm/SignUpForm.styles.ts
similarity index 100%
rename from src/components/auth/SignUpForm/SignUpForm.styles.tsx
rename to src/components/auth/SignUpForm/SignUpForm.styles.ts
diff --git a/src/components/auth/SignUpForm/SignUpForm.tsx b/src/components/auth/SignUpForm/SignUpForm.tsx
index 4f76ed786..0ab9f0f0e 100644
--- a/src/components/auth/SignUpForm/SignUpForm.tsx
+++ b/src/components/auth/SignUpForm/SignUpForm.tsx
@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
import { BaseForm } from '@app/components/common/forms/BaseForm/BaseForm';
import { useAppDispatch } from '@app/hooks/reduxHooks';
import { doSignUp } from '@app/store/slices/authSlice';
-import { notificationController } from '@app/controllers/notificationController';
+import { useFeedback } from '@app/hooks/useFeedback';
import { ReactComponent as GoogleIcon } from '@app/assets/icons/google.svg';
import { ReactComponent as FacebookIcon } from '@app/assets/icons/facebook.svg';
import * as Auth from '@app/components/layouts/AuthLayout/AuthLayout.styles';
@@ -33,20 +33,21 @@ export const SignUpForm: React.FC = () => {
const [isLoading, setLoading] = useState(false);
const { t } = useTranslation();
+ const { notification } = useFeedback();
const handleSubmit = (values: SignUpFormData) => {
setLoading(true);
dispatch(doSignUp(values))
.unwrap()
.then(() => {
- notificationController.success({
+ notification.success({
message: t('auth.signUpSuccessMessage'),
description: t('auth.signUpSuccessDescription'),
});
navigate('/auth/login');
})
.catch((err) => {
- notificationController.error({ message: err.message });
+ notification.error({ message: err.message });
setLoading(false);
});
};
@@ -112,11 +113,11 @@ export const SignUpForm: React.FC = () => {
{t('signup.agree')}{' '}
-
+
{t('signup.termOfUse')}
{' '}
- and{' '}
-
+ {t('signup.and')}{' '}
+
{t('signup.privacyOPolicy')}
diff --git a/src/components/charts/BarAnimationDelayChart/BarAnimationDelayChart.tsx b/src/components/charts/BarAnimationDelayChart/BarAnimationDelayChart.tsx
index 3bf37cee1..eab3c0ed1 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',
},
diff --git a/src/components/charts/GradientStackedAreaChart/GradientStackedAreaChart.tsx b/src/components/charts/GradientStackedAreaChart/GradientStackedAreaChart.tsx
index a40891d56..06d505031 100644
--- a/src/components/charts/GradientStackedAreaChart/GradientStackedAreaChart.tsx
+++ b/src/components/charts/GradientStackedAreaChart/GradientStackedAreaChart.tsx
@@ -1,15 +1,12 @@
-import React from 'react';
import { useTranslation } from 'react-i18next';
import * as echarts from 'echarts';
import { BaseChart } from '@app/components/common/charts/BaseChart';
import { BaseCard } from '@app/components/common/BaseCard/BaseCard';
-import { useAppSelector } from '@app/hooks/reduxHooks';
-import { themeObject } from '@app/styles/themes/themeVariables';
-import { FONT_SIZE, FONT_WEIGHT } from '@app/styles/themes/constants';
+import { useTheme } from 'styled-components';
export const GradientStackedAreaChart: React.FC = () => {
const { t } = useTranslation();
- const theme = useAppSelector((state) => state.theme.theme);
+ const theme = useTheme();
const option = {
tooltip: {
@@ -17,7 +14,7 @@ export const GradientStackedAreaChart: React.FC = () => {
axisPointer: {
type: 'cross',
label: {
- backgroundColor: themeObject[theme].chartTooltipLabel,
+ backgroundColor: theme.chartTooltipLabel,
},
},
},
@@ -26,7 +23,7 @@ export const GradientStackedAreaChart: React.FC = () => {
top: 0,
left: 10,
textStyle: {
- color: themeObject[theme].textMain,
+ color: theme.textMain,
},
},
grid: {
@@ -42,9 +39,9 @@ export const GradientStackedAreaChart: React.FC = () => {
boundaryGap: false,
data: ['Canada', 'China', 'Russia', 'Australia', 'Germany', 'France'],
axisLabel: {
- fontSize: FONT_SIZE.xxs,
- fontWeight: FONT_WEIGHT.light,
- color: themeObject[theme].primary,
+ fontSize: theme.fontSizes.xxs,
+ fontWeight: theme.fontWeights.light,
+ color: theme.primary,
},
},
],
@@ -53,9 +50,9 @@ export const GradientStackedAreaChart: React.FC = () => {
type: 'value',
name: 'TWh',
axisLabel: {
- fontSize: FONT_SIZE.xxs,
- fontWeight: FONT_WEIGHT.light,
- color: themeObject[theme].textMain,
+ fontSize: theme.fontSizes.xxs,
+ fontWeight: theme.fontWeights.light,
+ color: theme.textMain,
},
},
],
@@ -74,11 +71,11 @@ export const GradientStackedAreaChart: React.FC = () => {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
- color: themeObject[theme].chartColor1,
+ color: theme.chartColor1,
},
{
offset: 1,
- color: themeObject[theme].chartColor1Tint,
+ color: theme.chartColor1Tint,
},
]),
},
@@ -101,11 +98,11 @@ export const GradientStackedAreaChart: React.FC = () => {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
- color: themeObject[theme].chartColor2,
+ color: theme.chartColor2,
},
{
offset: 0.82,
- color: themeObject[theme].chartColor2Tint,
+ color: theme.chartColor2Tint,
},
]),
},
@@ -128,11 +125,11 @@ export const GradientStackedAreaChart: React.FC = () => {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
- color: themeObject[theme].chartColor3,
+ color: theme.chartColor3,
},
{
offset: 0.65,
- color: themeObject[theme].chartColor3Tint,
+ color: theme.chartColor3Tint,
},
]),
},
@@ -155,11 +152,11 @@ export const GradientStackedAreaChart: React.FC = () => {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
- color: themeObject[theme].chartColor4,
+ color: theme.chartColor4,
},
{
offset: 1,
- color: themeObject[theme].chartColor4Tint,
+ color: theme.chartColor4Tint,
},
]),
},
@@ -186,11 +183,11 @@ export const GradientStackedAreaChart: React.FC = () => {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0.4,
- color: themeObject[theme].chartColor5,
+ color: theme.chartColor5,
},
{
offset: 1,
- color: themeObject[theme].chartColor5Tint,
+ color: theme.chartColor5Tint,
},
]),
},
diff --git a/src/components/charts/LineRaceChart/LineRaceChart.tsx b/src/components/charts/LineRaceChart/LineRaceChart.tsx
index f5acbdfb9..6458c6a6c 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',
diff --git a/src/components/common/BaseAlert/BaseAlert.styles.ts b/src/components/common/BaseAlert/BaseAlert.styles.ts
index 4d940987d..ceb832924 100644
--- a/src/components/common/BaseAlert/BaseAlert.styles.ts
+++ b/src/components/common/BaseAlert/BaseAlert.styles.ts
@@ -2,9 +2,11 @@ import styled from 'styled-components';
import { Alert as AntAlert } from 'antd';
export const Alert = styled(AntAlert)`
- color: var(--black);
+ &.ant-alert {
+ padding-inline: 15px;
+ }
- .ant-alert-message {
- color: var(--black);
+ .ant-alert-action {
+ margin-inline-start: 8px;
}
`;
diff --git a/src/components/common/BaseArticle/BaseArticle.styles.ts b/src/components/common/BaseArticle/BaseArticle.styles.ts
index bca608cd3..39b90d04c 100644
--- a/src/components/common/BaseArticle/BaseArticle.styles.ts
+++ b/src/components/common/BaseArticle/BaseArticle.styles.ts
@@ -1,5 +1,5 @@
import styled from 'styled-components';
-import { BORDER_RADIUS, FONT_SIZE, FONT_WEIGHT, media } from '@app/styles/themes/constants';
+import { media } from '@app/utils/utils';
import { BaseTypography } from '../BaseTypography/BaseTypography';
export const Header = styled.div`
@@ -21,34 +21,31 @@ export const Wrapper = styled.div`
flex: 1 1 21.25rem;
position: relative;
max-width: 42.5rem;
- box-shadow: var(--box-shadow);
- border-radius: ${BORDER_RADIUS};
+ box-shadow: ${({ theme }) => theme.boxShadow};
+ border-radius: ${({ theme }) => theme.borderRadius};
transition: 0.3s;
-
- [data-theme='dark'] & {
- background: var(--secondary-background-color);
- }
+ background: ${({ theme }) => theme.secondaryBackground};
&:hover {
- box-shadow: var(--box-shadow-hover);
+ box-shadow: ${({ theme }) => theme.boxShadowHover};
}
`;
export const Author = styled.div`
- 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};
line-height: 1.5625rem;
`;
export const InfoWrapper = styled.div`
padding: 1.25rem;
- @media only screen and ${media.xl} {
+ @media only screen and (${media('xl')}) {
padding: 1rem;
}
- @media only screen and ${media.xxl} {
+ @media only screen and (${media('xxl')}) {
padding: 1.85rem;
}
`;
@@ -57,40 +54,39 @@ export const InfoHeader = styled.div`
display: flex;
margin-bottom: 1rem;
- @media only screen and ${media.md} {
+ @media only screen and (${media('md')}) {
margin-bottom: 0.625rem;
}
- @media only screen and ${media.xxl} {
+ @media only screen and (${media('xxl')}) {
margin-bottom: 1.25rem;
}
`;
export const Title = styled.div`
- font-size: ${FONT_SIZE.xl};
- font-weight: ${FONT_WEIGHT.semibold};
+ font-size: ${({ theme }) => theme.fontSizes.xl};
+ font-weight: ${({ theme }) => theme.fontWeights.semibold};
width: 80%;
line-height: 1.375rem;
+ color: ${({ theme }) => theme.textMain};
- color: var(--text-main-color);
-
- @media only screen and ${media.md} {
- font-size: ${FONT_SIZE.xxl};
+ @media only screen and (${media('md')}) {
+ font-size: ${({ theme }) => theme.fontSizes.xxl};
}
`;
export const DateTime = styled(BaseTypography.Text)`
- font-size: ${FONT_SIZE.xs};
- color: var(--text-main-color);
+ font-size: ${({ theme }) => theme.fontSizes.xs};
+ color: ${({ theme }) => theme.textMain};
line-height: 1.25rem;
`;
export const Description = styled.div`
- font-size: ${FONT_SIZE.xs};
- color: var(--text-main-color);
+ font-size: ${({ theme }) => theme.fontSizes.xs};
+ color: ${({ theme }) => theme.textMain};
- @media only screen and ${media.xxl} {
- font-size: 1rem;
+ @media only screen and (${media('xxl')}) {
+ font-size: ${({ theme }) => theme.fontSizes.md};
}
`;
diff --git a/src/components/common/BaseBadge/BaseBadge.styles.ts b/src/components/common/BaseBadge/BaseBadge.styles.ts
index 22a0ce707..3885046d5 100644
--- a/src/components/common/BaseBadge/BaseBadge.styles.ts
+++ b/src/components/common/BaseBadge/BaseBadge.styles.ts
@@ -1,16 +1,14 @@
-import { defineColorBySeverity } from '@app/utils/utils';
-import { Badge as AntBadge } from 'antd';
import styled from 'styled-components';
-import { NotificationType } from '../BaseNotification/BaseNotification';
-
-interface BadgeProps {
- severity?: NotificationType;
-}
+import { Badge as AntBadge } from 'antd';
+import { colorTypeFrom } from '@app/utils/utils';
-export const Badge = styled(AntBadge)`
- color: inherit;
+export const Badge = styled(AntBadge)`
+ .ant-badge-count {
+ background: ${(props) => props.theme[colorTypeFrom(props.status)]};
+ font-size: ${({ theme }) => theme.fontSizes.xs};
+ }
- & .ant-badge-count {
- background: ${(props) => defineColorBySeverity(props.severity)};
+ .ant-badge-count-sm {
+ font-size: ${({ theme }) => theme.fontSizes.xs};
}
`;
diff --git a/src/components/common/BaseBadge/BaseBadge.tsx b/src/components/common/BaseBadge/BaseBadge.tsx
index 449361b3f..3df11b066 100644
--- a/src/components/common/BaseBadge/BaseBadge.tsx
+++ b/src/components/common/BaseBadge/BaseBadge.tsx
@@ -1,6 +1,5 @@
import React from 'react';
import { BadgeProps, Badge } from 'antd';
-import { mapBadgeStatus } from '@app/utils/utils';
import * as S from './BaseBadge.styles';
export type BaseBadgeProps = BadgeProps;
@@ -9,10 +8,8 @@ interface BaseBadgeInterface extends React.FC {
Ribbon: typeof Badge.Ribbon;
}
-export const BaseBadge: BaseBadgeInterface = ({ status, children, count, ...props }) => (
-
- {children}
-
-);
+export const BaseBadge: BaseBadgeInterface = ({ children, ...props }) => {
+ return {children};
+};
BaseBadge.Ribbon = Badge.Ribbon;
diff --git a/src/components/common/BaseBreadcrumb/BaseBreadcrumb.styles.ts b/src/components/common/BaseBreadcrumb/BaseBreadcrumb.styles.ts
new file mode 100644
index 000000000..5bec66a3d
--- /dev/null
+++ b/src/components/common/BaseBreadcrumb/BaseBreadcrumb.styles.ts
@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+import { Breadcrumb as AntBreadcrumb } from 'antd';
+
+export const Breadcrumb = styled(AntBreadcrumb)`
+ &.ant-breadcrumb {
+ li:last-child {
+ .ant-breadcrumb-link {
+ color: ${({ theme }) => theme.textMain};
+ }
+ }
+ }
+`;
diff --git a/src/components/common/BaseBreadcrumb/BaseBreadcrumb.tsx b/src/components/common/BaseBreadcrumb/BaseBreadcrumb.tsx
index 0949ecab7..74001f943 100644
--- a/src/components/common/BaseBreadcrumb/BaseBreadcrumb.tsx
+++ b/src/components/common/BaseBreadcrumb/BaseBreadcrumb.tsx
@@ -1,2 +1,12 @@
-export { Breadcrumb as BaseBreadcrumb } from 'antd';
-export type { BreadcrumbProps as BaseBreadcrumbProps } from 'antd';
+import { FC } from 'react';
+import type { BreadcrumbProps } from 'antd';
+import type { BreadcrumbItemType } from 'antd/es/breadcrumb/Breadcrumb';
+import * as S from './BaseBreadcrumb.styles';
+
+export type BaseBreadcrumbItemType = BreadcrumbItemType;
+
+export type BaseBreadcrumbProps = BreadcrumbProps;
+
+export const BaseBreadcrumb: FC = (props) => {
+ return ;
+};
diff --git a/src/components/common/BaseButton/BaseButton.styles.ts b/src/components/common/BaseButton/BaseButton.styles.ts
index 454c5e12b..b94d70cf0 100644
--- a/src/components/common/BaseButton/BaseButton.styles.ts
+++ b/src/components/common/BaseButton/BaseButton.styles.ts
@@ -1,7 +1,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 { colorTypeFrom } from '@app/utils/utils';
interface BtnProps {
$severity?: Severity;
@@ -13,6 +13,9 @@ export const Button = styled(AntButton)`
align-items: center;
justify-content: center;
gap: 0.3rem;
+ transition-duration: 0.3s;
+ font-weight: ${({ theme }) => theme.fontWeights.semibold};
+ box-shadow: none;
${(props) =>
props.$noStyle &&
@@ -22,76 +25,81 @@ export const Button = styled(AntButton)`
height: unset;
`}
- &[disabled],
- &[disabled]:active,
- &[disabled]:focus,
- &[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-background-ghost {
+ color: ${props.theme.primary};
+ border-color: ${props.theme.primary};
- &:hover {
- background: var(--background-color);
-
- border-color: rgba(${defineColorBySeverity(props.$severity, true)}, 0.9);
-
- color: rgba(${defineColorBySeverity(props.$severity, true)}, 0.9);
+ &:disabled {
+ background-color: ${props.theme.disabledBg};
}
+ }
- &:focus {
- background: var(--background-color);
-
- border-color: rgba(${defineColorBySeverity(props.$severity, true)}, 0.9);
-
- color: rgba(${defineColorBySeverity(props.$severity, true)}, 0.9);
+ &.ant-btn-link {
+ span,
+ a {
+ text-decoration: underline;
}
- `}
+ }
+
+ &:focus,
+ &:not(:disabled):hover {
+ &.ant-btn-default,
+ &.ant-btn-dashed {
+ color: ${props.theme.primary5};
+ border-color: ${props.theme.primary5};
+ }
+ }
- ${props.type === 'text' &&
- css`
- &:hover {
- background: transparent;
- color: var(--secondary-color);
+ &:focus {
+ &.ant-btn-link,
+ &.ant-btn-background-ghost {
+ color: ${props.theme.primary5};
}
- `}
- ${props.type === 'ghost' &&
- css`
- &:hover {
- color: var(--secondary-color);
+ &.ant-btn-primary {
+ background-color: ${props.theme.primary5};
+ }
- border-color: var(--secondary-color);
+ &.ant-btn-primary,
+ &.ant-btn-background-ghost {
+ border-color: ${props.theme.primary5};
}
- `}
+ }
- ${props.type === 'primary' &&
- css`
- background: var(--primary-color);
+ &:not(:disabled):hover {
+ &.ant-btn-primary {
+ background-color: ${props.theme.secondary};
+ }
- &:hover {
- background: var(--secondary-color);
+ &.ant-btn-text,
+ &.ant-btn-background-ghost {
+ color: ${props.theme.secondary};
+ background-color: transparent;
+ }
- border-color: var(--secondary-color);
+ &.ant-btn-primary,
+ &.ant-btn-background-ghost {
+ border-color: ${props.theme.secondary};
}
- `}
+ }
- ${props.type === 'link' &&
+ ${props.$severity &&
css`
- & span,
- a {
- text-decoration: underline;
+ background-color: rgba(${props.theme.rgb[colorTypeFrom(props.$severity)]}, 0.2);
+ border-color: ${props.theme[colorTypeFrom(props.$severity)]};
+ color: ${props.theme[colorTypeFrom(props.$severity)]};
+
+ &.ant-btn-default {
+ &:focus,
+ &:not(:disabled):hover {
+ background-color: ${props.theme.background};
+ border-color: rgba(${props.theme.rgb[colorTypeFrom(props.$severity)]}, 0.9);
+ color: rgba(${props.theme.rgb[colorTypeFrom(props.$severity)]}, 0.9);
+ }
}
- `};
+ `}
`}
`;
diff --git a/src/components/common/BaseButton/BaseButton.tsx b/src/components/common/BaseButton/BaseButton.tsx
index 1b5c30f28..7d7634b29 100644
--- a/src/components/common/BaseButton/BaseButton.tsx
+++ b/src/components/common/BaseButton/BaseButton.tsx
@@ -1,16 +1,16 @@
-import React from 'react';
-import { ButtonProps as AntButtonProps, Button as AntdButton } from 'antd';
-import { Severity } from '@app/interfaces/interfaces';
+import { forwardRef } from 'react';
+import { Button as AntButton, ButtonProps as AntButtonProps } from 'antd';
+import type { Severity } from '@app/interfaces/interfaces';
import * as S from './BaseButton.styles';
-export const { Group: ButtonGroup } = AntdButton;
+export const { Group: ButtonGroup } = AntButton;
export interface BaseButtonProps extends AntButtonProps {
severity?: Severity;
noStyle?: boolean;
}
-export const BaseButton = React.forwardRef(
+export const BaseButton = forwardRef(
({ className, severity, noStyle, children, ...props }, ref) => (
{children}
diff --git a/src/components/common/BaseCalendar/BaseCalendar.styles.ts b/src/components/common/BaseCalendar/BaseCalendar.styles.ts
new file mode 100644
index 000000000..77d970136
--- /dev/null
+++ b/src/components/common/BaseCalendar/BaseCalendar.styles.ts
@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+import { Calendar as AntCalendar } from 'antd';
+
+export const Calendar = styled(AntCalendar)`
+ .ant-picker-cell-in-view .ant-picker-calendar-date-value {
+ font-weight: ${({ theme }) => theme.fontWeights.bold};
+ }
+`;
diff --git a/src/components/common/BaseCalendar/BaseCalendar.tsx b/src/components/common/BaseCalendar/BaseCalendar.tsx
new file mode 100644
index 000000000..c36a59b91
--- /dev/null
+++ b/src/components/common/BaseCalendar/BaseCalendar.tsx
@@ -0,0 +1,8 @@
+import type { Calendar } from 'antd';
+import * as S from './BaseCalendar.styles';
+
+export type BaseCalendarProps = React.ComponentProps;
+
+export const BaseCalendar: React.FC = (props) => {
+ return ;
+};
diff --git a/src/components/common/BaseCard/BaseCard.styles.ts b/src/components/common/BaseCard/BaseCard.styles.ts
index 776e5fbff..0f67ef025 100644
--- a/src/components/common/BaseCard/BaseCard.styles.ts
+++ b/src/components/common/BaseCard/BaseCard.styles.ts
@@ -1,10 +1,10 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
import { Card as AntCard } from 'antd';
import { normalizeProp } from '@app/utils/utils';
-import { FONT_SIZE, FONT_WEIGHT, media } from '@app/styles/themes/constants';
+import { media } from '@app/utils/utils';
interface CardInternalProps {
- $padding: string | number | [number, number];
+ $padding: string | number | readonly [number, number];
$autoHeight: boolean;
}
@@ -12,25 +12,35 @@ export const Card = styled(AntCard)`
display: flex;
flex-direction: column;
- ${(props) => props.$autoHeight && 'height: 100%'};
-
- box-shadow: var(--box-shadow);
+ ${(props) =>
+ props.$autoHeight &&
+ css`
+ height: 100%;
+ `}
.ant-card-head {
border-bottom: 0;
+ font-weight: ${({ theme }) => theme.fontWeights.bold};
+ padding-top: 15px;
+ padding-bottom: 15px;
+ min-height: 36px;
+
+ @media only screen and (${media('md')}) {
+ padding-top: 20px;
+ padding-bottom: 0;
+ min-height: 48px;
+ }
- font-weight: ${FONT_WEIGHT.bold};
+ @media only screen and (${media('xl')}) {
+ font-size: ${({ theme }) => theme.fontSizes.xxl};
+ }
.ant-card-head-title {
white-space: unset;
overflow: unset;
padding-bottom: 0;
- }
- @media only screen and ${media.xl} {
- font-size: ${FONT_SIZE.xxl};
-
- .ant-card-head-title {
+ @media only screen and (${media('xl')}) {
padding-bottom: 0.25rem;
}
}
@@ -38,11 +48,10 @@ export const Card = styled(AntCard)`
.ant-card-body {
flex-grow: 1;
-
padding: ${(props) => props.$padding && normalizeProp(props.$padding)};
}
.ant-card-bordered {
- border-color: #f0f0f0;
+ border-color: ${({ theme }) => theme.split};
}
`;
diff --git a/src/components/common/BaseCard/BaseCard.tsx b/src/components/common/BaseCard/BaseCard.tsx
index 506311690..2e83f9b2c 100644
--- a/src/components/common/BaseCard/BaseCard.tsx
+++ b/src/components/common/BaseCard/BaseCard.tsx
@@ -1,15 +1,21 @@
import React from 'react';
import { CardProps } from 'antd';
-import { defaultPaddings } from '@app/constants/defaultPaddings';
import { useResponsive } from '@app/hooks/useResponsive';
import * as S from './BaseCard.styles';
+import type { WidthCategories } from '@app/styles/themes/types';
export interface BaseCardProps extends CardProps {
className?: string;
- padding?: string | number | [number, number];
+ padding?: string | number | readonly [number, number];
autoHeight?: boolean;
}
+export const defaultPaddings = {
+ xs: [30, 16],
+ md: [40, 30],
+ xl: [50, 60],
+} as const satisfies WidthCategories;
+
export const BaseCard: React.FC = ({
className,
padding,
@@ -18,18 +24,14 @@ export const BaseCard: React.FC = ({
children,
...props
}) => {
- const { isTablet, isDesktop } = useResponsive();
+ const { isTablet, breakpoint } = useResponsive();
return (
diff --git a/src/components/common/BaseCarousel/Carousel.tsx b/src/components/common/BaseCarousel/BaseCarousel.tsx
similarity index 100%
rename from src/components/common/BaseCarousel/Carousel.tsx
rename to src/components/common/BaseCarousel/BaseCarousel.tsx
diff --git a/src/components/common/BaseCarousel/CarouselArrow/CarouselArrow.styles.ts b/src/components/common/BaseCarousel/CarouselArrow/CarouselArrow.styles.ts
index 6c6249aef..a22dba46b 100644
--- a/src/components/common/BaseCarousel/CarouselArrow/CarouselArrow.styles.ts
+++ b/src/components/common/BaseCarousel/CarouselArrow/CarouselArrow.styles.ts
@@ -4,9 +4,9 @@ import { CustomArrowProps } from 'react-slick';
export const ArrowWrapper = styled.div.withConfig({
shouldForwardProp: (prop) => !['currentSlide', 'slideCount'].includes(prop),
})`
- font-size: 1rem;
+ font-size: ${({ theme }) => theme.fontSizes.md};
- color: var(--text-main-color);
+ color: ${({ theme }) => theme.textMain};
&:before {
display: none;
@@ -14,6 +14,6 @@ export const ArrowWrapper = styled.div.withConfig({
&:hover,
&:focus {
- color: var(--text-main-color);
+ color: ${({ theme }) => theme.textMain};
}
`;
diff --git a/src/components/common/BaseCheckbox/BaseCheckbox.styles.ts b/src/components/common/BaseCheckbox/BaseCheckbox.styles.ts
index ab7b4aea6..561e9fb36 100644
--- a/src/components/common/BaseCheckbox/BaseCheckbox.styles.ts
+++ b/src/components/common/BaseCheckbox/BaseCheckbox.styles.ts
@@ -1,30 +1,34 @@
import styled from 'styled-components';
-import { Checkbox as AntdCheckbox } from 'antd';
+import { Checkbox as AntCheckbox } from 'antd';
-const { Group } = AntdCheckbox;
+const { Group } = AntCheckbox;
-export const Checkbox = styled(AntdCheckbox)`
+export const Checkbox = styled(AntCheckbox)`
& .ant-checkbox-inner {
border-radius: 0.1875rem;
height: 1.25rem;
width: 1.25rem;
- border: 1px solid var(--primary-color);
+ border: 1px solid ${({ theme }) => theme.primary};
}
- .ant-checkbox-disabled.ant-checkbox-checked .ant-checkbox-inner::after {
- border-color: var(--disabled-color);
+ .ant-checkbox-disabled .ant-checkbox-inner {
+ border-color: ${({ theme }) => theme.borderBase};
}
- .ant-checkbox-disabled + span {
- color: var(--disabled-color);
+ &.ant-checkbox-disabled.ant-checkbox-checked .ant-checkbox-inner::after {
+ border-color: ${({ theme }) => theme.disabled};
}
`;
export const CheckboxGroup = styled(Group)`
+ .ant-form-vertical &.ant-checkbox-group {
+ display: inline-block;
+ }
+
& .ant-checkbox-inner {
border-radius: 0.1875rem;
height: 1.25rem;
width: 1.25rem;
- border: 1px solid var(--primary-color);
+ border: 1px solid ${({ theme }) => theme.primary};
}
`;
diff --git a/src/components/common/BaseCheckbox/BaseCheckbox.tsx b/src/components/common/BaseCheckbox/BaseCheckbox.tsx
index e4773b0a2..896d9245a 100644
--- a/src/components/common/BaseCheckbox/BaseCheckbox.tsx
+++ b/src/components/common/BaseCheckbox/BaseCheckbox.tsx
@@ -1,15 +1,21 @@
import React from 'react';
-import { CheckboxProps } from 'antd';
+import { CheckboxProps, CheckboxRef } from 'antd';
import * as S from './BaseCheckbox.styles';
+export type BaseCheckboxRef = CheckboxRef;
+
export type BaseCheckboxProps = CheckboxProps;
-interface BaseCheckboxInterface extends React.FC {
+const Checkbox = React.forwardRef((props, ref) => {
+ return ;
+});
+
+type CheckboxForwardRef = typeof Checkbox;
+
+interface BaseCheckboxInterface extends CheckboxForwardRef {
Group: typeof S.CheckboxGroup;
}
-export const BaseCheckbox: BaseCheckboxInterface = (props) => {
- return ;
-};
+export const BaseCheckbox = Checkbox as BaseCheckboxInterface;
BaseCheckbox.Group = S.CheckboxGroup;
diff --git a/src/components/common/BaseCol/BaseCol.styles.ts b/src/components/common/BaseCol/BaseCol.styles.ts
new file mode 100644
index 000000000..364e04e32
--- /dev/null
+++ b/src/components/common/BaseCol/BaseCol.styles.ts
@@ -0,0 +1,6 @@
+import styled from 'styled-components';
+import { Col as AntCol } from 'antd';
+
+export const Col = styled(AntCol)`
+ font-size: unset;
+`;
diff --git a/src/components/common/BaseCol/BaseCol.tsx b/src/components/common/BaseCol/BaseCol.tsx
index 665b37432..fde84f32b 100644
--- a/src/components/common/BaseCol/BaseCol.tsx
+++ b/src/components/common/BaseCol/BaseCol.tsx
@@ -1,2 +1,7 @@
-export { Col as BaseCol } from 'antd';
-export type { ColProps as BaseColProps } from 'antd';
+import { forwardRef } from 'react';
+import type { ColProps } from 'antd';
+import * as S from './BaseCol.styles';
+
+export type BaseColProps = ColProps;
+
+export const BaseCol = forwardRef((props, ref) => );
diff --git a/src/components/common/BaseCollapse/BaseCollapse.tsx b/src/components/common/BaseCollapse/BaseCollapse.tsx
index 3f315564c..8c5da715d 100644
--- a/src/components/common/BaseCollapse/BaseCollapse.tsx
+++ b/src/components/common/BaseCollapse/BaseCollapse.tsx
@@ -1,13 +1,13 @@
-import { CollapseProps, Collapse as AntdCollapse } from 'antd';
+import { CollapseProps, Collapse as AntCollapse } from 'antd';
export type BaseCollapseProps = CollapseProps;
interface BaseCollapseInterface extends React.FC {
- Panel: typeof AntdCollapse.Panel;
+ Panel: typeof AntCollapse.Panel;
}
export const BaseCollapse: BaseCollapseInterface = (props) => {
- return ;
+ return ;
};
-BaseCollapse.Panel = AntdCollapse.Panel;
+BaseCollapse.Panel = AntCollapse.Panel;
diff --git a/src/components/common/BaseDivider/BaseDivider.styles.ts b/src/components/common/BaseDivider/BaseDivider.styles.ts
new file mode 100644
index 000000000..87a86e183
--- /dev/null
+++ b/src/components/common/BaseDivider/BaseDivider.styles.ts
@@ -0,0 +1,4 @@
+import styled from 'styled-components';
+import { Divider as AntDivider } from 'antd';
+
+export const Divider = styled(AntDivider)``;
diff --git a/src/components/common/BaseDivider/BaseDivider.tsx b/src/components/common/BaseDivider/BaseDivider.tsx
index 7ccc4d45a..009f842cf 100644
--- a/src/components/common/BaseDivider/BaseDivider.tsx
+++ b/src/components/common/BaseDivider/BaseDivider.tsx
@@ -1,2 +1,8 @@
-export { Divider as BaseDivider } from 'antd';
-export type { DividerProps as BaseDividerProps } from 'antd';
+import type { DividerProps } from 'antd';
+import * as S from './BaseDivider.styles';
+
+export type BaseDividerProps = DividerProps;
+
+export const BaseDivider: React.FC = (props) => {
+ return ;
+};
diff --git a/src/components/common/BaseDropdown/BaseDropdown.styles.ts b/src/components/common/BaseDropdown/BaseDropdown.styles.ts
new file mode 100644
index 000000000..7183a4788
--- /dev/null
+++ b/src/components/common/BaseDropdown/BaseDropdown.styles.ts
@@ -0,0 +1,4 @@
+import styled from 'styled-components';
+import { Dropdown as AntDropdown } from 'antd';
+
+export const Dropdown = styled(AntDropdown)``;
diff --git a/src/components/common/BaseDropdown/BaseDropdown.tsx b/src/components/common/BaseDropdown/BaseDropdown.tsx
new file mode 100644
index 000000000..c1a668867
--- /dev/null
+++ b/src/components/common/BaseDropdown/BaseDropdown.tsx
@@ -0,0 +1,10 @@
+import type { DropdownProps } from 'antd';
+import * as S from './BaseDropdown.styles';
+
+export const BaseDropdown: React.FC = ({ children, ...props }) => {
+ return (
+ triggerNode} {...props}>
+ {children}
+
+ );
+};
diff --git a/src/components/common/BaseDropdown/Dropdown.tsx b/src/components/common/BaseDropdown/Dropdown.tsx
deleted file mode 100644
index 0269ee823..000000000
--- a/src/components/common/BaseDropdown/Dropdown.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react';
-import { DropdownProps, Dropdown } from 'antd';
-
-export const BaseDropdown: React.FC = ({ children, ...props }) => {
- return (
- triggerNode} {...props}>
- {children}
-
- );
-};
diff --git a/src/components/common/BaseEmpty/BaseEmpty.styles.ts b/src/components/common/BaseEmpty/BaseEmpty.styles.ts
new file mode 100644
index 000000000..84fb51611
--- /dev/null
+++ b/src/components/common/BaseEmpty/BaseEmpty.styles.ts
@@ -0,0 +1,4 @@
+import styled from 'styled-components';
+import { Empty as AntEmpty } from 'antd';
+
+export const Empty = styled(AntEmpty)``;
diff --git a/src/components/common/BaseEmpty/BaseEmpty.tsx b/src/components/common/BaseEmpty/BaseEmpty.tsx
index ef5a64e72..bc5f05793 100644
--- a/src/components/common/BaseEmpty/BaseEmpty.tsx
+++ b/src/components/common/BaseEmpty/BaseEmpty.tsx
@@ -1,2 +1,8 @@
-export { Empty as BaseEmpty } from 'antd';
-export type { EmptyProps as BaseEmptyProps } from 'antd';
+import type { EmptyProps } from 'antd';
+import * as S from './BaseEmpty.styles';
+
+export type BaseEmptyProps = EmptyProps;
+
+export const BaseEmpty: React.FC = (props) => {
+ return ;
+};
diff --git a/src/components/common/BaseFeed/BaseFeed.styles.ts b/src/components/common/BaseFeed/BaseFeed.styles.ts
index 402d1e2c5..1dc509348 100644
--- a/src/components/common/BaseFeed/BaseFeed.styles.ts
+++ b/src/components/common/BaseFeed/BaseFeed.styles.ts
@@ -1,4 +1,4 @@
-import { media } from '@app/styles/themes/constants';
+import { media } from '@app/utils/utils';
import styled from 'styled-components';
export const NewsWrapper = styled.div`
@@ -8,11 +8,11 @@ export const NewsWrapper = styled.div`
& > div {
margin-bottom: 1.25rem;
- @media only screen and ${media.xl} {
+ @media only screen and (${media('xl')}) {
margin-bottom: 1.5rem;
}
- @media only screen and ${media.xxl} {
+ @media only screen and (${media('xxl')}) {
margin-bottom: 2.5rem;
}
}
diff --git a/src/components/common/BaseFeed/BaseFeed.tsx b/src/components/common/BaseFeed/BaseFeed.tsx
index 862cfb6e9..e46a1e2a6 100644
--- a/src/components/common/BaseFeed/BaseFeed.tsx
+++ b/src/components/common/BaseFeed/BaseFeed.tsx
@@ -22,6 +22,7 @@ export const BaseFeed: React.FC = ({ next, hasMore, target = 'mai
}
scrollableTarget={target}
+ style={{ overflow: undefined }} // workaround for https://github.com/ankeetmaini/react-infinite-scroll-component/issues/228
>
{children}
diff --git a/src/components/common/BaseHashTag/BaseHashTag.styles.ts b/src/components/common/BaseHashTag/BaseHashTag.styles.ts
index 2a0083959..17f07e707 100644
--- a/src/components/common/BaseHashTag/BaseHashTag.styles.ts
+++ b/src/components/common/BaseHashTag/BaseHashTag.styles.ts
@@ -1,6 +1,5 @@
import styled from 'styled-components';
import { CloseOutlined } from '@ant-design/icons';
-import { FONT_SIZE } from '@app/styles/themes/constants';
export const RemoveTagWrapper = styled.span`
padding-left: 0.3125rem;
@@ -10,8 +9,8 @@ export const RemoveTagWrapper = styled.span`
`;
export const RemoveTagIcon = styled(CloseOutlined)`
- color: #ffffff;
- font-size: ${FONT_SIZE.xxs};
+ color: ${({ theme }) => theme.white};
+ font-size: ${({ theme }) => theme.fontSizes.xxs};
cursor: pointer;
`;
@@ -22,5 +21,5 @@ export const TagWrapper = styled.span`
align-items: center;
padding: 0.3125rem 0.625rem;
margin: 0;
- font-size: ${FONT_SIZE.xs};
+ font-size: ${({ theme }) => theme.fontSizes.xs};
`;
diff --git a/src/components/common/BaseHashTag/BaseHashTag.tsx b/src/components/common/BaseHashTag/BaseHashTag.tsx
index 12e1495fb..393b4ebe2 100644
--- a/src/components/common/BaseHashTag/BaseHashTag.tsx
+++ b/src/components/common/BaseHashTag/BaseHashTag.tsx
@@ -1,5 +1,6 @@
import React from 'react';
import * as S from './BaseHashTag.styles';
+import { useTheme } from 'styled-components';
export interface IHashTag {
id: string;
@@ -15,9 +16,10 @@ interface BaseHashTagProps {
}
export const BaseHashTag: React.FC = ({ title, color, bgColor, removeTag, ...otherProps }) => {
+ const theme = useTheme();
const style = {
- color: color || 'var(--white)',
- backgroundColor: bgColor ? `var(--${bgColor}-color)` : 'var(--orange)',
+ color: color || theme.white,
+ backgroundColor: bgColor ? theme[bgColor] : theme.orange,
};
return (
diff --git a/src/components/common/BaseMenu/BaseMenu.styles.ts b/src/components/common/BaseMenu/BaseMenu.styles.ts
new file mode 100644
index 000000000..b789bc81e
--- /dev/null
+++ b/src/components/common/BaseMenu/BaseMenu.styles.ts
@@ -0,0 +1,24 @@
+import styled from 'styled-components';
+import { Menu as AntMenu } from 'antd';
+
+export const Menu = styled(AntMenu)`
+ &.ant-menu .ant-menu-item-icon {
+ font-size: ${({ theme }) => theme.fontSizes.xl};
+ width: 1.25rem;
+ }
+
+ .ant-menu-item,
+ .ant-menu-submenu {
+ font-size: ${({ theme }) => theme.fontSizes.xs};
+ border-radius: 0;
+ }
+
+ .ant-menu-item {
+ fill: currentColor;
+ }
+
+ .ant-menu-inline,
+ .ant-menu-vertical {
+ border-right: 0;
+ }
+`;
diff --git a/src/components/common/BaseMenu/BaseMenu.tsx b/src/components/common/BaseMenu/BaseMenu.tsx
index 106f3195f..8f32fb0c6 100644
--- a/src/components/common/BaseMenu/BaseMenu.tsx
+++ b/src/components/common/BaseMenu/BaseMenu.tsx
@@ -1,2 +1,8 @@
-export { Menu as BaseMenu } from 'antd';
-export type { MenuProps as BaseMenuProps } from 'antd';
+import type { MenuProps } from 'antd';
+import * as S from './BaseMenu.styles';
+
+export type BaseMenuProps = Omit;
+
+export const BaseMenu: React.FC = (props) => {
+ return ;
+};
diff --git a/src/components/common/BaseModal/BaseModal.tsx b/src/components/common/BaseModal/BaseModal.tsx
index 92130cb3e..ab71492d3 100644
--- a/src/components/common/BaseModal/BaseModal.tsx
+++ b/src/components/common/BaseModal/BaseModal.tsx
@@ -1,20 +1,14 @@
import React from 'react';
import { Modal, ModalProps } from 'antd';
+import { WidthCategory } from '@app/styles/themes/types';
import { modalSizes } from 'constants/modalSizes';
interface BaseModalProps extends ModalProps {
size?: 'small' | 'medium' | 'large';
}
-interface BaseModalInterface extends React.FC {
- info: typeof Modal.info;
- success: typeof Modal.success;
- warning: typeof Modal.warning;
- error: typeof Modal.error;
-}
-
-export const BaseModal: BaseModalInterface = ({ size = 'medium', children, ...props }) => {
- const modalSize = Object.entries(modalSizes).find((sz) => sz[0] === size)?.[1];
+export const BaseModal: React.FC = ({ size = 'medium', children, ...props }) => {
+ const modalSize = modalSizes[WidthCategory[size]];
return (
@@ -22,8 +16,3 @@ export const BaseModal: BaseModalInterface = ({ size = 'medium', children, ...pr
);
};
-
-BaseModal.info = Modal.info;
-BaseModal.success = Modal.success;
-BaseModal.warning = Modal.warning;
-BaseModal.error = Modal.error;
diff --git a/src/components/common/BaseNotification/BaseNotification.styles.ts b/src/components/common/BaseNotification/BaseNotification.styles.ts
index 4ad548e0d..77fc8fb1b 100644
--- a/src/components/common/BaseNotification/BaseNotification.styles.ts
+++ b/src/components/common/BaseNotification/BaseNotification.styles.ts
@@ -3,6 +3,7 @@ import { BaseAvatar } from '../BaseAvatar/BaseAvatar';
import { BaseSpace } from '../BaseSpace/BaseSpace';
import { BaseTypography } from '../BaseTypography/BaseTypography';
import { NotificationType } from './BaseNotification';
+import { colorTypeFrom } from '@app/utils/utils';
interface SpacewWrapperProps {
type: NotificationType;
@@ -11,38 +12,26 @@ interface SpacewWrapperProps {
export const NotificationIcon = styled(BaseAvatar)``;
export const Title = styled(BaseTypography.Text)`
- font-size: 0.875rem;
- font-weight: 600;
+ font-size: ${({ theme }) => theme.fontSizes.xs};
+ font-weight: ${({ theme }) => theme.fontWeights.semibold};
`;
export const Description = styled(BaseTypography.Text)`
- font-size: 0.875rem;
+ font-size: ${({ theme }) => theme.fontSizes.xs};
`;
export const SpaceWrapper = styled(BaseSpace)`
- background-color: var(--background-color);
+ background-color: ${({ theme }) => theme.background};
& ${Title}, span[role='img'] {
- ${(props) => {
- switch (props.type) {
- case 'error':
- case 'warning':
- case 'success':
- return css`
- color: var(--${props.type}-color);
- `;
- case 'info':
- case 'mention':
- return css`
- color: var(--primary-color);
- `;
- default:
- return '';
- }
- }}
+ ${(props) =>
+ props.type &&
+ css`
+ color: ${props.theme[colorTypeFrom(props.type)]};
+ `}
}
& span[role='img'] {
- font-size: 2rem;
+ font-size: ${({ theme }) => theme.fontSizes.xxxxl};
}
`;
diff --git a/src/components/common/BasePagination/BasePagination.styles.ts b/src/components/common/BasePagination/BasePagination.styles.ts
index 3d1d993a2..7dc11e9fe 100644
--- a/src/components/common/BasePagination/BasePagination.styles.ts
+++ b/src/components/common/BasePagination/BasePagination.styles.ts
@@ -1,29 +1,62 @@
-import styled from 'styled-components';
-import { Pagination as AntdPagination } from 'antd';
+import styled, { css } from 'styled-components';
+import { Pagination as AntPagination } from 'antd';
-export const Pagination = styled(AntdPagination)`
- .ant-pagination-item-container .ant-pagination-item-ellipsis {
- color: var(--disabled-color);
- }
+export const Pagination = styled(AntPagination)`
+ ${(props) =>
+ !props.disabled &&
+ css`
+ .ant-pagination-item:not(.ant-pagination-item-active) {
+ &:hover,
+ &:focus-visible {
+ a {
+ color: ${({ theme }) => theme.primary};
+ }
+ }
+ }
- .ant-pagination-disabled {
- .ant-pagination-item-link,
- .ant-pagination-item a {
- color: var(--disabled-color);
- }
- }
+ .ant-pagination-item-active:focus-visible {
+ border-color: ${({ theme }) => theme.primary5};
- &.ant-pagination.ant-pagination-disabled {
- .ant-pagination-item-link,
- .ant-pagination-item a {
- color: var(--disabled-color);
- }
- }
- & .ant-select-arrow {
- color: var(--disabled-color);
- }
+ a {
+ color: ${({ theme }) => theme.primary5};
+ }
+ }
+
+ &.ant-pagination-mini {
+ .ant-pagination-prev,
+ .ant-pagination-next {
+ &:not(.ant-pagination-disabled) {
+ &:hover,
+ &:focus-visible {
+ .ant-pagination-item-link {
+ color: ${({ theme }) => theme.primary};
+ background-color: transparent;
+ }
+ }
+ }
+ }
+
+ .ant-pagination-item:not(.ant-pagination-item-active):hover {
+ background-color: transparent;
+ }
+ }
+
+ &:not(.ant-pagination-mini) {
+ .ant-pagination-prev,
+ .ant-pagination-next {
+ &:focus-visible .ant-pagination-item-link {
+ color: ${({ theme }) => theme.primary};
+ border-color: ${({ theme }) => theme.primary};
+ }
+ }
+
+ .ant-pagination-item:not(.ant-pagination-item-active):focus-visible {
+ border-color: ${({ theme }) => theme.primary};
+ }
+ }
+ `}
- .ant-select-disabled.ant-select:not(.ant-select-customize-input) .ant-select-selector {
- color: var(--disabled-color);
+ .ant-select-arrow {
+ color: ${({ theme }) => theme.disabled};
}
`;
diff --git a/src/components/common/BasePagination/BasePagination.tsx b/src/components/common/BasePagination/BasePagination.tsx
index 78d0ff53c..c1fc46a33 100644
--- a/src/components/common/BasePagination/BasePagination.tsx
+++ b/src/components/common/BasePagination/BasePagination.tsx
@@ -1,8 +1,14 @@
-import { PaginationProps } from 'antd';
+import { PaginationProps, ConfigProvider } from 'antd';
import * as S from './BasePagination.styles';
export type BasePaginationProps = PaginationProps;
export const BasePagination: React.FC = (props) => {
- return ;
+ const wireframe = props.size !== 'small';
+
+ return (
+
+
+
+ );
};
diff --git a/src/components/common/BasePopconfirm/BasePopconfirm.styles.ts b/src/components/common/BasePopconfirm/BasePopconfirm.styles.ts
new file mode 100644
index 000000000..ac78fd9db
--- /dev/null
+++ b/src/components/common/BasePopconfirm/BasePopconfirm.styles.ts
@@ -0,0 +1,4 @@
+import styled from 'styled-components';
+import { Popconfirm as AntPopconfirm } from 'antd';
+
+export const Popconfirm = styled(AntPopconfirm)``;
diff --git a/src/components/common/BasePopconfirm/BasePopconfirm.tsx b/src/components/common/BasePopconfirm/BasePopconfirm.tsx
index 5492e61f5..5a2a17064 100644
--- a/src/components/common/BasePopconfirm/BasePopconfirm.tsx
+++ b/src/components/common/BasePopconfirm/BasePopconfirm.tsx
@@ -1,2 +1,8 @@
-export { Popconfirm as BasePopconfirm } from 'antd';
-export type { PopconfirmProps as BasePopconfirmProps } from 'antd';
+import type { PopconfirmProps } from 'antd';
+import * as S from './BasePopconfirm.styles';
+
+export type BasePopconfirmProps = PopconfirmProps;
+
+export const BasePopconfirm: React.FC = (props) => {
+ return ;
+};
diff --git a/src/components/common/BasePopover/BasePopover.styles.ts b/src/components/common/BasePopover/BasePopover.styles.ts
new file mode 100644
index 000000000..4956907ad
--- /dev/null
+++ b/src/components/common/BasePopover/BasePopover.styles.ts
@@ -0,0 +1,4 @@
+import styled from 'styled-components';
+import { Popover as AntPopover } from 'antd';
+
+export const Popover = styled(AntPopover)``;
diff --git a/src/components/common/BasePopover/BasePopover.tsx b/src/components/common/BasePopover/BasePopover.tsx
index 28b3549da..b9d4bb795 100644
--- a/src/components/common/BasePopover/BasePopover.tsx
+++ b/src/components/common/BasePopover/BasePopover.tsx
@@ -1,2 +1,8 @@
-export { Popover as BasePopover } from 'antd';
-export type { PopoverProps as BasePopoverProps } from 'antd';
+import type { PopoverProps } from 'antd';
+import * as S from './BasePopover.styles';
+
+export type BasePopoverProps = PopoverProps;
+
+export const BasePopover: React.FC = (props) => {
+ return ;
+};
diff --git a/src/components/common/BaseProgress/BaseProgress.styles.ts b/src/components/common/BaseProgress/BaseProgress.styles.ts
new file mode 100644
index 000000000..c2ac94961
--- /dev/null
+++ b/src/components/common/BaseProgress/BaseProgress.styles.ts
@@ -0,0 +1,4 @@
+import styled from 'styled-components';
+import { Progress as AntProgress } from 'antd';
+
+export const Progress = styled(AntProgress)``;
diff --git a/src/components/common/BaseProgress/BaseProgress.tsx b/src/components/common/BaseProgress/BaseProgress.tsx
index 080b2ca96..eb0cd60d6 100644
--- a/src/components/common/BaseProgress/BaseProgress.tsx
+++ b/src/components/common/BaseProgress/BaseProgress.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
-import { ProgressProps, Progress } from 'antd';
+import type { ProgressProps } from 'antd';
+import * as S from './BaseProgress.styles';
export type BaseProgressProps = ProgressProps;
export const BaseProgress: React.FC = (props) => {
- return ;
+ return ;
};
diff --git a/src/components/common/BaseRadio/BaseRadio.styles.ts b/src/components/common/BaseRadio/BaseRadio.styles.ts
index 58563aa8d..0686b527b 100644
--- a/src/components/common/BaseRadio/BaseRadio.styles.ts
+++ b/src/components/common/BaseRadio/BaseRadio.styles.ts
@@ -1,14 +1,37 @@
import styled from 'styled-components';
-import { Radio as AntdRadio } from 'antd';
+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: ${({ theme }) => theme.radioBoxShadow};
+ }
+
+ &.ant-radio-wrapper {
+ .ant-radio-inner,
+ .ant-radio-inner::after {
+ width: 1rem;
+ height: 1rem;
+ }
+
+ .ant-radio-inner::after {
+ transform: scale(0.5);
+ margin-block-start: -0.5rem;
+ margin-inline-start: -0.5rem;
+ }
+ }
-export const Radio = styled(AntdRadio)`
.ant-radio-disabled + span {
- color: var(--disabled-color);
+ color: ${({ theme }) => theme.disabled};
}
`;
-export const RadioButton = styled(AntdRadio.Button)`
+export const RadioButton = styled(AntRadio.Button)`
+ &.ant-radio-button-wrapper:has(:focus-visible) {
+ box-shadow: ${({ theme }) => theme.radioBoxShadow};
+ }
+
&.ant-radio-button-wrapper-disabled {
- color: var(--disabled-color);
+ color: ${({ theme }) => theme.disabled};
}
`;
diff --git a/src/components/common/BaseRate/BaseRate.styles.ts b/src/components/common/BaseRate/BaseRate.styles.ts
index 8c341615d..6d9ad7479 100644
--- a/src/components/common/BaseRate/BaseRate.styles.ts
+++ b/src/components/common/BaseRate/BaseRate.styles.ts
@@ -1,7 +1,6 @@
import styled from 'styled-components';
-import { Rate as AntdRate } from 'antd';
-import { FONT_SIZE } from '@app/styles/themes/constants';
+import { Rate as AntRate } from 'antd';
-export const Rate = styled(AntdRate)`
- font-size: ${FONT_SIZE.lg};
+export const Rate = styled(AntRate)`
+ font-size: ${({ theme }) => theme.fontSizes.lg};
`;
diff --git a/src/components/common/BaseResult/BaseResult.styles.ts b/src/components/common/BaseResult/BaseResult.styles.ts
index 4274abb1b..c4e6b579d 100644
--- a/src/components/common/BaseResult/BaseResult.styles.ts
+++ b/src/components/common/BaseResult/BaseResult.styles.ts
@@ -2,21 +2,7 @@ import styled from 'styled-components';
import { Result as AntResult } from 'antd';
export const Result = styled(AntResult)`
- &.ant-result-success .ant-result-icon > .anticon {
- color: var(--success-color);
- }
-
- &.ant-result-info .ant-result-icon > .anticon {
- color: var(--primary-color);
- }
- &.ant-result-warning .ant-result-icon > .anticon {
- color: var(--warning-color);
- }
- &.ant-result-error .ant-result-icon > .anticon {
- color: var(--error-color);
- }
-
- .ant-result-subtitle {
- color: var(--breadcrumb-color);
+ .ant-result-title {
+ margin: 0;
}
`;
diff --git a/src/components/common/BaseRow/BaseRow.styles.ts b/src/components/common/BaseRow/BaseRow.styles.ts
new file mode 100644
index 000000000..06d410458
--- /dev/null
+++ b/src/components/common/BaseRow/BaseRow.styles.ts
@@ -0,0 +1,6 @@
+import styled from 'styled-components';
+import { Row as AntRow } from 'antd';
+
+export const Row = styled(AntRow)`
+ font-size: unset;
+`;
diff --git a/src/components/common/BaseRow/BaseRow.tsx b/src/components/common/BaseRow/BaseRow.tsx
index e08f6a4b4..365a87c2c 100644
--- a/src/components/common/BaseRow/BaseRow.tsx
+++ b/src/components/common/BaseRow/BaseRow.tsx
@@ -1,2 +1,7 @@
-export { Row as BaseRow } from 'antd';
-export type { RowProps as BaseRowProps } from 'antd';
+import { forwardRef } from 'react';
+import type { RowProps } from 'antd';
+import * as S from './BaseRow.styles';
+
+export type BaseRowProps = RowProps;
+
+export const BaseRow = forwardRef((props, ref) => );
diff --git a/src/components/common/BaseSlider/BaseSlider.styles.ts b/src/components/common/BaseSlider/BaseSlider.styles.ts
index 54b609f15..7a58c5a42 100644
--- a/src/components/common/BaseSlider/BaseSlider.styles.ts
+++ b/src/components/common/BaseSlider/BaseSlider.styles.ts
@@ -1,8 +1,16 @@
import styled from 'styled-components';
-import { Slider as AntdSlider } from 'antd';
+import { Slider as AntSlider } from 'antd';
+
+export const Slider = styled(AntSlider)`
+ &.ant-slider.ant-slider-disabled .ant-slider-rail {
+ background-color: ${({ theme }) => theme.backgroundColorBase} !important;
+ }
+
+ &.ant-slider .ant-slider-handle:focus::after {
+ outline: 6px solid rgba(${({ theme }) => theme.rgb.primary}, 0.2);
+ }
-export const Slider = styled(AntdSlider)`
& .ant-slider-mark-text:not(.ant-slider-mark-text-active) {
- color: var(--subtext-color);
+ color: ${({ theme }) => theme.subText};
}
`;
diff --git a/src/components/common/BaseSpin/BaseSpin.styles.ts b/src/components/common/BaseSpin/BaseSpin.styles.ts
new file mode 100644
index 000000000..4462f25b3
--- /dev/null
+++ b/src/components/common/BaseSpin/BaseSpin.styles.ts
@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+import { Spin as AntSpin } from 'antd';
+
+export const Spin = styled(AntSpin)`
+ .ant-spin-blur {
+ opacity: 0;
+ }
+`;
diff --git a/src/components/common/BaseSpin/BaseSpin.tsx b/src/components/common/BaseSpin/BaseSpin.tsx
index 7a4624e62..44ecc8924 100644
--- a/src/components/common/BaseSpin/BaseSpin.tsx
+++ b/src/components/common/BaseSpin/BaseSpin.tsx
@@ -1,2 +1,8 @@
-export { Spin as BaseSpin } from 'antd';
-export type { SpinProps as BaseSpinProps } from 'antd';
+import type { SpinProps } from 'antd';
+import * as S from './BaseSpin.styles';
+
+export type BaseSpinProps = SpinProps;
+
+export const BaseSpin: React.FC = (props) => {
+ return ;
+};
diff --git a/src/components/common/BaseSteps/BaseSteps.styles.ts b/src/components/common/BaseSteps/BaseSteps.styles.ts
index b419afe4a..beccd54dc 100644
--- a/src/components/common/BaseSteps/BaseSteps.styles.ts
+++ b/src/components/common/BaseSteps/BaseSteps.styles.ts
@@ -1,34 +1,35 @@
import styled from 'styled-components';
-import { Steps as AntdSteps } from 'antd';
-import { FONT_SIZE, FONT_WEIGHT, media } from '@app/styles/themes/constants';
+import { Steps as AntSteps } from 'antd';
+import { media } from '@app/utils/utils';
-export const Steps = styled(AntdSteps)`
+export const Steps = styled(AntSteps)`
font-size: unset;
& .ant-steps-item-process > .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-title {
- color: var(--primary-color);
- font-weight: ${FONT_WEIGHT.semibold};
- font-size: ${FONT_SIZE.xs};
+ color: ${({ theme }) => theme.primary};
+ font-weight: ${({ theme }) => theme.fontWeights.semibold};
+ font-size: ${({ theme }) => theme.fontSizes.xs};
- @media only screen and ${media.md} {
- font-size: ${FONT_SIZE.md};
+ @media only screen and (${media('md')}) {
+ font-size: ${({ theme }) => theme.fontSizes.md};
}
}
.ant-steps-item-wait > .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-title {
- color: var(--text-main-color);
- font-weight: ${FONT_WEIGHT.semibold};
- font-size: ${FONT_SIZE.xs};
+ color: ${({ theme }) => theme.textMain};
+ font-weight: ${({ theme }) => theme.fontWeights.semibold};
+ font-size: ${({ theme }) => theme.fontSizes.xs};
- @media only screen and ${media.md} {
- font-size: ${FONT_SIZE.md};
+ @media only screen and (${media('md')}) {
+ font-size: ${({ theme }) => theme.fontSizes.md};
}
}
+
.ant-steps-item-wait .ant-steps-item-icon {
- border-color: var(--disabled-color);
+ border-color: ${({ theme }) => theme.disabled};
& > .ant-steps-icon {
- color: var(--disabled-color);
+ color: ${({ theme }) => theme.disabled};
}
}
@@ -42,19 +43,22 @@ export const Steps = styled(AntdSteps)`
align-items: flex-start;
}
}
+
&.ant-steps-vertical.ant-steps-small {
.ant-steps-item-container .ant-steps-item-tail {
padding: 1.625rem 0 0.375rem;
}
}
+
& .ant-steps-item {
&:not(.ant-steps-item-process) {
.ant-steps-item-description {
- color: var(--subtext-color);
+ color: ${({ theme }) => theme.subText};
}
}
+
.ant-steps-item-subtitle {
- color: var(--subtext-color);
+ color: ${({ theme }) => theme.subText};
}
}
`;
diff --git a/src/components/common/BaseSwitch/BaseSwitch.styles.ts b/src/components/common/BaseSwitch/BaseSwitch.styles.ts
index 15aabea05..126666851 100644
--- a/src/components/common/BaseSwitch/BaseSwitch.styles.ts
+++ b/src/components/common/BaseSwitch/BaseSwitch.styles.ts
@@ -1,9 +1,13 @@
import styled from 'styled-components';
-import { Switch as AntdSwitch } from 'antd';
+import { Switch as AntSwitch } from 'antd';
+
+export const Switch = styled(AntSwitch)`
+ &.ant-switch-checked:focus {
+ box-shadow: 0 0 0 2px ${({ theme }) => theme.primary1};
+ }
-export const Switch = styled(AntdSwitch)`
&.ant-switch[aria-checked='false'] {
- background-image: linear-gradient(to right, var(--disabled-color), var(--disabled-color)),
- linear-gradient(to right, var(--background-color), var(--background-color));
+ background-image: ${({ theme }) => `linear-gradient(to right, ${theme.disabled}, ${theme.disabled})`},
+ ${({ theme }) => `linear-gradient(to right, ${theme.background}, ${theme.background})`};
}
`;
diff --git a/src/components/common/BaseTable/BaseTable.styles.ts b/src/components/common/BaseTable/BaseTable.styles.ts
index 5bb19edeb..c85638f75 100644
--- a/src/components/common/BaseTable/BaseTable.styles.ts
+++ b/src/components/common/BaseTable/BaseTable.styles.ts
@@ -1,37 +1,34 @@
import styled from 'styled-components';
-import { Table as AntdTable } from 'antd';
-import { FONT_SIZE } from '@app/styles/themes/constants';
+import { Table as AntTable } from 'antd';
-export const Table = styled(AntdTable)`
+export const Table = styled(AntTable)`
& thead .ant-table-cell {
- color: var(--primary-color);
- font-size: ${FONT_SIZE.xs};
+ color: ${({ theme }) => theme.primary};
+ font-size: ${({ theme }) => theme.fontSizes.xs};
line-height: 1.25rem;
& .anticon {
- color: var(--primary-color);
+ color: ${({ theme }) => theme.primary};
}
}
& tbody .ant-table-cell {
- color: var(--text-main-color);
- font-size: ${FONT_SIZE.xs};
+ color: ${({ theme }) => theme.textMain};
+ font-size: ${({ theme }) => theme.fontSizes.xs};
line-height: 1.25rem;
}
& tbody .ant-table-row-expand-icon {
- min-height: 1.25rem;
- min-width: 1.25rem;
border-radius: 0.1875rem;
margin-top: 0;
}
- // Override default antd selector
+ /* Override default antd selector */
&
.ant-table-thead
> tr
> th:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not([colspan])::before {
- background-color: var(--primary-color);
+ background-color: ${({ theme }) => theme.primary};
}
& .ant-pagination-prev,
@@ -43,7 +40,7 @@ export const Table = styled(AntdTable)`
height: 2.0625rem;
line-height: 2.0625rem;
border-radius: 0;
- font-size: ${FONT_SIZE.xs};
+ font-size: ${({ theme }) => theme.fontSizes.xs};
}
& .ant-pagination-prev .ant-pagination-item-link,
@@ -55,13 +52,13 @@ export const Table = styled(AntdTable)`
border-radius: 0.1875rem;
height: 1.25rem;
width: 1.25rem;
- border: 1px solid var(--primary-color);
+ border: 1px solid ${({ theme }) => theme.primary};
}
& .editable-row .ant-form-item-explain {
position: absolute;
top: 100%;
- font-size: 0.75rem;
+ font-size: ${({ theme }) => theme.fontSizes.xxs};
}
.ant-table-column-sort {
@@ -69,20 +66,20 @@ export const Table = styled(AntdTable)`
}
.ant-pagination-item-container .ant-pagination-item-ellipsis {
- color: var(--disabled-color);
+ color: ${({ theme }) => theme.disabled};
}
.ant-pagination-disabled {
.ant-pagination-item-link,
.ant-pagination-item a {
- color: var(--disabled-color);
+ color: ${({ theme }) => theme.disabled};
}
}
.ant-pagination.ant-pagination-disabled {
.ant-pagination-item-link,
.ant-pagination-item a {
- color: var(--disabled-color);
+ color: ${({ theme }) => theme.disabled};
}
}
`;
diff --git a/src/components/common/BaseTable/BaseTable.tsx b/src/components/common/BaseTable/BaseTable.tsx
index f68e32d00..d43042c2f 100644
--- a/src/components/common/BaseTable/BaseTable.tsx
+++ b/src/components/common/BaseTable/BaseTable.tsx
@@ -1,11 +1,10 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import React from 'react';
-import { TableProps } from 'antd';
+import { Table } from 'antd';
import * as S from './BaseTable.styles';
-export type BaseTableProps = TableProps;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type BaseTableProps = React.ComponentProps>;
// TODO make generic!
-export const BaseTable: React.FC> = (props) => {
+export const BaseTable: React.FC = (props) => {
return ;
};
diff --git a/src/components/common/BaseTabs/BaseTabs.styles.ts b/src/components/common/BaseTabs/BaseTabs.styles.ts
index 35f241471..a3549e70d 100644
--- a/src/components/common/BaseTabs/BaseTabs.styles.ts
+++ b/src/components/common/BaseTabs/BaseTabs.styles.ts
@@ -1,8 +1,17 @@
import styled from 'styled-components';
-import { Tabs as AntdTabs } from 'antd';
+import { Tabs as AntTabs } from 'antd';
-export const Tabs = styled(AntdTabs)`
+export const Tabs = styled(AntTabs)`
.ant-tabs-tab.ant-tabs-tab-disabled {
- color: var(--disabled-color);
+ color: ${({ theme }) => theme.disabled};
+ }
+
+ &.ant-tabs .ant-tabs-tab:not(.ant-tabs-tab-active) {
+ .ant-tabs-tab-btn,
+ .ant-tabs-tab-remove {
+ &:focus-visible {
+ color: ${({ theme }) => theme.primary7};
+ }
+ }
}
`;
diff --git a/src/components/common/CalendarSwitch/CalendarSwitch.styles.ts b/src/components/common/CalendarSwitch/CalendarSwitch.styles.ts
index 0e793a7fa..b9b5a016e 100644
--- a/src/components/common/CalendarSwitch/CalendarSwitch.styles.ts
+++ b/src/components/common/CalendarSwitch/CalendarSwitch.styles.ts
@@ -1,4 +1,4 @@
-import { FONT_SIZE, media } from '@app/styles/themes/constants';
+import { media } from '@app/utils/utils';
import styled from 'styled-components';
import { BaseTypography } from '../BaseTypography/BaseTypography';
@@ -8,11 +8,11 @@ export const CalendarSwitch = styled.div`
align-items: center;
`;
export const Text = styled(BaseTypography.Text)`
- font-weight: bold;
- font-size: ${FONT_SIZE.xs};
+ font-weight: ${({ theme }) => theme.fontWeights.bold};
+ font-size: ${({ theme }) => theme.fontSizes.xs};
- @media only screen and ${media.md} {
- font-size: ${FONT_SIZE.lg};
+ @media only screen and (${media('md')}) {
+ font-size: ${({ theme }) => theme.fontSizes.lg};
}
`;
diff --git a/src/components/common/CountryMap/CountryMap.tsx b/src/components/common/CountryMap/CountryMap.tsx
index 263234911..5c1faabf4 100644
--- a/src/components/common/CountryMap/CountryMap.tsx
+++ b/src/components/common/CountryMap/CountryMap.tsx
@@ -2,9 +2,8 @@ import React from 'react';
import { LatLngExpression } from 'leaflet';
import { GeoJSON, ZoomControl } from 'react-leaflet';
import { MapContainerProps } from 'react-leaflet';
-
-import geoData from '../../../assets/map-data/countries.geo.json';
import { FeatureCollection } from 'geojson';
+import geoData from '@app/assets/map-data/countries.geo.json';
import * as S from './CountryMap.styles';
diff --git a/src/components/common/DoctorProfile/DoctorProfile.styles.ts b/src/components/common/DoctorProfile/DoctorProfile.styles.ts
index 94ab9b197..ab33eb10b 100644
--- a/src/components/common/DoctorProfile/DoctorProfile.styles.ts
+++ b/src/components/common/DoctorProfile/DoctorProfile.styles.ts
@@ -1,4 +1,3 @@
-import { FONT_WEIGHT, FONT_SIZE } from '@app/styles/themes/constants';
import styled from 'styled-components';
import { BaseTypography } from '../BaseTypography/BaseTypography';
import { BaseRate } from '../BaseRate/BaseRate';
@@ -17,14 +16,13 @@ export const Info = styled.div`
export const Text = styled(BaseTypography.Text)`
display: flex;
line-height: 1.25rem;
- font-weight: ${FONT_WEIGHT.semibold};
- font-size: ${FONT_SIZE.xs};
-
- color: var(--text-dark-color);
+ font-weight: ${({ theme }) => theme.fontWeights.semibold};
+ font-size: ${({ theme }) => theme.fontSizes.xs};
+ color: ${({ theme }) => theme.textDark};
`;
export const Title = styled(Text)`
- color: var(--primary-color);
+ color: ${({ theme }) => theme.primary};
`;
export const Rating = styled(BaseRate)`
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/MoonSunSwitch/MoonSunSwitch.styles.ts b/src/components/common/MoonSunSwitch/MoonSunSwitch.styles.ts
index bf8b89500..09567b0ca 100644
--- a/src/components/common/MoonSunSwitch/MoonSunSwitch.styles.ts
+++ b/src/components/common/MoonSunSwitch/MoonSunSwitch.styles.ts
@@ -1,4 +1,3 @@
-import { BORDER_RADIUS } from '@app/styles/themes/constants';
import { BaseButton } from '@app/components/common/BaseButton/BaseButton';
import styled, { css } from 'styled-components';
@@ -20,23 +19,21 @@ export const ButtonGroup = styled.div`
display: inline-flex;
padding: 0.325rem;
column-gap: 0.325rem;
-
- border-radius: ${BORDER_RADIUS};
-
- background-color: rgba(var(--primary-rgb-color), 0.1);
+ border-radius: ${({ theme }) => theme.borderRadius};
+ background-color: rgba(${({ theme }) => theme.rgb.primary}, 0.1);
${(props) =>
props.$isFirstActive
? css`
& > ${Btn}:first-of-type {
- background: var(--primary-color);
- color: var(--text-secondary-color);
+ background: ${props.theme.primary};
+ color: ${props.theme.textSecondary};
}
`
: css`
& > ${Btn}:last-of-type {
- background: var(--warning-color);
- color: var(--text-secondary-color);
+ background: ${props.theme.warning};
+ color: ${props.theme.textSecondary};
}
`}
diff --git a/src/components/common/NotFound/NotFound.styles.ts b/src/components/common/NotFound/NotFound.styles.ts
index 7040f777f..1bce04e0c 100644
--- a/src/components/common/NotFound/NotFound.styles.ts
+++ b/src/components/common/NotFound/NotFound.styles.ts
@@ -12,6 +12,6 @@ export const ImgWrapper = styled.div`
`;
export const Text = styled(BaseTypography.Text)`
- font-weight: 700;
- font-size: 1.125rem;
+ font-weight: ${({ theme }) => theme.fontWeights.bold};
+ font-size: ${({ theme }) => theme.fontSizes.lg};
`;
diff --git a/src/components/common/References/References.styles.ts b/src/components/common/References/References.styles.ts
index c8db9578f..b01065231 100644
--- a/src/components/common/References/References.styles.ts
+++ b/src/components/common/References/References.styles.ts
@@ -1,5 +1,5 @@
import styled from 'styled-components';
-import { media } from '@app/styles/themes/constants';
+import { media } from '@app/utils/utils';
export const ReferencesWrapper = styled.div`
width: 100%;
@@ -9,11 +9,11 @@ export const ReferencesWrapper = styled.div`
flex-wrap: nowrap;
margin-top: 2rem;
- @media only screen and ${media.sm} {
+ @media only screen and (${media('sm')}) {
align-items: center;
}
- @media only screen and ${media.xl} {
+ @media only screen and (${media('xl')}) {
flex-direction: row;
justify-content: space-between;
}
@@ -26,7 +26,7 @@ export const Text = styled.span`
flex-wrap: wrap;
margin-bottom: 1rem;
- @media only screen and ${media.xl} {
+ @media only screen and (${media('xl')}) {
margin-bottom: 0;
}
`;
@@ -38,7 +38,7 @@ export const Icons = styled.div`
flex-wrap: nowrap;
svg {
- font-size: 2rem;
+ font-size: ${({ theme }) => theme.fontSizes.xxxxl};
margin-left: 0.5rem;
margin-right: 0.5rem;
}
diff --git a/src/components/common/charts/BaseChart.tsx b/src/components/common/charts/BaseChart.tsx
index 861546eef..383813f3f 100644
--- a/src/components/common/charts/BaseChart.tsx
+++ b/src/components/common/charts/BaseChart.tsx
@@ -1,11 +1,8 @@
import React, { CSSProperties, useEffect, useState } from 'react';
+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';
-import { ITheme } from '@app/styles/themes/types';
-import { BORDER_RADIUS } from '@app/styles/themes/constants';
export interface BaseChartProps {
option?: EChartsOption;
@@ -28,7 +25,7 @@ interface DefaultTooltipStyles {
};
}
-export const getChartColors = (theme: ITheme): string[] => [
+export const getChartColors = (theme: DefaultTheme): string[] => [
theme.chartColor1,
theme.chartColor2,
theme.chartColor3,
@@ -36,10 +33,10 @@ export const getChartColors = (theme: ITheme): string[] => [
theme.chartColor5,
];
-export const getDefaultTooltipStyles = (theme: ITheme): DefaultTooltipStyles => ({
+export const getDefaultTooltipStyles = (theme: DefaultTheme): DefaultTooltipStyles => ({
borderColor: theme.chartColor1,
borderWidth: 2,
- borderRadius: Number.parseInt(BORDER_RADIUS),
+ borderRadius: parseInt(theme.borderRadius),
textStyle: {
fontWeight: 600,
fontSize: 16,
@@ -48,13 +45,13 @@ export const getDefaultTooltipStyles = (theme: ITheme): DefaultTooltipStyles =>
});
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.styles.ts b/src/components/common/charts/Legend/Legend.styles.ts
index 09d456a1f..00091313f 100644
--- a/src/components/common/charts/Legend/Legend.styles.ts
+++ b/src/components/common/charts/Legend/Legend.styles.ts
@@ -1,6 +1,6 @@
import styled from 'styled-components';
import { InfoCircleOutlined } from '@ant-design/icons/lib';
-import { BORDER_RADIUS, FONT_SIZE, FONT_WEIGHT, media } from '@app/styles/themes/constants';
+import { media } from '@app/utils/utils';
interface LegendWrapperProps {
isSelected: boolean;
@@ -9,15 +9,15 @@ interface LegendWrapperProps {
export const LegendWrapper = styled.div`
display: flex;
padding: 0.5rem;
- background: ${(props) => (props.isSelected ? 'var(--secondary-background-selected-color)' : 'transparent')};
- border-radius: ${BORDER_RADIUS};
+ background: ${(props) => (props.isSelected ? props.theme.secondaryBackgroundSelected : 'transparent')};
+ border-radius: ${({ theme }) => theme.borderRadius};
`;
export const LegendInfo = styled.div`
display: flex;
width: 100%;
align-items: center;
- color: var(--text-superLight-color);
+ color: ${({ theme }) => theme.textSuperLight};
`;
export const LegendDescription = styled.div`
@@ -35,25 +35,24 @@ export const LegendColor = styled.span`
export const LegendTitle = styled.div`
line-height: 1rem;
- font-weight: ${FONT_WEIGHT.semibold};
- color: var(--text-main-color);
+ font-weight: ${({ theme }) => theme.fontWeights.semibold};
+ color: ${({ theme }) => theme.textMain};
display: flex;
justify-content: space-between;
- @media only screen and ${media.xs} {
- font-size: ${FONT_SIZE.xs};
+ @media only screen and (${media('xs')}) {
+ font-size: ${({ theme }) => theme.fontSizes.xs};
}
- @media only screen and ${media.md} {
- font-size: ${FONT_SIZE.md};
+ @media only screen and (${media('md')}) {
+ font-size: ${({ theme }) => theme.fontSizes.md};
}
`;
export const InfoStyled = styled(InfoCircleOutlined)`
cursor: pointer;
margin-left: 0.5rem;
-
- color: var(--text-main-color);
+ color: ${({ theme }) => theme.textMain};
`;
export const PopoverContent = styled.div`
@@ -64,9 +63,9 @@ export const Values = styled.div`
display: flex;
align-items: center;
margin-left: 0.5rem;
- color: var(--primary-color);
+ color: ${({ theme }) => theme.primary};
- @media only screen and ${media.md} {
+ @media only screen and (${media('md')}) {
margin-left: 1.5rem;
}
`;
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/charts/PieChart.tsx b/src/components/common/charts/PieChart.tsx
index 85a31dc93..83126e547 100644
--- a/src/components/common/charts/PieChart.tsx
+++ b/src/components/common/charts/PieChart.tsx
@@ -1,9 +1,7 @@
import React from 'react';
import { EChartsOption } from 'echarts-for-react';
+import { useTheme } from 'styled-components';
import { BaseChart, BaseChartProps } from '@app/components/common/charts/BaseChart';
-import { useAppSelector } from '@app/hooks/reduxHooks';
-import { themeObject } from '@app/styles/themes/themeVariables';
-import { BASE_COLORS } from '@app/styles/themes/constants';
interface PieChartProps extends BaseChartProps {
option?: EChartsOption;
@@ -14,7 +12,7 @@ interface PieChartProps extends BaseChartProps {
}
export const PieChart: React.FC = ({ option, data, name, showLegend, ...props }) => {
- const theme = useAppSelector((state) => state.theme.theme);
+ const theme = useTheme();
const defaultPieOption = {
tooltip: {
@@ -25,7 +23,7 @@ export const PieChart: React.FC = ({ option, data, name, showLege
top: '0%',
left: 16,
textStyle: {
- color: themeObject[theme].textMain,
+ color: theme.textMain,
},
},
series: [
@@ -38,7 +36,7 @@ export const PieChart: React.FC = ({ option, data, name, showLege
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 5,
- borderColor: BASE_COLORS.white,
+ borderColor: theme.white,
borderWidth: 2,
},
label: {
@@ -50,7 +48,7 @@ export const PieChart: React.FC = ({ option, data, name, showLege
show: true,
fontSize: '40',
fontWeight: 'bold',
- color: themeObject[theme].textMain,
+ color: theme.textMain,
},
},
labelLine: {
diff --git a/src/components/common/forms/BaseForm/BaseForm.tsx b/src/components/common/forms/BaseForm/BaseForm.tsx
index 4232eef1e..5f6ed9740 100644
--- a/src/components/common/forms/BaseForm/BaseForm.tsx
+++ b/src/components/common/forms/BaseForm/BaseForm.tsx
@@ -1,18 +1,17 @@
-import React, { ComponentProps } from 'react';
+import type { ComponentProps, FC } from 'react';
import { Form, FormInstance } from 'antd';
import { useTranslation } from 'react-i18next';
-import { ValidateErrorEntity } from 'rc-field-form/lib/interface';
import { BaseFormTitle } from '@app/components/common/forms/components/BaseFormTitle/BaseFormTitle';
import { BaseFormItem } from '@app/components/common/forms/components/BaseFormItem/BaseFormItem';
import { BaseFormList } from '@app/components/common/forms/components/BaseFormList/BaseFormList';
-import { notificationController } from '@app/controllers/notificationController';
+import { useFeedback } from '@app/hooks/useFeedback';
// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type BaseFormProps = Omit, 'onFinish'> & { onFinish?: (values: any) => void };
+export type BaseFormProps = ComponentProps>;
export type BaseFormInstance = FormInstance;
-export interface BaseFormInterface extends React.FC {
+export interface BaseFormInterface extends FC {
Title: typeof BaseFormTitle;
Item: typeof BaseFormItem;
List: typeof BaseFormList;
@@ -22,9 +21,10 @@ export interface BaseFormInterface extends React.FC {
export const BaseForm: BaseFormInterface = ({ onFinishFailed, layout = 'vertical', ...props }) => {
const { t } = useTranslation();
+ const { notification } = useFeedback();
- const onFinishFailedDefault = (error: ValidateErrorEntity) => {
- notificationController.error({
+ const onFinishFailedDefault: typeof onFinishFailed = (error) => {
+ notification.error({
message: t('common.error'),
description: error.errorFields[0].errors,
});
diff --git a/src/components/common/forms/components/BaseButtonsGroup/BaseButtonsGroup.tsx b/src/components/common/forms/components/BaseButtonsGroup/BaseButtonsGroup.tsx
index 20eb39f21..8dc759ce9 100644
--- a/src/components/common/forms/components/BaseButtonsGroup/BaseButtonsGroup.tsx
+++ b/src/components/common/forms/components/BaseButtonsGroup/BaseButtonsGroup.tsx
@@ -16,7 +16,7 @@ export const BaseButtonsGroup: React.FC = ({ className, o
return (
-
+
{t('common.cancel')}
diff --git a/src/components/common/forms/components/BaseFormItem/BaseFormItem.ts b/src/components/common/forms/components/BaseFormItem/BaseFormItem.ts
index 11749255c..20e38f0a5 100644
--- a/src/components/common/forms/components/BaseFormItem/BaseFormItem.ts
+++ b/src/components/common/forms/components/BaseFormItem/BaseFormItem.ts
@@ -1,6 +1,6 @@
import styled, { css } from 'styled-components';
import { Form, FormItemProps } from 'antd';
-import { media } from '@app/styles/themes/constants';
+import { media } from '@app/utils/utils';
interface InternalFormItemProps {
$isSuccess?: boolean;
@@ -9,29 +9,50 @@ interface InternalFormItemProps {
export type BaseFormItemProps = FormItemProps;
-export const BaseFormItem = styled(Form.Item)`
+export const BaseFormItem = styled(Form.Item as React.FC)`
+ .ant-input {
+ font-size: ${({ theme }) => theme.fontSizes.md};
+ background: inherit;
+ border-color: ${({ theme }) => theme.borderBase};
+ }
+
+ .ant-input:focus {
+ box-shadow: ${({ theme }) => theme.boxShadow};
+ border-color: ${({ theme }) => theme.primary5};
+ }
+
+ .ant-input:disabled {
+ color: ${({ theme }) => theme.disabled};
+ background-color: ${({ theme }) => theme.disabledBg};
+ cursor: not-allowed;
+ }
+
.ant-form-item-label > label {
- color: var(--primary-color);
+ color: ${({ theme }) => theme.primary};
+ font-size: ${({ theme }) => theme.fontSizes.xs};
+
+ .ant-form-item-optional {
+ color: ${({ theme }) => theme.subText};
+ }
}
.ant-input-group-addon:first-of-type {
- font-weight: 600;
+ font-weight: ${({ theme }) => theme.fontWeights.semibold};
width: 5rem;
-
- color: var(--primary-color);
+ color: ${({ theme }) => theme.primary};
.anticon,
svg {
- font-size: 1.25rem;
+ font-size: ${({ theme }) => theme.fontSizes.xl};
}
- @media only screen and ${media.md} {
+ @media only screen and (${media('md')}) {
width: 5.5rem;
- font-size: 1.125rem;
+ font-size: ${({ theme }) => theme.fontSizes.lg};
}
- @media only screen and ${media.xl} {
- font-size: 1.5rem;
+ @media only screen and (${media('xl')}) {
+ font-size: ${({ theme }) => theme.fontSizes.xxl};
}
}
@@ -54,8 +75,8 @@ export const BaseFormItem = styled(Form.Item)`
align-items: center;
justify-content: center;
margin: 0 0.25rem;
- color: var(--text-secondary-color);
- background: var(--error-color);
+ color: ${({ theme }) => theme.textSecondary};
+ background: ${({ theme }) => theme.error};
border-radius: 50%;
width: 1rem;
height: 1rem;
@@ -73,7 +94,7 @@ export const BaseFormItem = styled(Form.Item)`
.ant-input {
&,
&:hover {
- border-color: var(--success-color);
+ border-color: ${({ theme }) => theme.success};
}
}
@@ -82,7 +103,7 @@ export const BaseFormItem = styled(Form.Item)`
&::after {
content: '✓ ${props.$successText}';
- color: var(--success-color);
+ color: ${({ theme }) => theme.success};
}
}
`}
@@ -91,28 +112,36 @@ export const BaseFormItem = styled(Form.Item)`
display: none;
}
- .ant-picker-suffix {
- font-size: 1rem;
+ .ant-picker-suffix,
+ .ant-select-arrow {
+ font-size: ${({ theme }) => theme.fontSizes.md};
}
.ant-select-arrow {
- font-size: 1rem;
width: unset;
height: unset;
top: 50%;
}
- &.ant-form-item-has-error .ant-input,
- &.ant-form-item-has-error .ant-input-affix-wrapper,
- &.ant-form-item-has-error .ant-input:hover,
- &.ant-form-item-has-error .ant-input-affix-wrapper:hover {
- border-color: var(--error-color);
+ &.ant-form-item-has-error {
+ .ant-input,
+ .ant-input-affix-wrapper,
+ .ant-input:hover,
+ .ant-input-affix-wrapper:hover {
+ border-color: ${({ theme }) => theme.error};
+ }
+ }
+
+ &.ant-form-item-has-success.ant-form-item-has-feedback {
+ .ant-input,
+ .ant-input-affix-wrapper,
+ .ant-input:hover,
+ .ant-input-affix-wrapper:hover {
+ border-color: ${({ theme }) => theme.success};
+ }
}
- &.ant-form-item-has-success.ant-form-item-has-feedback .ant-input,
- &.ant-form-item-has-success.ant-form-item-has-feedback .ant-input-affix-wrapper,
- &.ant-form-item-has-success.ant-form-item-has-feedback .ant-input:hover,
- &.ant-form-item-has-success.ant-form-item-has-feedback .ant-input-affix-wrapper:hover {
- border-color: var(--success-color);
+ & .ant-form-item-row {
+ flex-wrap: inherit;
}
`;
diff --git a/src/components/common/forms/components/BaseFormTitle/BaseFormTitle.ts b/src/components/common/forms/components/BaseFormTitle/BaseFormTitle.ts
index 9ef376daf..20490a85b 100644
--- a/src/components/common/forms/components/BaseFormTitle/BaseFormTitle.ts
+++ b/src/components/common/forms/components/BaseFormTitle/BaseFormTitle.ts
@@ -1,13 +1,13 @@
import styled from 'styled-components';
-import { media } from '@app/styles/themes/constants';
+import { media } from '@app/utils/utils';
import { BaseTypography } from '@app/components/common/BaseTypography/BaseTypography';
export const BaseFormTitle = styled(BaseTypography.Text)`
- font-weight: 700;
- font-size: 1rem;
+ font-weight: ${({ theme }) => theme.fontWeights.bold};
+ font-size: ${({ theme }) => theme.fontSizes.md};
display: block;
- @media only screen and ${media.md} {
- font-size: 1.125rem;
+ @media only screen and (${media('md')}) {
+ font-size: ${({ theme }) => theme.fontSizes.lg};
}
`;
diff --git a/src/components/common/inputs/BaseInput/BaseInput.styles.ts b/src/components/common/inputs/BaseInput/BaseInput.styles.ts
index f27814035..75382043b 100644
--- a/src/components/common/inputs/BaseInput/BaseInput.styles.ts
+++ b/src/components/common/inputs/BaseInput/BaseInput.styles.ts
@@ -1,26 +1,22 @@
import styled from 'styled-components';
import { Input as AntInput } from 'antd';
-import { FONT_WEIGHT, FONT_SIZE } from '@app/styles/themes/constants';
export const Input = styled(AntInput)`
- .ant-input-group-addon:first-child,
- .ant-input-group-addon:last-child {
- min-width: 5.5rem;
- color: var(--primary-color);
- font-weight: ${FONT_WEIGHT.semibold};
- font-size: ${FONT_SIZE.lg};
+ .ant-select:not(.ant-select-disabled):not(.ant-select-customize-input):not(.ant-pagination-size-changer):hover
+ .ant-select-selector {
+ border-color: transparent;
}
- .ant-input-group-addon .ant-select {
- .ant-select-selection-item {
- min-width: 5.5rem;
- color: var(--primary-color);
- font-weight: ${FONT_WEIGHT.semibold};
- font-size: ${FONT_SIZE.lg};
- }
+ .ant-input-group-addon:first-child,
+ .ant-input-group-addon:last-child,
+ .ant-input-group-addon .ant-select .ant-select-selection-item {
+ min-width: 5.5rem;
+ color: ${({ theme }) => theme.primary};
+ font-weight: ${({ theme }) => theme.fontWeights.semibold};
+ font-size: ${({ theme }) => theme.fontSizes.lg};
}
.ant-select-arrow {
- color: var(--disabled-color);
+ color: ${({ theme }) => theme.disabled};
}
`;
diff --git a/src/components/common/inputs/ClipboardInput/ClipboardInput.tsx b/src/components/common/inputs/ClipboardInput/ClipboardInput.tsx
index fadef459a..fb03e0956 100644
--- a/src/components/common/inputs/ClipboardInput/ClipboardInput.tsx
+++ b/src/components/common/inputs/ClipboardInput/ClipboardInput.tsx
@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
import { CopyOutlined } from '@ant-design/icons';
import { SuffixInput } from '../SuffixInput/SuffixInput';
import { BaseInputProps } from '../BaseInput/BaseInput';
-import { notificationController } from 'controllers/notificationController';
+import { useFeedback } from '@app/hooks/useFeedback';
import { BaseTooltip } from '../../BaseTooltip/BaseTooltip';
import { BaseButton } from '../../BaseButton/BaseButton';
@@ -13,14 +13,15 @@ interface ClipboardInputProps extends BaseInputProps {
export const ClipboardInput: React.FC = ({ valueToCopy, ...props }) => {
const { t } = useTranslation();
+ const { notification } = useFeedback();
const handleCopy = useCallback(
() =>
valueToCopy &&
navigator.clipboard.writeText(valueToCopy).then(() => {
- notificationController.info({ message: t('common.copied') });
+ notification.info({ message: t('common.copied') });
}),
- [valueToCopy, t],
+ [valueToCopy, notification, t],
);
return (
diff --git a/src/components/common/inputs/InputNumber/InputNumber.styles.ts b/src/components/common/inputs/InputNumber/InputNumber.styles.ts
index ebc60f50a..81167caee 100644
--- a/src/components/common/inputs/InputNumber/InputNumber.styles.ts
+++ b/src/components/common/inputs/InputNumber/InputNumber.styles.ts
@@ -1,10 +1,15 @@
import { InputNumber as AntInputNumber } from 'antd';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
interface InputNumberProps {
$block?: boolean;
}
export const InputNumber = styled(AntInputNumber)`
- ${(props) => props.$block && 'display: block; width: 100%'};
+ ${(props) =>
+ props.$block &&
+ css`
+ display: block;
+ width: 100%;
+ `}
`;
diff --git a/src/components/common/inputs/InputNumber/InputNumber.tsx b/src/components/common/inputs/InputNumber/InputNumber.tsx
index 1b78770bf..39870cc1f 100644
--- a/src/components/common/inputs/InputNumber/InputNumber.tsx
+++ b/src/components/common/inputs/InputNumber/InputNumber.tsx
@@ -1,8 +1,8 @@
import React from 'react';
-import { InputNumberProps as AntdInputNumberProps } from 'antd';
+import { InputNumberProps as AntInputNumberProps } from 'antd';
import * as S from './InputNumber.styles';
-export interface InputNumberProps extends AntdInputNumberProps {
+export interface InputNumberProps extends AntInputNumberProps {
block?: boolean;
}
diff --git a/src/components/common/inputs/InputPassword/InputPassword.styles.ts b/src/components/common/inputs/InputPassword/InputPassword.styles.ts
index a9a89ef9e..89eaed03a 100644
--- a/src/components/common/inputs/InputPassword/InputPassword.styles.ts
+++ b/src/components/common/inputs/InputPassword/InputPassword.styles.ts
@@ -3,9 +3,10 @@ import { BaseInput } from '../BaseInput/BaseInput';
export const InputPassword = styled(BaseInput.Password)`
.ant-input-password-icon.anticon {
- color: var(--disabled-color);
+ color: ${({ theme }) => theme.disabled};
+
&:hover {
- color: var(--text-main-color);
+ color: ${({ theme }) => theme.textMain};
}
}
`;
diff --git a/src/components/common/inputs/MaskedInput/MaskedInput.styles.ts b/src/components/common/inputs/MaskedInput/MaskedInput.styles.ts
new file mode 100644
index 000000000..6085f5083
--- /dev/null
+++ b/src/components/common/inputs/MaskedInput/MaskedInput.styles.ts
@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+import { MaskedInput as AntMaskedInput } from 'antd-mask-input';
+
+// https://github.com/antoniopresto/antd-mask-input/issues/73
+export const MaskedInput = styled(AntMaskedInput)`
+ font-family: inherit;
+ color: ${({ theme }) => theme.textMain};
+ background-color: ${({ theme }) => theme.background};
+ padding: 11.4px 11px;
+ border: 1px solid ${({ theme }) => theme.borderBase};
+ border-radius: ${({ theme }) => theme.borderRadius};
+
+ &::placeholder {
+ color: ${({ theme }) => theme.inputPlaceholder};
+ }
+`;
diff --git a/src/components/common/inputs/MaskedInput/MaskedInput.tsx b/src/components/common/inputs/MaskedInput/MaskedInput.tsx
new file mode 100644
index 000000000..8c5831724
--- /dev/null
+++ b/src/components/common/inputs/MaskedInput/MaskedInput.tsx
@@ -0,0 +1,10 @@
+import { forwardRef, ComponentPropsWithRef } from 'react';
+import type { InputRef } from 'antd';
+import type { MaskedInput as AntMaskedInput } from 'antd-mask-input';
+import * as S from './MaskedInput.styles';
+
+export type MaskedInputProps = ComponentPropsWithRef;
+
+export const MaskedInput = forwardRef((props, ref) => {
+ return ;
+});
diff --git a/src/components/common/inputs/SearchInput/SearchInput.styles.ts b/src/components/common/inputs/SearchInput/SearchInput.styles.ts
index 553c95448..55bd6491d 100644
--- a/src/components/common/inputs/SearchInput/SearchInput.styles.ts
+++ b/src/components/common/inputs/SearchInput/SearchInput.styles.ts
@@ -1,5 +1,5 @@
import styled from 'styled-components';
-import { FONT_SIZE, FONT_WEIGHT, media } from '@app/styles/themes/constants';
+import { media } from '@app/utils/utils';
import { BaseInput } from '../BaseInput/BaseInput';
import { BaseSpace } from '../../BaseSpace/BaseSpace';
@@ -18,33 +18,39 @@ export const SearchInput = styled(BaseInput.Search)`
}
& input {
- font-weight: 600;
- background-color: var(--background-color);
+ font-weight: ${({ theme }) => theme.fontWeights.semibold};
+ background-color: ${({ theme }) => theme.background};
- @media only screen and ${media.md} {
- font-size: 1rem;
+ @media only screen and (${media('md')}) {
+ font-size: ${({ theme }) => theme.fontSizes.md};
}
&::placeholder {
- font-weight: 500;
+ font-weight: ${({ theme }) => theme.fontWeights.medium};
}
}
.ant-input-group-addon {
min-width: 5.5rem;
- color: var(--primary-color);
- font-weight: ${FONT_WEIGHT.semibold};
- font-size: ${FONT_SIZE.lg};
+ color: ${({ theme }) => theme.primary};
+ font-weight: ${({ theme }) => theme.fontWeights.semibold};
+ font-size: ${({ theme }) => theme.fontSizes.lg};
}
- .ant-input-search-button {
- &.ant-btn .anticon {
- color: var(--primary-color);
+ .ant-input-search-button,
+ .ant-input-search-button:hover {
+ &.ant-btn {
+ font-weight: ${({ theme }) => theme.fontWeights.semibold};
+
+ .anticon {
+ color: ${({ theme }) => theme.primary};
+ }
}
+
width: 100%;
background-color: rgba(1, 80, 154, 0.05);
- border: 1px solid var(--border-color);
- color: var(--primary-color);
+ border: 1px solid ${({ theme }) => theme.border};
+ color: ${({ theme }) => theme.primary};
}
`;
diff --git a/src/components/common/inputs/SuffixInput/SuffixInput.styles.ts b/src/components/common/inputs/SuffixInput/SuffixInput.styles.ts
index eefd7e571..4c879f7eb 100644
--- a/src/components/common/inputs/SuffixInput/SuffixInput.styles.ts
+++ b/src/components/common/inputs/SuffixInput/SuffixInput.styles.ts
@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
interface SuffixProps {
isOpen: boolean;
@@ -9,5 +9,10 @@ export const Suffix = styled.div`
visibility: visible;
opacity: 1;
- ${(props) => !props.isOpen && 'opacity: 0; visibility: hidden'};
+ ${(props) =>
+ !props.isOpen &&
+ css`
+ opacity: 0;
+ visibility: hidden;
+ `}
`;
diff --git a/src/components/common/inputs/VerificationCodeInput/VerificationCodeInput.styles.ts b/src/components/common/inputs/VerificationCodeInput/VerificationCodeInput.styles.ts
index 0341b3ef7..8babd9675 100644
--- a/src/components/common/inputs/VerificationCodeInput/VerificationCodeInput.styles.ts
+++ b/src/components/common/inputs/VerificationCodeInput/VerificationCodeInput.styles.ts
@@ -1,6 +1,6 @@
import styled from 'styled-components';
import VerificationInput from 'react-verification-input';
-import { FONT_SIZE, FONT_WEIGHT, media } from '@app/styles/themes/constants';
+import { media } from '@app/utils/utils';
export const CodeInput = styled(VerificationInput)`
display: flex;
@@ -8,24 +8,24 @@ export const CodeInput = styled(VerificationInput)`
.character {
line-height: 5rem;
- font-size: ${FONT_SIZE.xxl};
- font-weight: ${FONT_WEIGHT.bold};
- color: var(--text-main-color);
- border: 3px solid var(--lightgrey);
+ font-size: ${({ theme }) => theme.fontSizes.xxl};
+ font-weight: ${({ theme }) => theme.fontWeights.bold};
+ color: ${({ theme }) => theme.textMain};
+ border: 3px solid ${({ theme }) => theme.lightgray};
border-radius: 0.625rem;
width: 3.4375rem;
height: 5rem;
}
.character--inactive {
- border: 3px solid var(--lightgrey);
+ border: 3px solid ${({ theme }) => theme.lightgray};
}
.character--selected {
- border: 3px solid var(--primary-color);
+ border: 3px solid ${({ theme }) => theme.primary};
}
- @media only screen and ${media.xs} {
+ @media only screen and (${media('xs')}) {
gap: 0.4375rem;
.character {
width: 2.5625rem;
@@ -33,7 +33,7 @@ export const CodeInput = styled(VerificationInput)`
}
}
- @media only screen and ${media.md} {
+ @media only screen and (${media('md')}) {
gap: 0.625rem;
.character {
width: 3.4375rem;
@@ -41,7 +41,7 @@ export const CodeInput = styled(VerificationInput)`
}
}
- @media only screen and ${media.xl} {
+ @media only screen and (${media('xl')}) {
gap: 0.625rem;
.character {
width: 3.4375rem;
diff --git a/src/components/common/pickers/BaseDatePicker.styles.ts b/src/components/common/pickers/BaseDatePicker.styles.ts
new file mode 100644
index 000000000..e71ba36c2
--- /dev/null
+++ b/src/components/common/pickers/BaseDatePicker.styles.ts
@@ -0,0 +1,25 @@
+import styled, { css } from 'styled-components';
+import { DatePicker as AntDatePicker } from 'antd';
+
+const datePickerSizes = css`
+ &.ant-picker {
+ &.ant-picker-small {
+ padding: 3.1px 7px;
+ }
+ &.ant-picker-large {
+ padding: 17.6px 11px;
+ }
+ }
+`;
+
+export const DatePicker = styled(AntDatePicker)`
+ ${datePickerSizes}
+`;
+
+export const RangePicker = styled(AntDatePicker.RangePicker)`
+ ${datePickerSizes}
+`;
+
+export const TimePicker = styled(AntDatePicker.TimePicker)`
+ ${datePickerSizes}
+`;
diff --git a/src/components/common/pickers/BaseDatePicker.tsx b/src/components/common/pickers/BaseDatePicker.tsx
index e5657a980..23a2a907b 100644
--- a/src/components/common/pickers/BaseDatePicker.tsx
+++ b/src/components/common/pickers/BaseDatePicker.tsx
@@ -1,10 +1,21 @@
import React from 'react';
-import { PickerProps } from 'antd/lib/date-picker/generatePicker';
-import { DayjsDatePicker } from './DayjsDatePicker';
-import { AppDate } from 'constants/Dates';
+import { DatePickerProps } from 'antd';
+import * as S from './BaseDatePicker.styles';
-export type BaseDatePickerProps = PickerProps;
+export type BaseDatePickerProps = DatePickerProps;
-export const BaseDatePicker = React.forwardRef, BaseDatePickerProps>(
- ({ className, ...props }, ref) => ,
+const DatePicker = React.forwardRef, BaseDatePickerProps>(
+ ({ className, ...props }, ref) => ,
);
+
+type DatePickerForwardRef = typeof DatePicker;
+
+interface BaseDatePickerInterface extends DatePickerForwardRef {
+ RangePicker: typeof S.RangePicker;
+ TimePicker: typeof S.TimePicker;
+}
+
+export const BaseDatePicker = DatePicker as BaseDatePickerInterface;
+
+BaseDatePicker.RangePicker = S.RangePicker;
+BaseDatePicker.TimePicker = S.TimePicker;
diff --git a/src/components/common/pickers/DayjsDatePicker.tsx b/src/components/common/pickers/DayjsDatePicker.tsx
deleted file mode 100644
index 2d870f0ab..000000000
--- a/src/components/common/pickers/DayjsDatePicker.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import { AppDate } from 'constants/Dates';
-import dayjsGenerateConfig from 'rc-picker/lib/generate/dayjs';
-import generatePicker from 'antd/es/date-picker/generatePicker';
-import 'antd/es/date-picker/style/index';
-
-export const DayjsDatePicker = generatePicker(dayjsGenerateConfig);
diff --git a/src/components/common/pickers/TimeRangePicker.tsx b/src/components/common/pickers/TimeRangePicker.tsx
index 02fc1ff7a..e8add8785 100644
--- a/src/components/common/pickers/TimeRangePicker.tsx
+++ b/src/components/common/pickers/TimeRangePicker.tsx
@@ -1,5 +1,5 @@
import React, { useMemo } from 'react';
-import { DayjsDatePicker } from '@app/components/common/pickers/DayjsDatePicker';
+import { BaseDatePicker } from '@app/components/common/pickers/BaseDatePicker';
import { AppDate, Dates } from '@app/constants/Dates';
const clearDate = Dates.getToday().hour(0).minute(0).second(0).millisecond(0);
@@ -23,7 +23,7 @@ export const TimeRangePicker: React.FC = ({ timeRange, setTimeR
};
return (
- `
width: ${(props) => props.$width && normalizeProp(props.$width)};
+ box-shadow: ${(props) => props.$shadow && props.theme.boxShadow};
- font-weight: ${FONT_WEIGHT.medium};
-
- box-shadow: ${(props) => props.$shadow && 'var(--box-shadow)'};
+ .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
+ font-weight: ${({ theme }) => theme.fontWeights.medium};
+ }
&.ant-select-borderless {
- background: var(--secondary-background-color);
-
- border-radius: ${BORDER_RADIUS};
+ background: ${({ theme }) => theme.secondaryBackground} !important;
+ border-radius: ${({ theme }) => theme.borderRadius};
}
.ant-select-selection-placeholder {
- font-size: ${FONT_SIZE.xs};
-
- color: var(--text-main-color);
+ font-size: ${({ theme }) => theme.fontSizes.xs};
}
- .ant-select-arrow {
- color: var(--text-main-color);
+ .ant-select-item {
+ min-height: unset;
+ padding-block: 5px;
}
- &.ant-select-multiple.ant-select-sm .ant-select-selection-item {
- height: 0.875rem;
- line-height: ${FONT_SIZE.xs};
- font-size: ${FONT_SIZE.xs};
- margin-top: 0.1875rem;
- margin-bottom: 0.1875rem;
- }
+ &.ant-select-multiple {
+ &.ant-select-disabled .ant-select-selection-item {
+ color: ${({ theme }) => theme.selectionDisabled};
+ border: 1px solid ${({ theme }) => theme.borderBase};
+ }
- &.ant-select-disabled.ant-select:not(.ant-select-customize-input) .ant-select-selector {
- color: var(--disabled-color);
- }
+ .ant-select-selection-item {
+ border: 1px solid ${({ theme }) => theme.split};
+ margin-inline-end: 11px;
+ }
- .ant-select-clear {
- color: var(--disabled-color);
- }
- .ant-select-selection-item-remove {
- color: var(--icon-color);
- &:hover {
- color: var(--icon-hover-color);
+ .ant-select-selector {
+ padding-inline-start: 11px;
}
}
- .ant-select-item-option-disabled {
- color: var(--disabled-color);
- }
`;
diff --git a/src/components/forms/ControlForm/ControlForm.styles.ts b/src/components/forms/ControlForm/ControlForm.styles.ts
index 968ee5aa2..44076b6bc 100644
--- a/src/components/forms/ControlForm/ControlForm.styles.ts
+++ b/src/components/forms/ControlForm/ControlForm.styles.ts
@@ -1,19 +1,18 @@
import styled from 'styled-components';
import { BaseButton } from '@app/components/common/BaseButton/BaseButton';
import { BaseForm } from '@app/components/common/forms/BaseForm/BaseForm';
-import { FONT_SIZE, FONT_WEIGHT } from '@app/styles/themes/constants';
export const UserList = styled(BaseForm.Item)`
- & label {
- font-size: ${FONT_SIZE.md};
- font-weight: ${FONT_WEIGHT.semibold};
+ & .ant-form-item-label label {
+ font-size: ${({ theme }) => theme.fontSizes.md};
+ font-weight: ${({ theme }) => theme.fontWeights.semibold};
}
`;
export const Text = styled.div`
- color: var(--primary-color);
- font-size: ${FONT_SIZE.md};
- font-weight: ${FONT_WEIGHT.semibold};
+ color: ${({ theme }) => theme.primary};
+ font-size: ${({ theme }) => theme.fontSizes.md};
+ font-weight: ${({ theme }) => theme.fontWeights.semibold};
`;
export const List = styled.ul`
@@ -27,12 +26,12 @@ export const ListItem = styled.li`
`;
export const User = styled.div`
- 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};
margin-left: 0.5rem;
`;
export const AddUserButton = styled(BaseButton)`
- margin: 0 0.5rem;
+ margin: 0.5rem 0;
`;
diff --git a/src/components/forms/ControlForm/ControlForm.tsx b/src/components/forms/ControlForm/ControlForm.tsx
index d0566eb1f..a97a7443b 100644
--- a/src/components/forms/ControlForm/ControlForm.tsx
+++ b/src/components/forms/ControlForm/ControlForm.tsx
@@ -2,11 +2,11 @@ import React, { useState } from 'react';
import { SmileOutlined, UserOutlined } from '@ant-design/icons';
import { BaseButtonsForm } from '@app/components/common/forms/BaseButtonsForm/BaseButtonsForm';
import { AddUserFormModal } from './AddUserFormModal';
-import { BaseInput } from '../../common/inputs/BaseInput/BaseInput';
-import { BaseButton } from '../../common/BaseButton/BaseButton';
+import { BaseInput } from '@app/components/common/inputs/BaseInput/BaseInput';
+import { BaseButton } from '@app/components/common/BaseButton/BaseButton';
import { useTranslation } from 'react-i18next';
import * as S from './ControlForm.styles';
-import { notificationController } from '@app/controllers/notificationController';
+import { useFeedback } from '@app/hooks/useFeedback';
import { BaseAvatar } from '@app/components/common/BaseAvatar/BaseAvatar';
const layout = {
@@ -24,6 +24,7 @@ export const ControlForm: React.FC = () => {
const [isFieldsChanged, setFieldsChanged] = useState(false);
const [isLoading, setLoading] = useState(false);
const { t } = useTranslation();
+ const { notification } = useFeedback();
const showUserModal = () => {
setOpen(true);
@@ -38,7 +39,7 @@ export const ControlForm: React.FC = () => {
setTimeout(() => {
setFieldsChanged(false);
setLoading(false);
- notificationController.success({ message: t('common.success') });
+ notification.success({ message: t('common.success') });
console.log(values);
}, 1000);
};
diff --git a/src/components/forms/DynamicForm/DynamicForm.tsx b/src/components/forms/DynamicForm/DynamicForm.tsx
index 7178f9e6e..db45b2cf4 100644
--- a/src/components/forms/DynamicForm/DynamicForm.tsx
+++ b/src/components/forms/DynamicForm/DynamicForm.tsx
@@ -5,7 +5,7 @@ import { BaseButtonsForm } from '@app/components/common/forms/BaseButtonsForm/Ba
import { BaseInput } from '@app/components/common/inputs/BaseInput/BaseInput';
import { BaseSelect, Option } from '@app/components/common/selects/BaseSelect/BaseSelect';
import { BaseButton } from '@app/components/common/BaseButton/BaseButton';
-import { notificationController } from '@app/controllers/notificationController';
+import { useFeedback } from '@app/hooks/useFeedback';
import * as S from './DynamicForm.styles';
import { BaseRow } from '@app/components/common/BaseRow/BaseRow';
import { BaseCol } from '@app/components/common/BaseCol/BaseCol';
@@ -19,6 +19,7 @@ export const DynamicForm: React.FC = () => {
const [isLoading, setLoading] = useState(false);
const [form] = BaseButtonsForm.useForm();
const { t } = useTranslation();
+ const { notification } = useFeedback();
const areas = [
{ label: t('forms.dynamicFormLabels.beijing'), value: 'Beijing' },
@@ -35,7 +36,7 @@ export const DynamicForm: React.FC = () => {
setTimeout(() => {
setLoading(false);
setFieldsChanged(false);
- notificationController.success({ message: t('common.success') });
+ notification.success({ message: t('common.success') });
console.log(values);
}, 1000);
};
@@ -79,7 +80,6 @@ export const DynamicForm: React.FC = () => {
{...field}
label={t('forms.dynamicFormLabels.sight')}
name={[field.name, 'sight']}
- fieldKey={[field.key, 'sight']}
rules={[{ required: true, message: t('forms.dynamicFormLabels.sightError') }]}
>
@@ -98,7 +98,6 @@ export const DynamicForm: React.FC = () => {
{...field}
label={t('forms.dynamicFormLabels.price')}
name={[field.name, 'price']}
- fieldKey={[field.key, 'price']}
rules={[{ required: true, message: t('forms.dynamicFormLabels.priceError') }]}
>
diff --git a/src/components/forms/StepForm/StepForm.styles.ts b/src/components/forms/StepForm/StepForm.styles.ts
index 99a6a55a1..188d06203 100644
--- a/src/components/forms/StepForm/StepForm.styles.ts
+++ b/src/components/forms/StepForm/StepForm.styles.ts
@@ -2,7 +2,6 @@ import styled from 'styled-components';
import { BaseSelect as CommonSelect } from '@app/components/common/selects/BaseSelect/BaseSelect';
import { BaseButton } from '@app/components/common/BaseButton/BaseButton';
import { BaseForm } from '@app/components/common/forms/BaseForm/BaseForm';
-import { FONT_SIZE, FONT_WEIGHT } from '@app/styles/themes/constants';
import { BaseSteps } from '@app/components/common/BaseSteps/BaseSteps';
export const PhoneItem = styled(BaseForm.Item)`
@@ -42,16 +41,16 @@ export const DetailsRow = styled.div`
`;
export const DetailsTitle = styled.div`
- color: var(--text-light-color);
- font-size: ${FONT_SIZE.md};
- font-weight: ${FONT_WEIGHT.semibold};
+ color: ${({ theme }) => theme.textLight};
+ font-size: ${({ theme }) => theme.fontSizes.md};
+ font-weight: ${({ theme }) => theme.fontWeights.semibold};
margin-right: 0.5rem;
`;
export const DetailsValue = styled.div`
- 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};
`;
export const Row = styled.div`
diff --git a/src/components/forms/StepForm/StepForm.tsx b/src/components/forms/StepForm/StepForm.tsx
index b9f697d53..ace4186fc 100644
--- a/src/components/forms/StepForm/StepForm.tsx
+++ b/src/components/forms/StepForm/StepForm.tsx
@@ -6,7 +6,7 @@ import { Step1 } from './Steps/Step1';
import { Step2 } from './Steps/Step2';
import { Step3 } from './Steps/Step3';
import { Step4 } from './Steps/Step4';
-import { notificationController } from '@app/controllers/notificationController';
+import { useFeedback } from '@app/hooks/useFeedback';
import { Dates } from '@app/constants/Dates';
import { mergeBy } from '@app/utils/utils';
import * as S from './StepForm.styles';
@@ -44,6 +44,7 @@ export const StepForm: React.FC = () => {
]);
const [isLoading, setIsLoading] = useState(false);
const { t } = useTranslation();
+ const { notification } = useFeedback();
const formLabels: FormValues = {
login: t('forms.stepFormLabels.login'),
@@ -83,7 +84,7 @@ export const StepForm: React.FC = () => {
const onFinish = () => {
setIsLoading(true);
setTimeout(() => {
- notificationController.success({ message: t('common.success') });
+ notification.success({ message: t('common.success') });
setIsLoading(false);
setCurrent(0);
}, 1500);
diff --git a/src/components/forms/ValidationForm/ValidationForm.tsx b/src/components/forms/ValidationForm/ValidationForm.tsx
index 82cb1f318..318db9ae9 100644
--- a/src/components/forms/ValidationForm/ValidationForm.tsx
+++ b/src/components/forms/ValidationForm/ValidationForm.tsx
@@ -10,7 +10,7 @@ import { BaseRadio } from '@app/components/common/BaseRadio/BaseRadio';
import { BaseSlider } from '@app/components/common/BaseSlider/BaseSlider';
import { BaseUpload } from '@app/components/common/BaseUpload/BaseUpload';
import { BaseRate } from '@app/components/common/BaseRate/BaseRate';
-import { notificationController } from '@app/controllers/notificationController';
+import { useFeedback } from '@app/hooks/useFeedback';
import { BaseRow } from '@app/components/common/BaseRow/BaseRow';
import { BaseCol } from '@app/components/common/BaseCol/BaseCol';
import { BaseCheckbox } from '@app/components/common/BaseCheckbox/BaseCheckbox';
@@ -31,13 +31,14 @@ export const ValidationForm: React.FC = () => {
const [isFieldsChanged, setFieldsChanged] = useState(false);
const [isLoading, setLoading] = useState(false);
const { t } = useTranslation();
+ const { notification } = useFeedback();
const onFinish = async (values = {}) => {
setLoading(true);
setTimeout(() => {
setLoading(false);
setFieldsChanged(false);
- notificationController.success({ message: t('common.success') });
+ notification.success({ message: t('common.success') });
console.log(values);
}, 1000);
};
diff --git a/src/components/header/Header.styles.ts b/src/components/header/Header.styles.ts
index 5ee8c5ebf..06f31f927 100644
--- a/src/components/header/Header.styles.ts
+++ b/src/components/header/Header.styles.ts
@@ -1,19 +1,19 @@
import styled, { css } from 'styled-components';
import { BurgerIcon } from '@app/components/common/Burger/BurgerIcon';
import { GitHubButton } from '@app/components/header/components/GithubButton/GitHubButton';
-import { LAYOUT, media } from '@app/styles/themes/constants';
import { BaseCollapse } from '../common/BaseCollapse/BaseCollapse';
import { BaseCol } from '../common/BaseCol/BaseCol';
+import { media } from '@app/utils/utils';
export const HeaderActionWrapper = styled.div`
cursor: pointer;
- & > .ant-btn > span[role='img'],
+ & > .ant-btn span[role='img'],
.ant-badge {
- font-size: 1.25rem;
+ font-size: ${({ theme }) => theme.fontSizes.xl};
- @media only screen and ${media.md} {
- font-size: 1.625rem;
+ @media only screen and (${media('md')}) {
+ font-size: ${({ theme }) => theme.fontSizes.xxxl};
}
}
@@ -24,13 +24,12 @@ export const HeaderActionWrapper = styled.div`
export const DropdownCollapse = styled(BaseCollapse)`
& > .ant-collapse-item > .ant-collapse-header {
- font-weight: 600;
- font-size: 0.875rem;
+ font-weight: ${({ theme }) => theme.fontWeights.semibold};
+ font-size: ${({ theme }) => theme.fontSizes.xs};
+ color: ${({ theme }) => theme.primary};
- color: var(--primary-color);
-
- @media only screen and ${media.md} {
- font-size: 1rem;
+ @media only screen and (${media('md')}) {
+ font-size: ${({ theme }) => theme.fontSizes.md};
}
}
@@ -52,17 +51,11 @@ export const MobileBurger = styled(BurgerIcon)`
width: 1.75rem;
height: 1.75rem;
margin-right: -0.5rem;
- color: var(--text-main-color);
-
- ${(props) =>
- props.isCross &&
- css`
- color: var(--text-secondary-color);
- `};
+ color: ${(props) => (props.isCross ? props.theme.textSecondary : props.theme.textMain)};
`;
export const SearchColumn = styled(BaseCol)`
- padding: ${LAYOUT.desktop.paddingVertical} ${LAYOUT.desktop.paddingHorizontal};
+ padding: ${({ theme }) => `${theme.paddings.md} ${theme.paddings.xl}`};
`;
interface ProfileColumn {
@@ -70,20 +63,22 @@ interface ProfileColumn {
}
export const ProfileColumn = styled(BaseCol)`
- @media only screen and ${media.md} {
+ @media only screen and (${media('md')}) {
${(props) =>
- props?.$isTwoColumnsLayout &&
+ props.$isTwoColumnsLayout &&
css`
- background-color: var(--sider-background-color);
- padding: ${LAYOUT.desktop.paddingVertical} ${LAYOUT.desktop.paddingHorizontal};
+ background-color: ${props.theme.siderBackground};
+ padding: ${({ theme }) => `${theme.paddings.md} ${theme.paddings.xl}`};
`}
}
`;
export const GHButton = styled(GitHubButton)`
- display: none;
+ &.ant-btn {
+ display: none;
- @media only screen and ${media.lg} {
- display: block;
+ @media only screen and (${media('lg')}) {
+ display: flex;
+ }
}
`;
diff --git a/src/components/header/components/GithubButton/GitHubButton.styles.ts b/src/components/header/components/GithubButton/GitHubButton.styles.ts
new file mode 100644
index 000000000..b9e4c2406
--- /dev/null
+++ b/src/components/header/components/GithubButton/GitHubButton.styles.ts
@@ -0,0 +1,31 @@
+import { GithubOutlined } from '@ant-design/icons';
+import styled from 'styled-components';
+import { BaseButton } from '@app/components/common/BaseButton/BaseButton';
+
+interface Dark {
+ $isDark: boolean;
+}
+
+export const Button = styled(BaseButton)`
+ color: ${(props) => (props.$isDark ? props.theme.white : props.theme.black)};
+ background: ${(props) => (props.$isDark ? props.theme.black : props.theme.white)};
+ border-radius: 50px;
+ padding-top: 0;
+ padding-bottom: 0;
+ gap: 0;
+ align-items: center;
+
+ &.ant-btn-default:not(:disabled) {
+ &:hover,
+ &:active,
+ &:focus {
+ color: ${(props) => (props.$isDark ? props.theme.black : props.theme.white)};
+ background: ${(props) => (props.$isDark ? props.theme.white : props.theme.black)};
+ }
+ }
+`;
+
+export const GithubIcon = styled(GithubOutlined)`
+ font-size: ${({ theme }) => theme.fontSizes.xxl};
+ vertical-align: middle;
+`;
diff --git a/src/components/header/components/GithubButton/GitHubButton.tsx b/src/components/header/components/GithubButton/GitHubButton.tsx
index 5540c6fb4..73ac0eacf 100644
--- a/src/components/header/components/GithubButton/GitHubButton.tsx
+++ b/src/components/header/components/GithubButton/GitHubButton.tsx
@@ -1,45 +1,20 @@
import React from 'react';
-import { GithubOutlined } from '@ant-design/icons';
-import styled from 'styled-components';
import { useAppSelector } from '@app/hooks/reduxHooks';
-import { BASE_COLORS } from '@app/styles/themes/constants';
-import { BaseButton as BaseButton } from '@app/components/common/BaseButton/BaseButton';
+import * as S from './GitHubButton.styles';
export const GitHubButton: React.FC = (props) => {
const theme = useAppSelector((state) => state.theme.theme);
return (
- }
+ icon={}
target="_blank"
$isDark={theme === 'dark'}
{...props}
>
GitHub
-
+
);
};
-
-const Button = styled(BaseButton)<{ $isDark: boolean }>`
- color: ${(props) => BASE_COLORS[props.$isDark ? 'white' : 'black']};
- background: ${(props) => BASE_COLORS[props.$isDark ? 'black' : 'white']};
- border-radius: 50px;
- padding-top: 0;
- padding-bottom: 0;
- display: flex;
- align-items: center;
-
- &:hover,
- &:active,
- &:focus {
- color: ${(props) => BASE_COLORS[props.$isDark ? 'black' : 'white']};
- background: ${(props) => BASE_COLORS[props.$isDark ? 'white' : 'black']};
- }
-`;
-
-const GithubIcon = styled(GithubOutlined)`
- font-size: 1.5rem;
- vertical-align: middle;
-`;
diff --git a/src/components/header/components/HeaderFullscreen/HeaderFullscreen.tsx b/src/components/header/components/HeaderFullscreen/HeaderFullscreen.tsx
index ecbce050a..bed9c1ce8 100644
--- a/src/components/header/components/HeaderFullscreen/HeaderFullscreen.tsx
+++ b/src/components/header/components/HeaderFullscreen/HeaderFullscreen.tsx
@@ -16,7 +16,8 @@ export const HeaderFullscreen: React.FC = () => {
{(isFullscreen) => (
: }
/>
diff --git a/src/components/header/components/HeaderSearch/HeaderSearch.styles.ts b/src/components/header/components/HeaderSearch/HeaderSearch.styles.ts
index 4c0569898..38d33ef22 100644
--- a/src/components/header/components/HeaderSearch/HeaderSearch.styles.ts
+++ b/src/components/header/components/HeaderSearch/HeaderSearch.styles.ts
@@ -3,15 +3,15 @@ import { SearchOutlined } from '@ant-design/icons';
import { BaseModal } from '@app/components/common/BaseModal/BaseModal';
import { BaseButton } from '@app/components/common/BaseButton/BaseButton';
import { SearchInput } from 'components/common/inputs/SearchInput/SearchInput';
-import { BORDER_RADIUS, media } from '@app/styles/themes/constants';
+import { media } from '@app/utils/utils';
export const SearchIcon = styled(SearchOutlined)`
&.anticon.anticon-search {
display: block;
- font-size: 1.25rem;
+ font-size: ${({ theme }) => theme.fontSizes.xl};
- @media only screen and ${media.md} {
- font-size: 1.625rem;
+ @media only screen and (${media('md')}) {
+ font-size: ${({ theme }) => theme.fontSizes.xxxl};
}
}
`;
@@ -21,7 +21,7 @@ export const InputSearch = styled(SearchInput)`
display: none;
}
- @media only screen and ${media.md} {
+ @media only screen and (${media('md')}) {
.ant-input-group .ant-input-affix-wrapper:not(:last-child) {
border-radius: 3.125rem;
border: 0;
@@ -31,7 +31,7 @@ export const InputSearch = styled(SearchInput)`
`;
export const SearchModal = styled(BaseModal)`
- border-radius: ${BORDER_RADIUS};
+ border-radius: ${({ theme }) => theme.borderRadius};
& .ant-modal-body {
padding: 0;
diff --git a/src/components/header/components/HeaderSearch/HeaderSearch.tsx b/src/components/header/components/HeaderSearch/HeaderSearch.tsx
index bb415642f..cb1ad568c 100644
--- a/src/components/header/components/HeaderSearch/HeaderSearch.tsx
+++ b/src/components/header/components/HeaderSearch/HeaderSearch.tsx
@@ -45,7 +45,8 @@ export const HeaderSearch: React.FC = () => {
{mobileOnly && (
<>
setModalOpen(true)} />}
/>
{
}
- onOpenChange={setOpened}
+ afterOpenChange={setOpened}
>
diff --git a/src/components/header/components/notificationsDropdown/NotificationsOverlay/NotificationsOverlay.styles.ts b/src/components/header/components/notificationsDropdown/NotificationsOverlay/NotificationsOverlay.styles.ts
index 1fe0366c7..db901d3f3 100644
--- a/src/components/header/components/notificationsDropdown/NotificationsOverlay/NotificationsOverlay.styles.ts
+++ b/src/components/header/components/notificationsDropdown/NotificationsOverlay/NotificationsOverlay.styles.ts
@@ -1,13 +1,13 @@
import styled from 'styled-components';
import { BaseButton } from '@app/components/common/BaseButton/BaseButton';
-import { media } from '@app/styles/themes/constants';
+import { media } from '@app/utils/utils';
import { BaseDivider } from '@app/components/common/BaseDivider/BaseDivider';
import { BaseTypography } from '@app/components/common/BaseTypography/BaseTypography';
export const NoticesOverlayMenu = styled.div`
max-width: 15rem;
- @media only screen and ${media.md} {
+ @media only screen and (${media('md')}) {
max-width: 25rem;
}
`;
@@ -19,7 +19,7 @@ export const SplitDivider = styled(BaseDivider)`
export const LinkBtn = styled(BaseButton)`
&.ant-btn {
padding: 0;
- font-size: 0.875rem;
+ font-size: ${({ theme }) => theme.fontSizes.xs};
height: unset;
line-height: unset;
}
diff --git a/src/components/header/components/notificationsDropdown/NotificationsOverlay/NotificationsOverlay.tsx b/src/components/header/components/notificationsDropdown/NotificationsOverlay/NotificationsOverlay.tsx
index 56373b76b..d192bac3a 100644
--- a/src/components/header/components/notificationsDropdown/NotificationsOverlay/NotificationsOverlay.tsx
+++ b/src/components/header/components/notificationsDropdown/NotificationsOverlay/NotificationsOverlay.tsx
@@ -69,7 +69,7 @@ export const NotificationsOverlay: React.FC = ({
{notifications.length > 0 && (
- setNotifications([])}>
+ setNotifications([])}>
{t('header.notifications.readAll')}
diff --git a/src/components/header/components/profileDropdown/ProfileDropdown/ProfileDropdown.styles.ts b/src/components/header/components/profileDropdown/ProfileDropdown/ProfileDropdown.styles.ts
index 1ef59568a..6c86a8584 100644
--- a/src/components/header/components/profileDropdown/ProfileDropdown/ProfileDropdown.styles.ts
+++ b/src/components/header/components/profileDropdown/ProfileDropdown/ProfileDropdown.styles.ts
@@ -1,21 +1,21 @@
import { DownOutlined } from '@ant-design/icons';
-import { media } from '@app/styles/themes/constants';
+import { media } from '@app/utils/utils';
import styled from 'styled-components';
-import { HeaderActionWrapper } from '../../../Header.styles';
+import { HeaderActionWrapper } from '@app/components/header/Header.styles';
export const ProfileDropdownHeader = styled(HeaderActionWrapper)`
cursor: pointer;
- @media only screen and ${media.md} {
+ @media only screen and (${media('md')}) {
border-radius: 50px;
padding: 0.3125rem 0.2rem;
}
`;
export const DownArrow = styled(DownOutlined)`
- color: var(--text-secondary-color);
+ color: ${({ theme }) => theme.textSecondary};
- @media only screen and ${media.md} {
- color: var(--text-main-color);
+ @media only screen and (${media('md')}) {
+ color: ${({ theme }) => theme.textMain};
}
`;
diff --git a/src/components/header/components/profileDropdown/ProfileOverlay/ProfileOverlay.styles.ts b/src/components/header/components/profileDropdown/ProfileOverlay/ProfileOverlay.styles.ts
index d10c67cd1..ed565c454 100644
--- a/src/components/header/components/profileDropdown/ProfileOverlay/ProfileOverlay.styles.ts
+++ b/src/components/header/components/profileDropdown/ProfileOverlay/ProfileOverlay.styles.ts
@@ -1,5 +1,5 @@
import styled from 'styled-components';
-import { media } from '@app/styles/themes/constants';
+import { media } from '@app/utils/utils';
import { BaseTypography } from '@app/components/common/BaseTypography/BaseTypography';
import { BaseDivider } from '@app/components/common/BaseDivider/BaseDivider';
@@ -7,16 +7,16 @@ export const Text = styled(BaseTypography.Text)`
display: flex;
align-items: center;
justify-content: center;
- height: 50px;
- font-size: 0.875rem;
- font-weight: 600;
+ height: ${({ theme }) => theme.heights.md};
+ font-size: ${({ theme }) => theme.fontSizes.xs};
+ font-weight: ${({ theme }) => theme.fontWeights.semibold};
& > a {
display: block;
}
- @media only screen and ${media.md} {
- font-size: 1rem;
+ @media only screen and (${media('md')}) {
+ font-size: ${({ theme }) => theme.fontSizes.md};
}
`;
diff --git a/src/components/header/components/searchDropdown/SearchDropdown.styles.ts b/src/components/header/components/searchDropdown/SearchDropdown.styles.ts
new file mode 100644
index 000000000..a782e2a95
--- /dev/null
+++ b/src/components/header/components/searchDropdown/SearchDropdown.styles.ts
@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+import { BasePopover } from '@app/components/common/BasePopover/BasePopover';
+import { media, mediaRange } from '@app/utils/utils';
+
+export const Popover = styled(BasePopover)`
+ .ant-popover {
+ box-shadow: ${({ theme }) => theme.boxShadow};
+
+ @media only screen and (${mediaRange('xs', 'md')}) {
+ width: calc(100vw - 16px);
+ max-width: 600px;
+ }
+
+ @media only screen and (${media('md')}) {
+ width: 100%;
+ }
+ }
+`;
diff --git a/src/components/header/components/searchDropdown/SearchDropdown.tsx b/src/components/header/components/searchDropdown/SearchDropdown.tsx
index 646c08fa4..560527287 100644
--- a/src/components/header/components/searchDropdown/SearchDropdown.tsx
+++ b/src/components/header/components/searchDropdown/SearchDropdown.tsx
@@ -5,7 +5,7 @@ import { HeaderActionWrapper } from '@app/components/header/Header.styles';
import { CategoryComponents } from '@app/components/header/components/HeaderSearch/HeaderSearch';
import { Btn, InputSearch } from '../HeaderSearch/HeaderSearch.styles';
import { useTranslation } from 'react-i18next';
-import { BasePopover } from '@app/components/common/BasePopover/BasePopover';
+import * as S from './SearchDropdown.styles';
interface SearchOverlayProps {
query: string;
@@ -35,9 +35,8 @@ export const SearchDropdown: React.FC = ({
return (
<>
- }
open={isOverlayOpen}
getPopupContainer={() => ref.current}
@@ -50,7 +49,8 @@ export const SearchDropdown: React.FC = ({
filter={
}
onClick={() => setFilterOpen(!isFilterOpen)}
@@ -62,7 +62,7 @@ export const SearchDropdown: React.FC = ({
/>
-
+
>
);
};
diff --git a/src/components/header/components/searchDropdown/searchOverlay/SearchFilter/SearchFilter.styles.ts b/src/components/header/components/searchDropdown/searchOverlay/SearchFilter/SearchFilter.styles.ts
index 3aa045a95..91e2a1660 100644
--- a/src/components/header/components/searchDropdown/searchOverlay/SearchFilter/SearchFilter.styles.ts
+++ b/src/components/header/components/searchDropdown/searchOverlay/SearchFilter/SearchFilter.styles.ts
@@ -1,5 +1,5 @@
import { BaseCheckbox } from '@app/components/common/BaseCheckbox/BaseCheckbox';
-import { media } from '@app/styles/themes/constants';
+import { media } from '@app/utils/utils';
import styled, { css } from 'styled-components';
interface FilterWrapperProps {
@@ -25,9 +25,9 @@ export const FilterWrapper = styled.div`
`;
export const CheckBox = styled(BaseCheckbox)`
- font-size: 0.75rem;
+ font-size: ${({ theme }) => theme.fontSizes.xxs};
- @media only screen and ${media.md} {
- font-size: 0.875rem;
+ @media only screen and (${media('md')}) {
+ font-size: ${({ theme }) => theme.fontSizes.xs};
}
`;
diff --git a/src/components/header/components/searchDropdown/searchOverlay/SearchResults/SearchResults.styles.ts b/src/components/header/components/searchDropdown/searchOverlay/SearchResults/SearchResults.styles.ts
index cdfb6ed95..09a5f63f1 100644
--- a/src/components/header/components/searchDropdown/searchOverlay/SearchResults/SearchResults.styles.ts
+++ b/src/components/header/components/searchDropdown/searchOverlay/SearchResults/SearchResults.styles.ts
@@ -1,19 +1,20 @@
import { BaseTypography } from '@app/components/common/BaseTypography/BaseTypography';
-import { media } from '@app/styles/themes/constants';
+import { media } from '@app/utils/utils';
import styled from 'styled-components';
export const SearchResultsWrapper = styled.div`
& > div {
- font-size: 0.875rem;
+ .ant-typography {
+ font-size: ${({ theme }) => theme.fontSizes.xs};
+ }
& .ant-list-header {
- font-size: 0.75rem;
- padding-bottom: 6px;
-
- color: var(--primary-color);
+ font-size: ${({ theme }) => theme.fontSizes.xxs};
+ padding-bottom: 0.375rem;
+ color: ${({ theme }) => theme.primary};
- @media only screen and ${media.md} {
- font-size: 0.875rem;
+ @media only screen and (${media('md')}) {
+ font-size: ${({ theme }) => theme.fontSizes.xs};
}
}
@@ -24,7 +25,7 @@ export const SearchResultsWrapper = styled.div`
`;
export const Text = styled(BaseTypography.Text)`
- color: var(--text-main-color);
+ color: ${({ theme }) => theme.textMain};
&:hover {
text-decoration: underline;
diff --git a/src/components/header/components/settingsDropdown/SettingsDropdown.tsx b/src/components/header/components/settingsDropdown/SettingsDropdown.tsx
index 72d95db11..3f3a345a7 100644
--- a/src/components/header/components/settingsDropdown/SettingsDropdown.tsx
+++ b/src/components/header/components/settingsDropdown/SettingsDropdown.tsx
@@ -9,9 +9,9 @@ export const SettingsDropdown: React.FC = () => {
const [isOpened, setOpened] = useState(false);
return (
- } trigger="click" onOpenChange={setOpened}>
+ } trigger="click" afterOpenChange={setOpened}>
- } />
+ } />
);
diff --git a/src/components/header/components/settingsDropdown/settingsOverlay/SettingsOverlay/SettingsOverlay.styles.ts b/src/components/header/components/settingsDropdown/settingsOverlay/SettingsOverlay/SettingsOverlay.styles.ts
index ebbce6737..7d9177d84 100644
--- a/src/components/header/components/settingsDropdown/settingsOverlay/SettingsOverlay/SettingsOverlay.styles.ts
+++ b/src/components/header/components/settingsDropdown/settingsOverlay/SettingsOverlay/SettingsOverlay.styles.ts
@@ -6,7 +6,7 @@ export const SettingsOverlayMenu = styled.div`
`;
export const RadioBtn = styled(BaseRadio)`
- font-size: 0.875rem;
+ font-size: ${({ theme }) => theme.fontSizes.xs};
`;
export const PwaInstallWrapper = styled.div`
diff --git a/src/components/header/components/settingsDropdown/settingsOverlay/SettingsOverlay/SettingsOverlay.tsx b/src/components/header/components/settingsDropdown/settingsOverlay/SettingsOverlay/SettingsOverlay.tsx
index 2fe2f2570..8a887671c 100644
--- a/src/components/header/components/settingsDropdown/settingsOverlay/SettingsOverlay/SettingsOverlay.tsx
+++ b/src/components/header/components/settingsDropdown/settingsOverlay/SettingsOverlay/SettingsOverlay.tsx
@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { useMemo } from 'react';
+import { BaseCollapseProps } from '@app/components/common/BaseCollapse/BaseCollapse';
import { DropdownCollapse } from '@app/components/header/Header.styles';
import { useTranslation } from 'react-i18next';
import { LanguagePicker } from '../LanguagePicker/LanguagePicker';
@@ -13,19 +14,30 @@ export const SettingsOverlay: React.FC = ({ ...props }) => {
const { isPWASupported, event } = useAppSelector((state) => state.pwa);
+ const items: BaseCollapseProps['items'] = useMemo(
+ () => [
+ {
+ label: t('header.changeLanguage'),
+ key: 'languagePicker',
+ children: ,
+ },
+ {
+ label: t('header.changeTheme'),
+ key: 'themePicker',
+ children: ,
+ },
+ {
+ label: t('header.nightMode.title'),
+ key: 'nightMode',
+ children: ,
+ },
+ ],
+ [t],
+ );
+
return (
-
-
-
-
-
-
-
-
-
-
-
+
{isPWASupported && (
event && (event as BeforeInstallPromptEvent).prompt()}>
diff --git a/src/components/header/dropdowns/settingsDropdown/settingsOverlay/nightModeSettings/NightTimeSlider/NightTimeSlider.styles.ts b/src/components/header/dropdowns/settingsDropdown/settingsOverlay/nightModeSettings/NightTimeSlider/NightTimeSlider.styles.ts
index 3c17d837e..659a266e8 100644
--- a/src/components/header/dropdowns/settingsDropdown/settingsOverlay/nightModeSettings/NightTimeSlider/NightTimeSlider.styles.ts
+++ b/src/components/header/dropdowns/settingsDropdown/settingsOverlay/nightModeSettings/NightTimeSlider/NightTimeSlider.styles.ts
@@ -1,6 +1,5 @@
import styled from 'styled-components';
import { InputNumber } from '@app/components/common/inputs/InputNumber/InputNumber';
-import { FONT_SIZE, FONT_WEIGHT } from '@app/styles/themes/constants';
import { BaseTypography } from '@app/components/common/BaseTypography/BaseTypography';
const pathWidth = 22;
@@ -12,13 +11,13 @@ export const Wrapper = styled.div`
--round-slider-handle-cursor: grabbing;
--round-slider-path-width: ${pathWidth}px;
- --round-slider-bar-color: var(--primary-color);
+ --round-slider-bar-color: ${({ theme }) => theme.primary};
--round-slider-path-color: #def0ff;
- --round-slider-handle-color: #fff;
- --round-slider-handle-border-color: var(--primary-color);
+ --round-slider-handle-color: ${({ theme }) => theme.white};
+ --round-slider-handle-border-color: ${({ theme }) => theme.primary};
round-slider {
- z-index: 1; // To make it under InnerWrapper
+ z-index: 1; /* To make it under InnerWrapper */
}
`;
@@ -44,11 +43,11 @@ export const BackgroundWrapper = styled(InnerWrapper)`
export const ShadowWrapper = styled(InnerWrapper)`
box-shadow: 0px -4px 16px rgba(1, 80, 154, 0.1), 0px 4px 16px rgba(1, 80, 154, 0.1);
- z-index: 2; // To make it under slider
+ z-index: 2; /* To make it under slider */
`;
export const Text = styled(BaseTypography.Text)`
- font-size: ${FONT_SIZE.xs};
+ font-size: ${({ theme }) => theme.fontSizes.xs};
`;
export const TopText = styled(Text)`
@@ -84,10 +83,8 @@ export const CenterText = styled(BaseTypography.Text)`
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-
- font-size: ${FONT_SIZE.xl};
-
- font-weight: ${FONT_WEIGHT.semibold};
+ font-size: ${({ theme }) => theme.fontSizes.xl};
+ font-weight: ${({ theme }) => theme.fontWeights.semibold};
`;
export const TimeRow = styled.div`
@@ -106,7 +103,6 @@ export const TimeWrapper = styled.div`
width: 50%;
border-radius: 14px;
padding: 1rem;
-
box-shadow: ${(props) => props.theme.boxShadow};
`;
@@ -114,6 +110,6 @@ export const NumberInput = styled(InputNumber)`
width: unset;
input {
- font-weight: ${FONT_WEIGHT.semibold};
+ font-weight: ${({ theme }) => theme.fontWeights.semibold};
}
`;
diff --git a/src/components/header/dropdowns/settingsDropdown/settingsOverlay/nightModeSettings/NightTimeSlider/NightTimeSlider.tsx b/src/components/header/dropdowns/settingsDropdown/settingsOverlay/nightModeSettings/NightTimeSlider/NightTimeSlider.tsx
index 6a87972bf..4fbdcadf7 100644
--- a/src/components/header/dropdowns/settingsDropdown/settingsOverlay/nightModeSettings/NightTimeSlider/NightTimeSlider.tsx
+++ b/src/components/header/dropdowns/settingsDropdown/settingsOverlay/nightModeSettings/NightTimeSlider/NightTimeSlider.tsx
@@ -11,9 +11,14 @@ interface NightTimeSliderProps {
setNightTime: (nightTime: number[]) => void;
}
-const RoundSliderComponent = createComponent(React, 'round-slider', RoundSlider, {
- onValueChanged: 'value-changed',
- onChange: 'value-changing',
+const RoundSliderComponent = createComponent({
+ react: React,
+ tagName: 'round-slider',
+ elementClass: RoundSlider,
+ events: {
+ onValueChanged: 'value-changed',
+ onChange: 'value-changing',
+ },
});
// eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/src/components/layouts/AuthLayout/AuthLayout.styles.ts b/src/components/layouts/AuthLayout/AuthLayout.styles.ts
index 1ca60b13b..84cb681bf 100644
--- a/src/components/layouts/AuthLayout/AuthLayout.styles.ts
+++ b/src/components/layouts/AuthLayout/AuthLayout.styles.ts
@@ -4,7 +4,7 @@ import { BaseForm } from '@app/components/common/forms/BaseForm/BaseForm';
import { BaseInput as CommonInput } from '@app/components/common/inputs/BaseInput/BaseInput';
import { InputPassword as CommonInputPassword } from '@app/components/common/inputs/InputPassword/InputPassword';
import loginBackground from '@app/assets/images/login-bg.webp';
-import { BORDER_RADIUS, FONT_SIZE, FONT_WEIGHT, media } from '@app/styles/themes/constants';
+import { media } from '@app/utils/utils';
import { BaseCheckbox } from '@app/components/common/BaseCheckbox/BaseCheckbox';
import { BaseButton } from '@app/components/common/BaseButton/BaseButton';
@@ -36,16 +36,16 @@ export const FormWrapper = styled.div`
padding: 2.5rem;
width: 31.75rem;
overflow: auto;
- background-color: rgba(var(--background-rgb-color), 0.93);
- border-radius: ${BORDER_RADIUS};
+ background-color: rgba(${({ theme }) => theme.rgb.background}, 0.93);
+ border-radius: ${({ theme }) => theme.borderRadius};
- @media only screen and ${media.xs} {
+ @media only screen and (${media('xs')}) {
padding: 2.5rem 1.25rem;
width: 20.75rem;
max-height: calc(100vh - 3rem);
}
- @media only screen and ${media.md} {
+ @media only screen and (${media('md')}) {
padding: 2.5rem;
width: 31.75rem;
max-height: calc(100vh - 3rem);
@@ -53,26 +53,26 @@ export const FormWrapper = styled.div`
`;
export const FormTitle = styled.div`
- color: var(--primary-color);
+ color: ${({ theme }) => theme.primary};
- @media only screen and ${media.xs} {
+ @media only screen and (${media('xs')}) {
margin-bottom: 0.625rem;
- font-size: ${FONT_SIZE.lg};
- font-weight: ${FONT_WEIGHT.bold};
+ font-size: ${({ theme }) => theme.fontSizes.lg};
+ font-weight: ${({ theme }) => theme.fontWeights.bold};
line-height: 1.5625rem;
}
- @media only screen and ${media.md} {
+ @media only screen and (${media('md')}) {
margin-bottom: 0.875rem;
- font-size: ${FONT_SIZE.xxl};
- font-weight: ${FONT_WEIGHT.bold};
+ font-size: ${({ theme }) => theme.fontSizes.xxl};
+ font-weight: ${({ theme }) => theme.fontWeights.bold};
line-height: 1.9375rem;
}
- @media only screen and ${media.xl} {
+ @media only screen and (${media('xl')}) {
margin-bottom: 0.9375rem;
- font-size: ${FONT_SIZE.xxxl};
- font-weight: ${FONT_WEIGHT.extraBold};
+ font-size: ${({ theme }) => theme.fontSizes.xxxl};
+ font-weight: ${({ theme }) => theme.fontWeights.extraBold};
line-height: 2.125rem;
}
`;
@@ -93,17 +93,17 @@ export const FormCheckbox = styled(BaseCheckbox)`
export const FormItem = styled(BaseForm.Item)`
margin-bottom: 0.75rem;
+
& .ant-form-item-control-input {
- min-height: 3.125rem;
+ min-height: ${({ theme }) => theme.heights.md};
}
& .ant-form-item-explain-error {
- font-size: ${FONT_SIZE.xs};
+ font-size: ${({ theme }) => theme.fontSizes.xs};
}
- & label {
- color: var(--primary-color);
- font-size: ${FONT_SIZE.xs};
+ & .ant-form-item-label label {
+ font-size: ${({ theme }) => theme.fontSizes.xs};
line-height: 1.25rem;
}
@@ -113,7 +113,7 @@ export const FormItem = styled(BaseForm.Item)`
`;
export const FormInput = styled(CommonInput)`
- color: var(--text-main-color);
+ color: ${({ theme }) => theme.textMain};
background: transparent;
& input.ant-input {
@@ -122,7 +122,7 @@ export const FormInput = styled(CommonInput)`
`;
export const FormInputPassword = styled(CommonInputPassword)`
- color: var(--text-main-color);
+ color: ${({ theme }) => theme.textMain};
background: transparent;
& input.ant-input {
@@ -137,27 +137,27 @@ export const ActionsWrapper = styled.div`
`;
export const Text = styled.span`
- 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};
`;
export const LinkText = styled(Text)`
text-decoration: underline;
- color: var(--primary-color);
+ color: ${({ theme }) => theme.primary};
`;
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%;
`;
export const SocialButton = styled(BaseButton)`
- font-size: ${FONT_SIZE.md};
- font-weight: ${FONT_WEIGHT.semibold};
- color: var(--primary-color);
- border: 1px solid var(--primary-color);
+ font-size: ${({ theme }) => theme.fontSizes.md};
+ font-weight: ${({ theme }) => theme.fontWeights.semibold};
+ color: ${({ theme }) => theme.primary};
+ border: 1px solid ${({ theme }) => theme.primary};
width: 100%;
margin-top: 1rem;
display: flex;
@@ -172,13 +172,13 @@ export const FooterWrapper = styled.div`
`;
export const BackIcon = styled(LeftOutlined)`
- font-size: 0.75rem;
+ font-size: ${({ theme }) => theme.fontSizes.xxs};
margin-right: 0.75rem;
`;
export const BackWrapper = styled.div`
- font-size: ${FONT_SIZE.md};
- font-weight: ${FONT_WEIGHT.semibold};
+ font-size: ${({ theme }) => theme.fontSizes.md};
+ font-weight: ${({ theme }) => theme.fontWeights.semibold};
display: flex;
align-items: center;
cursor: pointer;
@@ -188,11 +188,12 @@ export const BackWrapper = styled.div`
export const SocialIconWrapper = styled.div`
display: flex;
margin-right: 0.8125rem;
- @media only screen and ${media.xs} {
+
+ @media only screen and (${media('xs')}) {
margin-right: 0.625rem;
}
- @media only screen and ${media.md} {
+ @media only screen and (${media('md')}) {
margin-right: 0.8125rem;
}
`;
diff --git a/src/components/layouts/main/MainContent/MainContent.tsx b/src/components/layouts/main/MainContent/MainContent.tsx
index 9f23c01c3..abc8649e7 100644
--- a/src/components/layouts/main/MainContent/MainContent.tsx
+++ b/src/components/layouts/main/MainContent/MainContent.tsx
@@ -1,23 +1,23 @@
import styled, { css } from 'styled-components';
-import { LAYOUT, media } from '@app/styles/themes/constants';
import { BaseLayout } from '@app/components/common/BaseLayout/BaseLayout';
+import { media } from '@app/utils/utils';
interface HeaderProps {
$isTwoColumnsLayout: boolean;
}
export default styled(BaseLayout.Content)`
- padding: ${LAYOUT.mobile.paddingVertical} ${LAYOUT.mobile.paddingHorizontal};
+ padding: ${({ theme }) => `${theme.paddings.xxs} ${theme.paddings.sm}`};
overflow: auto;
display: flex;
flex-direction: column;
justify-content: space-between;
- @media only screen and ${media.md} {
- padding: ${LAYOUT.desktop.paddingVertical} ${LAYOUT.desktop.paddingHorizontal};
+ @media only screen and (${media('md')}) {
+ padding: ${({ theme }) => `${theme.paddings.md} ${theme.paddings.xl}`};
}
- @media only screen and ${media.xl} {
+ @media only screen and (${media('xl')}) {
${(props) =>
props?.$isTwoColumnsLayout &&
css`
diff --git a/src/components/layouts/main/MainHeader/MainHeader.styles.ts b/src/components/layouts/main/MainHeader/MainHeader.styles.ts
index e4960c1e4..c89cd7e66 100644
--- a/src/components/layouts/main/MainHeader/MainHeader.styles.ts
+++ b/src/components/layouts/main/MainHeader/MainHeader.styles.ts
@@ -1,6 +1,6 @@
import { BaseLayout } from '@app/components/common/BaseLayout/BaseLayout';
import { LAYOUT } from '@app/styles/themes/constants';
-import { media } from '@app/styles/themes/constants';
+import { media } from '@app/utils/utils';
import styled, { css } from 'styled-components';
interface Header {
@@ -9,15 +9,16 @@ interface Header {
export const Header = styled(BaseLayout.Header)`
line-height: 1.5;
+ background: ${({ theme }) => theme.layoutHeaderBg};
+ padding-top: 1rem;
+ padding-bottom: 1rem;
- @media only screen and ${media.md} {
- padding: ${LAYOUT.desktop.paddingVertical} ${LAYOUT.desktop.paddingHorizontal};
+ @media only screen and (${media('md')}) {
+ padding: ${({ theme }) => `${theme.paddings.md} ${theme.paddings.xl}`};
height: ${LAYOUT.desktop.headerHeight};
- }
- @media only screen and ${media.md} {
${(props) =>
- props?.$isTwoColumnsLayoutHeader &&
+ props.$isTwoColumnsLayoutHeader &&
css`
padding: 0;
`}
diff --git a/src/components/layouts/main/MainLayout/MainLayout.styles.ts b/src/components/layouts/main/MainLayout/MainLayout.styles.ts
index 62ff6bb5e..d7ff9b1d0 100644
--- a/src/components/layouts/main/MainLayout/MainLayout.styles.ts
+++ b/src/components/layouts/main/MainLayout/MainLayout.styles.ts
@@ -1,5 +1,5 @@
import styled from 'styled-components';
-import { media } from '@app/styles/themes/constants';
+import { media } from '@app/utils/utils';
import { BaseLayout } from '@app/components/common/BaseLayout/BaseLayout';
export const LayoutMaster = styled(BaseLayout)`
@@ -7,11 +7,11 @@ export const LayoutMaster = styled(BaseLayout)`
`;
export const LayoutMain = styled(BaseLayout)`
- @media only screen and ${media.md} {
+ @media only screen and (${media('md')}) {
margin-left: 80px;
}
- @media only screen and ${media.xl} {
+ @media only screen and (${media('xl')}) {
margin-left: unset;
}
`;
diff --git a/src/components/layouts/main/MainLayout/MainLayout.tsx b/src/components/layouts/main/MainLayout/MainLayout.tsx
index 118ba2d2d..70ef24f4e 100644
--- a/src/components/layouts/main/MainLayout/MainLayout.tsx
+++ b/src/components/layouts/main/MainLayout/MainLayout.tsx
@@ -1,5 +1,5 @@
-import React, { useEffect, useState } from 'react';
-import { Header } from '../../../header/Header';
+import { useEffect, useState } from 'react';
+import { Header } from '@app/components/header/Header';
import MainSider from '../sider/MainSider/MainSider';
import MainContent from '../MainContent/MainContent';
import { MainHeader } from '../MainHeader/MainHeader';
diff --git a/src/components/layouts/main/sider/MainSider/MainSider.styles.ts b/src/components/layouts/main/sider/MainSider/MainSider.styles.ts
index f2709efc2..6cdf99089 100644
--- a/src/components/layouts/main/sider/MainSider/MainSider.styles.ts
+++ b/src/components/layouts/main/sider/MainSider/MainSider.styles.ts
@@ -1,37 +1,44 @@
import styled, { css } from 'styled-components';
import { Link } from 'react-router-dom';
-import { media } from '@app/styles/themes/constants';
+import { media } from '@app/utils/utils';
import { LAYOUT } from '@app/styles/themes/constants';
import { BaseButton } from '@app/components/common/BaseButton/BaseButton';
import { BaseLayout } from '@app/components/common/BaseLayout/BaseLayout';
export const Sider = styled(BaseLayout.Sider)`
- position: fixed;
overflow: visible;
right: 0;
z-index: 5;
min-height: 100vh;
max-height: 100vh;
+ color: ${({ theme }) => theme.textSecondary};
- color: var(--text-secondary-color);
-
- @media only screen and ${media.md} {
+ @media only screen and (${media('md')}) {
right: unset;
left: 0;
}
- @media only screen and ${media.xl} {
- position: unset;
+ &.ant-layout-sider {
+ position: fixed;
+ background: ${({ theme }) => theme.layoutSiderBg};
+
+ @media only screen and (${media('xl')}) {
+ position: unset;
+ }
}
`;
-export const CollapseButton = styled(BaseButton)<{ $isCollapsed: boolean }>`
- background: var(--collapse-background-color);
+interface Collapse {
+ $isCollapsed: boolean;
+}
- border: 1px solid var(--border-color);
+export const CollapseButton = styled(BaseButton)`
+ background: ${({ theme }) => theme.collapseBackground};
+ border: 1px solid ${({ theme }) => theme.border};
transition: all 0.2s ease;
position: absolute;
right: 0.5rem;
+ color: ${({ theme }) => theme.textSecondary};
${(props) =>
props.$isCollapsed &&
@@ -39,18 +46,11 @@ export const CollapseButton = styled(BaseButton)<{ $isCollapsed: boolean }>`
right: -1rem;
`}
- color: var(--text-secondary-color);
-
- &:hover {
- color: var(--text-secondary-color);
- background: var(--primary-color);
- border: 1px solid var(--border-color);
- }
-
- &:focus {
- color: var(--text-secondary-color);
- background: var(--primary-color);
- border: 1px solid var(--border-color);
+ &.ant-btn:not(:disabled):hover,
+ &.ant-btn:not(:disabled):focus {
+ color: ${({ theme }) => theme.textSecondary};
+ background: ${({ theme }) => theme.primary};
+ border: 1px solid ${({ theme }) => theme.border};
}
`;
@@ -59,7 +59,7 @@ export const SiderContent = styled.div`
overflow-x: hidden;
max-height: calc(100vh - ${LAYOUT.mobile.headerHeight});
- @media only screen and ${media.md} {
+ @media only screen and (${media('md')}) {
max-height: calc(100vh - ${LAYOUT.desktop.headerHeight});
}
`;
@@ -73,21 +73,21 @@ export const SiderLogoLink = styled(Link)`
export const SiderLogoDiv = styled.div`
height: ${LAYOUT.mobile.headerHeight};
- padding: ${LAYOUT.mobile.headerPadding};
+ padding: ${({ theme }) => theme.paddings.sm};
display: flex;
justify-content: space-between;
align-items: center;
- @media only screen and ${media.md} {
+ @media only screen and (${media('md')}) {
height: ${LAYOUT.desktop.headerHeight};
- padding-top: ${LAYOUT.desktop.paddingVertical};
- padding-bottom: ${LAYOUT.desktop.paddingVertical};
+ padding-top: ${({ theme }) => theme.paddings.md};
+ padding-bottom: ${({ theme }) => theme.paddings.md};
}
`;
export const BrandSpan = styled.span`
margin: 0 1rem;
- font-weight: 700;
- font-size: 1.125rem;
- color: var(--white);
+ font-weight: ${({ theme }) => theme.fontWeights.bold};
+ font-size: ${({ theme }) => theme.fontSizes.lg};
+ color: ${({ theme }) => theme.white};
`;
diff --git a/src/components/layouts/main/sider/MainSider/MainSider.tsx b/src/components/layouts/main/sider/MainSider/MainSider.tsx
index 82ba5b55e..4d5765d36 100644
--- a/src/components/layouts/main/sider/MainSider/MainSider.tsx
+++ b/src/components/layouts/main/sider/MainSider/MainSider.tsx
@@ -1,5 +1,5 @@
-import React, { useMemo } from 'react';
-import { Overlay } from '../../../../common/Overlay/Overlay';
+import { useMemo } from 'react';
+import { Overlay } from '@app/components/common/Overlay/Overlay';
import { useResponsive } from 'hooks/useResponsive';
import * as S from './MainSider.styles';
import { SiderLogo } from '../SiderLogo';
diff --git a/src/components/layouts/main/sider/SiderMenu/SiderMenu.styles.ts b/src/components/layouts/main/sider/SiderMenu/SiderMenu.styles.ts
index 599988b5d..5c6cb9628 100644
--- a/src/components/layouts/main/sider/SiderMenu/SiderMenu.styles.ts
+++ b/src/components/layouts/main/sider/SiderMenu/SiderMenu.styles.ts
@@ -1,76 +1,18 @@
import styled from 'styled-components';
-import { FONT_SIZE } from '@app/styles/themes/constants';
import { BaseMenu } from '@app/components/common/BaseMenu/BaseMenu';
export const Menu = styled(BaseMenu)`
- background: transparent;
- border-right: 0;
-
a {
width: 100%;
display: block;
}
- .ant-menu-item,
- .ant-menu-submenu {
- font-size: ${FONT_SIZE.xs};
- }
-
- .ant-menu-item-icon {
- width: 1.25rem;
- }
-
- .ant-menu-submenu-expand-icon,
- .ant-menu-submenu-arrow,
- span[role='img'],
- a,
- .ant-menu-item,
- .ant-menu-submenu {
- color: var(--text-sider-secondary-color);
- fill: var(--text-sider-secondary-color);
- }
-
- .ant-menu-item:hover,
- .ant-menu-submenu-title:hover {
- .ant-menu-submenu-expand-icon,
- .ant-menu-submenu-arrow,
- span[role='img'],
- a,
- .ant-menu-item-icon,
- .ant-menu-title-content {
- color: var(--text-sider-primary-color);
- fill: var(--text-sider-primary-color);
- }
- }
-
- .ant-menu-submenu-selected {
- .ant-menu-submenu-title {
- color: var(--text-sider-primary-color);
-
- .ant-menu-submenu-expand-icon,
- .ant-menu-submenu-arrow,
- span[role='img'] {
- color: var(--text-sider-primary-color);
- fill: var(--text-sider-primary-color);
- }
- }
- }
-
- .ant-menu-item-selected {
- background-color: transparent !important;
-
- .ant-menu-submenu-expand-icon,
- .ant-menu-submenu-arrow,
- span[role='img'],
- .ant-menu-item-icon,
- a {
- color: var(--text-sider-primary-color);
- fill: var(--text-sider-primary-color);
- }
+ .ant-menu-item.ant-menu-item-selected::after {
+ border-color: ${({ theme }) => theme.primary};
}
- .ant-menu-item-active,
- .ant-menu-submenu-active .ant-menu-submenu-title {
- background-color: transparent !important;
+ .ant-menu-item:not(:last-child),
+ .ant-menu-submenu-title {
+ margin-bottom: 8px;
}
`;
diff --git a/src/components/layouts/main/sider/sidebarNavigation.tsx b/src/components/layouts/main/sider/sidebarNavigation.tsx
index 9db09da82..aa509613a 100644
--- a/src/components/layouts/main/sider/sidebarNavigation.tsx
+++ b/src/components/layouts/main/sider/sidebarNavigation.tsx
@@ -122,11 +122,6 @@ export const sidebarNavigation: SidebarNavigationItem[] = [
key: 'leaflet-maps',
url: '/maps/leaflet-maps',
},
- {
- title: 'common.reactSimpleMaps',
- key: 'react-simple-maps',
- url: '/maps/react-simple-maps',
- },
{
title: 'common.pigeonMaps',
key: 'pigeon-maps',
diff --git a/src/components/medical-dashboard/DashboardCard/DashboardCard.tsx b/src/components/medical-dashboard/DashboardCard/DashboardCard.tsx
index e528df52f..601d1ee16 100644
--- a/src/components/medical-dashboard/DashboardCard/DashboardCard.tsx
+++ b/src/components/medical-dashboard/DashboardCard/DashboardCard.tsx
@@ -1,30 +1,19 @@
import React from 'react';
import { BaseCard, BaseCardProps } from '@app/components/common/BaseCard/BaseCard';
import { useResponsive } from 'hooks/useResponsive';
+import { WidthCategories } from '@app/styles/themes/types';
-interface DashboardPaddings {
- xs: [number, number];
- md: [number, number];
- xl: [number, number];
-}
-
-export const dashboardPaddings: DashboardPaddings = {
+export const dashboardPaddings = {
xs: [20, 15],
md: [20, 20],
xl: [20, 20],
-};
+} as const satisfies WidthCategories;
export const DashboardCard: React.FC = ({ children, ...props }) => {
- const { isMobile, isTablet, isDesktop } = useResponsive();
-
- const responsivePaddings =
- (isDesktop && dashboardPaddings.xl) ||
- (isTablet && dashboardPaddings.md) ||
- (isMobile && dashboardPaddings.xs) ||
- dashboardPaddings.xs;
+ const { breakpoint } = useResponsive();
return (
-
+
{children}
);
diff --git a/src/components/medical-dashboard/HealthCard/HealthCard.tsx b/src/components/medical-dashboard/HealthCard/HealthCard.tsx
index 96495d43b..85616ba48 100644
--- a/src/components/medical-dashboard/HealthCard/HealthCard.tsx
+++ b/src/components/medical-dashboard/HealthCard/HealthCard.tsx
@@ -1,6 +1,5 @@
-import React from 'react';
import { useTranslation } from 'react-i18next';
-import { PieChartCustomLegend } from '../../common/charts/PieChartCustomLegend';
+import { PieChartCustomLegend } from '@app/components/common/charts/PieChartCustomLegend';
import { healthChartData } from 'constants/healthChartData';
import { BaseCard } from '@app/components/common/BaseCard/BaseCard';
diff --git a/src/components/medical-dashboard/PatientResultsCard/PatientResultsCard.styles.ts b/src/components/medical-dashboard/PatientResultsCard/PatientResultsCard.styles.ts
index d3025d90c..15c24bf12 100644
--- a/src/components/medical-dashboard/PatientResultsCard/PatientResultsCard.styles.ts
+++ b/src/components/medical-dashboard/PatientResultsCard/PatientResultsCard.styles.ts
@@ -1,6 +1,6 @@
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
import { CalendarOutlined } from '@ant-design/icons';
-import { FONT_SIZE, media } from '@app/styles/themes/constants';
+import { media } from '@app/utils/utils';
import { BaseTypography } from '@app/components/common/BaseTypography/BaseTypography';
interface IconProps {
@@ -13,17 +13,17 @@ export const TitleWrapper = styled.div`
`;
export const CalendarIcon = styled(CalendarOutlined)`
- color: var(--primary-color);
+ color: ${({ theme }) => theme.primary};
- @media only screen and ${media.md} {
- color: var(--text-main-color);
+ @media only screen and (${media('md')}) {
+ color: ${({ theme }) => theme.textMain};
}
`;
export const MobileTitleWrapper = styled.div`
display: flex;
justify-content: space-between;
- height: 2rem;
+ height: ${({ theme }) => theme.heights.xs};
align-items: center;
`;
@@ -35,45 +35,37 @@ export const InfoWrapper = styled.div`
export const DateWrapper = styled.div`
display: flex;
align-items: center;
- font-size: ${FONT_SIZE.xs};
+ font-size: ${({ theme }) => theme.fontSizes.xs};
`;
export const Text = styled(BaseTypography.Text)`
margin-left: 0.5rem;
line-height: 1;
- font-size: ${FONT_SIZE.xxs};
- color: var(--text-main-color);
+ font-size: ${({ theme }) => theme.fontSizes.xxs};
+ color: ${({ theme }) => theme.textMain};
- @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 Description = styled(BaseTypography.Text)`
margin-top: 0.625rem;
- font-size: ${FONT_SIZE.xxs};
+ 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 IconWrapper = styled.div`
- height: 2rem;
+ height: ${({ theme }) => theme.heights.xs};
width: 2rem;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
- ${(props) =>
- props.isActive
- ? css`
- background-color: var(--primary-color);
- color: var(--text-secondary-color);
- `
- : css`
- background-color: var(--timeline-background-color);
- color: var(--primary-color);
- `}
+ background-color: ${(props) => (props.isActive ? props.theme.primary : props.theme.timelineBackground)};
+ color: ${(props) => (props.isActive ? props.theme.textSecondary : props.theme.primary)};
font-size: 1.15rem;
`;
diff --git a/src/components/medical-dashboard/activityCard/ActivityCard.tsx b/src/components/medical-dashboard/activityCard/ActivityCard.tsx
index 14fb2dfa6..bbe66b8fe 100644
--- a/src/components/medical-dashboard/activityCard/ActivityCard.tsx
+++ b/src/components/medical-dashboard/activityCard/ActivityCard.tsx
@@ -1,10 +1,14 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
import { useTranslation } from 'react-i18next';
-import { BaseCard } from '../../common/BaseCard/BaseCard';
+import { BaseCard } from '@app/components/common/BaseCard/BaseCard';
import { ActivityChart } from './ActivityChart';
import { ChartData } from 'interfaces/interfaces';
import styled from 'styled-components';
+const ActivityCardStyled = styled(BaseCard)`
+ height: 100%;
+`;
+
export const ActivityCard: React.FC = () => {
const [data] = useState([1840, 1927, 1793, 1757, 1934, 1620, 1754]);
@@ -16,7 +20,3 @@ export const ActivityCard: React.FC = () => {
);
};
-
-const ActivityCardStyled = styled(BaseCard)`
- height: 100%;
-`;
diff --git a/src/components/medical-dashboard/activityCard/ActivityChart.tsx b/src/components/medical-dashboard/activityCard/ActivityChart.tsx
index 75ab6849f..a27fe5363 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,15 +13,13 @@ interface ActivityChartProps {
}
export const ActivityChart: React.FC = ({ data }) => {
- const theme = useAppSelector((state) => state.theme.theme);
+ const theme = useTheme();
const { t } = useTranslation();
const days = Dates.getDays();
- const { isTablet, isDesktop, isMobile } = useResponsive();
-
- const size = isDesktop ? 'xl' : isTablet ? 'md' : isMobile ? 'xs' : 'xs';
+ const { breakpoint } = useResponsive();
const option = {
color: new graphic.LinearGradient(0, 0, 0, 1, [
@@ -36,10 +33,10 @@ export const ActivityChart: React.FC = ({ data }) => {
},
]),
grid: {
- top: dashboardPaddings[size][0],
- right: dashboardPaddings[size][1],
- bottom: dashboardPaddings[size][1],
- left: dashboardPaddings[size][0],
+ top: dashboardPaddings[breakpoint][0],
+ right: dashboardPaddings[breakpoint][1],
+ bottom: dashboardPaddings[breakpoint][1],
+ left: dashboardPaddings[breakpoint][0],
containLabel: true,
},
xAxis: {
@@ -53,7 +50,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 +60,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 +76,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/BloodScreeningCard/BloodScreeningCard.styles.ts b/src/components/medical-dashboard/bloodScreeningCard/BloodScreeningCard/BloodScreeningCard.styles.ts
index b249469c7..93921275c 100644
--- a/src/components/medical-dashboard/bloodScreeningCard/BloodScreeningCard/BloodScreeningCard.styles.ts
+++ b/src/components/medical-dashboard/bloodScreeningCard/BloodScreeningCard/BloodScreeningCard.styles.ts
@@ -1,6 +1,5 @@
import styled from 'styled-components';
import { BaseCard } from '@app/components/common/BaseCard/BaseCard';
-import { BORDER_RADIUS, FONT_SIZE, FONT_WEIGHT } from '@app/styles/themes/constants';
export const BloodScreeningCard = styled(BaseCard)`
height: 100%;
@@ -14,12 +13,12 @@ export const TitleWrapper = styled.div`
export const ActiveItem = styled.div`
background: #ecf6ff;
- height: 3.125rem;
- border-radius: ${BORDER_RADIUS};
+ height: ${({ theme }) => theme.heights.md};
+ border-radius: ${({ theme }) => theme.borderRadius};
padding: 0 1rem;
display: flex;
align-items: center;
- color: var(--primary-color);
- font-size: ${FONT_SIZE.xs};
- font-weight: ${FONT_WEIGHT.semibold};
+ color: ${({ theme }) => theme.primary};
+ font-size: ${({ theme }) => theme.fontSizes.xs};
+ font-weight: ${({ theme }) => theme.fontWeights.semibold};
`;
diff --git a/src/components/medical-dashboard/bloodScreeningCard/BloodScreeningChart/BloodScreeningChart.tsx b/src/components/medical-dashboard/bloodScreeningCard/BloodScreeningChart/BloodScreeningChart.tsx
index 7aee36c28..2795d0fb5 100644
--- a/src/components/medical-dashboard/bloodScreeningCard/BloodScreeningChart/BloodScreeningChart.tsx
+++ b/src/components/medical-dashboard/bloodScreeningCard/BloodScreeningChart/BloodScreeningChart.tsx
@@ -1,17 +1,16 @@
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
import { EChartsInstance } from 'echarts-for-react';
-import { BaseChart } from '../../../common/charts/BaseChart';
+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/bloodScreeningCard/BloodScreeningTable/BloodScreeningTable.styles.ts b/src/components/medical-dashboard/bloodScreeningCard/BloodScreeningTable/BloodScreeningTable.styles.ts
index 75e0bb0eb..1464065be 100644
--- a/src/components/medical-dashboard/bloodScreeningCard/BloodScreeningTable/BloodScreeningTable.styles.ts
+++ b/src/components/medical-dashboard/bloodScreeningCard/BloodScreeningTable/BloodScreeningTable.styles.ts
@@ -1,22 +1,21 @@
import styled from 'styled-components';
-import { BaseTable as CommonTable } from '@app/components/common/BaseTable/BaseTable';
-import { FONT_SIZE, FONT_WEIGHT } from '@app/styles/themes/constants';
+import { BaseTable } from '@app/components/common/BaseTable/BaseTable';
interface TextProps {
$isActive?: boolean;
}
-export const Table = styled(CommonTable)`
+export const Table = styled(BaseTable)`
thead .ant-table-cell {
border-top: none;
- border-bottom: 1px solid var(--border-color);
+ border-bottom: 1px solid ${({ theme }) => theme.border};
}
.ant-table-thead > tr > th {
background: transparent;
- 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};
&::before {
display: none;
@@ -30,10 +29,10 @@ export const Table = styled(CommonTable)`
`;
export const Text = styled.span`
- color: var(--text-main-color);
- font-weight: ${(props) => (props.$isActive ? `${FONT_WEIGHT.semibold}` : `${FONT_WEIGHT.regular}`)};
+ color: ${({ theme }) => theme.textMain};
+ font-weight: ${(props) => (props.$isActive ? props.theme.fontWeights.semibold : props.theme.fontWeights.regular)};
`;
export const Flag = styled(Text)<{ $isNorm: boolean }>`
- color: ${(props) => (props.$isNorm ? 'var(--success-color)' : 'var(--error-color)')};
+ color: ${(props) => (props.$isNorm ? props.theme.success : props.theme.error)};
`;
diff --git a/src/components/medical-dashboard/covidCard/CovidCard.tsx b/src/components/medical-dashboard/covidCard/CovidCard.tsx
index 420e448b7..165ea5686 100644
--- a/src/components/medical-dashboard/covidCard/CovidCard.tsx
+++ b/src/components/medical-dashboard/covidCard/CovidCard.tsx
@@ -5,17 +5,19 @@ import { DashboardCard } from '../DashboardCard/DashboardCard';
import { CovidChart } from './CovidChart';
import { Dates } from '@app/constants/Dates';
import { NotFound } from '@app/components/common/NotFound/NotFound';
-import { notificationController } from '@app/controllers/notificationController';
+import { useFeedback } from '@app/hooks/useFeedback';
export const CovidCard: React.FC = () => {
const [data, setData] = useState();
const { t } = useTranslation();
+ const { notification } = useFeedback();
useEffect(() => {
getCovidData()
.then((res) => setData(res))
- .catch((e) => notificationController.error({ message: e.message }));
+ .catch((e) => notification.error({ message: e.message }));
+ // eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const { confirmedArr, deathsArr, dateArr } = useMemo(() => {
diff --git a/src/components/medical-dashboard/covidCard/CovidChart.tsx b/src/components/medical-dashboard/covidCard/CovidChart.tsx
index 9a26b304d..6425c313f 100644
--- a/src/components/medical-dashboard/covidCard/CovidChart.tsx
+++ b/src/components/medical-dashboard/covidCard/CovidChart.tsx
@@ -1,9 +1,8 @@
import React from 'react';
import { BaseChart, getDefaultTooltipStyles } from '@app/components/common/charts/BaseChart';
-import { getMarkAreaData, hexToRGB } from '@app/utils/utils';
+import { getMarkAreaData } 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(${theme.rgb.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(${theme.rgb.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/favoriteDoctors/DoctorCard/DoctorCard.styles.ts b/src/components/medical-dashboard/favoriteDoctors/DoctorCard/DoctorCard.styles.ts
index 82a43b805..8db61c75d 100644
--- a/src/components/medical-dashboard/favoriteDoctors/DoctorCard/DoctorCard.styles.ts
+++ b/src/components/medical-dashboard/favoriteDoctors/DoctorCard/DoctorCard.styles.ts
@@ -1,49 +1,45 @@
+import styled from 'styled-components';
import { BaseTypography } from '@app/components/common/BaseTypography/BaseTypography';
import { BaseRate } from '@app/components/common/BaseRate/BaseRate';
-import { BORDER_RADIUS, FONT_SIZE, FONT_WEIGHT, media } from '@app/styles/themes/constants';
-import styled from 'styled-components';
-import { BaseCard } from '../../../common/BaseCard/BaseCard';
+import { media } from '@app/utils/utils';
+import { BaseCard } from '@app/components/common/BaseCard/BaseCard';
export const DoctorCard = styled(BaseCard)`
margin: 1rem;
`;
export const Title = styled(BaseTypography.Text)`
- font-size: ${FONT_SIZE.xxs};
-
- font-weight: ${FONT_WEIGHT.medium};
+ font-size: ${({ theme }) => theme.fontSizes.xxs};
+ font-weight: ${({ theme }) => theme.fontWeights.medium};
+ color: ${({ theme }) => theme.primary};
- color: var(--primary-color);
-
- @media only screen and ${media.md} {
- font-size: ${FONT_SIZE.xs};
+ @media only screen and (${media('md')}) {
+ font-size: ${({ theme }) => theme.fontSizes.xs};
}
- @media only screen and ${media.xxl} {
- font-size: ${FONT_SIZE.md};
+ @media only screen and (${media('xxl')}) {
+ font-size: ${({ theme }) => theme.fontSizes.md};
}
`;
export const Text = styled(BaseTypography.Text)`
- font-size: ${FONT_SIZE.xs};
-
- font-weight: ${FONT_WEIGHT.semibold};
+ font-size: ${({ theme }) => theme.fontSizes.xs};
+ font-weight: ${({ theme }) => theme.fontWeights.semibold};
- @media only screen and ${media.md} {
- font-size: ${FONT_SIZE.md};
+ @media only screen and (${media('md')}) {
+ font-size: ${({ theme }) => theme.fontSizes.md};
}
- @media only screen and ${media.xxl} {
- font-size: ${FONT_SIZE.lg};
+ @media only screen and (${media('xxl')}) {
+ font-size: ${({ theme }) => theme.fontSizes.lg};
}
`;
export const ImgWrapper = styled.div`
overflow: hidden;
margin: -1rem -1rem 0;
-
- border-top-left-radius: ${BORDER_RADIUS};
- border-top-right-radius: ${BORDER_RADIUS};
+ border-top-left-radius: ${({ theme }) => theme.borderRadius};
+ border-top-right-radius: ${({ theme }) => theme.borderRadius};
& > div {
display: block;
@@ -52,9 +48,9 @@ export const ImgWrapper = styled.div`
export const Rating = styled(BaseRate)`
display: flex;
- font-size: ${FONT_SIZE.xxs};
+ font-size: ${({ theme }) => theme.fontSizes.xxs};
- @media only screen and ${media.md} {
- font-size: ${FONT_SIZE.lg};
+ @media only screen and (${media('md')}) {
+ font-size: ${({ theme }) => theme.fontSizes.lg};
}
`;
diff --git a/src/components/medical-dashboard/favoriteDoctors/FavoriteDoctorsCard/FavoritesDoctorsCard.styles.ts b/src/components/medical-dashboard/favoriteDoctors/FavoriteDoctorsCard/FavoritesDoctorsCard.styles.ts
index e4f8cc20f..4a0e68685 100644
--- a/src/components/medical-dashboard/favoriteDoctors/FavoriteDoctorsCard/FavoritesDoctorsCard.styles.ts
+++ b/src/components/medical-dashboard/favoriteDoctors/FavoriteDoctorsCard/FavoritesDoctorsCard.styles.ts
@@ -19,8 +19,8 @@ export const SliderArrow = styled.div`
}
&:before {
- color: var(--primary-color) !important;
- font-size: 2rem !important;
+ color: ${({ theme }) => theme.primary} !important;
+ font-size: ${({ theme }) => theme.fontSizes.xxxxl} !important;
position: absolute;
left: -6px;
top: -6px;
diff --git a/src/components/medical-dashboard/favoriteDoctors/FavoriteDoctorsCard/FavoritesDoctorsCard.tsx b/src/components/medical-dashboard/favoriteDoctors/FavoriteDoctorsCard/FavoritesDoctorsCard.tsx
index e2d94f459..f04507857 100644
--- a/src/components/medical-dashboard/favoriteDoctors/FavoriteDoctorsCard/FavoritesDoctorsCard.tsx
+++ b/src/components/medical-dashboard/favoriteDoctors/FavoriteDoctorsCard/FavoritesDoctorsCard.tsx
@@ -1,14 +1,14 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
+import { useTheme } from 'styled-components';
import { DashboardCard } from '@app/components/medical-dashboard/DashboardCard/DashboardCard';
-import { BaseCarousel } from '@app/components/common/BaseCarousel/Carousel';
+import { BaseCarousel } from '@app/components/common/BaseCarousel/BaseCarousel';
import { DoctorCard } from '../DoctorCard/DoctorCard';
import { Dates } from '@app/constants/Dates';
import { CalendarEvent, getUserCalendar } from '@app/api/calendar.api';
import { Doctor, getDoctorsData } from '@app/api/doctors.api';
import { useAppSelector } from '@app/hooks/reduxHooks';
import * as S from './FavoritesDoctorsCard.styles';
-import { BREAKPOINTS } from '@app/styles/themes/constants';
/* eslint-disable @typescript-eslint/no-explicit-any */
const NextArrow = (props: any) => {
@@ -23,6 +23,7 @@ const PrevArrow = (props: any) => {
export const FavoritesDoctorsCard: React.FC = () => {
const { t } = useTranslation();
+ const theme = useTheme();
const [doctors, setDoctors] = useState([]);
const [calendar, setCalendar] = useState([]);
@@ -66,7 +67,7 @@ export const FavoritesDoctorsCard: React.FC = () => {
},
},
{
- breakpoint: BREAKPOINTS.xl - 1,
+ breakpoint: theme.breakpoints.xl - 1,
settings: {
slidesToShow: 4,
},
@@ -84,7 +85,7 @@ export const FavoritesDoctorsCard: React.FC = () => {
},
},
{
- breakpoint: BREAKPOINTS.md - 1,
+ breakpoint: theme.breakpoints.md - 1,
settings: {
slidesToShow: 3,
},
diff --git a/src/components/medical-dashboard/mapCard/DoctorsMap/DoctorsMap.styles.ts b/src/components/medical-dashboard/mapCard/DoctorsMap/DoctorsMap.styles.ts
index 5379293f5..8902b393d 100644
--- a/src/components/medical-dashboard/mapCard/DoctorsMap/DoctorsMap.styles.ts
+++ b/src/components/medical-dashboard/mapCard/DoctorsMap/DoctorsMap.styles.ts
@@ -1,15 +1,14 @@
-import { BORDER_RADIUS } from '@app/styles/themes/constants';
import styled from 'styled-components';
-import { CountryMap } from '../../../common/CountryMap/CountryMap';
+import { CountryMap } from '@app/components/common/CountryMap/CountryMap';
export const DoctorsMap = styled(CountryMap)`
- // Leaflet uses z-index inside. Create a new stacking context for avoiding overlapping
+ /* Leaflet uses z-index inside. Create a new stacking context for avoiding overlapping */
isolation: isolate;
height: 19rem;
&.leaflet-container {
- background: var(--dashboard-map-background-color);
- border-radius: ${BORDER_RADIUS};
+ background: ${({ theme }) => theme.dashboardMapBackground};
+ border-radius: ${({ theme }) => theme.borderRadius};
svg {
path {
@@ -24,11 +23,11 @@ export const DoctorsMap = styled(CountryMap)`
}
#pattern-circle {
- fill: var(--dashboard-map-circle-color);
+ fill: ${({ theme }) => theme.dashboardMapCircleColor};
}
#pattern-circle-hovered {
- fill: var(--primary-color);
+ fill: ${({ theme }) => theme.primary};
}
}
@@ -38,7 +37,7 @@ export const DoctorsMap = styled(CountryMap)`
.leaflet-marker-icon {
border-radius: 50%;
- border: 2px solid var(--primary-color);
+ border: 2px solid ${({ theme }) => theme.primary};
}
.leaflet-control-zoom {
@@ -53,17 +52,17 @@ export const DoctorsMap = styled(CountryMap)`
.leaflet-control-zoom-out,
.leaflet-control-zoom-in {
- background-color: var(--primary-color);
- color: var(--text-secondary-color);
+ background-color: ${({ theme }) => theme.primary};
+ color: ${({ theme }) => theme.textSecondary};
&:hover {
- background-color: var(--background-color);
- color: var(--primary-color);
+ background-color: ${({ theme }) => theme.background};
+ color: ${({ theme }) => theme.primary};
}
&.leaflet-disabled {
- background-color: var(--dashboard-map-control-disabled-background-color);
- color: var(--text-secondary-color);
+ background-color: ${({ theme }) => theme.dashboardMapControlDisabledBackground};
+ color: ${({ theme }) => theme.textSecondary};
}
}
diff --git a/src/components/medical-dashboard/screeningsCard/ScreeningsCard/ScreeningsCard.styles.ts b/src/components/medical-dashboard/screeningsCard/ScreeningsCard/ScreeningsCard.styles.ts
index 017f37423..ec0468f4e 100644
--- a/src/components/medical-dashboard/screeningsCard/ScreeningsCard/ScreeningsCard.styles.ts
+++ b/src/components/medical-dashboard/screeningsCard/ScreeningsCard/ScreeningsCard.styles.ts
@@ -1,9 +1,9 @@
-import { media } from '@app/styles/themes/constants';
+import { media } from '@app/utils/utils';
import styled from 'styled-components';
import { DashboardCard } from '../../DashboardCard/DashboardCard';
export const ScreeningsCard = styled(DashboardCard)`
- @media only screen and ${media.xl} {
+ @media only screen and (${media('xl')}) {
.ant-card-body {
position: relative;
overflow: hidden;
diff --git a/src/components/medical-dashboard/screeningsCard/ScreeningsChart/ScreeningsChart.tsx b/src/components/medical-dashboard/screeningsCard/ScreeningsChart/ScreeningsChart.tsx
index 1e53a5850..224263341 100644
--- a/src/components/medical-dashboard/screeningsCard/ScreeningsChart/ScreeningsChart.tsx
+++ b/src/components/medical-dashboard/screeningsCard/ScreeningsChart/ScreeningsChart.tsx
@@ -1,11 +1,9 @@
import React from 'react';
import { useTranslation } from 'react-i18next';
import { BaseChart, getDefaultTooltipStyles } from '@app/components/common/charts/BaseChart';
-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 +23,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 +74,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 +85,7 @@ export const ScreeningsChart: React.FC = ({ firstUser, sec
data: firstUser?.data,
markArea: {
itemStyle: {
- color: `rgba(${hexToRGB(themeObject[theme].chartColor1)}, 0.01)`,
+ color: `rgba(${theme.rgb.chartColor1}, 0.01)`,
},
data: getMarkAreaData(xAxisData),
},
@@ -98,7 +96,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 +108,7 @@ export const ScreeningsChart: React.FC = ({ firstUser, sec
data: secondUser?.data,
markArea: {
itemStyle: {
- color: `rgba(${hexToRGB(themeObject[theme].chartColor1)}, 0.01)`,
+ color: `rgba(${theme.rgb.chartColor1}, 0.01)`,
},
data: getMarkAreaData(xAxisData),
},
diff --git a/src/components/medical-dashboard/screeningsCard/screeningsFriends/DesktopScreenings/DesktopScreenings.styles.ts b/src/components/medical-dashboard/screeningsCard/screeningsFriends/DesktopScreenings/DesktopScreenings.styles.ts
index 87d6f67de..acdedde30 100644
--- a/src/components/medical-dashboard/screeningsCard/screeningsFriends/DesktopScreenings/DesktopScreenings.styles.ts
+++ b/src/components/medical-dashboard/screeningsCard/screeningsFriends/DesktopScreenings/DesktopScreenings.styles.ts
@@ -1,9 +1,7 @@
import { BaseTypography } from '@app/components/common/BaseTypography/BaseTypography';
-import { FONT_WEIGHT, FONT_SIZE } from '@app/styles/themes/constants';
import styled from 'styled-components';
export const Title = styled(BaseTypography.Text)`
- font-weight: ${FONT_WEIGHT.bold};
-
- font-size: ${FONT_SIZE.lg};
+ font-weight: ${({ theme }) => theme.fontWeights.bold};
+ font-size: ${({ theme }) => theme.fontSizes.lg};
`;
diff --git a/src/components/medical-dashboard/screeningsCard/screeningsFriends/MobileScreenings/MobileScreenings.styles.ts b/src/components/medical-dashboard/screeningsCard/screeningsFriends/MobileScreenings/MobileScreenings.styles.ts
index ee79cb58d..612919b4a 100644
--- a/src/components/medical-dashboard/screeningsCard/screeningsFriends/MobileScreenings/MobileScreenings.styles.ts
+++ b/src/components/medical-dashboard/screeningsCard/screeningsFriends/MobileScreenings/MobileScreenings.styles.ts
@@ -1,4 +1,4 @@
-import { BaseCarousel } from '@app/components/common/BaseCarousel/Carousel';
+import { BaseCarousel } from '@app/components/common/BaseCarousel/BaseCarousel';
import styled from 'styled-components';
export const ScreeningsCarousel = styled(BaseCarousel)`
diff --git a/src/components/medical-dashboard/screeningsCard/screeningsFriends/MobileScreenings/MobileScreenings.tsx b/src/components/medical-dashboard/screeningsCard/screeningsFriends/MobileScreenings/MobileScreenings.tsx
index 522f915ec..0f6d0deb8 100644
--- a/src/components/medical-dashboard/screeningsCard/screeningsFriends/MobileScreenings/MobileScreenings.tsx
+++ b/src/components/medical-dashboard/screeningsCard/screeningsFriends/MobileScreenings/MobileScreenings.tsx
@@ -1,11 +1,11 @@
-import React from 'react';
+import { useTheme } from 'styled-components';
import { ArrowLeftOutlined, ArrowRightOutlined } from '@ant-design/icons';
import { CarouselArrow } from '@app/components/common/BaseCarousel/CarouselArrow/CarouselArrow';
import { ScreeningsProps } from '../interfaces';
import * as S from './MobileScreenings.styles';
-import { BREAKPOINTS } from '@app/styles/themes/constants';
export const MobileScreenings: React.FC = ({ screeningsItems }) => {
+ const theme = useTheme();
return (
= ({ screeningsItems })
slidesToShow={6}
responsive={[
{
- breakpoint: BREAKPOINTS.sm,
+ breakpoint: theme.breakpoints.sm,
settings: {
slidesToShow: 5,
},
diff --git a/src/components/medical-dashboard/screeningsCard/screeningsFriends/ScreeningsFriend/ScreeningsFriend.styles.ts b/src/components/medical-dashboard/screeningsCard/screeningsFriends/ScreeningsFriend/ScreeningsFriend.styles.ts
index b38bf4aa3..256d9a09e 100644
--- a/src/components/medical-dashboard/screeningsCard/screeningsFriends/ScreeningsFriend/ScreeningsFriend.styles.ts
+++ b/src/components/medical-dashboard/screeningsCard/screeningsFriends/ScreeningsFriend/ScreeningsFriend.styles.ts
@@ -1,7 +1,7 @@
import { BaseAvatar } from '@app/components/common/BaseAvatar/BaseAvatar';
import { BaseRow } from '@app/components/common/BaseRow/BaseRow';
import { BaseTypography } from '@app/components/common/BaseTypography/BaseTypography';
-import { FONT_SIZE, FONT_WEIGHT, media } from '@app/styles/themes/constants';
+import { media } from '@app/utils/utils';
import styled from 'styled-components';
interface ScreeningsRowProps {
@@ -22,38 +22,31 @@ export const ScreeningsRow = styled(BaseRow)`
transition: all 0.3s ease;
.ant-typography {
- font-weight: ${(props) => (props.$isActive ? FONT_WEIGHT.bold : FONT_WEIGHT.regular)};
+ font-weight: ${(props) => (props.$isActive ? props.theme.fontWeights.bold : props.theme.fontWeights.regular)};
}
`;
export const Avatar = styled(BaseAvatar)`
position: relative;
-
- ${(props) =>
- (props.$isPrimary && `border: 2px solid var(--primary-color)`) ||
- (props.$isSecondary && `border 2px solid var(--error-color)`)}
+ border: 2px solid ${(props) => (props.$isPrimary && props.theme.primary) || (props.$isSecondary && props.theme.error)};
`;
export const Name = styled(BaseTypography.Text)`
white-space: nowrap;
+ font-size: ${({ theme }) => theme.fontSizes.xs};
+ font-weight: ${({ theme }) => theme.fontWeights.semibold};
+ color: ${(props) => (props.$isPrimary && props.theme.primary) || (props.$isSecondary && props.theme.error)};
- font-size: ${FONT_SIZE.xs};
-
- font-weight: ${FONT_WEIGHT.semibold};
-
- color: ${(props) => (props.$isPrimary && 'var(--primary-color)') || (props.$isSecondary && 'var(--error-color)')};
-
- @media only screen and ${media.xl} {
- font-size: ${FONT_SIZE.md};
+ @media only screen and (${media('xl')}) {
+ font-size: ${({ theme }) => theme.fontSizes.md};
}
`;
export const Percentage = styled(BaseTypography.Text)`
- font-size: ${FONT_SIZE.xs};
-
- color: ${(props) => (props.$isDowngrade ? 'var(--error-color)' : 'var(--success-color)')};
+ font-size: ${({ theme }) => theme.fontSizes.xs};
+ color: ${(props) => (props.$isDowngrade ? props.theme.error : props.theme.success)};
- @media only screen and ${media.xl} {
- font-size: ${FONT_SIZE.md};
+ @media only screen and (${media('xl')}) {
+ font-size: ${({ theme }) => theme.fontSizes.md};
}
`;
diff --git a/src/components/medical-dashboard/screeningsCard/screeningsFriends/ScreeningsFriends/ScreeningsFriends.styles.ts b/src/components/medical-dashboard/screeningsCard/screeningsFriends/ScreeningsFriends/ScreeningsFriends.styles.ts
index d16e262c6..cd9e1e775 100644
--- a/src/components/medical-dashboard/screeningsCard/screeningsFriends/ScreeningsFriends/ScreeningsFriends.styles.ts
+++ b/src/components/medical-dashboard/screeningsCard/screeningsFriends/ScreeningsFriends/ScreeningsFriends.styles.ts
@@ -1,6 +1,6 @@
import styled, { css } from 'styled-components';
import { dashboardPaddings } from '@app/components/medical-dashboard/DashboardCard/DashboardCard';
-import { media } from '@app/styles/themes/constants';
+import { media, normalizeProp } from '@app/utils/utils';
interface WrapperProps {
$isOpen: boolean;
@@ -9,25 +9,21 @@ interface WrapperProps {
export const Wrapper = styled.div`
padding: 0.9375rem;
transition: all 0.3s ease;
+ background-color: ${({ theme }) => theme.background};
+ box-shadow: ${({ theme }) => theme.boxShadow};
- background-color: var(--background-color);
-
- box-shadow: var(--box-shadow);
-
- @media only screen and ${media.md} {
+ @media only screen and (${media('md')}) {
padding: 1.25rem;
-
- margin: ${dashboardPaddings.md[0]}px ${dashboardPaddings.md[1]}px;
+ margin: ${normalizeProp(dashboardPaddings.md)};
}
- @media only screen and ${media.xl} {
+ @media only screen and (${media('xl')}) {
position: absolute;
width: 25rem;
height: 100%;
margin: 0;
z-index: 2;
-
- background-color: rgba(var(--background-rgb-color), 0.9);
+ background-color: rgba(${({ theme }) => theme.rgb.background}, 0.9);
${(props) =>
!props.$isOpen &&
diff --git a/src/components/medical-dashboard/statisticsCards/statisticsCard/StatisticsCard/StatisticsCard.styles.ts b/src/components/medical-dashboard/statisticsCards/statisticsCard/StatisticsCard/StatisticsCard.styles.ts
index 16a7c68c5..05d04a165 100644
--- a/src/components/medical-dashboard/statisticsCards/statisticsCard/StatisticsCard/StatisticsCard.styles.ts
+++ b/src/components/medical-dashboard/statisticsCards/statisticsCard/StatisticsCard/StatisticsCard.styles.ts
@@ -13,14 +13,20 @@ export const IconWrapper = styled.div`
`;
export const Icon = styled(AntIcon)`
- font-size: 1.5rem;
+ font-size: ${({ theme }) => theme.fontSizes.xxl};
`;
export const StatisticCard = styled(DashboardCard)`
- line-height: 1;
+ .ant-col,
+ .ant-space,
+ .ant-space-item,
+ .ant-typography {
+ line-height: 1;
+ }
+
overflow: hidden;
${Text} {
- color: ${(props) => `var(--${props.$color}-color)`};
+ color: ${(props) => props.theme[props.$color]};
}
`;
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/statisticsCards/statisticsCard/StatisticsInfo/StatisticsInfo.styles.ts b/src/components/medical-dashboard/statisticsCards/statisticsCard/StatisticsInfo/StatisticsInfo.styles.ts
index 18801d756..16a320274 100644
--- a/src/components/medical-dashboard/statisticsCards/statisticsCard/StatisticsInfo/StatisticsInfo.styles.ts
+++ b/src/components/medical-dashboard/statisticsCards/statisticsCard/StatisticsInfo/StatisticsInfo.styles.ts
@@ -1,23 +1,23 @@
import { BaseTypography } from '@app/components/common/BaseTypography/BaseTypography';
-import { FONT_SIZE, FONT_WEIGHT, media } from '@app/styles/themes/constants';
+import { media } from '@app/utils/utils';
import styled from 'styled-components';
export const Title = styled(BaseTypography.Text)`
- font-size: ${FONT_SIZE.xs};
- font-weight: ${FONT_WEIGHT.bold};
+ font-size: ${({ theme }) => theme.fontSizes.xs};
+ font-weight: ${({ theme }) => theme.fontWeights.bold};
- @media only screen and ${media.md} {
- font-size: ${FONT_SIZE.md};
+ @media only screen and (${media('md')}) {
+ font-size: ${({ theme }) => theme.fontSizes.md};
}
- @media only screen and ${media.xl} {
- font-size: ${FONT_SIZE.lg};
+ @media only screen and (${media('xl')}) {
+ font-size: ${({ theme }) => theme.fontSizes.lg};
}
`;
export const Text = styled(BaseTypography.Text)`
- font-size: ${FONT_SIZE.xs};
- font-weight: ${FONT_WEIGHT.medium};
+ font-size: ${({ theme }) => theme.fontSizes.xs};
+ font-weight: ${({ theme }) => theme.fontWeights.medium};
`;
export const IconWrapper = styled.span`
diff --git a/src/components/medical-dashboard/statisticsCards/statisticsCard/StatisticsProgress/StatisticsProgress.styles.ts b/src/components/medical-dashboard/statisticsCards/statisticsCard/StatisticsProgress/StatisticsProgress.styles.ts
index 4655c0bfe..d8c72a0b0 100644
--- a/src/components/medical-dashboard/statisticsCards/statisticsCard/StatisticsProgress/StatisticsProgress.styles.ts
+++ b/src/components/medical-dashboard/statisticsCards/statisticsCard/StatisticsProgress/StatisticsProgress.styles.ts
@@ -1,13 +1,12 @@
import { BaseTypography } from '@app/components/common/BaseTypography/BaseTypography';
-import { FONT_SIZE, FONT_WEIGHT } from '@app/styles/themes/constants';
import styled from 'styled-components';
export const ValueText = styled(BaseTypography.Text)`
- font-size: ${FONT_SIZE.md};
- font-weight: ${FONT_WEIGHT.semibold};
+ font-size: ${({ theme }) => theme.fontSizes.md};
+ font-weight: ${({ theme }) => theme.fontWeights.semibold};
`;
export const UnitText = styled(BaseTypography.Text)`
- font-size: ${FONT_SIZE.xxs};
- font-weight: ${FONT_WEIGHT.semibold};
+ font-size: ${({ theme }) => theme.fontSizes.xxs};
+ font-weight: ${({ theme }) => theme.fontWeights.semibold};
`;
diff --git a/src/components/medical-dashboard/statisticsCards/statisticsCard/StatisticsProgress/StatisticsProgress.tsx b/src/components/medical-dashboard/statisticsCards/statisticsCard/StatisticsProgress/StatisticsProgress.tsx
index e3494bb2a..8f0379236 100644
--- a/src/components/medical-dashboard/statisticsCards/statisticsCard/StatisticsProgress/StatisticsProgress.tsx
+++ b/src/components/medical-dashboard/statisticsCards/statisticsCard/StatisticsProgress/StatisticsProgress.tsx
@@ -12,7 +12,7 @@ export const StatisticsProgress: React.FC = ({ color, v
return (
(dayjsGenerateConfig);
+import styled from 'styled-components';
+import { BaseCalendar } from '@app/components/common/BaseCalendar/BaseCalendar';
interface Event {
$isPast: boolean;
}
-export const Wrapper = styled.div`
- background-color: var(--background-color);
-
- box-shadow: var(--box-shadow);
-`;
-
export const Event = styled.div`
position: absolute;
display: flex;
@@ -25,25 +14,14 @@ export const Event = styled.div`
right: 0;
width: 100%;
height: 100%;
- box-shadow: 0 5px 15px rgba(0, 89, 171, 0.3);
-
- font-weight: ${FONT_WEIGHT.bold};
-
- background: var(--secondary-background-color);
-
- ${(props) =>
- props.$isPast
- ? css`
- color: var(--text-main-color);
- `
- : css`
- color: var(--primary-color);
- `};
-
- border-radius: ${BORDER_RADIUS};
+ 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)};
+ border-radius: ${({ theme }) => theme.borderRadius};
`;
-export const Calendar = styled(AntCalendar)`
+export const Calendar = styled(BaseCalendar)`
.ant-picker-calendar-header {
display: none;
}
@@ -57,42 +35,39 @@ export const Calendar = styled(AntCalendar)`
}
.ant-picker-date-panel .ant-picker-content th {
- font-weight: ${FONT_WEIGHT.medium};
-
- font-size: ${FONT_SIZE.xs};
-
- color: var(--primary-color);
+ font-weight: ${({ theme }) => theme.fontWeights.medium};
+ font-size: ${({ theme }) => theme.fontSizes.xs};
+ color: ${({ theme }) => theme.primary};
}
.ant-picker-cell {
&.ant-picker-cell-today {
.ant-picker-cell-inner {
&::before {
- border-color: var(--secondary-color);
+ border-color: ${({ theme }) => theme.secondary};
}
}
}
&.ant-picker-cell-selected {
.ant-picker-cell-inner {
- box-shadow: 0 5px 15px rgba(0, 89, 171, 0.3);
-
- background: var(--primary-color);
+ box-shadow: ${({ theme }) => theme.treatmentCalendarEventBoxShadow};
+ background: ${({ theme }) => theme.primary};
.ant-picker-calendar-date-value,
${Event} {
- color: var(--white);
+ color: ${({ theme }) => theme.white};
}
.ant-picker-calendar-date-content > div {
- background: var(--primary-color);
+ background: ${({ theme }) => theme.primary};
}
}
}
.ant-picker-cell-inner {
- font-weight: ${FONT_WEIGHT.medium};
- font-size: ${FONT_SIZE.xs};
+ font-weight: ${({ theme }) => theme.fontWeights.medium};
+ font-size: ${({ theme }) => theme.fontSizes.xs};
height: 1.875rem;
width: 1.875rem;
display: flex;
diff --git a/src/components/medical-dashboard/treatmentCard/TreatmentCalendar/TreatmentCalendar.tsx b/src/components/medical-dashboard/treatmentCard/TreatmentCalendar/TreatmentCalendar.tsx
index 80499a964..e0e496350 100644
--- a/src/components/medical-dashboard/treatmentCard/TreatmentCalendar/TreatmentCalendar.tsx
+++ b/src/components/medical-dashboard/treatmentCard/TreatmentCalendar/TreatmentCalendar.tsx
@@ -53,7 +53,7 @@ export const TreatmentCalendar: React.FC = ({
{
+ cellRender={(value) => {
const today = Dates.getToday();
return calendar.map((event) => {
diff --git a/src/components/medical-dashboard/treatmentCard/TreatmentCard.tsx b/src/components/medical-dashboard/treatmentCard/TreatmentCard.tsx
index e664ee03d..26dff3f03 100644
--- a/src/components/medical-dashboard/treatmentCard/TreatmentCard.tsx
+++ b/src/components/medical-dashboard/treatmentCard/TreatmentCard.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useResponsive } from 'hooks/useResponsive';
import { TreatmentCalendar } from './TreatmentCalendar/TreatmentCalendar';
@@ -8,11 +8,26 @@ import { DashboardCard } from '../DashboardCard/DashboardCard';
import { CalendarEvent, getUserCalendar } from 'api/calendar.api';
import { ArrowLeftOutlined } from '@ant-design/icons';
import styled from 'styled-components';
-import { BaseButton } from '../../common/BaseButton/BaseButton';
+import { BaseButton } from '@app/components/common/BaseButton/BaseButton';
import { useAppSelector } from '@app/hooks/reduxHooks';
import { BaseCol } from '@app/components/common/BaseCol/BaseCol';
import { BaseRow } from '@app/components/common/BaseRow/BaseRow';
+const BackButtonWrapper = styled(BaseCol)`
+ position: relative;
+`;
+
+const BackButton = styled(BaseButton)`
+ position: absolute;
+ top: 0;
+ left: 0;
+ color: ${({ theme }) => theme.white};
+`;
+
+const RowStyled = styled(BaseRow)`
+ min-height: 21.75rem;
+`;
+
export const TreatmentCard: React.FC = () => {
const { isTablet } = useResponsive();
@@ -80,18 +95,3 @@ export const TreatmentCard: React.FC = () => {
);
};
-
-const BackButtonWrapper = styled(BaseCol)`
- position: relative;
-`;
-
-const BackButton = styled(BaseButton)`
- position: absolute;
- top: 0;
- left: 0;
- color: var(--white);
-`;
-
-const RowStyled = styled(BaseRow)`
- min-height: 21.75rem;
-`;
diff --git a/src/components/medical-dashboard/treatmentCard/TreatmentDoctor/TreatmentDoctor.styles.ts b/src/components/medical-dashboard/treatmentCard/TreatmentDoctor/TreatmentDoctor.styles.ts
index 6b87e2fdb..6ba4d3340 100644
--- a/src/components/medical-dashboard/treatmentCard/TreatmentDoctor/TreatmentDoctor.styles.ts
+++ b/src/components/medical-dashboard/treatmentCard/TreatmentDoctor/TreatmentDoctor.styles.ts
@@ -1,17 +1,17 @@
import { BaseCol } from '@app/components/common/BaseCol/BaseCol';
import styled from 'styled-components';
-import { BaseCard } from '../../../common/BaseCard/BaseCard';
+import { BaseCard } from '@app/components/common/BaseCard/BaseCard';
export const DoctorName = styled.span`
- font-size: 1.25rem;
- font-weight: bold;
+ font-size: ${({ theme }) => theme.fontSizes.xl};
+ font-weight: ${({ theme }) => theme.fontWeights.bold};
margin-top: 0.5rem;
margin-bottom: 1rem;
text-align: center;
`;
export const DoctorCard = styled(BaseCard)`
- background: linear-gradient(to bottom, var(--primary-color) 5rem, var(--secondary-background-color) 5rem);
+ background: ${({ theme }) => `linear-gradient(to bottom, ${theme.primary} 5rem, ${theme.secondaryBackground} 5rem)`};
`;
export const DoctorCardBody = styled.div`
@@ -28,7 +28,7 @@ export const LabelCol = styled(BaseCol)`
export const ValueCol = styled(BaseCol)``;
export const Tel = styled.a`
- color: var(--text-main-color);
+ color: ${({ theme }) => theme.textMain};
&:hover {
text-decoration: underline;
diff --git a/src/components/medical-dashboard/treatmentCard/TreatmentNotFound/TreatmentNotFound.styles.ts b/src/components/medical-dashboard/treatmentCard/TreatmentNotFound/TreatmentNotFound.styles.ts
index e4a5ffc3f..da8423c54 100644
--- a/src/components/medical-dashboard/treatmentCard/TreatmentNotFound/TreatmentNotFound.styles.ts
+++ b/src/components/medical-dashboard/treatmentCard/TreatmentNotFound/TreatmentNotFound.styles.ts
@@ -2,9 +2,9 @@ import { BaseImage } from '@app/components/common/BaseImage/BaseImage';
import styled from 'styled-components';
export const Text = styled.div`
- color: var(--primary-color);
+ color: ${({ theme }) => theme.primary};
text-align: center;
- font-size: 1.25rem;
+ font-size: ${({ theme }) => theme.fontSizes.xl};
margin: 1rem 0;
`;
diff --git a/src/components/medical-dashboard/treatmentCard/TreatmentNotFound/TreatmentNotFound.tsx b/src/components/medical-dashboard/treatmentCard/TreatmentNotFound/TreatmentNotFound.tsx
index 79901883b..dc112400f 100644
--- a/src/components/medical-dashboard/treatmentCard/TreatmentNotFound/TreatmentNotFound.tsx
+++ b/src/components/medical-dashboard/treatmentCard/TreatmentNotFound/TreatmentNotFound.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import { BaseCard } from '../../../common/BaseCard/BaseCard';
+import { BaseCard } from '@app/components/common/BaseCard/BaseCard';
import notFoundImg from 'assets/images/nothing-found.webp';
import { useTranslation } from 'react-i18next';
import * as S from './TreatmentNotFound.styles';
diff --git a/src/components/medical-dashboard/treatmentCard/TreatmentPanel.tsx b/src/components/medical-dashboard/treatmentCard/TreatmentPanel.tsx
index 9d9ed49ca..c2eeacdb2 100644
--- a/src/components/medical-dashboard/treatmentCard/TreatmentPanel.tsx
+++ b/src/components/medical-dashboard/treatmentCard/TreatmentPanel.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
import { CalendarEvent } from 'api/calendar.api';
import { getDoctorsData, Doctor } from 'api/doctors.api';
import { TreatmentDoctor } from './TreatmentDoctor/TreatmentDoctor';
-import { specifities } from '../../../constants/specifities';
+import { specifities } from '@app/constants/specifities';
import { TreatmentNotFound } from './TreatmentNotFound/TreatmentNotFound';
interface TreatmentPanelProps {
diff --git a/src/components/nft-dashboard/Balance/Balance.styles.ts b/src/components/nft-dashboard/Balance/Balance.styles.ts
index bbcdc80ec..10f5a5c38 100644
--- a/src/components/nft-dashboard/Balance/Balance.styles.ts
+++ b/src/components/nft-dashboard/Balance/Balance.styles.ts
@@ -1,29 +1,23 @@
import { BaseTypography } from '@app/components/common/BaseTypography/BaseTypography';
-import { FONT_FAMILY, FONT_SIZE, FONT_WEIGHT } from '@app/styles/themes/constants';
import styled from 'styled-components';
export const TitleText = styled(BaseTypography.Title)`
&.ant-typography {
margin-bottom: 1.25rem;
-
- font-size: ${FONT_SIZE.xs};
+ font-size: ${({ theme }) => theme.fontSizes.xs};
}
`;
export const TitleBalanceText = styled(BaseTypography.Title)`
&.ant-typography {
margin-bottom: 0;
-
- font-family: ${FONT_FAMILY.secondary};
+ font-family: ${({ theme }) => theme.fontFamilies.secondary};
}
`;
export const SubtitleBalanceText = styled(BaseTypography.Text)`
- font-family: ${FONT_FAMILY.secondary};
-
- font-size: ${FONT_SIZE.xs};
-
- font-weight: ${FONT_WEIGHT.regular};
-
- color: var(--text-nft-light-color);
+ font-family: ${({ theme }) => theme.fontFamilies.secondary};
+ font-size: ${({ theme }) => theme.fontSizes.xs};
+ font-weight: ${({ theme }) => theme.fontWeights.regular};
+ color: ${({ theme }) => theme.nft.textLight};
`;
diff --git a/src/components/nft-dashboard/Balance/components/TopUpBalanceButton/TopUpBalanceButton.styles.ts b/src/components/nft-dashboard/Balance/components/TopUpBalanceButton/TopUpBalanceButton.styles.ts
index 2e2752134..eefd49c62 100644
--- a/src/components/nft-dashboard/Balance/components/TopUpBalanceButton/TopUpBalanceButton.styles.ts
+++ b/src/components/nft-dashboard/Balance/components/TopUpBalanceButton/TopUpBalanceButton.styles.ts
@@ -1,10 +1,8 @@
import { BaseButton } from '@app/components/common/BaseButton/BaseButton';
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
export const TopUpButton = styled(BaseButton)`
- ${(props) =>
- props.type === 'ghost' &&
- css`
- color: var(--text-secondary-color);
- `};
+ &.ant-btn-background-ghost {
+ color: ${({ theme }) => theme.textSecondary};
+ }
`;
diff --git a/src/components/nft-dashboard/Balance/components/TopUpBalanceButton/TopUpBalanceButton.tsx b/src/components/nft-dashboard/Balance/components/TopUpBalanceButton/TopUpBalanceButton.tsx
index 2cdfbfaac..b2cbc275b 100644
--- a/src/components/nft-dashboard/Balance/components/TopUpBalanceButton/TopUpBalanceButton.tsx
+++ b/src/components/nft-dashboard/Balance/components/TopUpBalanceButton/TopUpBalanceButton.tsx
@@ -6,9 +6,10 @@ import * as S from './TopUpBalanceButton.styles';
export const TopUpBalanceButton: React.FC<{ onClick: () => void }> = ({ onClick }) => {
const { t } = useTranslation();
const { theme } = useAppSelector((state) => state.theme);
+ const isDark = theme === 'dark';
return (
-
+
{t('nft.topUpBalance')}
);
diff --git a/src/components/nft-dashboard/Balance/components/TopUpBalanceForm/TopUpBalanceForm.styles.ts b/src/components/nft-dashboard/Balance/components/TopUpBalanceForm/TopUpBalanceForm.styles.ts
index 341ef6836..a0eff5c57 100644
--- a/src/components/nft-dashboard/Balance/components/TopUpBalanceForm/TopUpBalanceForm.styles.ts
+++ b/src/components/nft-dashboard/Balance/components/TopUpBalanceForm/TopUpBalanceForm.styles.ts
@@ -1,6 +1,5 @@
import styled from 'styled-components';
import { BaseRadio } from '@app/components/common/BaseRadio/BaseRadio';
-import { FONT_SIZE } from '@app/styles/themes/constants';
import { BaseTypography } from '@app/components/common/BaseTypography/BaseTypography';
export const ContentWrapper = styled.div`
@@ -16,8 +15,8 @@ export const BlockWrapper = styled.div`
`;
export const Label = styled(BaseTypography.Text)`
- color: var(--text-nft-light-color);
- font-size: ${FONT_SIZE.xs};
+ color: ${({ theme }) => theme.nft.textLight};
+ font-size: ${({ theme }) => theme.fontSizes.xs};
`;
export const ButtonsWrapper = styled.div`
diff --git a/src/components/nft-dashboard/Balance/components/TopUpPaymentCard/TopUpPaymentCard.styles.ts b/src/components/nft-dashboard/Balance/components/TopUpPaymentCard/TopUpPaymentCard.styles.ts
index 3fa884814..c29ef2c13 100644
--- a/src/components/nft-dashboard/Balance/components/TopUpPaymentCard/TopUpPaymentCard.styles.ts
+++ b/src/components/nft-dashboard/Balance/components/TopUpPaymentCard/TopUpPaymentCard.styles.ts
@@ -10,7 +10,7 @@ export const Wrapper = styled.div`
export const CardIssuerImg = styled(BaseAvatar)`
flex-shrink: 0;
- border: 1px solid var(--border-nft-color);
+ border: 1px solid ${({ theme }) => theme.nft.border};
padding: 3px;
`;
diff --git a/src/components/nft-dashboard/activityStory/ActivityStory.styles.ts b/src/components/nft-dashboard/activityStory/ActivityStory.styles.ts
index 7ef77dec7..9376d9855 100644
--- a/src/components/nft-dashboard/activityStory/ActivityStory.styles.ts
+++ b/src/components/nft-dashboard/activityStory/ActivityStory.styles.ts
@@ -1,15 +1,12 @@
import { BaseRow } from '@app/components/common/BaseRow/BaseRow';
import { BaseTypography } from '@app/components/common/BaseTypography/BaseTypography';
-import { FONT_SIZE, FONT_WEIGHT } from '@app/styles/themes/constants';
import styled from 'styled-components';
export const Title = styled(BaseTypography.Title)`
&.ant-typography {
margin-bottom: 0;
-
- font-weight: ${FONT_WEIGHT.semibold};
-
- font-size: ${FONT_SIZE.xs};
+ font-weight: ${({ theme }) => theme.fontWeights.semibold};
+ font-size: ${({ theme }) => theme.fontSizes.xs};
}
`;
diff --git a/src/components/nft-dashboard/activityStory/ActivityStoryItem/ActivityStoryItem.styles.ts b/src/components/nft-dashboard/activityStory/ActivityStoryItem/ActivityStoryItem.styles.ts
index 9932b4887..ee0e6a394 100644
--- a/src/components/nft-dashboard/activityStory/ActivityStoryItem/ActivityStoryItem.styles.ts
+++ b/src/components/nft-dashboard/activityStory/ActivityStoryItem/ActivityStoryItem.styles.ts
@@ -1,5 +1,4 @@
import { BaseTypography } from '@app/components/common/BaseTypography/BaseTypography';
-import { FONT_FAMILY, FONT_SIZE, FONT_WEIGHT } from '@app/styles/themes/constants';
import styled from 'styled-components';
interface StatusProps {
@@ -7,27 +6,22 @@ interface StatusProps {
}
export const Title = styled(BaseTypography.Text)`
- font-size: ${FONT_SIZE.xs};
-
- font-family: ${FONT_FAMILY.secondary};
+ font-size: ${({ theme }) => theme.fontSizes.xs};
+ font-family: ${({ theme }) => theme.fontFamilies.secondary};
`;
export const Status = styled(BaseTypography.Text)`
- color: ${(props) => `var(--${props.$color}-color)`};
-
- font-size: ${FONT_SIZE.xs};
-
- font-family: ${FONT_FAMILY.secondary};
+ color: ${(props) => props.theme[props.$color]};
+ font-size: ${({ theme }) => theme.fontSizes.xs};
+ font-family: ${({ theme }) => theme.fontFamilies.secondary};
`;
export const DateText = styled(Title)`
- font-weight: ${FONT_WEIGHT.regular};
+ font-weight: ${({ theme }) => theme.fontWeights.regular};
`;
export const Text = styled(BaseTypography.Text)`
- font-size: ${FONT_SIZE.xs};
-
- font-weight: ${FONT_WEIGHT.regular};
-
- font-family: ${FONT_FAMILY.secondary};
+ font-size: ${({ theme }) => theme.fontSizes.xs};
+ font-weight: ${({ theme }) => theme.fontWeights.regular};
+ font-family: ${({ theme }) => theme.fontFamilies.secondary};
`;
diff --git a/src/components/nft-dashboard/common/NFTCard/NFTCard.styles.ts b/src/components/nft-dashboard/common/NFTCard/NFTCard.styles.ts
index 6087e7ed5..cfdda1e17 100644
--- a/src/components/nft-dashboard/common/NFTCard/NFTCard.styles.ts
+++ b/src/components/nft-dashboard/common/NFTCard/NFTCard.styles.ts
@@ -6,11 +6,13 @@ interface CardInternalProps {
}
export const Card = styled(BaseCard)`
- box-shadow: var(--box-shadow-nft-color);
+ &.ant-card:not(.ant-card-bordered) {
+ box-shadow: ${({ theme }) => theme.nft.boxShadow};
+ }
${(props) =>
props.$isSider &&
css`
- background: var(--additional-background-color);
- `};
+ background: ${({ theme }) => theme.additionalBackground};
+ `}
`;
diff --git a/src/components/nft-dashboard/common/NFTCardHeader/NFTCardHeader.styles.ts b/src/components/nft-dashboard/common/NFTCardHeader/NFTCardHeader.styles.ts
index b987a83fb..71daf22bc 100644
--- a/src/components/nft-dashboard/common/NFTCardHeader/NFTCardHeader.styles.ts
+++ b/src/components/nft-dashboard/common/NFTCardHeader/NFTCardHeader.styles.ts
@@ -1,12 +1,12 @@
import { BaseRow } from '@app/components/common/BaseRow/BaseRow';
import { BaseTypography } from '@app/components/common/BaseTypography/BaseTypography';
-import { FONT_SIZE, media } from '@app/styles/themes/constants';
+import { media } from '@app/utils/utils';
import styled from 'styled-components';
export const WrapperRow = styled(BaseRow)`
margin-bottom: 1.5rem;
- @media only screen and ${media.xl} {
+ @media only screen and (${media('xl')}) {
margin-bottom: 2.625rem;
}
`;
@@ -14,11 +14,10 @@ export const WrapperRow = styled(BaseRow)`
export const Title = styled(BaseTypography.Title)`
&.ant-typography {
margin-bottom: 0;
+ font-size: ${({ theme }) => theme.fontSizes.md};
- font-size: ${FONT_SIZE.md};
-
- @media only screen and ${media.xl} {
- font-size: ${FONT_SIZE.lg};
+ @media only screen and (${media('xl')}) {
+ font-size: ${({ theme }) => theme.fontSizes.lg};
}
}
`;
diff --git a/src/components/nft-dashboard/common/ViewAll/ViewAll.styles.ts b/src/components/nft-dashboard/common/ViewAll/ViewAll.styles.ts
index 660ea9bcc..b94e3daed 100644
--- a/src/components/nft-dashboard/common/ViewAll/ViewAll.styles.ts
+++ b/src/components/nft-dashboard/common/ViewAll/ViewAll.styles.ts
@@ -1,21 +1,21 @@
import styled, { css } from 'styled-components';
import { BaseButton } from '@app/components/common/BaseButton/BaseButton';
-import { FONT_SIZE, FONT_WEIGHT } from '@app/styles/themes/constants';
interface ViewAllInternalProps {
$bordered: boolean;
}
export const ViewAllBtn = styled(BaseButton)`
- font-size: ${FONT_SIZE.xs};
+ &.ant-btn {
+ font-size: ${({ theme }) => theme.fontSizes.xs};
+ }
- font-weight: ${FONT_WEIGHT.medium};
-
- color: var(--text-main-color);
+ font-weight: ${({ theme }) => theme.fontWeights.medium};
+ color: ${({ theme }) => theme.textMain};
${(props) =>
props.$bordered &&
css`
- border-bottom: 0.2px solid var(--border-nft-color);
- `};
+ border-bottom: 0.2px solid ${props.theme.nft.border};
+ `}
`;
diff --git a/src/components/nft-dashboard/recentActivity/recentActivityFeed/RecentActivityItem/RecentActivityItem.styles.ts b/src/components/nft-dashboard/recentActivity/recentActivityFeed/RecentActivityItem/RecentActivityItem.styles.ts
index 36e4563c0..9583e9ca6 100644
--- a/src/components/nft-dashboard/recentActivity/recentActivityFeed/RecentActivityItem/RecentActivityItem.styles.ts
+++ b/src/components/nft-dashboard/recentActivity/recentActivityFeed/RecentActivityItem/RecentActivityItem.styles.ts
@@ -1,10 +1,10 @@
import styled from 'styled-components';
import { NFTCard } from '@app/components/nft-dashboard/common/NFTCard/NFTCard';
-import { FONT_SIZE, media, FONT_FAMILY } from '@app/styles/themes/constants';
+import { media } from '@app/utils/utils';
import { BaseTypography } from '@app/components/common/BaseTypography/BaseTypography';
export const ActivityCard = styled(NFTCard)`
- box-shadow: var(--box-shadow-nft-secondary-color);
+ box-shadow: ${({ theme }) => theme.nft.boxShadowSecondary};
`;
export const Wrapper = styled.div`
@@ -23,12 +23,9 @@ export const IconWrapper = styled.div`
display: flex;
align-items: center;
justify-content: center;
-
- color: var(--text-secondary-color);
-
- background-color: var(--primary-color);
-
- font-size: ${FONT_SIZE.xs};
+ color: ${({ theme }) => theme.textSecondary};
+ background-color: ${({ theme }) => theme.primary};
+ font-size: ${({ theme }) => theme.fontSizes.xs};
`;
export const InfoWrapper = styled.div`
@@ -58,31 +55,26 @@ export const TitleWrapper = styled.div`
export const Title = styled(BaseTypography.Title)`
&.ant-typography {
margin-bottom: 0;
+ font-size: ${({ theme }) => theme.fontSizes.xs};
- font-size: ${FONT_SIZE.xs};
-
- @media only screen and ${media.xl} {
- font-size: ${FONT_SIZE.md};
+ @media only screen and (${media('xl')}) {
+ font-size: ${({ theme }) => theme.fontSizes.md};
}
}
`;
export const Text = styled(BaseTypography.Text)`
display: block;
+ font-size: ${({ theme }) => theme.fontSizes.xxs};
+ color: ${({ theme }) => theme.nft.textLight};
+ font-family: ${({ theme }) => theme.fontFamilies.secondary};
- font-size: ${FONT_SIZE.xxs};
-
- color: var(--text-nft-light-color);
-
- font-family: ${FONT_FAMILY.secondary};
-
- @media only screen and ${media.xl} {
- font-size: ${FONT_SIZE.xs};
+ @media only screen and (${media('xl')}) {
+ font-size: ${({ theme }) => theme.fontSizes.xs};
}
`;
export const DateText = styled(Text)`
font-style: italic;
-
- font-family: ${FONT_FAMILY.main};
+ font-family: ${({ theme }) => theme.fontFamilies.main};
`;
diff --git a/src/components/nft-dashboard/recentActivity/recentActivityFilters/RecentActivityFilter.styles.ts b/src/components/nft-dashboard/recentActivity/recentActivityFilters/RecentActivityFilter.styles.ts
index 929bda4ac..f96e16bda 100644
--- a/src/components/nft-dashboard/recentActivity/recentActivityFilters/RecentActivityFilter.styles.ts
+++ b/src/components/nft-dashboard/recentActivity/recentActivityFilters/RecentActivityFilter.styles.ts
@@ -1,17 +1,14 @@
import { BaseTypography } from '@app/components/common/BaseTypography/BaseTypography';
-import { FONT_SIZE, FONT_FAMILY, media } from '@app/styles/themes/constants';
+import { media } from '@app/utils/utils';
import styled from 'styled-components';
export const Title = styled(BaseTypography.Text)`
padding: 0 4rem 0.75rem 0;
+ font-size: ${({ theme }) => theme.fontSizes.xs};
+ font-family: ${({ theme }) => theme.fontFamilies.secondary};
+ border-bottom: 0.2px solid ${({ theme }) => theme.nft.border};
- font-size: ${FONT_SIZE.xs};
-
- font-family: ${FONT_FAMILY.secondary};
-
- border-bottom: 0.2px solid var(--border-nft-color);
-
- @media only screen and ${media.xl} {
- font-size: ${FONT_SIZE.md};
+ @media only screen and (${media('xl')}) {
+ font-size: ${({ theme }) => theme.fontSizes.md};
}
`;
diff --git a/src/components/nft-dashboard/recently-added/RecentlyAddedNft.styles.ts b/src/components/nft-dashboard/recently-added/RecentlyAddedNft.styles.ts
index 13b8425b2..58faee5a7 100644
--- a/src/components/nft-dashboard/recently-added/RecentlyAddedNft.styles.ts
+++ b/src/components/nft-dashboard/recently-added/RecentlyAddedNft.styles.ts
@@ -1,6 +1,6 @@
import styled from 'styled-components';
import { BaseButton } from '@app/components/common/BaseButton/BaseButton';
-import { BREAKPOINTS } from '@app/styles/themes/constants';
+import { mediaMax } from '@app/utils/utils';
export const SectionWrapper = styled.div`
.slick-slide > div {
@@ -14,7 +14,7 @@ export const SectionWrapper = styled.div`
margin-bottom: -40px;
}
- @media only screen and (max-width: ${BREAKPOINTS.md - 0.02}px) {
+ @media only screen and (${mediaMax('md')}) {
display: flex;
flex-direction: column;
width: 100%;
@@ -33,5 +33,5 @@ export const CardWrapper = styled.div`
`;
export const ArrowBtn = styled(BaseButton)`
- color: var(--text-nft-light-color);
+ color: ${({ theme }) => theme.nft.textLight};
`;
diff --git a/src/components/nft-dashboard/recently-added/RecentlyAddedNft.tsx b/src/components/nft-dashboard/recently-added/RecentlyAddedNft.tsx
index d5233b2e2..377a83a06 100644
--- a/src/components/nft-dashboard/recently-added/RecentlyAddedNft.tsx
+++ b/src/components/nft-dashboard/recently-added/RecentlyAddedNft.tsx
@@ -1,7 +1,7 @@
import React, { useEffect, useMemo, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { LeftOutlined, RightOutlined } from '@ant-design/icons';
-import { BaseCarousel } from '@app/components/common/BaseCarousel/Carousel';
+import { BaseCarousel } from '@app/components/common/BaseCarousel/BaseCarousel';
import { NFTCardHeader } from '@app/components/nft-dashboard/common/NFTCardHeader/NFTCardHeader';
import { ViewAll } from '@app/components/nft-dashboard/common/ViewAll/ViewAll';
import { NftCard } from '@app/components/nft-dashboard/recently-added/nft-card/NftCard';
diff --git a/src/components/nft-dashboard/recently-added/nft-card/NftCard.styles.ts b/src/components/nft-dashboard/recently-added/nft-card/NftCard.styles.ts
index d0ba9bfe0..3172aab12 100644
--- a/src/components/nft-dashboard/recently-added/nft-card/NftCard.styles.ts
+++ b/src/components/nft-dashboard/recently-added/nft-card/NftCard.styles.ts
@@ -1,6 +1,6 @@
import styled from 'styled-components';
import { NFTCard } from '@app/components/nft-dashboard/common/NFTCard/NFTCard';
-import { FONT_SIZE, FONT_WEIGHT, FONT_FAMILY, media, BREAKPOINTS, BORDER_RADIUS } from '@app/styles/themes/constants';
+import { media, mediaMax } from '@app/utils/utils';
import { BaseTypography } from '@app/components/common/BaseTypography/BaseTypography';
interface CardInternalProps {
@@ -12,8 +12,8 @@ export const NftImage = styled.img`
width: 100%;
height: 195px;
object-fit: cover;
- border-top-left-radius: ${BORDER_RADIUS};
- border-top-right-radius: ${BORDER_RADIUS};
+ border-top-left-radius: ${({ theme }) => theme.borderRadius};
+ border-top-right-radius: ${({ theme }) => theme.borderRadius};
`;
export const Title = styled(BaseTypography.Title)`
@@ -22,8 +22,7 @@ export const Title = styled(BaseTypography.Title)`
&.ant-typography {
margin-bottom: 0;
-
- font-size: ${FONT_SIZE.md};
+ font-size: ${({ theme }) => theme.fontSizes.md};
}
`;
@@ -37,13 +36,13 @@ export const InfoRow = styled.div`
justify-content: space-between;
margin-bottom: 0.625rem;
- @media only screen and (max-width: ${BREAKPOINTS.md - 0.02}px) {
+ @media only screen and (${mediaMax('md')}) {
&:first-of-type {
margin-bottom: 0;
}
}
- @media only screen and ${media.md} {
+ @media only screen and (${media('md')}) {
margin-bottom: 0.25rem;
}
@@ -71,47 +70,38 @@ export const InfoText = styled.span`
display: block;
transition: all 0.5s ease;
letter-spacing: 0.02em;
+ font-weight: ${({ theme }) => theme.fontWeights.regular};
+ font-size: ${({ theme }) => theme.fontSizes.xxs};
+ font-family: ${({ theme }) => theme.fontFamilies.secondary};
+ color: ${({ theme }) => theme.nft.textLight};
- font-weight: ${FONT_WEIGHT.regular};
-
- font-size: ${FONT_SIZE.xxs};
-
- font-family: ${FONT_FAMILY.secondary};
-
- color: var(--text-nft-light-color);
-
- @media only screen and ${media.xl} {
- font-size: ${FONT_SIZE.xs};
+ @media only screen and (${media('xl')}) {
+ font-size: ${({ theme }) => theme.fontSizes.xs};
}
`;
export const CurrentBid = styled(InfoText)`
- font-family: ${FONT_FAMILY.secondary};
-
- color: var(--text-main-color);
+ font-family: ${({ theme }) => theme.fontFamilies.secondary};
+ color: ${({ theme }) => theme.textMain};
`;
export const BidCrypto = styled.span`
transition: all 0.5s ease;
+ font-size: ${({ theme }) => theme.fontSizes.xs};
- font-size: ${FONT_SIZE.xs};
-
- @media only screen and ${media.xl} {
- font-size: ${FONT_SIZE.md};
+ @media only screen and (${media('xl')}) {
+ font-size: ${({ theme }) => theme.fontSizes.md};
}
`;
export const Bid = styled(CurrentBid)`
- font-size: ${FONT_SIZE.xs};
+ font-size: ${({ theme }) => theme.fontSizes.xs};
+ color: ${({ theme }) => theme.textMain};
+ font-weight: ${({ theme }) => theme.fontWeights.semibold};
+ font-family: ${({ theme }) => theme.fontFamilies.main};
- color: var(--text-main-color);
-
- font-weight: ${FONT_WEIGHT.semibold};
-
- font-family: ${FONT_FAMILY.main};
-
- @media only screen and ${media.xl} {
- font-size: ${FONT_SIZE.md};
+ @media only screen and (${media('xl')}) {
+ font-size: ${({ theme }) => theme.fontSizes.md};
}
`;
@@ -135,16 +125,10 @@ export const Card = styled(NFTCard)`
${Title} {
animation: titleIn 0.5s ease;
animation-fill-mode: forwards;
-
- color: var(--text-secondary-color);
- }
-
- ${InfoText} {
- color: var(--text-secondary-color);
}
- ${BidCrypto} {
- color: var(--text-secondary-color);
+ ${InfoText}, ${Title}, ${BidCrypto} {
+ color: ${({ theme }) => theme.textSecondary};
}
}
diff --git a/src/components/nft-dashboard/totalEarning/TotalEarning.styles.ts b/src/components/nft-dashboard/totalEarning/TotalEarning.styles.ts
index 1c9888edc..65af44a47 100644
--- a/src/components/nft-dashboard/totalEarning/TotalEarning.styles.ts
+++ b/src/components/nft-dashboard/totalEarning/TotalEarning.styles.ts
@@ -1,5 +1,4 @@
import { BaseTypography } from '@app/components/common/BaseTypography/BaseTypography';
-import { FONT_SIZE, FONT_WEIGHT, FONT_FAMILY } from '@app/styles/themes/constants';
import styled from 'styled-components';
interface ValueTextProps {
@@ -9,23 +8,18 @@ interface ValueTextProps {
export const Title = styled(BaseTypography.Title)`
&.ant-typography {
margin-bottom: 0;
-
- font-size: ${FONT_SIZE.xs};
+ font-size: ${({ theme }) => theme.fontSizes.xs};
}
`;
export const Text = styled(BaseTypography.Text)`
- font-size: ${FONT_SIZE.xxs};
-
- font-weight: ${FONT_WEIGHT.regular};
-
- font-family: ${FONT_FAMILY.secondary};
+ font-size: ${({ theme }) => theme.fontSizes.xxs};
+ font-weight: ${({ theme }) => theme.fontWeights.regular};
+ font-family: ${({ theme }) => theme.fontFamilies.secondary};
`;
export const ValueText = styled(BaseTypography.Text)`
- font-size: ${FONT_SIZE.xs};
-
- font-family: ${FONT_FAMILY.secondary};
-
- color: ${(props) => `var(--${props.$color}-color)`};
+ font-size: ${({ theme }) => theme.fontSizes.xs};
+ font-family: ${({ theme }) => theme.fontFamilies.secondary};
+ color: ${(props) => props.theme[props.$color]};
`;
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/nft-dashboard/trending-collections/TrendingCollections.styles.ts b/src/components/nft-dashboard/trending-collections/TrendingCollections.styles.ts
index 13b8425b2..58faee5a7 100644
--- a/src/components/nft-dashboard/trending-collections/TrendingCollections.styles.ts
+++ b/src/components/nft-dashboard/trending-collections/TrendingCollections.styles.ts
@@ -1,6 +1,6 @@
import styled from 'styled-components';
import { BaseButton } from '@app/components/common/BaseButton/BaseButton';
-import { BREAKPOINTS } from '@app/styles/themes/constants';
+import { mediaMax } from '@app/utils/utils';
export const SectionWrapper = styled.div`
.slick-slide > div {
@@ -14,7 +14,7 @@ export const SectionWrapper = styled.div`
margin-bottom: -40px;
}
- @media only screen and (max-width: ${BREAKPOINTS.md - 0.02}px) {
+ @media only screen and (${mediaMax('md')}) {
display: flex;
flex-direction: column;
width: 100%;
@@ -33,5 +33,5 @@ export const CardWrapper = styled.div`
`;
export const ArrowBtn = styled(BaseButton)`
- color: var(--text-nft-light-color);
+ color: ${({ theme }) => theme.nft.textLight};
`;
diff --git a/src/components/nft-dashboard/trending-collections/TrendingCollections.tsx b/src/components/nft-dashboard/trending-collections/TrendingCollections.tsx
index d894162c8..f49446317 100644
--- a/src/components/nft-dashboard/trending-collections/TrendingCollections.tsx
+++ b/src/components/nft-dashboard/trending-collections/TrendingCollections.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useMemo, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
import Slider from 'react-slick';
import { LeftOutlined, RightOutlined } from '@ant-design/icons';
-import { BaseCarousel } from '@app/components/common/BaseCarousel/Carousel';
+import { BaseCarousel } from '@app/components/common/BaseCarousel/BaseCarousel';
import { ViewAll } from '@app/components/nft-dashboard/common/ViewAll/ViewAll';
import { NFTCardHeader } from '@app/components/nft-dashboard/common/NFTCardHeader/NFTCardHeader';
import { TrendingCollection } from '@app/components/nft-dashboard/trending-collections/collection/TrendingCollection';
diff --git a/src/components/nft-dashboard/trending-collections/collection/TrendingCollection.styles.ts b/src/components/nft-dashboard/trending-collections/collection/TrendingCollection.styles.ts
index c6a567dec..e34727188 100644
--- a/src/components/nft-dashboard/trending-collections/collection/TrendingCollection.styles.ts
+++ b/src/components/nft-dashboard/trending-collections/collection/TrendingCollection.styles.ts
@@ -1,8 +1,9 @@
import styled from 'styled-components';
import { BaseButton } from '@app/components/common/BaseButton/BaseButton';
import { NFTCard } from '@app/components/nft-dashboard/common/NFTCard/NFTCard';
-import { FONT_SIZE, FONT_WEIGHT, FONT_FAMILY, media, BORDER_RADIUS } from '@app/styles/themes/constants';
+import { media } from '@app/utils/utils';
import { BaseTypography } from '@app/components/common/BaseTypography/BaseTypography';
+
interface CardInternalProps {
$img: string;
}
@@ -12,8 +13,8 @@ export const CollectionImage = styled.img`
width: 100%;
height: 126px;
object-fit: cover;
- border-top-left-radius: ${BORDER_RADIUS};
- border-top-right-radius: ${BORDER_RADIUS};
+ border-top-left-radius: ${({ theme }) => theme.borderRadius};
+ border-top-right-radius: ${({ theme }) => theme.borderRadius};
`;
export const NftCollectionInfo = styled.div`
@@ -36,41 +37,32 @@ export const Title = styled(BaseTypography.Title)`
&.ant-typography {
margin-bottom: 0;
-
- font-size: ${FONT_SIZE.md};
+ font-size: ${({ theme }) => theme.fontSizes.md};
}
`;
export const Text = styled(BaseTypography.Text)`
transition: all 0.5s ease;
-
- font-size: ${FONT_SIZE.xs};
-
- font-weight: ${FONT_WEIGHT.semibold};
+ font-size: ${({ theme }) => theme.fontSizes.xs};
+ font-weight: ${({ theme }) => theme.fontWeights.semibold};
`;
export const OwnerText = styled(Text)`
letter-spacing: 0.02em;
+ font-size: ${({ theme }) => theme.fontSizes.xxs};
+ font-weight: ${({ theme }) => theme.fontWeights.regular};
+ font-family: ${({ theme }) => theme.fontFamilies.secondary};
+ color: ${({ theme }) => theme.nft.textLight};
- font-size: ${FONT_SIZE.xxs};
-
- font-weight: ${FONT_WEIGHT.regular};
-
- font-family: ${FONT_FAMILY.secondary};
-
- color: var(--text-nft-light-color);
-
- @media only screen and ${media.xl} {
- font-size: ${FONT_SIZE.xs};
+ @media only screen and (${media('xl')}) {
+ font-size: ${({ theme }) => theme.fontSizes.xs};
}
`;
export const USDText = styled(BaseTypography.Text)`
transition: all 0.5s ease;
-
- font-weight: ${FONT_WEIGHT.semibold};
-
- font-size: ${FONT_SIZE.xs};
+ font-weight: ${({ theme }) => theme.fontWeights.semibold};
+ font-size: ${({ theme }) => theme.fontSizes.xs};
`;
export const AuthorAvatarWrapper = styled.div`
@@ -78,8 +70,7 @@ export const AuthorAvatarWrapper = styled.div`
position: absolute;
top: -45px;
border-radius: 50%;
-
- border: 2px solid var(--text-secondary-color);
+ border: 2px solid ${({ theme }) => theme.textSecondary};
`;
export const BidButton = styled(BaseButton)`
@@ -88,12 +79,12 @@ export const BidButton = styled(BaseButton)`
top: 20px;
right: 20px;
padding: 10px 14px;
+ font-size: ${({ theme }) => theme.fontSizes.md};
- color: var(--text-secondary-color);
-
- border-color: var(--text-secondary-color);
-
- font-size: ${FONT_SIZE.md};
+ &.ant-btn-background-ghost {
+ color: ${({ theme }) => theme.textSecondary};
+ border-color: ${({ theme }) => theme.textSecondary};
+ }
`;
export const Card = styled(NFTCard)`
@@ -114,7 +105,7 @@ export const Card = styled(NFTCard)`
}
${Title}, ${Text}, ${USDText} {
- color: var(--text-secondary-color);
+ color: ${({ theme }) => theme.textSecondary};
}
${AuthorAvatarWrapper} {
diff --git a/src/components/nft-dashboard/trending-collections/collection/TrendingCollection.tsx b/src/components/nft-dashboard/trending-collections/collection/TrendingCollection.tsx
index 4d64a0336..2be9a783d 100644
--- a/src/components/nft-dashboard/trending-collections/collection/TrendingCollection.tsx
+++ b/src/components/nft-dashboard/trending-collections/collection/TrendingCollection.tsx
@@ -12,7 +12,7 @@ export const TrendingCollection: React.FC = ({ title, owner, u
return (
- {t('nft.bid')}
+ {t('nft.bid')}
diff --git a/src/components/nft-dashboard/trending-creators/TrendingCreators.styles.ts b/src/components/nft-dashboard/trending-creators/TrendingCreators.styles.ts
index 93f9f12a0..175f3f229 100644
--- a/src/components/nft-dashboard/trending-creators/TrendingCreators.styles.ts
+++ b/src/components/nft-dashboard/trending-creators/TrendingCreators.styles.ts
@@ -1,10 +1,10 @@
import styled from 'styled-components';
import { BaseModal } from '@app/components/common/BaseModal/BaseModal';
import { BaseButton } from '@app/components/common/BaseButton/BaseButton';
-import { BREAKPOINTS, media } from '@app/styles/themes/constants';
+import { media, mediaMax } from '@app/utils/utils';
export const StoriesModal = styled(BaseModal)`
- @media only screen and (max-width: ${BREAKPOINTS.md - 0.02}px) {
+ @media only screen and (${mediaMax('md')}) {
top: 0;
padding: 0;
margin: 0;
@@ -18,19 +18,18 @@ export const StoriesModal = styled(BaseModal)`
.ant-modal-close {
z-index: 999999;
top: 1rem;
-
- color: var(--text-secondary-color);
+ color: ${({ theme }) => theme.textSecondary};
}
`;
export const ArrowBtn = styled(BaseButton)`
- color: var(--text-nft-light-color);
+ color: ${({ theme }) => theme.nft.textLight};
`;
export const CardWrapper = styled.div`
margin: 0 0.40625rem;
- @media only screen and ${media.xl} {
+ @media only screen and (${media('xl')}) {
margin: 0 0.625rem;
}
`;
diff --git a/src/components/nft-dashboard/trending-creators/TrendingCreators.tsx b/src/components/nft-dashboard/trending-creators/TrendingCreators.tsx
index 34ca5ef69..24ed14236 100644
--- a/src/components/nft-dashboard/trending-creators/TrendingCreators.tsx
+++ b/src/components/nft-dashboard/trending-creators/TrendingCreators.tsx
@@ -3,7 +3,7 @@ import Stories from 'react-insta-stories';
import Slider from 'react-slick';
import { LeftOutlined, RightOutlined } from '@ant-design/icons';
import { useTranslation } from 'react-i18next';
-import { BaseCarousel } from '@app/components/common/BaseCarousel/Carousel';
+import { BaseCarousel } from '@app/components/common/BaseCarousel/BaseCarousel';
import { NFTCardHeader } from '@app/components/nft-dashboard/common/NFTCardHeader/NFTCardHeader';
import { ViewAll } from '@app/components/nft-dashboard/common/ViewAll/ViewAll';
import { TrendingCreatorsStory } from '@app/components/nft-dashboard/trending-creators/story/TrendingCreatorsStory';
diff --git a/src/components/nft-dashboard/trending-creators/story/TrendingCreatorsStory.styles.ts b/src/components/nft-dashboard/trending-creators/story/TrendingCreatorsStory.styles.ts
index f1da3f8bf..5db3f5c8b 100644
--- a/src/components/nft-dashboard/trending-creators/story/TrendingCreatorsStory.styles.ts
+++ b/src/components/nft-dashboard/trending-creators/story/TrendingCreatorsStory.styles.ts
@@ -9,12 +9,11 @@ export const CreatorButton = styled.button`
align-items: center;
text-align: center;
background: 0 0;
- border: 0;
cursor: pointer;
border-radius: 50%;
padding: 2px;
- border: 3px solid ${(props) => (!props.$viewed ? 'var(--primary-color)' : 'var(--text-superLight-color)')};
+ border: 3px solid ${(props) => (!props.$viewed ? props.theme.primary : props.theme.textSuperLight)};
`;
export const Avatar = styled.img`
diff --git a/src/components/profile/ProfileLayout.tsx b/src/components/profile/ProfileLayout.tsx
index 3c5b9fab5..72fc35d4a 100644
--- a/src/components/profile/ProfileLayout.tsx
+++ b/src/components/profile/ProfileLayout.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
import { LeftOutlined } from '@ant-design/icons';
import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';
@@ -14,6 +14,19 @@ import { useAppSelector } from '@app/hooks/reduxHooks';
import { BaseRow } from '../common/BaseRow/BaseRow';
import { BaseCol } from '../common/BaseCol/BaseCol';
+const ProfileCard = styled(BaseCard)`
+ height: unset;
+`;
+
+const Btn = styled(BaseButton)`
+ font-size: ${({ theme }) => theme.fontSizes.md};
+ margin-bottom: 1rem;
+ font-weight: ${({ theme }) => theme.fontWeights.semibold};
+ padding: 0;
+ height: unset;
+ color: ${({ theme }) => theme.secondary};
+`;
+
const ProfileLayout: React.FC = () => {
const user = useAppSelector((state) => state.user.user);
@@ -67,17 +80,4 @@ const ProfileLayout: React.FC = () => {
);
};
-const ProfileCard = styled(BaseCard)`
- height: unset;
-`;
-
-const Btn = styled(BaseButton)`
- font-size: 1rem;
- margin-bottom: 1rem;
- font-weight: 600;
- padding: 0;
- height: unset;
- color: var(--secondary-color);
-`;
-
export default ProfileLayout;
diff --git a/src/components/profile/profileCard/ProfileInfo/ProfileInfo.styles.ts b/src/components/profile/profileCard/ProfileInfo/ProfileInfo.styles.ts
index fae3d9388..7cf3b6c4e 100644
--- a/src/components/profile/profileCard/ProfileInfo/ProfileInfo.styles.ts
+++ b/src/components/profile/profileCard/ProfileInfo/ProfileInfo.styles.ts
@@ -1,5 +1,5 @@
import styled from 'styled-components';
-import { media } from '@app/styles/themes/constants';
+import { media } from '@app/utils/utils';
import { BaseTypography } from '@app/components/common/BaseTypography/BaseTypography';
interface FullnessLineProps {
@@ -18,7 +18,6 @@ export const ImgWrapper = styled.div`
display: flex;
justify-content: center;
border-radius: 50%;
-
background: conic-gradient(
from -35.18deg at 50% 50%,
#006ccf -154.36deg,
@@ -28,7 +27,7 @@ export const ImgWrapper = styled.div`
#ff5252 384.13deg
);
- @media only screen and ${media.xl} {
+ @media only screen and (${media('xl')}) {
width: 11.125rem;
margin: 0 auto 2rem auto;
}
@@ -38,19 +37,19 @@ export const ImgWrapper = styled.div`
width: calc(100% - 10px);
height: calc(100% - 10px);
- @media only screen and ${media.xl} {
+ @media only screen and (${media('xl')}) {
margin: 7px;
}
}
`;
export const Title = styled(BaseTypography.Text)`
- font-size: 1.125rem;
- font-weight: 700;
+ font-size: ${({ theme }) => theme.fontSizes.lg};
+ font-weight: ${({ theme }) => theme.fontWeights.bold};
margin-bottom: 0.5rem;
- @media only screen and ${media.xl} {
- font-size: 1.5rem;
+ @media only screen and (${media('xl')}) {
+ font-size: ${({ theme }) => theme.fontSizes.xxl};
margin-bottom: 1rem;
}
`;
@@ -58,9 +57,9 @@ export const Title = styled(BaseTypography.Text)`
export const Subtitle = styled(BaseTypography.Text)`
margin-bottom: 2rem;
- @media only screen and ${media.xl} {
- font-weight: 600;
- font-size: 1rem;
+ @media only screen and (${media('xl')}) {
+ font-weight: ${({ theme }) => theme.fontWeights.semibold};
+ font-size: ${({ theme }) => theme.fontSizes.md};
margin-bottom: 2.5rem;
}
`;
@@ -69,11 +68,10 @@ export const FullnessWrapper = styled.div`
border-radius: 50px;
height: 1.875rem;
margin-bottom: 0.625rem;
+ background-color: rgba(${({ theme }) => theme.rgb.warning}, 0.5);
- background-color: rgba(var(--warning-rgb-color), 0.5);
-
- @media only screen and ${media.xl} {
- height: 2.5rem;
+ @media only screen and (${media('xl')}) {
+ height: ${({ theme }) => theme.heights.sm};
margin-bottom: 1rem;
}
`;
@@ -85,32 +83,28 @@ export const FullnessLine = styled.div`
height: 100%;
padding-right: 0.625rem;
border-radius: 50px;
-
width: ${(props) => props.width}%;
+ background: ${({ theme }) => `linear-gradient(90deg, ${theme.warning} 0%, ${theme.error} 100%)`};
+ color: ${({ theme }) => theme.textSecondary};
- background: linear-gradient(90deg, var(--warning-color) 0%, var(--error-color) 100%);
-
- color: var(--text-secondary-color);
-
- @media only screen and ${media.xl} {
- font-size: 1rem;
- font-weight: 600;
+ @media only screen and (${media('xl')}) {
+ font-size: ${({ theme }) => theme.fontSizes.md};
+ font-weight: ${({ theme }) => theme.fontWeights.semibold};
padding-right: 0.875rem;
}
`;
export const Text = styled(BaseTypography.Text)`
- font-size: 0.75rem;
+ font-size: ${({ theme }) => theme.fontSizes.xxs};
text-align: left;
+ color: ${({ theme }) => theme.textMain};
- color: var(--text-main-color);
-
- @media only screen and ${media.md} {
+ @media only screen and (${media('md')}) {
text-align: center;
}
- @media only screen and ${media.xl} {
- font-size: 0.875rem;
+ @media only screen and (${media('xl')}) {
+ font-size: ${({ theme }) => theme.fontSizes.xs};
text-align: left;
}
`;
diff --git a/src/components/profile/profileCard/ProfileNav/ProfileNav.styles.ts b/src/components/profile/profileCard/ProfileNav/ProfileNav.styles.ts
index f5272b8de..392c833f0 100644
--- a/src/components/profile/profileCard/ProfileNav/ProfileNav.styles.ts
+++ b/src/components/profile/profileCard/ProfileNav/ProfileNav.styles.ts
@@ -17,24 +17,22 @@ export const Btn = styled(BaseButton)`
align-items: center;
justify-content: unset !important;
width: 100%;
+ column-gap: 12px;
- &:hover {
- background-color: rgba(var(--primary-rgb-color), 0.05);
+ &.ant-btn:not(:disabled):hover {
+ background-color: rgba(${({ theme }) => theme.rgb.primary}, 0.05);
}
${(props) =>
props.$isActive &&
css`
- background-color: rgba(var(--primary-rgb-color), 0.05);
- `};
+ background-color: rgba(${props.theme.rgb.primary}, 0.05);
+ `}
& > span:first-of-type {
padding: 0.625rem;
border-radius: 10px;
- margin-right: 0.5rem;
-
- color: ${(props) => `var(--${props.color}-color)`};
-
- background-color: rgba(var(--primary-rgb-color), 0.05);
+ color: ${(props) => props.theme[props.color]};
+ background-color: rgba(${({ theme }) => theme.rgb.primary}, 0.05);
}
`;
diff --git a/src/components/profile/profileCard/profileFormNav/nav/PersonalInfo/PersonalInfo.tsx b/src/components/profile/profileCard/profileFormNav/nav/PersonalInfo/PersonalInfo.tsx
index 925e555d8..e9eadd5b7 100644
--- a/src/components/profile/profileCard/profileFormNav/nav/PersonalInfo/PersonalInfo.tsx
+++ b/src/components/profile/profileCard/profileFormNav/nav/PersonalInfo/PersonalInfo.tsx
@@ -18,7 +18,7 @@ import { WebsiteItem } from '@app/components/profile/profileCard/profileFormNav/
import { SocialLinksItem } from '@app/components/profile/profileCard/profileFormNav/nav/PersonalInfo/SocialLinksItem/SocialLinksItem';
import { useAppSelector } from '@app/hooks/reduxHooks';
import { Dates } from '@app/constants/Dates';
-import { notificationController } from '@app/controllers/notificationController';
+import { useFeedback } from '@app/hooks/useFeedback';
import { PaymentCard } from '@app/interfaces/interfaces';
import { BaseRow } from '@app/components/common/BaseRow/BaseRow';
import { BaseCol } from '@app/components/common/BaseCol/BaseCol';
@@ -98,6 +98,7 @@ export const PersonalInfo: React.FC = () => {
const [form] = BaseButtonsForm.useForm();
const { t } = useTranslation();
+ const { notification } = useFeedback();
const onFinish = useCallback(
(values: PaymentCard) => {
@@ -106,11 +107,11 @@ export const PersonalInfo: React.FC = () => {
setTimeout(() => {
setLoading(false);
setFieldsChanged(false);
- notificationController.success({ message: t('common.success') });
+ notification.success({ message: t('common.success') });
console.log(values);
}, 1000);
},
- [t],
+ [notification, t],
);
return (
diff --git a/src/components/profile/profileCard/profileFormNav/nav/PersonalInfo/PhoneItem/PhoneItem.styles.ts b/src/components/profile/profileCard/profileFormNav/nav/PersonalInfo/PhoneItem/PhoneItem.styles.ts
index 1be877356..796b6445e 100644
--- a/src/components/profile/profileCard/profileFormNav/nav/PersonalInfo/PhoneItem/PhoneItem.styles.ts
+++ b/src/components/profile/profileCard/profileFormNav/nav/PersonalInfo/PhoneItem/PhoneItem.styles.ts
@@ -1,20 +1,16 @@
-import { BORDER_RADIUS } from '@app/styles/themes/constants';
import PhoneInput from 'react-phone-number-input/input';
import styled from 'styled-components';
// has wrong prop types
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export const PhoneNumberInput = styled(PhoneInput as any)`
- height: 50px;
+ height: ${({ theme }) => theme.heights.md};
width: 100%;
padding: 8px 11px;
transition: all 0.3s;
-
- color: var(--text-main-color);
-
- border: 1px solid var(--border-color);
-
- border-radius: ${BORDER_RADIUS};
+ color: ${({ theme }) => theme.textMain};
+ border: 1px solid ${({ theme }) => theme.border};
+ border-radius: ${({ theme }) => theme.borderRadius};
&:hover {
border-color: #1d72b8;
diff --git a/src/components/profile/profileCard/profileFormNav/nav/SecuritySettings/passwordForm/PasswordForm/PasswordForm.styles.ts b/src/components/profile/profileCard/profileFormNav/nav/SecuritySettings/passwordForm/PasswordForm/PasswordForm.styles.ts
index 55c614462..67daf076b 100644
--- a/src/components/profile/profileCard/profileFormNav/nav/SecuritySettings/passwordForm/PasswordForm/PasswordForm.styles.ts
+++ b/src/components/profile/profileCard/profileFormNav/nav/SecuritySettings/passwordForm/PasswordForm/PasswordForm.styles.ts
@@ -1,16 +1,16 @@
import { BaseButton } from '@app/components/common/BaseButton/BaseButton';
-import { media } from '@app/styles/themes/constants';
+import { media } from '@app/utils/utils';
import styled from 'styled-components';
export const Btn = styled(BaseButton)`
margin: 0.5rem 0 1.5rem 0;
width: 100%;
- @media only screen and ${media.md} {
+ @media only screen and (${media('md')}) {
max-width: 10rem;
}
- @media only screen and ${media.xl} {
+ @media only screen and (${media('xl')}) {
max-width: unset;
}
`;
diff --git a/src/components/profile/profileCard/profileFormNav/nav/SecuritySettings/passwordForm/PasswordForm/PasswordForm.tsx b/src/components/profile/profileCard/profileFormNav/nav/SecuritySettings/passwordForm/PasswordForm/PasswordForm.tsx
index bd92f874a..af9d9ab17 100644
--- a/src/components/profile/profileCard/profileFormNav/nav/SecuritySettings/passwordForm/PasswordForm/PasswordForm.tsx
+++ b/src/components/profile/profileCard/profileFormNav/nav/SecuritySettings/passwordForm/PasswordForm/PasswordForm.tsx
@@ -4,7 +4,7 @@ import { BaseButtonsForm } from '@app/components/common/forms/BaseButtonsForm/Ba
import { ConfirmItemPassword } from '@app/components/profile/profileCard/profileFormNav/nav/SecuritySettings/passwordForm/ConfirmPasswordItem/ConfirmPasswordItem';
import { CurrentPasswordItem } from '@app/components/profile/profileCard/profileFormNav/nav/SecuritySettings/passwordForm/CurrentPasswordItem/CurrentPasswordItem';
import { NewPasswordItem } from '@app/components/profile/profileCard/profileFormNav/nav/SecuritySettings/passwordForm/NewPasswordItem/NewPasswordItem';
-import { notificationController } from '@app/controllers/notificationController';
+import { useFeedback } from '@app/hooks/useFeedback';
import * as S from './PasswordForm.styles';
import { BaseRow } from '@app/components/common/BaseRow/BaseRow';
import { BaseCol } from '@app/components/common/BaseCol/BaseCol';
@@ -13,13 +13,14 @@ export const PasswordForm: React.FC = () => {
const [isFieldsChanged, setFieldsChanged] = useState(false);
const [isLoading, setLoading] = useState(false);
const { t } = useTranslation();
+ const { notification } = useFeedback();
const onFinish = (values: []) => {
setLoading(true);
setTimeout(() => {
setLoading(false);
setFieldsChanged(false);
- notificationController.success({ message: t('common.success') });
+ notification.success({ message: t('common.success') });
console.log(values);
}, 1000);
};
diff --git a/src/components/profile/profileCard/profileFormNav/nav/SecuritySettings/twoFactorAuth/TwoFactorAuth.tsx b/src/components/profile/profileCard/profileFormNav/nav/SecuritySettings/twoFactorAuth/TwoFactorAuth.tsx
index f6624eea3..a0feadb12 100644
--- a/src/components/profile/profileCard/profileFormNav/nav/SecuritySettings/twoFactorAuth/TwoFactorAuth.tsx
+++ b/src/components/profile/profileCard/profileFormNav/nav/SecuritySettings/twoFactorAuth/TwoFactorAuth.tsx
@@ -6,7 +6,7 @@ import { TwoFactorOptions } from '@app/components/profile/profileCard/profileFor
import { TwoFactorSwitch } from '@app/components/profile/profileCard/profileFormNav/nav/SecuritySettings/twoFactorAuth/TwoFactorSwitch/TwoFactorSwitch';
import { BaseButton } from '@app/components/common/BaseButton/BaseButton';
import { SecurityCodeForm } from '@app/components/auth/SecurityCodeForm/SecurityCodeForm';
-import { notificationController } from '@app/controllers/notificationController';
+import { useFeedback } from '@app/hooks/useFeedback';
import { setUser } from '@app/store/slices/userSlice';
import { useAppDispatch, useAppSelector } from '@app/hooks/reduxHooks';
import { TwoFactorAuthOption } from '@app/interfaces/interfaces';
@@ -37,6 +37,7 @@ export const TwoFactorAuth: React.FC = () => {
const dispatch = useAppDispatch();
const { t } = useTranslation();
+ const { notification } = useFeedback();
const onClickVerify = () => {
setClickedVerify(true);
@@ -47,13 +48,13 @@ export const TwoFactorAuth: React.FC = () => {
setLoading(false);
setFieldsChanged(false);
setClickedVerify(false);
- notificationController.success({ message: t('common.success') });
+ notification.success({ message: t('common.success') });
const newUser = { ...user, [selectedOption]: { ...user[selectedOption], verified: true } };
dispatch(setUser(newUser));
}
- }, [dispatch, selectedOption, t, user]);
+ }, [dispatch, notification, selectedOption, t, user]);
return (
<>
diff --git a/src/components/profile/profileCard/profileFormNav/nav/SecuritySettings/twoFactorAuth/TwoFactorOptions/TwoFactorOptions.styles.ts b/src/components/profile/profileCard/profileFormNav/nav/SecuritySettings/twoFactorAuth/TwoFactorOptions/TwoFactorOptions.styles.ts
index 6597d9790..624d7f80b 100644
--- a/src/components/profile/profileCard/profileFormNav/nav/SecuritySettings/twoFactorAuth/TwoFactorOptions/TwoFactorOptions.styles.ts
+++ b/src/components/profile/profileCard/profileFormNav/nav/SecuritySettings/twoFactorAuth/TwoFactorOptions/TwoFactorOptions.styles.ts
@@ -1,5 +1,5 @@
import { BaseRadio } from '@app/components/common/BaseRadio/BaseRadio';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
interface RadioBtnProps {
$isActive: boolean;
@@ -10,7 +10,11 @@ export const RadioBtn = styled(BaseRadio)`
width: 100%;
transition: all 0.5s ease;
- ${(props) => !props.$isActive && 'opacity: 0.5'};
+ ${(props) =>
+ !props.$isActive &&
+ css`
+ opacity: 0.5;
+ `}
& > span:last-of-type {
flex-grow: 1;
diff --git a/src/components/profile/profileCard/profileFormNav/nav/notifications/CheckboxColumn/CheckboxColumn.styles.ts b/src/components/profile/profileCard/profileFormNav/nav/notifications/CheckboxColumn/CheckboxColumn.styles.ts
index 38b933a74..dea4b5a1e 100644
--- a/src/components/profile/profileCard/profileFormNav/nav/notifications/CheckboxColumn/CheckboxColumn.styles.ts
+++ b/src/components/profile/profileCard/profileFormNav/nav/notifications/CheckboxColumn/CheckboxColumn.styles.ts
@@ -1,5 +1,5 @@
import styled from 'styled-components';
-import { media } from '@app/styles/themes/constants';
+import { media } from '@app/utils/utils';
const colStyles = {
height: '75px',
@@ -14,15 +14,15 @@ const colStyles = {
export const Col = styled.div`
${colStyles};
- border-bottom: 1px solid rgba(var(--primary-rgb-color), 0.3);
+ border-bottom: 1px solid rgba(${({ theme }) => theme.rgb.primary}, 0.3);
- @media only screen and ${media.md} {
+ @media only screen and (${media('md')}) {
justify-content: unset;
- font-size: 1rem;
+ font-size: ${({ theme }) => theme.fontSizes.md};
padding: 0.5rem;
}
- @media only screen and ${media.xl} {
+ @media only screen and (${media('xl')}) {
padding: 0.75rem;
}
`;
@@ -38,8 +38,7 @@ export const Wrapper = styled.div`
& > .ant-checkbox > .ant-checkbox-inner {
border-radius: 3px;
-
- border-color: var(--primary-color);
+ border-color: ${({ theme }) => theme.primary};
}
}
@@ -51,11 +50,9 @@ export const Wrapper = styled.div`
`;
export const HeaderCol = styled(Col)`
- background: var(--secondary-background-color);
-
- border-top: 1px solid rgba(var(--primary-rgb-color), 0.3);
-
- color: var(--primary-color);
+ background: ${({ theme }) => theme.secondaryBackground};
+ border-top: 1px solid rgba(${({ theme }) => theme.rgb.primary}, 0.3);
+ color: ${({ theme }) => theme.primary};
& .ant-checkbox-wrapper {
flex-wrap: wrap;
diff --git a/src/components/profile/profileCard/profileFormNav/nav/notifications/Notifications/Notifications.styles.ts b/src/components/profile/profileCard/profileFormNav/nav/notifications/Notifications/Notifications.styles.ts
index 26324a1c7..9102d7cb3 100644
--- a/src/components/profile/profileCard/profileFormNav/nav/notifications/Notifications/Notifications.styles.ts
+++ b/src/components/profile/profileCard/profileFormNav/nav/notifications/Notifications/Notifications.styles.ts
@@ -1,14 +1,14 @@
import { BaseTypography } from '@app/components/common/BaseTypography/BaseTypography';
-import { media } from '@app/styles/themes/constants';
+import { media } from '@app/utils/utils';
import styled from 'styled-components';
export const Description = styled(BaseTypography.Text)`
display: block;
- font-size: 0.75rem;
+ font-size: ${({ theme }) => theme.fontSizes.xxs};
margin-bottom: 1rem;
- @media only screen and ${media.md} {
- font-size: 1rem;
+ @media only screen and (${media('md')}) {
+ font-size: ${({ theme }) => theme.fontSizes.md};
margin-bottom: 2rem;
}
`;
diff --git a/src/components/profile/profileCard/profileFormNav/nav/notifications/NotificationsTypes/NotificationsTypes.tsx b/src/components/profile/profileCard/profileFormNav/nav/notifications/NotificationsTypes/NotificationsTypes.tsx
index 9a4da65ae..3bfb8da99 100644
--- a/src/components/profile/profileCard/profileFormNav/nav/notifications/NotificationsTypes/NotificationsTypes.tsx
+++ b/src/components/profile/profileCard/profileFormNav/nav/notifications/NotificationsTypes/NotificationsTypes.tsx
@@ -6,7 +6,7 @@ import { CheckboxColumn } from '@app/components/profile/profileCard/profileFormN
import { Option } from '@app/components/profile/profileCard/profileFormNav/nav/notifications/interfaces';
import * as S from './NotificationsTypes.styles';
import { BaseButtonsGroup } from '@app/components/common/forms/components/BaseButtonsGroup/BaseButtonsGroup';
-import { notificationController } from '@app/controllers/notificationController';
+import { useFeedback } from '@app/hooks/useFeedback';
import { BaseCheckbox } from '@app/components/common/BaseCheckbox/BaseCheckbox';
interface Notifications {
@@ -17,6 +17,7 @@ interface Notifications {
export const NotificationsTypes: React.FC = () => {
const { t } = useTranslation();
+ const { notification } = useFeedback();
const [isLoading, setLoading] = useState(false);
const [checkedElements, setCheckedElements] = useState({
1: [],
@@ -85,10 +86,10 @@ export const NotificationsTypes: React.FC = () => {
setTimeout(() => {
setLoading(false);
setTriggered(false);
- notificationController.success({ message: t('common.success') });
+ notification.success({ message: t('common.success') });
console.log(checkedElements);
}, 1000);
- }, [setTriggered, checkedElements, t]);
+ }, [notification, t, checkedElements]);
return (
theme.secondaryBackground};
`;
export const AvatarWrapper = styled.div`
@@ -15,7 +14,7 @@ export const AvatarWrapper = styled.div`
`;
export const Text = styled(BaseTypography.Text)`
- font-weight: 600;
+ font-weight: ${({ theme }) => theme.fontWeights.semibold};
`;
export const ContentWrapper = styled.div`
@@ -29,8 +28,7 @@ export const ContentWrapper = styled.div`
left: 0;
width: 100%;
height: 1px;
-
- background-color: 1px solid rgba(var(--primary-rgb-color), 0.3);
+ background-color: 1px solid rgba(${({ theme }) => theme.rgb.primary}, 0.3);
}
`;
@@ -46,10 +44,9 @@ export const Item = styled.div`
`;
export const Subtitle = styled(BaseTypography.Text)`
- font-weight: 500;
- font-size: 0.75rem;
-
- color: var(--primary-color);
+ font-weight: ${({ theme }) => theme.fontWeights.medium};
+ font-size: ${({ theme }) => theme.fontSizes.xxs};
+ color: ${({ theme }) => theme.primary};
`;
export const DetailsWrapper = styled.div`
diff --git a/src/components/profile/profileCard/profileFormNav/nav/payments/paymentHistory/Payment/Payment.tsx b/src/components/profile/profileCard/profileFormNav/nav/payments/paymentHistory/Payment/Payment.tsx
index 6b5457493..60fc8beb8 100644
--- a/src/components/profile/profileCard/profileFormNav/nav/payments/paymentHistory/Payment/Payment.tsx
+++ b/src/components/profile/profileCard/profileFormNav/nav/payments/paymentHistory/Payment/Payment.tsx
@@ -1,6 +1,7 @@
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
import { useTranslation } from 'react-i18next';
-import { defineColorByPriority, getCurrencyPrice } from '@app/utils/utils';
+import { useTheme } from 'styled-components';
+import { colorTypeFrom, getCurrencyPrice } from '@app/utils/utils';
import { paymentStatuses } from 'constants/paymentStatuses';
import { Dates } from 'constants/Dates';
import { Status } from '../Status/Status';
@@ -20,6 +21,7 @@ interface PaymentProps {
export const Payment: React.FC = ({ src, recipient, date, status, price, currency }) => {
const { t } = useTranslation();
+ const theme = useTheme();
const paymentStatus = useMemo(() => paymentStatuses.find((item) => item.id === status), [status]);
@@ -38,7 +40,7 @@ export const Payment: React.FC = ({ src, recipient, date, status,
{t('profile.nav.payments.status.title')}
-
+
{t('profile.nav.payments.date')}
diff --git a/src/components/profile/profileCard/profileFormNav/nav/payments/paymentHistory/PaymentHistory/PaymentHistory.styles.ts b/src/components/profile/profileCard/profileFormNav/nav/payments/paymentHistory/PaymentHistory/PaymentHistory.styles.ts
index 01e0718de..301e1c471 100644
--- a/src/components/profile/profileCard/profileFormNav/nav/payments/paymentHistory/PaymentHistory/PaymentHistory.styles.ts
+++ b/src/components/profile/profileCard/profileFormNav/nav/payments/paymentHistory/PaymentHistory/PaymentHistory.styles.ts
@@ -1,6 +1,6 @@
-import styled from 'styled-components';
-import { defaultPaddings } from '@app/constants/defaultPaddings';
-import { media } from '@app/styles/themes/constants';
+import styled, { css } from 'styled-components';
+import { defaultPaddings } from '@app/components/common/BaseCard/BaseCard';
+import { media, normalizeProp } from '@app/utils/utils';
import { BaseTypography } from '@app/components/common/BaseTypography/BaseTypography';
interface ContentWrapperProps {
@@ -10,21 +10,25 @@ interface ContentWrapperProps {
export const ContentWrapper = styled.div`
${(props) =>
!props.isEmptyHistory &&
- `margin: 0 -${defaultPaddings.mobile[1]}px -${defaultPaddings.mobile[0]}px -${defaultPaddings.mobile[1]}px`};
+ css`
+ margin: ${normalizeProp([0, -defaultPaddings.xs[1], -defaultPaddings.xs[0], -defaultPaddings.xs[1]])};
+ `}
- @media only screen and ${media.md} {
+ @media only screen and (${media('md')}) {
${(props) =>
!props.isEmptyHistory &&
- `margin: 0 -${defaultPaddings.tablet[1]}px -${defaultPaddings.tablet[0]}px -${defaultPaddings.tablet[1]}px`};
+ css`
+ margin: ${normalizeProp([0, -defaultPaddings.md[1], -defaultPaddings.md[0], -defaultPaddings.md[1]])};
+ `}
}
- @media only screen and ${media.xl} {
+ @media only screen and (${media('xl')}) {
margin: 0;
}
`;
export const Text = styled(BaseTypography.Text)`
- @media only screen and ${media.md} {
- font-size: 1rem;
+ @media only screen and (${media('md')}) {
+ font-size: ${({ theme }) => theme.fontSizes.md};
}
`;
diff --git a/src/components/profile/profileCard/profileFormNav/nav/payments/paymentHistory/PaymentsTable/PaymentsTable.styles.ts b/src/components/profile/profileCard/profileFormNav/nav/payments/paymentHistory/PaymentsTable/PaymentsTable.styles.ts
index f44c54121..9cf104389 100644
--- a/src/components/profile/profileCard/profileFormNav/nav/payments/paymentHistory/PaymentsTable/PaymentsTable.styles.ts
+++ b/src/components/profile/profileCard/profileFormNav/nav/payments/paymentHistory/PaymentsTable/PaymentsTable.styles.ts
@@ -2,25 +2,26 @@ import { BaseTable } from '@app/components/common/BaseTable/BaseTable';
import styled from 'styled-components';
export const PaymentHistoryTable = styled(BaseTable)`
- .ant-table-thead > tr > th {
- border-top: 1px solid rgba(var(--primary-rgb-color), 0.3);
-
- border-bottom: 1px solid rgba(var(--primary-rgb-color), 0.3);
-
- color: var(--primary-color);
+ .ant-table-thead > tr {
+ th,
+ td {
+ border-block: 1px solid rgba(${({ theme }) => theme.rgb.primary}, 0.3);
+ }
- text-align: center;
+ th {
+ color: ${({ theme }) => theme.primary};
+ text-align: center;
- &::before {
- display: none;
+ &::before {
+ display: none;
+ }
}
}
.ant-table-tbody > tr > td {
- border-bottom: 1px solid rgba(var(--primary--rgb-color), 0.3);
-
- font-weight: 600;
- font-size: 1rem;
+ border-bottom: 1px solid rgba(${({ theme }) => theme.rgb.primary}, 0.3);
+ font-weight: ${({ theme }) => theme.fontWeights.semibold};
+ font-size: ${({ theme }) => theme.fontSizes.md};
}
`;
diff --git a/src/components/profile/profileCard/profileFormNav/nav/payments/paymentHistory/PaymentsTable/PaymentsTable.tsx b/src/components/profile/profileCard/profileFormNav/nav/payments/paymentHistory/PaymentsTable/PaymentsTable.tsx
index b489f62bf..cb74c3c5a 100644
--- a/src/components/profile/profileCard/profileFormNav/nav/payments/paymentHistory/PaymentsTable/PaymentsTable.tsx
+++ b/src/components/profile/profileCard/profileFormNav/nav/payments/paymentHistory/PaymentsTable/PaymentsTable.tsx
@@ -1,10 +1,11 @@
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
import { useTranslation } from 'react-i18next';
+import { useTheme } from 'styled-components';
import { ColumnType } from 'antd/lib/table';
import { Dates } from 'constants/Dates';
import { Status } from '../Status/Status';
import { paymentStatuses, PaymentStatus } from 'constants/paymentStatuses';
-import { defineColorByPriority, getCurrencyPrice } from '@app/utils/utils';
+import { colorTypeFrom, getCurrencyPrice } from '@app/utils/utils';
import { Payment } from 'api/paymentHistory.api';
import * as S from './PaymentsTable.styles';
import { BaseButton } from '@app/components/common/BaseButton/BaseButton';
@@ -29,6 +30,7 @@ interface PaymentsTableProps {
export const PaymentsTable: React.FC = ({ payments }) => {
const { t } = useTranslation();
+ const theme = useTheme();
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const columns: ColumnType[] = useMemo(() => {
@@ -58,7 +60,7 @@ export const PaymentsTable: React.FC = ({ payments }) => {
dataIndex: 'status',
key: 'status',
render: (status: PaymentStatus) => (
-
+
),
align: 'center',
},
@@ -76,7 +78,7 @@ export const PaymentsTable: React.FC = ({ payments }) => {
render: () => {t('profile.nav.payments.details')},
},
];
- }, [t]);
+ }, [t, theme]);
const dataSource: Status[] = useMemo(
() =>
diff --git a/src/components/profile/profileCard/profileFormNav/nav/payments/paymentHistory/Status/Status.styles.ts b/src/components/profile/profileCard/profileFormNav/nav/payments/paymentHistory/Status/Status.styles.ts
index ec68d9779..54fd1c127 100644
--- a/src/components/profile/profileCard/profileFormNav/nav/payments/paymentHistory/Status/Status.styles.ts
+++ b/src/components/profile/profileCard/profileFormNav/nav/payments/paymentHistory/Status/Status.styles.ts
@@ -1,5 +1,5 @@
import styled from 'styled-components';
-import { media } from '@app/styles/themes/constants';
+import { media } from '@app/utils/utils';
import { BaseTag } from '@app/components/common/BaseTag/BaseTag';
export const StatusTag = styled(BaseTag)`
@@ -10,7 +10,7 @@ export const StatusTag = styled(BaseTag)`
justify-content: center;
margin: 0;
- @media only screen and ${media.md} {
+ @media only screen and (${media('md')}) {
min-width: 6.5rem;
}
`;
diff --git a/src/components/profile/profileCard/profileFormNav/nav/payments/paymentMethod/ActionButtons/ActionButtons.styles.ts b/src/components/profile/profileCard/profileFormNav/nav/payments/paymentMethod/ActionButtons/ActionButtons.styles.ts
index 7d1f5ed76..10f22a194 100644
--- a/src/components/profile/profileCard/profileFormNav/nav/payments/paymentMethod/ActionButtons/ActionButtons.styles.ts
+++ b/src/components/profile/profileCard/profileFormNav/nav/payments/paymentMethod/ActionButtons/ActionButtons.styles.ts
@@ -7,11 +7,11 @@ export const BtnWrapper = styled.div`
top: 13%;
right: 7%;
- & > button {
+ & > .ant-btn-link {
+ font-size: ${({ theme }) => theme.fontSizes.lg};
padding: 0;
width: unset;
height: unset;
-
- color: var(--text-secondary-color);
+ color: ${({ theme }) => theme.textSecondary};
}
`;
diff --git a/src/components/profile/profileCard/profileFormNav/nav/payments/paymentMethod/PaymentCard/PaymentCard.styles.ts b/src/components/profile/profileCard/profileFormNav/nav/payments/paymentMethod/PaymentCard/PaymentCard.styles.ts
index a453c9c16..1757347ea 100644
--- a/src/components/profile/profileCard/profileFormNav/nav/payments/paymentMethod/PaymentCard/PaymentCard.styles.ts
+++ b/src/components/profile/profileCard/profileFormNav/nav/payments/paymentMethod/PaymentCard/PaymentCard.styles.ts
@@ -24,7 +24,7 @@ export const Wrapper = styled.div`
}
& > div {
- color: var(--text-secondary-color);
+ color: ${({ theme }) => theme.textSecondary};
& > .rccs__chip {
display: none;
diff --git a/src/components/profile/profileCard/profileFormNav/nav/payments/paymentMethod/addNewCard/AddNewCardButton/AddNewCardButton.styles.ts b/src/components/profile/profileCard/profileFormNav/nav/payments/paymentMethod/addNewCard/AddNewCardButton/AddNewCardButton.styles.ts
index e8c6e106a..952088064 100644
--- a/src/components/profile/profileCard/profileFormNav/nav/payments/paymentMethod/addNewCard/AddNewCardButton/AddNewCardButton.styles.ts
+++ b/src/components/profile/profileCard/profileFormNav/nav/payments/paymentMethod/addNewCard/AddNewCardButton/AddNewCardButton.styles.ts
@@ -4,6 +4,6 @@ import styled from 'styled-components';
export const AddBtn = styled(BaseButton)`
width: 290px;
height: 182.86px;
- font-size: 2rem;
+ font-size: ${({ theme }) => theme.fontSizes.xxxxl};
border-radius: 14.5px;
`;
diff --git a/src/components/profile/profileCard/profileFormNav/nav/payments/paymentMethod/addNewCard/AddNewCardButton/AddNewCardButton.tsx b/src/components/profile/profileCard/profileFormNav/nav/payments/paymentMethod/addNewCard/AddNewCardButton/AddNewCardButton.tsx
index 7e76de0ac..c5d150e64 100644
--- a/src/components/profile/profileCard/profileFormNav/nav/payments/paymentMethod/addNewCard/AddNewCardButton/AddNewCardButton.tsx
+++ b/src/components/profile/profileCard/profileFormNav/nav/payments/paymentMethod/addNewCard/AddNewCardButton/AddNewCardButton.tsx
@@ -17,7 +17,7 @@ export const AddNewCardButton: React.FC = ({ onCardAdd })
return (
<>
-
+
{t('profile.nav.payments.addNewCard')}
diff --git a/src/components/profile/profileCard/profileFormNav/nav/payments/paymentMethod/paymentForm/CVVItem/CVVItem.tsx b/src/components/profile/profileCard/profileFormNav/nav/payments/paymentMethod/paymentForm/CVVItem/CVVItem.tsx
index 4122697bc..81584ee7e 100644
--- a/src/components/profile/profileCard/profileFormNav/nav/payments/paymentMethod/paymentForm/CVVItem/CVVItem.tsx
+++ b/src/components/profile/profileCard/profileFormNav/nav/payments/paymentMethod/paymentForm/CVVItem/CVVItem.tsx
@@ -1,6 +1,6 @@
import React from 'react';
import { useTranslation } from 'react-i18next';
-import MaskedInput from 'antd-mask-input';
+import { MaskedInput } from '@app/components/common/inputs/MaskedInput/MaskedInput';
import { BaseButtonsForm } from '@app/components/common/forms/BaseButtonsForm/BaseButtonsForm';
import { CardInputProps } from '@app/components/profile/profileCard/profileFormNav/nav/payments/paymentMethod/paymentForm/interfaces';
diff --git a/src/components/profile/profileCard/profileFormNav/nav/payments/paymentMethod/paymentForm/CardNumberItem/CardNumberItem.tsx b/src/components/profile/profileCard/profileFormNav/nav/payments/paymentMethod/paymentForm/CardNumberItem/CardNumberItem.tsx
index aae928bb3..d8321e2bc 100644
--- a/src/components/profile/profileCard/profileFormNav/nav/payments/paymentMethod/paymentForm/CardNumberItem/CardNumberItem.tsx
+++ b/src/components/profile/profileCard/profileFormNav/nav/payments/paymentMethod/paymentForm/CardNumberItem/CardNumberItem.tsx
@@ -1,7 +1,7 @@
import React from 'react';
import { useTranslation } from 'react-i18next';
import { BaseButtonsForm } from '@app/components/common/forms/BaseButtonsForm/BaseButtonsForm';
-import MaskedInput from 'antd-mask-input';
+import { MaskedInput } from '@app/components/common/inputs/MaskedInput/MaskedInput';
import { CardInputProps } from '@app/components/profile/profileCard/profileFormNav/nav/payments/paymentMethod/paymentForm/interfaces';
export const CardNumberItem: React.FC = ({ disabled, handleInputFocus }) => {
diff --git a/src/components/profile/profileCard/profileFormNav/nav/payments/paymentMethod/paymentForm/CardThemeItem/CardThemeItem.styles.ts b/src/components/profile/profileCard/profileFormNav/nav/payments/paymentMethod/paymentForm/CardThemeItem/CardThemeItem.styles.ts
index 7f1698bba..82950d0c8 100644
--- a/src/components/profile/profileCard/profileFormNav/nav/payments/paymentMethod/paymentForm/CardThemeItem/CardThemeItem.styles.ts
+++ b/src/components/profile/profileCard/profileFormNav/nav/payments/paymentMethod/paymentForm/CardThemeItem/CardThemeItem.styles.ts
@@ -1,5 +1,4 @@
-import { BORDER_RADIUS } from '@app/styles/themes/constants';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
interface BackgroundWrapperProps {
isActive: boolean;
@@ -12,25 +11,25 @@ export const BackgroundWrapper = styled.div`
align-items: center;
cursor: pointer;
width: 3.125rem;
- height: 3.125rem;
+ height: ${({ theme }) => theme.heights.md};
margin: 0 auto;
transition: all 0.5s ease;
-
- border-radius: ${BORDER_RADIUS};
-
- ${(props) => props.isActive && `background: url(${props.background})`};
+ border-radius: ${({ theme }) => theme.borderRadius};
background-size: cover;
- & > div {
+ ${(props) =>
+ props.isActive &&
+ css`
+ background: url(${props.background});
+ `}
+
+ &:hover, & > div {
background: ${(props) => `url(${props.background})`};
background-size: cover;
}
&:hover {
opacity: 0.7;
-
- ${(props) => `background: url(${props.background})`};
- background-size: cover;
}
`;
@@ -38,8 +37,6 @@ export const Theme = styled.div`
width: calc(100% - 0.4rem);
height: calc(100% - 0.4rem);
margin: 0.2rem;
-
- border: 5px solid var(--background-color);
-
- border-radius: ${BORDER_RADIUS};
+ border: 5px solid ${({ theme }) => theme.background};
+ border-radius: ${({ theme }) => theme.borderRadius};
`;
diff --git a/src/components/profile/profileCard/profileFormNav/nav/payments/paymentMethod/paymentForm/ExpDateItem/ExpDateItem.tsx b/src/components/profile/profileCard/profileFormNav/nav/payments/paymentMethod/paymentForm/ExpDateItem/ExpDateItem.tsx
index c28183e1a..138134162 100644
--- a/src/components/profile/profileCard/profileFormNav/nav/payments/paymentMethod/paymentForm/ExpDateItem/ExpDateItem.tsx
+++ b/src/components/profile/profileCard/profileFormNav/nav/payments/paymentMethod/paymentForm/ExpDateItem/ExpDateItem.tsx
@@ -1,6 +1,6 @@
import React from 'react';
import { useTranslation } from 'react-i18next';
-import MaskedInput from 'antd-mask-input';
+import { MaskedInput } from '@app/components/common/inputs/MaskedInput/MaskedInput';
import { BaseButtonsForm } from '@app/components/common/forms/BaseButtonsForm/BaseButtonsForm';
import { CardInputProps } from '@app/components/profile/profileCard/profileFormNav/nav/payments/paymentMethod/paymentForm/interfaces';
diff --git a/src/components/router/AppRouter.tsx b/src/components/router/AppRouter.tsx
index a823a77f2..f03351eb3 100644
--- a/src/components/router/AppRouter.tsx
+++ b/src/components/router/AppRouter.tsx
@@ -56,7 +56,6 @@ const TabsPage = React.lazy(() => import('@app/pages/uiComponentsPages/navigatio
const NotificationsUIPage = React.lazy(() => import('@app/pages/uiComponentsPages/feedback/NotificationsPage'));
const GoogleMaps = React.lazy(() => import('@app/pages/maps/GoogleMapsPage/GoogleMapsPage'));
const LeafletMaps = React.lazy(() => import('@app/pages/maps/LeafletMapsPage/LeafletMapsPage'));
-const ReactSimpleMaps = React.lazy(() => import('@app/pages/maps/ReactSimpleMapsPage/ReactSimpleMapsPage'));
const PigeonsMaps = React.lazy(() => import('@app/pages/maps/PigeonsMapsPage/PigeonsMapsPage'));
const Logout = React.lazy(() => import('./Logout'));
@@ -103,7 +102,6 @@ const Charts = withLoading(ChartsPage);
// Maps
const Google = withLoading(GoogleMaps);
const Leaflet = withLoading(LeafletMaps);
-const ReactSimple = withLoading(ReactSimpleMaps);
const Pigeons = withLoading(PigeonsMaps);
const ServerError = withLoading(ServerErrorPage);
@@ -142,7 +140,6 @@ export const AppRouter: React.FC = () => {
} />
} />
- } />
} />
} />
diff --git a/src/components/tables/BasicTable/BasicTable.tsx b/src/components/tables/BasicTable/BasicTable.tsx
index f781ac6f0..7ec90a5b3 100644
--- a/src/components/tables/BasicTable/BasicTable.tsx
+++ b/src/components/tables/BasicTable/BasicTable.tsx
@@ -1,11 +1,12 @@
-import React, { useEffect, useState, useCallback } from 'react';
+import { useEffect, useState, useCallback } from 'react';
+import { useTheme } from 'styled-components';
import { BasicTableRow, getBasicTableData, Pagination, Tag } from 'api/table.api';
import { BaseTable } from '@app/components/common/BaseTable/BaseTable';
import { ColumnsType } from 'antd/es/table';
import { BaseButton } from '@app/components/common/BaseButton/BaseButton';
import { useTranslation } from 'react-i18next';
-import { defineColorByPriority } from '@app/utils/utils';
-import { notificationController } from 'controllers/notificationController';
+import { colorTypeFrom } from '@app/utils/utils';
+import { useFeedback } from '@app/hooks/useFeedback';
import { Status } from '@app/components/profile/profileCard/profileFormNav/nav/payments/paymentHistory/Status/Status';
import { useMounted } from '@app/hooks/useMounted';
import { BaseRow } from '@app/components/common/BaseRow/BaseRow';
@@ -25,6 +26,8 @@ export const BasicTable: React.FC = () => {
});
const { t } = useTranslation();
const { isMounted } = useMounted();
+ const { notification } = useFeedback();
+ const theme = useTheme();
const fetch = useCallback(
(pagination: Pagination) => {
@@ -127,7 +130,7 @@ export const BasicTable: React.FC = () => {
{tags.map((tag: Tag) => {
return (
-
+
);
})}
@@ -142,9 +145,9 @@ export const BasicTable: React.FC = () => {
return (
{
- notificationController.info({ message: t('tables.inviteMessage', { name: record.name }) });
+ notification.info({ message: t('tables.inviteMessage', { name: record.name }) });
}}
>
{t('tables.invite')}
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/components/tables/TreeTable/TreeTable.tsx b/src/components/tables/TreeTable/TreeTable.tsx
index 39cd8e746..9db148753 100644
--- a/src/components/tables/TreeTable/TreeTable.tsx
+++ b/src/components/tables/TreeTable/TreeTable.tsx
@@ -1,6 +1,6 @@
import React, { useState, useEffect, useCallback } from 'react';
import { BaseTable } from '@app/components/common/BaseTable/BaseTable';
-import { Key, DefaultRecordType } from 'rc-table/lib/interface';
+import { TableRowSelection, ColumnsType } from 'antd/es/table/interface';
import { TreeTableRow, Pagination, getTreeTableData } from 'api/table.api';
import { useTranslation } from 'react-i18next';
import { useMounted } from '@app/hooks/useMounted';
@@ -39,19 +39,16 @@ export const TreeTable: React.FC = () => {
fetch(pagination);
};
- const rowSelection = {
- onChange: (selectedRowKeys: Key[], selectedRows: DefaultRecordType[]) => {
- console.log(selectedRowKeys, selectedRows);
+ const rowSelection: TableRowSelection = {
+ onChange: (selectedRowKeys: React.Key[], selectedRows: TreeTableRow[], info) => {
+ console.log(selectedRowKeys, selectedRows, info);
},
- onSelect: (record: DefaultRecordType, selected: boolean, selectedRows: DefaultRecordType[]) => {
+ onSelect: (record: TreeTableRow, selected: boolean, selectedRows: TreeTableRow[]) => {
console.log(record, selected, selectedRows);
},
- onSelectAll: (selected: boolean, selectedRows: DefaultRecordType[]) => {
- console.log(selected, selectedRows);
- },
};
- const columns = [
+ const columns: ColumnsType = [
{
title: t('common.name'),
dataIndex: 'name',
@@ -72,16 +69,14 @@ export const TreeTable: React.FC = () => {
];
return (
- <>
-
- >
+
);
};
diff --git a/src/components/tables/editableTable/EditableTable.tsx b/src/components/tables/editableTable/EditableTable.tsx
index d447fb87f..fbaee989c 100644
--- a/src/components/tables/editableTable/EditableTable.tsx
+++ b/src/components/tables/editableTable/EditableTable.tsx
@@ -8,6 +8,7 @@ import { useMounted } from '@app/hooks/useMounted';
import { BaseForm } from '@app/components/common/forms/BaseForm/BaseForm';
import { BaseSpace } from '@app/components/common/BaseSpace/BaseSpace';
import { BasePopconfirm } from '@app/components/common/BasePopconfirm/BasePopconfirm';
+import { ColumnsType } from 'antd/es/table/interface';
const initialPagination: Pagination = {
current: 1,
@@ -116,12 +117,12 @@ export const EditableTable: React.FC = () => {
{t('common.save')}
- {t('common.cancel')}
+ {t('common.cancel')}
>
) : (
<>
- edit(record)}>
+ edit(record)}>
{t('common.edit')}
handleDeleteRow(record.key)}>
@@ -135,7 +136,7 @@ export const EditableTable: React.FC = () => {
},
];
- const mergedColumns = columns.map((col) => {
+ const mergedColumns: ColumnsType = columns.map((col) => {
if (!col.editable) {
return col;
}
diff --git a/src/constants/defaultPaddings.ts b/src/constants/defaultPaddings.ts
deleted file mode 100644
index 15efd06d4..000000000
--- a/src/constants/defaultPaddings.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-interface DefaultPadding {
- mobile: [number, number];
- tablet: [number, number];
- desktop: [number, number];
-}
-
-export const defaultPaddings: DefaultPadding = {
- mobile: [30, 16],
- tablet: [40, 30],
- desktop: [50, 60],
-};
diff --git a/src/constants/modalSizes.ts b/src/constants/modalSizes.ts
index 9f00d3fac..a279a30c6 100644
--- a/src/constants/modalSizes.ts
+++ b/src/constants/modalSizes.ts
@@ -1,11 +1,7 @@
-interface ModalSizes {
- small: string;
- medium: string;
- large: string;
-}
+import { WidthCategories } from '@app/styles/themes/types';
-export const modalSizes: ModalSizes = {
- small: '400px',
- medium: '600px',
- large: '800px',
-};
+export const modalSizes = {
+ xs: '400px',
+ md: '600px',
+ xl: '800px',
+} as const satisfies WidthCategories;
diff --git a/src/controllers/modalController.tsx b/src/controllers/modalController.tsx
new file mode 100644
index 000000000..119633c3a
--- /dev/null
+++ b/src/controllers/modalController.tsx
@@ -0,0 +1,64 @@
+import styled from 'styled-components';
+import { ModalStaticFunctions } from 'antd/es/modal/confirm';
+import {
+ CheckCircleOutlined,
+ ExclamationCircleOutlined,
+ InfoCircleOutlined,
+ CloseCircleOutlined,
+} from '@ant-design/icons';
+
+const ModalStyles = styled.div`
+ .ant-modal-confirm-success &,
+ .ant-modal-confirm-info &,
+ .ant-modal-confirm-warning &,
+ .ant-modal-confirm-error & {
+ .ant-modal-content {
+ background-color: ${({ theme }) => theme.background};
+
+ .ant-modal-confirm-title {
+ color: ${({ theme }) => theme.heading};
+ font-size: ${({ theme }) => theme.fontSizes.lg};
+ }
+
+ .ant-modal-confirm-content {
+ color: ${({ theme }) => theme.textMain};
+ font-size: ${({ theme }) => theme.fontSizes.md};
+ }
+
+ .ant-modal-confirm-btns {
+ .ant-btn.ant-btn-primary {
+ font-size: ${({ theme }) => theme.fontSizes.md};
+ font-weight: ${({ theme }) => theme.fontWeights.semibold};
+ background-color: ${({ theme }) => theme.primary};
+ border-color: ${({ theme }) => theme.primary};
+ height: ${({ theme }) => theme.heights.md};
+ }
+ }
+ }
+ }
+`;
+
+const Icons = {
+ success: CheckCircleOutlined,
+ warning: ExclamationCircleOutlined,
+ info: InfoCircleOutlined,
+ error: CloseCircleOutlined,
+} as const;
+
+const modalRender = (node: React.ReactNode) => {node};
+
+type IconType = 'info' | 'success' | 'warning' | 'error';
+
+export type ModalType = Pick;
+
+const open = (type: IconType, modal: ModalType): ModalType[IconType] => {
+ const Icon = Icons[type];
+ return (props) => modal[type]({ modalRender, icon: , ...props });
+};
+
+export const modalController = (modal: ModalType): ModalType => ({
+ info: open('info', modal),
+ success: open('success', modal),
+ warning: open('warning', modal),
+ error: open('error', modal),
+});
diff --git a/src/controllers/notificationController.tsx b/src/controllers/notificationController.tsx
index 547bb92f1..62fac335c 100644
--- a/src/controllers/notificationController.tsx
+++ b/src/controllers/notificationController.tsx
@@ -1,83 +1,97 @@
-import React from 'react';
-import { notification } from 'antd';
-import styled from 'styled-components';
+import type { IconType, NotificationInstance, ArgsProps } from 'antd/es/notification/interface';
+import styled, { css } from 'styled-components';
import { CheckCircleFilled, ExclamationCircleFilled, InfoCircleFilled, StopFilled } from '@ant-design/icons';
-import { ArgsProps } from 'antd/lib/notification';
+import { colorTypeFrom } from '@app/utils/utils';
interface IconWrapperProps {
$isOnlyTitle: boolean;
}
const IconWrapper = styled.div`
- font-size: ${(props) => (props.$isOnlyTitle ? '2rem' : '3rem')};
+ font-size: ${(props) => (props.$isOnlyTitle ? props.theme.fontSizes.xxxxl : '3rem')};
line-height: 2rem;
`;
+interface MessageProps extends IconWrapperProps {
+ $type: IconType;
+}
+
+const Message = styled.div`
+ display: flex;
+ align-items: center;
+ margin-bottom: -0.5rem;
+
+ ${(props) =>
+ props.$isOnlyTitle
+ ? css`
+ font-size: ${props.theme.fontSizes.md};
+ height: ${props.theme.heights.xs};
+ font-weight: ${props.theme.fontWeights.semibold};
+ margin-inline-start: 9px;
+ `
+ : css`
+ font-size: ${props.theme.fontSizes.xxl};
+ height: 3rem;
+ font-weight: ${props.theme.fontWeights.bold};
+ margin-inline-start: 21px;
+ `}
+
+ .ant-notification-notice.ant-notification-notice-${(props) => props.$type} & {
+ color: ${(props) => props.theme[colorTypeFrom(props.$type)]};
+ }
+`;
+
+const Description = styled.div`
+ color: ${({ theme }) => theme.textDark};
+ font-size: ${({ theme }) => theme.fontSizes.md};
+ font-weight: ${({ theme }) => theme.fontWeights.semibold};
+ line-height: 1.375rem;
+ margin-inline-start: 22px;
+`;
+
const EmptyDescription = styled.div`
margin-top: -0.75rem;
`;
-type NotificationProps = ArgsProps;
+type NotificationType = Pick;
-const openSuccessNotification = (config: NotificationProps): void => {
- notification.success({
- ...config,
- icon: (
-
-
-
- ),
- message: {config.message}
,
- description: config.description ? {config.description}
: ,
- className: config.description ? '' : 'notification-without-description',
- });
-};
+type NotificationOpener = (props: Omit) => void;
-const openInfoNotification = (config: NotificationProps): void => {
- notification.info({
- ...config,
- icon: (
-
-
-
- ),
- message: {config.message}
,
- description: config.description ? {config.description}
: ,
- className: config.description ? '' : 'notification-without-description',
- });
-};
+const Icons = {
+ success: CheckCircleFilled,
+ warning: ExclamationCircleFilled,
+ info: InfoCircleFilled,
+ error: StopFilled,
+} as const;
-const openWarningNotification = (config: NotificationProps): void => {
- notification.warning({
- ...config,
- icon: (
-
-
-
- ),
- message: {config.message}
,
- description: config.description ? {config.description}
: ,
- className: config.description ? '' : 'notification-without-description',
- });
-};
+const open = (type: IconType, notification: NotificationType): NotificationOpener => {
+ const Icon = Icons[type];
-const openErrorNotification = (config: NotificationProps): void => {
- notification.error({
- ...config,
- icon: (
-
-
-
- ),
- message: {config.message}
,
- description: config.description ? {config.description}
: ,
- className: config.description ? '' : 'notification-without-description',
- });
+ return ({ message, description, ...props }) =>
+ notification[type]({
+ icon: (
+
+
+
+ ),
+ message: (
+
+ {message}
+
+ ),
+ description: description ? {description} : ,
+ style: {
+ minHeight: '6rem',
+ padding: '2rem',
+ },
+ ...props,
+ type,
+ });
};
-export const notificationController = {
- success: openSuccessNotification,
- info: openInfoNotification,
- warning: openWarningNotification,
- error: openErrorNotification,
-};
+export const notificationController = (notification: NotificationType): Record => ({
+ success: open('success', notification),
+ info: open('info', notification),
+ warning: open('warning', notification),
+ error: open('error', notification),
+});
diff --git a/src/hocs/withLoading.hoc.tsx b/src/hocs/withLoading.hoc.tsx
index 2c9396f93..62896c752 100644
--- a/src/hocs/withLoading.hoc.tsx
+++ b/src/hocs/withLoading.hoc.tsx
@@ -1,7 +1,7 @@
import React, { Suspense } from 'react';
import { Loading } from '@app/components/common/Loading/Loading';
-type ReturnType = (props: T) => JSX.Element;
+type ReturnType = (props: T) => React.JSX.Element;
// eslint-disable-next-line @typescript-eslint/ban-types
export const withLoading = (Component: React.ComponentType): ReturnType => {
diff --git a/src/hooks/useFeedback.ts b/src/hooks/useFeedback.ts
new file mode 100644
index 000000000..08380c19b
--- /dev/null
+++ b/src/hooks/useFeedback.ts
@@ -0,0 +1,22 @@
+import { App } from 'antd';
+
+import { notificationController } from '@app/controllers/notificationController';
+import { ModalType, modalController } from '@app/controllers/modalController';
+
+export const useFeedback = (): Omit, 'modal'> & {
+ modal: ModalType;
+} => {
+ const { message, notification, modal } = App.useApp();
+
+ return {
+ message,
+ notification: {
+ ...notificationController(notification),
+ destroy: notification.destroy,
+ open: notification.open,
+ },
+ modal: {
+ ...modalController(modal),
+ },
+ };
+};
diff --git a/src/hooks/useResponsive.ts b/src/hooks/useResponsive.ts
index 8731f3d83..d0ba87bd4 100644
--- a/src/hooks/useResponsive.ts
+++ b/src/hooks/useResponsive.ts
@@ -1,5 +1,7 @@
-import { BREAKPOINTS, media } from '@app/styles/themes/constants';
+import { useTheme } from 'styled-components';
import { MediaQueryAllQueryable, MediaQueryMatchers, useMediaQuery } from 'react-responsive';
+import { media, mediaMax, mediaRange } from '@app/utils/utils';
+import { WidthCategory } from '@app/styles/themes/types';
interface ResponsiveReturnValues {
isMobile: boolean;
@@ -9,6 +11,7 @@ interface ResponsiveReturnValues {
mobileOnly: boolean;
tabletOnly: boolean;
desktopOnly: boolean;
+ breakpoint: WidthCategory;
useMediaQuery: (
settings: Partial,
device?: MediaQueryMatchers,
@@ -17,22 +20,18 @@ interface ResponsiveReturnValues {
}
export const useResponsive = (): ResponsiveReturnValues => {
- const isMobile = useMediaQuery({ query: media.xs });
- const isTablet = useMediaQuery({ query: media.md });
- const isDesktop = useMediaQuery({ query: media.xl });
- const isBigScreen = useMediaQuery({ query: media.xxl });
+ const theme = useTheme();
- const mobileOnly = useMediaQuery({
- query: `(max-width: ${BREAKPOINTS.md - 0.02}px)`,
- });
+ const isMobile = useMediaQuery({ query: `(${media('xs')({ theme })})` });
+ const isTablet = useMediaQuery({ query: `(${media('md')({ theme })})` });
+ const isDesktop = useMediaQuery({ query: `(${media('xl')({ theme })})` });
+ const isBigScreen = useMediaQuery({ query: `(${media('xxl')({ theme })})` });
- const tabletOnly = useMediaQuery({
- query: `(min-width: ${BREAKPOINTS.md}px) and (max-width: ${BREAKPOINTS.xl - 0.02}px)`,
- });
+ const mobileOnly = useMediaQuery({ query: `(${mediaMax('md')({ theme })})` });
+ const tabletOnly = useMediaQuery({ query: `(${mediaRange('md', 'xl')({ theme })})` });
+ const desktopOnly = useMediaQuery({ query: `(${mediaRange('xl', 'xxl')({ theme })})` });
- const desktopOnly = useMediaQuery({
- query: `(min-width: ${BREAKPOINTS.xl}px) and (max-width: ${BREAKPOINTS.xxl - 0.02}px)`,
- });
+ const breakpoint = isDesktop ? WidthCategory.large : isTablet ? WidthCategory.medium : WidthCategory.small;
return {
isMobile,
@@ -42,6 +41,7 @@ export const useResponsive = (): ResponsiveReturnValues => {
mobileOnly,
tabletOnly,
desktopOnly,
+ breakpoint,
useMediaQuery,
};
};
diff --git a/src/hooks/useThemeWatcher.ts b/src/hooks/useThemeWatcher.ts
index a1cc5998b..2968ceb4b 100644
--- a/src/hooks/useThemeWatcher.ts
+++ b/src/hooks/useThemeWatcher.ts
@@ -1,7 +1,5 @@
import { useEffect, useRef } from 'react';
import { useAppSelector } from './reduxHooks';
-import { ConfigProvider } from 'antd';
-import { themeObject } from '@app/styles/themes/themeVariables';
export const useThemeWatcher = (): void => {
const theme = useAppSelector((state) => state.theme.theme);
@@ -17,15 +15,5 @@ export const useThemeWatcher = (): void => {
html.removeAttribute('data-no-transition');
});
}
-
- ConfigProvider.config({
- theme: {
- primaryColor: themeObject[theme].primary,
- infoColor: themeObject[theme].primary,
- successColor: themeObject[theme].success,
- errorColor: themeObject[theme].error,
- warningColor: themeObject[theme].warning,
- },
- });
}, [theme]);
};
diff --git a/src/locales/de/translation.json b/src/locales/de/translation.json
index d2ddbd733..ced5ec599 100644
--- a/src/locales/de/translation.json
+++ b/src/locales/de/translation.json
@@ -203,7 +203,6 @@
"pwa": "Installieren PWA",
"radio": "Radio",
"rate": "Rate",
- "reactSimpleMaps": "React Einfache Karten",
"requiredField": "Dieses Feld ist erforderlich!",
"resetPassword": "Passwort zurücksetzen",
"result": "Ergebnis",
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
index ceeb314c7..dd6fdcd6c 100644
--- a/src/locales/en/translation.json
+++ b/src/locales/en/translation.json
@@ -203,7 +203,6 @@
"pwa": "Install PWA",
"radio": "Radio",
"rate": "Rate",
- "reactSimpleMaps": "React Simple Maps",
"requiredField": "This field is required!",
"resetPassword": "Reset password",
"result": "Result",
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/pages/DashboardPages/DashboardPage.styles.ts b/src/pages/DashboardPages/DashboardPage.styles.ts
index 150653bb1..b30ca9071 100644
--- a/src/pages/DashboardPages/DashboardPage.styles.ts
+++ b/src/pages/DashboardPages/DashboardPage.styles.ts
@@ -1,21 +1,22 @@
import styled from 'styled-components';
-import { LAYOUT, media } from '@app/styles/themes/constants';
+import { LAYOUT } from '@app/styles/themes/constants';
import { BaseCol } from '@app/components/common/BaseCol/BaseCol';
+import { media } from '@app/utils/utils';
export const RightSideCol = styled(BaseCol)`
- padding: ${LAYOUT.desktop.paddingVertical} ${LAYOUT.desktop.paddingHorizontal};
+ padding: ${({ theme }) => `${theme.paddings.md} ${theme.paddings.xl}`};
position: sticky;
top: 0;
display: flex;
flex-direction: column;
height: calc(100vh - ${LAYOUT.desktop.headerHeight});
- background-color: var(--sider-background-color);
+ background-color: ${({ theme }) => theme.siderBackground};
overflow-y: auto;
`;
export const LeftSideCol = styled(BaseCol)`
- @media only screen and ${media.xl} {
- padding: ${LAYOUT.desktop.paddingVertical} ${LAYOUT.desktop.paddingHorizontal};
+ @media only screen and (${media('xl')}) {
+ padding: ${({ theme }) => `${theme.paddings.md} ${theme.paddings.xl}`};
height: calc(100vh - ${LAYOUT.desktop.headerHeight});
overflow: auto;
}
@@ -42,9 +43,7 @@ export const BlockWrapper = styled.div`
flex-direction: column;
flex-shrink: 0;
gap: 15px;
-
background: black;
-
min-height: 300px;
overflow-y: auto;
`;
diff --git a/src/pages/maps/PigeonsMapsPage/PigeonsMapsPage.tsx b/src/pages/maps/PigeonsMapsPage/PigeonsMapsPage.tsx
index ba9dbb05e..42395673c 100644
--- a/src/pages/maps/PigeonsMapsPage/PigeonsMapsPage.tsx
+++ b/src/pages/maps/PigeonsMapsPage/PigeonsMapsPage.tsx
@@ -2,7 +2,7 @@ import React from 'react';
import { useTranslation } from 'react-i18next';
import { Draggable, Map } from 'pigeon-maps';
-import { stamenTerrain } from 'pigeon-maps/providers';
+import { osm } from 'pigeon-maps/providers';
import { PageTitle } from '@app/components/common/PageTitle/PageTitle';
import pigeon from '@app/assets/icons/pigeon.svg';
@@ -17,7 +17,7 @@ const PigeonsMaps: React.FC = () => {
<>
{t('common.pigeonMaps')}
-
diff --git a/src/pages/uiComponentsPages/DropdownsPage.tsx b/src/pages/uiComponentsPages/DropdownsPage.tsx
index ad6dcbc3e..b5f7c095c 100644
--- a/src/pages/uiComponentsPages/DropdownsPage.tsx
+++ b/src/pages/uiComponentsPages/DropdownsPage.tsx
@@ -1,7 +1,7 @@
import { DownOutlined } from '@ant-design/icons';
import { useTranslation } from 'react-i18next';
import styled from 'styled-components';
-import { BaseDropdown } from '@app/components/common/BaseDropdown/Dropdown';
+import { BaseDropdown } from '@app/components/common/BaseDropdown/BaseDropdown';
import { BaseButton } from '@app/components/common/BaseButton/BaseButton';
import { PageTitle } from '@app/components/common/PageTitle/PageTitle';
import * as S from '@app/pages/uiComponentsPages//UIComponentsPage.styles';
diff --git a/src/pages/uiComponentsPages/SpinnersPage.tsx b/src/pages/uiComponentsPages/SpinnersPage.tsx
index f7cdf0022..64d45b9b3 100644
--- a/src/pages/uiComponentsPages/SpinnersPage.tsx
+++ b/src/pages/uiComponentsPages/SpinnersPage.tsx
@@ -34,7 +34,7 @@ const SpinnersPage: React.FC = () => {
-
+ {t('spinners.customDescription')}
diff --git a/src/pages/uiComponentsPages/UIComponentsPage.styles.ts b/src/pages/uiComponentsPages/UIComponentsPage.styles.ts
index 860117dee..2851876f7 100644
--- a/src/pages/uiComponentsPages/UIComponentsPage.styles.ts
+++ b/src/pages/uiComponentsPages/UIComponentsPage.styles.ts
@@ -5,23 +5,25 @@ import { BaseCollapse } from '@app/components/common/BaseCollapse/BaseCollapse';
export const Card = styled(CommonCard)`
width: 100%;
margin-bottom: 1.25rem;
+
.ant-card-head-title {
- font-size: 1rem;
+ font-size: ${({ theme }) => theme.fontSizes.md};
}
+
.ant-card-body {
display: flex;
flex-wrap: wrap;
gap: 1.25rem;
align-items: center;
}
- .ant-card-body:before {
- display: none;
- }
+
+ .ant-card-body:before,
.ant-card-body:after {
display: none;
}
+
&.ant-card-bordered {
- border: 1px solid var(--border-color);
+ border: 1px solid ${({ theme }) => theme.border};
}
`;
diff --git a/src/pages/uiComponentsPages/dataDisplay/AvatarsPage.tsx b/src/pages/uiComponentsPages/dataDisplay/AvatarsPage.tsx
index c2961a098..8acb7e9e2 100644
--- a/src/pages/uiComponentsPages/dataDisplay/AvatarsPage.tsx
+++ b/src/pages/uiComponentsPages/dataDisplay/AvatarsPage.tsx
@@ -1,15 +1,16 @@
import { useTranslation } from 'react-i18next';
import { UserOutlined, AntDesignOutlined } from '@ant-design/icons';
+import { useTheme } from 'styled-components';
import { BaseAvatar } from '@app/components/common/BaseAvatar/BaseAvatar';
import { BaseBadge } from '@app/components/common/BaseBadge/BaseBadge';
import { PageTitle } from '@app/components/common/PageTitle/PageTitle';
import * as S from '@app/pages/uiComponentsPages//UIComponentsPage.styles';
-import { BASE_COLORS } from '@app/styles/themes/constants';
import { BaseTooltip } from '@app/components/common/BaseTooltip/BaseTooltip';
import { BaseCol } from '@app/components/common/BaseCol/BaseCol';
const AvatarsPage: React.FC = () => {
const { t } = useTranslation();
+ const theme = useTheme();
return (
<>
@@ -26,19 +27,15 @@ const AvatarsPage: React.FC = () => {
} />
-
+
-
+
K
- } />
+ } />
- } />
+ } />
diff --git a/src/pages/uiComponentsPages/dataDisplay/CollapsePage.tsx b/src/pages/uiComponentsPages/dataDisplay/CollapsePage.tsx
index 1b525aac1..8dddafeaa 100644
--- a/src/pages/uiComponentsPages/dataDisplay/CollapsePage.tsx
+++ b/src/pages/uiComponentsPages/dataDisplay/CollapsePage.tsx
@@ -3,68 +3,54 @@ import { BaseCollapse } from '@app/components/common/BaseCollapse/BaseCollapse';
import { PageTitle } from '@app/components/common/PageTitle/PageTitle';
import * as S from '@app/pages/uiComponentsPages//UIComponentsPage.styles';
import { BaseCol } from '@app/components/common/BaseCol/BaseCol';
+import { useMemo } from 'react';
const CollapsePage: React.FC = () => {
const { t } = useTranslation();
+
+ const { items, nestedItems } = useMemo(() => {
+ const items = [
+ {
+ label: `${t('dataDisplay.collapse.panelHeader')} 1`,
+ key: 1,
+ children: {t('dataDisplay.collapse.text')}
,
+ },
+ {
+ label: `${t('dataDisplay.collapse.panelHeader')} 2`,
+ key: 2,
+ children: {t('dataDisplay.collapse.text')}
,
+ },
+ {
+ label: `${t('dataDisplay.collapse.panelHeader')} 3`,
+ key: 3,
+ children: {t('dataDisplay.collapse.text')}
,
+ },
+ ];
+ return {
+ items,
+ nestedItems: [
+ { ...items[0], children: },
+ items[1],
+ items[2],
+ ],
+ };
+ }, [t]);
+
return (
<>
{t('common.collapse')}
-
-
- {t('dataDisplay.collapse.text')}
-
-
- {t('dataDisplay.collapse.text')}
-
-
- {t('dataDisplay.collapse.text')}
-
-
+
-
-
- {t('dataDisplay.collapse.text')}
-
-
- {t('dataDisplay.collapse.text')}
-
-
- {t('dataDisplay.collapse.text')}
-
-
+
-
-
-
-
- {t('dataDisplay.collapse.text')}
-
-
-
-
- {t('dataDisplay.collapse.text')}
-
-
- {t('dataDisplay.collapse.text')}
-
-
+
-
-
- {t('dataDisplay.collapse.text')}
-
-
- {t('dataDisplay.collapse.text')}
-
-
- {t('dataDisplay.collapse.text')}
-
-
+
>
diff --git a/src/pages/uiComponentsPages/feedback/AlertsPage.tsx b/src/pages/uiComponentsPages/feedback/AlertsPage.tsx
index 82d609f21..8cd0ac0ac 100644
--- a/src/pages/uiComponentsPages/feedback/AlertsPage.tsx
+++ b/src/pages/uiComponentsPages/feedback/AlertsPage.tsx
@@ -83,7 +83,7 @@ const AlertsPage: React.FC = () => {
type="warning"
action={
-
+
{t('alerts.done')}
diff --git a/src/pages/uiComponentsPages/feedback/NotificationsPage.tsx b/src/pages/uiComponentsPages/feedback/NotificationsPage.tsx
index d0a3080cb..ea6d5dade 100644
--- a/src/pages/uiComponentsPages/feedback/NotificationsPage.tsx
+++ b/src/pages/uiComponentsPages/feedback/NotificationsPage.tsx
@@ -1,12 +1,13 @@
import { useTranslation } from 'react-i18next';
import { BaseButton } from '@app/components/common/BaseButton/BaseButton';
-import { notificationController } from '@app/controllers/notificationController';
+import { useFeedback } from '@app/hooks/useFeedback';
import { PageTitle } from '@app/components/common/PageTitle/PageTitle';
import * as S from '@app/pages/uiComponentsPages//UIComponentsPage.styles';
import { BaseCol } from '@app/components/common/BaseCol/BaseCol';
const NotificationsPage: React.FC = () => {
const { t } = useTranslation();
+ const { notification } = useFeedback();
return (
<>
@@ -16,7 +17,7 @@ const NotificationsPage: React.FC = () => {
- notificationController.info({
+ notification.info({
message: t('notifications.infoTitle'),
description: t('notifications.infoDescription'),
})
@@ -29,7 +30,7 @@ const NotificationsPage: React.FC = () => {
- notificationController.success({
+ notification.success({
message: t('notifications.successTitle'),
description: t('notifications.successDescription'),
})
@@ -40,7 +41,7 @@ const NotificationsPage: React.FC = () => {
- notificationController.info({
+ notification.info({
message: t('notifications.infoTitle'),
description: t('notifications.infoDescription'),
})
@@ -51,7 +52,7 @@ const NotificationsPage: React.FC = () => {
- notificationController.warning({
+ notification.warning({
message: t('notifications.warningTitle'),
description: t('notifications.warningDescription'),
})
@@ -62,7 +63,7 @@ const NotificationsPage: React.FC = () => {
- notificationController.error({
+ notification.error({
message: t('notifications.errorTitle'),
description: t('notifications.errorDescription'),
})
@@ -75,7 +76,7 @@ const NotificationsPage: React.FC = () => {
- notificationController.success({
+ notification.success({
message: t('notifications.successTitle'),
})
}
@@ -85,7 +86,7 @@ const NotificationsPage: React.FC = () => {
- notificationController.info({
+ notification.info({
message: t('notifications.infoTitle'),
})
}
@@ -95,7 +96,7 @@ const NotificationsPage: React.FC = () => {
- notificationController.warning({
+ notification.warning({
message: t('notifications.warningTitle'),
})
}
@@ -105,7 +106,7 @@ const NotificationsPage: React.FC = () => {
- notificationController.error({
+ notification.error({
message: t('notifications.errorTitle'),
})
}
diff --git a/src/pages/uiComponentsPages/feedback/ProgressPage.tsx b/src/pages/uiComponentsPages/feedback/ProgressPage.tsx
index 9e522a90d..412807428 100644
--- a/src/pages/uiComponentsPages/feedback/ProgressPage.tsx
+++ b/src/pages/uiComponentsPages/feedback/ProgressPage.tsx
@@ -1,5 +1,6 @@
import { useState, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
+import { useTheme } from 'styled-components';
import { MinusOutlined, PlusOutlined } from '@ant-design/icons';
import { BaseProgress } from '@app/components/common/BaseProgress/BaseProgress';
import { BaseButton, ButtonGroup } from '@app/components/common/BaseButton/BaseButton';
@@ -10,13 +11,9 @@ import { BaseCol } from '@app/components/common/BaseCol/BaseCol';
const ProgressPage: React.FC = () => {
const [percent, setPercent] = useState(0);
const { t } = useTranslation();
+ const theme = useTheme();
- const primaryColor = 'var(--primary-color)';
- const secondaryColor = 'var(--secondary-color)';
- const successColor = 'var(--success-color)';
- const errorColor = 'var(--error-color)';
-
- const dynamicSuccessColor = useMemo(() => (percent === 100 ? successColor : primaryColor), [percent]);
+ const dynamicSuccessColor = useMemo(() => (percent === 100 ? theme.success : theme.primary), [percent, theme]);
const increase = () => {
let newPercent = percent + 10;
@@ -39,16 +36,16 @@ const ProgressPage: React.FC = () => {
{t('common.progress')}
-
-
-
-
-
+
+
+
+
+
-
-
-
+
+
+
@@ -61,22 +58,22 @@ const ProgressPage: React.FC = () => {
-
-
+
+
{
diff --git a/src/pages/uiComponentsPages/feedback/ResultsPage.tsx b/src/pages/uiComponentsPages/feedback/ResultsPage.tsx
index b6bd0b205..2d82144b3 100644
--- a/src/pages/uiComponentsPages/feedback/ResultsPage.tsx
+++ b/src/pages/uiComponentsPages/feedback/ResultsPage.tsx
@@ -4,7 +4,7 @@ import { BaseResult } from '@app/components/common/BaseResult/BaseResult';
import { BaseButton } from '@app/components/common/BaseButton/BaseButton';
import { PageTitle } from '@app/components/common/PageTitle/PageTitle';
import * as S from '@app/pages/uiComponentsPages//UIComponentsPage.styles';
-import { media } from '@app/styles/themes/constants';
+import { media } from '@app/utils/utils';
import { BaseCol } from '@app/components/common/BaseCol/BaseCol';
import { useMemo } from 'react';
import { BaseRow } from '@app/components/common/BaseRow/BaseRow';
@@ -16,11 +16,11 @@ const Card = styled(S.Card)`
`;
const BuyButton = styled(BaseButton)`
- @media only screen and ${media.xs} {
+ @media only screen and (${media('xs')}) {
margin-top: 1rem;
}
- @media only screen and ${media.md} {
+ @media only screen and (${media('md')}) {
margin-top: 0;
}
`;
diff --git a/src/pages/uiComponentsPages/feedback/SkeletonsPage.tsx b/src/pages/uiComponentsPages/feedback/SkeletonsPage.tsx
index bebc3dc32..dd1912d50 100644
--- a/src/pages/uiComponentsPages/feedback/SkeletonsPage.tsx
+++ b/src/pages/uiComponentsPages/feedback/SkeletonsPage.tsx
@@ -5,7 +5,7 @@ import styled from 'styled-components';
import { BaseSkeleton } from '@app/components/common/BaseSkeleton/BaseSkeleton';
import { PageTitle } from '@app/components/common/PageTitle/PageTitle';
import * as S from '@app/pages/uiComponentsPages//UIComponentsPage.styles';
-import { media } from '@app/styles/themes/constants';
+import { media } from '@app/utils/utils';
import { BaseSwitch } from '@app/components/common/BaseSwitch/BaseSwitch';
import { BaseForm } from '@app/components/common/forms/BaseForm/BaseForm';
import { BaseCol } from '@app/components/common/BaseCol/BaseCol';
@@ -16,11 +16,11 @@ import { BaseRadio } from '@app/components/common/BaseRadio/BaseRadio';
type Size = 'default' | 'large' | 'small';
const FormItem = styled(BaseForm.Item)`
- @media only screen and ${media.xs} {
+ @media only screen and (${media('xs')}) {
max-width: fit-content;
}
- @media only screen and ${media.md} {
+ @media only screen and (${media('md')}) {
max-width: 100%;
}
`;
diff --git a/src/pages/uiComponentsPages/forms/DateTimePickersPage.tsx b/src/pages/uiComponentsPages/forms/DateTimePickersPage.tsx
index 24d388f0b..5c6b9a734 100644
--- a/src/pages/uiComponentsPages/forms/DateTimePickersPage.tsx
+++ b/src/pages/uiComponentsPages/forms/DateTimePickersPage.tsx
@@ -1,5 +1,5 @@
import { useTranslation } from 'react-i18next';
-import { DayjsDatePicker } from '@app/components/common/pickers/DayjsDatePicker';
+import { BaseDatePicker } from '@app/components/common/pickers/BaseDatePicker';
import { PageTitle } from '@app/components/common/PageTitle/PageTitle';
import * as S from '@app/pages/uiComponentsPages//UIComponentsPage.styles';
import { BaseCol } from '@app/components/common/BaseCol/BaseCol';
@@ -12,26 +12,26 @@ const DateTimePickersPage: React.FC = () => {
{t('common.dateTimePicker')}
-
-
-
-
-
+
+
+
+
+
-
-
-
+
+
+
-
-
+
+
-
+
-
+
>
diff --git a/src/pages/uiComponentsPages/forms/SelectsPage.tsx b/src/pages/uiComponentsPages/forms/SelectsPage.tsx
index df3464ecd..4e6ecf10a 100644
--- a/src/pages/uiComponentsPages/forms/SelectsPage.tsx
+++ b/src/pages/uiComponentsPages/forms/SelectsPage.tsx
@@ -82,13 +82,20 @@ const SelectsPage: React.FC = () => {
{children}
-
+
{children}
@@ -108,7 +115,7 @@ const SelectsPage: React.FC = () => {
size={size}
placeholder={t('selects.pleaseSelect')}
defaultValue={['a10', 'c12']}
- width={'100%'}
+ width="100%"
>
{children}
@@ -117,7 +124,7 @@ const SelectsPage: React.FC = () => {
size={size}
placeholder={t('selects.pleaseSelect')}
defaultValue={['a10', 'c12']}
- width={'100%'}
+ width="100%"
>
{children}
@@ -126,10 +133,9 @@ const SelectsPage: React.FC = () => {
diff --git a/src/pages/uiComponentsPages/forms/UploadsPage.tsx b/src/pages/uiComponentsPages/forms/UploadsPage.tsx
index ca1f34ed9..d31c1ccf1 100644
--- a/src/pages/uiComponentsPages/forms/UploadsPage.tsx
+++ b/src/pages/uiComponentsPages/forms/UploadsPage.tsx
@@ -6,25 +6,27 @@ import { BaseUpload } from '@app/components/common/BaseUpload/BaseUpload';
import { BaseButton } from '@app/components/common/BaseButton/BaseButton';
import { PageTitle } from '@app/components/common/PageTitle/PageTitle';
import * as S from '@app/pages/uiComponentsPages//UIComponentsPage.styles';
-import { FONT_SIZE, FONT_WEIGHT } from '@app/styles/themes/constants';
-import { notificationController } from '@app/controllers/notificationController';
+import { useFeedback } from '@app/hooks/useFeedback';
import { BaseCol } from '@app/components/common/BaseCol/BaseCol';
const DraggerIconWrapper = styled.div`
font-size: 4rem;
- color: var(--primary-color);
+ color: ${({ theme }) => theme.primary};
`;
+
const DraggerTitle = styled.div`
- font-size: ${FONT_SIZE.xl};
- font-weight: ${FONT_WEIGHT.bold};
+ font-size: ${({ theme }) => theme.fontSizes.xl};
+ font-weight: ${({ theme }) => theme.fontWeights.bold};
`;
+
const DraggerDescription = styled.div`
- font-size: ${FONT_SIZE.md};
+ font-size: ${({ theme }) => theme.fontSizes.md};
padding: 0 1rem;
`;
const UploadsPage: React.FC = () => {
const { t } = useTranslation();
+ const { notification } = useFeedback();
const uploadProps = {
name: 'file',
@@ -36,9 +38,9 @@ const UploadsPage: React.FC = () => {
console.log(info.file, info.fileList);
}
if (status === 'done') {
- notificationController.success({ message: t('uploads.successUpload', { name: info.file.name }) });
+ notification.success({ message: t('uploads.successUpload', { name: info.file.name }) });
} else if (status === 'error') {
- notificationController.error({ message: t('uploads.failedUpload', { name: info.file.name }) });
+ notification.error({ message: t('uploads.failedUpload', { name: info.file.name }) });
}
},
};
diff --git a/src/pages/uiComponentsPages/modals/ModalsPage.tsx b/src/pages/uiComponentsPages/modals/ModalsPage.tsx
index 82d64e3b6..301123bd0 100644
--- a/src/pages/uiComponentsPages/modals/ModalsPage.tsx
+++ b/src/pages/uiComponentsPages/modals/ModalsPage.tsx
@@ -5,9 +5,11 @@ import { BaseModal } from '@app/components/common/BaseModal/BaseModal';
import { PageTitle } from '@app/components/common/PageTitle/PageTitle';
import * as S from '@app/pages/uiComponentsPages//UIComponentsPage.styles';
import { BaseCol } from '@app/components/common/BaseCol/BaseCol';
+import { useFeedback } from '@app/hooks/useFeedback';
const ModalsPage: React.FC = () => {
const { t } = useTranslation();
+ const { modal } = useFeedback();
const [isBasicModalOpen, setIsBasicModalOpen] = useState(false);
const [isSmallModalOpen, setIsSmallModalOpen] = useState(false);
const [isMiddleModalOpen, setIsMiddleModalOpen] = useState(false);
@@ -15,28 +17,28 @@ const ModalsPage: React.FC = () => {
const [isFullscreenModalOpen, setIsFullscreenModalOpen] = useState(false);
const success = () => {
- BaseModal.success({
+ modal.success({
title: t('modals.successTitle'),
content: t('modals.someContent'),
});
};
const info = () => {
- BaseModal.info({
+ modal.info({
title: t('modals.infoTitle'),
content: t('modals.someContent'),
});
};
const warning = () => {
- BaseModal.warning({
+ modal.warning({
title: t('modals.warningTitle'),
content: t('modals.someContent'),
});
};
const error = () => {
- BaseModal.error({
+ modal.error({
title: t('modals.errorTitle'),
content: t('modals.someContent'),
});
@@ -116,7 +118,7 @@ const ModalsPage: React.FC = () => {
open={isFullscreenModalOpen}
onOk={() => setIsFullscreenModalOpen(false)}
onCancel={() => setIsFullscreenModalOpen(false)}
- width={'100%'}
+ width="100%"
>
{t('modals.someContent')}
{t('modals.someContent')}
diff --git a/src/pages/uiComponentsPages/modals/PopconfirmsPage.tsx b/src/pages/uiComponentsPages/modals/PopconfirmsPage.tsx
index 5dfbcccda..44f313dc0 100644
--- a/src/pages/uiComponentsPages/modals/PopconfirmsPage.tsx
+++ b/src/pages/uiComponentsPages/modals/PopconfirmsPage.tsx
@@ -6,28 +6,30 @@ import { BasePopconfirm } from '@app/components/common/BasePopconfirm/BasePopcon
import { TopButtons, LeftButtons, RightButtons, BottomButtons } from '@app/pages/uiComponentsPages/modals/PopoversPage';
import { PageTitle } from '@app/components/common/PageTitle/PageTitle';
import * as S from '@app/pages/uiComponentsPages//UIComponentsPage.styles';
-import { FONT_SIZE, media } from '@app/styles/themes/constants';
+import { media } from '@app/utils/utils';
import { BaseCol } from '@app/components/common/BaseCol/BaseCol';
-import { notificationController } from '@app/controllers/notificationController';
+import { useFeedback } from '@app/hooks/useFeedback';
const AsyncButton = styled(BaseButton)`
- @media only screen and ${media.xs} {
- font-size: ${FONT_SIZE.xs};
+ @media only screen and (${media('xs')}) {
+ font-size: ${({ theme }) => theme.fontSizes.xs};
}
- @media only screen and ${media.md} {
- font-size: ${FONT_SIZE.md};
+
+ @media only screen and (${media('md')}) {
+ font-size: ${({ theme }) => theme.fontSizes.md};
}
`;
const PopconfirmsPage: React.FC = () => {
const { t } = useTranslation();
+ const { notification } = useFeedback();
const [open, setOpen] = useState(false);
const [confirmLoading, setConfirmLoading] = useState(false);
const text = t('popconfirm.content');
const confirm = () => {
- notificationController.info({ message: t('popconfirm.yesClick') });
+ notification.info({ message: t('popconfirm.yesClick') });
};
const handleOk = () => {
diff --git a/src/pages/uiComponentsPages/modals/PopoversPage.tsx b/src/pages/uiComponentsPages/modals/PopoversPage.tsx
index 0fdbcb7fe..72c2a6300 100644
--- a/src/pages/uiComponentsPages/modals/PopoversPage.tsx
+++ b/src/pages/uiComponentsPages/modals/PopoversPage.tsx
@@ -4,7 +4,7 @@ import { BaseButton } from '@app/components/common/BaseButton/BaseButton';
import { BasePopover } from '@app/components/common/BasePopover/BasePopover';
import { PageTitle } from '@app/components/common/PageTitle/PageTitle';
import * as S from '@app/pages/uiComponentsPages//UIComponentsPage.styles';
-import { media } from '@app/styles/themes/constants';
+import { media } from '@app/utils/utils';
import { BaseCol } from '@app/components/common/BaseCol/BaseCol';
const buttonWidth = 70;
@@ -17,11 +17,11 @@ export const PopoverButton = styled.div`
export const TopButtons = styled(PopoverButton)`
white-space: nowrap;
- @media only screen and ${media.xs} {
+ @media only screen and (${media('xs')}) {
margin-left: ${buttonWidth - 24}px;
}
- @media only screen and ${media.md} {
+ @media only screen and (${media('md')}) {
margin-left: ${buttonWidth + 18}px;
}
`;
@@ -35,11 +35,11 @@ export const RightButtons = styled(PopoverButton)`
flex-direction: column;
width: ${buttonWidth}px;
- @media only screen and ${media.xs} {
+ @media only screen and (${media('xs')}) {
margin-left: ${buttonWidth * 3 - 14}px;
}
- @media only screen and ${media.md} {
+ @media only screen and (${media('md')}) {
margin-left: ${buttonWidth * 4}px;
}
`;
@@ -49,11 +49,11 @@ export const BottomButtons = styled(PopoverButton)`
clear: both;
white-space: nowrap;
- @media only screen and ${media.xs} {
+ @media only screen and (${media('xs')}) {
margin-left: ${buttonWidth - 44}px;
}
- @media only screen and ${media.md} {
+ @media only screen and (${media('md')}) {
margin-left: ${buttonWidth}px;
}
`;
diff --git a/src/pages/uiComponentsPages/navigation/BreadcrumbsPage.tsx b/src/pages/uiComponentsPages/navigation/BreadcrumbsPage.tsx
index dfd5f6a63..33a69c2a0 100644
--- a/src/pages/uiComponentsPages/navigation/BreadcrumbsPage.tsx
+++ b/src/pages/uiComponentsPages/navigation/BreadcrumbsPage.tsx
@@ -2,7 +2,7 @@ import React from 'react';
import { useTranslation } from 'react-i18next';
import { useLocation } from 'react-router-dom';
import { HomeOutlined, UserOutlined } from '@ant-design/icons';
-import { BaseBreadcrumb } from '@app/components/common/BaseBreadcrumb/BaseBreadcrumb';
+import { BaseBreadcrumb, BaseBreadcrumbItemType } from '@app/components/common/BaseBreadcrumb/BaseBreadcrumb';
import { PageTitle } from '@app/components/common/PageTitle/PageTitle';
import * as S from '@app/pages/uiComponentsPages//UIComponentsPage.styles';
import { BaseCol } from '@app/components/common/BaseCol/BaseCol';
@@ -11,21 +11,12 @@ import { BaseSpace } from '@app/components/common/BaseSpace/BaseSpace';
const BreadcrumbsPage: React.FC = () => {
const { t } = useTranslation();
- const { pathname } = useLocation();
+ const { pathname: href } = useLocation();
- const menu = [
- {
- key: '1',
- label: t('breadcrumbs.general'),
- },
- {
- key: '2',
- label: t('breadcrumbs.layout'),
- },
- {
- key: '3',
- label: t('breadcrumbs.navigation'),
- },
+ const menuItems: Required['menu']['items'] = [
+ { label: t('breadcrumbs.general') },
+ { label: t('breadcrumbs.layout') },
+ { label: t('breadcrumbs.navigation') },
];
return (
@@ -33,42 +24,55 @@ const BreadcrumbsPage: React.FC = () => {
{t('common.breadcrumbs')}
-
- {t('breadcrumbs.home')}
- {t('breadcrumbs.applicationCenter')}
- {t('breadcrumbs.applicationList')}
- {t('breadcrumbs.application')}
-
+
-
-
-
-
-
-
-
- {t('breadcrumbs.applicationList')}
-
-
- {t('breadcrumbs.application')}
-
+ },
+ {
+ href,
+ title: (
+
+
+ {t('breadcrumbs.applicationList')}
+
+ ),
+ },
+ { href, title: t('breadcrumbs.application') },
+ ]}
+ />
-
- {t('breadcrumbs.home')}
- {t('breadcrumbs.applicationCenter')}
- {t('breadcrumbs.applicationList')}
- {t('breadcrumbs.application')}
-
+
-
- {t('breadcrumbs.antd')}
- {t('breadcrumbs.component')}
- {t('breadcrumbs.general')}
- {t('breadcrumbs.button')}
-
+ ({ key: item.label as React.Key, ...item })) },
+ title: t('breadcrumbs.general'),
+ },
+ { href, title: t('breadcrumbs.button') },
+ ]}
+ />
>
diff --git a/src/pages/uiComponentsPages/navigation/TabsPage.tsx b/src/pages/uiComponentsPages/navigation/TabsPage.tsx
index 8efee958c..27e1498fc 100644
--- a/src/pages/uiComponentsPages/navigation/TabsPage.tsx
+++ b/src/pages/uiComponentsPages/navigation/TabsPage.tsx
@@ -46,7 +46,7 @@ const TabsPage: React.FC = () => {
-
+ ({ ...tab, disabled: true }))} />
(next) => (action) => {
if (isRejectedWithValue(action)) {
- notificationController.error({ message: action.payload });
+ openErrorNotification({ message: action.payload });
}
return next(action);
diff --git a/src/store/slices/pwaSlice.ts b/src/store/slices/pwaSlice.ts
index 80c4db94a..0c1c2c180 100644
--- a/src/store/slices/pwaSlice.ts
+++ b/src/store/slices/pwaSlice.ts
@@ -1,6 +1,12 @@
-import { createSlice } from '@reduxjs/toolkit';
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
-const initialState = {
+interface ProgressiveWebAppState {
+ event: Event | null;
+ isPWASupported: boolean;
+ isStandalone: boolean;
+}
+
+const initialState: ProgressiveWebAppState = {
event: null,
isPWASupported: false,
isStandalone: window.matchMedia('(display-mode: standalone)').matches,
@@ -10,8 +16,8 @@ export const pwaSlice = createSlice({
name: 'pwa',
initialState,
reducers: {
- addDeferredPrompt: (state, action) => {
- state.event = action.payload;
+ addDeferredPrompt: (state, { payload }: PayloadAction) => {
+ state.event = payload;
state.isPWASupported = true;
},
},
diff --git a/src/store/store.ts b/src/store/store.ts
index 18e2f6d08..23234ca46 100644
--- a/src/store/store.ts
+++ b/src/store/store.ts
@@ -4,7 +4,13 @@ import rootReducer from '@app/store/slices';
export const store = configureStore({
reducer: rootReducer,
- middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(errorLoggingMiddleware),
+ middleware: (getDefaultMiddleware) =>
+ getDefaultMiddleware({
+ serializableCheck: {
+ ignoredActions: ['pwa/addDeferredPrompt'],
+ ignoredPaths: ['pwa.event'],
+ },
+ }).concat(errorLoggingMiddleware),
});
export type RootState = ReturnType;
diff --git a/src/styles/GlobalStyle.ts b/src/styles/GlobalStyle.ts
index e0c9d3b04..bdf38f399 100644
--- a/src/styles/GlobalStyle.ts
+++ b/src/styles/GlobalStyle.ts
@@ -1,197 +1,65 @@
-import { createGlobalStyle } from 'styled-components';
+import * as styled from 'styled-components';
import { resetCss } from './resetCss';
-import { BREAKPOINTS, FONT_SIZE, FONT_WEIGHT, media } from './themes/constants';
-import {
- lightThemeVariables,
- darkThemeVariables,
- commonThemeVariables,
- antOverrideCssVariables,
-} from './themes/themeVariables';
-
-export default createGlobalStyle`
+import { colorTypeFrom } from '@app/utils/utils';
+export default styled.createGlobalStyle`
${resetCss}
- [data-theme='light'],
:root {
- ${lightThemeVariables}
- }
-
- [data-theme='dark'] {
- ${darkThemeVariables}
+ color-scheme: light dark;
}
- :root {
- ${commonThemeVariables};
- ${antOverrideCssVariables};
- }
-
[data-no-transition] * {
transition: none !important;
}
-
- .range-picker {
- & .ant-picker-panels {
- @media only screen and ${media.xs} and (max-width: ${BREAKPOINTS.md - 0.02}px) {
- display: flex;
- flex-direction: column;
- }
- }
- }
-
- .search-overlay {
- box-shadow: var(--box-shadow);
- @media only screen and ${media.xs} and (max-width: ${BREAKPOINTS.md - 0.02}px) {
- width: calc(100vw - 16px);
- max-width: 600px;
- }
-
- @media only screen and ${media.md} {
- width: 323px;
- }
+ button,
+ input {
+ font-family: ${({ theme }) => theme.fontFamilies.main}, sans-serif;
}
- a {
- color: var(--primary-color);
- &:hover,:active {
- color: var(--ant-primary-color-hover);
- }
- }
-
- .ant-picker-cell {
- color: var(--text-main-color);
- }
-
- .ant-picker-cell-in-view .ant-picker-calendar-date-value {
- color: var(--text-main-color);
- font-weight: ${FONT_WEIGHT.bold};
- }
-
- .ant-picker svg {
- color: var(--text-light-color);
- }
-
- // notifications start
- .ant-notification-notice {
- width: 36rem;
- padding: 2rem;
- min-height: 6rem;
-
- .ant-notification-notice-with-icon .ant-notification-notice-message {
- margin-bottom: 0;
- margin-left: 2.8125rem;
- }
-
- .ant-notification-notice-with-icon .ant-notification-notice-description {
- margin-left: 4.375rem;
- margin-top: 0;
- }
-
- .ant-notification-notice-icon {
- font-size: 2.8125rem;
- margin-left: 0
- }
-
- .ant-notification-notice-close {
- top: 1.25rem;
- right: 1.25rem;
- }
-
- .ant-notification-notice-close-x {
- display: flex;
- font-size: 0.9375rem;
- }
-
- .notification-without-description {
- .ant-notification-notice-close {
- top: 1.875rem;
- }
- .ant-notification-notice-with-icon .ant-notification-notice-description {
- margin-top: 0.625rem;
- }
- }
-
- .title {
- font-size: ${FONT_SIZE.xxl};
- height: 3rem;
- margin-left: 1.5rem;
- display: flex;
- align-items: center;
- font-weight: ${FONT_WEIGHT.bold};
-
- &.title-only {
- color: var(--text-main-color);
- font-size: ${FONT_SIZE.md};
- height: 2rem;
- line-height: 2rem;
- margin-left: 0.75rem;
- font-weight: ${FONT_WEIGHT.semibold};
+ .ant-menu-vertical {
+ .ant-menu-item {
+ .ant-menu-title-content {
+ a {
+ font-size: ${({ theme }) => theme.fontSizes.md};
+ color: ${({ theme }) => theme.textMain};
+
+ &:hover,
+ :active {
+ color: ${({ theme }) => theme.primary6};
+ }
+ }
}
- }
-
- .description {
- color: #404040;
- font-size: ${FONT_SIZE.md};
- font-weight: ${FONT_WEIGHT.semibold};
- line-height: 1.375rem;
}
-
- &.ant-notification-notice-success {
- border: 1px solid var(--success-color);
- background: var(--notification-success-color);
-
- .title {
- color: var(--success-color);
+ .ant-menu-item-selected {
+ .ant-menu-title-content {
+ a {
+ color: inherit;
+ }
}
}
-
- &.ant-notification-notice-info {
- border: 1px solid var(--primary-color);
- background: var(--notification-primary-color);
-
- .title {
- color: var(--primary-color);
- }
- }
-
- &.ant-notification-notice-warning {
- border: 1px solid var(--warning-color);
- background: var(--notification-warning-color);
-
- .title {
- color: var(--warning-color);
- }
- }
-
- &.ant-notification-notice-error {
- border: 1px solid var(--error-color);
- background: var(--notification-error-color);
-
- .title {
- color: var(--error-color);
+ }
+
+ .ant-tooltip {
+ .ant-tooltip-content {
+ .ant-tooltip-inner {
+ min-width: 30px;
+ min-height: 32px;
+ font-size: ${({ theme }) => theme.fontSizes.md};
}
}
-
- .success-icon {
- color: var(--success-color);
- }
-
- .info-icon {
- color: var(--primary-color);
- }
-
- .warning-icon {
- color: var(--warning-color);
- }
-
- .error-icon {
- color: var(--error-color);
- }
}
-
- .ant-menu-inline, .ant-menu-vertical {
- border-right: 0;
+
+ .ant-notification {
+ ${({ theme }) =>
+ (['info', 'success', 'warning', 'error'] as const).map(
+ (notification) => styled.css`
+ .ant-notification-notice-${notification} {
+ border: 1px solid ${theme[colorTypeFrom(notification)]};
+ background: ${theme.notification[colorTypeFrom(notification)]};
+ }
+ `,
+ )}
}
- // notifications end
`;
diff --git a/src/styles/_override_variables.less b/src/styles/_override_variables.less
deleted file mode 100644
index f02a772a3..000000000
--- a/src/styles/_override_variables.less
+++ /dev/null
@@ -1,135 +0,0 @@
-// Here you can find all the default antd variables
-// https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less
-
-// base override
-@background-color-light: rgba(1, 80, 154, 0.05);
-
-@font-family: 'Montserrat', sans-serif;
-@font-size-base: 16px;
-@font-size-sm: @font-size-base - 2px;
-
-@height-sm: 32px;
-@height-base: 50px;
-@height-lg: 64px;
-
-@border-radius-base: 7px;
-@border-color-split: #f0f0f0;
-
-// Media queries
-@screen-xs: 360px;
-@screen-sm: 568px;
-@screen-xl: 1280px;
-@screen-xxl: 1920px;
-
-// Layout
-@layout-header-height: 4.25rem;
-@layout-header-padding: 1rem;
-
-// Alert
-@alert-info-bg-color: #dfefff;
-
-// Card
-@card-head-color: @text-color;
-@card-head-padding: 20px;
-@card-head-padding-sm: 15px;
-@card-head-font-size: 18px;
-@card-head-font-size-sm: @font-size-base;
-@card-padding-base: 20px;
-@card-padding-base-sm: 15px;
-
-// Table
-@table-border-radius-base: 0;
-
-// Checkbox
-@checkbox-check-bg: transparent;
-
-// Tag
-@tag-font-size: @font-size-sm;
-
-// Button
-@btn-font-weight: 600;
-
-@btn-ghost-color: @primary-color;
-@btn-ghost-border: @primary-color;
-
-// Select
-@select-item-selected-font-weight: 500;
-
-// Rate
-@rate-star-color: #ffc24b;
-@rate-star-size: 8px;
-
-// Form
-@form-item-margin-bottom: 16px;
-@form-item-label-font-size: @font-size-sm;
-
-// Select
-@select-single-item-height-lg: @height-lg;
-
-// Menu
-@menu-inline-toplevel-item-height: @height-base;
-@menu-item-height: @height-base;
-@menu-icon-margin-right: 1rem;
-@menu-icon-size: 1.25rem;
-
-// Popconfirm
-@zindex-popover: 2000;
-@zindex-notification: 9999;
-
-// Table
-@table-border-color: #b3cbe1;
-
-// themes value override
-@heading-color: var(--heading-color);
-@component-background: var(--background-color);
-@text-color: var(--text-main-color);
-@item-hover-bg: var(--item-hover-bg);
-@background-color-base: var(--background-base-color);
-@border-color-base: var(--border-base-color);
-
-// Icons
-@icon-color-hover: var(--icon-hover-color);
-
-// Disabled state
-@disabled-bg: var(--disabled-bg-color);
-
-// Layout
-@layout-body-background: var(--layout-body-bg-color);
-@layout-header-background: var(--layout-header-bg-color);
-@layout-sider-background: var(--layout-sider-bg-color);
-
-// Input
-@input-placeholder-color: var(--input-placeholder-color);
-@input-disabled-color: var(--disabled-color);
-
-// Avatar
-@avatar-bg: var(--avatar-bg);
-
-// Alert
-@alert-text-color: var(--alert-text-color);
-
-// Buttons
-@btn-disable-color: var(--disabled-color);
-
-// Breadcrumb
-@breadcrumb-base-color: var(--breadcrumb-color);
-@breadcrumb-link-color: var(--breadcrumb-color);
-@breadcrumb-separator-color: var(--breadcrumb-color);
-
-// Radio buttons
-@radio-disabled-button-checked-color: var(--disabled-color);
-
-// Pagination
-@pagination-item-disabled-color-active: var(--disabled-color);
-
-// Slider
-@slider-disabled-color: var(--disabled-color);
-
-// Modal
-@modal-close-color: var(--icon-color);
-
-// Progress
-@progress-remaining-color: var(--background-base-color);
-
-
-
diff --git a/src/styles/resetCss.ts b/src/styles/resetCss.ts
index 308b1458a..f2870bd47 100644
--- a/src/styles/resetCss.ts
+++ b/src/styles/resetCss.ts
@@ -10,18 +10,20 @@ export const resetCss = css`
::-webkit-scrollbar {
width: 1rem;
}
+
::-webkit-scrollbar-track {
background-color: transparent;
}
+
::-webkit-scrollbar-thumb {
- background-color: var(--scroll-color);
+ background-color: ${({ theme }) => theme.scroll};
border-radius: 1.25rem;
border: 0.375rem solid transparent;
background-clip: content-box;
}
body {
- font-weight: 500;
+ font-weight: ${({ theme }) => theme.fontWeights.medium};
}
img {
diff --git a/src/styles/themeConfig.ts b/src/styles/themeConfig.ts
new file mode 100644
index 000000000..aec608f59
--- /dev/null
+++ b/src/styles/themeConfig.ts
@@ -0,0 +1,318 @@
+import type { ThemeConfig } from 'antd';
+import type { DefaultTheme } from 'styled-components';
+import { themeObject } from './themes/themeVariables';
+
+const remToPixels = (s: `${number}rem`) => parseFloat(s) * 16;
+
+export const getThemeConfig = (theme: DefaultTheme): ThemeConfig => {
+ const fontFamily = `'${theme.fontFamilies.main}', sans-serif`;
+ const borderRadius = parseInt(theme.borderRadius);
+
+ const colorFillAlter = `rgba(${theme.rgb.primary}, 0.05)`;
+
+ const controlOutline = `rgba(${theme.rgb.primary}, 0.2)`;
+
+ // In some properties CSS variables are not parsed properly.
+ return {
+ token: {
+ colorPrimary: theme.primary,
+ colorInfo: theme.primary,
+ colorSuccess: theme.success,
+ colorError: theme.error,
+ colorWarning: theme.warning,
+ boxShadow: theme.boxShadow,
+ colorTextHeading: theme.heading,
+ colorTextDescription: theme.subText,
+ colorBgContainer: theme.background,
+ colorText: theme.textMain,
+ controlItemBgHover: theme.itemHoverBg,
+ colorBgBase: theme.backgroundColorBase,
+ colorBorder: theme.borderBase,
+ colorBgContainerDisabled: theme.disabledBg,
+ colorTextDisabled: theme.disabled,
+ colorBgElevated: theme.background,
+ colorFillAlter,
+ colorTextPlaceholder: theme.inputPlaceholder,
+ colorPrimaryHover: theme.primary5,
+ colorSuccessBg: theme.successBg,
+ colorSuccessBorder: theme.successBorder,
+ fontFamily,
+ fontFamilyCode: fontFamily,
+ fontSize: remToPixels(theme.fontSizes.md),
+ fontSizeSM: remToPixels(theme.fontSizes.xs),
+ controlHeightSM: remToPixels(theme.heights.xs),
+ controlHeight: remToPixels(theme.heights.md),
+ controlHeightLG: remToPixels(theme.heights.lg),
+ borderRadiusXS: borderRadius,
+ borderRadiusSM: borderRadius,
+ borderRadius,
+ borderRadiusLG: borderRadius,
+ borderRadiusOuter: borderRadius,
+ colorSplit: theme.split,
+ wireframe: true,
+ controlOutline,
+ controlTmpOutline: controlOutline,
+ controlOutlineWidth: 2,
+ lineWidthFocus: 0,
+ controlInteractiveSize: 16,
+ screenXSMin: 0,
+ screenXS: theme.breakpoints.xs,
+ screenXSMax: theme.breakpoints.sm - 1,
+ screenSMMin: theme.breakpoints.sm,
+ screenSM: theme.breakpoints.sm,
+ screenSMMax: theme.breakpoints.md - 1,
+ screenMDMin: theme.breakpoints.md,
+ screenMD: theme.breakpoints.md,
+ screenMDMax: theme.breakpoints.lg - 1,
+ screenLGMin: theme.breakpoints.lg,
+ screenLG: theme.breakpoints.lg,
+ screenLGMax: theme.breakpoints.xl - 1,
+ screenXLMin: theme.breakpoints.xl,
+ screenXL: theme.breakpoints.xl,
+ screenXLMax: theme.breakpoints.xxl - 1,
+ screenXXLMin: theme.breakpoints.xxl,
+ screenXXL: theme.breakpoints.xxl,
+ },
+ components: {
+ Alert: {
+ colorInfoBg: '#dfefff',
+ colorText: theme.black,
+ colorTextHeading: theme.black,
+ marginSM: 15,
+ paddingContentVerticalSM: 8,
+ paddingMD: 15,
+ paddingContentHorizontalLG: 15,
+ },
+ Badge: {
+ colorPrimary: theme.primary,
+ colorTextPlaceholder: '#d9d9d9',
+ fontSizeSM: remToPixels(theme.fontSizes.xxs),
+ },
+ Breadcrumb: {
+ fontSizeIcon: 10,
+ colorTextDescription: theme.breadcrumb,
+ },
+ Calendar: {
+ controlHeightSM: remToPixels(theme.heights.xs) / 1.5,
+ },
+ Card: {
+ colorTextHeading: theme.textMain,
+ padding: 20,
+ paddingLG: 20,
+ boxShadowTertiary: theme.boxShadow,
+ },
+ Divider: {
+ colorSplit: 'rgba(0, 0, 0, 0.06)',
+ },
+ Empty: {
+ controlHeightLG: remToPixels(theme.heights.sm),
+ },
+ Menu: {
+ controlHeightLG: remToPixels(theme.heights.md),
+ fontSize: remToPixels(theme.fontSizes.xs),
+ colorFillAlter: `rgba(${themeObject['light'].rgb.primary6}, 0.05)`,
+ colorBgContainer: 'unset',
+ controlItemBgActive: 'unset',
+ colorBgTextHover: 'transparent',
+ itemSelectedColor: theme.textSiderPrimary,
+ colorText: theme.textSiderSecondary,
+ colorSplit: 'transparent',
+ activeBarWidth: 2,
+ marginXXS: 4,
+ controlHeightSM: 30,
+ itemMarginInline: 0,
+ },
+ Pagination: {
+ colorPrimary: theme.primary,
+ controlItemBgActiveDisabled: '#e6e6e6',
+ itemSizeSM: 24,
+ controlHeightLG: remToPixels(theme.heights.sm),
+ },
+ Popconfirm: {
+ fontWeightStrong: theme.fontWeights.semibold,
+ colorPrimary: theme.primary,
+ },
+ Popover: {
+ zIndexPopup: 2000,
+ controlHeight: 34,
+ sizePopupArrow: 20,
+ },
+ Progress: {
+ marginXS: 0,
+ colorFillSecondary: theme.backgroundColorBase,
+ },
+ Rate: {
+ starColor: '#ffc24b',
+ colorFillContent: theme.split,
+ },
+ Result: {
+ fontSizeHeading3: remToPixels(theme.fontSizes.xxl),
+ lineHeightHeading3: 1.8,
+ },
+ Slider: {
+ colorPrimaryBorder: theme.primary3,
+ colorPrimary: theme.primary4,
+ colorPrimaryBorderHover: theme.primary4,
+ colorFillSecondary: theme.sliderFillColor,
+ colorBorderSecondary: theme.sliderFillColor,
+ colorFillContentHover: theme.sliderFillColor,
+ colorFillTertiary: theme.backgroundColorBase,
+ handleSize: 11,
+ handleSizeHover: 11,
+ handleLineWidth: 2,
+ handleLineWidthHover: 2,
+ colorTextDisabled: theme.disabled,
+ },
+ Spin: {
+ controlHeight: remToPixels(theme.heights.xs),
+ controlHeightLG: remToPixels(theme.heights.sm),
+ colorPrimary: theme.primary,
+ },
+ Steps: {
+ iconSize: remToPixels(theme.heights.xs),
+ iconFontSize: remToPixels(theme.fontSizes.lg),
+ controlHeight: remToPixels(theme.heights.md),
+ controlHeightSM: remToPixels(theme.heights.xxs),
+ fontSizeHeading3: remToPixels(theme.fontSizes.xxl),
+ colorPrimary: theme.primary,
+ },
+ Switch: {
+ controlHeight: remToPixels(theme.heights.xs),
+ colorPrimary: theme.primary,
+ colorWhite: theme.background,
+ lineHeight: 1.375,
+ colorPrimaryBorder: theme.primary1,
+ opacityLoading: 0.4,
+ },
+ Table: {
+ borderRadiusLG: 0,
+ colorBorderSecondary: '#b3cbe1',
+ colorTextHeading: theme.primary,
+ colorFillAlter: `rgba(${theme.rgb.primary}, 0.05)`,
+ controlItemBgActive: theme.primary1,
+ colorSplit: 'rgba(0, 0, 0, 0.15)',
+ controlItemBgActiveHover: `rgba(${theme.rgb.primary}, 0.12)`,
+ },
+ Tabs: {
+ colorPrimaryHover: theme.primary5,
+ colorPrimary: theme.primary,
+ colorPrimaryActive: theme.primary7,
+ colorTextDisabled: theme.disabled,
+ colorBorderSecondary: theme.split,
+ },
+ InputNumber: {
+ colorPrimary: theme.primary5,
+ },
+ Layout: {
+ controlHeight: 34,
+ controlHeightLG: 12.8,
+ bodyBg: theme.layoutBodyBg,
+ headerBg: theme.layoutSiderBg,
+ },
+ Tree: {
+ controlHeightSM: remToPixels(theme.heights.xxs),
+ },
+ Checkbox: {
+ colorBgContainer: 'transparent',
+ colorPrimary: theme.primary,
+ colorTextDisabled: theme.disabled,
+ marginXS: 8,
+ },
+ Tag: {
+ fontSize: remToPixels(theme.fontSizes.xs),
+ },
+ Select: {
+ fontSizeSM: remToPixels(theme.fontSizes.xs),
+ colorTextPlaceholder: theme.textMain,
+ colorTextTertiary: theme.icon,
+ colorTextQuaternary: theme.textMain, // arrow color
+ colorFillSecondary: theme.backgroundColorBase,
+ colorIcon: theme.icon,
+ colorIconHover: theme.iconHover,
+ colorPrimary: theme.primary,
+ colorPrimaryHover: theme.primary5,
+ controlItemBgActive: theme.primary1,
+ controlItemBgHover: theme.itemHoverBg,
+ },
+ Skeleton: {
+ controlHeightXS: 16,
+ controlHeightSM: remToPixels(theme.heights.xs),
+ controlHeight: remToPixels(theme.heights.md),
+ controlHeightLG: remToPixels(theme.heights.lg),
+ gradientFromColor: 'rgba(190, 190, 190, 0.2)',
+ },
+ Notification: {
+ zIndexPopup: 9999,
+ width: 36 * 16,
+ paddingMD: 20,
+ paddingLG: 20,
+ paddingContentHorizontalLG: 2 * 16,
+ lineHeightLG: 2,
+ colorSuccess: theme.success,
+ colorInfo: theme.primary,
+ colorWarning: theme.warning,
+ colorError: theme.error,
+ colorIconHover: 'rgba(0, 0, 0, 0.67)',
+ fontSizeLG: remToPixels(theme.fontSizes.xxl),
+ marginSM: 0,
+ boxShadow: theme.modalBoxShadow,
+ controlHeightLG: 15 / 0.55,
+ },
+ Input: {
+ colorTextPlaceholder: theme.inputPlaceholder,
+ colorTextDisabled: theme.disabled,
+ colorPrimaryHover: theme.primary5,
+ fontWeightStrong: theme.fontWeights.semibold,
+ colorFillAlter,
+ controlOutlineWidth: 0,
+ },
+ Form: {
+ marginLG: 16,
+ colorInfoBorderHover: theme.primary5,
+ },
+ Avatar: {
+ colorTextPlaceholder: theme.avatarBg,
+ colorBorderBg: theme.white,
+ controlHeightSM: remToPixels(theme.heights.xxs),
+ controlHeight: remToPixels(theme.heights.xs),
+ controlHeightLG: remToPixels(theme.heights.sm),
+ },
+ Button: {
+ colorPrimary: theme.primary,
+ colorLinkHover: theme.primary5,
+ controlOutlineWidth: 0,
+ },
+ Radio: {
+ colorPrimary: theme.primary,
+ controlItemBgActiveDisabled: '#e6e6e6',
+ },
+ Modal: {
+ colorTextDescription: theme.icon,
+ colorIcon: theme.icon,
+ boxShadow: theme.modalBoxShadow,
+ lineHeight: 1.57,
+ },
+ DatePicker: {
+ colorIcon: theme.textLight,
+ colorTextDisabled: theme.textLight,
+ colorPrimary: '#1c68a6',
+ controlItemBgActive: theme.primary1,
+ colorTextPlaceholder: theme.inputPlaceholder,
+ fontWeightStrong: theme.fontWeights.medium,
+ controlHeightSM: remToPixels(theme.heights.xxs),
+ controlHeightLG: remToPixels(theme.heights.sm),
+ padding: 13,
+ paddingXXS: 2,
+ },
+ Dropdown: {
+ paddingXXS: 0,
+ fontSizeIcon: 10,
+ controlHeight: 34,
+ },
+ Upload: {
+ colorFillAlter: `rgba(${theme.rgb.primary}, 0.05)`,
+ colorPrimaryHover: theme.primary5,
+ },
+ },
+ };
+};
diff --git a/src/styles/themes/constants.ts b/src/styles/themes/constants.ts
index 369753191..b4f32c23e 100644
--- a/src/styles/themes/constants.ts
+++ b/src/styles/themes/constants.ts
@@ -1,3 +1,5 @@
+import type { FontWeights, NamedColors, NamedIndexes, RelativeSizes } from './types';
+
export const BORDER_RADIUS = '7px';
export const BASE_COLORS = {
@@ -6,25 +8,20 @@ export const BASE_COLORS = {
green: '#008000',
orange: '#ffb155',
gray: '#808080',
- lightgrey: '#c5d3e0',
+ lightgray: '#c5d3e0',
violet: '#ee82ee',
lightgreen: '#89dca0',
pink: '#ffc0cb',
blue: '#0000ff',
skyblue: '#35a0dc',
red: '#ff5252',
-} as const;
+} as const satisfies Partial;
export const LAYOUT = {
mobile: {
- paddingVertical: '0.75rem',
- paddingHorizontal: '1rem',
headerHeight: '4.25rem',
- headerPadding: '1rem',
},
desktop: {
- paddingVertical: '1.25rem',
- paddingHorizontal: '2.25rem',
headerHeight: '5.625rem',
},
} as const;
@@ -32,7 +29,7 @@ export const LAYOUT = {
export const FONT_FAMILY = {
main: 'Montserrat',
secondary: 'Lato',
-} as const;
+} as const satisfies Partial;
export const FONT_SIZE = {
xxs: '0.75rem',
@@ -43,19 +40,27 @@ export const FONT_SIZE = {
xxl: '1.5rem',
xxxl: '1.625rem',
xxxxl: '2rem',
-} as const;
+} as const satisfies Partial;
export const FONT_WEIGHT = {
- thin: '100',
- extraLight: '200',
- light: '300',
- regular: '400',
- medium: '500',
- semibold: '600',
- bold: '700',
- extraBold: '800',
- black: '900',
-} as const;
+ thin: 100,
+ extraLight: 200,
+ light: 300,
+ regular: 400,
+ medium: 500,
+ semibold: 600,
+ bold: 700,
+ extraBold: 800,
+ black: 900,
+} as const satisfies FontWeights;
+
+export const HEIGHTS = {
+ xxs: '1.5rem',
+ xs: '2rem',
+ sm: '2.5rem',
+ md: '3.125rem',
+ lg: '4rem',
+} as const satisfies Partial;
export const BREAKPOINTS = {
xs: 360,
@@ -64,15 +69,24 @@ export const BREAKPOINTS = {
lg: 992,
xl: 1280,
xxl: 1920,
-} as const;
+} as const satisfies Partial;
-const getMedia = (breakpoint: T): `(min-width: ${T}px)` => `(min-width: ${breakpoint}px)`;
+export const MARGINS = {
+ xs: '0.5rem',
+ sm: '0.625rem',
+ md: '1rem',
+ lg: '1.25rem',
+ xl: '1.875rem',
+ xxl: '2rem',
+ xxxl: '2.5rem',
+} as const satisfies Partial;
-export const media = {
- xs: getMedia(BREAKPOINTS.xs),
- sm: getMedia(BREAKPOINTS.sm),
- md: getMedia(BREAKPOINTS.md),
- lg: getMedia(BREAKPOINTS.lg),
- xl: getMedia(BREAKPOINTS.xl),
- xxl: getMedia(BREAKPOINTS.xxl),
-};
+export const PADDINGS = {
+ xxs: '0.75rem',
+ xs: '0.9375rem',
+ sm: '1rem',
+ md: '1.25rem',
+ lg: '1.5rem',
+ xl: '2.25rem',
+ xxl: '2.5rem',
+} as const satisfies Partial;
diff --git a/src/styles/themes/dark/darkTheme.ts b/src/styles/themes/dark/darkTheme.ts
index 9e5ff1d81..a55b8390e 100644
--- a/src/styles/themes/dark/darkTheme.ts
+++ b/src/styles/themes/dark/darkTheme.ts
@@ -1,62 +1,67 @@
-import { shadeColor } from '@app/utils/utils';
+import { hexToRGB, shadeColor } from '@app/utils/utils';
import { graphic } from 'echarts';
-import { BASE_COLORS } from '../constants';
-import { ITheme } from '../types';
+import {
+ BASE_COLORS,
+ BORDER_RADIUS,
+ BREAKPOINTS,
+ FONT_FAMILY,
+ FONT_SIZE,
+ FONT_WEIGHT,
+ HEIGHTS,
+ MARGINS,
+ PADDINGS,
+} from '../constants';
+import type { ChartColors, ColorType, ITheme, IndexedPrimaries } from '../types';
+
+const colorTypes = {
+ primary: '#339CFD',
+ success: '#57D682',
+ warning: '#FFB765',
+ error: '#FF5252',
+} as const satisfies Record;
+
+const indexedPrimaries = {
+ primary1: '#7568f6',
+ primary2: '#d6f1ff',
+ primary3: '#ade0ff',
+ primary4: '#85ccff',
+ primary5: '#5cb6ff',
+ primary6: '#339cfd',
+ primary7: '#2078d6',
+ primary8: '#1259b0',
+ primary9: '#073d8a',
+ primary10: '#042963',
+} as const satisfies IndexedPrimaries;
const chartColors = {
- chartTooltipLabel: '#6a7985',
chartColor1: '#339CFD',
- chartColor1Tint: '#339CFD', // update
+ chartColor1Tint: '#339CFD',
chartColor2: '#dc88f5',
- chartColor2Tint: '#dc88f5', // update
+ chartColor2Tint: '#dc88f5',
chartColor3: '#FFB765',
- chartColor3Tint: '#FFB765', // update
+ chartColor3Tint: '#FFB765',
chartColor4: '#306955',
- chartColor4Tint: '#306955', // update
+ chartColor4Tint: '#306955',
chartColor5: '#ff3d71',
- chartColor5Tint: '#ff3d71', // update
- chartPrimaryGradient: new graphic.LinearGradient(0, 0, 0, 1, [
- {
- offset: 0,
- color: 'rgba(51, 156, 253, 0.35)',
- },
- {
- offset: 1,
- color: 'rgba(51, 156, 253, 0)',
- },
- ]),
- chartSecondaryGradient: new graphic.LinearGradient(0, 0, 0, 1, [
- {
- offset: 0,
- color: 'rgba(255, 82, 82, 0.35)',
- },
- {
- offset: 1,
- color: 'rgba(255, 82, 82, 0)',
- },
- ]),
- chartSecondaryGradientSpecular: new graphic.LinearGradient(0, 0, 0, 1, [
- {
- offset: 0,
- color: 'rgba(255, 255, 255, 0)',
- },
- {
- offset: 1,
- color: 'rgba(255, 82, 82, 0.5)',
- },
- ]),
-};
+ chartColor5Tint: '#ff3d71',
+} as const satisfies ChartColors;
-export const darkColorsTheme: ITheme = {
- primary: '#339CFD',
- primary1: '#7568f6',
+const background = '#25284B';
+
+const rgb = Object.fromEntries(
+ Object.entries({ ...colorTypes, ...indexedPrimaries, ...chartColors, background } satisfies ITheme['rgb']).map(
+ ([key, hexColor]) => [key, hexToRGB(hexColor)],
+ ),
+) as ITheme['rgb'];
+
+export const darkColorsTheme = {
+ ...indexedPrimaries,
+ successBg: '#e6fff2',
+ successBorder: '#79fcc4',
primaryGradient: 'linear-gradient(211.49deg, #dc88f5 15.89%, #339CFD 48.97%)',
light: '#696969',
secondary: '#0072DD',
- error: '#FF5252',
- warning: '#FFB765',
- success: '#57D682',
- background: '#25284B',
+ background,
secondaryBackground: '#1c2137',
secondaryBackgroundSelected: shadeColor('#1c2137', -5),
additionalBackground: '#1D203E',
@@ -66,32 +71,38 @@ export const darkColorsTheme: ITheme = {
spinnerBase: '#339CFD',
scroll: '#797C9A',
border: '#ffffff',
- borderNft: '#797C9A',
textMain: '#ffffff',
textLight: '#9A9B9F',
textSuperLight: '#444',
textSecondary: '#ffffff',
textDark: '#404040',
- textNftLight: '#797C9A',
textSiderPrimary: '#339CFD',
textSiderSecondary: '#797C9A',
subText: '#a9a9a9',
shadow: 'rgba(0, 0, 0, 0.07)',
boxShadow: 'none',
boxShadowHover: 'none',
- boxShadowNft: '0px 16px 24px rgba(0, 0, 0, 0.06), 0px 2px 6px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04)',
- boxShadowNftSecondary:
- '0px 10px 20px rgba(0, 0, 0, 0.04), 0px 2px 6px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04)',
+ ...colorTypes,
+ rgb,
+ nft: {
+ border: '#797c9a',
+ textLight: '#797C9A',
+ boxShadow: '0px 16px 24px rgba(0, 0, 0, 0.06), 0px 2px 6px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04)',
+ boxShadowSecondary:
+ '0px 10px 20px rgba(0, 0, 0, 0.04), 0px 2px 6px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04)',
+ },
dashboardMapBackground: '#25284b',
dashboardMapCircleColor: '#ACAEC1',
dashboardMapControlDisabledBackground: '#7e7e7e',
- notificationSuccess: '#EFFFF4',
- notificationPrimary: '#D7EBFF',
- notificationWarning: '#FFF4E7',
- notificationError: '#FFE2E2',
+ notification: {
+ primary: '#D7EBFF',
+ success: '#EFFFF4',
+ warning: '#FFF4E7',
+ error: '#FFE2E2',
+ },
heading: BASE_COLORS.white,
borderBase: '#a9a9a9',
- disable: '#7e7e7e',
+ disabled: '#7e7e7e',
disabledBg: '#1c2137',
layoutBodyBg: '#1e2142',
layoutHeaderBg: '#1e2142',
@@ -104,10 +115,53 @@ export const darkColorsTheme: ITheme = {
breadcrumb: '#a9a9a9',
icon: '#a9a9a9',
iconHover: '#ffffff',
+ chartTooltipLabel: '#6a7985',
...chartColors,
-};
-
-export const antDarkColorsTheme = {
- successBg: '#e6fff2',
- successBorder: '#79fcc4',
-};
+ chartPrimaryGradient: new graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 0,
+ color: 'rgba(51, 156, 253, 0.35)',
+ },
+ {
+ offset: 1,
+ color: 'rgba(51, 156, 253, 0)',
+ },
+ ]),
+ chartSecondaryGradient: new graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 0,
+ color: 'rgba(255, 82, 82, 0.35)',
+ },
+ {
+ offset: 1,
+ color: 'rgba(255, 82, 82, 0)',
+ },
+ ]),
+ chartSecondaryGradientSpecular: new graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 0,
+ color: 'rgba(255, 255, 255, 0)',
+ },
+ {
+ offset: 1,
+ color: 'rgba(255, 82, 82, 0.5)',
+ },
+ ]),
+ ...BASE_COLORS,
+ fontSizes: FONT_SIZE,
+ heights: HEIGHTS,
+ borderRadius: BORDER_RADIUS,
+ 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(${rgb.primary}, 0.12)`,
+ treatmentCalendarEventBoxShadow: '0 5px 15px rgba(0, 89, 171, 0.3)',
+ modalBoxShadow:
+ '0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05)',
+ margins: MARGINS,
+ paddings: PADDINGS,
+} as const satisfies ITheme;
diff --git a/src/styles/themes/light/lightTheme.ts b/src/styles/themes/light/lightTheme.ts
index 29fde5844..4fb66dfd7 100644
--- a/src/styles/themes/light/lightTheme.ts
+++ b/src/styles/themes/light/lightTheme.ts
@@ -1,10 +1,39 @@
-import { shadeColor } from '@app/utils/utils';
+import { hexToRGB, shadeColor } from '@app/utils/utils';
import { graphic } from 'echarts';
-import { BASE_COLORS } from '../constants';
-import { ITheme } from '../types';
+import {
+ BASE_COLORS,
+ BORDER_RADIUS,
+ BREAKPOINTS,
+ FONT_FAMILY,
+ FONT_SIZE,
+ FONT_WEIGHT,
+ HEIGHTS,
+ MARGINS,
+ PADDINGS,
+} from '../constants';
+import type { ChartColors, ColorType, ITheme, IndexedPrimaries } from '../types';
+
+const colorTypes = {
+ primary: '#01509A',
+ success: '#30AF5B',
+ warning: '#FFB155',
+ error: '#FF5252',
+} as const satisfies Record;
+
+const indexedPrimaries = {
+ primary1: '#f5f5f5',
+ primary2: '#85b3cc',
+ primary3: '#5e9abf',
+ primary4: '#3b81b3',
+ primary5: '#1c68a6',
+ primary6: '#01509a',
+ primary7: '#003773',
+ primary8: '#00224d',
+ primary9: '#001026',
+ primary10: '#000000',
+} as const satisfies IndexedPrimaries;
const chartColors = {
- chartTooltipLabel: '#6A7985',
chartColor1: '#01509A',
chartColor1Tint: '#2983D8',
chartColor2: '#35A0DC',
@@ -15,48 +44,24 @@ const chartColors = {
chartColor4Tint: '#89DCA0',
chartColor5: '#FF5252',
chartColor5Tint: '#FFC1C1',
- chartPrimaryGradient: new graphic.LinearGradient(0, 0, 0, 1, [
- {
- offset: 0,
- color: 'rgba(0, 110, 211, 0.5)',
- },
- {
- offset: 1,
- color: 'rgba(255, 225, 255, 0)',
- },
- ]),
- chartSecondaryGradient: new graphic.LinearGradient(0, 0, 0, 1, [
- {
- offset: 0,
- color: 'rgba(255, 82, 82, 0.5)',
- },
- {
- offset: 1,
- color: 'rgba(255, 255, 255, 0)',
- },
- ]),
- chartSecondaryGradientSpecular: new graphic.LinearGradient(0, 0, 0, 1, [
- {
- offset: 0,
- color: 'rgba(255, 255, 255, 0)',
- },
- {
- offset: 1,
- color: 'rgba(255, 82, 82, 0.5)',
- },
- ]),
-};
+} as const satisfies ChartColors;
-export const lightColorsTheme: ITheme = {
- primary: '#01509A',
- primary1: '#f5f5f5',
+const background = BASE_COLORS.white;
+
+const rgb = Object.fromEntries(
+ Object.entries({ ...colorTypes, ...indexedPrimaries, ...chartColors, background } satisfies ITheme['rgb']).map(
+ ([key, hexColor]) => [key, hexToRGB(hexColor)],
+ ),
+) as ITheme['rgb'];
+
+export const lightColorsTheme = {
+ ...indexedPrimaries,
+ successBg: '#e1f0e4',
+ successBorder: '#a1d6ad',
primaryGradient: 'linear-gradient(211.49deg, #006CCF 15.89%, #00509A 48.97%)',
light: '#C5D3E0',
secondary: '#0085FF',
- error: '#FF5252',
- warning: '#FFB155',
- success: '#30AF5B',
- background: BASE_COLORS.white,
+ background,
secondaryBackground: '#F8FBFF',
secondaryBackgroundSelected: shadeColor('#F8FBFF', -5),
additionalBackground: '#ffffff',
@@ -66,32 +71,38 @@ export const lightColorsTheme: ITheme = {
spinnerBase: '#f42f25',
scroll: '#c5d3e0',
border: '#cce1f4',
- borderNft: '#79819A',
textMain: '#404040',
textLight: '#9A9B9F',
textSuperLight: '#BEC0C6',
textSecondary: BASE_COLORS.white,
textDark: '#404040',
- textNftLight: '#79819A',
textSiderPrimary: '#FFB765',
textSiderSecondary: '#ffffff',
subText: 'rgba(0, 0, 0, 0.45)',
shadow: 'rgba(0, 0, 0, 0.07)',
boxShadow: '0 2px 8px 0 rgba(0, 0, 0, 0.07)',
boxShadowHover: '0 4px 16px 0 rgba(0, 0, 0, 0.2)',
- boxShadowNft: '0px 16px 24px rgba(0, 0, 0, 0.06), 0px 2px 6px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04)',
- boxShadowNftSecondary:
- '0px 10px 20px rgba(0, 0, 0, 0.04), 0px 2px 6px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04)',
+ ...colorTypes,
+ rgb,
+ nft: {
+ border: '#79819A',
+ textLight: '#79819A',
+ boxShadow: '0px 16px 24px rgba(0, 0, 0, 0.06), 0px 2px 6px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04)',
+ boxShadowSecondary:
+ '0px 10px 20px rgba(0, 0, 0, 0.04), 0px 2px 6px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04)',
+ },
dashboardMapBackground: '#EAF5FF',
dashboardMapCircleColor: '#9BC2E7',
dashboardMapControlDisabledBackground: '#c5d3e0',
- notificationSuccess: '#EFFFF4',
- notificationPrimary: '#D7EBFF',
- notificationWarning: '#FFF4E7',
- notificationError: '#FFE2E2',
+ notification: {
+ primary: '#D7EBFF',
+ success: '#EFFFF4',
+ warning: '#FFF4E7',
+ error: '#FFE2E2',
+ },
heading: '#13264d',
borderBase: '#bec0c6',
- disable: 'rgba(0, 0, 0, 0.25)',
+ disabled: 'rgba(0, 0, 0, 0.25)',
disabledBg: '#c5d3e0',
layoutBodyBg: '#f8fbff',
layoutHeaderBg: 'transparent',
@@ -104,5 +115,53 @@ export const lightColorsTheme: ITheme = {
breadcrumb: 'rgba(0, 0, 0, 0.45)',
icon: '#a9a9a9',
iconHover: 'rgba(0, 0, 0, 0.75)',
+ chartTooltipLabel: '#6A7985',
...chartColors,
-};
+ chartPrimaryGradient: new graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 0,
+ color: 'rgba(0, 110, 211, 0.5)',
+ },
+ {
+ offset: 1,
+ color: 'rgba(255, 225, 255, 0)',
+ },
+ ]),
+ chartSecondaryGradient: new graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 0,
+ color: 'rgba(255, 82, 82, 0.5)',
+ },
+ {
+ offset: 1,
+ color: 'rgba(255, 255, 255, 0)',
+ },
+ ]),
+ chartSecondaryGradientSpecular: new graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 0,
+ color: 'rgba(255, 255, 255, 0)',
+ },
+ {
+ offset: 1,
+ color: 'rgba(255, 82, 82, 0.5)',
+ },
+ ]),
+ ...BASE_COLORS,
+ fontSizes: FONT_SIZE,
+ heights: HEIGHTS,
+ borderRadius: BORDER_RADIUS,
+ 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(${rgb.primary}, 0.12)`,
+ treatmentCalendarEventBoxShadow: '0 5px 15px rgba(0, 89, 171, 0.3)',
+ modalBoxShadow:
+ '0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05)',
+ margins: MARGINS,
+ paddings: PADDINGS,
+} as const satisfies ITheme;
diff --git a/src/styles/themes/main.less b/src/styles/themes/main.less
deleted file mode 100644
index 512f13e44..000000000
--- a/src/styles/themes/main.less
+++ /dev/null
@@ -1,7 +0,0 @@
-// default antd styles
-// @import 'node_modules/antd/lib/style/themes/default.less';
-@import 'node_modules/antd/dist/antd.variable.less';
-
-// common variables
-@import '../_override_variables.less';
-
diff --git a/src/styles/themes/themeVariables.ts b/src/styles/themes/themeVariables.ts
index 483d133c8..903ad9f84 100644
--- a/src/styles/themes/themeVariables.ts
+++ b/src/styles/themes/themeVariables.ts
@@ -1,132 +1,15 @@
-import { ThemeType } from '@app/interfaces/interfaces';
-import { hexToRGB } from '@app/utils/utils';
-import { css } from 'styled-components';
-import { BASE_COLORS } from './constants';
-import { darkColorsTheme, antDarkColorsTheme } from './dark/darkTheme';
+import 'styled-components';
+import { darkColorsTheme } from './dark/darkTheme';
import { lightColorsTheme } from './light/lightTheme';
export const themeObject = {
light: lightColorsTheme,
dark: darkColorsTheme,
-};
+} as const;
-export const antThemeObject = {
- light: {},
- dark: antDarkColorsTheme,
-};
+type Merge = { [K in keyof (A | B)]: A[K] | B[K] };
-const getThemeVariables = (theme: ThemeType) => css`
- color-scheme: ${theme};
- --primary-color: ${themeObject[theme].primary};
- --primary1-color: ${themeObject[theme].primary1};
- --primary-gradient-color: ${themeObject[theme].primaryGradient};
- --info-color: var(--primary-color);
- --secondary-color: ${themeObject[theme].secondary};
- --error-color: ${themeObject[theme].error};
- --warning-color: ${themeObject[theme].warning};
- --success-color: ${themeObject[theme].success};
- --background-color: ${themeObject[theme].background};
- --secondary-background-color: ${themeObject[theme].secondaryBackground};
- --secondary-background-selected-color: ${themeObject[theme].secondaryBackgroundSelected};
- --additional-background-color: ${themeObject[theme].additionalBackground};
- --collapse-background-color: ${themeObject[theme].collapseBackground};
- --timeline-background-color: ${themeObject[theme].timelineBackground};
- --spinner-base-color: ${themeObject[theme].spinnerBase};
- --sider-background-color: ${themeObject[theme].siderBackground};
- --shadow-color: ${themeObject[theme].shadow};
- --border-color: ${themeObject[theme].border};
- --border-nft-color: ${themeObject[theme].borderNft};
- --scroll-color: ${themeObject[theme].scroll};
-
- --primary-rgb-color: ${hexToRGB(themeObject[theme].primary)};
- --info-rgb-color: ${hexToRGB(themeObject[theme].primary)};
- --secondary-rgb-color: ${hexToRGB(themeObject[theme].secondary)};
- --error-rgb-color: ${hexToRGB(themeObject[theme].error)};
- --warning-rgb-color: ${hexToRGB(themeObject[theme].warning)};
- --success-rgb-color: ${hexToRGB(themeObject[theme].success)};
- --background-rgb-color: ${hexToRGB(themeObject[theme].background)};
-
- --text-main-color: ${themeObject[theme].textMain};
- --text-light-color: ${themeObject[theme].textLight};
- --text-superLight-color: ${themeObject[theme].textSuperLight};
- --text-secondary-color: ${themeObject[theme].textSecondary};
- --text-dark-color: ${themeObject[theme].textDark};
- --text-nft-light-color: ${themeObject[theme].textNftLight};
- --text-sider-primary-color: ${themeObject[theme].textSiderPrimary};
- --text-sider-secondary-color: ${themeObject[theme].textSiderSecondary};
- --subtext-color: ${themeObject[theme].subText};
-
- --dashboard-map-background-color: ${themeObject[theme].dashboardMapBackground};
- --dashboard-map-circle-color: ${themeObject[theme].dashboardMapCircleColor};
- --dashboard-map-control-disabled-background-color: ${themeObject[theme].dashboardMapControlDisabledBackground};
-
- --chart-tooltip-label-color: ${themeObject[theme].chartTooltipLabel};
- --chart-color1: ${themeObject[theme].chartColor1};
- --chart-rgb-color1: ${hexToRGB(themeObject[theme].chartColor1)};
- --chart-color1-tint: ${themeObject[theme].chartColor1Tint};
- --chart-color2: ${themeObject[theme].chartColor2};
- --chart-color2-tint: ${themeObject[theme].chartColor2Tint};
- --chart-color3: ${themeObject[theme].chartColor3};
- --chart-color3-tint: ${themeObject[theme].chartColor3Tint};
- --chart-color4: ${themeObject[theme].chartColor4};
- --chart-color4-tint: ${themeObject[theme].chartColor4Tint};
- --chart-color5: ${themeObject[theme].chartColor5};
- --chart-rgb-color5: ${hexToRGB(themeObject[theme].chartColor5)};
- --chart-color5-tint: ${themeObject[theme].chartColor5Tint};
-
- --notification-success-color: ${themeObject[theme].notificationSuccess};
- --notification-primary-color: ${themeObject[theme].notificationPrimary};
- --notification-warning-color: ${themeObject[theme].notificationWarning};
- --notification-error-color: ${themeObject[theme].notificationError};
-
- --icon-color: ${themeObject[theme].icon};
- --icon-hover-color: ${themeObject[theme].iconHover};
- --box-shadow: ${themeObject[theme].boxShadow};
- --box-shadow-hover: ${themeObject[theme].boxShadowHover};
- --box-shadow-nft-color: ${themeObject[theme].boxShadowNft};
- --box-shadow-nft-secondary-color: ${themeObject[theme].boxShadowNftSecondary};
-
- --heading-color: ${themeObject[theme].heading};
- --item-hover-bg: ${themeObject[theme].itemHoverBg};
- --background-base-color: ${themeObject[theme].backgroundColorBase};
- --border-base-color: ${themeObject[theme].borderBase};
- --disabled-color: ${themeObject[theme].disable};
- --disabled-bg-color: ${themeObject[theme].disabledBg};
- --layout-body-bg-color: ${themeObject[theme].layoutBodyBg};
- --layout-header-bg-color: ${themeObject[theme].layoutHeaderBg};
- --layout-sider-bg-color: ${themeObject[theme].layoutSiderBg};
- --input-placeholder-color: ${themeObject[theme].inputPlaceholder};
- --avatar-bg: ${themeObject[theme].avatarBg};
- --alert-text-color: ${themeObject[theme].alertTextColor};
- --breadcrumb-color: ${themeObject[theme].breadcrumb};
-`;
-
-export const lightThemeVariables = css`
- ${getThemeVariables('light')}
-`;
-
-export const darkThemeVariables = css`
- ${getThemeVariables('dark')}
- --ant-success-color-deprecated-bg: ${antThemeObject['dark'].successBg} !important;
- --ant-success-color-deprecated-border: ${antThemeObject['dark'].successBorder} !important;
-`;
-
-export const commonThemeVariables = css`
- color-scheme: light dark;
- --white: ${BASE_COLORS.white};
- --black: ${BASE_COLORS.black};
- --green: ${BASE_COLORS.green};
- --orange: ${BASE_COLORS.orange};
- --gray: ${BASE_COLORS.gray};
- --lightgrey: ${BASE_COLORS.lightgrey};
- --violet: ${BASE_COLORS.violet};
- --lightgreen: ${BASE_COLORS.lightgreen};
- --pink: ${BASE_COLORS.pink};
- --blue: ${BASE_COLORS.blue};
- --skyblue: ${BASE_COLORS.skyblue};
- --red: ${BASE_COLORS.red};
-`;
-
-export const antOverrideCssVariables = css`
- --ant-primary-1: var(--primary1-color) !important;
-`;
+declare module 'styled-components' {
+ // eslint-disable-next-line @typescript-eslint/no-empty-interface
+ export interface DefaultTheme extends Merge {}
+}
diff --git a/src/styles/themes/types.ts b/src/styles/themes/types.ts
index d57c1da34..7345021a5 100644
--- a/src/styles/themes/types.ts
+++ b/src/styles/themes/types.ts
@@ -1,14 +1,58 @@
-import { LinearGradientObject } from 'echarts';
+import type * as CSS from 'csstype';
+import type { LinearGradientObject } from 'echarts';
+import type { Breakpoint } from 'antd';
+import type { PresetColorKey } from 'antd/es/theme/interface';
-export interface ITheme {
- primary: string;
- primary1: string;
+type IndexedPrimary = `primary${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10}`;
+
+export type IndexedPrimaries = Record;
+
+type ChartColor = `chartColor${1 | 2 | 3 | 4 | 5}${'Tint' | ''}`;
+
+export type ChartColors = Record<`chartColor${1 | 2 | 3 | 4 | 5}${'Tint' | ''}`, string>;
+
+export type NamedColors = Record;
+
+export type ColorType = 'primary' | 'success' | 'warning' | 'error';
+
+type ColorTypes = Record;
+
+type RGB = Record;
+
+type NFT = Record<'border' | 'textLight' | 'boxShadow' | 'boxShadowSecondary', string>;
+
+export type FontWeights = Record<
+ 'thin' | 'extraLight' | 'light' | 'regular' | 'medium' | 'semibold' | 'bold' | 'extraBold' | 'black',
+ number
+>;
+
+export type NamedIndexes = Record<'main' | 'secondary' | 'tertiary' | 'quaternary', string>;
+
+export enum WidthCategory {
+ /** mobile */
+ small = 'xs',
+ /** tablet */
+ medium = 'md',
+ /** desktop */
+ large = 'xl',
+}
+
+export type WidthCategories =
+ | Record
+ | Record
+ | Record
+ | Record;
+
+export type RelativeSizeKey = Breakpoint | `${'xx' | 'xxx' | 'xxxx'}${'s' | 'l'}`;
+
+export type RelativeSizes = Record | Record;
+
+export interface ITheme extends ColorTypes, IndexedPrimaries, ChartColors, Partial {
primaryGradient: string;
light: string;
secondary: string;
- error: string;
- warning: string;
- success: string;
+ successBg: string;
+ successBorder: string;
background: string;
secondaryBackground: string;
secondaryBackgroundSelected: string;
@@ -17,39 +61,25 @@ export interface ITheme {
collapseBackground: string;
scroll: string;
border: string;
- borderNft: string;
textMain: string;
textLight: string;
textSuperLight: string;
textSecondary: string;
textDark: string;
- textNftLight: string;
textSiderPrimary: string;
textSiderSecondary: string;
subText: string;
shadow: string;
boxShadow: string;
boxShadowHover: string;
- boxShadowNft: string;
- boxShadowNftSecondary: string;
+ /** @summary strings in the format `'R, G, B'` */
+ rgb: RGB;
+ nft: NFT;
dashboardMapBackground: string;
dashboardMapCircleColor: string;
dashboardMapControlDisabledBackground: string;
- notificationSuccess: string;
- notificationPrimary: string;
- notificationWarning: string;
- notificationError: string;
+ notification: ColorTypes;
chartTooltipLabel: string;
- chartColor1: string;
- chartColor1Tint: string;
- chartColor2: string;
- chartColor2Tint: string;
- chartColor3: string;
- chartColor3Tint: string;
- chartColor4: string;
- chartColor4Tint: string;
- chartColor5: string;
- chartColor5Tint: string;
chartPrimaryGradient: LinearGradientObject;
chartSecondaryGradient: LinearGradientObject;
additionalBackground: string;
@@ -57,7 +87,7 @@ export interface ITheme {
chartSecondaryGradientSpecular: LinearGradientObject;
heading: string;
borderBase: string;
- disable: string;
+ disabled: string;
disabledBg: string;
layoutBodyBg: string;
layoutHeaderBg: string;
@@ -70,4 +100,19 @@ export interface ITheme {
breadcrumb: string;
icon: string;
iconHover: string;
+ borderRadius: string;
+ fontWeights: FontWeights;
+ fontFamilies: Partial;
+ fontSizes: Partial;
+ heights: Partial;
+ breakpoints: Partial;
+ selectionDisabled: string;
+ split: string;
+ sliderFillColor: string;
+ radioBoxShadow: string;
+ newsFilterBoxShadow: string;
+ treatmentCalendarEventBoxShadow: string;
+ modalBoxShadow: string;
+ margins: Partial;
+ paddings: Partial;
}
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index cc610e23d..ca0d4d413 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -1,3 +1,4 @@
+import { DefaultTheme } from 'styled-components';
import { NotificationType } from '@app/components/common/BaseNotification/BaseNotification';
import { Priority } from '@app//constants/enums/priorities';
import visa from '@app/assets/images/card-issuers/visa.png';
@@ -6,6 +7,7 @@ import maestro from '@app/assets/images/card-issuers/maestro.png';
import { CurrencyTypeEnum, Severity } from '@app/interfaces/interfaces';
import { BaseBadgeProps } from '@app/components/common/BaseBadge/BaseBadge';
import { currencies } from '@app/constants/config/currencies';
+import { ColorType } from '@app/styles/themes/types';
export const camelize = (string: string): string => {
return string
@@ -47,37 +49,56 @@ export const hexToRGB = (hex: string): string => {
export const getDifference = (value: number, prevValue: number): string | null =>
prevValue !== 0 ? `${((Math.abs(value - prevValue) / prevValue) * 100).toFixed(0)}%` : '100%';
-export const normalizeProp = (prop: string | number | [number, number]): string =>
- typeof prop === 'number' ? `${prop}px` : (Array.isArray(prop) && `${prop[0]}px ${prop[1]}px`) || prop.toString();
-
-export const defineColorByPriority = (priority: Priority): string => {
- switch (priority) {
- case Priority.INFO:
- return 'var(--primary-color)';
- case Priority.LOW:
- return 'var(--success-color)';
- case Priority.MEDIUM:
- return 'var(--warning-color)';
- case Priority.HIGH:
- return 'var(--error-color)';
- default:
- return 'var(--success-color)';
- }
-};
+const units = 'px';
+const normalize = (value: T) =>
+ typeof value === 'string' ? value : (`${value}${units}` as const);
-export const defineColorBySeverity = (severity: NotificationType | undefined, rgb = false): string => {
- const postfix = rgb ? 'rgb-color' : 'color';
- switch (severity) {
- case 'error':
- case 'warning':
- case 'success':
- return `var(--${severity}-${postfix})`;
- case 'info':
- default:
- return `var(--primary-${postfix})`;
+export const normalizeProp = (prop: string | number | readonly number[] | readonly string[]): string => {
+ if (typeof prop == 'number' || typeof prop == 'string') {
+ return normalize(prop);
}
+ return prop.map(normalize).join(' ');
};
+const colorTypeLookup = {
+ ['default']: 'primary',
+ ['info']: 'primary',
+ ['mention']: 'primary',
+ ['processing']: 'primary',
+ ['undefined']: 'primary',
+ [Priority.INFO]: 'primary',
+
+ ['success']: 'success',
+ [Priority.LOW]: 'success',
+
+ ['warning']: 'warning',
+ [Priority.MEDIUM]: 'warning',
+
+ ['error']: 'error',
+ [Priority.HIGH]: 'error',
+} as const;
+
+export const colorTypeFrom = (
+ value: Priority | Severity | NotificationType | BaseBadgeProps['status'] | undefined,
+): ColorType => colorTypeLookup[`${value}`];
+
+type Breakpoints = keyof DefaultTheme['breakpoints'];
+
+export const media =
+ (breakpoint: T) =>
+ ({ theme }: { readonly theme: DefaultTheme }) =>
+ `width >= ${normalize(theme.breakpoints[breakpoint])}` as const;
+
+export const mediaMax =
+ (breakpoint: T) =>
+ ({ theme }: { readonly theme: DefaultTheme }) =>
+ `width < ${normalize(theme.breakpoints[breakpoint])}` as const;
+
+export const mediaRange =
+ (lower: Lower, upper: Upper) =>
+ ({ theme }: { readonly theme: DefaultTheme }) =>
+ `${normalize(theme.breakpoints[lower])} <= width < ${normalize(theme.breakpoints[upper])}` as const;
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export const mergeBy = (a: any[], b: any[], key: string): any[] =>
a.filter((elem) => !b.find((subElem) => subElem[key] === elem[key])).concat(b);
@@ -155,6 +176,7 @@ export const hexToHSL = (hex: string): { h: number; s: number; l: number } => {
export const formatNumberWithCommas = (value: number): string => {
return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
};
+
export const msToH = (ms: number): number => Math.floor(ms / 3600000);
export const hToMS = (h: number): number => h * 3600000;
@@ -181,11 +203,3 @@ export const getPaymentCardTypeIcon = (type: string): string | null => {
return null;
}
};
-
-export const mapBadgeStatus = (status: BaseBadgeProps['status']): Severity => {
- if (!status || status === 'default' || status === 'processing') {
- return 'info';
- }
-
- return status;
-};
diff --git a/yarn.lock b/yarn.lock
index 3fc641d8a..de2696279 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -15,50 +15,85 @@ __metadata:
languageName: node
linkType: hard
-"@ant-design/colors@npm:^6.0.0":
- version: 6.0.0
- resolution: "@ant-design/colors@npm:6.0.0"
+"@ant-design/colors@npm:^7.0.0":
+ version: 7.0.0
+ resolution: "@ant-design/colors@npm:7.0.0"
dependencies:
"@ctrl/tinycolor": ^3.4.0
- checksum: 55110ac8a3353f3ec2d2fdee6ffb841967dd75f3783ef4e68c22731e042606bc5b3c3febb6cd20aed3f14585729ce8eddf75b531c703c06a2e95b8569861bb47
+ checksum: 419e98d9cb823ff0935024f4278f7b9c5896805dce4c93d667b5a4d76b03f5fa969b32d1998ee761113da43063e2b23a94c330ad6e865f03fbbb2579907e7fdb
languageName: node
linkType: hard
-"@ant-design/icons-svg@npm:^4.2.1":
- version: 4.2.1
- resolution: "@ant-design/icons-svg@npm:4.2.1"
- checksum: c1fa1bbeb0c58209e2c5d49ce001543823ae2d8326e1c7aafb992deac7aaa901a44f9a16151ad919d2628dbe3d783b325ed2b9440436002225801332323296d4
+"@ant-design/cssinjs@npm:^1.17.5":
+ version: 1.17.5
+ resolution: "@ant-design/cssinjs@npm:1.17.5"
+ dependencies:
+ "@babel/runtime": ^7.11.1
+ "@emotion/hash": ^0.8.0
+ "@emotion/unitless": ^0.7.5
+ classnames: ^2.3.1
+ csstype: ^3.0.10
+ rc-util: ^5.35.0
+ stylis: ^4.0.13
+ peerDependencies:
+ react: ">=16.0.0"
+ react-dom: ">=16.0.0"
+ checksum: e87063170db42d2b80737f27dcd7d56536495538b0965f8be19fd938cc93b90c35c618fe75632bc7654d4d8931ece2c201ad62eb8fc5a15597bbe996bf498652
+ languageName: node
+ linkType: hard
+
+"@ant-design/icons-svg@npm:^4.3.0":
+ version: 4.3.0
+ resolution: "@ant-design/icons-svg@npm:4.3.0"
+ checksum: 32804d9e38caa45271f0905edc26cda730bd08bdc311a1509bca386bd170accd6b141f6ebaf65d74f6726112677f871f4ef8ff1bfd13472302a43d1c965ae2e3
+ languageName: node
+ linkType: hard
+
+"@ant-design/icons@npm:^5.2.4":
+ version: 5.2.4
+ resolution: "@ant-design/icons@npm:5.2.4"
+ dependencies:
+ "@ant-design/colors": ^7.0.0
+ "@ant-design/icons-svg": ^4.3.0
+ "@babel/runtime": ^7.11.2
+ classnames: ^2.2.6
+ lodash.camelcase: ^4.3.0
+ rc-util: ^5.31.1
+ peerDependencies:
+ react: ">=16.0.0"
+ react-dom: ">=16.0.0"
+ checksum: 6f2f2fa01ffcb4048b923d591f2136c753eabaa6b99fcbd28dc04a4cb9ef0759e7805a725907a15440aab6f965b2ea9f9970b48a986dc5b80c31d78587eeb66c
languageName: node
linkType: hard
-"@ant-design/icons@npm:^4.6.2, @ant-design/icons@npm:^4.7.0":
- version: 4.8.0
- resolution: "@ant-design/icons@npm:4.8.0"
+"@ant-design/icons@npm:^5.2.6":
+ version: 5.2.6
+ resolution: "@ant-design/icons@npm:5.2.6"
dependencies:
- "@ant-design/colors": ^6.0.0
- "@ant-design/icons-svg": ^4.2.1
+ "@ant-design/colors": ^7.0.0
+ "@ant-design/icons-svg": ^4.3.0
"@babel/runtime": ^7.11.2
classnames: ^2.2.6
- rc-util: ^5.9.4
+ rc-util: ^5.31.1
peerDependencies:
react: ">=16.0.0"
react-dom: ">=16.0.0"
- checksum: d569dae9f84245a90fb5152af4c4e6e9f1bce9d638b5831f3e9d126ff654c9477e3c9d9192c6b3f349ade39c9e0bc85605cad5d8c2e401e632dbd6190b638ad3
+ checksum: 2f571699b1903383cd09faa78e4cce34973debb0e7ec6223b9d9a0a6ab2b2f0c876072db62bbd4e6a45e864df5447343315e066abeffaf58aa5b97df3acc89f1
languageName: node
linkType: hard
-"@ant-design/react-slick@npm:~0.29.1":
- version: 0.29.2
- resolution: "@ant-design/react-slick@npm:0.29.2"
+"@ant-design/react-slick@npm:~1.0.2":
+ version: 1.0.2
+ resolution: "@ant-design/react-slick@npm:1.0.2"
dependencies:
"@babel/runtime": ^7.10.4
classnames: ^2.2.5
json2mq: ^0.2.0
- lodash: ^4.17.21
resize-observer-polyfill: ^1.5.1
+ throttle-debounce: ^5.0.0
peerDependencies:
react: ">=16.9.0"
- checksum: a7031466714303d123321cac56fb7fc00ba7702bedbfdac1c7f9dda177dd8a4c34757c4e2d5a9dc7dd118e362e9b8b6f5b6c33557bc1234215336d5eb69081c0
+ checksum: c2a2d14270b3551c1af16c4cc8c63e29ee7f08e4203191d834df61211235102fd5d8e4325adfa41ada1c5212e4388849ec0d23fcb980bf69790b565f363e2d1f
languageName: node
linkType: hard
@@ -1506,7 +1541,16 @@ __metadata:
languageName: node
linkType: hard
-"@babel/runtime@npm:^7.10.1, @babel/runtime@npm:^7.10.4, @babel/runtime@npm:^7.11.1, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.0, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.14.5, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.16.3, @babel/runtime@npm:^7.16.7, @babel/runtime@npm:^7.18.0, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.20.0, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.9.2":
+"@babel/runtime@npm:^7.10.1, @babel/runtime@npm:^7.10.4, @babel/runtime@npm:^7.11.1, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.16.7, @babel/runtime@npm:^7.18.0, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.20.0":
+ version: 7.21.0
+ resolution: "@babel/runtime@npm:7.21.0"
+ dependencies:
+ regenerator-runtime: ^0.13.11
+ checksum: 7b33e25bfa9e0e1b9e8828bb61b2d32bdd46b41b07ba7cb43319ad08efc6fda8eb89445193e67d6541814627df0ca59122c0ea795e412b99c5183a0540d338ab
+ languageName: node
+ linkType: hard
+
+"@babel/runtime@npm:^7.12.0, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.14.5, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.16.3, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.9.2":
version: 7.20.13
resolution: "@babel/runtime@npm:7.20.13"
dependencies:
@@ -1515,6 +1559,33 @@ __metadata:
languageName: node
linkType: hard
+"@babel/runtime@npm:^7.21.0":
+ version: 7.21.5
+ resolution: "@babel/runtime@npm:7.21.5"
+ dependencies:
+ regenerator-runtime: ^0.13.11
+ checksum: 358f2779d3187f5c67ad302e8f8d435412925d0b991d133c7d4a7b1ddd5a3fda1b6f34537cb64628dfd96a27ae46df105bed3895b8d754b88cacdded8d1129dd
+ languageName: node
+ linkType: hard
+
+"@babel/runtime@npm:^7.22.5":
+ version: 7.22.6
+ resolution: "@babel/runtime@npm:7.22.6"
+ dependencies:
+ regenerator-runtime: ^0.13.11
+ checksum: e585338287c4514a713babf4fdb8fc2a67adcebab3e7723a739fc62c79cfda875b314c90fd25f827afb150d781af97bc16c85bfdbfa2889f06053879a1ddb597
+ languageName: node
+ linkType: hard
+
+"@babel/runtime@npm:^7.23.2":
+ version: 7.23.4
+ resolution: "@babel/runtime@npm:7.23.4"
+ dependencies:
+ regenerator-runtime: ^0.14.0
+ checksum: 8eb6a6b2367f7d60e7f7dd83f477cc2e2fdb169e5460694d7614ce5c730e83324bcf29251b70940068e757ad1ee56ff8073a372260d90cad55f18a825caf97cd
+ languageName: node
+ linkType: hard
+
"@babel/template@npm:^7.10.4, @babel/template@npm:^7.18.10, @babel/template@npm:^7.20.7, @babel/template@npm:^7.3.3":
version: 7.20.7
resolution: "@babel/template@npm:7.20.7"
@@ -1615,10 +1686,24 @@ __metadata:
languageName: node
linkType: hard
-"@ctrl/tinycolor@npm:^3.4.0":
- version: 3.5.0
- resolution: "@ctrl/tinycolor@npm:3.5.0"
- checksum: 4f0cc0005b53ca7e42b5137ff7069f95f05873168534e1c04e64429070eeb5e04dd309b52fb437601235807af7dedd4c43bbfce1df5fb11bfd3fb3c05a0eb3a5
+"@ctrl/tinycolor@npm:^3.4.0, @ctrl/tinycolor@npm:^3.6.0":
+ version: 3.6.0
+ resolution: "@ctrl/tinycolor@npm:3.6.0"
+ checksum: 4d1e481b4d7f9bb23d21b5436726034d37c2a1bc751b5169ef29ead0237e96443dbccbcfa887e20c3a65ba1b5e270063bb21b4034eac97561b980cbbd5e92a16
+ languageName: node
+ linkType: hard
+
+"@ctrl/tinycolor@npm:^3.6.1":
+ version: 3.6.1
+ resolution: "@ctrl/tinycolor@npm:3.6.1"
+ checksum: cefec6fcaaa3eb8ddf193f981e097dccf63b97b93b1e861cb18c645654824c831a568f444996e15ee509f255658ed82fba11c5365494a6e25b9b12ac454099e0
+ languageName: node
+ linkType: hard
+
+"@emotion/hash@npm:^0.8.0":
+ version: 0.8.0
+ resolution: "@emotion/hash@npm:0.8.0"
+ checksum: 4b35d88a97e67275c1d990c96d3b0450451d089d1508619488fc0acb882cb1ac91e93246d471346ebd1b5402215941ef4162efe5b51534859b39d8b3a0e3ffaa
languageName: node
linkType: hard
@@ -1645,7 +1730,7 @@ __metadata:
languageName: node
linkType: hard
-"@emotion/unitless@npm:^0.7.4":
+"@emotion/unitless@npm:^0.7.4, @emotion/unitless@npm:^0.7.5":
version: 0.7.5
resolution: "@emotion/unitless@npm:0.7.5"
checksum: f976e5345b53fae9414a7b2e7a949aa6b52f8bdbcc84458b1ddc0729e77ba1d1dfdff9960e0da60183877873d3a631fa24d9695dd714ed94bcd3ba5196586a6b
@@ -2175,7 +2260,58 @@ __metadata:
languageName: node
linkType: hard
-"@rc-component/portal@npm:^1.0.0-6, @rc-component/portal@npm:^1.0.0-8, @rc-component/portal@npm:^1.0.2":
+"@rc-component/color-picker@npm:~1.4.1":
+ version: 1.4.1
+ resolution: "@rc-component/color-picker@npm:1.4.1"
+ dependencies:
+ "@babel/runtime": ^7.10.1
+ "@ctrl/tinycolor": ^3.6.0
+ classnames: ^2.2.6
+ rc-util: ^5.30.0
+ peerDependencies:
+ react: ">=16.9.0"
+ react-dom: ">=16.9.0"
+ checksum: 7695dc182d5c88039b7c1a82acbd796111f5e90692641151555dc78b234ab67b7f2aedfab38a6874eb245f98a0b444c8b36c0c08885eb9de5eb6a096801c2225
+ languageName: node
+ linkType: hard
+
+"@rc-component/context@npm:^1.4.0":
+ version: 1.4.0
+ resolution: "@rc-component/context@npm:1.4.0"
+ dependencies:
+ "@babel/runtime": ^7.10.1
+ rc-util: ^5.27.0
+ peerDependencies:
+ react: ">=16.9.0"
+ react-dom: ">=16.9.0"
+ checksum: 3771237de1e82a453cfff7b5f0ca0dcc370a2838be8ecbfe172c26dec2e94dc2354a8b3061deaff7e633e418fc1b70ce3d10d770603f12dc477fe03f2ada7059
+ languageName: node
+ linkType: hard
+
+"@rc-component/mini-decimal@npm:^1.0.1":
+ version: 1.0.1
+ resolution: "@rc-component/mini-decimal@npm:1.0.1"
+ dependencies:
+ "@babel/runtime": ^7.18.0
+ checksum: 2fd3f3d9c404f679461fa52372b71b1131ecad6b2a34d6b5be07b04475ed22428ffc7dac599a28734b349f7b1c5b714cf879e9c005a89430016c6d83899ff1e9
+ languageName: node
+ linkType: hard
+
+"@rc-component/mutate-observer@npm:^1.1.0":
+ version: 1.1.0
+ resolution: "@rc-component/mutate-observer@npm:1.1.0"
+ dependencies:
+ "@babel/runtime": ^7.18.0
+ classnames: ^2.3.2
+ rc-util: ^5.24.4
+ peerDependencies:
+ react: ">=16.9.0"
+ react-dom: ">=16.9.0"
+ checksum: ffd79ad54b1f4dd02a94306373d3ebe408d5348156ac7908a86937f58c169f2fd42457461a5dc27bb874b9af5c2c196dc11a18db6bb6a5ff514cfd6bc1a3bb6a
+ languageName: node
+ linkType: hard
+
+"@rc-component/portal@npm:^1.0.0-8, @rc-component/portal@npm:^1.0.0-9, @rc-component/portal@npm:^1.0.2":
version: 1.1.0
resolution: "@rc-component/portal@npm:1.1.0"
dependencies:
@@ -2189,6 +2325,71 @@ __metadata:
languageName: node
linkType: hard
+"@rc-component/portal@npm:^1.1.0, @rc-component/portal@npm:^1.1.1":
+ version: 1.1.1
+ resolution: "@rc-component/portal@npm:1.1.1"
+ dependencies:
+ "@babel/runtime": ^7.18.0
+ classnames: ^2.3.2
+ rc-util: ^5.24.4
+ peerDependencies:
+ react: ">=16.9.0"
+ react-dom: ">=16.9.0"
+ checksum: 4a2aef7cfd71a7614dc83b5ee5863ef49613e392b9aec0fa5913de4fb04ca6c9b13fd4ed183d8696475999d9c2bb945d707b245f7f28b7c0615a5f613416206a
+ languageName: node
+ linkType: hard
+
+"@rc-component/tour@npm:~1.10.0":
+ version: 1.10.0
+ resolution: "@rc-component/tour@npm:1.10.0"
+ dependencies:
+ "@babel/runtime": ^7.18.0
+ "@rc-component/portal": ^1.0.0-9
+ "@rc-component/trigger": ^1.3.6
+ classnames: ^2.3.2
+ rc-util: ^5.24.4
+ peerDependencies:
+ react: ">=16.9.0"
+ react-dom: ">=16.9.0"
+ checksum: d586ca2e02d85c346640ddb228b60ddae94790973b030a85297aeef1e10e8e4ce1bef9d65f66098de59cafdacff5c04ad390528099d2b23fab449813696ba089
+ languageName: node
+ linkType: hard
+
+"@rc-component/trigger@npm:^1.17.0, @rc-component/trigger@npm:^1.18.0, @rc-component/trigger@npm:^1.18.2":
+ version: 1.18.2
+ resolution: "@rc-component/trigger@npm:1.18.2"
+ dependencies:
+ "@babel/runtime": ^7.23.2
+ "@rc-component/portal": ^1.1.0
+ classnames: ^2.3.2
+ rc-motion: ^2.0.0
+ rc-resize-observer: ^1.3.1
+ rc-util: ^5.38.0
+ peerDependencies:
+ react: ">=16.9.0"
+ react-dom: ">=16.9.0"
+ checksum: a1ecc787919c614d4cdd0ec140caf1685de4570da159248701edf1cb379f5cebf2e66f0a9ed7d6542b522c2a92fcdb72ec5dfb9a34a00599278381f598a6f7fb
+ languageName: node
+ linkType: hard
+
+"@rc-component/trigger@npm:^1.3.6, @rc-component/trigger@npm:^1.5.0, @rc-component/trigger@npm:^1.7.0":
+ version: 1.10.0
+ resolution: "@rc-component/trigger@npm:1.10.0"
+ dependencies:
+ "@babel/runtime": ^7.18.3
+ "@rc-component/portal": ^1.1.0
+ classnames: ^2.3.2
+ rc-align: ^4.0.0
+ rc-motion: ^2.0.0
+ rc-resize-observer: ^1.3.1
+ rc-util: ^5.29.2
+ peerDependencies:
+ react: ">=16.9.0"
+ react-dom: ">=16.9.0"
+ checksum: 3c1db298216cf8799f8bad51d62e1adc73f68eb488a31384bf3cdcff8e2b6e0b33bab64a245217a4e4603d0b5bf01537afbc0c09d0874fe48b8c3e036ea6258b
+ languageName: node
+ linkType: hard
+
"@react-google-maps/api@npm:^2.18.1":
version: 2.18.1
resolution: "@react-google-maps/api@npm:2.18.1"
@@ -2572,48 +2773,6 @@ __metadata:
languageName: node
linkType: hard
-"@types/d3-color@npm:^1":
- version: 1.4.2
- resolution: "@types/d3-color@npm:1.4.2"
- checksum: 60d0f00ceb53052a142c606465eeec49b264a8dee180ddeda121770bd24e2fe34d8c33140022d929a5bf3d862e6908a55ee86ac629d10ac93f124fb40db7022a
- languageName: node
- linkType: hard
-
-"@types/d3-geo@npm:^1":
- version: 1.12.4
- resolution: "@types/d3-geo@npm:1.12.4"
- dependencies:
- "@types/geojson": "*"
- checksum: 301180d2524fe45a5a5f9c1cafd4d4b89ea1bf99be390ee84e06510ca2126d34b4d674c62ca389078c59e34177140d85cef5ab9512583beed50eee3b07c3a075
- languageName: node
- linkType: hard
-
-"@types/d3-interpolate@npm:^1":
- version: 1.4.2
- resolution: "@types/d3-interpolate@npm:1.4.2"
- dependencies:
- "@types/d3-color": ^1
- checksum: 3d551377c036580efb4f918171300d849d9bf7c6fe61b1ee6ba916065a2e406cded2aaef067a39d068ec6ab898053abb703413921f2d3701c9332bd201152ef9
- languageName: node
- linkType: hard
-
-"@types/d3-selection@npm:^1":
- version: 1.4.3
- resolution: "@types/d3-selection@npm:1.4.3"
- checksum: 6ab11ac517d5878dca18021c698576f6678fb8374dcf1c519021969ba90d6c84fb8368f8f555bddce78b278b95d40f438398e1b082a96c257b7103ec543ad28b
- languageName: node
- linkType: hard
-
-"@types/d3-zoom@npm:^1":
- version: 1.8.3
- resolution: "@types/d3-zoom@npm:1.8.3"
- dependencies:
- "@types/d3-interpolate": ^1
- "@types/d3-selection": ^1
- checksum: 41731fcba0dd5f5c0fa6a4f6e491daae0fa273cb1ab63a5ac23dbcfbcd9249e7ff04edddd6e6a527a7849e5759c9c273dd325d2f41e565059a83b547b2af64ab
- languageName: node
- linkType: hard
-
"@types/eslint@npm:^7.29.0":
version: 7.29.0
resolution: "@types/eslint@npm:7.29.0"
@@ -2808,12 +2967,12 @@ __metadata:
languageName: node
linkType: hard
-"@types/react-dom@npm:^18.0.11":
- version: 18.0.11
- resolution: "@types/react-dom@npm:18.0.11"
+"@types/react-dom@npm:^18.2.6":
+ version: 18.2.6
+ resolution: "@types/react-dom@npm:18.2.6"
dependencies:
"@types/react": "*"
- checksum: 579691e4d5ec09688087568037c35edf8cfb1ab3e07f6c60029280733ee7b5c06d66df6fcc90786702c93ac8cb13bc7ff16c79ddfc75d082938fbaa36e1cdbf4
+ checksum: b56e42efab121a3a8013d2eb8c1688e6028a25ea6d33c4362d2846f0af3760b164b4d7c34846614024cfb8956cca70dd1743487f152e32ff89a00fe6fbd2be54
languageName: node
linkType: hard
@@ -2879,18 +3038,6 @@ __metadata:
languageName: node
linkType: hard
-"@types/react-simple-maps@npm:^1.0.7":
- version: 1.0.8
- resolution: "@types/react-simple-maps@npm:1.0.8"
- dependencies:
- "@types/d3-geo": ^1
- "@types/d3-zoom": ^1
- "@types/geojson": "*"
- "@types/react": "*"
- checksum: af4c34da0f34a9347c4efcb42ca8e7a812d58ae130bd8c2f6942d002aa35b563871a6f35ce25473fd65e1ca297b28eee0a156cc62eafdb61f448372daa509d1c
- languageName: node
- linkType: hard
-
"@types/react-slick@npm:^0.23.8":
version: 0.23.10
resolution: "@types/react-slick@npm:0.23.10"
@@ -2900,14 +3047,14 @@ __metadata:
languageName: node
linkType: hard
-"@types/react@npm:^18.0.28":
- version: 18.0.28
- resolution: "@types/react@npm:18.0.28"
+"@types/react@npm:^18.2.13":
+ version: 18.2.13
+ resolution: "@types/react@npm:18.2.13"
dependencies:
"@types/prop-types": "*"
"@types/scheduler": "*"
csstype: ^3.0.2
- checksum: e752df961105e5127652460504785897ca6e77259e0da8f233f694f9e8f451cde7fa0709d4456ade0ff600c8ce909cfe29f9b08b9c247fa9b734e126ec53edd7
+ checksum: f7c15f19c164a29262993ea2aae2085fa38cddd9b8359fd8fefabfced91010b515a3abe2042b2b7f2f86e6b38a25b191415aa9313a9027175e3a000883c858cc
languageName: node
linkType: hard
@@ -3690,13 +3837,6 @@ __metadata:
languageName: node
linkType: hard
-"amdefine@npm:>=0.0.4":
- version: 1.0.1
- resolution: "amdefine@npm:1.0.1"
- checksum: 9d4e15b94641643a9385b2841b4cb2bcf4e8e2f741ea4bd475c93ad7bab261ad4ed827a32e9c549b38b98759c4526c173ae4e6dde8caeb75ee5cebedc9863762
- languageName: node
- linkType: hard
-
"ansi-colors@npm:^3.0.0":
version: 3.2.4
resolution: "ansi-colors@npm:3.2.4"
@@ -3780,57 +3920,62 @@ __metadata:
languageName: node
linkType: hard
-"antd@npm:^4.22.4":
- version: 4.24.8
- resolution: "antd@npm:4.24.8"
+"antd@npm:^5.11.5":
+ version: 5.11.5
+ resolution: "antd@npm:5.11.5"
dependencies:
- "@ant-design/colors": ^6.0.0
- "@ant-design/icons": ^4.7.0
- "@ant-design/react-slick": ~0.29.1
+ "@ant-design/colors": ^7.0.0
+ "@ant-design/cssinjs": ^1.17.5
+ "@ant-design/icons": ^5.2.6
+ "@ant-design/react-slick": ~1.0.2
"@babel/runtime": ^7.18.3
- "@ctrl/tinycolor": ^3.4.0
- classnames: ^2.2.6
- copy-to-clipboard: ^3.2.0
- lodash: ^4.17.21
- moment: ^2.29.2
- rc-cascader: ~3.7.0
- rc-checkbox: ~2.3.0
- rc-collapse: ~3.4.2
- rc-dialog: ~9.0.2
- rc-drawer: ~6.1.0
- rc-dropdown: ~4.0.0
- rc-field-form: ~1.27.0
- rc-image: ~5.13.0
- rc-input: ~0.1.4
- rc-input-number: ~7.3.9
- rc-mentions: ~1.13.1
- rc-menu: ~9.8.0
- rc-motion: ^2.6.1
- rc-notification: ~4.6.0
- rc-pagination: ~3.2.0
- rc-picker: ~2.7.0
- rc-progress: ~3.4.1
- rc-rate: ~2.9.0
- rc-resize-observer: ^1.2.0
- rc-segmented: ~2.1.0
- rc-select: ~14.1.13
- rc-slider: ~10.0.0
- rc-steps: ~5.0.0-alpha.2
- rc-switch: ~3.2.0
- rc-table: ~7.26.0
- rc-tabs: ~12.5.6
- rc-textarea: ~0.4.5
- rc-tooltip: ~5.2.0
- rc-tree: ~5.7.0
- rc-tree-select: ~5.5.0
- rc-trigger: ^5.2.10
- rc-upload: ~4.3.0
- rc-util: ^5.22.5
- scroll-into-view-if-needed: ^2.2.25
+ "@ctrl/tinycolor": ^3.6.1
+ "@rc-component/color-picker": ~1.4.1
+ "@rc-component/mutate-observer": ^1.1.0
+ "@rc-component/tour": ~1.10.0
+ "@rc-component/trigger": ^1.18.2
+ classnames: ^2.3.2
+ copy-to-clipboard: ^3.3.3
+ dayjs: ^1.11.1
+ qrcode.react: ^3.1.0
+ rc-cascader: ~3.20.0
+ rc-checkbox: ~3.1.0
+ rc-collapse: ~3.7.1
+ rc-dialog: ~9.3.4
+ rc-drawer: ~6.5.2
+ rc-dropdown: ~4.1.0
+ rc-field-form: ~1.40.0
+ rc-image: ~7.5.1
+ rc-input: ~1.3.6
+ rc-input-number: ~8.4.0
+ rc-mentions: ~2.9.1
+ rc-menu: ~9.12.2
+ rc-motion: ^2.9.0
+ rc-notification: ~5.3.0
+ rc-pagination: ~3.7.0
+ rc-picker: ~3.14.6
+ rc-progress: ~3.5.1
+ rc-rate: ~2.12.0
+ rc-resize-observer: ^1.4.0
+ rc-segmented: ~2.2.2
+ rc-select: ~14.10.0
+ rc-slider: ~10.4.0
+ rc-steps: ~6.0.1
+ rc-switch: ~4.1.0
+ rc-table: ~7.36.0
+ rc-tabs: ~12.13.1
+ rc-textarea: ~1.5.3
+ rc-tooltip: ~6.1.2
+ rc-tree: ~5.8.2
+ rc-tree-select: ~5.15.0
+ rc-upload: ~4.3.5
+ rc-util: ^5.38.1
+ scroll-into-view-if-needed: ^3.1.0
+ throttle-debounce: ^5.0.0
peerDependencies:
react: ">=16.9.0"
react-dom: ">=16.9.0"
- checksum: 99744b6769454f961e8332b571a1785c7c6d9e1c125dedaaa2314348faccda66dd48c2eec6bb9f71de5474b47ccf02cfed5132d29645b038b144c5701143669f
+ checksum: daeea1d276b2646ad726ec568cb32517543fe592e08b04db41802621a08c3cd43372b8ae0893115ca2e016a562f6a02096334fe36812d1a3488bb12ade43488e
languageName: node
linkType: hard
@@ -5243,18 +5388,6 @@ __metadata:
languageName: node
linkType: hard
-"clean-css@npm:^3.0.1":
- version: 3.4.28
- resolution: "clean-css@npm:3.4.28"
- dependencies:
- commander: 2.8.x
- source-map: 0.4.x
- bin:
- cleancss: ./bin/cleancss
- checksum: eacc573e5ba118aa59bb44a3d188e54d390b7482cad7941559b3865e4946c677afb2deab50bcf8e97592532935f684a53b3abff1d5c55e95e21ded1e93b69132
- languageName: node
- linkType: hard
-
"clean-css@npm:^4.2.3":
version: 4.2.4
resolution: "clean-css@npm:4.2.4"
@@ -5440,22 +5573,13 @@ __metadata:
languageName: node
linkType: hard
-"commander@npm:2, commander@npm:^2.20.0":
+"commander@npm:^2.20.0":
version: 2.20.3
resolution: "commander@npm:2.20.3"
checksum: ab8c07884e42c3a8dbc5dd9592c606176c7eb5c1ca5ff274bcf907039b2c41de3626f684ea75ccf4d361ba004bbaff1f577d5384c155f3871e456bdf27becf9e
languageName: node
linkType: hard
-"commander@npm:2.8.x":
- version: 2.8.1
- resolution: "commander@npm:2.8.1"
- dependencies:
- graceful-readlink: ">= 1.0.0"
- checksum: 9552028af84683cf2b20397c54fa4dd5b18fb69555e201a8edc3880b344f5aadd8857f777da97ce0c99e50fc133adf356f0299e9958b9b4e95b96c45f0696dfd
- languageName: node
- linkType: hard
-
"commander@npm:^4.1.1":
version: 4.1.1
resolution: "commander@npm:4.1.1"
@@ -5531,10 +5655,10 @@ __metadata:
languageName: node
linkType: hard
-"compute-scroll-into-view@npm:^1.0.20":
- version: 1.0.20
- resolution: "compute-scroll-into-view@npm:1.0.20"
- checksum: f15fab29221953620735393ac1866541aab0d27d28078bedbba071a291ee9c8cc1a72bee302cf0bc06ed83c5e55afb74ebcbd634a63671ba33cf1fb1c51d3308
+"compute-scroll-into-view@npm:^3.0.2":
+ version: 3.1.0
+ resolution: "compute-scroll-into-view@npm:3.1.0"
+ checksum: 224549d6dd1d40342230de5c6d69cac5c3ed5c2f6a4437310f959aadc8db1d20b03da44a6e0de14d9419c6f9130ce51ec99a91b11bde55d4640f10551c89c213
languageName: node
linkType: hard
@@ -5652,15 +5776,6 @@ __metadata:
languageName: node
linkType: hard
-"copy-anything@npm:^2.0.1":
- version: 2.0.6
- resolution: "copy-anything@npm:2.0.6"
- dependencies:
- is-what: ^3.14.1
- checksum: 7318dc00ca14f846d14fc886845cff63bf20a3c5f4fcdd31f68c40a213648c78a1093426947ac0f8f8577845e9a7a11eeaaeefb05d9a6f1b78ca5ec60c2aaf6e
- languageName: node
- linkType: hard
-
"copy-concurrently@npm:^1.0.0":
version: 1.0.5
resolution: "copy-concurrently@npm:1.0.5"
@@ -5682,7 +5797,7 @@ __metadata:
languageName: node
linkType: hard
-"copy-to-clipboard@npm:^3.2.0":
+"copy-to-clipboard@npm:^3.3.3":
version: 3.3.3
resolution: "copy-to-clipboard@npm:3.3.3"
dependencies:
@@ -6195,7 +6310,7 @@ __metadata:
languageName: node
linkType: hard
-"csstype@npm:^3.0.2":
+"csstype@npm:^3.0.10, csstype@npm:^3.0.2":
version: 3.1.1
resolution: "csstype@npm:3.1.1"
checksum: 1f7b4f5fdd955b7444b18ebdddf3f5c699159f13e9cf8ac9027ae4a60ae226aef9bbb14a6e12ca7dba3358b007cee6354b116e720262867c398de6c955ea451d
@@ -6209,106 +6324,6 @@ __metadata:
languageName: node
linkType: hard
-"d3-array@npm:^2.5.0":
- version: 2.12.1
- resolution: "d3-array@npm:2.12.1"
- dependencies:
- internmap: ^1.0.0
- checksum: 97853b7b523aded17078f37c67742f45d81e88dda2107ae9994c31b9e36c5fa5556c4c4cf39650436f247813602dfe31bf7ad067ff80f127a16903827f10c6eb
- languageName: node
- linkType: hard
-
-"d3-color@npm:1 - 2":
- version: 2.0.0
- resolution: "d3-color@npm:2.0.0"
- checksum: b887354aa383937abd04fbffed3e26e5d6a788472cd3737fb10735930e427763e69fe93398663bccf88c0b53ee3e638ac6fcf0c02226b00ed9e4327c2dfbf3dc
- languageName: node
- linkType: hard
-
-"d3-dispatch@npm:1 - 2":
- version: 2.0.0
- resolution: "d3-dispatch@npm:2.0.0"
- checksum: cf473676ae0df1915d51d056d2c6734ceec480d258611d970a01847c50e8c273c185032bf9ed491abd077696bcbeeb491dc94af53e888871f3a1a0fac7365cec
- languageName: node
- linkType: hard
-
-"d3-drag@npm:2":
- version: 2.0.0
- resolution: "d3-drag@npm:2.0.0"
- dependencies:
- d3-dispatch: 1 - 2
- d3-selection: 2
- checksum: 47f0bcdd097fd363d59da41299f276c1f6bd88bc460f53871b3d9c35982d40f59a535c6de7fa07a51120e56c99064bd9aa3551279dc09ce4204c639d54f80399
- languageName: node
- linkType: hard
-
-"d3-ease@npm:1 - 2":
- version: 2.0.0
- resolution: "d3-ease@npm:2.0.0"
- checksum: 1a9f6dfc836f0c66fba1ed28f0a3ad170d7c4f4812d442c6b562163e1a60283cc697e72a2cc4ba64abff9e77ad56354847986a5964e0c661af9b6d132c642e29
- languageName: node
- linkType: hard
-
-"d3-geo@npm:^2.0.1":
- version: 2.0.2
- resolution: "d3-geo@npm:2.0.2"
- dependencies:
- d3-array: ^2.5.0
- checksum: 992f667c646f8e2ea810de20e62914128e119f0458bce4090934287af3b93395632ed4af16aae7ccae095ae702a23b5d7a49888674f1aa27ab1a6e410882d86c
- languageName: node
- linkType: hard
-
-"d3-interpolate@npm:1 - 2":
- version: 2.0.1
- resolution: "d3-interpolate@npm:2.0.1"
- dependencies:
- d3-color: 1 - 2
- checksum: 4a2018ac34fbcc3e0e7241e117087ca1b2274b8b33673913658623efacc5db013b8d876586d167b23e3145bdb34ec8e441d301299b082e1a90985b2f18d4299c
- languageName: node
- linkType: hard
-
-"d3-selection@npm:2, d3-selection@npm:^2.0.0":
- version: 2.0.0
- resolution: "d3-selection@npm:2.0.0"
- checksum: c00143f55d510e405fc51e5ef626cb6b3705181ec3d595e84e5cb977508e30228d95d7e209aff6e686ff758c562c5dd17e974325ee8c8555bb6f4f382331ec7d
- languageName: node
- linkType: hard
-
-"d3-timer@npm:1 - 2":
- version: 2.0.0
- resolution: "d3-timer@npm:2.0.0"
- checksum: 70733c3baffe473155b712896f04f27dae32d6e94169827f57aebb203e190926ba37af12c5f56cbc7126e538a4b1cd083f2451b80dc2a5644d076b6b31982bd8
- languageName: node
- linkType: hard
-
-"d3-transition@npm:2":
- version: 2.0.0
- resolution: "d3-transition@npm:2.0.0"
- dependencies:
- d3-color: 1 - 2
- d3-dispatch: 1 - 2
- d3-ease: 1 - 2
- d3-interpolate: 1 - 2
- d3-timer: 1 - 2
- peerDependencies:
- d3-selection: 2
- checksum: 8f29d195adc75e20dcffacb44e571fd64a2f60d511e6e7438019356bbc6c3ada10ae2b1393c36242ab71eb1b131f60cf71d0d76bd4cab4fce6a5ddaf1f6f6b00
- languageName: node
- linkType: hard
-
-"d3-zoom@npm:^2.0.0":
- version: 2.0.0
- resolution: "d3-zoom@npm:2.0.0"
- dependencies:
- d3-dispatch: 1 - 2
- d3-drag: 2
- d3-interpolate: 1 - 2
- d3-selection: 2
- d3-transition: 2
- checksum: d98cc6ffa1105b0062ee312303caff9345ecd1f6df11b7da1e008c1c4731551755ac951327e8c758ffcf74e761218bc6c4f4a6b48f91551ea5d67e0dcf574a49
- languageName: node
- linkType: hard
-
"d@npm:1, d@npm:^1.0.1":
version: 1.0.1
resolution: "d@npm:1.0.1"
@@ -6337,14 +6352,7 @@ __metadata:
languageName: node
linkType: hard
-"date-fns@npm:2.x":
- version: 2.29.3
- resolution: "date-fns@npm:2.29.3"
- checksum: e01cf5b62af04e05dfff921bb9c9933310ed0e1ae9a81eb8653452e64dc841acf7f6e01e1a5ae5644d0337e9a7f936175fd2cb6819dc122fdd9c5e86c56be484
- languageName: node
- linkType: hard
-
-"dayjs@npm:1.x, dayjs@npm:^1.11.0":
+"dayjs@npm:^1.11.0, dayjs@npm:^1.11.1":
version: 1.11.7
resolution: "dayjs@npm:1.11.7"
checksum: 5003a7c1dd9ed51385beb658231c3548700b82d3548c0cfbe549d85f2d08e90e972510282b7506941452c58d32136d6362f009c77ca55381a09c704e9f177ebb
@@ -6372,7 +6380,7 @@ __metadata:
languageName: node
linkType: hard
-"debug@npm:^3.2.6, debug@npm:^3.2.7":
+"debug@npm:^3.2.7":
version: 3.2.7
resolution: "debug@npm:3.2.7"
dependencies:
@@ -7029,7 +7037,7 @@ __metadata:
languageName: node
linkType: hard
-"errno@npm:^0.1.1, errno@npm:^0.1.3, errno@npm:~0.1.7":
+"errno@npm:^0.1.3, errno@npm:~0.1.7":
version: 0.1.8
resolution: "errno@npm:0.1.8"
dependencies:
@@ -8588,13 +8596,6 @@ __metadata:
languageName: node
linkType: hard
-"graceful-readlink@npm:>= 1.0.0":
- version: 1.0.1
- resolution: "graceful-readlink@npm:1.0.1"
- checksum: 4c1889ca0a6fc0bb9585b55c26a99719be132cbc4b7d84036193b70608059b9783e52e2a866d5a8e39821b16a69e899644ca75c6206563f1319b6720836b9ab2
- languageName: node
- linkType: hard
-
"grapheme-splitter@npm:^1.0.4":
version: 1.0.4
resolution: "grapheme-splitter@npm:1.0.4"
@@ -9129,7 +9130,7 @@ __metadata:
languageName: node
linkType: hard
-"iconv-lite@npm:^0.6.2, iconv-lite@npm:^0.6.3":
+"iconv-lite@npm:^0.6.2":
version: 0.6.3
resolution: "iconv-lite@npm:0.6.3"
dependencies:
@@ -9184,15 +9185,6 @@ __metadata:
languageName: node
linkType: hard
-"image-size@npm:~0.5.0":
- version: 0.5.5
- resolution: "image-size@npm:0.5.5"
- bin:
- image-size: bin/image-size.js
- checksum: 6709d5cb73e96d5097ae5e9aa746dd36d6a9c8cf645e7eecac72ea07dbd6f312a65183752762fa92e2f3b698d4ed8d85dd55bf5207b6367245996bd16576d8fe
- languageName: node
- linkType: hard
-
"imask@npm:6.4.2":
version: 6.4.2
resolution: "imask@npm:6.4.2"
@@ -9379,13 +9371,6 @@ __metadata:
languageName: node
linkType: hard
-"internmap@npm:^1.0.0":
- version: 1.0.1
- resolution: "internmap@npm:1.0.1"
- checksum: 9d00f8c0cf873a24a53a5a937120dab634c41f383105e066bb318a61864e6292d24eb9516e8e7dccfb4420ec42ca474a0f28ac9a6cc82536898fa09bbbe53813
- languageName: node
- linkType: hard
-
"invariant@npm:2.2.4, invariant@npm:^2.2.4":
version: 2.2.4
resolution: "invariant@npm:2.2.4"
@@ -10001,13 +9986,6 @@ __metadata:
languageName: node
linkType: hard
-"is-what@npm:^3.14.1":
- version: 3.14.1
- resolution: "is-what@npm:3.14.1"
- checksum: a9a6ce92d33799f1ae0916c7afb6f8128a23ce9d28bd69d9ec3ec88910e7a1f68432e6236c3c8a4d544cf0b864675e5d828437efde60ee0cf8102061d395c1df
- languageName: node
- linkType: hard
-
"is-windows@npm:^1.0.2":
version: 1.0.2
resolution: "is-windows@npm:1.0.2"
@@ -10938,50 +10916,6 @@ __metadata:
languageName: node
linkType: hard
-"less-plugin-clean-css@npm:^1.5.1":
- version: 1.5.1
- resolution: "less-plugin-clean-css@npm:1.5.1"
- dependencies:
- clean-css: ^3.0.1
- checksum: be7012b18b927d95e042d69c2cc3741f13dc4971d1a38ee006883c21a1a588f4bc549c931aa61e257e32f0cf5890b05965f1fcd7de49a06ee86d6da0495b0968
- languageName: node
- linkType: hard
-
-"less@npm:^4.1.2":
- version: 4.1.3
- resolution: "less@npm:4.1.3"
- dependencies:
- copy-anything: ^2.0.1
- errno: ^0.1.1
- graceful-fs: ^4.1.2
- image-size: ~0.5.0
- make-dir: ^2.1.0
- mime: ^1.4.1
- needle: ^3.1.0
- parse-node-version: ^1.0.1
- source-map: ~0.6.0
- tslib: ^2.3.0
- dependenciesMeta:
- errno:
- optional: true
- graceful-fs:
- optional: true
- image-size:
- optional: true
- make-dir:
- optional: true
- mime:
- optional: true
- needle:
- optional: true
- source-map:
- optional: true
- bin:
- lessc: bin/lessc
- checksum: 1470fbec993a375eb28d729cd906805fd62b7a7f1b4f5b4d62d04e81eaba987a9373e74aa0b9fa9191149ebc0bfb42e2ea98a038555555b7b241c10a854067cc
- languageName: node
- linkType: hard
-
"leven@npm:^3.1.0":
version: 3.1.0
resolution: "leven@npm:3.1.0"
@@ -11009,10 +10943,10 @@ __metadata:
languageName: node
linkType: hard
-"libphonenumber-js@npm:^1.10.19":
- version: 1.10.19
- resolution: "libphonenumber-js@npm:1.10.19"
- checksum: 8408056a375b36728b83daa2048a9157abe21596b042307487c64a648aa31319ace77f04c59331710b30d7fc79466fc5ad978fddb74b6e4a0a21463b7e6bd535
+"libphonenumber-js@npm:^1.10.48":
+ version: 1.10.49
+ resolution: "libphonenumber-js@npm:1.10.49"
+ checksum: 596b4ed05fbf8c99f384cda802e6afb111accdaf96f9baf2a3ac32c885602583f3e9cba4c4475c3922e9c4f79c63bcdf7e592666b7e14b258cad26f34f51c2e0
languageName: node
linkType: hard
@@ -11020,26 +10954,25 @@ __metadata:
version: 0.0.0-use.local
resolution: "lightence-admin@workspace:."
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
"@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
"@typescript-eslint/eslint-plugin": ^5.10.0
"@typescript-eslint/parser": ^5.8.0
- antd: ^4.22.4
+ antd: ^5.11.5
antd-mask-input: ^2.0.7
axios: ^0.24.0
axios-mock-adapter: ^1.20.0
@@ -11058,8 +10991,6 @@ __metadata:
husky: ^6.0.0
i18next: ^20.4.0
leaflet: ^1.7.1
- less: ^4.1.2
- less-plugin-clean-css: ^1.5.1
lint-staged: ^11.0.0
pigeon-maps: ^0.19.7
prettier: ^2.3.1
@@ -11069,15 +11000,14 @@ __metadata:
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"
@@ -11257,6 +11187,13 @@ __metadata:
languageName: node
linkType: hard
+"lodash.camelcase@npm:^4.3.0":
+ version: 4.3.0
+ resolution: "lodash.camelcase@npm:4.3.0"
+ checksum: cb9227612f71b83e42de93eccf1232feeb25e705bdb19ba26c04f91e885bfd3dd5c517c4a97137658190581d3493ea3973072ca010aab7e301046d90740393d1
+ languageName: node
+ linkType: hard
+
"lodash.debounce@npm:^4.0.8":
version: 4.0.8
resolution: "lodash.debounce@npm:4.0.8"
@@ -11408,7 +11345,7 @@ __metadata:
languageName: node
linkType: hard
-"make-dir@npm:^2.0.0, make-dir@npm:^2.1.0":
+"make-dir@npm:^2.0.0":
version: 2.1.0
resolution: "make-dir@npm:2.1.0"
dependencies:
@@ -11723,7 +11660,7 @@ __metadata:
languageName: node
linkType: hard
-"mime@npm:1.6.0, mime@npm:^1.4.1":
+"mime@npm:1.6.0":
version: 1.6.0
resolution: "mime@npm:1.6.0"
bin:
@@ -11953,13 +11890,6 @@ __metadata:
languageName: node
linkType: hard
-"moment@npm:^2.24.0, moment@npm:^2.29.2":
- version: 2.29.4
- resolution: "moment@npm:2.29.4"
- checksum: 0ec3f9c2bcba38dc2451b1daed5daded747f17610b92427bebe1d08d48d8b7bdd8d9197500b072d14e326dd0ccf3e326b9e3d07c5895d3d49e39b6803b76e80e
- languageName: node
- linkType: hard
-
"move-concurrently@npm:^1.0.1":
version: 1.0.1
resolution: "move-concurrently@npm:1.0.1"
@@ -12081,19 +12011,6 @@ __metadata:
languageName: node
linkType: hard
-"needle@npm:^3.1.0":
- version: 3.2.0
- resolution: "needle@npm:3.2.0"
- dependencies:
- debug: ^3.2.6
- iconv-lite: ^0.6.3
- sax: ^1.2.4
- bin:
- needle: bin/needle
- checksum: d6f3e8668bbaf943d28ced0ad843eff793b56025e80152e511fd02313b8974e4dd9674bcbe3d8f9aa31882adb190dafe29ea5fce03a92b4724adf4850070bcfc
- languageName: node
- linkType: hard
-
"negotiator@npm:0.6.3, negotiator@npm:^0.6.3":
version: 0.6.3
resolution: "negotiator@npm:0.6.3"
@@ -12782,13 +12699,6 @@ __metadata:
languageName: node
linkType: hard
-"parse-node-version@npm:^1.0.1":
- version: 1.0.1
- resolution: "parse-node-version@npm:1.0.1"
- checksum: c192393b6a978092c1ef8df2c42c0a02e4534b96543e23d335f1b9b5b913ac75473d18fe6050b58d6995c57fb383ee71a5cb8397e363caaf38a6df8215cc52fd
- languageName: node
- linkType: hard
-
"parse5@npm:6.0.1":
version: 6.0.1
resolution: "parse5@npm:6.0.1"
@@ -14206,6 +14116,15 @@ __metadata:
languageName: node
linkType: hard
+"qrcode.react@npm:^3.1.0":
+ version: 3.1.0
+ resolution: "qrcode.react@npm:3.1.0"
+ peerDependencies:
+ react: ^16.8.0 || ^17.0.0 || ^18.0.0
+ checksum: 94a2942ecf83f461d869adb20305ae663c6d1abe93ef2c72442b07d756ce70cf6deb6fd588dc5b382b48c6991cfde1dfd5ac9b814c1461e71d5edb2d945e67fc
+ languageName: node
+ linkType: hard
+
"qs@npm:6.11.0":
version: 6.11.0
resolution: "qs@npm:6.11.0"
@@ -14330,55 +14249,55 @@ __metadata:
languageName: node
linkType: hard
-"rc-cascader@npm:~3.7.0":
- version: 3.7.0
- resolution: "rc-cascader@npm:3.7.0"
+"rc-cascader@npm:~3.20.0":
+ version: 3.20.0
+ resolution: "rc-cascader@npm:3.20.0"
dependencies:
"@babel/runtime": ^7.12.5
array-tree-filter: ^2.1.0
classnames: ^2.3.1
- rc-select: ~14.1.0
- rc-tree: ~5.7.0
- rc-util: ^5.6.1
+ rc-select: ~14.10.0
+ rc-tree: ~5.8.1
+ rc-util: ^5.37.0
peerDependencies:
react: ">=16.9.0"
react-dom: ">=16.9.0"
- checksum: 9bc01c8fb633f6d9af821fad7020ceb829fe71bb9e3517fee2554ca58176b650621e3e9286b2e8208df419c381d6b7696aa801985acdb050c6f36b7c68321cff
+ checksum: fd85091f90c7a82ff8e240c356de9f1070e6371217a7ab852908b64746488586d8c9b2893ce5895373e1e8d55c36d5cd899808ec6d7938bfe81d19be2ceee94a
languageName: node
linkType: hard
-"rc-checkbox@npm:~2.3.0":
- version: 2.3.2
- resolution: "rc-checkbox@npm:2.3.2"
+"rc-checkbox@npm:~3.1.0":
+ version: 3.1.0
+ resolution: "rc-checkbox@npm:3.1.0"
dependencies:
"@babel/runtime": ^7.10.1
- classnames: ^2.2.1
+ classnames: ^2.3.2
+ rc-util: ^5.25.2
peerDependencies:
react: ">=16.9.0"
react-dom: ">=16.9.0"
- checksum: 023e479d2f95ab64e963f8437da4da2f8b0d750c10d601fd3407ef4f1ac0f8fcba1148b305f9a51dee052770f927ff00440bbcce09f6b0b585e38ba2c49a7ac6
+ checksum: f15dd3e3e3120567b633392e37c6d904f2b3c32eb752f4197231b6d79bfa257bde9cd32616ad08c0ad5b053d7b197c9e0684479053b4dea384e466ab53f5c7b4
languageName: node
linkType: hard
-"rc-collapse@npm:~3.4.2":
- version: 3.4.2
- resolution: "rc-collapse@npm:3.4.2"
+"rc-collapse@npm:~3.7.1":
+ version: 3.7.2
+ resolution: "rc-collapse@npm:3.7.2"
dependencies:
"@babel/runtime": ^7.10.1
classnames: 2.x
rc-motion: ^2.3.4
- rc-util: ^5.2.1
- shallowequal: ^1.1.0
+ rc-util: ^5.27.0
peerDependencies:
react: ">=16.9.0"
react-dom: ">=16.9.0"
- checksum: 617409c4ca8cbcad85df7de33f40fc0526ff28f54304d687b82add8c7c4e442c5fdf2935a645d51e44afa87b23d673f4a8a4d9ee1033b473f6fd4bd5b94df4bc
+ checksum: b8e295fbd96325545bab7f7e4014fe5bb606ce973544479e3012704439b910215e5197e0e26bdc08d42d2321e7694c5e2d5a6c1bd81b790e03826b2bf60791b5
languageName: node
linkType: hard
-"rc-dialog@npm:~9.0.0, rc-dialog@npm:~9.0.2":
- version: 9.0.2
- resolution: "rc-dialog@npm:9.0.2"
+"rc-dialog@npm:~9.3.4":
+ version: 9.3.4
+ resolution: "rc-dialog@npm:9.3.4"
dependencies:
"@babel/runtime": ^7.10.1
"@rc-component/portal": ^1.0.0-8
@@ -14388,89 +14307,91 @@ __metadata:
peerDependencies:
react: ">=16.9.0"
react-dom: ">=16.9.0"
- checksum: 470953c33123c984d7c18685435f08fb7cc4111fdbd01f032a8b111e1b0c06b2a9edcc26bc6895e1a426529e8c2842d6f79441f6bfceaa9c1c273e6b56f0f16d
+ checksum: 75d689d281ae3a1a85faa2f87c95ac65995ed58f696898edbe89a79604e18213565edc1d21291c9a640379fa6705c19ec51ba9275d69cde877d21f5108eb3503
languageName: node
linkType: hard
-"rc-drawer@npm:~6.1.0":
- version: 6.1.3
- resolution: "rc-drawer@npm:6.1.3"
+"rc-drawer@npm:~6.5.2":
+ version: 6.5.2
+ resolution: "rc-drawer@npm:6.5.2"
dependencies:
"@babel/runtime": ^7.10.1
- "@rc-component/portal": ^1.0.0-6
+ "@rc-component/portal": ^1.1.1
classnames: ^2.2.6
rc-motion: ^2.6.1
- rc-util: ^5.21.2
+ rc-util: ^5.36.0
peerDependencies:
react: ">=16.9.0"
react-dom: ">=16.9.0"
- checksum: 09fa3085312f668b27e0a8acae7f560a7d45ad52e4554020a6d3801352331b1173b20f57d32f876cfc1b359bd3088190e90bd7815619144d6d50b83c4ab44196
+ checksum: e96908f641ea0a4b26e7142a932cefe60ee34c03c6c569a6070af770b0be8a883e89521217d8391957254b0ed88b4ac1735129c9e062528db0751bfd0222a0c1
languageName: node
linkType: hard
-"rc-dropdown@npm:~4.0.0":
- version: 4.0.1
- resolution: "rc-dropdown@npm:4.0.1"
+"rc-dropdown@npm:~4.1.0":
+ version: 4.1.0
+ resolution: "rc-dropdown@npm:4.1.0"
dependencies:
"@babel/runtime": ^7.18.3
+ "@rc-component/trigger": ^1.7.0
classnames: ^2.2.6
- rc-trigger: ^5.3.1
rc-util: ^5.17.0
peerDependencies:
react: ">=16.11.0"
react-dom: ">=16.11.0"
- checksum: 12d16fc49dbab3f548ba1674b12cf688f58bcb73932285354a506b2f443aa58dc09cad3e07edb5d8de8e659c91b985022eef0734f233b76261af1b17a61ce619
+ checksum: 97417289ad4e3c3b68980c9bb80d3429fba9fdf0011f73fd1bee1b9d0c7c602ee469ac52aadca6fec85430595a8581a069750ad696472f2ca951d5e44850a6f4
languageName: node
linkType: hard
-"rc-field-form@npm:~1.27.0":
- version: 1.27.3
- resolution: "rc-field-form@npm:1.27.3"
+"rc-field-form@npm:~1.40.0":
+ version: 1.40.0
+ resolution: "rc-field-form@npm:1.40.0"
dependencies:
"@babel/runtime": ^7.18.0
async-validator: ^4.1.0
- rc-util: ^5.8.0
+ rc-util: ^5.32.2
peerDependencies:
react: ">=16.9.0"
react-dom: ">=16.9.0"
- checksum: da373e9fda1984fdbe10b62abfc05f60ea0a771f6d2449ce248644b5e22fdf7046693a5721658c0ead5f2cd30ae6946a0697713f9e640fb51f0c1294020b8168
+ checksum: 72e80c8eb76c64df90d7cdb2d38f5f085f298cee09423fd7cefe3b5f9afeed92b325a52b150bbf7a86a3159ade77094daaf097b0781e0a7cb16429a46c05a30b
languageName: node
linkType: hard
-"rc-image@npm:~5.13.0":
- version: 5.13.0
- resolution: "rc-image@npm:5.13.0"
+"rc-image@npm:~7.5.1":
+ version: 7.5.1
+ resolution: "rc-image@npm:7.5.1"
dependencies:
"@babel/runtime": ^7.11.2
"@rc-component/portal": ^1.0.2
classnames: ^2.2.6
- rc-dialog: ~9.0.0
+ rc-dialog: ~9.3.4
rc-motion: ^2.6.2
- rc-util: ^5.0.6
+ rc-util: ^5.34.1
peerDependencies:
react: ">=16.9.0"
react-dom: ">=16.9.0"
- checksum: 720ecb531474f272366a1769a831f49cc6aeabcb5e0aaa3d2395b3cdc8a8b9b08733e1b92a37c229170fa3520433efbed2d03f573f35df3efffd32998690f68e
+ checksum: ec5ffd6ed34a2f1502a4374a622144c1554f83a376b87ffc54712ddd891c83e423cc0e5c3c228606ee0e1dc571df685d493c9e10582b352064b2073ec72c8d4b
languageName: node
linkType: hard
-"rc-input-number@npm:~7.3.9":
- version: 7.3.11
- resolution: "rc-input-number@npm:7.3.11"
+"rc-input-number@npm:~8.4.0":
+ version: 8.4.0
+ resolution: "rc-input-number@npm:8.4.0"
dependencies:
"@babel/runtime": ^7.10.1
+ "@rc-component/mini-decimal": ^1.0.1
classnames: ^2.2.5
- rc-util: ^5.23.0
+ rc-input: ~1.3.5
+ rc-util: ^5.28.0
peerDependencies:
react: ">=16.9.0"
react-dom: ">=16.9.0"
- checksum: 8555171aed72a277721a7d22cdfadc56585f20f9422ce55b0f505eaae43837586d85bd7ebc5dca7b6eec96cbd8798b622ffd03f0187464dbaf6d741a5c20ee7d
+ checksum: 00bb0b40c0f13747315790d1ec2b8707abee8388c1623dee5ebdf51cc93ae6441f200d19ecda5f85e44dd180d9e93dadf4cb8ce2e02c3a4db81f1e69d9b4dc04
languageName: node
linkType: hard
-"rc-input@npm:~0.1.4":
- version: 0.1.4
- resolution: "rc-input@npm:0.1.4"
+"rc-input@npm:~1.3.5, rc-input@npm:~1.3.6":
+ version: 1.3.6
+ resolution: "rc-input@npm:1.3.6"
dependencies:
"@babel/runtime": ^7.11.1
classnames: ^2.2.1
@@ -14478,45 +14399,46 @@ __metadata:
peerDependencies:
react: ">=16.0.0"
react-dom: ">=16.0.0"
- checksum: 1c1935856d7f991ec6f6f8d17945ad501ce956116fdd79b8fcbe1e265465a59b348ba61f1f90045ef14b24e93cc4963b87d5333b9b784f5f28407b6601e8570e
+ checksum: 4e9e7adedc16319980220df4ef802077781e1224c4510a02c78d67c6a834bf58d9508170ab8d375efe9dd186f9497ae07f7c1a997d84aa1bc978985fdf56aeda
languageName: node
linkType: hard
-"rc-mentions@npm:~1.13.1":
- version: 1.13.1
- resolution: "rc-mentions@npm:1.13.1"
+"rc-mentions@npm:~2.9.1":
+ version: 2.9.1
+ resolution: "rc-mentions@npm:2.9.1"
dependencies:
- "@babel/runtime": ^7.10.1
+ "@babel/runtime": ^7.22.5
+ "@rc-component/trigger": ^1.5.0
classnames: ^2.2.6
- rc-menu: ~9.8.0
- rc-textarea: ^0.4.0
- rc-trigger: ^5.0.4
- rc-util: ^5.22.5
+ rc-input: ~1.3.5
+ rc-menu: ~9.12.0
+ rc-textarea: ~1.5.0
+ rc-util: ^5.34.1
peerDependencies:
react: ">=16.9.0"
react-dom: ">=16.9.0"
- checksum: 7893c56f91a9ef60d70d607d0fb415c07398d35096a25488d49ea4829a56eda2c9cc0334af919330978e20fe85d39393caddbb52484f9bf39a80e78df4057b2e
+ checksum: f5b7ad6a3f674e259e243c12450f81ee7f69298a4cce8a4ef9a467622651f7452eebcfdf737e8587239d77a9f109aafafe5e547401ec806e3a2a14a9df20800e
languageName: node
linkType: hard
-"rc-menu@npm:~9.8.0":
- version: 9.8.2
- resolution: "rc-menu@npm:9.8.2"
+"rc-menu@npm:~9.12.0, rc-menu@npm:~9.12.2":
+ version: 9.12.2
+ resolution: "rc-menu@npm:9.12.2"
dependencies:
"@babel/runtime": ^7.10.1
+ "@rc-component/trigger": ^1.17.0
classnames: 2.x
rc-motion: ^2.4.3
- rc-overflow: ^1.2.8
- rc-trigger: ^5.1.2
+ rc-overflow: ^1.3.1
rc-util: ^5.27.0
peerDependencies:
react: ">=16.9.0"
react-dom: ">=16.9.0"
- checksum: cd8513fe329802e627785133784954e2745afde7cd4507dfcd7cdde933b087f93d9acb478b3e02a5cc30228ef7611002a269c9a64bfa5228b74eba63d3d37a05
+ checksum: 0db857a5e0819348f86a66a560e7bf0496a6e69ef88b96fe2fccd1616ff5989d20bb0c3d84bbec892483f9f29c9c210be1ead3b7f08c608dc7dce439b0637dd0
languageName: node
linkType: hard
-"rc-motion@npm:^2.0.0, rc-motion@npm:^2.0.1, rc-motion@npm:^2.2.0, rc-motion@npm:^2.3.0, rc-motion@npm:^2.3.4, rc-motion@npm:^2.4.3, rc-motion@npm:^2.4.4, rc-motion@npm:^2.6.1, rc-motion@npm:^2.6.2":
+"rc-motion@npm:^2.0.0, rc-motion@npm:^2.0.1, rc-motion@npm:^2.3.0, rc-motion@npm:^2.3.4, rc-motion@npm:^2.4.3, rc-motion@npm:^2.4.4, rc-motion@npm:^2.6.1, rc-motion@npm:^2.6.2":
version: 2.6.3
resolution: "rc-motion@npm:2.6.3"
dependencies:
@@ -14530,24 +14452,38 @@ __metadata:
languageName: node
linkType: hard
-"rc-notification@npm:~4.6.0":
- version: 4.6.1
- resolution: "rc-notification@npm:4.6.1"
+"rc-motion@npm:^2.9.0":
+ version: 2.9.0
+ resolution: "rc-motion@npm:2.9.0"
+ dependencies:
+ "@babel/runtime": ^7.11.1
+ classnames: ^2.2.1
+ rc-util: ^5.21.0
+ peerDependencies:
+ react: ">=16.9.0"
+ react-dom: ">=16.9.0"
+ checksum: 6c7c211a62896a2c443c43f27d13ec84c832884ec1860a40025f6270321e4e8c8a7abaf99d60a09d6e5cadc112e3d9787e0c58970eb69b0bb798eaa6be81dcf5
+ languageName: node
+ linkType: hard
+
+"rc-notification@npm:~5.3.0":
+ version: 5.3.0
+ resolution: "rc-notification@npm:5.3.0"
dependencies:
"@babel/runtime": ^7.10.1
classnames: 2.x
- rc-motion: ^2.2.0
+ rc-motion: ^2.9.0
rc-util: ^5.20.1
peerDependencies:
react: ">=16.9.0"
react-dom: ">=16.9.0"
- checksum: e953a85a6061103485db33f76b5c25907c273a03fd39be942b26eace33c83b42c26054d0d6f063d2239cc2d52462e9638c818be59da966ea18a74a0b168c4c36
+ checksum: 1e6bc146e687815d784e0b4c626a9af82435086bc02bb5e19827baa523e26440d6ed03b43de83a15e0272b83bebede3b67d61c4d4af2240ae7dcdd6604f0ef58
languageName: node
linkType: hard
-"rc-overflow@npm:^1.0.0, rc-overflow@npm:^1.2.8":
- version: 1.2.8
- resolution: "rc-overflow@npm:1.2.8"
+"rc-overflow@npm:^1.3.1":
+ version: 1.3.1
+ resolution: "rc-overflow@npm:1.3.1"
dependencies:
"@babel/runtime": ^7.11.1
classnames: ^2.2.1
@@ -14556,45 +14492,55 @@ __metadata:
peerDependencies:
react: ">=16.9.0"
react-dom: ">=16.9.0"
- checksum: f6df4d1f2baff7391b0ca981fe0f75aba975b1214dc15eba2ee07e4d0b02f19d89a7ac26d6da580cc90b758a8dc07fc69c7599297f38be91cb2d9b387816d3ce
+ checksum: 1573dcb2509634ca3eea8f45575fd80128b3da9395af64e2ecf0059a8cae6f29e07a8583935682b837f38db0d533b5cd68d75b4918a75f0d0cd10bdbf07db575
languageName: node
linkType: hard
-"rc-pagination@npm:~3.2.0":
- version: 3.2.0
- resolution: "rc-pagination@npm:3.2.0"
+"rc-pagination@npm:~3.7.0":
+ version: 3.7.0
+ resolution: "rc-pagination@npm:3.7.0"
dependencies:
"@babel/runtime": ^7.10.1
classnames: ^2.2.1
+ rc-util: ^5.32.2
peerDependencies:
react: ">=16.9.0"
react-dom: ">=16.9.0"
- checksum: deca480696346bbe729945e19fca2b1b50defebd9251ddcc821cc0aa6f58383e9f6fcc7fe4571f48299ba74f30a370687cc099e44e77e2d3d43d4b2d845f91e5
+ checksum: c10fabae34fbb89e72500575aec0ecb8d0e91d810eb46eed15a132416ed124ece8673171a395e120f56d4ab61296a9bfc104ce6465865e1266da6cc1b1580abf
languageName: node
linkType: hard
-"rc-picker@npm:~2.7.0":
- version: 2.7.0
- resolution: "rc-picker@npm:2.7.0"
+"rc-picker@npm:~3.14.6":
+ version: 3.14.6
+ resolution: "rc-picker@npm:3.14.6"
dependencies:
"@babel/runtime": ^7.10.1
+ "@rc-component/trigger": ^1.5.0
classnames: ^2.2.1
- date-fns: 2.x
- dayjs: 1.x
- moment: ^2.24.0
- rc-trigger: ^5.0.4
- rc-util: ^5.4.0
- shallowequal: ^1.1.0
+ rc-util: ^5.30.0
peerDependencies:
+ date-fns: ">= 2.x"
+ dayjs: ">= 1.x"
+ luxon: ">= 3.x"
+ moment: ">= 2.x"
react: ">=16.9.0"
react-dom: ">=16.9.0"
- checksum: a1a8212becf52a077c354a3ea195979bcc71ba3c267a88dae9764f996aec8ae81007a94bf83933be0bab62f74d467938a752ce867edb904888b3e6ab6b2c0aa3
+ peerDependenciesMeta:
+ date-fns:
+ optional: true
+ dayjs:
+ optional: true
+ luxon:
+ optional: true
+ moment:
+ optional: true
+ checksum: e87914c6ffbbcf760b56080d8bf504cf9323885378a6769abcf9a62bb1325f7a9d534c065a683ab1d30269a26a81ce11a008d01aacc800359e3c7a4fbda66e17
languageName: node
linkType: hard
-"rc-progress@npm:~3.4.1":
- version: 3.4.1
- resolution: "rc-progress@npm:3.4.1"
+"rc-progress@npm:~3.5.1":
+ version: 3.5.1
+ resolution: "rc-progress@npm:3.5.1"
dependencies:
"@babel/runtime": ^7.10.1
classnames: ^2.2.6
@@ -14602,13 +14548,13 @@ __metadata:
peerDependencies:
react: ">=16.9.0"
react-dom: ">=16.9.0"
- checksum: d4dce5231ea29bfa866935a59f05473711f9dfc944f95cc78b0fdcd1508a063983cc58973f54c2b20797f0b0f480c4a2b84aaa2ca185158c14800ec659163880
+ checksum: b0722a696396f985267e35e26f49c1c1bd6a17b4918eb93318fc36a7a5ffae9806932d4982a7da0d83349648ca85325b792003ec40240820fd6e00e0bc6f3c1d
languageName: node
linkType: hard
-"rc-rate@npm:~2.9.0":
- version: 2.9.2
- resolution: "rc-rate@npm:2.9.2"
+"rc-rate@npm:~2.12.0":
+ version: 2.12.0
+ resolution: "rc-rate@npm:2.12.0"
dependencies:
"@babel/runtime": ^7.10.1
classnames: ^2.2.5
@@ -14616,13 +14562,13 @@ __metadata:
peerDependencies:
react: ">=16.9.0"
react-dom: ">=16.9.0"
- checksum: 5a7528e4b4245a5090c78eeb248bb8af90843fb6e88105236c3e6b6c6a204c526f87969ee78129c9b7afe9612c69c8a85652714f53b14f9cf5933fda81b8f8fb
+ checksum: aa41bb6b89a53cb69641123e8e3dfe9e6bb3092fb102b80eb251d32e18c5f7ad9a6f47c7c848ece91eee68f8df5b90719e026c14a148d4645aecf3489727bed5
languageName: node
linkType: hard
-"rc-resize-observer@npm:^1.0.0, rc-resize-observer@npm:^1.1.0, rc-resize-observer@npm:^1.2.0":
- version: 1.3.0
- resolution: "rc-resize-observer@npm:1.3.0"
+"rc-resize-observer@npm:^1.0.0, rc-resize-observer@npm:^1.1.0, rc-resize-observer@npm:^1.3.1":
+ version: 1.3.1
+ resolution: "rc-resize-observer@npm:1.3.1"
dependencies:
"@babel/runtime": ^7.20.7
classnames: ^2.2.1
@@ -14631,13 +14577,28 @@ __metadata:
peerDependencies:
react: ">=16.9.0"
react-dom: ">=16.9.0"
- checksum: babf30a3a5e0dce1e294f7e9757b3283ee56ebb4599b8da35b44cc5a72ae03169eda17543fc9d82094e885060367d875d9f3b3d0f23649a82946f861259ec162
+ checksum: cc952e5d3071543e990103ea64b20310e3a09c950a473bf89a3a7e6063bd060c6c041f0333085640676d176c7edd58676a3b3d64dfa17461ea6f3a62f79c4d65
languageName: node
linkType: hard
-"rc-segmented@npm:~2.1.0":
- version: 2.1.2
- resolution: "rc-segmented@npm:2.1.2"
+"rc-resize-observer@npm:^1.4.0":
+ version: 1.4.0
+ resolution: "rc-resize-observer@npm:1.4.0"
+ dependencies:
+ "@babel/runtime": ^7.20.7
+ classnames: ^2.2.1
+ rc-util: ^5.38.0
+ resize-observer-polyfill: ^1.5.1
+ peerDependencies:
+ react: ">=16.9.0"
+ react-dom: ">=16.9.0"
+ checksum: e6ee24fd887ea440b07e0326c3fc60b240274fa43ea87cf8f86ca9e0741a2c817e47a182f336b00d7246b4fd21b3536f4d3aacd7f0db5ae673f106630cd348ba
+ languageName: node
+ linkType: hard
+
+"rc-segmented@npm:~2.2.2":
+ version: 2.2.2
+ resolution: "rc-segmented@npm:2.2.2"
dependencies:
"@babel/runtime": ^7.11.1
classnames: ^2.2.1
@@ -14646,46 +14607,45 @@ __metadata:
peerDependencies:
react: ">=16.0.0"
react-dom: ">=16.0.0"
- checksum: 9ebba682e70b480cacea79985b6c3fcd024d564a3105a9d48c6a0481a87002f8382987195014ce00e37d455e84dbd0def05d24e3671a52bd89aeeec43c82a91a
+ checksum: 018325f1fe183dec98a358c8180ea8483ee8e593b2fa72767b765b9f200aed4054eea6257f93f48a456324cb082fd8b8e38a9929cb71eb37ac63357ad9d89f04
languageName: node
linkType: hard
-"rc-select@npm:~14.1.0, rc-select@npm:~14.1.13":
- version: 14.1.16
- resolution: "rc-select@npm:14.1.16"
+"rc-select@npm:~14.10.0":
+ version: 14.10.0
+ resolution: "rc-select@npm:14.10.0"
dependencies:
"@babel/runtime": ^7.10.1
+ "@rc-component/trigger": ^1.5.0
classnames: 2.x
rc-motion: ^2.0.1
- rc-overflow: ^1.0.0
- rc-trigger: ^5.0.4
+ rc-overflow: ^1.3.1
rc-util: ^5.16.1
- rc-virtual-list: ^3.2.0
+ rc-virtual-list: ^3.5.2
peerDependencies:
react: "*"
react-dom: "*"
- checksum: 545d8a190f372a3fa553f6d42c9959b44868528a1abd4013af439cc87fa4a98cd755c242a4a64e40b05decaf41c71eb1ebd63e5253cb0c84ea3905d19d27e7d4
+ checksum: 1f922000e64338b7c43ba0e67429e482291f4e8d9e2d1977e0414171ff388050de4802c780baaa4e48c299b025c2334227382d3c47ca1f2888dbef83c73ab43e
languageName: node
linkType: hard
-"rc-slider@npm:~10.0.0":
- version: 10.0.1
- resolution: "rc-slider@npm:10.0.1"
+"rc-slider@npm:~10.4.0":
+ version: 10.4.0
+ resolution: "rc-slider@npm:10.4.0"
dependencies:
"@babel/runtime": ^7.10.1
classnames: ^2.2.5
- rc-util: ^5.18.1
- shallowequal: ^1.1.0
+ rc-util: ^5.27.0
peerDependencies:
react: ">=16.9.0"
react-dom: ">=16.9.0"
- checksum: 803f0cc39d43897c0b24549e87232a668d26ff5b0e14b528fd454aa455cdf96ebc60654832c51bb1a6c7b7594ca39017d6c96b3237662471efb863f1723e3d9c
+ checksum: 713cfcf0bc1f35b70db3f233ed76f84e3c43c39700631db4932aff760289c8174076ecd5ec8a6184d056beda28b6b2e08b7add98edebf1ba1025a392ebff9280
languageName: node
linkType: hard
-"rc-steps@npm:~5.0.0-alpha.2":
- version: 5.0.0
- resolution: "rc-steps@npm:5.0.0"
+"rc-steps@npm:~6.0.1":
+ version: 6.0.1
+ resolution: "rc-steps@npm:6.0.1"
dependencies:
"@babel/runtime": ^7.16.7
classnames: ^2.2.3
@@ -14693,166 +14653,244 @@ __metadata:
peerDependencies:
react: ">=16.9.0"
react-dom: ">=16.9.0"
- checksum: b58507b807d648a425b339fbbd49472da0b7213e5464cd021d2cbcb3273818e4bf8d6e6b2d5dda7608160887e156a14f97585d3029ce9f501db9444bcb365618
+ checksum: b75d6667df6b0c020dc13a595b5c1c9a739ec569242e600d5950f3a8240249b845ad715a3253e658fe02b0ac904a55a0603bb11702f262a3159835b269b9de75
languageName: node
linkType: hard
-"rc-switch@npm:~3.2.0":
- version: 3.2.2
- resolution: "rc-switch@npm:3.2.2"
+"rc-switch@npm:~4.1.0":
+ version: 4.1.0
+ resolution: "rc-switch@npm:4.1.0"
dependencies:
- "@babel/runtime": ^7.10.1
+ "@babel/runtime": ^7.21.0
classnames: ^2.2.1
- rc-util: ^5.0.1
+ rc-util: ^5.30.0
peerDependencies:
react: ">=16.9.0"
react-dom: ">=16.9.0"
- checksum: c0242385fa93a9aa5cc65500cf6f83a673ff91caf70eed8c1335af2cd695aafda2c4c972da0daae8ea26478e314b9a9212074364d44110ff9b453c0d3debb851
+ checksum: eed3caa569de0d5451ebb5afab045df505674c266a995b3527cb15d67d22df9abc715def3ccbf8e34ecf4058ffa14054f35578ab74240e6f2cdaa6fdf35e2253
languageName: node
linkType: hard
-"rc-table@npm:~7.26.0":
- version: 7.26.0
- resolution: "rc-table@npm:7.26.0"
+"rc-table@npm:~7.36.0":
+ version: 7.36.0
+ resolution: "rc-table@npm:7.36.0"
dependencies:
"@babel/runtime": ^7.10.1
+ "@rc-component/context": ^1.4.0
classnames: ^2.2.5
rc-resize-observer: ^1.1.0
- rc-util: ^5.22.5
- shallowequal: ^1.1.0
+ rc-util: ^5.37.0
+ rc-virtual-list: ^3.11.1
peerDependencies:
react: ">=16.9.0"
react-dom: ">=16.9.0"
- checksum: 78970d0140203d57541bf5952c542ca7448608bbd29da949e51007c4b3f94570a35b4e95b35ce4d49954c6c88a9e44d2f36f8f4015bfe1b97e926a381141d251
+ checksum: 4db1fbd348bd2ebde767f87e047abd07c60a2ddd054f74bf3193a6bf789714512c5aca36e946ee7491d08b202b625a652c7ac9f48d213f034816a6ad6d8dcffe
languageName: node
linkType: hard
-"rc-tabs@npm:~12.5.6":
- version: 12.5.6
- resolution: "rc-tabs@npm:12.5.6"
+"rc-tabs@npm:~12.13.1":
+ version: 12.13.1
+ resolution: "rc-tabs@npm:12.13.1"
dependencies:
"@babel/runtime": ^7.11.2
classnames: 2.x
- rc-dropdown: ~4.0.0
- rc-menu: ~9.8.0
+ rc-dropdown: ~4.1.0
+ rc-menu: ~9.12.0
rc-motion: ^2.6.2
rc-resize-observer: ^1.0.0
- rc-util: ^5.16.0
+ rc-util: ^5.34.1
peerDependencies:
react: ">=16.9.0"
react-dom: ">=16.9.0"
- checksum: ca9457da3c1398f5b48c741e5afdffd860b066f88bd230d43bfb37b4003612a69bd20a016ab43095936dff73a07a83220593c7fbfd0c495cecc6ca74663fdf9e
+ checksum: c0a204f288ca6a37f5a72646a0443d13aee4d427d88e1866718681fe2c4fad3dc72ff729acc09191e227f9f04975f9452f465f2501c052ccf285283a78b5bd64
languageName: node
linkType: hard
-"rc-textarea@npm:^0.4.0, rc-textarea@npm:~0.4.5":
- version: 0.4.7
- resolution: "rc-textarea@npm:0.4.7"
+"rc-textarea@npm:~1.5.0, rc-textarea@npm:~1.5.3":
+ version: 1.5.3
+ resolution: "rc-textarea@npm:1.5.3"
dependencies:
"@babel/runtime": ^7.10.1
classnames: ^2.2.1
+ rc-input: ~1.3.5
rc-resize-observer: ^1.0.0
- rc-util: ^5.24.4
- shallowequal: ^1.1.0
+ rc-util: ^5.27.0
peerDependencies:
react: ">=16.9.0"
react-dom: ">=16.9.0"
- checksum: 3e682c81aeca9da03b86a18c6a4c3f580d8250fb3042f32de9fb05aad8b64522a88a02b40b99ca8dd9fd8d6869edf5832eee8537b8af0f1b662f63824577f4ce
+ checksum: 44ca7e5b62938c18ef57f80f9ed08dcadc6b741dd420a53b1afcbd3d7c23d72bc5335b28e17fa70782f699cd9d1108f8be56db3e326c6abd364a1cbe8c480b43
languageName: node
linkType: hard
-"rc-tooltip@npm:~5.2.0":
- version: 5.2.2
- resolution: "rc-tooltip@npm:5.2.2"
+"rc-tooltip@npm:~6.1.2":
+ version: 6.1.2
+ resolution: "rc-tooltip@npm:6.1.2"
dependencies:
"@babel/runtime": ^7.11.2
+ "@rc-component/trigger": ^1.18.0
classnames: ^2.3.1
- rc-trigger: ^5.0.0
peerDependencies:
react: ">=16.9.0"
react-dom: ">=16.9.0"
- checksum: df6a59096876becf930df0347cfe6379cde9647f338a333dd0aae99039bf45e72db866f03ab6b5fd5ce616b074ec888f50e61ebe0f8d2a135c2617595dbf0583
+ checksum: 0450fe0bac954fe13cc1117cef1e632ec65e5fbb7bc9d31069925e7df026ff39211cad95509ec93500541bf55e70efaf0ee99694fdd18deac7e804b1b3f72240
languageName: node
linkType: hard
-"rc-tree-select@npm:~5.5.0":
- version: 5.5.5
- resolution: "rc-tree-select@npm:5.5.5"
+"rc-tree-select@npm:~5.15.0":
+ version: 5.15.0
+ resolution: "rc-tree-select@npm:5.15.0"
dependencies:
"@babel/runtime": ^7.10.1
classnames: 2.x
- rc-select: ~14.1.0
- rc-tree: ~5.7.0
+ rc-select: ~14.10.0
+ rc-tree: ~5.8.1
rc-util: ^5.16.1
peerDependencies:
react: "*"
react-dom: "*"
- checksum: 6d7de4d9b80583b3bd39be0c8bad5138a62770805048da9fd177eb3f21acc7d02cd68ea64d9ca3accf8bfefa41b0db84c1ac50a3637c7b3c97060d7d3e9d60e5
+ checksum: 34ed86e65a5ab0a3b80f25ccced3c1d4641621638cf4d5953af8420306a513e93194a9e30f5e689e4e4e8b44f1461b82b5443f71d72f6ca72e1f612487e09d87
languageName: node
linkType: hard
-"rc-tree@npm:~5.7.0":
- version: 5.7.2
- resolution: "rc-tree@npm:5.7.2"
+"rc-tree@npm:~5.8.1, rc-tree@npm:~5.8.2":
+ version: 5.8.2
+ resolution: "rc-tree@npm:5.8.2"
dependencies:
"@babel/runtime": ^7.10.1
classnames: 2.x
rc-motion: ^2.0.1
rc-util: ^5.16.1
- rc-virtual-list: ^3.4.8
+ rc-virtual-list: ^3.5.1
peerDependencies:
react: "*"
react-dom: "*"
- checksum: 9b465e1937fdd59987d2e69587b10c3d1415072ed6cd8e953d8975c4d31ddfa3f963d6d824b6d5017bd3a4331d9a0af029886a484af70a861ddda02dcfcb964c
+ checksum: 74802b2e670fd6696e294ba6eeb20381feab5704e8f92de981725e56b00070c87ef0c2ece2846566715ee7420878743cd22d3443235732282400b6e475ecff36
languageName: node
linkType: hard
-"rc-trigger@npm:^5.0.0, rc-trigger@npm:^5.0.4, rc-trigger@npm:^5.1.2, rc-trigger@npm:^5.2.10, rc-trigger@npm:^5.3.1":
- version: 5.3.4
- resolution: "rc-trigger@npm:5.3.4"
+"rc-upload@npm:~4.3.5":
+ version: 4.3.5
+ resolution: "rc-upload@npm:4.3.5"
dependencies:
"@babel/runtime": ^7.18.3
- classnames: ^2.2.6
- rc-align: ^4.0.0
- rc-motion: ^2.0.0
- rc-util: ^5.19.2
+ classnames: ^2.2.5
+ rc-util: ^5.2.0
peerDependencies:
react: ">=16.9.0"
react-dom: ">=16.9.0"
- checksum: 6ca7694a4cf064040b5e0fd9b4629b0e0a19ebb29c4eb5614ee9eb22b4193e21909171fd95e48be73a94e44f249cb9616d7670b696164620b722d3de6f280017
+ checksum: 00758b3f34d5850a37cba8e1b4d7c5e2e60c8bd21e44b42c4ac2fe5f641575464e4209d7b9bdbdab70e46ff55705f5be71b1df7f13bbe15fd5950e895474c0cd
languageName: node
linkType: hard
-"rc-upload@npm:~4.3.0":
- version: 4.3.4
- resolution: "rc-upload@npm:4.3.4"
+"rc-util@npm:^5.0.1, rc-util@npm:^5.15.0, rc-util@npm:^5.16.1, rc-util@npm:^5.17.0, rc-util@npm:^5.18.1, rc-util@npm:^5.19.2, rc-util@npm:^5.2.0, rc-util@npm:^5.20.1, rc-util@npm:^5.21.0, rc-util@npm:^5.24.4, rc-util@npm:^5.26.0, rc-util@npm:^5.27.0":
+ version: 5.28.0
+ resolution: "rc-util@npm:5.28.0"
dependencies:
"@babel/runtime": ^7.18.3
- classnames: ^2.2.5
- rc-util: ^5.2.0
+ react-is: ^16.12.0
peerDependencies:
react: ">=16.9.0"
react-dom: ">=16.9.0"
- checksum: 59ddf31a58ce716d1ace506b1c3e36744895c24c683a17185517dab68dfbb1cf158f57ce14a8f0899e85b2924bfa0d82587771939225ea21a41b907f91779afa
+ checksum: e60424c37dad7575bb2429e266a81f96003701d719d1fb40128b42ed1c6972896cec09ece8857b36ce9ac74ba95aa2d0a9bdc0609894ba1b3c12c15504a1a886
languageName: node
linkType: hard
-"rc-util@npm:^5.0.1, rc-util@npm:^5.0.6, rc-util@npm:^5.15.0, rc-util@npm:^5.16.0, rc-util@npm:^5.16.1, rc-util@npm:^5.17.0, rc-util@npm:^5.18.1, rc-util@npm:^5.19.2, rc-util@npm:^5.2.0, rc-util@npm:^5.2.1, rc-util@npm:^5.20.1, rc-util@npm:^5.21.0, rc-util@npm:^5.21.2, rc-util@npm:^5.22.5, rc-util@npm:^5.23.0, rc-util@npm:^5.24.4, rc-util@npm:^5.26.0, rc-util@npm:^5.27.0, rc-util@npm:^5.4.0, rc-util@npm:^5.6.1, rc-util@npm:^5.8.0, rc-util@npm:^5.9.4":
- version: 5.27.2
- resolution: "rc-util@npm:5.27.2"
+"rc-util@npm:^5.25.2, rc-util@npm:^5.29.2, rc-util@npm:^5.30.0":
+ version: 5.30.0
+ resolution: "rc-util@npm:5.30.0"
dependencies:
"@babel/runtime": ^7.18.3
react-is: ^16.12.0
peerDependencies:
react: ">=16.9.0"
react-dom: ">=16.9.0"
- checksum: 2d19bac2670bf546225f12e9b7f5b578233ec53cfca0071eaca53d4b056c10fe92b36d4148f0592f0cdc65ab3067c81f9cd8456769ff0e00c1b03210d40c8f19
+ checksum: d7bf508bd3236cbb2abebbf16d271c50ab05be12cd3be46981979608b0b6d304735cc081650ab2f967f99a144c23189a6f682d52956c0eb4b6e4f41064b8a4ae
languageName: node
linkType: hard
-"rc-virtual-list@npm:^3.2.0, rc-virtual-list@npm:^3.4.8":
- version: 3.4.13
- resolution: "rc-virtual-list@npm:3.4.13"
+"rc-util@npm:^5.28.0, rc-util@npm:^5.34.1":
+ version: 5.34.1
+ resolution: "rc-util@npm:5.34.1"
+ dependencies:
+ "@babel/runtime": ^7.18.3
+ react-is: ^16.12.0
+ peerDependencies:
+ react: ">=16.9.0"
+ react-dom: ">=16.9.0"
+ checksum: ef4f0834db975ff77b1940c32f7ab75e201e06e16218dfc993066e994a0199330f433ab8587ab0a49101aa94ac009f8d553e3e8818185d9b6889e62791c77a16
+ languageName: node
+ linkType: hard
+
+"rc-util@npm:^5.31.1":
+ version: 5.33.1
+ resolution: "rc-util@npm:5.33.1"
+ dependencies:
+ "@babel/runtime": ^7.18.3
+ react-is: ^16.12.0
+ peerDependencies:
+ react: ">=16.9.0"
+ react-dom: ">=16.9.0"
+ checksum: 5b99edb25e9348be33976c2b83bf1d9b52558824c25f36b5e88ba23a215df3bdeb51a79ca196bcf68f8f05cd9165f6b7fd24cf2d052efb47d4bb02a48b54db89
+ languageName: node
+ linkType: hard
+
+"rc-util@npm:^5.32.2":
+ version: 5.32.3
+ resolution: "rc-util@npm:5.32.3"
+ dependencies:
+ "@babel/runtime": ^7.18.3
+ react-is: ^16.12.0
+ peerDependencies:
+ react: ">=16.9.0"
+ react-dom: ">=16.9.0"
+ checksum: ecaa34134e7bab618a46dbf953090887e9b3a5a3c3a3ef13084d147827693607c50bd73000bf8d8ec37434e716c608e26cca4e7403a2ead0d83240535cc3a51a
+ languageName: node
+ linkType: hard
+
+"rc-util@npm:^5.35.0":
+ version: 5.35.0
+ resolution: "rc-util@npm:5.35.0"
+ dependencies:
+ "@babel/runtime": ^7.18.3
+ react-is: ^16.12.0
+ peerDependencies:
+ react: ">=16.9.0"
+ react-dom: ">=16.9.0"
+ checksum: 8e99225c7d964d0be7b011e1b945822673f83437098bee5871d45d49531ac3d08128ddcaf0c0b503aad26feeced15a455082de179dd8c546be0f0281d8e7c176
+ languageName: node
+ linkType: hard
+
+"rc-util@npm:^5.36.0, rc-util@npm:^5.37.0, rc-util@npm:^5.38.0, rc-util@npm:^5.38.1":
+ version: 5.38.1
+ resolution: "rc-util@npm:5.38.1"
+ dependencies:
+ "@babel/runtime": ^7.18.3
+ react-is: ^18.2.0
+ peerDependencies:
+ react: ">=16.9.0"
+ react-dom: ">=16.9.0"
+ checksum: 40d0411fb5d6b0a187e718ff16c18f3d68eae3d7e4def43a9a9b2690b89cfce639077a69d683aa01302f8132394dd633baf76b07e5a3b8438fb706b1abb31937
+ languageName: node
+ linkType: hard
+
+"rc-virtual-list@npm:^3.11.1":
+ version: 3.11.3
+ resolution: "rc-virtual-list@npm:3.11.3"
+ dependencies:
+ "@babel/runtime": ^7.20.0
+ classnames: ^2.2.6
+ rc-resize-observer: ^1.0.0
+ rc-util: ^5.36.0
+ peerDependencies:
+ react: "*"
+ react-dom: "*"
+ checksum: 488661f158de37ace5ed0d7543fe4ed19e0145cc59f3b842f9c1ff5dfda687240620ba59bb44ec9425c5703c8ac9683449b3012722ca7da5e0a585ce2104629b
+ languageName: node
+ linkType: hard
+
+"rc-virtual-list@npm:^3.5.1, rc-virtual-list@npm:^3.5.2":
+ version: 3.5.2
+ resolution: "rc-virtual-list@npm:3.5.2"
dependencies:
"@babel/runtime": ^7.20.0
classnames: ^2.2.6
@@ -14861,7 +14899,7 @@ __metadata:
peerDependencies:
react: "*"
react-dom: "*"
- checksum: 590baca20aa209bdc7038c4cdbedef78100e8f8762966b8ae556d0c7154ce8a4f26737a5bd59580ee1ed446c79a8eb627e3fb003e1ee0de38f1bb9a7b3cd7e78
+ checksum: d0ea5bc20bd54751220422442c6ff9c670fbe412b200a7739ac635212d3f0fd74863c85ed0532a9d65cf0e0e09a752c3ee65ed7233327529ac502aca118375a2
languageName: node
linkType: hard
@@ -14991,12 +15029,12 @@ __metadata:
languageName: node
linkType: hard
-"react-insta-stories@npm:^2.3.0":
- version: 2.4.2
- resolution: "react-insta-stories@npm:2.4.2"
+"react-insta-stories@npm:^2.6.0":
+ version: 2.6.0
+ resolution: "react-insta-stories@npm:2.6.0"
peerDependencies:
- react: ^16.8.2 || 17.x || 18.x
- checksum: 544a5405c2f6b5079ebdf37984ec8c59508ce072dbaeb9a1bc2c5d77111bb80dc85a358764c7430d8c66f2bfa626647e75d612f2f1c35dcf3f80f1e1a288b6dd
+ react: ">=16.8.2"
+ checksum: 7729cec2ba5d4a7458477c3a0aeddc51fd8ca530d731b63324661bb679b574a2d25ce54b251203148f140a4551d873b9f1c00b3beb320cb841b7a8c5f9d685c6
languageName: node
linkType: hard
@@ -15014,6 +15052,13 @@ __metadata:
languageName: node
linkType: hard
+"react-is@npm:^18.2.0":
+ version: 18.2.0
+ resolution: "react-is@npm:18.2.0"
+ checksum: e72d0ba81b5922759e4aff17e0252bd29988f9642ed817f56b25a3e217e13eea8a7f2322af99a06edb779da12d5d636e9fda473d620df9a3da0df2a74141d53e
+ languageName: node
+ linkType: hard
+
"react-leaflet@npm:next":
version: 4.0.0-beta.1
resolution: "react-leaflet@npm:4.0.0-beta.1"
@@ -15027,19 +15072,19 @@ __metadata:
languageName: node
linkType: hard
-"react-phone-number-input@npm:^3.2.17":
- version: 3.2.18
- resolution: "react-phone-number-input@npm:3.2.18"
+"react-phone-number-input@npm:^3.3.7":
+ version: 3.3.7
+ resolution: "react-phone-number-input@npm:3.3.7"
dependencies:
classnames: ^2.3.1
country-flag-icons: ^1.5.4
input-format: ^0.3.8
- libphonenumber-js: ^1.10.19
+ libphonenumber-js: ^1.10.48
prop-types: ^15.8.1
peerDependencies:
react: ">=16.8"
react-dom: ">=16.8"
- checksum: baf12a74e85726754ffbeb55a3e0d9acd8a43f9d6831fa145c9ecdbbcdf788bae23eb66718256837f6e86e109d9822189e9ea81a82361dc9621282392318370c
+ checksum: 93e6bc232531355e32024d43730cceb8992fdb48342593586032b6323dd86f1f11c2398149b90176c1be6d43a55baa7f7c51f819f2fe05116df092bcf14231c1
languageName: node
linkType: hard
@@ -15199,22 +15244,6 @@ __metadata:
languageName: node
linkType: hard
-"react-simple-maps@npm:^2.3.0":
- version: 2.3.0
- resolution: "react-simple-maps@npm:2.3.0"
- dependencies:
- d3-geo: ^2.0.1
- d3-selection: ^2.0.0
- d3-zoom: ^2.0.0
- topojson-client: ^3.1.0
- peerDependencies:
- prop-types: ^15.7.2
- react: ^16.8.0 || 17.x
- react-dom: ^16.8.0 || 17.x
- checksum: 4fa6286da01de55c74962cf27c7319833e9e0cf33f8365afcd66a3547060343265514657961e19aa8a292a84c8418c83321e3b307f9020546a07bd7616278799
- languageName: node
- linkType: hard
-
"react-slick@npm:^0.28.1":
version: 0.28.1
resolution: "react-slick@npm:0.28.1"
@@ -15386,6 +15415,13 @@ __metadata:
languageName: node
linkType: hard
+"regenerator-runtime@npm:^0.14.0":
+ version: 0.14.0
+ resolution: "regenerator-runtime@npm:0.14.0"
+ checksum: 1c977ad82a82a4412e4f639d65d22be376d3ebdd30da2c003eeafdaaacd03fc00c2320f18120007ee700900979284fc78a9f00da7fb593f6e6eeebc673fba9a3
+ languageName: node
+ linkType: hard
+
"regenerator-transform@npm:^0.15.1":
version: 0.15.1
resolution: "regenerator-transform@npm:0.15.1"
@@ -15997,7 +16033,7 @@ __metadata:
languageName: node
linkType: hard
-"sax@npm:^1.2.4, sax@npm:~1.2.4":
+"sax@npm:~1.2.4":
version: 1.2.4
resolution: "sax@npm:1.2.4"
checksum: d3df7d32b897a2c2f28e941f732c71ba90e27c24f62ee918bd4d9a8cfb3553f2f81e5493c7f0be94a11c1911b643a9108f231dd6f60df3fa9586b5d2e3e9e1fe
@@ -16055,12 +16091,12 @@ __metadata:
languageName: node
linkType: hard
-"scroll-into-view-if-needed@npm:^2.2.25":
- version: 2.2.31
- resolution: "scroll-into-view-if-needed@npm:2.2.31"
+"scroll-into-view-if-needed@npm:^3.1.0":
+ version: 3.1.0
+ resolution: "scroll-into-view-if-needed@npm:3.1.0"
dependencies:
- compute-scroll-into-view: ^1.0.20
- checksum: 93b28f3723a462245b40d4120c40c542c8449473e2b157a5f8e18f04d95d66cd35249d96c625e8a440a56891f7d8905b1d026c690bdda07fcfb4f1a48d643ad1
+ compute-scroll-into-view: ^3.0.2
+ checksum: edc0f68dc170d0c153ce4ae2929cbdfaf3426d1fc842b67d5f092c5ec38fbb8408e6cb8467f86d8dfb23de3f77a2f2a9e79cbf80bc49b35a39f3092e18b4c3d5
languageName: node
linkType: hard
@@ -16534,15 +16570,6 @@ __metadata:
languageName: node
linkType: hard
-"source-map@npm:0.4.x":
- version: 0.4.4
- resolution: "source-map@npm:0.4.4"
- dependencies:
- amdefine: ">=0.0.4"
- checksum: b31992fcb4a2a6c335617f187bd36f392896dfcc111830ebdb8b716923cf6554b665833b975fc998bdf3a63881b2c8b4c5c34fda0280357b8c18fe6aa5d148ea
- languageName: node
- linkType: hard
-
"source-map@npm:0.6.1, source-map@npm:^0.6.0, source-map@npm:^0.6.1, source-map@npm:~0.6.0, source-map@npm:~0.6.1":
version: 0.6.1
resolution: "source-map@npm:0.6.1"
@@ -17142,6 +17169,13 @@ __metadata:
languageName: node
linkType: hard
+"stylis@npm:^4.0.13":
+ version: 4.1.3
+ resolution: "stylis@npm:4.1.3"
+ checksum: d04dbffcb9bf2c5ca8d8dc09534203c75df3bf711d33973ea22038a99cc475412a350b661ebd99cbc01daa50d7eedcf0d130d121800eb7318759a197023442a6
+ languageName: node
+ linkType: hard
+
"sugarss@npm:^2.0.0":
version: 2.0.0
resolution: "sugarss@npm:2.0.0"
@@ -17416,6 +17450,13 @@ __metadata:
languageName: node
linkType: hard
+"throttle-debounce@npm:^5.0.0":
+ version: 5.0.0
+ resolution: "throttle-debounce@npm:5.0.0"
+ checksum: aa8bf25828b4f8645ce863589de05d6807ea3debc147ce7d89624638ff8a16792d6d0baa0f8a32a260f0b163444d74020c6087b713ae561fde594b97b6e51f28
+ languageName: node
+ linkType: hard
+
"through2@npm:^2.0.0":
version: 2.0.5
resolution: "through2@npm:2.0.5"
@@ -17531,19 +17572,6 @@ __metadata:
languageName: node
linkType: hard
-"topojson-client@npm:^3.1.0":
- version: 3.1.0
- resolution: "topojson-client@npm:3.1.0"
- dependencies:
- commander: 2
- bin:
- topo2geo: bin/topo2geo
- topomerge: bin/topomerge
- topoquantize: bin/topoquantize
- checksum: 8c029a4f18324ace0b8b55dd90edbd40c9e3c6de18bafbb5da37ca20ebf20e26fbd4420891acb3c2c264e214185f7557871f5651a9eee517028663be98d836de
- languageName: node
- linkType: hard
-
"totalist@npm:^1.0.0":
version: 1.1.0
resolution: "totalist@npm:1.1.0"
@@ -17667,7 +17695,7 @@ __metadata:
languageName: node
linkType: hard
-"tslib@npm:^2.0.3, tslib@npm:^2.1.0, tslib@npm:^2.2.0, tslib@npm:^2.3.0":
+"tslib@npm:^2.0.3, tslib@npm:^2.1.0, tslib@npm:^2.2.0":
version: 2.5.0
resolution: "tslib@npm:2.5.0"
checksum: ae3ed5f9ce29932d049908ebfdf21b3a003a85653a9a140d614da6b767a93ef94f460e52c3d787f0e4f383546981713f165037dc2274df212ea9f8a4541004e1