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 ( - + ); }; - -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')} - + Pigeon! diff --git a/src/pages/maps/ReactSimpleMapsPage/ReactSimpleMapsPage.tsx b/src/pages/maps/ReactSimpleMapsPage/ReactSimpleMapsPage.tsx deleted file mode 100644 index e3bdd4eb1..000000000 --- a/src/pages/maps/ReactSimpleMapsPage/ReactSimpleMapsPage.tsx +++ /dev/null @@ -1,89 +0,0 @@ -import React from 'react'; - -import { useTranslation } from 'react-i18next'; -import { ComposableMap, Geographies, Geography, Marker } from 'react-simple-maps'; -import styled from 'styled-components'; - -import { PageTitle } from '@app/components/common/PageTitle/PageTitle'; -import { MapsCard } from '@app/pages/maps/maps.styles'; - -const geoUrl = 'https://raw.githubusercontent.com/deldersveld/topojson/master/world-countries.json'; - -const markers = [ - { - markerOffset: -30, - name: 'Buenos Aires', - coordinates: [-58.3816, -34.6037], - }, - { markerOffset: 15, name: 'La Paz', coordinates: [-68.1193, -16.4897] }, - { markerOffset: 15, name: 'Brasilia', coordinates: [-47.8825, -15.7942] }, - { markerOffset: 15, name: 'Santiago', coordinates: [-70.6693, -33.4489] }, - { markerOffset: 15, name: 'Bogota', coordinates: [-74.0721, 4.711] }, - { markerOffset: 15, name: 'Quito', coordinates: [-78.4678, -0.1807] }, - { markerOffset: -30, name: 'Georgetown', coordinates: [-58.1551, 6.8013] }, - { markerOffset: -30, name: 'Asuncion', coordinates: [-57.5759, -25.2637] }, - { markerOffset: 15, name: 'Paramaribo', coordinates: [-55.2038, 5.852] }, - { markerOffset: 15, name: 'Montevideo', coordinates: [-56.1645, -34.9011] }, - { markerOffset: 15, name: 'Caracas', coordinates: [-66.9036, 10.4806] }, - { markerOffset: 15, name: 'Lima', coordinates: [-77.0428, -12.0464] }, -]; - -const ReactSimpleMaps: React.FC = () => { - const { t } = useTranslation(); - - return ( - <> - {t('common.reactSimpleMaps')} - - - - {({ geographies }) => - geographies.map((geo) => ( - - )) - } - - {markers.map(({ name, coordinates, markerOffset }) => ( - - - - - - - {name} - - - ))} - - - - ); -}; - -export default ReactSimpleMaps; - -export const MapsCardOverride = styled(MapsCard)` - height: 100%; -`; diff --git a/src/pages/uiComponentsPages/ButtonsPage.tsx b/src/pages/uiComponentsPages/ButtonsPage.tsx index f0c977808..f5af3f5e0 100644 --- a/src/pages/uiComponentsPages/ButtonsPage.tsx +++ b/src/pages/uiComponentsPages/ButtonsPage.tsx @@ -41,7 +41,7 @@ const ButtonsPage: React.FC = () => { {t('buttons.primary')} {t('buttons.default')} - {t('buttons.ghost')} + {t('buttons.ghost')} {t('buttons.dashed')} {t('buttons.text')} {t('buttons.link')} @@ -53,13 +53,13 @@ const ButtonsPage: React.FC = () => { {t('common.error')} - + {t('buttons.small')} - + {t('buttons.default')} - + {t('buttons.large')} @@ -109,7 +109,7 @@ const ButtonsPage: React.FC = () => { {t('buttons.default')} - + {t('buttons.ghost')} @@ -146,7 +146,7 @@ const ButtonsPage: React.FC = () => { - } size="large" /> + } size="large" />
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