From a03d43294b1bc571d9161d92934017d7cf006e0d Mon Sep 17 00:00:00 2001 From: Alexandr Buhlak <48954743+saha80@users.noreply.github.com> Date: Fri, 10 Mar 2023 21:02:37 +0200 Subject: [PATCH 01/81] bump antd version --- package.json | 13 +- public/index.html | 1 - src/App.tsx | 13 +- .../newsFeed/NewsFilter/NewsFilter.styles.ts | 4 +- .../common/BaseButton/BaseButton.styles.ts | 75 ++- .../common/BaseCalendar/BaseCalendar.tsx | 2 + .../common/BaseCard/BaseCard.styles.ts | 3 + src/components/common/BaseFeed/BaseFeed.tsx | 1 + .../components/BaseFormItem/BaseFormItem.ts | 11 + .../inputs/BaseInput/BaseInput.styles.ts | 2 + .../InputPassword/InputPassword.styles.ts | 2 + .../inputs/SearchInput/SearchInput.styles.ts | 2 + .../common/pickers/BaseDatePicker.tsx | 16 +- .../common/pickers/BaseRangePicker.tsx | 11 + .../common/pickers/BaseTimePicker.tsx | 11 + .../common/pickers/DayjsDatePicker.tsx | 6 - .../common/pickers/TimeRangePicker.tsx | 4 +- .../selects/BaseSelect/BaseSelect.styles.ts | 23 +- .../components/GithubButton/GitHubButton.tsx | 48 +- .../main/MainHeader/MainHeader.styles.ts | 1 + .../TreatmentCalendar.styles.ts | 8 +- .../TreatmentCalendar/TreatmentCalendar.tsx | 2 +- src/controllers/notificationController.tsx | 2 +- .../forms/DateTimePickersPage.tsx | 28 +- src/styles/GlobalStyle.ts | 60 +- src/styles/ThemeConfigProvider.tsx | 353 ++++++++++ src/styles/_override_variables.less | 135 ---- src/styles/resetCss.ts | 1 + src/styles/themes/dark/darkTheme.ts | 9 +- src/styles/themes/light/lightTheme.ts | 7 +- src/styles/themes/main.less | 7 - yarn.lock | 610 +++++++++--------- 32 files changed, 883 insertions(+), 588 deletions(-) create mode 100644 src/components/common/BaseCalendar/BaseCalendar.tsx create mode 100644 src/components/common/pickers/BaseRangePicker.tsx create mode 100644 src/components/common/pickers/BaseTimePicker.tsx delete mode 100644 src/components/common/pickers/DayjsDatePicker.tsx create mode 100644 src/styles/ThemeConfigProvider.tsx delete mode 100644 src/styles/_override_variables.less delete mode 100644 src/styles/themes/main.less diff --git a/package.json b/package.json index 5b85d58d5..e0a3ea61a 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.0.1", "@craco/craco": "^6.1.2", "@lit-labs/react": "^1.0.2", "@react-google-maps/api": "^2.18.1", "@reduxjs/toolkit": "^1.7.1", - "antd": "^4.22.4", + "antd": "^5.2.3", "antd-mask-input": "^2.0.7", "axios": "^0.24.0", "axios-mock-adapter": "^1.20.0", @@ -68,14 +68,13 @@ "workbox-streams": "^5.1.3" }, "scripts": { - "start": "yarn buildThemes && craco start", - "build": "yarn buildThemes && craco build", + "start": "craco start", + "build": "craco build", "test": "craco test", "eject": "craco eject", "lint": "eslint \"*/**/*.{js,ts,tsx}\" --fix", "lint:styles": "stylelint '*/**/*.{js,ts,tsx}'", - "prepare": "husky install", - "buildThemes": "lessc --js --clean-css=\"--s1 --advanced\" src/styles/themes/main.less public/themes/main.css" + "prepare": "husky install" }, "browserslist": [ ">0.2%", @@ -105,8 +104,6 @@ "eslint-plugin-react": "^7.24.0", "eslint-plugin-react-hooks": "^4.3.0", "husky": "^6.0.0", - "less": "^4.1.2", - "less-plugin-clean-css": "^1.5.1", "lint-staged": "^11.0.0", "prettier": "^2.3.1", "stylelint": "^13.13.1", diff --git a/public/index.html b/public/index.html 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..9953e1123 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -13,6 +13,7 @@ import { usePWA } from './hooks/usePWA'; import { useThemeWatcher } from './hooks/useThemeWatcher'; import { useAppSelector } from './hooks/reduxHooks'; import { themeObject } from './styles/themes/themeVariables'; +import { ThemeConfigProvider } from './styles/ThemeConfigProvider'; const App: React.FC = () => { const { language } = useLanguage(); @@ -28,11 +29,13 @@ const App: React.FC = () => { <> - - - - - + + + + + + + ); }; diff --git a/src/components/apps/newsFeed/NewsFilter/NewsFilter.styles.ts b/src/components/apps/newsFeed/NewsFilter/NewsFilter.styles.ts index 562e2c559..8c95caed0 100644 --- a/src/components/apps/newsFeed/NewsFilter/NewsFilter.styles.ts +++ b/src/components/apps/newsFeed/NewsFilter/NewsFilter.styles.ts @@ -1,6 +1,6 @@ import styled from 'styled-components'; import { SearchOutlined, PlusCircleFilled, CloseOutlined } from '@ant-design/icons'; -import { DayjsDatePicker } from '@app/components/common/pickers/DayjsDatePicker'; +import { BaseRangePicker } from '@app/components/common/pickers/BaseRangePicker'; import { BORDER_RADIUS, FONT_SIZE, FONT_WEIGHT, media } from '@app/styles/themes/constants'; import { BasePopover } from '@app/components/common/BasePopover/BasePopover'; import { BaseInput } from '@app/components/common/inputs/BaseInput/BaseInput'; @@ -114,7 +114,7 @@ export const Input = styled(BaseInput)` line-height: 1.375rem; `; -export const RangePicker = styled(DayjsDatePicker.RangePicker)` +export const RangePicker = styled(BaseRangePicker)` width: 100%; margin-bottom: 0.875rem; diff --git a/src/components/common/BaseButton/BaseButton.styles.ts b/src/components/common/BaseButton/BaseButton.styles.ts index 454c5e12b..50f92dae3 100644 --- a/src/components/common/BaseButton/BaseButton.styles.ts +++ b/src/components/common/BaseButton/BaseButton.styles.ts @@ -14,6 +14,17 @@ export const Button = styled(AntButton)` justify-content: center; gap: 0.3rem; + font-weight: 600; + box-shadow: none; + + &.ant-btn.ant-btn-icon-only > span { + transform: none; + } + + &:not(:disabled):focus-visible { + outline: none; + } + ${(props) => props.$noStyle && css` @@ -28,9 +39,12 @@ export const Button = styled(AntButton)` &[disabled]:hover { color: var(--disabled-color); } + ${(props) => !props.danger && css` + transition-duration: 0.3s; + ${props.$severity && css` box-shadow: none; @@ -41,26 +55,39 @@ export const Button = styled(AntButton)` color: ${defineColorBySeverity(props.$severity)}; - &:hover { + &:focus, + &:not(:disabled):hover { background: var(--background-color); border-color: rgba(${defineColorBySeverity(props.$severity, true)}, 0.9); color: rgba(${defineColorBySeverity(props.$severity, true)}, 0.9); } + `} + ${(typeof props.type === 'undefined' || props.type === 'default' || props.type === 'dashed') && + css` &:focus { - background: var(--background-color); - - border-color: rgba(${defineColorBySeverity(props.$severity, true)}, 0.9); - - color: rgba(${defineColorBySeverity(props.$severity, true)}, 0.9); + background-color: var(--background-color); } + + ${props.$severity === 'info' && + css` + &:focus, + &:not(:disabled):hover { + color: var(--ant-primary-color-hover); + border-color: var(--ant-primary-color-hover); + } + `} `} ${props.type === 'text' && css` - &:hover { + &:focus { + background-color: rgba(0, 0, 0, 0.02); + } + + &:not(:disabled):hover { background: transparent; color: var(--secondary-color); } @@ -68,7 +95,21 @@ export const Button = styled(AntButton)` ${props.type === 'ghost' && css` - &:hover { + color: var(--primary-color); + border-color: var(--primary-color); + + &:disabled { + cursor: not-allowed; + border-color: var(--border-base-color); + background-color: var(--disabled-bg-color); + } + + &:focus { + color: var(--ant-primary-color-hover); + border-color: var(--ant-primary-color-hover); + } + + &:not(:disabled):hover { color: var(--secondary-color); border-color: var(--secondary-color); @@ -79,7 +120,12 @@ export const Button = styled(AntButton)` css` background: var(--primary-color); - &:hover { + &:focus { + border-color: var(--ant-primary-color-hover); + background: var(--ant-primary-color-hover); + } + + &:not(:disabled):hover { background: var(--secondary-color); border-color: var(--secondary-color); @@ -88,6 +134,17 @@ export const Button = styled(AntButton)` ${props.type === 'link' && css` + color: var(--primary-color); + + &:focus { + color: var(--ant-primary-color-hover); + } + + &:not(:disabled):hover { + text-decoration: none; + color: var(--ant-primary-color-hover); + } + & span, a { text-decoration: underline; diff --git a/src/components/common/BaseCalendar/BaseCalendar.tsx b/src/components/common/BaseCalendar/BaseCalendar.tsx new file mode 100644 index 000000000..7ddb56a7d --- /dev/null +++ b/src/components/common/BaseCalendar/BaseCalendar.tsx @@ -0,0 +1,2 @@ +export { Calendar as BaseCalendar } from 'antd'; +export type { CalendarProps as BaseCalendarProps } from 'antd'; diff --git a/src/components/common/BaseCard/BaseCard.styles.ts b/src/components/common/BaseCard/BaseCard.styles.ts index 776e5fbff..41ddc515d 100644 --- a/src/components/common/BaseCard/BaseCard.styles.ts +++ b/src/components/common/BaseCard/BaseCard.styles.ts @@ -17,6 +17,9 @@ export const Card = styled(AntCard)` box-shadow: var(--box-shadow); .ant-card-head { + justify-content: end; + min-height: 50px; + border-bottom: 0; font-weight: ${FONT_WEIGHT.bold}; diff --git a/src/components/common/BaseFeed/BaseFeed.tsx b/src/components/common/BaseFeed/BaseFeed.tsx index 862cfb6e9..fd23c7607 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: 'visible' }} > {children} diff --git a/src/components/common/forms/components/BaseFormItem/BaseFormItem.ts b/src/components/common/forms/components/BaseFormItem/BaseFormItem.ts index 11749255c..cd4d07e87 100644 --- a/src/components/common/forms/components/BaseFormItem/BaseFormItem.ts +++ b/src/components/common/forms/components/BaseFormItem/BaseFormItem.ts @@ -10,6 +10,17 @@ interface InternalFormItemProps { export type BaseFormItemProps = FormItemProps; export const BaseFormItem = styled(Form.Item)` + .ant-input { + font-size: 1rem; + font-family: inherit; + } + + .ant-input:disabled { + color: var(--disabled-color); + background-color: var(--disabled-bg-color); + cursor: not-allowed; + } + .ant-form-item-label > label { color: var(--primary-color); } diff --git a/src/components/common/inputs/BaseInput/BaseInput.styles.ts b/src/components/common/inputs/BaseInput/BaseInput.styles.ts index f27814035..f7e6cfd70 100644 --- a/src/components/common/inputs/BaseInput/BaseInput.styles.ts +++ b/src/components/common/inputs/BaseInput/BaseInput.styles.ts @@ -3,6 +3,8 @@ import { Input as AntInput } from 'antd'; import { FONT_WEIGHT, FONT_SIZE } from '@app/styles/themes/constants'; export const Input = styled(AntInput)` + font-family: inherit; + .ant-input-group-addon:first-child, .ant-input-group-addon:last-child { min-width: 5.5rem; diff --git a/src/components/common/inputs/InputPassword/InputPassword.styles.ts b/src/components/common/inputs/InputPassword/InputPassword.styles.ts index a9a89ef9e..5dd6db874 100644 --- a/src/components/common/inputs/InputPassword/InputPassword.styles.ts +++ b/src/components/common/inputs/InputPassword/InputPassword.styles.ts @@ -2,6 +2,8 @@ import styled from 'styled-components'; import { BaseInput } from '../BaseInput/BaseInput'; export const InputPassword = styled(BaseInput.Password)` + font-family: inherit; + .ant-input-password-icon.anticon { color: var(--disabled-color); &:hover { diff --git a/src/components/common/inputs/SearchInput/SearchInput.styles.ts b/src/components/common/inputs/SearchInput/SearchInput.styles.ts index 553c95448..56db32d49 100644 --- a/src/components/common/inputs/SearchInput/SearchInput.styles.ts +++ b/src/components/common/inputs/SearchInput/SearchInput.styles.ts @@ -4,6 +4,8 @@ import { BaseInput } from '../BaseInput/BaseInput'; import { BaseSpace } from '../../BaseSpace/BaseSpace'; export const SearchInput = styled(BaseInput.Search)` + font-family: inherit; + & .ant-input-prefix { margin: 0.5rem; } diff --git a/src/components/common/pickers/BaseDatePicker.tsx b/src/components/common/pickers/BaseDatePicker.tsx index e5657a980..ebcc068a5 100644 --- a/src/components/common/pickers/BaseDatePicker.tsx +++ b/src/components/common/pickers/BaseDatePicker.tsx @@ -1,10 +1,16 @@ import React from 'react'; -import { PickerProps } from 'antd/lib/date-picker/generatePicker'; -import { DayjsDatePicker } from './DayjsDatePicker'; -import { AppDate } from 'constants/Dates'; +import { DatePicker } from 'antd'; +import type { DatePickerProps as BaseDatePickerProps } from 'antd'; +import styled from 'styled-components'; -export type BaseDatePickerProps = PickerProps; +export type { BaseDatePickerProps }; + +const StyledDatePicker = styled(DatePicker)` + & input { + font-family: inherit; + } +`; export const BaseDatePicker = React.forwardRef, BaseDatePickerProps>( - ({ className, ...props }, ref) => , + ({ className, ...props }, ref) => , ); diff --git a/src/components/common/pickers/BaseRangePicker.tsx b/src/components/common/pickers/BaseRangePicker.tsx new file mode 100644 index 000000000..9474bb99e --- /dev/null +++ b/src/components/common/pickers/BaseRangePicker.tsx @@ -0,0 +1,11 @@ +import styled from 'styled-components'; +import { DatePicker } from 'antd'; +import { RangePickerProps as BaseRangePickerProps } from 'antd/lib/date-picker'; + +export type { BaseRangePickerProps }; + +export const BaseRangePicker = styled(DatePicker.RangePicker)` + & input { + font-family: inherit; + } +`; diff --git a/src/components/common/pickers/BaseTimePicker.tsx b/src/components/common/pickers/BaseTimePicker.tsx new file mode 100644 index 000000000..b610dea81 --- /dev/null +++ b/src/components/common/pickers/BaseTimePicker.tsx @@ -0,0 +1,11 @@ +import styled from 'styled-components'; +import { DatePicker } from 'antd'; +import { TimePickerProps as BaseTimePickerProps } from 'antd'; + +export type { BaseTimePickerProps }; + +export const BaseTimePicker = styled(DatePicker.TimePicker)` + & input { + font-family: inherit; + } +`; 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..36c7d922b 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 { BaseRangePicker } from '@app/components/common/pickers/BaseRangePicker'; 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 ( - ` color: var(--text-main-color); } - &.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-disabled.ant-select:not(.ant-select-customize-input) .ant-select-selector { color: var(--disabled-color); } @@ -47,13 +39,28 @@ export const Select = styled(AntSelect)` .ant-select-clear { color: var(--disabled-color); } + .ant-select-selection-item-remove { color: var(--icon-color); &:hover { color: var(--icon-hover-color); } } + .ant-select-item-option-disabled { color: var(--disabled-color); } + + &.ant-select-disabled.ant-select-multiple .ant-select-selection-item { + background: var(--background-base-color); + } + + &.ant-select-multiple { + .ant-select-selector { + padding: 5px 11px; + } + .ant-select-selection-item { + margin-inline-end: 11px; + } + } `; diff --git a/src/components/header/components/GithubButton/GitHubButton.tsx b/src/components/header/components/GithubButton/GitHubButton.tsx index 5540c6fb4..aa09e93da 100644 --- a/src/components/header/components/GithubButton/GitHubButton.tsx +++ b/src/components/header/components/GithubButton/GitHubButton.tsx @@ -3,24 +3,7 @@ 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'; - -export const GitHubButton: React.FC = (props) => { - const theme = useAppSelector((state) => state.theme.theme); - - return ( - - ); -}; +import { BaseButton } from '@app/components/common/BaseButton/BaseButton'; const Button = styled(BaseButton)<{ $isDark: boolean }>` color: ${(props) => BASE_COLORS[props.$isDark ? 'white' : 'black']}; @@ -28,12 +11,16 @@ const Button = styled(BaseButton)<{ $isDark: boolean }>` border-radius: 50px; padding-top: 0; padding-bottom: 0; - display: flex; + + &.ant-btn { + display: flex; + } + align-items: center; - &:hover, - &:active, - &:focus { + &:not(:disabled):hover, + &:not(:disabled):active, + &:not(:disabled):focus { color: ${(props) => BASE_COLORS[props.$isDark ? 'black' : 'white']}; background: ${(props) => BASE_COLORS[props.$isDark ? 'white' : 'black']}; } @@ -43,3 +30,20 @@ const GithubIcon = styled(GithubOutlined)` font-size: 1.5rem; vertical-align: middle; `; + +export const GitHubButton: React.FC = (props) => { + const theme = useAppSelector((state) => state.theme.theme); + + return ( + + ); +}; diff --git a/src/components/layouts/main/MainHeader/MainHeader.styles.ts b/src/components/layouts/main/MainHeader/MainHeader.styles.ts index e4960c1e4..abc82c9de 100644 --- a/src/components/layouts/main/MainHeader/MainHeader.styles.ts +++ b/src/components/layouts/main/MainHeader/MainHeader.styles.ts @@ -9,6 +9,7 @@ interface Header { export const Header = styled(BaseLayout.Header)
` line-height: 1.5; + background: var(--layout-header-bg-color); @media only screen and ${media.md} { padding: ${LAYOUT.desktop.paddingVertical} ${LAYOUT.desktop.paddingHorizontal}; diff --git a/src/components/medical-dashboard/treatmentCard/TreatmentCalendar/TreatmentCalendar.styles.ts b/src/components/medical-dashboard/treatmentCard/TreatmentCalendar/TreatmentCalendar.styles.ts index ffb34298e..3e1d1c26a 100644 --- a/src/components/medical-dashboard/treatmentCard/TreatmentCalendar/TreatmentCalendar.styles.ts +++ b/src/components/medical-dashboard/treatmentCard/TreatmentCalendar/TreatmentCalendar.styles.ts @@ -1,11 +1,7 @@ import styled, { css } from 'styled-components'; -import dayjsGenerateConfig from 'rc-picker/lib/generate/dayjs'; -import generateCalendar from 'antd/lib/calendar/generateCalendar'; -import { AppDate } from '../../../../constants/Dates'; +import { BaseCalendar } from '@app/components/common/BaseCalendar/BaseCalendar'; import { BORDER_RADIUS, FONT_SIZE, FONT_WEIGHT } from '@app/styles/themes/constants'; -const AntCalendar = generateCalendar(dayjsGenerateConfig); - interface Event { $isPast: boolean; } @@ -43,7 +39,7 @@ export const Event = styled.div` border-radius: ${BORDER_RADIUS}; `; -export const Calendar = styled(AntCalendar)` +export const TreatmentCalendar = styled(BaseCalendar)` .ant-picker-calendar-header { display: none; } diff --git a/src/components/medical-dashboard/treatmentCard/TreatmentCalendar/TreatmentCalendar.tsx b/src/components/medical-dashboard/treatmentCard/TreatmentCalendar/TreatmentCalendar.tsx index 80499a964..b0d7acbfe 100644 --- a/src/components/medical-dashboard/treatmentCard/TreatmentCalendar/TreatmentCalendar.tsx +++ b/src/components/medical-dashboard/treatmentCard/TreatmentCalendar/TreatmentCalendar.tsx @@ -51,7 +51,7 @@ export const TreatmentCalendar: React.FC = ({ - { const today = Dates.getToday(); diff --git a/src/controllers/notificationController.tsx b/src/controllers/notificationController.tsx index 547bb92f1..66978a20b 100644 --- a/src/controllers/notificationController.tsx +++ b/src/controllers/notificationController.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { notification } from 'antd'; import styled from 'styled-components'; import { CheckCircleFilled, ExclamationCircleFilled, InfoCircleFilled, StopFilled } from '@ant-design/icons'; -import { ArgsProps } from 'antd/lib/notification'; +import { ArgsProps } from 'antd/lib/notification/interface'; interface IconWrapperProps { $isOnlyTitle: boolean; diff --git a/src/pages/uiComponentsPages/forms/DateTimePickersPage.tsx b/src/pages/uiComponentsPages/forms/DateTimePickersPage.tsx index 24d388f0b..00d6a1f6f 100644 --- a/src/pages/uiComponentsPages/forms/DateTimePickersPage.tsx +++ b/src/pages/uiComponentsPages/forms/DateTimePickersPage.tsx @@ -1,5 +1,7 @@ import { useTranslation } from 'react-i18next'; -import { DayjsDatePicker } from '@app/components/common/pickers/DayjsDatePicker'; +import { BaseDatePicker } from '@app/components/common/pickers/BaseDatePicker'; +import { BaseRangePicker } from '@app/components/common/pickers/BaseRangePicker'; +import { BaseTimePicker } from '@app/components/common/pickers/BaseTimePicker'; 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 +14,26 @@ const DateTimePickersPage: React.FC = () => { {t('common.dateTimePicker')} - - - - - + + + + + - - - + + + - - + + - + - + diff --git a/src/styles/GlobalStyle.ts b/src/styles/GlobalStyle.ts index e0c9d3b04..3c3df7779 100644 --- a/src/styles/GlobalStyle.ts +++ b/src/styles/GlobalStyle.ts @@ -8,8 +8,9 @@ import { antOverrideCssVariables, } from './themes/themeVariables'; -export default createGlobalStyle` +const styled = { createGlobalStyle }; // https://github.com/prettier/prettier/issues/11196#issuecomment-951878725 +export default styled.createGlobalStyle` ${resetCss} [data-theme='light'], @@ -24,17 +25,17 @@ export default createGlobalStyle` :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; + flex-direction: column; } } } @@ -42,9 +43,9 @@ export default createGlobalStyle` .search-overlay { box-shadow: var(--box-shadow); - @media only screen and ${media.xs} and (max-width: ${BREAKPOINTS.md - 0.02}px) { + @media only screen and ${media.xs} and (max-width: ${BREAKPOINTS.md - 0.02}px) { width: calc(100vw - 16px); - max-width: 600px; + max-width: 600px; } @media only screen and ${media.md} { @@ -54,11 +55,13 @@ export default createGlobalStyle` a { color: var(--primary-color); - &:hover,:active { + + &:hover, + :active { color: var(--ant-primary-color-hover); } } - + .ant-picker-cell { color: var(--text-main-color); } @@ -77,7 +80,7 @@ export default createGlobalStyle` width: 36rem; padding: 2rem; min-height: 6rem; - + .ant-notification-notice-with-icon .ant-notification-notice-message { margin-bottom: 0; margin-left: 2.8125rem; @@ -90,7 +93,7 @@ export default createGlobalStyle` .ant-notification-notice-icon { font-size: 2.8125rem; - margin-left: 0 + margin-left: 0; } .ant-notification-notice-close { @@ -107,11 +110,11 @@ export default createGlobalStyle` .ant-notification-notice-close { top: 1.875rem; } - .ant-notification-notice-with-icon .ant-notification-notice-description { + .ant-notification-notice-with-icon .ant-notification-notice-description { margin-top: 0.625rem; } } - + .title { font-size: ${FONT_SIZE.xxl}; height: 3rem; @@ -128,69 +131,70 @@ export default createGlobalStyle` margin-left: 0.75rem; font-weight: ${FONT_WEIGHT.semibold}; } - } - + } + .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-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); } } - + .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 { + + .ant-menu-inline, + .ant-menu-vertical { border-right: 0; } // notifications end diff --git a/src/styles/ThemeConfigProvider.tsx b/src/styles/ThemeConfigProvider.tsx new file mode 100644 index 000000000..0d45bf721 --- /dev/null +++ b/src/styles/ThemeConfigProvider.tsx @@ -0,0 +1,353 @@ +import { PropsWithChildren } from 'react'; +import { ConfigProvider } from 'antd'; +import { ThemeType } from '@app/interfaces/interfaces'; +import { hexToRGB } from '@app/utils/utils'; + +import { antThemeObject, themeObject } from '@app/styles/themes/themeVariables'; +import { FONT_SIZE, BORDER_RADIUS, FONT_WEIGHT } from '@app/styles/themes/constants'; + +export interface ThemeConfigProviderProps extends PropsWithChildren { + theme: ThemeType; +} + +export const ThemeConfigProvider = ({ theme, children }: ThemeConfigProviderProps): JSX.Element => { + const currentTheme = themeObject[theme]; + return ( + + {children} + + ); +}; 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..69edb9492 100644 --- a/src/styles/resetCss.ts +++ b/src/styles/resetCss.ts @@ -22,6 +22,7 @@ export const resetCss = css` body { font-weight: 500; + color: var(--text-main-color); } img { diff --git a/src/styles/themes/dark/darkTheme.ts b/src/styles/themes/dark/darkTheme.ts index 9e5ff1d81..d5f1c6e05 100644 --- a/src/styles/themes/dark/darkTheme.ts +++ b/src/styles/themes/dark/darkTheme.ts @@ -1,7 +1,6 @@ import { shadeColor } from '@app/utils/utils'; import { graphic } from 'echarts'; import { BASE_COLORS } from '../constants'; -import { ITheme } from '../types'; const chartColors = { chartTooltipLabel: '#6a7985', @@ -45,9 +44,9 @@ const chartColors = { color: 'rgba(255, 82, 82, 0.5)', }, ]), -}; +} as const; -export const darkColorsTheme: ITheme = { +export const darkColorsTheme = { primary: '#339CFD', primary1: '#7568f6', primaryGradient: 'linear-gradient(211.49deg, #dc88f5 15.89%, #339CFD 48.97%)', @@ -105,9 +104,9 @@ export const darkColorsTheme: ITheme = { icon: '#a9a9a9', iconHover: '#ffffff', ...chartColors, -}; +} as const; export const antDarkColorsTheme = { successBg: '#e6fff2', successBorder: '#79fcc4', -}; +} as const; diff --git a/src/styles/themes/light/lightTheme.ts b/src/styles/themes/light/lightTheme.ts index 29fde5844..9cd4cb4d6 100644 --- a/src/styles/themes/light/lightTheme.ts +++ b/src/styles/themes/light/lightTheme.ts @@ -1,7 +1,6 @@ import { shadeColor } from '@app/utils/utils'; import { graphic } from 'echarts'; import { BASE_COLORS } from '../constants'; -import { ITheme } from '../types'; const chartColors = { chartTooltipLabel: '#6A7985', @@ -45,9 +44,9 @@ const chartColors = { color: 'rgba(255, 82, 82, 0.5)', }, ]), -}; +} as const; -export const lightColorsTheme: ITheme = { +export const lightColorsTheme = { primary: '#01509A', primary1: '#f5f5f5', primaryGradient: 'linear-gradient(211.49deg, #006CCF 15.89%, #00509A 48.97%)', @@ -105,4 +104,4 @@ export const lightColorsTheme: ITheme = { icon: '#a9a9a9', iconHover: 'rgba(0, 0, 0, 0.75)', ...chartColors, -}; +} as const; 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/yarn.lock b/yarn.lock index 3fc641d8a..d97c14fe6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -15,12 +15,30 @@ __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/cssinjs@npm:^1.5.6": + version: 1.6.1 + resolution: "@ant-design/cssinjs@npm:1.6.1" + 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.27.0 + stylis: ^4.0.13 + peerDependencies: + react: ">=16.0.0" + react-dom: ">=16.0.0" + checksum: 0e702668610ca8a0b35725f14403cc3482bfc5a1ff9c39c57732625ea828d5071551860cd6ad00ca5a1e36e1c5f158426602f38c443c9945a9590194c9cd882a languageName: node linkType: hard @@ -31,11 +49,11 @@ __metadata: 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.0.0, @ant-design/icons@npm:^5.0.1": + version: 5.0.1 + resolution: "@ant-design/icons@npm:5.0.1" dependencies: - "@ant-design/colors": ^6.0.0 + "@ant-design/colors": ^7.0.0 "@ant-design/icons-svg": ^4.2.1 "@babel/runtime": ^7.11.2 classnames: ^2.2.6 @@ -43,22 +61,22 @@ __metadata: peerDependencies: react: ">=16.0.0" react-dom: ">=16.0.0" - checksum: d569dae9f84245a90fb5152af4c4e6e9f1bce9d638b5831f3e9d126ff654c9477e3c9d9192c6b3f349ade39c9e0bc85605cad5d8c2e401e632dbd6190b638ad3 + checksum: 426371e3a2d5d571a2df18229512ea5951ea71b97f1fa3a3a4dc2feda58498c70da7025c6e3ffcf0ae2dab0fb496d117f8962222f17d95dc58498850d9a21566 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.0": + version: 1.0.0 + resolution: "@ant-design/react-slick@npm:1.0.0" 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: ec9fe42bdcbca7091c156b256b723567621540ff0ad188a672123437d452e1949a4e3f63ed9fa19067a211af5110d8cea8cadba85df9fef264f8785514bac06a languageName: node linkType: hard @@ -1506,7 +1524,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: @@ -1615,10 +1642,17 @@ __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 + +"@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 +1679,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 +2209,43 @@ __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/context@npm:^1.3.0": + version: 1.3.0 + resolution: "@rc-component/context@npm:1.3.0" + dependencies: + "@babel/runtime": ^7.10.1 + rc-util: ^5.27.0 + peerDependencies: + react: ">=16.9.0" + react-dom: ">=16.9.0" + checksum: 77cdd49a2dfde3b2d82ff8652581eddeceefb53c0f3f31b9ed6b09356291821d4e16e915c07a1e15a38ceb6087fb92e7c2cb8ddb26d304fafd96c8571c9136ce + 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.0.0": + version: 1.0.0 + resolution: "@rc-component/mutate-observer@npm:1.0.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: fd6d9581882cca35582e399bf5585e237748fc8240a2d76549ed003ea17fdf7ca97609cb6c8113c2836e9d3182fceda2c1469620560168eeb66fc95656f495e7 + 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.0-9, @rc-component/portal@npm:^1.0.2": version: 1.1.0 resolution: "@rc-component/portal@npm:1.1.0" dependencies: @@ -2189,6 +2259,22 @@ __metadata: languageName: node linkType: hard +"@rc-component/tour@npm:~1.6.0": + version: 1.6.0 + resolution: "@rc-component/tour@npm:1.6.0" + dependencies: + "@babel/runtime": ^7.18.0 + "@rc-component/portal": ^1.0.0-9 + classnames: ^2.3.2 + rc-trigger: ^5.3.4 + rc-util: ^5.24.4 + peerDependencies: + react: ">=16.9.0" + react-dom: ">=16.9.0" + checksum: f8ba0b4326ec69d3f3194ea73e2cb1333b2fe05faebaf452acfeac4d999d4eca06fdb9efc0f1096ed6cc94c529274552b23e687aa172117ee07fed7e8d593513 + 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" @@ -3690,13 +3776,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 +3859,61 @@ __metadata: languageName: node linkType: hard -"antd@npm:^4.22.4": - version: 4.24.8 - resolution: "antd@npm:4.24.8" +"antd@npm:^5.2.3": + version: 5.2.3 + resolution: "antd@npm:5.2.3" 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.5.6 + "@ant-design/icons": ^5.0.0 + "@ant-design/react-slick": ~1.0.0 "@babel/runtime": ^7.18.3 - "@ctrl/tinycolor": ^3.4.0 + "@ctrl/tinycolor": ^3.6.0 + "@rc-component/mutate-observer": ^1.0.0 + "@rc-component/tour": ~1.6.0 classnames: ^2.2.6 copy-to-clipboard: ^3.2.0 - lodash: ^4.17.21 - moment: ^2.29.2 - rc-cascader: ~3.7.0 + dayjs: ^1.11.1 + qrcode.react: ^3.1.0 + rc-cascader: ~3.8.0 rc-checkbox: ~2.3.0 - rc-collapse: ~3.4.2 + rc-collapse: ~3.5.2 rc-dialog: ~9.0.2 - rc-drawer: ~6.1.0 + rc-drawer: ~6.1.1 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-input: ~0.2.1 + rc-input-number: ~7.4.0 + rc-mentions: ~2.0.0 + rc-menu: ~9.8.2 rc-motion: ^2.6.1 - rc-notification: ~4.6.0 + rc-notification: ~5.0.0 rc-pagination: ~3.2.0 - rc-picker: ~2.7.0 + rc-picker: ~3.1.1 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-segmented: ~2.1.2 + rc-select: ~14.2.0 + rc-slider: ~10.1.0 + rc-steps: ~6.0.0 + rc-switch: ~4.0.0 + rc-table: ~7.30.2 rc-tabs: ~12.5.6 - rc-textarea: ~0.4.5 - rc-tooltip: ~5.2.0 + rc-textarea: ~1.0.0 + rc-tooltip: ~5.3.1 rc-tree: ~5.7.0 - rc-tree-select: ~5.5.0 - rc-trigger: ^5.2.10 + rc-tree-select: ~5.6.0 + rc-trigger: ^5.3.4 rc-upload: ~4.3.0 - rc-util: ^5.22.5 - scroll-into-view-if-needed: ^2.2.25 + rc-util: ^5.27.0 + scroll-into-view-if-needed: ^3.0.3 + throttle-debounce: ^5.0.0 peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: 99744b6769454f961e8332b571a1785c7c6d9e1c125dedaaa2314348faccda66dd48c2eec6bb9f71de5474b47ccf02cfed5132d29645b038b144c5701143669f + checksum: 01024f7e2d091bfdb261a47e9ac50ae73a8dd3000f3b4a0c19574bbd02c931da85876e765a16162982329a79008dac98b7457cb4375ec6e8e9d0343ffe8cc9e2 languageName: node linkType: hard @@ -5243,18 +5326,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" @@ -5447,15 +5518,6 @@ __metadata: 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 +5593,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.0": + version: 3.0.0 + resolution: "compute-scroll-into-view@npm:3.0.0" + checksum: 06965595510d3190bfb58705cf74bacc0b6fea8021f56a6477ad134fadcd1971d2083a714c6e3c99f545cc72614d60a9a97d774ea81a37ad302efddc849d372c languageName: node linkType: hard @@ -5652,15 +5714,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" @@ -6195,7 +6248,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 @@ -6337,14 +6390,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 +6418,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 +7075,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 +8634,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 +9168,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 +9223,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" @@ -10001,13 +10031,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 +10961,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" @@ -11020,7 +10999,7 @@ __metadata: version: 0.0.0-use.local resolution: "lightence-admin@workspace:." dependencies: - "@ant-design/icons": ^4.6.2 + "@ant-design/icons": ^5.0.1 "@craco/craco": ^6.1.2 "@lit-labs/react": ^1.0.2 "@react-google-maps/api": ^2.18.1 @@ -11039,7 +11018,7 @@ __metadata: "@types/uuid": ^8.3.4 "@typescript-eslint/eslint-plugin": ^5.10.0 "@typescript-eslint/parser": ^5.8.0 - antd: ^4.22.4 + antd: ^5.2.3 antd-mask-input: ^2.0.7 axios: ^0.24.0 axios-mock-adapter: ^1.20.0 @@ -11058,8 +11037,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 @@ -11408,7 +11385,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 +11700,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 +11930,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 +12051,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 +12739,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 +14156,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,20 +14289,20 @@ __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.8.0": + version: 3.8.1 + resolution: "rc-cascader@npm:3.8.1" dependencies: "@babel/runtime": ^7.12.5 array-tree-filter: ^2.1.0 classnames: ^2.3.1 - rc-select: ~14.1.0 + rc-select: ~14.2.0 rc-tree: ~5.7.0 rc-util: ^5.6.1 peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: 9bc01c8fb633f6d9af821fad7020ceb829fe71bb9e3517fee2554ca58176b650621e3e9286b2e8208df419c381d6b7696aa801985acdb050c6f36b7c68321cff + checksum: 2c033563c274e0d4f651ecb6a913820a59938912c743f10b67b21c2369a602a77e1196d0479cdaae09098fb206c5cb190b88d5b396fc8a27e689e77187189af8 languageName: node linkType: hard @@ -14360,19 +14319,18 @@ __metadata: 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.5.2": + version: 3.5.2 + resolution: "rc-collapse@npm:3.5.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: 38a47d96c09520f11ab324a390f0be6c8e73bb169f8c636c71f88a8d66a70a1a1a12fbc7c754c2ffc973b0bec90d223dfaf637ef474da0a4c9c63fa05d8cc71d languageName: node linkType: hard @@ -14392,7 +14350,7 @@ __metadata: languageName: node linkType: hard -"rc-drawer@npm:~6.1.0": +"rc-drawer@npm:~6.1.1": version: 6.1.3 resolution: "rc-drawer@npm:6.1.3" dependencies: @@ -14424,8 +14382,8 @@ __metadata: linkType: hard "rc-field-form@npm:~1.27.0": - version: 1.27.3 - resolution: "rc-field-form@npm:1.27.3" + version: 1.27.4 + resolution: "rc-field-form@npm:1.27.4" dependencies: "@babel/runtime": ^7.18.0 async-validator: ^4.1.0 @@ -14433,7 +14391,7 @@ __metadata: peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: da373e9fda1984fdbe10b62abfc05f60ea0a771f6d2449ce248644b5e22fdf7046693a5721658c0ead5f2cd30ae6946a0697713f9e640fb51f0c1294020b8168 + checksum: 51873f9ffa94d4b10d04d191adfd35bc3b2f9b8abf70ff07ae648a9965fb97b70e501c05500ebae770d1ba443d5a2c46f4da041ce988d337ff0cabda2656e35e languageName: node linkType: hard @@ -14454,23 +14412,24 @@ __metadata: 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:~7.4.0": + version: 7.4.1 + resolution: "rc-input-number@npm:7.4.1" dependencies: "@babel/runtime": ^7.10.1 + "@rc-component/mini-decimal": ^1.0.1 classnames: ^2.2.5 - rc-util: ^5.23.0 + rc-util: ^5.25.0 peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: 8555171aed72a277721a7d22cdfadc56585f20f9422ce55b0f505eaae43837586d85bd7ebc5dca7b6eec96cbd8798b622ffd03f0187464dbaf6d741a5c20ee7d + checksum: 5c48747da81efb131aaad06c4c9cd78bbf7ad301a91e31599d68cffb05c8be317340ff060285542d9ba57fa8879716adf9e80a54a4a4d89305d5c6c161037304 languageName: node linkType: hard -"rc-input@npm:~0.1.4": - version: 0.1.4 - resolution: "rc-input@npm:0.1.4" +"rc-input@npm:^0.2.1, rc-input@npm:^0.2.2, rc-input@npm:~0.2.1": + version: 0.2.2 + resolution: "rc-input@npm:0.2.2" dependencies: "@babel/runtime": ^7.11.1 classnames: ^2.2.1 @@ -14478,28 +14437,29 @@ __metadata: peerDependencies: react: ">=16.0.0" react-dom: ">=16.0.0" - checksum: 1c1935856d7f991ec6f6f8d17945ad501ce956116fdd79b8fcbe1e265465a59b348ba61f1f90045ef14b24e93cc4963b87d5333b9b784f5f28407b6601e8570e + checksum: a1d26a88146f40df70f759688187433c0a43d32ac33abfe9ee598c9290a2a41a41538deb0fdc87de45438bdfb4fbb9b15c4039b61f937d336379d5b67a61bcc2 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.0.0": + version: 2.0.0 + resolution: "rc-mentions@npm:2.0.0" dependencies: "@babel/runtime": ^7.10.1 classnames: ^2.2.6 + rc-input: ^0.2.2 rc-menu: ~9.8.0 - rc-textarea: ^0.4.0 + rc-textarea: ^1.0.0 rc-trigger: ^5.0.4 rc-util: ^5.22.5 peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: 7893c56f91a9ef60d70d607d0fb415c07398d35096a25488d49ea4829a56eda2c9cc0334af919330978e20fe85d39393caddbb52484f9bf39a80e78df4057b2e + checksum: db88f5edf3434cc3b683660eee734be40fad5b691501caeecb47e5c499ee0371eeb2833f717c558c245a4c0dfabee7fdb94cda9dc14a43b1b25b4e63c6081bdc languageName: node linkType: hard -"rc-menu@npm:~9.8.0": +"rc-menu@npm:~9.8.0, rc-menu@npm:~9.8.2": version: 9.8.2 resolution: "rc-menu@npm:9.8.2" dependencies: @@ -14516,7 +14476,7 @@ __metadata: 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.0, 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,18 +14490,18 @@ __metadata: languageName: node linkType: hard -"rc-notification@npm:~4.6.0": - version: 4.6.1 - resolution: "rc-notification@npm:4.6.1" +"rc-notification@npm:~5.0.0": + version: 5.0.2 + resolution: "rc-notification@npm:5.0.2" dependencies: "@babel/runtime": ^7.10.1 classnames: 2.x - rc-motion: ^2.2.0 + rc-motion: ^2.6.0 rc-util: ^5.20.1 peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: e953a85a6061103485db33f76b5c25907c273a03fd39be942b26eace33c83b42c26054d0d6f063d2239cc2d52462e9638c818be59da966ea18a74a0b168c4c36 + checksum: ab836183e741731822df5521a216cdc111d309c483b94f3100f928ecdb4d6204e215e9a22a38bb4212528c5bd58c0a2d56cfe6adc1d0f3024fa7ea985cddba82 languageName: node linkType: hard @@ -14573,22 +14533,28 @@ __metadata: 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.1.1": + version: 3.1.5 + resolution: "rc-picker@npm:3.1.5" dependencies: "@babel/runtime": ^7.10.1 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.27.0 peerDependencies: + date-fns: ">= 2.x" + dayjs: ">= 1.x" + moment: ">= 2.x" react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: a1a8212becf52a077c354a3ea195979bcc71ba3c267a88dae9764f996aec8ae81007a94bf83933be0bab62f74d467938a752ce867edb904888b3e6ab6b2c0aa3 + peerDependenciesMeta: + date-fns: + optional: true + dayjs: + optional: true + moment: + optional: true + checksum: 51ef0ea925a905457e5790483cf118e09b9f8b27004b13cc3b4867acc3b9e1eda45a475cfd34cfd4241ce65248b32f7369e4b429dc9aec2af09774db09b8dbb3 languageName: node linkType: hard @@ -14621,8 +14587,8 @@ __metadata: 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" + version: 1.3.1 + resolution: "rc-resize-observer@npm:1.3.1" dependencies: "@babel/runtime": ^7.20.7 classnames: ^2.2.1 @@ -14631,11 +14597,11 @@ __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": +"rc-segmented@npm:~2.1.2": version: 2.1.2 resolution: "rc-segmented@npm:2.1.2" dependencies: @@ -14650,9 +14616,9 @@ __metadata: 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.2.0": + version: 14.2.2 + resolution: "rc-select@npm:14.2.2" dependencies: "@babel/runtime": ^7.10.1 classnames: 2.x @@ -14660,32 +14626,31 @@ __metadata: rc-overflow: ^1.0.0 rc-trigger: ^5.0.4 rc-util: ^5.16.1 - rc-virtual-list: ^3.2.0 + rc-virtual-list: ^3.4.13 peerDependencies: react: "*" react-dom: "*" - checksum: 545d8a190f372a3fa553f6d42c9959b44868528a1abd4013af439cc87fa4a98cd755c242a4a64e40b05decaf41c71eb1ebd63e5253cb0c84ea3905d19d27e7d4 + checksum: 2a6f77a92ea2298571d5bf0bb06b08b2a22d8b07fe40603672c432234bb52ee260fdbfbf74ae0aa7b6956ba9816672eafca5d1b23c726e296de35594b82f32ba 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.1.0": + version: 10.1.1 + resolution: "rc-slider@npm:10.1.1" 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: 8df66142f1be00d31aaa45f3cf266fa30d03b70c74c734502389bbfacdb6741e149cd36dc1d3557d9dbb0194ed2733748366d888651d1120098338086419ba2c 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.0": + version: 6.0.0 + resolution: "rc-steps@npm:6.0.0" dependencies: "@babel/runtime": ^7.16.7 classnames: ^2.2.3 @@ -14693,13 +14658,13 @@ __metadata: peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: b58507b807d648a425b339fbbd49472da0b7213e5464cd021d2cbcb3273818e4bf8d6e6b2d5dda7608160887e156a14f97585d3029ce9f501db9444bcb365618 + checksum: 22cec1477fdd7c92e480d980c88ba8175e897e4dcd06c6c11fcdb8175ebede19b9367d8d62d1ee21ec5dfd9d8ab7724c3665582a51dde86c36ecdc810550bb1b 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.0.0": + version: 4.0.0 + resolution: "rc-switch@npm:4.0.0" dependencies: "@babel/runtime": ^7.10.1 classnames: ^2.2.1 @@ -14707,29 +14672,29 @@ __metadata: peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: c0242385fa93a9aa5cc65500cf6f83a673ff91caf70eed8c1335af2cd695aafda2c4c972da0daae8ea26478e314b9a9212074364d44110ff9b453c0d3debb851 + checksum: 9a77ccdc76c956876e911173fdaf10f1c7ea3b713632a3919e4dcf4faff1626c0f782772eaf2c74a1ed81f6adadc6df9c5febdd5de872eea62db2d6fff7d6956 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.30.2": + version: 7.30.4 + resolution: "rc-table@npm:7.30.4" dependencies: "@babel/runtime": ^7.10.1 + "@rc-component/context": ^1.3.0 classnames: ^2.2.5 rc-resize-observer: ^1.1.0 - rc-util: ^5.22.5 - shallowequal: ^1.1.0 + rc-util: ^5.27.1 peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: 78970d0140203d57541bf5952c542ca7448608bbd29da949e51007c4b3f94570a35b4e95b35ce4d49954c6c88a9e44d2f36f8f4015bfe1b97e926a381141d251 + checksum: abf1e76ad9090b427850627e44614880d4301e2540054d795ee5abbde552a3d9cb516294c0650480d781e032a6971dbd83387627e02506774fd2fc8016008092 languageName: node linkType: hard "rc-tabs@npm:~12.5.6": - version: 12.5.6 - resolution: "rc-tabs@npm:12.5.6" + version: 12.5.7 + resolution: "rc-tabs@npm:12.5.7" dependencies: "@babel/runtime": ^7.11.2 classnames: 2.x @@ -14741,53 +14706,53 @@ __metadata: peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: ca9457da3c1398f5b48c741e5afdffd860b066f88bd230d43bfb37b4003612a69bd20a016ab43095936dff73a07a83220593c7fbfd0c495cecc6ca74663fdf9e + checksum: ee2f6ff4a6cfd1f93d03f8023205203fd77e41d949a1f740be26bd8e91e14bf6195e66e7729f2c904aef10e1d250a5b32c64589cd1ba68c3f5d53b41e3013130 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.0.0, rc-textarea@npm:~1.0.0": + version: 1.0.1 + resolution: "rc-textarea@npm:1.0.1" dependencies: "@babel/runtime": ^7.10.1 classnames: ^2.2.1 + rc-input: ^0.2.1 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: bc21ff8aaef9e93760aafdde5f24a052c67d37771aca915e96454477aae61c1742591acd1466b35c3ed516ffffef7f5b20a6c945119fa0bae1914177c8fce816 languageName: node linkType: hard -"rc-tooltip@npm:~5.2.0": - version: 5.2.2 - resolution: "rc-tooltip@npm:5.2.2" +"rc-tooltip@npm:~5.3.1": + version: 5.3.1 + resolution: "rc-tooltip@npm:5.3.1" dependencies: "@babel/runtime": ^7.11.2 classnames: ^2.3.1 - rc-trigger: ^5.0.0 + rc-trigger: ^5.3.1 peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: df6a59096876becf930df0347cfe6379cde9647f338a333dd0aae99039bf45e72db866f03ab6b5fd5ce616b074ec888f50e61ebe0f8d2a135c2617595dbf0583 + checksum: 93a99dd8f83ca6187cae7d09e498156e660331837f7ff16d6c50165e5cbc810d566552535d8c92c6fb3093f45cadfa0b62a03b9f78ba22e8b6123eda27333cf4 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.6.0": + version: 5.6.0 + resolution: "rc-tree-select@npm:5.6.0" dependencies: "@babel/runtime": ^7.10.1 classnames: 2.x - rc-select: ~14.1.0 + rc-select: ~14.2.0 rc-tree: ~5.7.0 rc-util: ^5.16.1 peerDependencies: react: "*" react-dom: "*" - checksum: 6d7de4d9b80583b3bd39be0c8bad5138a62770805048da9fd177eb3f21acc7d02cd68ea64d9ca3accf8bfefa41b0db84c1ac50a3637c7b3c97060d7d3e9d60e5 + checksum: 01c488ae482c54090021b3ff40dea065a0e2455df77efa67b8cb6919e8bc05b3f40fcff0d85bd24784daa15f2814bb584a6a360e06ef38723614b875893fe1b6 languageName: node linkType: hard @@ -14807,7 +14772,7 @@ __metadata: 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": +"rc-trigger@npm:^5.0.4, rc-trigger@npm:^5.1.2, rc-trigger@npm:^5.3.1, rc-trigger@npm:^5.3.4": version: 5.3.4 resolution: "rc-trigger@npm:5.3.4" dependencies: @@ -14837,20 +14802,20 @@ __metadata: 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.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.20.1, rc-util@npm:^5.21.0, rc-util@npm:^5.21.2, rc-util@npm:^5.22.5, rc-util@npm:^5.24.4, rc-util@npm:^5.25.0, rc-util@npm:^5.26.0, rc-util@npm:^5.27.0, rc-util@npm:^5.27.1, rc-util@npm:^5.6.1, rc-util@npm:^5.8.0, rc-util@npm:^5.9.4": + version: 5.28.0 + resolution: "rc-util@npm:5.28.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: e60424c37dad7575bb2429e266a81f96003701d719d1fb40128b42ed1c6972896cec09ece8857b36ce9ac74ba95aa2d0a9bdc0609894ba1b3c12c15504a1a886 languageName: node linkType: hard -"rc-virtual-list@npm:^3.2.0, rc-virtual-list@npm:^3.4.8": +"rc-virtual-list@npm:^3.4.13, rc-virtual-list@npm:^3.4.8": version: 3.4.13 resolution: "rc-virtual-list@npm:3.4.13" dependencies: @@ -15997,7 +15962,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 +16020,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.0.3": + version: 3.0.6 + resolution: "scroll-into-view-if-needed@npm:3.0.6" dependencies: - compute-scroll-into-view: ^1.0.20 - checksum: 93b28f3723a462245b40d4120c40c542c8449473e2b157a5f8e18f04d95d66cd35249d96c625e8a440a56891f7d8905b1d026c690bdda07fcfb4f1a48d643ad1 + compute-scroll-into-view: ^3.0.0 + checksum: fb3a62748f44bc14ee5f6986e6c3fd1a571811ff14e894f5ff1045247cfd9bf94ebd2038319971a8657bdd4c70a165e523ec1a0b90f74ded175a77035ff2d109 languageName: node linkType: hard @@ -16534,15 +16499,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 +17098,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 +17379,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" @@ -17667,7 +17637,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 From 56130a24c7f27026c76fc09551ab47857530adbe Mon Sep 17 00:00:00 2001 From: Alexandr Buhlak <48954743+saha80@users.noreply.github.com> Date: Tue, 14 Mar 2023 23:58:55 +0200 Subject: [PATCH 02/81] preserve antd components' styles --- .../newsFeed/NewsFilter/NewsFilter.styles.ts | 4 +- .../common/BaseAlert/BaseAlert.styles.ts | 4 + .../common/BaseButton/BaseButton.styles.ts | 104 ++--- .../common/BaseCard/BaseCard.styles.ts | 11 +- .../BaseCheckbox/BaseCheckbox.styles.ts | 12 +- .../BasePagination/BasePagination.styles.ts | 54 +++ .../common/BaseRadio/BaseRadio.styles.ts | 10 + .../common/BaseSlider/BaseSlider.styles.ts | 4 + .../inputs/BaseInput/BaseInput.styles.ts | 5 + .../inputs/SearchInput/SearchInput.styles.ts | 3 +- .../common/pickers/BaseDatePicker.styled.tsx | 20 + .../common/pickers/BaseDatePicker.tsx | 27 +- .../common/pickers/BaseRangePicker.tsx | 11 - .../common/pickers/BaseTimePicker.tsx | 11 - .../common/pickers/TimeRangePicker.tsx | 4 +- src/components/header/Header.styles.ts | 8 +- .../main/MainHeader/MainHeader.styles.ts | 3 + .../main/sider/MainSider/MainSider.styles.ts | 13 +- .../main/sider/SiderMenu/SiderMenu.styles.ts | 1 + .../TreatmentCalendar.styles.ts | 2 +- .../TreatmentCalendar/TreatmentCalendar.tsx | 2 +- .../TopUpBalanceButton.styles.ts | 10 +- .../ProfileNav/ProfileNav.styles.ts | 2 +- .../forms/DateTimePickersPage.tsx | 8 +- src/styles/GlobalStyle.ts | 116 ++++++ src/styles/ThemeConfigProvider.tsx | 362 ++++++++++-------- 26 files changed, 539 insertions(+), 272 deletions(-) create mode 100644 src/components/common/pickers/BaseDatePicker.styled.tsx delete mode 100644 src/components/common/pickers/BaseRangePicker.tsx delete mode 100644 src/components/common/pickers/BaseTimePicker.tsx diff --git a/src/components/apps/newsFeed/NewsFilter/NewsFilter.styles.ts b/src/components/apps/newsFeed/NewsFilter/NewsFilter.styles.ts index 8c95caed0..29ec9a265 100644 --- a/src/components/apps/newsFeed/NewsFilter/NewsFilter.styles.ts +++ b/src/components/apps/newsFeed/NewsFilter/NewsFilter.styles.ts @@ -1,6 +1,6 @@ import styled from 'styled-components'; import { SearchOutlined, PlusCircleFilled, CloseOutlined } from '@ant-design/icons'; -import { BaseRangePicker } from '@app/components/common/pickers/BaseRangePicker'; +import { BaseDatePicker } from '@app/components/common/pickers/BaseDatePicker'; import { BORDER_RADIUS, FONT_SIZE, FONT_WEIGHT, media } from '@app/styles/themes/constants'; import { BasePopover } from '@app/components/common/BasePopover/BasePopover'; import { BaseInput } from '@app/components/common/inputs/BaseInput/BaseInput'; @@ -114,7 +114,7 @@ export const Input = styled(BaseInput)` line-height: 1.375rem; `; -export const RangePicker = styled(BaseRangePicker)` +export const RangePicker = styled(BaseDatePicker.RangePicker)` width: 100%; margin-bottom: 0.875rem; diff --git a/src/components/common/BaseAlert/BaseAlert.styles.ts b/src/components/common/BaseAlert/BaseAlert.styles.ts index 4d940987d..649174d64 100644 --- a/src/components/common/BaseAlert/BaseAlert.styles.ts +++ b/src/components/common/BaseAlert/BaseAlert.styles.ts @@ -7,4 +7,8 @@ export const Alert = styled(AntAlert)` .ant-alert-message { color: var(--black); } + + .ant-alert-action { + margin-inline-start: 8px; + } `; diff --git a/src/components/common/BaseButton/BaseButton.styles.ts b/src/components/common/BaseButton/BaseButton.styles.ts index 50f92dae3..e3023c927 100644 --- a/src/components/common/BaseButton/BaseButton.styles.ts +++ b/src/components/common/BaseButton/BaseButton.styles.ts @@ -2,6 +2,7 @@ import styled, { css } from 'styled-components'; import { Button as AntButton } from 'antd'; import { Severity } from '@app/interfaces/interfaces'; import { defineColorBySeverity } from '@app/utils/utils'; +import { FONT_WEIGHT } from '@app/styles/themes/constants'; interface BtnProps { $severity?: Severity; @@ -14,7 +15,9 @@ export const Button = styled(AntButton)` justify-content: center; gap: 0.3rem; - font-weight: 600; + transition-duration: 0.3s; + + font-weight: ${FONT_WEIGHT.semibold}; box-shadow: none; &.ant-btn.ant-btn-icon-only > span { @@ -40,66 +43,50 @@ export const Button = styled(AntButton)` color: var(--disabled-color); } + &.ant-btn-dangerous { + &.ant-btn-primary { + box-shadow: none; + } + + &.ant-btn-text:not(:disabled):hover { + background-color: transparent; + } + } + ${(props) => !props.danger && css` - transition-duration: 0.3s; - - ${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)}; - - &:focus, - &:not(:disabled):hover { - background: var(--background-color); - - border-color: rgba(${defineColorBySeverity(props.$severity, true)}, 0.9); - - color: rgba(${defineColorBySeverity(props.$severity, true)}, 0.9); - } - `} - - ${(typeof props.type === 'undefined' || props.type === 'default' || props.type === 'dashed') && - css` + &.ant-btn-default, + &.ant-btn-dashed { &:focus { background-color: var(--background-color); } - ${props.$severity === 'info' && - css` - &:focus, - &:not(:disabled):hover { - color: var(--ant-primary-color-hover); - border-color: var(--ant-primary-color-hover); - } - `} - `} + &:focus, + &:not(:disabled):hover { + color: var(--ant-primary-color-hover); + border-color: var(--ant-primary-color-hover); + } + } - ${props.type === 'text' && - css` + &.ant-btn-text { &:focus { - background-color: rgba(0, 0, 0, 0.02); + background-color: rgba(0, 0, 0, 0.018); } &:not(:disabled):hover { background: transparent; color: var(--secondary-color); } - `} + } - ${props.type === 'ghost' && - css` + &.ant-btn-ghost { color: var(--primary-color); border-color: var(--primary-color); &:disabled { cursor: not-allowed; + color: var(--disabled-color); border-color: var(--border-base-color); background-color: var(--disabled-bg-color); } @@ -111,13 +98,11 @@ export const Button = styled(AntButton)` &:not(:disabled):hover { color: var(--secondary-color); - border-color: var(--secondary-color); } - `} + } - ${props.type === 'primary' && - css` + &.ant-btn-primary:not(:disabled) { background: var(--primary-color); &:focus { @@ -125,17 +110,20 @@ export const Button = styled(AntButton)` background: var(--ant-primary-color-hover); } - &:not(:disabled):hover { + &:hover { background: var(--secondary-color); border-color: var(--secondary-color); } - `} + } - ${props.type === 'link' && - css` + &.ant-btn-link { color: var(--primary-color); + &:disabled { + color: var(--disabled-color); + } + &:focus { color: var(--ant-primary-color-hover); } @@ -149,6 +137,24 @@ export const Button = styled(AntButton)` a { text-decoration: underline; } - `}; + } + + ${props.$severity && + css` + background: rgba(${defineColorBySeverity(props.$severity, true)}, 0.2); + + border-color: ${defineColorBySeverity(props.$severity)}; + + color: ${defineColorBySeverity(props.$severity)}; + + &.ant-btn-default:focus, + &.ant-btn-default:not(:disabled):hover { + background: var(--background-color); + + border-color: rgba(${defineColorBySeverity(props.$severity, true)}, 0.9); + + color: rgba(${defineColorBySeverity(props.$severity, true)}, 0.9); + } + `} `} `; diff --git a/src/components/common/BaseCard/BaseCard.styles.ts b/src/components/common/BaseCard/BaseCard.styles.ts index 41ddc515d..1d90ea2a5 100644 --- a/src/components/common/BaseCard/BaseCard.styles.ts +++ b/src/components/common/BaseCard/BaseCard.styles.ts @@ -17,8 +17,9 @@ export const Card = styled(AntCard)` box-shadow: var(--box-shadow); .ant-card-head { - justify-content: end; - min-height: 50px; + padding-top: 15px; + padding-bottom: 15px; + min-height: 36px; border-bottom: 0; @@ -30,6 +31,12 @@ export const Card = styled(AntCard)` padding-bottom: 0; } + @media only screen and ${media.md} { + padding-top: 20px; + padding-bottom: 0; + min-height: 48px; + } + @media only screen and ${media.xl} { font-size: ${FONT_SIZE.xxl}; diff --git a/src/components/common/BaseCheckbox/BaseCheckbox.styles.ts b/src/components/common/BaseCheckbox/BaseCheckbox.styles.ts index ab7b4aea6..957ad2891 100644 --- a/src/components/common/BaseCheckbox/BaseCheckbox.styles.ts +++ b/src/components/common/BaseCheckbox/BaseCheckbox.styles.ts @@ -11,16 +11,20 @@ export const Checkbox = styled(AntdCheckbox)` border: 1px solid var(--primary-color); } - .ant-checkbox-disabled.ant-checkbox-checked .ant-checkbox-inner::after { - border-color: var(--disabled-color); + .ant-checkbox-disabled .ant-checkbox-inner { + border-color: var(--border-base-color); } - .ant-checkbox-disabled + span { - color: var(--disabled-color); + &.ant-checkbox-disabled.ant-checkbox-checked .ant-checkbox-inner::after { + border-color: var(--disabled-color); } `; export const CheckboxGroup = styled(Group)` + .ant-form-vertical &.ant-checkbox-group { + display: inline-block; + } + & .ant-checkbox-inner { border-radius: 0.1875rem; height: 1.25rem; diff --git a/src/components/common/BasePagination/BasePagination.styles.ts b/src/components/common/BasePagination/BasePagination.styles.ts index 3d1d993a2..62a33b683 100644 --- a/src/components/common/BasePagination/BasePagination.styles.ts +++ b/src/components/common/BasePagination/BasePagination.styles.ts @@ -6,6 +6,59 @@ export const Pagination = styled(AntdPagination)` color: var(--disabled-color); } + :not(.ant-pagination-disabled), + &.ant-pagination-disabled { + .ant-pagination-item, + .ant-pagination-jump-prev, + .ant-pagination-jump-next { + &:focus-visible { + outline: none; + } + } + .ant-pagination-prev, + .ant-pagination-next { + &:focus-visible { + .ant-pagination-item-link { + outline: none; + } + } + } + } + + :not(.ant-pagination-disabled) { + .ant-pagination-item:focus-visible { + a { + color: var(--ant-primary-color); + } + border-color: var(--ant-primary-color); + } + + .ant-pagination-prev, + .ant-pagination-next { + &:focus-visible { + .ant-pagination-item-link { + color: var(--ant-primary-color); + border-color: var(--ant-primary-color); + } + } + } + } + + &.ant-pagination-disabled { + .ant-pagination-jump-prev, + .ant-pagination-jump-next { + &:focus-visible, + &:hover { + .ant-pagination-item-link-icon { + opacity: 0; + } + .ant-pagination-item-ellipsis { + opacity: 1; + } + } + } + } + .ant-pagination-disabled { .ant-pagination-item-link, .ant-pagination-item a { @@ -19,6 +72,7 @@ export const Pagination = styled(AntdPagination)` color: var(--disabled-color); } } + & .ant-select-arrow { color: var(--disabled-color); } diff --git a/src/components/common/BaseRadio/BaseRadio.styles.ts b/src/components/common/BaseRadio/BaseRadio.styles.ts index 58563aa8d..a2d853eb9 100644 --- a/src/components/common/BaseRadio/BaseRadio.styles.ts +++ b/src/components/common/BaseRadio/BaseRadio.styles.ts @@ -2,12 +2,22 @@ import styled from 'styled-components'; import { Radio as AntdRadio } from 'antd'; export const Radio = styled(AntdRadio)` + .ant-radio-input:focus-visible + .ant-radio-inner { + outline: none; + box-shadow: 0 0 0 3px var(--ant-primary-color-outline); + } + .ant-radio-disabled + span { color: var(--disabled-color); } `; export const RadioButton = styled(AntdRadio.Button)` + &.ant-radio-button-wrapper:has(:focus-visible) { + outline: none; + box-shadow: 0 0 0 3px var(--ant-primary-color-outline); + } + &.ant-radio-button-wrapper-disabled { color: var(--disabled-color); } diff --git a/src/components/common/BaseSlider/BaseSlider.styles.ts b/src/components/common/BaseSlider/BaseSlider.styles.ts index 54b609f15..25e81a766 100644 --- a/src/components/common/BaseSlider/BaseSlider.styles.ts +++ b/src/components/common/BaseSlider/BaseSlider.styles.ts @@ -2,6 +2,10 @@ import styled from 'styled-components'; import { Slider as AntdSlider } from 'antd'; export const Slider = styled(AntdSlider)` + &.ant-slider.ant-slider-disabled .ant-slider-rail { + background-color: var(--background-base-color) !important; + } + & .ant-slider-mark-text:not(.ant-slider-mark-text-active) { color: var(--subtext-color); } diff --git a/src/components/common/inputs/BaseInput/BaseInput.styles.ts b/src/components/common/inputs/BaseInput/BaseInput.styles.ts index f7e6cfd70..f8de37411 100644 --- a/src/components/common/inputs/BaseInput/BaseInput.styles.ts +++ b/src/components/common/inputs/BaseInput/BaseInput.styles.ts @@ -5,6 +5,11 @@ import { FONT_WEIGHT, FONT_SIZE } from '@app/styles/themes/constants'; export const Input = styled(AntInput)` font-family: inherit; + .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:first-child, .ant-input-group-addon:last-child { min-width: 5.5rem; diff --git a/src/components/common/inputs/SearchInput/SearchInput.styles.ts b/src/components/common/inputs/SearchInput/SearchInput.styles.ts index 56db32d49..bbf96918e 100644 --- a/src/components/common/inputs/SearchInput/SearchInput.styles.ts +++ b/src/components/common/inputs/SearchInput/SearchInput.styles.ts @@ -39,7 +39,8 @@ export const SearchInput = styled(BaseInput.Search)` font-size: ${FONT_SIZE.lg}; } - .ant-input-search-button { + .ant-input-search-button, + .ant-input-search-button:hover { &.ant-btn .anticon { color: var(--primary-color); } diff --git a/src/components/common/pickers/BaseDatePicker.styled.tsx b/src/components/common/pickers/BaseDatePicker.styled.tsx new file mode 100644 index 000000000..f6991cf63 --- /dev/null +++ b/src/components/common/pickers/BaseDatePicker.styled.tsx @@ -0,0 +1,20 @@ +import styled from 'styled-components'; +import { DatePicker as AntDatePicker } from 'antd'; + +export const DatePicker = styled(AntDatePicker)` + & input { + font-family: inherit; + } +`; + +export const RangePicker = styled(AntDatePicker.RangePicker)` + & input { + font-family: inherit; + } +`; + +export const TimePicker = styled(AntDatePicker.TimePicker)` + & input { + font-family: inherit; + } +`; diff --git a/src/components/common/pickers/BaseDatePicker.tsx b/src/components/common/pickers/BaseDatePicker.tsx index ebcc068a5..9cce2e1ca 100644 --- a/src/components/common/pickers/BaseDatePicker.tsx +++ b/src/components/common/pickers/BaseDatePicker.tsx @@ -1,16 +1,21 @@ import React from 'react'; -import { DatePicker } from 'antd'; -import type { DatePickerProps as BaseDatePickerProps } from 'antd'; -import styled from 'styled-components'; +import { DatePickerProps as BaseDatePickerProps } from 'antd'; +import * as S from './BaseDatePicker.styled'; export type { BaseDatePickerProps }; -const StyledDatePicker = styled(DatePicker)` - & input { - font-family: inherit; - } -`; - -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/BaseRangePicker.tsx b/src/components/common/pickers/BaseRangePicker.tsx deleted file mode 100644 index 9474bb99e..000000000 --- a/src/components/common/pickers/BaseRangePicker.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import styled from 'styled-components'; -import { DatePicker } from 'antd'; -import { RangePickerProps as BaseRangePickerProps } from 'antd/lib/date-picker'; - -export type { BaseRangePickerProps }; - -export const BaseRangePicker = styled(DatePicker.RangePicker)` - & input { - font-family: inherit; - } -`; diff --git a/src/components/common/pickers/BaseTimePicker.tsx b/src/components/common/pickers/BaseTimePicker.tsx deleted file mode 100644 index b610dea81..000000000 --- a/src/components/common/pickers/BaseTimePicker.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import styled from 'styled-components'; -import { DatePicker } from 'antd'; -import { TimePickerProps as BaseTimePickerProps } from 'antd'; - -export type { BaseTimePickerProps }; - -export const BaseTimePicker = styled(DatePicker.TimePicker)` - & input { - font-family: inherit; - } -`; diff --git a/src/components/common/pickers/TimeRangePicker.tsx b/src/components/common/pickers/TimeRangePicker.tsx index 36c7d922b..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 { BaseRangePicker } from '@app/components/common/pickers/BaseRangePicker'; +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 ( - ` `; export const GHButton = styled(GitHubButton)` - display: none; + &.ant-btn { + display: none; + } @media only screen and ${media.lg} { - display: block; + &.ant-btn { + display: flex; + } } `; diff --git a/src/components/layouts/main/MainHeader/MainHeader.styles.ts b/src/components/layouts/main/MainHeader/MainHeader.styles.ts index abc82c9de..db6d58206 100644 --- a/src/components/layouts/main/MainHeader/MainHeader.styles.ts +++ b/src/components/layouts/main/MainHeader/MainHeader.styles.ts @@ -11,6 +11,9 @@ export const Header = styled(BaseLayout.Header)
` line-height: 1.5; background: var(--layout-header-bg-color); + padding-top: 1rem; + padding-bottom: 1rem; + @media only screen and ${media.md} { padding: ${LAYOUT.desktop.paddingVertical} ${LAYOUT.desktop.paddingHorizontal}; height: ${LAYOUT.desktop.headerHeight}; diff --git a/src/components/layouts/main/sider/MainSider/MainSider.styles.ts b/src/components/layouts/main/sider/MainSider/MainSider.styles.ts index f2709efc2..3d5fd8ba4 100644 --- a/src/components/layouts/main/sider/MainSider/MainSider.styles.ts +++ b/src/components/layouts/main/sider/MainSider/MainSider.styles.ts @@ -6,7 +6,10 @@ import { BaseButton } from '@app/components/common/BaseButton/BaseButton'; import { BaseLayout } from '@app/components/common/BaseLayout/BaseLayout'; export const Sider = styled(BaseLayout.Sider)` - position: fixed; + &.ant-layout-sider { + position: fixed; + } + overflow: visible; right: 0; z-index: 5; @@ -21,7 +24,9 @@ export const Sider = styled(BaseLayout.Sider)` } @media only screen and ${media.xl} { - position: unset; + &.ant-layout-sider { + position: unset; + } } `; @@ -41,13 +46,13 @@ export const CollapseButton = styled(BaseButton)<{ $isCollapsed: boolean }>` color: var(--text-secondary-color); - &:hover { + &.ant-btn:not(:disabled):hover { color: var(--text-secondary-color); background: var(--primary-color); border: 1px solid var(--border-color); } - &:focus { + &.ant-btn:not(:disabled):focus { color: var(--text-secondary-color); background: var(--primary-color); border: 1px solid var(--border-color); diff --git a/src/components/layouts/main/sider/SiderMenu/SiderMenu.styles.ts b/src/components/layouts/main/sider/SiderMenu/SiderMenu.styles.ts index 599988b5d..886fbd506 100644 --- a/src/components/layouts/main/sider/SiderMenu/SiderMenu.styles.ts +++ b/src/components/layouts/main/sider/SiderMenu/SiderMenu.styles.ts @@ -14,6 +14,7 @@ export const Menu = styled(BaseMenu)` .ant-menu-item, .ant-menu-submenu { font-size: ${FONT_SIZE.xs}; + border-radius: 0; } .ant-menu-item-icon { diff --git a/src/components/medical-dashboard/treatmentCard/TreatmentCalendar/TreatmentCalendar.styles.ts b/src/components/medical-dashboard/treatmentCard/TreatmentCalendar/TreatmentCalendar.styles.ts index 3e1d1c26a..69523bac0 100644 --- a/src/components/medical-dashboard/treatmentCard/TreatmentCalendar/TreatmentCalendar.styles.ts +++ b/src/components/medical-dashboard/treatmentCard/TreatmentCalendar/TreatmentCalendar.styles.ts @@ -39,7 +39,7 @@ export const Event = styled.div` border-radius: ${BORDER_RADIUS}; `; -export const TreatmentCalendar = styled(BaseCalendar)` +export const Calendar = styled(BaseCalendar)` .ant-picker-calendar-header { display: none; } diff --git a/src/components/medical-dashboard/treatmentCard/TreatmentCalendar/TreatmentCalendar.tsx b/src/components/medical-dashboard/treatmentCard/TreatmentCalendar/TreatmentCalendar.tsx index b0d7acbfe..80499a964 100644 --- a/src/components/medical-dashboard/treatmentCard/TreatmentCalendar/TreatmentCalendar.tsx +++ b/src/components/medical-dashboard/treatmentCard/TreatmentCalendar/TreatmentCalendar.tsx @@ -51,7 +51,7 @@ export const TreatmentCalendar: React.FC = ({ - { const today = Dates.getToday(); 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..cdf60c4a3 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-ghost { + color: var(--text-secondary-color); + } `; diff --git a/src/components/profile/profileCard/ProfileNav/ProfileNav.styles.ts b/src/components/profile/profileCard/ProfileNav/ProfileNav.styles.ts index f5272b8de..20c521e48 100644 --- a/src/components/profile/profileCard/ProfileNav/ProfileNav.styles.ts +++ b/src/components/profile/profileCard/ProfileNav/ProfileNav.styles.ts @@ -18,7 +18,7 @@ export const Btn = styled(BaseButton)` justify-content: unset !important; width: 100%; - &:hover { + &.ant-btn:not(:disabled):hover { background-color: rgba(var(--primary-rgb-color), 0.05); } diff --git a/src/pages/uiComponentsPages/forms/DateTimePickersPage.tsx b/src/pages/uiComponentsPages/forms/DateTimePickersPage.tsx index 00d6a1f6f..5c6b9a734 100644 --- a/src/pages/uiComponentsPages/forms/DateTimePickersPage.tsx +++ b/src/pages/uiComponentsPages/forms/DateTimePickersPage.tsx @@ -1,7 +1,5 @@ import { useTranslation } from 'react-i18next'; import { BaseDatePicker } from '@app/components/common/pickers/BaseDatePicker'; -import { BaseRangePicker } from '@app/components/common/pickers/BaseRangePicker'; -import { BaseTimePicker } from '@app/components/common/pickers/BaseTimePicker'; 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'; @@ -27,13 +25,13 @@ const DateTimePickersPage: React.FC = () => { - + - + - + diff --git a/src/styles/GlobalStyle.ts b/src/styles/GlobalStyle.ts index 3c3df7779..f5b49c9dd 100644 --- a/src/styles/GlobalStyle.ts +++ b/src/styles/GlobalStyle.ts @@ -62,6 +62,122 @@ export default styled.createGlobalStyle` } } + .ant-input:hover, + .ant-input-affix-wrapper:not(.ant-input-affix-wrapper-disabled):hover { + border-color: var(--ant-primary-5); + } + + .ant-input:focus { + box-shadow: 0 0 0 2px var(--ant-primary-color-outline); + } + + .ant-modal-confirm-success, + .ant-modal-confirm-info, + .ant-modal-confirm-warning, + .ant-modal-confirm-error { + .ant-modal-content { + background-color: var(--background-color); + + .ant-modal-confirm-title { + color: var(--heading-color); + font-size: ${FONT_SIZE.lg}; + } + + .ant-modal-confirm-content { + color: var(--text-main-color); + font-size: ${FONT_SIZE.md}; + } + + .ant-modal-confirm-btns { + .ant-btn.ant-btn-primary { + font-size: ${FONT_SIZE.md}; + font-weight: ${FONT_WEIGHT.semibold}; + background-color: var(--ant-primary-color); + border-color: var(--ant-primary-color); + height: 50px; + } + } + } + } + + .ant-picker-dropdown { + .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:not(.ant-picker-cell-in-range):not( + .ant-picker-cell-range-start + ):not(.ant-picker-cell-range-end)::after, + .ant-picker-cell-in-view.ant-picker-cell-range-hover-end:not(.ant-picker-cell-in-range):not( + .ant-picker-cell-range-start + ):not(.ant-picker-cell-range-end)::after, + .ant-picker-cell-in-view.ant-picker-cell-range-hover-start.ant-picker-cell-range-start-single::after, + .ant-picker-cell-in-view.ant-picker-cell-range-hover-start.ant-picker-cell-range-start.ant-picker-cell-range-end.ant-picker-cell-range-end-near-hover::after, + .ant-picker-cell-in-view.ant-picker-cell-range-hover-end.ant-picker-cell-range-start.ant-picker-cell-range-end.ant-picker-cell-range-start-near-hover::after, + .ant-picker-cell-in-view.ant-picker-cell-range-hover-end.ant-picker-cell-range-end-single::after, + .ant-picker-cell-in-view.ant-picker-cell-range-hover:not(.ant-picker-cell-in-range)::after { + border-color: var(--ant-primary-5); + border-inline-color: var(--ant-primary-5); + } + + .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover::before, + .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-start::before, + .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-end::before, + .ant-picker-cell-in-view.ant-picker-cell-range-start.ant-picker-cell-range-hover::before, + .ant-picker-cell-in-view.ant-picker-cell-range-end.ant-picker-cell-range-hover::before, + .ant-picker-cell-in-view.ant-picker-cell-range-start:not( + .ant-picker-cell-range-start-single + ).ant-picker-cell-range-hover-start::before, + .ant-picker-cell-in-view.ant-picker-cell-range-end:not( + .ant-picker-cell-range-end-single + ).ant-picker-cell-range-hover-end::before, + .ant-picker-panel + > :not(.ant-picker-date-panel) + .ant-picker-dropdown + .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-start::before, + .ant-picker-panel + > :not(.ant-picker-date-panel) + .ant-picker-dropdown + .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-end::before { + background-color: var(--ant-primary-5); + } + + .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover::before, + .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-start::before, + .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-end::before, + .ant-picker-cell-in-view.ant-picker-cell-range-start.ant-picker-cell-range-hover::before, + .ant-picker-cell-in-view.ant-picker-cell-range-end.ant-picker-cell-range-hover::before, + .ant-picker-cell-in-view.ant-picker-cell-range-start:not( + .ant-picker-cell-range-start-single + ).ant-picker-cell-range-hover-start::before, + .ant-picker-cell-in-view.ant-picker-cell-range-end:not( + .ant-picker-cell-range-end-single + ).ant-picker-cell-range-hover-end::before, + .ant-picker-panel + > :not(.ant-picker-date-panel) + .ant-picker-dropdown + .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-start::before, + .ant-picker-panel + > :not(.ant-picker-date-panel) + .ant-picker-dropdown + .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-end::before { + background-color: var(--ant-primary-5); + } + + .ant-picker-date-panel { + .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-start, + .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-end { + .ant-picker-cell-inner::after { + background-color: var(--ant-primary-5); + } + } + } + } + + .ant-breadcrumb { + li:last-child { + .ant-breadcrumb-link { + color: var(--text-main-color); + } + } + } + .ant-picker-cell { color: var(--text-main-color); } diff --git a/src/styles/ThemeConfigProvider.tsx b/src/styles/ThemeConfigProvider.tsx index 0d45bf721..a3a987dea 100644 --- a/src/styles/ThemeConfigProvider.tsx +++ b/src/styles/ThemeConfigProvider.tsx @@ -1,229 +1,267 @@ import { PropsWithChildren } from 'react'; import { ConfigProvider } from 'antd'; import { ThemeType } from '@app/interfaces/interfaces'; -import { hexToRGB } from '@app/utils/utils'; -import { antThemeObject, themeObject } from '@app/styles/themes/themeVariables'; -import { FONT_SIZE, BORDER_RADIUS, FONT_WEIGHT } from '@app/styles/themes/constants'; +import { FONT_SIZE, BORDER_RADIUS, FONT_WEIGHT, BREAKPOINTS } from '@app/styles/themes/constants'; export interface ThemeConfigProviderProps extends PropsWithChildren { theme: ThemeType; } export const ThemeConfigProvider = ({ theme, children }: ThemeConfigProviderProps): JSX.Element => { - const currentTheme = themeObject[theme]; return ( From 0840ef9661797226c0d6d4ff22ef4e692da3ce7d Mon Sep 17 00:00:00 2001 From: Alexandr Buhlak <48954743+saha80@users.noreply.github.com> Date: Fri, 17 Mar 2023 23:22:56 +0200 Subject: [PATCH 03/81] move styles from GlobalStyle to components' styles --- .../BaseBreadcrumb/BaseBreadcrumb.styles.tsx | 12 ++ .../common/BaseBreadcrumb/BaseBreadcrumb.tsx | 2 +- .../common/BaseModal/BaseModal.styles.tsx | 43 +++++++ src/components/common/BaseModal/BaseModal.tsx | 17 +-- src/styles/GlobalStyle.ts | 107 ------------------ src/styles/ThemeConfigProvider.tsx | 16 ++- 6 files changed, 75 insertions(+), 122 deletions(-) create mode 100644 src/components/common/BaseBreadcrumb/BaseBreadcrumb.styles.tsx create mode 100644 src/components/common/BaseModal/BaseModal.styles.tsx diff --git a/src/components/common/BaseBreadcrumb/BaseBreadcrumb.styles.tsx b/src/components/common/BaseBreadcrumb/BaseBreadcrumb.styles.tsx new file mode 100644 index 000000000..e2c0c35ef --- /dev/null +++ b/src/components/common/BaseBreadcrumb/BaseBreadcrumb.styles.tsx @@ -0,0 +1,12 @@ +import styled from 'styled-components'; +import { Breadcrumb as AntBreadcrumb } from 'antd'; + +export const BaseBreadcrumb = styled(AntBreadcrumb)` + &.ant-breadcrumb { + li:last-child { + .ant-breadcrumb-link { + color: var(--text-main-color); + } + } + } +`; diff --git a/src/components/common/BaseBreadcrumb/BaseBreadcrumb.tsx b/src/components/common/BaseBreadcrumb/BaseBreadcrumb.tsx index 0949ecab7..d833dfa1e 100644 --- a/src/components/common/BaseBreadcrumb/BaseBreadcrumb.tsx +++ b/src/components/common/BaseBreadcrumb/BaseBreadcrumb.tsx @@ -1,2 +1,2 @@ -export { Breadcrumb as BaseBreadcrumb } from 'antd'; +export { BaseBreadcrumb } from './BaseBreadcrumb.styles'; export type { BreadcrumbProps as BaseBreadcrumbProps } from 'antd'; diff --git a/src/components/common/BaseModal/BaseModal.styles.tsx b/src/components/common/BaseModal/BaseModal.styles.tsx new file mode 100644 index 000000000..cf6040360 --- /dev/null +++ b/src/components/common/BaseModal/BaseModal.styles.tsx @@ -0,0 +1,43 @@ +import styled from 'styled-components'; +import { FONT_SIZE, FONT_WEIGHT } from '@app/styles/themes/constants'; +import confirm, { ModalStaticFunctions, withInfo, withSuccess, withWarn, withError } from 'antd/es/modal/confirm'; + +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: var(--background-color); + + .ant-modal-confirm-title { + color: var(--heading-color); + font-size: ${FONT_SIZE.lg}; + } + + .ant-modal-confirm-content { + color: var(--text-main-color); + font-size: ${FONT_SIZE.md}; + } + + .ant-modal-confirm-btns { + .ant-btn.ant-btn-primary { + font-size: ${FONT_SIZE.md}; + font-weight: ${FONT_WEIGHT.semibold}; + background-color: var(--ant-primary-color); + border-color: var(--ant-primary-color); + height: 50px; + } + } + } + } +`; + +const modalRender = (node: React.ReactNode) => {node}; + +export const ModalTypes: Pick = { + info: (props) => confirm({ modalRender, ...withInfo(props) }), + success: (props) => confirm({ modalRender, ...withSuccess(props) }), + warning: (props) => confirm({ modalRender, ...withWarn(props) }), + error: (props) => confirm({ modalRender, ...withError(props) }), +}; diff --git a/src/components/common/BaseModal/BaseModal.tsx b/src/components/common/BaseModal/BaseModal.tsx index 92130cb3e..f4ca8dc25 100644 --- a/src/components/common/BaseModal/BaseModal.tsx +++ b/src/components/common/BaseModal/BaseModal.tsx @@ -1,16 +1,17 @@ import React from 'react'; import { Modal, ModalProps } from 'antd'; import { modalSizes } from 'constants/modalSizes'; +import { ModalTypes } from './BaseModal.styles'; 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; + info: typeof ModalTypes.info; + success: typeof ModalTypes.success; + warning: typeof ModalTypes.warning; + error: typeof ModalTypes.error; } export const BaseModal: BaseModalInterface = ({ size = 'medium', children, ...props }) => { @@ -23,7 +24,7 @@ export const BaseModal: BaseModalInterface = ({ size = 'medium', children, ...pr ); }; -BaseModal.info = Modal.info; -BaseModal.success = Modal.success; -BaseModal.warning = Modal.warning; -BaseModal.error = Modal.error; +BaseModal.info = ModalTypes.info; +BaseModal.success = ModalTypes.success; +BaseModal.warning = ModalTypes.warning; +BaseModal.error = ModalTypes.error; diff --git a/src/styles/GlobalStyle.ts b/src/styles/GlobalStyle.ts index f5b49c9dd..2697126c9 100644 --- a/src/styles/GlobalStyle.ts +++ b/src/styles/GlobalStyle.ts @@ -71,113 +71,6 @@ export default styled.createGlobalStyle` box-shadow: 0 0 0 2px var(--ant-primary-color-outline); } - .ant-modal-confirm-success, - .ant-modal-confirm-info, - .ant-modal-confirm-warning, - .ant-modal-confirm-error { - .ant-modal-content { - background-color: var(--background-color); - - .ant-modal-confirm-title { - color: var(--heading-color); - font-size: ${FONT_SIZE.lg}; - } - - .ant-modal-confirm-content { - color: var(--text-main-color); - font-size: ${FONT_SIZE.md}; - } - - .ant-modal-confirm-btns { - .ant-btn.ant-btn-primary { - font-size: ${FONT_SIZE.md}; - font-weight: ${FONT_WEIGHT.semibold}; - background-color: var(--ant-primary-color); - border-color: var(--ant-primary-color); - height: 50px; - } - } - } - } - - .ant-picker-dropdown { - .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:not(.ant-picker-cell-in-range):not( - .ant-picker-cell-range-start - ):not(.ant-picker-cell-range-end)::after, - .ant-picker-cell-in-view.ant-picker-cell-range-hover-end:not(.ant-picker-cell-in-range):not( - .ant-picker-cell-range-start - ):not(.ant-picker-cell-range-end)::after, - .ant-picker-cell-in-view.ant-picker-cell-range-hover-start.ant-picker-cell-range-start-single::after, - .ant-picker-cell-in-view.ant-picker-cell-range-hover-start.ant-picker-cell-range-start.ant-picker-cell-range-end.ant-picker-cell-range-end-near-hover::after, - .ant-picker-cell-in-view.ant-picker-cell-range-hover-end.ant-picker-cell-range-start.ant-picker-cell-range-end.ant-picker-cell-range-start-near-hover::after, - .ant-picker-cell-in-view.ant-picker-cell-range-hover-end.ant-picker-cell-range-end-single::after, - .ant-picker-cell-in-view.ant-picker-cell-range-hover:not(.ant-picker-cell-in-range)::after { - border-color: var(--ant-primary-5); - border-inline-color: var(--ant-primary-5); - } - - .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover::before, - .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-start::before, - .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-end::before, - .ant-picker-cell-in-view.ant-picker-cell-range-start.ant-picker-cell-range-hover::before, - .ant-picker-cell-in-view.ant-picker-cell-range-end.ant-picker-cell-range-hover::before, - .ant-picker-cell-in-view.ant-picker-cell-range-start:not( - .ant-picker-cell-range-start-single - ).ant-picker-cell-range-hover-start::before, - .ant-picker-cell-in-view.ant-picker-cell-range-end:not( - .ant-picker-cell-range-end-single - ).ant-picker-cell-range-hover-end::before, - .ant-picker-panel - > :not(.ant-picker-date-panel) - .ant-picker-dropdown - .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-start::before, - .ant-picker-panel - > :not(.ant-picker-date-panel) - .ant-picker-dropdown - .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-end::before { - background-color: var(--ant-primary-5); - } - - .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover::before, - .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-start::before, - .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-end::before, - .ant-picker-cell-in-view.ant-picker-cell-range-start.ant-picker-cell-range-hover::before, - .ant-picker-cell-in-view.ant-picker-cell-range-end.ant-picker-cell-range-hover::before, - .ant-picker-cell-in-view.ant-picker-cell-range-start:not( - .ant-picker-cell-range-start-single - ).ant-picker-cell-range-hover-start::before, - .ant-picker-cell-in-view.ant-picker-cell-range-end:not( - .ant-picker-cell-range-end-single - ).ant-picker-cell-range-hover-end::before, - .ant-picker-panel - > :not(.ant-picker-date-panel) - .ant-picker-dropdown - .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-start::before, - .ant-picker-panel - > :not(.ant-picker-date-panel) - .ant-picker-dropdown - .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-end::before { - background-color: var(--ant-primary-5); - } - - .ant-picker-date-panel { - .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-start, - .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-end { - .ant-picker-cell-inner::after { - background-color: var(--ant-primary-5); - } - } - } - } - - .ant-breadcrumb { - li:last-child { - .ant-breadcrumb-link { - color: var(--text-main-color); - } - } - } - .ant-picker-cell { color: var(--text-main-color); } diff --git a/src/styles/ThemeConfigProvider.tsx b/src/styles/ThemeConfigProvider.tsx index a3a987dea..7dfeda576 100644 --- a/src/styles/ThemeConfigProvider.tsx +++ b/src/styles/ThemeConfigProvider.tsx @@ -3,6 +3,8 @@ import { ConfigProvider } from 'antd'; import { ThemeType } from '@app/interfaces/interfaces'; import { FONT_SIZE, BORDER_RADIUS, FONT_WEIGHT, BREAKPOINTS } from '@app/styles/themes/constants'; +import { themeObject } from './themes/themeVariables'; +import { hexToRGB } from '@app/utils/utils'; export interface ThemeConfigProviderProps extends PropsWithChildren { theme: ThemeType; @@ -43,7 +45,7 @@ export const ThemeConfigProvider = ({ theme, children }: ThemeConfigProviderProp colorBgElevated: 'var(--background-color)', - colorFillAlter: `rgba(var(--primary-rgb-color), 0.05)`, + colorFillAlter: `rgba(${hexToRGB(themeObject[theme].primary)}, 0.05)`, colorTextPlaceholder: 'var(--input-placeholder-color)', @@ -181,9 +183,11 @@ export const ThemeConfigProvider = ({ theme, children }: ThemeConfigProviderProp colorBorderSecondary: '#b3cbe1', colorTextHeading: 'var(--primary-color)', + colorFillAlter: `rgba(${hexToRGB(themeObject[theme].primary)}, 0.05)`, + controlItemBgActive: 'var(--ant-primary-1)', - controlItemBgActiveHover: `rgba(var(--primary-rgb-color), 0.12)`, - colorBgContainer: `rgba(var(--primary-rgb-color), 0.003)`, + controlItemBgActiveHover: `rgba(${hexToRGB(themeObject[theme].primary)}, 0.12)`, + colorBgContainer: `rgba(${hexToRGB(themeObject[theme].primary)}, 0.003)`, }, Checkbox: { // @checkbox-check-bg: transparent; @@ -292,7 +296,7 @@ export const ThemeConfigProvider = ({ theme, children }: ThemeConfigProviderProp colorTextDisabled: 'var(--disabled-color)', fontWeightStrong: parseInt(FONT_WEIGHT.semibold), - colorFillAlter: `rgba(var(--primary-rgb-color), 0.05)`, + colorFillAlter: `rgba(${hexToRGB(themeObject[theme].primary)}, 0.05)`, }, InputNumber: { colorPrimary: 'var(--ant-primary-5)', @@ -374,7 +378,7 @@ export const ThemeConfigProvider = ({ theme, children }: ThemeConfigProviderProp }, DatePicker: { colorIcon: 'var(--text-light-color)', - colorPrimary: 'var(--ant-primary-color)', + colorPrimary: '#1c68a6', // var(--ant-primary-5) in light theme controlItemBgActive: 'var(--ant-primary-1)', colorTextPlaceholder: 'var(--input-placeholder-color)', fontWeightStrong: parseInt(FONT_WEIGHT.medium), @@ -385,7 +389,7 @@ export const ThemeConfigProvider = ({ theme, children }: ThemeConfigProviderProp controlHeight: 34, }, Upload: { - colorFillAlter: `rgba(var(--primary-rgb-color), 0.05)`, + colorFillAlter: `rgba(${hexToRGB(themeObject[theme].primary)}, 0.05)`, colorPrimaryHover: 'var(--ant-primary-5)', }, }, From d0bde4758abbadf226034ab3ad9aaaeb192559f3 Mon Sep 17 00:00:00 2001 From: Alexandr Buhlak <48954743+saha80@users.noreply.github.com> Date: Mon, 10 Apr 2023 14:27:06 +0300 Subject: [PATCH 04/81] move some global styles to components --- .../components/GithubButton/GitHubButton.tsx | 6 +- src/controllers/notificationController.tsx | 89 ++++++- src/styles/GlobalStyle.ts | 72 +----- src/styles/ThemeConfigProvider.tsx | 223 +++++++----------- 4 files changed, 171 insertions(+), 219 deletions(-) diff --git a/src/components/header/components/GithubButton/GitHubButton.tsx b/src/components/header/components/GithubButton/GitHubButton.tsx index aa09e93da..c84c5b2b2 100644 --- a/src/components/header/components/GithubButton/GitHubButton.tsx +++ b/src/components/header/components/GithubButton/GitHubButton.tsx @@ -18,9 +18,9 @@ const Button = styled(BaseButton)<{ $isDark: boolean }>` align-items: center; - &:not(:disabled):hover, - &:not(:disabled):active, - &:not(:disabled):focus { + &.ant-btn-default:not(:disabled):hover, + &.ant-btn-default:not(:disabled):active, + &.ant-btn-default:not(:disabled):focus { color: ${(props) => BASE_COLORS[props.$isDark ? 'black' : 'white']}; background: ${(props) => BASE_COLORS[props.$isDark ? 'white' : 'black']}; } diff --git a/src/controllers/notificationController.tsx b/src/controllers/notificationController.tsx index 66978a20b..82cb93f49 100644 --- a/src/controllers/notificationController.tsx +++ b/src/controllers/notificationController.tsx @@ -3,6 +3,7 @@ import { notification } from 'antd'; import styled from 'styled-components'; import { CheckCircleFilled, ExclamationCircleFilled, InfoCircleFilled, StopFilled } from '@ant-design/icons'; import { ArgsProps } from 'antd/lib/notification/interface'; +import { FONT_FAMILY, FONT_SIZE, FONT_WEIGHT } from '@app/styles/themes/constants'; interface IconWrapperProps { $isOnlyTitle: boolean; @@ -13,10 +14,74 @@ const IconWrapper = styled.div` line-height: 2rem; `; +const Message = styled.div` + &.title { + font-size: ${FONT_SIZE.xxl}; + height: 3rem; + margin-left: 1.5rem; + display: flex; + align-items: center; + font-weight: ${FONT_WEIGHT.bold}; + font-family: '${FONT_FAMILY.main}', sans-serif; + + &.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}; + } + } + + &[class^='ant-notification'], + &[class*=' ant-notification'] { + font-family: '${FONT_FAMILY.main}', sans-serif; + } + + .ant-notification-notice.ant-notification-notice-success &.title { + color: var(--success-color); + } + + .ant-notification-notice.ant-notification-notice-info &.title { + color: var(--primary-color); + } + + .ant-notification-notice.ant-notification-notice-warning &.title { + color: var(--warning-color); + } + + .ant-notification-notice.ant-notification-notice-error &.title { + color: var(--error-color); + } +`; + +const Description = styled.div` + color: #404040; + font-size: ${FONT_SIZE.md}; + font-weight: ${FONT_WEIGHT.semibold}; + line-height: 1.375rem; + font-family: '${FONT_FAMILY.main}', sans-serif; +`; + const EmptyDescription = styled.div` margin-top: -0.75rem; `; +const SuccessIcon = styled(CheckCircleFilled)` + color: var(--success-color); +`; +const InfoIcon = styled(InfoCircleFilled)` + color: var(--primary-color); +`; +const WarningIcon = styled(ExclamationCircleFilled)` + color: var(--warning-color); +`; + +const ErrorIcon = styled(StopFilled)` + color: var(--error-color); +`; + type NotificationProps = ArgsProps; const openSuccessNotification = (config: NotificationProps): void => { @@ -24,11 +89,11 @@ const openSuccessNotification = (config: NotificationProps): void => { ...config, icon: ( - + ), - message:
{config.message}
, - description: config.description ?
{config.description}
: , + message: {config.message}, + description: config.description ? {config.description} : , className: config.description ? '' : 'notification-without-description', }); }; @@ -38,11 +103,11 @@ const openInfoNotification = (config: NotificationProps): void => { ...config, icon: ( - + ), - message:
{config.message}
, - description: config.description ?
{config.description}
: , + message: {config.message}, + description: config.description ? {config.description} : , className: config.description ? '' : 'notification-without-description', }); }; @@ -52,11 +117,11 @@ const openWarningNotification = (config: NotificationProps): void => { ...config, icon: ( - + ), - message:
{config.message}
, - description: config.description ?
{config.description}
: , + message: {config.message}, + description: config.description ? {config.description} : , className: config.description ? '' : 'notification-without-description', }); }; @@ -66,11 +131,11 @@ const openErrorNotification = (config: NotificationProps): void => { ...config, icon: ( - + ), - message:
{config.message}
, - description: config.description ?
{config.description}
: , + message: {config.message}, + description: config.description ? {config.description} : , className: config.description ? '' : 'notification-without-description', }); }; diff --git a/src/styles/GlobalStyle.ts b/src/styles/GlobalStyle.ts index 2697126c9..960d030c8 100644 --- a/src/styles/GlobalStyle.ts +++ b/src/styles/GlobalStyle.ts @@ -1,6 +1,6 @@ -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 { BREAKPOINTS, FONT_WEIGHT, media } from './themes/constants'; import { lightThemeVariables, darkThemeVariables, @@ -8,8 +8,6 @@ import { antOverrideCssVariables, } from './themes/themeVariables'; -const styled = { createGlobalStyle }; // https://github.com/prettier/prettier/issues/11196#issuecomment-951878725 - export default styled.createGlobalStyle` ${resetCss} @@ -62,15 +60,6 @@ export default styled.createGlobalStyle` } } - .ant-input:hover, - .ant-input-affix-wrapper:not(.ant-input-affix-wrapper-disabled):hover { - border-color: var(--ant-primary-5); - } - - .ant-input:focus { - box-shadow: 0 0 0 2px var(--ant-primary-color-outline); - } - .ant-picker-cell { color: var(--text-main-color); } @@ -124,81 +113,24 @@ export default styled.createGlobalStyle` } } - .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}; - } - } - - .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-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); - } - } - - .success-icon { - color: var(--success-color); - } - - .info-icon { - color: var(--primary-color); - } - - .warning-icon { - color: var(--warning-color); - } - - .error-icon { - color: var(--error-color); } } diff --git a/src/styles/ThemeConfigProvider.tsx b/src/styles/ThemeConfigProvider.tsx index 7dfeda576..3e6de87b6 100644 --- a/src/styles/ThemeConfigProvider.tsx +++ b/src/styles/ThemeConfigProvider.tsx @@ -2,7 +2,14 @@ import { PropsWithChildren } from 'react'; import { ConfigProvider } from 'antd'; import { ThemeType } from '@app/interfaces/interfaces'; -import { FONT_SIZE, BORDER_RADIUS, FONT_WEIGHT, BREAKPOINTS } from '@app/styles/themes/constants'; +import { + FONT_FAMILY, + FONT_SIZE, + FONT_WEIGHT, + BORDER_RADIUS, + BREAKPOINTS, + BASE_COLORS, +} from '@app/styles/themes/constants'; import { themeObject } from './themes/themeVariables'; import { hexToRGB } from '@app/utils/utils'; @@ -10,44 +17,45 @@ export interface ThemeConfigProviderProps extends PropsWithChildren { theme: ThemeType; } +const remToPixels = (s: `${number}rem`) => parseFloat(s) * 16; + export const ThemeConfigProvider = ({ theme, children }: ThemeConfigProviderProps): JSX.Element => { + const currentTheme = themeObject[theme]; + + const colorFillAlter = `rgba(${hexToRGB(currentTheme.primary)}, 0.05)`; + + const fontFamily = `'${FONT_FAMILY.main}', sans-serif`; + return ( Date: Wed, 19 Apr 2023 16:41:30 +0300 Subject: [PATCH 05/81] fix errors in the console --- package.json | 2 +- src/store/slices/pwaSlice.ts | 14 +- src/store/store.ts | 8 +- yarn.lock | 296 ++++++++++++++++++++++------------- 4 files changed, 206 insertions(+), 114 deletions(-) diff --git a/package.json b/package.json index e0a3ea61a..08c8ad558 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,7 @@ "@lit-labs/react": "^1.0.2", "@react-google-maps/api": "^2.18.1", "@reduxjs/toolkit": "^1.7.1", - "antd": "^5.2.3", + "antd": "^5.2.4", "antd-mask-input": "^2.0.7", "axios": "^0.24.0", "axios-mock-adapter": "^1.20.0", 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/yarn.lock b/yarn.lock index d97c14fe6..e37e92249 100644 --- a/yarn.lock +++ b/yarn.lock @@ -24,9 +24,9 @@ __metadata: languageName: node linkType: hard -"@ant-design/cssinjs@npm:^1.5.6": - version: 1.6.1 - resolution: "@ant-design/cssinjs@npm:1.6.1" +"@ant-design/cssinjs@npm:^1.9.0": + version: 1.9.0 + resolution: "@ant-design/cssinjs@npm:1.9.0" dependencies: "@babel/runtime": ^7.11.1 "@emotion/hash": ^0.8.0 @@ -38,7 +38,7 @@ __metadata: peerDependencies: react: ">=16.0.0" react-dom: ">=16.0.0" - checksum: 0e702668610ca8a0b35725f14403cc3482bfc5a1ff9c39c57732625ea828d5071551860cd6ad00ca5a1e36e1c5f158426602f38c443c9945a9590194c9cd882a + checksum: e675439db395876c5686fadb4c0dc8559dcbc6579f1091ef15b07749d23ea8b505fc357e943696c1c455207fa24eb3030eb92dd018522a1c29683263fca8a3cf languageName: node linkType: hard @@ -2259,19 +2259,51 @@ __metadata: languageName: node linkType: hard -"@rc-component/tour@npm:~1.6.0": - version: 1.6.0 - resolution: "@rc-component/tour@npm:1.6.0" +"@rc-component/portal@npm:^1.1.0": + 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.8.0": + version: 1.8.0 + resolution: "@rc-component/tour@npm:1.8.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-trigger: ^5.3.4 rc-util: ^5.24.4 peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: f8ba0b4326ec69d3f3194ea73e2cb1333b2fe05faebaf452acfeac4d999d4eca06fdb9efc0f1096ed6cc94c529274552b23e687aa172117ee07fed7e8d593513 + checksum: 58fa0e23b84e581298c0d4f5e0ac3a30eddb6c101a9d3405a3189a20c787254b7f416ecff0e383ffded554ad93f8f732052623c6eaf59f5270f51bd0c4782058 + languageName: node + linkType: hard + +"@rc-component/trigger@npm:^1.0.4, @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 @@ -3859,53 +3891,53 @@ __metadata: languageName: node linkType: hard -"antd@npm:^5.2.3": - version: 5.2.3 - resolution: "antd@npm:5.2.3" +"antd@npm:^5.2.4": + version: 5.4.3 + resolution: "antd@npm:5.4.3" dependencies: "@ant-design/colors": ^7.0.0 - "@ant-design/cssinjs": ^1.5.6 + "@ant-design/cssinjs": ^1.9.0 "@ant-design/icons": ^5.0.0 "@ant-design/react-slick": ~1.0.0 "@babel/runtime": ^7.18.3 "@ctrl/tinycolor": ^3.6.0 "@rc-component/mutate-observer": ^1.0.0 - "@rc-component/tour": ~1.6.0 + "@rc-component/tour": ~1.8.0 + "@rc-component/trigger": ^1.7.0 classnames: ^2.2.6 copy-to-clipboard: ^3.2.0 dayjs: ^1.11.1 qrcode.react: ^3.1.0 - rc-cascader: ~3.8.0 - rc-checkbox: ~2.3.0 + rc-cascader: ~3.10.0 + rc-checkbox: ~3.0.0 rc-collapse: ~3.5.2 - rc-dialog: ~9.0.2 + rc-dialog: ~9.1.0 rc-drawer: ~6.1.1 rc-dropdown: ~4.0.0 - rc-field-form: ~1.27.0 - rc-image: ~5.13.0 - rc-input: ~0.2.1 + rc-field-form: ~1.29.0 + rc-image: ~5.16.0 + rc-input: ~1.0.4 rc-input-number: ~7.4.0 - rc-mentions: ~2.0.0 - rc-menu: ~9.8.2 - rc-motion: ^2.6.1 + rc-mentions: ~2.2.0 + rc-menu: ~9.8.3 + rc-motion: ^2.7.3 rc-notification: ~5.0.0 - rc-pagination: ~3.2.0 - rc-picker: ~3.1.1 + rc-pagination: ~3.3.1 + rc-picker: ~3.6.1 rc-progress: ~3.4.1 - rc-rate: ~2.9.0 + rc-rate: ~2.10.0 rc-resize-observer: ^1.2.0 rc-segmented: ~2.1.2 - rc-select: ~14.2.0 + rc-select: ~14.4.3 rc-slider: ~10.1.0 rc-steps: ~6.0.0 rc-switch: ~4.0.0 - rc-table: ~7.30.2 + rc-table: ~7.31.0 rc-tabs: ~12.5.6 - rc-textarea: ~1.0.0 - rc-tooltip: ~5.3.1 + rc-textarea: ~1.2.2 + rc-tooltip: ~6.0.0 rc-tree: ~5.7.0 - rc-tree-select: ~5.6.0 - rc-trigger: ^5.3.4 + rc-tree-select: ~5.8.0 rc-upload: ~4.3.0 rc-util: ^5.27.0 scroll-into-view-if-needed: ^3.0.3 @@ -3913,7 +3945,7 @@ __metadata: peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: 01024f7e2d091bfdb261a47e9ac50ae73a8dd3000f3b4a0c19574bbd02c931da85876e765a16162982329a79008dac98b7457cb4375ec6e8e9d0343ffe8cc9e2 + checksum: 2c155ab2dfdaa5b065aeb81d1b13347b71d2e42374e0614fe4a1de1c1b8d781ac622142c86ea1f99a02b18b335cecfd05df2442869b87891beb7c3930b00028f languageName: node linkType: hard @@ -11018,7 +11050,7 @@ __metadata: "@types/uuid": ^8.3.4 "@typescript-eslint/eslint-plugin": ^5.10.0 "@typescript-eslint/parser": ^5.8.0 - antd: ^5.2.3 + antd: ^5.2.4 antd-mask-input: ^2.0.7 axios: ^0.24.0 axios-mock-adapter: ^1.20.0 @@ -14289,33 +14321,34 @@ __metadata: languageName: node linkType: hard -"rc-cascader@npm:~3.8.0": - version: 3.8.1 - resolution: "rc-cascader@npm:3.8.1" +"rc-cascader@npm:~3.10.0": + version: 3.10.2 + resolution: "rc-cascader@npm:3.10.2" dependencies: "@babel/runtime": ^7.12.5 array-tree-filter: ^2.1.0 classnames: ^2.3.1 - rc-select: ~14.2.0 + rc-select: ~14.4.0 rc-tree: ~5.7.0 rc-util: ^5.6.1 peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: 2c033563c274e0d4f651ecb6a913820a59938912c743f10b67b21c2369a602a77e1196d0479cdaae09098fb206c5cb190b88d5b396fc8a27e689e77187189af8 + checksum: f4df7dc148578410e24521120ef2b96108164a83aa6339e522c682c911cc8368729a8d04ac66bfd7cc785bc69b5ffbbc6f9d98ec11a62f8b273871ad63d4941c 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.0.0": + version: 3.0.0 + resolution: "rc-checkbox@npm:3.0.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: d921c3324f15e98f2222542cb08ae6bf78b5ba1e50d20d6c1f416a4bf73a972c63315542232d7daadaed6dabd720acd62e9782bd3565fd6640a35b7f7795c7d3 languageName: node linkType: hard @@ -14334,9 +14367,9 @@ __metadata: 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.1.0": + version: 9.1.0 + resolution: "rc-dialog@npm:9.1.0" dependencies: "@babel/runtime": ^7.10.1 "@rc-component/portal": ^1.0.0-8 @@ -14346,7 +14379,7 @@ __metadata: peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: 470953c33123c984d7c18685435f08fb7cc4111fdbd01f032a8b111e1b0c06b2a9edcc26bc6895e1a426529e8c2842d6f79441f6bfceaa9c1c273e6b56f0f16d + checksum: 59d2504301a813022b9782e808e61e4e6a55d746a5608d9927b8f6cf4806dd694df7812678f56174419cccb5273d5e302c3178d31a6c5871aa97be5fd086267c languageName: node linkType: hard @@ -14381,9 +14414,9 @@ __metadata: languageName: node linkType: hard -"rc-field-form@npm:~1.27.0": - version: 1.27.4 - resolution: "rc-field-form@npm:1.27.4" +"rc-field-form@npm:~1.29.0": + version: 1.29.2 + resolution: "rc-field-form@npm:1.29.2" dependencies: "@babel/runtime": ^7.18.0 async-validator: ^4.1.0 @@ -14391,24 +14424,24 @@ __metadata: peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: 51873f9ffa94d4b10d04d191adfd35bc3b2f9b8abf70ff07ae648a9965fb97b70e501c05500ebae770d1ba443d5a2c46f4da041ce988d337ff0cabda2656e35e + checksum: 013c8574454e4d7f0bc83a9ad763d21b4623174ce92813a1b3afe63050ab27566af1b2947ca0573ecb7c72a932cf1c4690c7f6b144564fff68cd7f558923b486 languageName: node linkType: hard -"rc-image@npm:~5.13.0": - version: 5.13.0 - resolution: "rc-image@npm:5.13.0" +"rc-image@npm:~5.16.0": + version: 5.16.0 + resolution: "rc-image@npm:5.16.0" dependencies: "@babel/runtime": ^7.11.2 "@rc-component/portal": ^1.0.2 classnames: ^2.2.6 - rc-dialog: ~9.0.0 + rc-dialog: ~9.1.0 rc-motion: ^2.6.2 rc-util: ^5.0.6 peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: 720ecb531474f272366a1769a831f49cc6aeabcb5e0aaa3d2395b3cdc8a8b9b08733e1b92a37c229170fa3520433efbed2d03f573f35df3efffd32998690f68e + checksum: 85ea82d349de80a1d9a926997acc8c8576f659bf7b7edb8d090d758ff0e8b7db8f23ce49e344a9cdaef106d00ae5f97e3e23330c83e4ea8f741567c079187541 languageName: node linkType: hard @@ -14427,9 +14460,9 @@ __metadata: languageName: node linkType: hard -"rc-input@npm:^0.2.1, rc-input@npm:^0.2.2, rc-input@npm:~0.2.1": - version: 0.2.2 - resolution: "rc-input@npm:0.2.2" +"rc-input@npm:~1.0.0, rc-input@npm:~1.0.4": + version: 1.0.4 + resolution: "rc-input@npm:1.0.4" dependencies: "@babel/runtime": ^7.11.1 classnames: ^2.2.1 @@ -14437,29 +14470,29 @@ __metadata: peerDependencies: react: ">=16.0.0" react-dom: ">=16.0.0" - checksum: a1d26a88146f40df70f759688187433c0a43d32ac33abfe9ee598c9290a2a41a41538deb0fdc87de45438bdfb4fbb9b15c4039b61f937d336379d5b67a61bcc2 + checksum: 9fca51ab654fc2b412820a9bfd7e8759799dd74b84bb6b4e3885e2dfcb858d534b4bf8190598cd3e2e9f1887784c69322e5d16266079d87fc2b399da5b6a28bd languageName: node linkType: hard -"rc-mentions@npm:~2.0.0": - version: 2.0.0 - resolution: "rc-mentions@npm:2.0.0" +"rc-mentions@npm:~2.2.0": + version: 2.2.0 + resolution: "rc-mentions@npm:2.2.0" dependencies: "@babel/runtime": ^7.10.1 + "@rc-component/trigger": ^1.5.0 classnames: ^2.2.6 - rc-input: ^0.2.2 + rc-input: ~1.0.0 rc-menu: ~9.8.0 - rc-textarea: ^1.0.0 - rc-trigger: ^5.0.4 + rc-textarea: ~1.2.0 rc-util: ^5.22.5 peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: db88f5edf3434cc3b683660eee734be40fad5b691501caeecb47e5c499ee0371eeb2833f717c558c245a4c0dfabee7fdb94cda9dc14a43b1b25b4e63c6081bdc + checksum: 79c43188e71d0503c8dbb6919dc7cc3147ae96c97c2a78bf7802e45e127f57cf504a0ed5237960a4bdfd46cb28d0aed24ff820ac4a439f1b653210fc3e671e5a languageName: node linkType: hard -"rc-menu@npm:~9.8.0, rc-menu@npm:~9.8.2": +"rc-menu@npm:~9.8.0": version: 9.8.2 resolution: "rc-menu@npm:9.8.2" dependencies: @@ -14476,6 +14509,23 @@ __metadata: languageName: node linkType: hard +"rc-menu@npm:~9.8.3": + version: 9.8.4 + resolution: "rc-menu@npm:9.8.4" + dependencies: + "@babel/runtime": ^7.10.1 + classnames: 2.x + rc-motion: ^2.4.3 + rc-overflow: ^1.2.8 + rc-trigger: ^5.1.2 + rc-util: ^5.27.0 + peerDependencies: + react: ">=16.9.0" + react-dom: ">=16.9.0" + checksum: a646dea20e8f5638aa25da8e9fa552ffb833b13fbfce04b7ae876892e7ea1592143cbf57bcb943fa9ea96f29e65a1987c2aab5c1407874e825e0ba20e16109f2 + languageName: node + linkType: hard + "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.0, rc-motion@npm:^2.6.1, rc-motion@npm:^2.6.2": version: 2.6.3 resolution: "rc-motion@npm:2.6.3" @@ -14490,6 +14540,20 @@ __metadata: languageName: node linkType: hard +"rc-motion@npm:^2.7.3": + version: 2.7.3 + resolution: "rc-motion@npm:2.7.3" + 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: d3b2762a35103938ecc5b1739c100bbf84451c332cf4bb4b71cfa4b3604fbe515ff6f8928e7452f3c88148bb8e5d3480d2a5a06629df02395819724df36a751b + languageName: node + linkType: hard + "rc-notification@npm:~5.0.0": version: 5.0.2 resolution: "rc-notification@npm:5.0.2" @@ -14520,30 +14584,31 @@ __metadata: 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.3.1": + version: 3.3.1 + resolution: "rc-pagination@npm:3.3.1" dependencies: "@babel/runtime": ^7.10.1 classnames: ^2.2.1 peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: deca480696346bbe729945e19fca2b1b50defebd9251ddcc821cc0aa6f58383e9f6fcc7fe4571f48299ba74f30a370687cc099e44e77e2d3d43d4b2d845f91e5 + checksum: 0294cf1a79c054c3eda2f65cdbfdc9322aa2f025200048fe71e85948ff034b3fd7c4fd657ca9980bf5c420e3f7297c4afa79bc337f5056c94f09d89fb4f90bef languageName: node linkType: hard -"rc-picker@npm:~3.1.1": - version: 3.1.5 - resolution: "rc-picker@npm:3.1.5" +"rc-picker@npm:~3.6.1": + version: 3.6.2 + resolution: "rc-picker@npm:3.6.2" dependencies: "@babel/runtime": ^7.10.1 + "@rc-component/trigger": ^1.5.0 classnames: ^2.2.1 - rc-trigger: ^5.0.4 rc-util: ^5.27.0 peerDependencies: date-fns: ">= 2.x" dayjs: ">= 1.x" + luxon: ">= 3.x" moment: ">= 2.x" react: ">=16.9.0" react-dom: ">=16.9.0" @@ -14552,9 +14617,11 @@ __metadata: optional: true dayjs: optional: true + luxon: + optional: true moment: optional: true - checksum: 51ef0ea925a905457e5790483cf118e09b9f8b27004b13cc3b4867acc3b9e1eda45a475cfd34cfd4241ce65248b32f7369e4b429dc9aec2af09774db09b8dbb3 + checksum: 72fd7948bd6a81984a4c0668a0b9e853e2ff250531d55efedb09694ca18a458f484d92d5a7d564b4b34a229f98442ffb567ef30c4c67324f266897890322fe92 languageName: node linkType: hard @@ -14572,9 +14639,9 @@ __metadata: 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.10.0": + version: 2.10.0 + resolution: "rc-rate@npm:2.10.0" dependencies: "@babel/runtime": ^7.10.1 classnames: ^2.2.5 @@ -14582,11 +14649,11 @@ __metadata: peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: 5a7528e4b4245a5090c78eeb248bb8af90843fb6e88105236c3e6b6c6a204c526f87969ee78129c9b7afe9612c69c8a85652714f53b14f9cf5933fda81b8f8fb + checksum: ccc6e683a5297e71c4779358bc21f3908e08deac9f3a6e40b0ce3e3ad8bd430caecb9647258d6f8ba1fac063058b64d34c78b94815de7f104b727c23da5628b5 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": +"rc-resize-observer@npm:^1.0.0, rc-resize-observer@npm:^1.1.0, rc-resize-observer@npm:^1.2.0, rc-resize-observer@npm:^1.3.1": version: 1.3.1 resolution: "rc-resize-observer@npm:1.3.1" dependencies: @@ -14616,21 +14683,21 @@ __metadata: languageName: node linkType: hard -"rc-select@npm:~14.2.0": - version: 14.2.2 - resolution: "rc-select@npm:14.2.2" +"rc-select@npm:~14.4.0, rc-select@npm:~14.4.3": + version: 14.4.3 + resolution: "rc-select@npm:14.4.3" 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-util: ^5.16.1 rc-virtual-list: ^3.4.13 peerDependencies: react: "*" react-dom: "*" - checksum: 2a6f77a92ea2298571d5bf0bb06b08b2a22d8b07fe40603672c432234bb52ee260fdbfbf74ae0aa7b6956ba9816672eafca5d1b23c726e296de35594b82f32ba + checksum: 6f5654bf30e571a52842fe8f5542c6c3c833f4756d5686d82548845a31bf4bd299e2a1931cfdd1b47f522402acd38ffe869ff422a6ade0bffed6167fe7fe2f39 languageName: node linkType: hard @@ -14676,9 +14743,9 @@ __metadata: languageName: node linkType: hard -"rc-table@npm:~7.30.2": - version: 7.30.4 - resolution: "rc-table@npm:7.30.4" +"rc-table@npm:~7.31.0": + version: 7.31.1 + resolution: "rc-table@npm:7.31.1" dependencies: "@babel/runtime": ^7.10.1 "@rc-component/context": ^1.3.0 @@ -14688,7 +14755,7 @@ __metadata: peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: abf1e76ad9090b427850627e44614880d4301e2540054d795ee5abbde552a3d9cb516294c0650480d781e032a6971dbd83387627e02506774fd2fc8016008092 + checksum: 2739a8f7f9602af1a9345960b5041ed50b28a1fa0012516018fee72a45bad45c94d95d3623be54d7ba3d0aca4ae00d64139a9d255786eece572bed08425d42ad languageName: node linkType: hard @@ -14710,49 +14777,49 @@ __metadata: languageName: node linkType: hard -"rc-textarea@npm:^1.0.0, rc-textarea@npm:~1.0.0": - version: 1.0.1 - resolution: "rc-textarea@npm:1.0.1" +"rc-textarea@npm:~1.2.0, rc-textarea@npm:~1.2.2": + version: 1.2.2 + resolution: "rc-textarea@npm:1.2.2" dependencies: "@babel/runtime": ^7.10.1 classnames: ^2.2.1 - rc-input: ^0.2.1 + rc-input: ~1.0.4 rc-resize-observer: ^1.0.0 rc-util: ^5.27.0 peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: bc21ff8aaef9e93760aafdde5f24a052c67d37771aca915e96454477aae61c1742591acd1466b35c3ed516ffffef7f5b20a6c945119fa0bae1914177c8fce816 + checksum: 4db185617f9a6481bb7f0f77bbc0f5d9b64b82b821b51a34116fba7cd8ee25db754680524c63e409583f8f4edc25fdcd8074ddcb5dc3ec2fbc370965ff3c29a9 languageName: node linkType: hard -"rc-tooltip@npm:~5.3.1": - version: 5.3.1 - resolution: "rc-tooltip@npm:5.3.1" +"rc-tooltip@npm:~6.0.0": + version: 6.0.1 + resolution: "rc-tooltip@npm:6.0.1" dependencies: "@babel/runtime": ^7.11.2 + "@rc-component/trigger": ^1.0.4 classnames: ^2.3.1 - rc-trigger: ^5.3.1 peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: 93a99dd8f83ca6187cae7d09e498156e660331837f7ff16d6c50165e5cbc810d566552535d8c92c6fb3093f45cadfa0b62a03b9f78ba22e8b6123eda27333cf4 + checksum: fe7f617a4f4e0085d8f5eb5e8da5598f0164841c841f62f77966706ae604491246441a469aeb44f1dec7001bb4716ee81d11ec646e8889f4164fcba3a024eea5 languageName: node linkType: hard -"rc-tree-select@npm:~5.6.0": - version: 5.6.0 - resolution: "rc-tree-select@npm:5.6.0" +"rc-tree-select@npm:~5.8.0": + version: 5.8.0 + resolution: "rc-tree-select@npm:5.8.0" dependencies: "@babel/runtime": ^7.10.1 classnames: 2.x - rc-select: ~14.2.0 + rc-select: ~14.4.0 rc-tree: ~5.7.0 rc-util: ^5.16.1 peerDependencies: react: "*" react-dom: "*" - checksum: 01c488ae482c54090021b3ff40dea065a0e2455df77efa67b8cb6919e8bc05b3f40fcff0d85bd24784daa15f2814bb584a6a360e06ef38723614b875893fe1b6 + checksum: bc7c3c453d70e9dc3d2f8de2179e35b877d40705a2b9149f111d6b21381f90bca3ebf1d5058e4927b12dfc9d75f78d3a6fce2f44ce9bc020982212ff52183fc0 languageName: node linkType: hard @@ -14772,7 +14839,7 @@ __metadata: languageName: node linkType: hard -"rc-trigger@npm:^5.0.4, rc-trigger@npm:^5.1.2, rc-trigger@npm:^5.3.1, rc-trigger@npm:^5.3.4": +"rc-trigger@npm:^5.1.2, rc-trigger@npm:^5.3.1": version: 5.3.4 resolution: "rc-trigger@npm:5.3.4" dependencies: @@ -14815,6 +14882,19 @@ __metadata: languageName: node linkType: hard +"rc-util@npm:^5.25.2, rc-util@npm:^5.29.2": + 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: d7bf508bd3236cbb2abebbf16d271c50ab05be12cd3be46981979608b0b6d304735cc081650ab2f967f99a144c23189a6f682d52956c0eb4b6e4f41064b8a4ae + languageName: node + linkType: hard + "rc-virtual-list@npm:^3.4.13, rc-virtual-list@npm:^3.4.8": version: 3.4.13 resolution: "rc-virtual-list@npm:3.4.13" From aad8a271a3bcd88b22c19b14b96871f96ae6d3de Mon Sep 17 00:00:00 2001 From: Alexandr Buhlak <48954743+saha80@users.noreply.github.com> Date: Sun, 7 May 2023 01:06:47 +0300 Subject: [PATCH 06/81] bump antd version --- package.json | 2 +- src/App.tsx | 6 +- .../ForgotPasswordForm/ForgotPasswordForm.tsx | 5 +- src/components/auth/LockForm/LockForm.tsx | 5 +- src/components/auth/LoginForm/LoginForm.tsx | 5 +- .../auth/NewPasswordForm/NewPasswordForm.tsx | 7 +- .../SecurityCodeForm/SecurityCodeForm.tsx | 7 +- src/components/auth/SignUpForm/SignUpForm.tsx | 13 +-- .../common/BaseBreadcrumb/BaseBreadcrumb.tsx | 1 + .../common/BaseCheckbox/BaseCheckbox.tsx | 11 +- src/components/common/BaseModal/BaseModal.tsx | 17 +-- .../common/BaseProgress/BaseProgress.tsx | 8 +- .../common/forms/BaseForm/BaseForm.tsx | 5 +- .../inputs/ClipboardInput/ClipboardInput.tsx | 7 +- .../forms/ControlForm/ControlForm.tsx | 5 +- .../forms/DynamicForm/DynamicForm.tsx | 5 +- src/components/forms/StepForm/StepForm.tsx | 5 +- .../forms/ValidationForm/ValidationForm.tsx | 5 +- .../GithubButton/GitHubButton.styles.ts | 33 ++++++ .../components/GithubButton/GitHubButton.tsx | 37 +------ .../main/sider/MainSider/MainSider.styles.ts | 13 ++- .../medical-dashboard/covidCard/CovidCard.tsx | 7 +- .../StatisticsProgress/StatisticsProgress.tsx | 2 +- .../TreatmentCalendar.styles.ts | 6 -- .../TreatmentCalendar/TreatmentCalendar.tsx | 2 +- .../collection/TrendingCollection.styles.ts | 7 +- .../nav/PersonalInfo/PersonalInfo.tsx | 7 +- .../PasswordForm/PasswordForm.tsx | 5 +- .../twoFactorAuth/TwoFactorAuth.tsx | 7 +- .../NotificationsTypes/NotificationsTypes.tsx | 7 +- .../ActionButtons/ActionButtons.styles.ts | 3 +- .../tables/BasicTable/BasicTable.tsx | 5 +- .../modalController.tsx} | 16 +-- src/controllers/notificationController.tsx | 100 ++++++++---------- src/hooks/useFeedback.ts | 21 ++++ .../feedback/NotificationsPage.tsx | 21 ++-- .../uiComponentsPages/forms/SelectsPage.tsx | 17 ++- .../uiComponentsPages/forms/UploadsPage.tsx | 7 +- .../uiComponentsPages/modals/ModalsPage.tsx | 12 ++- .../modals/PopconfirmsPage.tsx | 5 +- .../navigation/BreadcrumbsPage.tsx | 94 ++++++++-------- .../middlewares/errorLogging.middleware.ts | 5 +- src/styles/GlobalStyle.ts | 49 ++------- src/styles/ThemeConfigProvider.tsx | 22 ++-- yarn.lock | 55 ++++++---- 45 files changed, 355 insertions(+), 329 deletions(-) create mode 100644 src/components/header/components/GithubButton/GitHubButton.styles.ts rename src/{components/common/BaseModal/BaseModal.styles.tsx => controllers/modalController.tsx} (66%) create mode 100644 src/hooks/useFeedback.ts diff --git a/package.json b/package.json index 08c8ad558..0ae1d2104 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,7 @@ "@lit-labs/react": "^1.0.2", "@react-google-maps/api": "^2.18.1", "@reduxjs/toolkit": "^1.7.1", - "antd": "^5.2.4", + "antd": "^5.4.7", "antd-mask-input": "^2.0.7", "axios": "^0.24.0", "axios-mock-adapter": "^1.20.0", diff --git a/src/App.tsx b/src/App.tsx index 9953e1123..2c25015b3 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { ConfigProvider } from 'antd'; +import { ConfigProvider, App as FeedbackProvider } from 'antd'; import { HelmetProvider } from 'react-helmet-async'; import deDe from 'antd/lib/locale/de_DE'; import enUS from 'antd/lib/locale/en_US'; @@ -32,7 +32,9 @@ const App: React.FC = () => { - + + + 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.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.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.tsx b/src/components/auth/NewPasswordForm/NewPasswordForm.tsx index 2ef46e631..1e9e108bd 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); }); }; 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.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/common/BaseBreadcrumb/BaseBreadcrumb.tsx b/src/components/common/BaseBreadcrumb/BaseBreadcrumb.tsx index d833dfa1e..26c32cb70 100644 --- a/src/components/common/BaseBreadcrumb/BaseBreadcrumb.tsx +++ b/src/components/common/BaseBreadcrumb/BaseBreadcrumb.tsx @@ -1,2 +1,3 @@ export { BaseBreadcrumb } from './BaseBreadcrumb.styles'; export type { BreadcrumbProps as BaseBreadcrumbProps } from 'antd'; +export type { BreadcrumbItemType as BaseBreadcrumbItemType } from 'antd/es/breadcrumb/Breadcrumb'; diff --git a/src/components/common/BaseCheckbox/BaseCheckbox.tsx b/src/components/common/BaseCheckbox/BaseCheckbox.tsx index e4773b0a2..3d1738cee 100644 --- a/src/components/common/BaseCheckbox/BaseCheckbox.tsx +++ b/src/components/common/BaseCheckbox/BaseCheckbox.tsx @@ -4,12 +4,15 @@ import * as S from './BaseCheckbox.styles'; export type BaseCheckboxProps = CheckboxProps; -interface BaseCheckboxInterface extends React.FC { +interface BaseCheckboxInterface + extends React.ForwardRefExoticComponent> { Group: typeof S.CheckboxGroup; } -export const BaseCheckbox: BaseCheckboxInterface = (props) => { - return ; -}; +const Checkbox = React.forwardRef((props, ref) => { + return ; +}); + +export const BaseCheckbox = Checkbox as BaseCheckboxInterface; BaseCheckbox.Group = S.CheckboxGroup; diff --git a/src/components/common/BaseModal/BaseModal.tsx b/src/components/common/BaseModal/BaseModal.tsx index f4ca8dc25..f0d960e74 100644 --- a/src/components/common/BaseModal/BaseModal.tsx +++ b/src/components/common/BaseModal/BaseModal.tsx @@ -1,21 +1,13 @@ import React from 'react'; import { Modal, ModalProps } from 'antd'; import { modalSizes } from 'constants/modalSizes'; -import { ModalTypes } from './BaseModal.styles'; interface BaseModalProps extends ModalProps { size?: 'small' | 'medium' | 'large'; } -interface BaseModalInterface extends React.FC { - info: typeof ModalTypes.info; - success: typeof ModalTypes.success; - warning: typeof ModalTypes.warning; - error: typeof ModalTypes.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[size]; return ( @@ -23,8 +15,3 @@ export const BaseModal: BaseModalInterface = ({ size = 'medium', children, ...pr ); }; - -BaseModal.info = ModalTypes.info; -BaseModal.success = ModalTypes.success; -BaseModal.warning = ModalTypes.warning; -BaseModal.error = ModalTypes.error; diff --git a/src/components/common/BaseProgress/BaseProgress.tsx b/src/components/common/BaseProgress/BaseProgress.tsx index 080b2ca96..18862e8c0 100644 --- a/src/components/common/BaseProgress/BaseProgress.tsx +++ b/src/components/common/BaseProgress/BaseProgress.tsx @@ -3,6 +3,10 @@ import { ProgressProps, Progress } from 'antd'; export type BaseProgressProps = ProgressProps; -export const BaseProgress: React.FC = (props) => { - return ; +export const BaseProgress: React.FC = ({ + // https://github.com/ant-design/ant-design/pull/41875 + size = 'default', + ...props +}) => { + return ; }; diff --git a/src/components/common/forms/BaseForm/BaseForm.tsx b/src/components/common/forms/BaseForm/BaseForm.tsx index 4232eef1e..41e4eab80 100644 --- a/src/components/common/forms/BaseForm/BaseForm.tsx +++ b/src/components/common/forms/BaseForm/BaseForm.tsx @@ -5,7 +5,7 @@ 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 }; @@ -22,9 +22,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({ + notification.error({ message: t('common.error'), description: error.errorFields[0].errors, }); 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/forms/ControlForm/ControlForm.tsx b/src/components/forms/ControlForm/ControlForm.tsx index d0566eb1f..4cd8b6ace 100644 --- a/src/components/forms/ControlForm/ControlForm.tsx +++ b/src/components/forms/ControlForm/ControlForm.tsx @@ -6,7 +6,7 @@ import { BaseInput } from '../../common/inputs/BaseInput/BaseInput'; import { BaseButton } from '../../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..1fe49b2de 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); }; 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/components/GithubButton/GitHubButton.styles.ts b/src/components/header/components/GithubButton/GitHubButton.styles.ts new file mode 100644 index 000000000..aa92a2f03 --- /dev/null +++ b/src/components/header/components/GithubButton/GitHubButton.styles.ts @@ -0,0 +1,33 @@ +import { GithubOutlined } from '@ant-design/icons'; +import styled from 'styled-components'; +import { BASE_COLORS } from '@app/styles/themes/constants'; +import { BaseButton } from '@app/components/common/BaseButton/BaseButton'; + +interface Dark { + $isDark: boolean; +} + +export const Button = styled(BaseButton)` + 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; + gap: 0; + + align-items: center; + + &.ant-btn-default:not(:disabled) { + &:hover, + &:active, + &:focus { + color: ${(props) => BASE_COLORS[props.$isDark ? 'black' : 'white']}; + background: ${(props) => BASE_COLORS[props.$isDark ? 'white' : 'black']}; + } + } +`; + +export const GithubIcon = styled(GithubOutlined)` + font-size: 1.5rem; + vertical-align: middle; +`; diff --git a/src/components/header/components/GithubButton/GitHubButton.tsx b/src/components/header/components/GithubButton/GitHubButton.tsx index c84c5b2b2..73ac0eacf 100644 --- a/src/components/header/components/GithubButton/GitHubButton.tsx +++ b/src/components/header/components/GithubButton/GitHubButton.tsx @@ -1,49 +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 } from '@app/components/common/BaseButton/BaseButton'; - -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; - - &.ant-btn { - display: flex; - } - - align-items: center; - - &.ant-btn-default:not(:disabled):hover, - &.ant-btn-default:not(:disabled):active, - &.ant-btn-default:not(:disabled):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; -`; +import * as S from './GitHubButton.styles'; export const GitHubButton: React.FC = (props) => { const theme = useAppSelector((state) => state.theme.theme); return ( - + ); }; diff --git a/src/components/layouts/main/sider/MainSider/MainSider.styles.ts b/src/components/layouts/main/sider/MainSider/MainSider.styles.ts index 3d5fd8ba4..8cfd55a76 100644 --- a/src/components/layouts/main/sider/MainSider/MainSider.styles.ts +++ b/src/components/layouts/main/sider/MainSider/MainSider.styles.ts @@ -30,7 +30,11 @@ export const Sider = styled(BaseLayout.Sider)` } `; -export const CollapseButton = styled(BaseButton)<{ $isCollapsed: boolean }>` +interface Collapse { + $isCollapsed: boolean; +} + +export const CollapseButton = styled(BaseButton)` background: var(--collapse-background-color); border: 1px solid var(--border-color); @@ -46,12 +50,7 @@ export const CollapseButton = styled(BaseButton)<{ $isCollapsed: boolean }>` color: var(--text-secondary-color); - &.ant-btn:not(:disabled):hover { - 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: var(--text-secondary-color); background: var(--primary-color); diff --git a/src/components/medical-dashboard/covidCard/CovidCard.tsx b/src/components/medical-dashboard/covidCard/CovidCard.tsx index 420e448b7..09b057b37 100644 --- a/src/components/medical-dashboard/covidCard/CovidCard.tsx +++ b/src/components/medical-dashboard/covidCard/CovidCard.tsx @@ -5,18 +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 })); + }, [notification]); const { confirmedArr, deathsArr, dateArr } = useMemo(() => { const confirmedArr: number[] = Object.values(data?.cases || {}).splice(0, 100); 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 ( ` position: absolute; 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/nft-dashboard/trending-collections/collection/TrendingCollection.styles.ts b/src/components/nft-dashboard/trending-collections/collection/TrendingCollection.styles.ts index c6a567dec..519fee8d4 100644 --- a/src/components/nft-dashboard/trending-collections/collection/TrendingCollection.styles.ts +++ b/src/components/nft-dashboard/trending-collections/collection/TrendingCollection.styles.ts @@ -89,9 +89,10 @@ export const BidButton = styled(BaseButton)` right: 20px; padding: 10px 14px; - color: var(--text-secondary-color); - - border-color: var(--text-secondary-color); + &.ant-btn-ghost { + color: var(--text-secondary-color); + border-color: var(--text-secondary-color); + } font-size: ${FONT_SIZE.md}; `; 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/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/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 ( button { + & > .ant-btn-link { + font-size: 18px; padding: 0; width: unset; height: unset; diff --git a/src/components/tables/BasicTable/BasicTable.tsx b/src/components/tables/BasicTable/BasicTable.tsx index f781ac6f0..7fb74a1d7 100644 --- a/src/components/tables/BasicTable/BasicTable.tsx +++ b/src/components/tables/BasicTable/BasicTable.tsx @@ -5,7 +5,7 @@ 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 { 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 +25,7 @@ export const BasicTable: React.FC = () => { }); const { t } = useTranslation(); const { isMounted } = useMounted(); + const { notification } = useFeedback(); const fetch = useCallback( (pagination: Pagination) => { @@ -144,7 +145,7 @@ export const BasicTable: React.FC = () => { { - 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/common/BaseModal/BaseModal.styles.tsx b/src/controllers/modalController.tsx similarity index 66% rename from src/components/common/BaseModal/BaseModal.styles.tsx rename to src/controllers/modalController.tsx index cf6040360..18c03bc9c 100644 --- a/src/components/common/BaseModal/BaseModal.styles.tsx +++ b/src/controllers/modalController.tsx @@ -1,6 +1,6 @@ import styled from 'styled-components'; import { FONT_SIZE, FONT_WEIGHT } from '@app/styles/themes/constants'; -import confirm, { ModalStaticFunctions, withInfo, withSuccess, withWarn, withError } from 'antd/es/modal/confirm'; +import { ModalStaticFunctions } from 'antd/es/modal/confirm'; const ModalStyles = styled.div` .ant-modal-confirm-success &, @@ -35,9 +35,11 @@ const ModalStyles = styled.div` const modalRender = (node: React.ReactNode) => {node}; -export const ModalTypes: Pick = { - info: (props) => confirm({ modalRender, ...withInfo(props) }), - success: (props) => confirm({ modalRender, ...withSuccess(props) }), - warning: (props) => confirm({ modalRender, ...withWarn(props) }), - error: (props) => confirm({ modalRender, ...withError(props) }), -}; +type ModalType = Pick; + +export const modalController = (modalType: ModalType): ModalType => ({ + info: (props) => modalType.info({ modalRender, ...props }), + success: (props) => modalType.success({ modalRender, ...props }), + warning: (props) => modalType.warning({ modalRender, ...props }), + error: (props) => modalType.error({ modalRender, ...props }), +}); diff --git a/src/controllers/notificationController.tsx b/src/controllers/notificationController.tsx index 82cb93f49..1585142d4 100644 --- a/src/controllers/notificationController.tsx +++ b/src/controllers/notificationController.tsx @@ -1,9 +1,8 @@ -import React from 'react'; -import { notification } from 'antd'; -import styled from 'styled-components'; +import type { NotificationInstance } 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/interface'; -import { FONT_FAMILY, FONT_SIZE, FONT_WEIGHT } from '@app/styles/themes/constants'; +import { ArgsProps as NotificationProps } from 'antd/lib/notification/interface'; +import { FONT_SIZE, FONT_WEIGHT } from '@app/styles/themes/constants'; interface IconWrapperProps { $isOnlyTitle: boolean; @@ -14,44 +13,39 @@ const IconWrapper = styled.div` line-height: 2rem; `; -const Message = styled.div` - &.title { - font-size: ${FONT_SIZE.xxl}; - height: 3rem; - margin-left: 1.5rem; - display: flex; - align-items: center; - font-weight: ${FONT_WEIGHT.bold}; - font-family: '${FONT_FAMILY.main}', sans-serif; - - &.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}; - } - } - - &[class^='ant-notification'], - &[class*=' ant-notification'] { - font-family: '${FONT_FAMILY.main}', sans-serif; - } - - .ant-notification-notice.ant-notification-notice-success &.title { +const Message = styled.div` + display: flex; + align-items: center; + margin-bottom: -0.5rem; + + ${(props) => + props.$isOnlyTitle + ? css` + font-size: ${FONT_SIZE.md}; + height: 2rem; + font-weight: ${FONT_WEIGHT.semibold}; + margin-inline-start: 9px; + ` + : css` + font-size: ${FONT_SIZE.xxl}; + height: 3rem; + font-weight: ${FONT_WEIGHT.bold}; + margin-inline-start: 21px; + `} + + .ant-notification-notice.ant-notification-notice-success & { color: var(--success-color); } - .ant-notification-notice.ant-notification-notice-info &.title { + .ant-notification-notice.ant-notification-notice-info & { color: var(--primary-color); } - .ant-notification-notice.ant-notification-notice-warning &.title { + .ant-notification-notice.ant-notification-notice-warning & { color: var(--warning-color); } - .ant-notification-notice.ant-notification-notice-error &.title { + .ant-notification-notice.ant-notification-notice-error & { color: var(--error-color); } `; @@ -61,7 +55,7 @@ const Description = styled.div` font-size: ${FONT_SIZE.md}; font-weight: ${FONT_WEIGHT.semibold}; line-height: 1.375rem; - font-family: '${FONT_FAMILY.main}', sans-serif; + margin-inline-start: 22px; `; const EmptyDescription = styled.div` @@ -71,9 +65,11 @@ const EmptyDescription = styled.div` const SuccessIcon = styled(CheckCircleFilled)` color: var(--success-color); `; + const InfoIcon = styled(InfoCircleFilled)` color: var(--primary-color); `; + const WarningIcon = styled(ExclamationCircleFilled)` color: var(--warning-color); `; @@ -82,9 +78,9 @@ const ErrorIcon = styled(StopFilled)` color: var(--error-color); `; -type NotificationProps = ArgsProps; +type NotificationType = Pick; -const openSuccessNotification = (config: NotificationProps): void => { +const openSuccess = (notification: NotificationType) => (config: NotificationProps) => { notification.success({ ...config, icon: ( @@ -92,13 +88,12 @@ const openSuccessNotification = (config: NotificationProps): void => { ), - message: {config.message}, + message: {config.message}, description: config.description ? {config.description} : , - className: config.description ? '' : 'notification-without-description', }); }; -const openInfoNotification = (config: NotificationProps): void => { +const openInfo = (notification: NotificationType) => (config: NotificationProps) => { notification.info({ ...config, icon: ( @@ -106,13 +101,12 @@ const openInfoNotification = (config: NotificationProps): void => { ), - message: {config.message}, + message: {config.message}, description: config.description ? {config.description} : , - className: config.description ? '' : 'notification-without-description', }); }; -const openWarningNotification = (config: NotificationProps): void => { +const openWarning = (notification: NotificationType) => (config: NotificationProps) => { notification.warning({ ...config, icon: ( @@ -120,13 +114,12 @@ const openWarningNotification = (config: NotificationProps): void => { ), - message: {config.message}, + message: {config.message}, description: config.description ? {config.description} : , - className: config.description ? '' : 'notification-without-description', }); }; -const openErrorNotification = (config: NotificationProps): void => { +const openError = (notification: NotificationType) => (config: NotificationProps) => { notification.error({ ...config, icon: ( @@ -134,15 +127,14 @@ const openErrorNotification = (config: NotificationProps): void => { ), - message: {config.message}, + message: {config.message}, description: config.description ? {config.description} : , - className: config.description ? '' : 'notification-without-description', }); }; -export const notificationController = { - success: openSuccessNotification, - info: openInfoNotification, - warning: openWarningNotification, - error: openErrorNotification, -}; +export const notificationController = (notification: NotificationType): NotificationType => ({ + success: openSuccess(notification), + info: openInfo(notification), + warning: openWarning(notification), + error: openError(notification), +}); diff --git a/src/hooks/useFeedback.ts b/src/hooks/useFeedback.ts new file mode 100644 index 000000000..f57be384d --- /dev/null +++ b/src/hooks/useFeedback.ts @@ -0,0 +1,21 @@ +import { App } from 'antd'; + +import { notificationController } from '@app/controllers/notificationController'; +import { modalController } from '@app/controllers/modalController'; + +export const useFeedback = (): ReturnType => { + const { message, notification, modal } = App.useApp(); + + return { + message, + notification: { + ...notificationController(notification), + destroy: notification.destroy, + open: notification.open, + }, + modal: { + ...modalController(modal), + confirm: modal.confirm, + }, + }; +}; 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/forms/SelectsPage.tsx b/src/pages/uiComponentsPages/forms/SelectsPage.tsx index df3464ecd..f734e2142 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} @@ -129,7 +136,7 @@ const SelectsPage: React.FC = () => { showArrow tagRender={tagRender} defaultValue={['gold', 'cyan']} - width={'100%'} + width="100%" options={options} /> diff --git a/src/pages/uiComponentsPages/forms/UploadsPage.tsx b/src/pages/uiComponentsPages/forms/UploadsPage.tsx index ca1f34ed9..ec33d36b5 100644 --- a/src/pages/uiComponentsPages/forms/UploadsPage.tsx +++ b/src/pages/uiComponentsPages/forms/UploadsPage.tsx @@ -7,7 +7,7 @@ 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` @@ -25,6 +25,7 @@ const DraggerDescription = styled.div` const UploadsPage: React.FC = () => { const { t } = useTranslation(); + const { notification } = useFeedback(); const uploadProps = { name: 'file', @@ -36,9 +37,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..8afd7c544 100644 --- a/src/pages/uiComponentsPages/modals/PopconfirmsPage.tsx +++ b/src/pages/uiComponentsPages/modals/PopconfirmsPage.tsx @@ -8,7 +8,7 @@ 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 { 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} { @@ -21,13 +21,14 @@ const AsyncButton = styled(BaseButton)` 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/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/store/middlewares/errorLogging.middleware.ts b/src/store/middlewares/errorLogging.middleware.ts index af372b96a..13761b945 100644 --- a/src/store/middlewares/errorLogging.middleware.ts +++ b/src/store/middlewares/errorLogging.middleware.ts @@ -1,12 +1,15 @@ import { isRejectedWithValue, Middleware } from '@reduxjs/toolkit'; import { notificationController } from '@app/controllers/notificationController'; +import { notification } from 'antd'; + +const openErrorNotification = notificationController(notification).error; /** * Log a warning and show a toast! */ export const errorLoggingMiddleware: Middleware = () => (next) => (action) => { if (isRejectedWithValue(action)) { - notificationController.error({ message: action.payload }); + openErrorNotification({ message: action.payload }); } return next(action); diff --git a/src/styles/GlobalStyle.ts b/src/styles/GlobalStyle.ts index 960d030c8..405c64b1a 100644 --- a/src/styles/GlobalStyle.ts +++ b/src/styles/GlobalStyle.ts @@ -73,62 +73,32 @@ export default styled.createGlobalStyle` 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 { + .ant-notification-notice { + min-height: 6rem; - .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; + top: 1.25rem; + right: 1.25rem; } } - &.ant-notification-notice-success { + .ant-notification-notice-success { border: 1px solid var(--success-color); background: var(--notification-success-color); } - &.ant-notification-notice-info { + .ant-notification-notice-info { border: 1px solid var(--primary-color); background: var(--notification-primary-color); } - &.ant-notification-notice-warning { + .ant-notification-notice-warning { border: 1px solid var(--warning-color); background: var(--notification-warning-color); } - &.ant-notification-notice-error { + .ant-notification-notice-error { border: 1px solid var(--error-color); background: var(--notification-error-color); } @@ -138,5 +108,4 @@ export default styled.createGlobalStyle` .ant-menu-vertical { border-right: 0; } - // notifications end `; diff --git a/src/styles/ThemeConfigProvider.tsx b/src/styles/ThemeConfigProvider.tsx index 3e6de87b6..68f5262e1 100644 --- a/src/styles/ThemeConfigProvider.tsx +++ b/src/styles/ThemeConfigProvider.tsx @@ -65,7 +65,6 @@ export const ThemeConfigProvider = ({ theme, children }: ThemeConfigProviderProp colorSuccessBorder: 'var(--ant-success-color-deprecated-border)', } : {}), - // base override fontFamily, @@ -83,8 +82,6 @@ export const ThemeConfigProvider = ({ theme, children }: ThemeConfigProviderProp colorSplit: '#f0f0f0', - // Media queries - screenXSMin: BREAKPOINTS.xs, screenXS: BREAKPOINTS.xs, screenXSMax: BREAKPOINTS.xs, @@ -241,20 +238,23 @@ export const ThemeConfigProvider = ({ theme, children }: ThemeConfigProviderProp width: 36 * 16, paddingMD: 2 * 16, + paddingLG: 0, paddingContentHorizontalLG: 2 * 16, - lineHeightLG: 2.8125, + lineHeightLG: 2, - colorSuccess: currentTheme.notificationSuccess, + colorSuccess: currentTheme.success, colorInfo: currentTheme.primary, - colorWarning: currentTheme.notificationWarning, - colorError: currentTheme.notificationError, + colorWarning: currentTheme.warning, + colorError: currentTheme.error, fontFamily, - fontWeightStrong: parseFloat(FONT_WEIGHT.semibold), - fontSize: 500, - fontSizeLG: 500, - fontSizeHeading3: 24, + fontSizeLG: remToPixels(FONT_SIZE.xxl), + marginSM: 0, + boxShadow: + '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)', + controlHeightLG: 15 / 0.55, + wireframe: true, }, Input: { colorTextPlaceholder: currentTheme.inputPlaceholder, diff --git a/yarn.lock b/yarn.lock index e37e92249..73b05d2bd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -24,9 +24,9 @@ __metadata: languageName: node linkType: hard -"@ant-design/cssinjs@npm:^1.9.0": - version: 1.9.0 - resolution: "@ant-design/cssinjs@npm:1.9.0" +"@ant-design/cssinjs@npm:^1.9.1": + version: 1.9.1 + resolution: "@ant-design/cssinjs@npm:1.9.1" dependencies: "@babel/runtime": ^7.11.1 "@emotion/hash": ^0.8.0 @@ -38,7 +38,7 @@ __metadata: peerDependencies: react: ">=16.0.0" react-dom: ">=16.0.0" - checksum: e675439db395876c5686fadb4c0dc8559dcbc6579f1091ef15b07749d23ea8b505fc357e943696c1c455207fa24eb3030eb92dd018522a1c29683263fca8a3cf + checksum: 504f207a315c7232af213ee01351e90b91a54b56de2363e33b8afd75fdd81150cc1156f344eeeb3269557e03d8814287047fd4dc49d8a8626cb37ef9bce7ab41 languageName: node linkType: hard @@ -1542,6 +1542,15 @@ __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/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" @@ -3891,12 +3900,12 @@ __metadata: languageName: node linkType: hard -"antd@npm:^5.2.4": - version: 5.4.3 - resolution: "antd@npm:5.4.3" +"antd@npm:^5.4.7": + version: 5.4.7 + resolution: "antd@npm:5.4.7" dependencies: "@ant-design/colors": ^7.0.0 - "@ant-design/cssinjs": ^1.9.0 + "@ant-design/cssinjs": ^1.9.1 "@ant-design/icons": ^5.0.0 "@ant-design/react-slick": ~1.0.0 "@babel/runtime": ^7.18.3 @@ -3914,7 +3923,7 @@ __metadata: rc-dialog: ~9.1.0 rc-drawer: ~6.1.1 rc-dropdown: ~4.0.0 - rc-field-form: ~1.29.0 + rc-field-form: ~1.30.0 rc-image: ~5.16.0 rc-input: ~1.0.4 rc-input-number: ~7.4.0 @@ -3931,7 +3940,7 @@ __metadata: rc-select: ~14.4.3 rc-slider: ~10.1.0 rc-steps: ~6.0.0 - rc-switch: ~4.0.0 + rc-switch: ~4.1.0 rc-table: ~7.31.0 rc-tabs: ~12.5.6 rc-textarea: ~1.2.2 @@ -3945,7 +3954,7 @@ __metadata: peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: 2c155ab2dfdaa5b065aeb81d1b13347b71d2e42374e0614fe4a1de1c1b8d781ac622142c86ea1f99a02b18b335cecfd05df2442869b87891beb7c3930b00028f + checksum: 27fadd198f70ac369f9ac47f07e79bd39b1dfa06bb5efab13f4a32cf95e51e4873d24a2cdde9ee4fb4360f95ee143ebad01ec0a0438aed305deda820ddd7023f languageName: node linkType: hard @@ -11050,7 +11059,7 @@ __metadata: "@types/uuid": ^8.3.4 "@typescript-eslint/eslint-plugin": ^5.10.0 "@typescript-eslint/parser": ^5.8.0 - antd: ^5.2.4 + antd: ^5.4.7 antd-mask-input: ^2.0.7 axios: ^0.24.0 axios-mock-adapter: ^1.20.0 @@ -14414,9 +14423,9 @@ __metadata: languageName: node linkType: hard -"rc-field-form@npm:~1.29.0": - version: 1.29.2 - resolution: "rc-field-form@npm:1.29.2" +"rc-field-form@npm:~1.30.0": + version: 1.30.0 + resolution: "rc-field-form@npm:1.30.0" dependencies: "@babel/runtime": ^7.18.0 async-validator: ^4.1.0 @@ -14424,7 +14433,7 @@ __metadata: peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: 013c8574454e4d7f0bc83a9ad763d21b4623174ce92813a1b3afe63050ab27566af1b2947ca0573ecb7c72a932cf1c4690c7f6b144564fff68cd7f558923b486 + checksum: 198f5e02d91286bdbeb5be3a8ca901822f14377f620a7a139182c78ee1057083c625dca7bb7083506f9bca2783c28b2ed0010bbfbfd22011ef6f238f4b28ba92 languageName: node linkType: hard @@ -14729,17 +14738,17 @@ __metadata: languageName: node linkType: hard -"rc-switch@npm:~4.0.0": - version: 4.0.0 - resolution: "rc-switch@npm:4.0.0" +"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: 9a77ccdc76c956876e911173fdaf10f1c7ea3b713632a3919e4dcf4faff1626c0f782772eaf2c74a1ed81f6adadc6df9c5febdd5de872eea62db2d6fff7d6956 + checksum: eed3caa569de0d5451ebb5afab045df505674c266a995b3527cb15d67d22df9abc715def3ccbf8e34ecf4058ffa14054f35578ab74240e6f2cdaa6fdf35e2253 languageName: node linkType: hard @@ -14882,7 +14891,7 @@ __metadata: languageName: node linkType: hard -"rc-util@npm:^5.25.2, rc-util@npm:^5.29.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: From 33ea9afb8130265e2a386f2ef16f89fe485475e4 Mon Sep 17 00:00:00 2001 From: Alexandr Buhlak <48954743+saha80@users.noreply.github.com> Date: Mon, 15 May 2023 22:49:52 +0300 Subject: [PATCH 07/81] bump antd version --- package.json | 2 +- .../common/BaseButton/BaseButton.styles.ts | 6 +- .../common/BaseCheckbox/BaseCheckbox.tsx | 15 +- .../common/BaseProgress/BaseProgress.tsx | 8 +- .../common/BaseTable/BaseTable.styles.ts | 3 +- src/components/common/BaseTable/BaseTable.tsx | 4 +- .../selects/BaseSelect/BaseSelect.styles.ts | 2 +- .../common/NFTCard/NFTCard.styles.ts | 4 +- src/pages/uiComponentsPages/SpinnersPage.tsx | 2 +- src/styles/ThemeConfigProvider.tsx | 20 +-- src/styles/themes/dark/darkTheme.ts | 3 +- src/styles/themes/light/lightTheme.ts | 3 +- yarn.lock | 135 +++++++++++------- 13 files changed, 124 insertions(+), 83 deletions(-) diff --git a/package.json b/package.json index 0ae1d2104..509c5883e 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,7 @@ "@lit-labs/react": "^1.0.2", "@react-google-maps/api": "^2.18.1", "@reduxjs/toolkit": "^1.7.1", - "antd": "^5.4.7", + "antd": "^5.5.0", "antd-mask-input": "^2.0.7", "axios": "^0.24.0", "axios-mock-adapter": "^1.20.0", diff --git a/src/components/common/BaseButton/BaseButton.styles.ts b/src/components/common/BaseButton/BaseButton.styles.ts index e3023c927..4e763544e 100644 --- a/src/components/common/BaseButton/BaseButton.styles.ts +++ b/src/components/common/BaseButton/BaseButton.styles.ts @@ -2,7 +2,7 @@ import styled, { css } from 'styled-components'; import { Button as AntButton } from 'antd'; import { Severity } from '@app/interfaces/interfaces'; import { defineColorBySeverity } from '@app/utils/utils'; -import { FONT_WEIGHT } from '@app/styles/themes/constants'; +import { FONT_WEIGHT, FONT_SIZE } from '@app/styles/themes/constants'; interface BtnProps { $severity?: Severity; @@ -20,8 +20,8 @@ export const Button = styled(AntButton)` font-weight: ${FONT_WEIGHT.semibold}; box-shadow: none; - &.ant-btn.ant-btn-icon-only > span { - transform: none; + &.ant-btn.ant-btn-icon-only .anticon { + font-size: ${FONT_SIZE.xxxl}; } &:not(:disabled):focus-visible { diff --git a/src/components/common/BaseCheckbox/BaseCheckbox.tsx b/src/components/common/BaseCheckbox/BaseCheckbox.tsx index 3d1738cee..7e2b3a907 100644 --- a/src/components/common/BaseCheckbox/BaseCheckbox.tsx +++ b/src/components/common/BaseCheckbox/BaseCheckbox.tsx @@ -1,18 +1,19 @@ import React from 'react'; -import { CheckboxProps } from 'antd'; +import { CheckboxProps as BaseCheckboxProps } from 'antd'; import * as S from './BaseCheckbox.styles'; -export type BaseCheckboxProps = CheckboxProps; - -interface BaseCheckboxInterface - extends React.ForwardRefExoticComponent> { - Group: typeof S.CheckboxGroup; -} +export type { BaseCheckboxProps }; const Checkbox = React.forwardRef((props, ref) => { return ; }); +type CheckboxForwardRef = typeof Checkbox; + +interface BaseCheckboxInterface extends CheckboxForwardRef { + Group: typeof S.CheckboxGroup; +} + export const BaseCheckbox = Checkbox as BaseCheckboxInterface; BaseCheckbox.Group = S.CheckboxGroup; diff --git a/src/components/common/BaseProgress/BaseProgress.tsx b/src/components/common/BaseProgress/BaseProgress.tsx index 18862e8c0..080b2ca96 100644 --- a/src/components/common/BaseProgress/BaseProgress.tsx +++ b/src/components/common/BaseProgress/BaseProgress.tsx @@ -3,10 +3,6 @@ import { ProgressProps, Progress } from 'antd'; export type BaseProgressProps = ProgressProps; -export const BaseProgress: React.FC = ({ - // https://github.com/ant-design/ant-design/pull/41875 - size = 'default', - ...props -}) => { - return ; +export const BaseProgress: React.FC = (props) => { + return ; }; diff --git a/src/components/common/BaseTable/BaseTable.styles.ts b/src/components/common/BaseTable/BaseTable.styles.ts index 5bb19edeb..10d270e8e 100644 --- a/src/components/common/BaseTable/BaseTable.styles.ts +++ b/src/components/common/BaseTable/BaseTable.styles.ts @@ -1,8 +1,9 @@ import styled from 'styled-components'; import { Table as AntdTable } from 'antd'; import { FONT_SIZE } from '@app/styles/themes/constants'; +import type { RefTable } from 'antd/es/table/interface'; -export const Table = styled(AntdTable)` +export const Table = styled(AntdTable as RefTable)` & thead .ant-table-cell { color: var(--primary-color); font-size: ${FONT_SIZE.xs}; diff --git a/src/components/common/BaseTable/BaseTable.tsx b/src/components/common/BaseTable/BaseTable.tsx index f68e32d00..e3e6ad637 100644 --- a/src/components/common/BaseTable/BaseTable.tsx +++ b/src/components/common/BaseTable/BaseTable.tsx @@ -1,11 +1,13 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ import React from 'react'; import { TableProps } from 'antd'; +import type { RefTable } from 'antd/es/table/interface'; import * as S from './BaseTable.styles'; export type BaseTableProps = TableProps; // TODO make generic! export const BaseTable: React.FC> = (props) => { - return ; + type StyledTableProps = Parameters[0]; + return ; }; diff --git a/src/components/common/selects/BaseSelect/BaseSelect.styles.ts b/src/components/common/selects/BaseSelect/BaseSelect.styles.ts index 168328ffd..ed1b270f2 100644 --- a/src/components/common/selects/BaseSelect/BaseSelect.styles.ts +++ b/src/components/common/selects/BaseSelect/BaseSelect.styles.ts @@ -57,7 +57,7 @@ export const Select = styled(AntSelect)` &.ant-select-multiple { .ant-select-selector { - padding: 5px 11px; + padding-inline-start: 11px; } .ant-select-selection-item { margin-inline-end: 11px; diff --git a/src/components/nft-dashboard/common/NFTCard/NFTCard.styles.ts b/src/components/nft-dashboard/common/NFTCard/NFTCard.styles.ts index 6087e7ed5..dbb678df2 100644 --- a/src/components/nft-dashboard/common/NFTCard/NFTCard.styles.ts +++ b/src/components/nft-dashboard/common/NFTCard/NFTCard.styles.ts @@ -6,7 +6,9 @@ interface CardInternalProps { } export const Card = styled(BaseCard)` - box-shadow: var(--box-shadow-nft-color); + &.ant-card:not(.ant-card-bordered) { + box-shadow: var(--box-shadow-nft-color); + } ${(props) => props.$isSider && 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/styles/ThemeConfigProvider.tsx b/src/styles/ThemeConfigProvider.tsx index 68f5262e1..c3a41a783 100644 --- a/src/styles/ThemeConfigProvider.tsx +++ b/src/styles/ThemeConfigProvider.tsx @@ -19,6 +19,8 @@ export interface ThemeConfigProviderProps extends PropsWithChildren { const remToPixels = (s: `${number}rem`) => parseFloat(s) * 16; +const parseNumber = (s: `${number}` | `${number}px`) => parseFloat(s); + export const ThemeConfigProvider = ({ theme, children }: ThemeConfigProviderProps): JSX.Element => { const currentTheme = themeObject[theme]; @@ -78,7 +80,7 @@ export const ThemeConfigProvider = ({ theme, children }: ThemeConfigProviderProp controlHeightLG: 64, - borderRadius: parseFloat(BORDER_RADIUS), + borderRadius: parseNumber(BORDER_RADIUS), colorSplit: '#f0f0f0', @@ -129,7 +131,7 @@ export const ThemeConfigProvider = ({ theme, children }: ThemeConfigProviderProp paddingMD: 15, paddingContentHorizontalLG: 15, - borderRadiusLG: parseFloat(BORDER_RADIUS), + borderRadiusLG: parseNumber(BORDER_RADIUS), }, Card: { colorTextHeading: currentTheme.textMain, @@ -143,7 +145,7 @@ export const ThemeConfigProvider = ({ theme, children }: ThemeConfigProviderProp paddingLG: 20, boxShadowTertiary: currentTheme.boxShadow, - borderRadiusLG: parseFloat(BORDER_RADIUS), + borderRadiusLG: parseNumber(BORDER_RADIUS), }, Collapse: {}, Tabs: { @@ -175,8 +177,8 @@ export const ThemeConfigProvider = ({ theme, children }: ThemeConfigProviderProp }, Select: { fontSizeSM: remToPixels(FONT_SIZE.xs), - borderRadiusXS: parseFloat(BORDER_RADIUS), - borderRadiusSM: parseFloat(BORDER_RADIUS), + borderRadiusXS: parseNumber(BORDER_RADIUS), + borderRadiusSM: parseNumber(BORDER_RADIUS), colorFillSecondary: currentTheme.backgroundColorBase, colorIcon: currentTheme.icon, @@ -229,7 +231,7 @@ export const ThemeConfigProvider = ({ theme, children }: ThemeConfigProviderProp controlHeight: 34, }, Popconfirm: { - fontWeightStrong: parseFloat(FONT_WEIGHT.semibold), + fontWeightStrong: parseNumber(FONT_WEIGHT.semibold), colorPrimary: currentTheme.primary, }, Notification: { @@ -261,7 +263,7 @@ export const ThemeConfigProvider = ({ theme, children }: ThemeConfigProviderProp colorTextDisabled: currentTheme.disable, colorPrimaryHover: 'var(--ant-primary-5)', controlOutline: 'var(--ant-primary-color-outline)', - fontWeightStrong: parseFloat(FONT_WEIGHT.semibold), + fontWeightStrong: parseNumber(FONT_WEIGHT.semibold), colorFillAlter, }, InputNumber: { @@ -284,7 +286,7 @@ export const ThemeConfigProvider = ({ theme, children }: ThemeConfigProviderProp }, Button: { colorPrimary: currentTheme.primary, - borderRadiusSM: parseFloat(BORDER_RADIUS), + borderRadiusSM: parseNumber(BORDER_RADIUS), controlOutline: '0', controlOutlineWidth: 0, }, @@ -336,7 +338,7 @@ export const ThemeConfigProvider = ({ theme, children }: ThemeConfigProviderProp colorPrimary: '#1c68a6', controlItemBgActive: 'var(--ant-primary-1)', colorTextPlaceholder: currentTheme.inputPlaceholder, - fontWeightStrong: parseFloat(FONT_WEIGHT.medium), + fontWeightStrong: parseNumber(FONT_WEIGHT.medium), controlHeightSM: 32, controlHeightLG: 64, }, diff --git a/src/styles/themes/dark/darkTheme.ts b/src/styles/themes/dark/darkTheme.ts index d5f1c6e05..8ba0d555c 100644 --- a/src/styles/themes/dark/darkTheme.ts +++ b/src/styles/themes/dark/darkTheme.ts @@ -1,6 +1,7 @@ import { shadeColor } from '@app/utils/utils'; import { graphic } from 'echarts'; import { BASE_COLORS } from '../constants'; +import type { ITheme } from '../types'; const chartColors = { chartTooltipLabel: '#6a7985', @@ -104,7 +105,7 @@ export const darkColorsTheme = { icon: '#a9a9a9', iconHover: '#ffffff', ...chartColors, -} as const; +} as const satisfies ITheme; export const antDarkColorsTheme = { successBg: '#e6fff2', diff --git a/src/styles/themes/light/lightTheme.ts b/src/styles/themes/light/lightTheme.ts index 9cd4cb4d6..fd0d819d2 100644 --- a/src/styles/themes/light/lightTheme.ts +++ b/src/styles/themes/light/lightTheme.ts @@ -1,6 +1,7 @@ import { shadeColor } from '@app/utils/utils'; import { graphic } from 'echarts'; import { BASE_COLORS } from '../constants'; +import type { ITheme } from '../types'; const chartColors = { chartTooltipLabel: '#6A7985', @@ -104,4 +105,4 @@ export const lightColorsTheme = { icon: '#a9a9a9', iconHover: 'rgba(0, 0, 0, 0.75)', ...chartColors, -} as const; +} as const satisfies ITheme; diff --git a/yarn.lock b/yarn.lock index 73b05d2bd..ed0d2d842 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2218,6 +2218,22 @@ __metadata: languageName: node linkType: hard +"@rc-component/color-picker@npm:~1.0.0": + version: 1.0.0 + resolution: "@rc-component/color-picker@npm:1.0.0" + dependencies: + "@babel/runtime": ^7.10.1 + "@ctrl/tinycolor": ^3.6.0 + "@rc-component/context": ^1.3.0 + "@rc-component/trigger": ^1.10.2 + classnames: ^2.2.6 + peerDependencies: + react: ">=16.9.0" + react-dom: ">=16.9.0" + checksum: 01a5f89c41a2597ae042b1b14a3dd5d80b8ed01dbfe41c3acca2b26598ed5e9ef6344cee137c02dd1da8f9ecb0298d5c8dbac0630b8b154e1042c624fd530c52 + languageName: node + linkType: hard + "@rc-component/context@npm:^1.3.0": version: 1.3.0 resolution: "@rc-component/context@npm:1.3.0" @@ -2316,6 +2332,24 @@ __metadata: languageName: node linkType: hard +"@rc-component/trigger@npm:^1.10.2, @rc-component/trigger@npm:^1.12.0": + version: 1.12.1 + resolution: "@rc-component/trigger@npm:1.12.1" + 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: 891d2408695ed040b7f52db9e2760c29ff3e948d24060ac2bb941771204cd18ea1b22dbb2a06057ab9f8e4c833d218c12e003dfabdcbabfe5d564d0cf306aef0 + 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" @@ -3900,9 +3934,9 @@ __metadata: languageName: node linkType: hard -"antd@npm:^5.4.7": - version: 5.4.7 - resolution: "antd@npm:5.4.7" +"antd@npm:^5.5.0": + version: 5.5.0 + resolution: "antd@npm:5.5.0" dependencies: "@ant-design/colors": ^7.0.0 "@ant-design/cssinjs": ^1.9.1 @@ -3910,39 +3944,40 @@ __metadata: "@ant-design/react-slick": ~1.0.0 "@babel/runtime": ^7.18.3 "@ctrl/tinycolor": ^3.6.0 + "@rc-component/color-picker": ~1.0.0 "@rc-component/mutate-observer": ^1.0.0 "@rc-component/tour": ~1.8.0 - "@rc-component/trigger": ^1.7.0 + "@rc-component/trigger": ^1.12.0 classnames: ^2.2.6 copy-to-clipboard: ^3.2.0 dayjs: ^1.11.1 qrcode.react: ^3.1.0 - rc-cascader: ~3.10.0 + rc-cascader: ~3.11.2 rc-checkbox: ~3.0.0 rc-collapse: ~3.5.2 rc-dialog: ~9.1.0 rc-drawer: ~6.1.1 - rc-dropdown: ~4.0.0 - rc-field-form: ~1.30.0 + rc-dropdown: ~4.1.0 + rc-field-form: ~1.31.0 rc-image: ~5.16.0 rc-input: ~1.0.4 rc-input-number: ~7.4.0 rc-mentions: ~2.2.0 rc-menu: ~9.8.3 rc-motion: ^2.7.3 - rc-notification: ~5.0.0 + rc-notification: ~5.0.4 rc-pagination: ~3.3.1 - rc-picker: ~3.6.1 + rc-picker: ~3.7.4 rc-progress: ~3.4.1 rc-rate: ~2.10.0 rc-resize-observer: ^1.2.0 - rc-segmented: ~2.1.2 + rc-segmented: ~2.2.0 rc-select: ~14.4.3 rc-slider: ~10.1.0 rc-steps: ~6.0.0 rc-switch: ~4.1.0 - rc-table: ~7.31.0 - rc-tabs: ~12.5.6 + rc-table: ~7.32.1 + rc-tabs: ~12.6.0 rc-textarea: ~1.2.2 rc-tooltip: ~6.0.0 rc-tree: ~5.7.0 @@ -3954,7 +3989,7 @@ __metadata: peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: 27fadd198f70ac369f9ac47f07e79bd39b1dfa06bb5efab13f4a32cf95e51e4873d24a2cdde9ee4fb4360f95ee143ebad01ec0a0438aed305deda820ddd7023f + checksum: 8594da886835c3dfb36fadbd8d67a8a95dd93fc2dc268723228b9db5de7f690ad79b3d9d3c6ebf89372de2ccbb4b0b9d1606503b3ee44fd9c405df0183e56498 languageName: node linkType: hard @@ -11059,7 +11094,7 @@ __metadata: "@types/uuid": ^8.3.4 "@typescript-eslint/eslint-plugin": ^5.10.0 "@typescript-eslint/parser": ^5.8.0 - antd: ^5.4.7 + antd: ^5.5.0 antd-mask-input: ^2.0.7 axios: ^0.24.0 axios-mock-adapter: ^1.20.0 @@ -14330,9 +14365,9 @@ __metadata: languageName: node linkType: hard -"rc-cascader@npm:~3.10.0": - version: 3.10.2 - resolution: "rc-cascader@npm:3.10.2" +"rc-cascader@npm:~3.11.2": + version: 3.11.2 + resolution: "rc-cascader@npm:3.11.2" dependencies: "@babel/runtime": ^7.12.5 array-tree-filter: ^2.1.0 @@ -14343,7 +14378,7 @@ __metadata: peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: f4df7dc148578410e24521120ef2b96108164a83aa6339e522c682c911cc8368729a8d04ac66bfd7cc785bc69b5ffbbc6f9d98ec11a62f8b273871ad63d4941c + checksum: 184b9b98b5b4b18ba5e021a3dd42eb950c6894bf2fe10eb09a2dd33e3ff85f7ef3c26358e30e929493e7b418fa3413bca9d0d57eb6dd287ad744b2c8b29e8b5c languageName: node linkType: hard @@ -14408,24 +14443,24 @@ __metadata: 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.30.0": - version: 1.30.0 - resolution: "rc-field-form@npm:1.30.0" +"rc-field-form@npm:~1.31.0": + version: 1.31.0 + resolution: "rc-field-form@npm:1.31.0" dependencies: "@babel/runtime": ^7.18.0 async-validator: ^4.1.0 @@ -14433,7 +14468,7 @@ __metadata: peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: 198f5e02d91286bdbeb5be3a8ca901822f14377f620a7a139182c78ee1057083c625dca7bb7083506f9bca2783c28b2ed0010bbfbfd22011ef6f238f4b28ba92 + checksum: 690b0867eec797662d0f10694cf4e9e9e36c61b27b5c35024721a7b492829f677aea74a95a572a499e8b9638eafa5a7e62c13ac6e54d19a37e41893c0e40051f languageName: node linkType: hard @@ -14563,9 +14598,9 @@ __metadata: languageName: node linkType: hard -"rc-notification@npm:~5.0.0": - version: 5.0.2 - resolution: "rc-notification@npm:5.0.2" +"rc-notification@npm:~5.0.4": + version: 5.0.4 + resolution: "rc-notification@npm:5.0.4" dependencies: "@babel/runtime": ^7.10.1 classnames: 2.x @@ -14574,7 +14609,7 @@ __metadata: peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: ab836183e741731822df5521a216cdc111d309c483b94f3100f928ecdb4d6204e215e9a22a38bb4212528c5bd58c0a2d56cfe6adc1d0f3024fa7ea985cddba82 + checksum: b17b0cf18d18549685441a7a17b4ca0d797ae817b514ec4492ac637b1a9a75c1a121bcc54cb966f64294a13c9161bd5614e710242a7d2c056b9322d6148cba57 languageName: node linkType: hard @@ -14606,14 +14641,14 @@ __metadata: languageName: node linkType: hard -"rc-picker@npm:~3.6.1": - version: 3.6.2 - resolution: "rc-picker@npm:3.6.2" +"rc-picker@npm:~3.7.4": + version: 3.7.4 + resolution: "rc-picker@npm:3.7.4" dependencies: "@babel/runtime": ^7.10.1 "@rc-component/trigger": ^1.5.0 classnames: ^2.2.1 - rc-util: ^5.27.0 + rc-util: ^5.30.0 peerDependencies: date-fns: ">= 2.x" dayjs: ">= 1.x" @@ -14630,7 +14665,7 @@ __metadata: optional: true moment: optional: true - checksum: 72fd7948bd6a81984a4c0668a0b9e853e2ff250531d55efedb09694ca18a458f484d92d5a7d564b4b34a229f98442ffb567ef30c4c67324f266897890322fe92 + checksum: 6b6cc858723763bdc30151635fb70118c390067bafa211a9541c62f017d480ac6fef9a9f8c92eb0c4040bfde9d1d53fc6b3af1d533bbe977a39b4dd915c517c3 languageName: node linkType: hard @@ -14677,9 +14712,9 @@ __metadata: languageName: node linkType: hard -"rc-segmented@npm:~2.1.2": - version: 2.1.2 - resolution: "rc-segmented@npm:2.1.2" +"rc-segmented@npm:~2.2.0": + version: 2.2.0 + resolution: "rc-segmented@npm:2.2.0" dependencies: "@babel/runtime": ^7.11.1 classnames: ^2.2.1 @@ -14688,7 +14723,7 @@ __metadata: peerDependencies: react: ">=16.0.0" react-dom: ">=16.0.0" - checksum: 9ebba682e70b480cacea79985b6c3fcd024d564a3105a9d48c6a0481a87002f8382987195014ce00e37d455e84dbd0def05d24e3671a52bd89aeeec43c82a91a + checksum: eb551cc6f28e8a972b195327ed1c4cee70dcfb0959ca2bf29c9c034687aedc6b224b556443b6b04ab921fd0ff3505e9a45173ea22ae16216a4f369e98fd7ae05 languageName: node linkType: hard @@ -14752,9 +14787,9 @@ __metadata: languageName: node linkType: hard -"rc-table@npm:~7.31.0": - version: 7.31.1 - resolution: "rc-table@npm:7.31.1" +"rc-table@npm:~7.32.1": + version: 7.32.1 + resolution: "rc-table@npm:7.32.1" dependencies: "@babel/runtime": ^7.10.1 "@rc-component/context": ^1.3.0 @@ -14764,17 +14799,17 @@ __metadata: peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: 2739a8f7f9602af1a9345960b5041ed50b28a1fa0012516018fee72a45bad45c94d95d3623be54d7ba3d0aca4ae00d64139a9d255786eece572bed08425d42ad + checksum: b2ecc2a11ceb4789414c3e49947508d570c163911d4c09926277b1c2973806bdc6932ca9652cf8098c1ad73657b6c6e412b002555d90f1bd9104d0cc570e09de languageName: node linkType: hard -"rc-tabs@npm:~12.5.6": - version: 12.5.7 - resolution: "rc-tabs@npm:12.5.7" +"rc-tabs@npm:~12.6.0": + version: 12.6.0 + resolution: "rc-tabs@npm:12.6.0" dependencies: "@babel/runtime": ^7.11.2 classnames: 2.x - rc-dropdown: ~4.0.0 + rc-dropdown: ~4.1.0 rc-menu: ~9.8.0 rc-motion: ^2.6.2 rc-resize-observer: ^1.0.0 @@ -14782,7 +14817,7 @@ __metadata: peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: ee2f6ff4a6cfd1f93d03f8023205203fd77e41d949a1f740be26bd8e91e14bf6195e66e7729f2c904aef10e1d250a5b32c64589cd1ba68c3f5d53b41e3013130 + checksum: 42204e15d39920a138cf7455f6e2a2af040c1a1c28e4a343c61b978e5754a2a47bbdfffba5bf66cc85d107bf1193586dc5b12c10411b5c599e50ba8e45ce5af2 languageName: node linkType: hard @@ -14848,7 +14883,7 @@ __metadata: languageName: node linkType: hard -"rc-trigger@npm:^5.1.2, rc-trigger@npm:^5.3.1": +"rc-trigger@npm:^5.1.2": version: 5.3.4 resolution: "rc-trigger@npm:5.3.4" dependencies: From 3ad26c8df45eb272b6587d12e777caa8c3005e43 Mon Sep 17 00:00:00 2001 From: Alexandr Buhlak <48954743+saha80@users.noreply.github.com> Date: Tue, 16 May 2023 16:01:23 +0300 Subject: [PATCH 08/81] refactor: ThemeConfigProvider, BaseTable --- .../common/BasePagination/BasePagination.tsx | 1 + .../common/BaseTable/BaseTable.styles.ts | 5 +- src/components/common/BaseTable/BaseTable.tsx | 13 +- .../BloodScreeningTable.styles.ts | 6 +- src/controllers/modalController.tsx | 4 +- src/styles/ThemeConfigProvider.tsx | 614 +++++++++--------- src/styles/themes/constants.ts | 8 + src/styles/themes/dark/darkTheme.ts | 2 +- src/styles/themes/light/lightTheme.ts | 2 +- 9 files changed, 329 insertions(+), 326 deletions(-) diff --git a/src/components/common/BasePagination/BasePagination.tsx b/src/components/common/BasePagination/BasePagination.tsx index 78d0ff53c..1cb0a34a1 100644 --- a/src/components/common/BasePagination/BasePagination.tsx +++ b/src/components/common/BasePagination/BasePagination.tsx @@ -4,5 +4,6 @@ import * as S from './BasePagination.styles'; export type BasePaginationProps = PaginationProps; export const BasePagination: React.FC = (props) => { + // https://github.com/ant-design/ant-design/issues/42418 return ; }; diff --git a/src/components/common/BaseTable/BaseTable.styles.ts b/src/components/common/BaseTable/BaseTable.styles.ts index 10d270e8e..248284b2b 100644 --- a/src/components/common/BaseTable/BaseTable.styles.ts +++ b/src/components/common/BaseTable/BaseTable.styles.ts @@ -1,9 +1,8 @@ import styled from 'styled-components'; import { Table as AntdTable } from 'antd'; import { FONT_SIZE } from '@app/styles/themes/constants'; -import type { RefTable } from 'antd/es/table/interface'; -export const Table = styled(AntdTable as RefTable)` +export const Table = styled(AntdTable)` & thead .ant-table-cell { color: var(--primary-color); font-size: ${FONT_SIZE.xs}; @@ -86,4 +85,4 @@ export const Table = styled(AntdTable as RefTable)` color: var(--disabled-color); } } -`; +` as typeof AntdTable; diff --git a/src/components/common/BaseTable/BaseTable.tsx b/src/components/common/BaseTable/BaseTable.tsx index e3e6ad637..7edf68215 100644 --- a/src/components/common/BaseTable/BaseTable.tsx +++ b/src/components/common/BaseTable/BaseTable.tsx @@ -1,13 +1,10 @@ -/* eslint-disable @typescript-eslint/no-explicit-any */ -import React from 'react'; -import { TableProps } from 'antd'; -import type { RefTable } from 'antd/es/table/interface'; +import { TableProps as BaseTableProps } from 'antd'; import * as S from './BaseTable.styles'; -export type BaseTableProps = TableProps; +export type { BaseTableProps }; // TODO make generic! -export const BaseTable: React.FC> = (props) => { - type StyledTableProps = Parameters[0]; - return ; +// eslint-disable-next-line @typescript-eslint/ban-types +export const BaseTable = (props: BaseTableProps): JSX.Element => { + return ; }; diff --git a/src/components/medical-dashboard/bloodScreeningCard/BloodScreeningTable/BloodScreeningTable.styles.ts b/src/components/medical-dashboard/bloodScreeningCard/BloodScreeningTable/BloodScreeningTable.styles.ts index 75e0bb0eb..38a389a25 100644 --- a/src/components/medical-dashboard/bloodScreeningCard/BloodScreeningTable/BloodScreeningTable.styles.ts +++ b/src/components/medical-dashboard/bloodScreeningCard/BloodScreeningTable/BloodScreeningTable.styles.ts @@ -1,12 +1,12 @@ import styled from 'styled-components'; -import { BaseTable as CommonTable } from '@app/components/common/BaseTable/BaseTable'; +import { BaseTable } from '@app/components/common/BaseTable/BaseTable'; import { FONT_SIZE, FONT_WEIGHT } from '@app/styles/themes/constants'; 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); @@ -27,7 +27,7 @@ export const Table = styled(CommonTable)` border: 0; cursor: pointer; } -`; +` as typeof BaseTable; // todo: remove type assertion export const Text = styled.span` color: var(--text-main-color); diff --git a/src/controllers/modalController.tsx b/src/controllers/modalController.tsx index 18c03bc9c..1ef864032 100644 --- a/src/controllers/modalController.tsx +++ b/src/controllers/modalController.tsx @@ -1,5 +1,5 @@ import styled from 'styled-components'; -import { FONT_SIZE, FONT_WEIGHT } from '@app/styles/themes/constants'; +import { FONT_SIZE, FONT_WEIGHT, HEIGHT } from '@app/styles/themes/constants'; import { ModalStaticFunctions } from 'antd/es/modal/confirm'; const ModalStyles = styled.div` @@ -26,7 +26,7 @@ const ModalStyles = styled.div` font-weight: ${FONT_WEIGHT.semibold}; background-color: var(--ant-primary-color); border-color: var(--ant-primary-color); - height: 50px; + height: ${HEIGHT.md}; } } } diff --git a/src/styles/ThemeConfigProvider.tsx b/src/styles/ThemeConfigProvider.tsx index c3a41a783..22918cb48 100644 --- a/src/styles/ThemeConfigProvider.tsx +++ b/src/styles/ThemeConfigProvider.tsx @@ -1,5 +1,5 @@ -import { PropsWithChildren } from 'react'; -import { ConfigProvider } from 'antd'; +import { FC, useMemo, ReactNode } from 'react'; +import { ThemeConfig, ConfigProvider } from 'antd'; import { ThemeType } from '@app/interfaces/interfaces'; import { @@ -9,350 +9,348 @@ import { BORDER_RADIUS, BREAKPOINTS, BASE_COLORS, + HEIGHT, } from '@app/styles/themes/constants'; import { themeObject } from './themes/themeVariables'; import { hexToRGB } from '@app/utils/utils'; -export interface ThemeConfigProviderProps extends PropsWithChildren { +export interface ThemeConfigProviderProps { theme: ThemeType; + children: ReactNode; } const remToPixels = (s: `${number}rem`) => parseFloat(s) * 16; const parseNumber = (s: `${number}` | `${number}px`) => parseFloat(s); -export const ThemeConfigProvider = ({ theme, children }: ThemeConfigProviderProps): JSX.Element => { - const currentTheme = themeObject[theme]; +export const ThemeConfigProvider: FC = ({ theme, children }) => { + const themeConfig = useMemo(() => { + const currentTheme = themeObject[theme]; - const colorFillAlter = `rgba(${hexToRGB(currentTheme.primary)}, 0.05)`; + const colorFillAlter = `rgba(${hexToRGB(currentTheme.primary)}, 0.05)`; - const fontFamily = `'${FONT_FAMILY.main}', sans-serif`; + const fontFamily = `'${FONT_FAMILY.main}', sans-serif`; - return ( - - {children} - - ); + return {children}; }; diff --git a/src/styles/themes/constants.ts b/src/styles/themes/constants.ts index 369753191..118c6725a 100644 --- a/src/styles/themes/constants.ts +++ b/src/styles/themes/constants.ts @@ -57,6 +57,14 @@ export const FONT_WEIGHT = { black: '900', } as const; +export const HEIGHT = { + xxs: '1.5rem', + xs: '2rem', + sm: '2.5rem', + md: '3.125rem', + lg: '4rem', +} as const; + export const BREAKPOINTS = { xs: 360, sm: 568, diff --git a/src/styles/themes/dark/darkTheme.ts b/src/styles/themes/dark/darkTheme.ts index 8ba0d555c..f1c61c747 100644 --- a/src/styles/themes/dark/darkTheme.ts +++ b/src/styles/themes/dark/darkTheme.ts @@ -45,7 +45,7 @@ const chartColors = { color: 'rgba(255, 82, 82, 0.5)', }, ]), -} as const; +} as const satisfies Partial; export const darkColorsTheme = { primary: '#339CFD', diff --git a/src/styles/themes/light/lightTheme.ts b/src/styles/themes/light/lightTheme.ts index fd0d819d2..701186312 100644 --- a/src/styles/themes/light/lightTheme.ts +++ b/src/styles/themes/light/lightTheme.ts @@ -45,7 +45,7 @@ const chartColors = { color: 'rgba(255, 82, 82, 0.5)', }, ]), -} as const; +} as const satisfies Partial; export const lightColorsTheme = { primary: '#01509A', From 26770c399d81e6ecd0ea718a13b1dfa143513b0c Mon Sep 17 00:00:00 2001 From: Alexandr Buhlak <48954743+saha80@users.noreply.github.com> Date: Tue, 23 May 2023 00:49:04 +0300 Subject: [PATCH 09/81] bump antd version --- package.json | 2 +- .../common/BasePagination/BasePagination.tsx | 1 - .../NotificationsDropdown.tsx | 2 +- .../settingsDropdown/SettingsDropdown.tsx | 2 +- src/styles/ThemeConfigProvider.tsx | 5 +- yarn.lock | 116 +++++++++++------- 6 files changed, 80 insertions(+), 48 deletions(-) diff --git a/package.json b/package.json index 509c5883e..ca31531ed 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,7 @@ "@lit-labs/react": "^1.0.2", "@react-google-maps/api": "^2.18.1", "@reduxjs/toolkit": "^1.7.1", - "antd": "^5.5.0", + "antd": "^5.5.1", "antd-mask-input": "^2.0.7", "axios": "^0.24.0", "axios-mock-adapter": "^1.20.0", diff --git a/src/components/common/BasePagination/BasePagination.tsx b/src/components/common/BasePagination/BasePagination.tsx index 1cb0a34a1..78d0ff53c 100644 --- a/src/components/common/BasePagination/BasePagination.tsx +++ b/src/components/common/BasePagination/BasePagination.tsx @@ -4,6 +4,5 @@ import * as S from './BasePagination.styles'; export type BasePaginationProps = PaginationProps; export const BasePagination: React.FC = (props) => { - // https://github.com/ant-design/ant-design/issues/42418 return ; }; diff --git a/src/components/header/components/notificationsDropdown/NotificationsDropdown.tsx b/src/components/header/components/notificationsDropdown/NotificationsDropdown.tsx index 68f370171..631fee14b 100644 --- a/src/components/header/components/notificationsDropdown/NotificationsDropdown.tsx +++ b/src/components/header/components/notificationsDropdown/NotificationsDropdown.tsx @@ -15,7 +15,7 @@ export const NotificationsDropdown: React.FC = () => { } - onOpenChange={setOpened} + afterOpenChange={setOpened} > { const [isOpened, setOpened] = useState(false); return ( - } trigger="click" onOpenChange={setOpened}> + } trigger="click" afterOpenChange={setOpened}> } /> diff --git a/src/styles/ThemeConfigProvider.tsx b/src/styles/ThemeConfigProvider.tsx index 22918cb48..1c0fed63f 100644 --- a/src/styles/ThemeConfigProvider.tsx +++ b/src/styles/ThemeConfigProvider.tsx @@ -151,6 +151,10 @@ export const ThemeConfigProvider: FC = ({ theme, child colorPrimaryHover: 'var(--ant-primary-5)', colorPrimary: 'var(--ant-primary-color)', }, + Tree: { + controlHeightSM: remToPixels(HEIGHT.xxs), + controlInteractiveSize: 16, + }, Table: { borderRadiusLG: 0, @@ -161,7 +165,6 @@ export const ThemeConfigProvider: FC = ({ theme, child controlItemBgActive: 'var(--ant-primary-1)', controlItemBgActiveHover: `rgba(${hexToRGB(currentTheme.primary)}, 0.12)`, - colorBgContainer: `rgba(${hexToRGB(currentTheme.primary)}, 0.003)`, }, Checkbox: { colorBgContainer: 'transparent', diff --git a/yarn.lock b/yarn.lock index ed0d2d842..816fdc4e1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -49,7 +49,7 @@ __metadata: languageName: node linkType: hard -"@ant-design/icons@npm:^5.0.0, @ant-design/icons@npm:^5.0.1": +"@ant-design/icons@npm:^5.0.1": version: 5.0.1 resolution: "@ant-design/icons@npm:5.0.1" dependencies: @@ -65,6 +65,22 @@ __metadata: languageName: node linkType: hard +"@ant-design/icons@npm:^5.1.0": + version: 5.1.0 + resolution: "@ant-design/icons@npm:5.1.0" + dependencies: + "@ant-design/colors": ^7.0.0 + "@ant-design/icons-svg": ^4.2.1 + "@babel/runtime": ^7.11.2 + classnames: ^2.2.6 + rc-util: ^5.9.4 + peerDependencies: + react: ">=16.0.0" + react-dom: ">=16.0.0" + checksum: 977baf9940c91c0939e72b0defd9503463f910b24c0ab2c38b0ca5769bf219923a70a28e431364431d20c880b33f167a636d351af9b668372946584b0f6bb006 + languageName: node + linkType: hard + "@ant-design/react-slick@npm:~1.0.0": version: 1.0.0 resolution: "@ant-design/react-slick@npm:1.0.0" @@ -2218,19 +2234,18 @@ __metadata: languageName: node linkType: hard -"@rc-component/color-picker@npm:~1.0.0": - version: 1.0.0 - resolution: "@rc-component/color-picker@npm:1.0.0" +"@rc-component/color-picker@npm:~1.1.1": + version: 1.1.1 + resolution: "@rc-component/color-picker@npm:1.1.1" dependencies: "@babel/runtime": ^7.10.1 "@ctrl/tinycolor": ^3.6.0 - "@rc-component/context": ^1.3.0 - "@rc-component/trigger": ^1.10.2 classnames: ^2.2.6 + rc-util: ^5.30.0 peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: 01a5f89c41a2597ae042b1b14a3dd5d80b8ed01dbfe41c3acca2b26598ed5e9ef6344cee137c02dd1da8f9ecb0298d5c8dbac0630b8b154e1042c624fd530c52 + checksum: c52327be84d97e9c949b04dc0c1fb3765b393d985882b23797d5e73d723a14ed080ab84b802b53039f8f170e8d3a3e8fdf3f7af12aab5b743464c3e625dc9a8b languageName: node linkType: hard @@ -2332,9 +2347,9 @@ __metadata: languageName: node linkType: hard -"@rc-component/trigger@npm:^1.10.2, @rc-component/trigger@npm:^1.12.0": - version: 1.12.1 - resolution: "@rc-component/trigger@npm:1.12.1" +"@rc-component/trigger@npm:^1.13.0": + version: 1.13.0 + resolution: "@rc-component/trigger@npm:1.13.0" dependencies: "@babel/runtime": ^7.18.3 "@rc-component/portal": ^1.1.0 @@ -2346,7 +2361,7 @@ __metadata: peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: 891d2408695ed040b7f52db9e2760c29ff3e948d24060ac2bb941771204cd18ea1b22dbb2a06057ab9f8e4c833d218c12e003dfabdcbabfe5d564d0cf306aef0 + checksum: c7362a75c080ac0948a3a9f79d47b0e6b0e2dd01b91dfc8e45e599485852003dabd3bf03b569988c1274dd3bce81b576c7a082571c30596ec8561da9da7bd83d languageName: node linkType: hard @@ -3934,25 +3949,25 @@ __metadata: languageName: node linkType: hard -"antd@npm:^5.5.0": - version: 5.5.0 - resolution: "antd@npm:5.5.0" +"antd@npm:^5.5.1": + version: 5.5.1 + resolution: "antd@npm:5.5.1" dependencies: "@ant-design/colors": ^7.0.0 "@ant-design/cssinjs": ^1.9.1 - "@ant-design/icons": ^5.0.0 + "@ant-design/icons": ^5.1.0 "@ant-design/react-slick": ~1.0.0 "@babel/runtime": ^7.18.3 "@ctrl/tinycolor": ^3.6.0 - "@rc-component/color-picker": ~1.0.0 + "@rc-component/color-picker": ~1.1.1 "@rc-component/mutate-observer": ^1.0.0 "@rc-component/tour": ~1.8.0 - "@rc-component/trigger": ^1.12.0 + "@rc-component/trigger": ^1.13.0 classnames: ^2.2.6 copy-to-clipboard: ^3.2.0 dayjs: ^1.11.1 qrcode.react: ^3.1.0 - rc-cascader: ~3.11.2 + rc-cascader: ~3.12.0 rc-checkbox: ~3.0.0 rc-collapse: ~3.5.2 rc-dialog: ~9.1.0 @@ -3966,13 +3981,13 @@ __metadata: rc-menu: ~9.8.3 rc-motion: ^2.7.3 rc-notification: ~5.0.4 - rc-pagination: ~3.3.1 + rc-pagination: ~3.4.2 rc-picker: ~3.7.4 rc-progress: ~3.4.1 rc-rate: ~2.10.0 rc-resize-observer: ^1.2.0 rc-segmented: ~2.2.0 - rc-select: ~14.4.3 + rc-select: ~14.5.0 rc-slider: ~10.1.0 rc-steps: ~6.0.0 rc-switch: ~4.1.0 @@ -3981,7 +3996,7 @@ __metadata: rc-textarea: ~1.2.2 rc-tooltip: ~6.0.0 rc-tree: ~5.7.0 - rc-tree-select: ~5.8.0 + rc-tree-select: ~5.9.0 rc-upload: ~4.3.0 rc-util: ^5.27.0 scroll-into-view-if-needed: ^3.0.3 @@ -3989,7 +4004,7 @@ __metadata: peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: 8594da886835c3dfb36fadbd8d67a8a95dd93fc2dc268723228b9db5de7f690ad79b3d9d3c6ebf89372de2ccbb4b0b9d1606503b3ee44fd9c405df0183e56498 + checksum: 27d77f2e571d2c6249828b0dd3615c562e1ddd80c0bc41328eca15b5307e995df5db292f2dbd80d0bd8b44e8a5b4d11c7018364d49a4f15a4b2fc119156cae26 languageName: node linkType: hard @@ -11094,7 +11109,7 @@ __metadata: "@types/uuid": ^8.3.4 "@typescript-eslint/eslint-plugin": ^5.10.0 "@typescript-eslint/parser": ^5.8.0 - antd: ^5.5.0 + antd: ^5.5.1 antd-mask-input: ^2.0.7 axios: ^0.24.0 axios-mock-adapter: ^1.20.0 @@ -14365,20 +14380,20 @@ __metadata: languageName: node linkType: hard -"rc-cascader@npm:~3.11.2": - version: 3.11.2 - resolution: "rc-cascader@npm:3.11.2" +"rc-cascader@npm:~3.12.0": + version: 3.12.0 + resolution: "rc-cascader@npm:3.12.0" dependencies: "@babel/runtime": ^7.12.5 array-tree-filter: ^2.1.0 classnames: ^2.3.1 - rc-select: ~14.4.0 + rc-select: ~14.5.0 rc-tree: ~5.7.0 rc-util: ^5.6.1 peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: 184b9b98b5b4b18ba5e021a3dd42eb950c6894bf2fe10eb09a2dd33e3ff85f7ef3c26358e30e929493e7b418fa3413bca9d0d57eb6dd287ad744b2c8b29e8b5c + checksum: 30b356119f8ae389d9feedb3cfcef07fe55452e5b2819c7df8bfed7f998cbc762a2929fd2b0dd96df2007a5554adb5876df9d9a4303ad0f6c17192e0e072d96a languageName: node linkType: hard @@ -14628,16 +14643,16 @@ __metadata: languageName: node linkType: hard -"rc-pagination@npm:~3.3.1": - version: 3.3.1 - resolution: "rc-pagination@npm:3.3.1" +"rc-pagination@npm:~3.4.2": + version: 3.4.2 + resolution: "rc-pagination@npm:3.4.2" dependencies: "@babel/runtime": ^7.10.1 classnames: ^2.2.1 peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: 0294cf1a79c054c3eda2f65cdbfdc9322aa2f025200048fe71e85948ff034b3fd7c4fd657ca9980bf5c420e3f7297c4afa79bc337f5056c94f09d89fb4f90bef + checksum: f7425fbf028df56b11ccec9f82f1b11c814e1d42c4d3b9d9e55c1f58592c82046ef9feb7da1de1b77fd6699b3c617ba259b476fae63a29307a62a7f19e8efe37 languageName: node linkType: hard @@ -14727,9 +14742,9 @@ __metadata: languageName: node linkType: hard -"rc-select@npm:~14.4.0, rc-select@npm:~14.4.3": - version: 14.4.3 - resolution: "rc-select@npm:14.4.3" +"rc-select@npm:~14.5.0": + version: 14.5.0 + resolution: "rc-select@npm:14.5.0" dependencies: "@babel/runtime": ^7.10.1 "@rc-component/trigger": ^1.5.0 @@ -14737,11 +14752,11 @@ __metadata: rc-motion: ^2.0.1 rc-overflow: ^1.0.0 rc-util: ^5.16.1 - rc-virtual-list: ^3.4.13 + rc-virtual-list: ^3.5.2 peerDependencies: react: "*" react-dom: "*" - checksum: 6f5654bf30e571a52842fe8f5542c6c3c833f4756d5686d82548845a31bf4bd299e2a1931cfdd1b47f522402acd38ffe869ff422a6ade0bffed6167fe7fe2f39 + checksum: 9e10ebf84eac1fc224e9fcc17ea0cec8d07db13cd760749a3b0e798ebcf85ed457a795bf37b157c7a60de4fb3139543fec96e80e5c1524938e2e840e551ea693 languageName: node linkType: hard @@ -14851,19 +14866,19 @@ __metadata: languageName: node linkType: hard -"rc-tree-select@npm:~5.8.0": - version: 5.8.0 - resolution: "rc-tree-select@npm:5.8.0" +"rc-tree-select@npm:~5.9.0": + version: 5.9.0 + resolution: "rc-tree-select@npm:5.9.0" dependencies: "@babel/runtime": ^7.10.1 classnames: 2.x - rc-select: ~14.4.0 + rc-select: ~14.5.0 rc-tree: ~5.7.0 rc-util: ^5.16.1 peerDependencies: react: "*" react-dom: "*" - checksum: bc7c3c453d70e9dc3d2f8de2179e35b877d40705a2b9149f111d6b21381f90bca3ebf1d5058e4927b12dfc9d75f78d3a6fce2f44ce9bc020982212ff52183fc0 + checksum: 35114024de35c59b2b56df77aa5b1ad6d262ae6ac5a02b68a425af598420e98d08a12dfa64f68578d4293166032239647d5c03a9c089aef49b33b5cfc4be9306 languageName: node linkType: hard @@ -14939,7 +14954,7 @@ __metadata: languageName: node linkType: hard -"rc-virtual-list@npm:^3.4.13, rc-virtual-list@npm:^3.4.8": +"rc-virtual-list@npm:^3.4.8": version: 3.4.13 resolution: "rc-virtual-list@npm:3.4.13" dependencies: @@ -14954,6 +14969,21 @@ __metadata: languageName: node linkType: hard +"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 + rc-resize-observer: ^1.0.0 + rc-util: ^5.15.0 + peerDependencies: + react: "*" + react-dom: "*" + checksum: d0ea5bc20bd54751220422442c6ff9c670fbe412b200a7739ac635212d3f0fd74863c85ed0532a9d65cf0e0e09a752c3ee65ed7233327529ac502aca118375a2 + languageName: node + linkType: hard + "react-app-polyfill@npm:^2.0.0": version: 2.0.0 resolution: "react-app-polyfill@npm:2.0.0" From 5de3fa4ecbc27da212e83896237574eaaa6f2017 Mon Sep 17 00:00:00 2001 From: Alexandr Buhlak <48954743+saha80@users.noreply.github.com> Date: Tue, 30 May 2023 11:42:17 +0300 Subject: [PATCH 10/81] bump antd version --- package.json | 2 +- yarn.lock | 69 +++++++++++++++++++++++++++++++++++++--------------- 2 files changed, 50 insertions(+), 21 deletions(-) diff --git a/package.json b/package.json index ca31531ed..36519860e 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,7 @@ "@lit-labs/react": "^1.0.2", "@react-google-maps/api": "^2.18.1", "@reduxjs/toolkit": "^1.7.1", - "antd": "^5.5.1", + "antd": "^5.5.2", "antd-mask-input": "^2.0.7", "axios": "^0.24.0", "axios-mock-adapter": "^1.20.0", diff --git a/yarn.lock b/yarn.lock index 816fdc4e1..64d6bf659 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2234,9 +2234,9 @@ __metadata: languageName: node linkType: hard -"@rc-component/color-picker@npm:~1.1.1": - version: 1.1.1 - resolution: "@rc-component/color-picker@npm:1.1.1" +"@rc-component/color-picker@npm:~1.2.0": + version: 1.2.0 + resolution: "@rc-component/color-picker@npm:1.2.0" dependencies: "@babel/runtime": ^7.10.1 "@ctrl/tinycolor": ^3.6.0 @@ -2245,7 +2245,7 @@ __metadata: peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: c52327be84d97e9c949b04dc0c1fb3765b393d985882b23797d5e73d723a14ed080ab84b802b53039f8f170e8d3a3e8fdf3f7af12aab5b743464c3e625dc9a8b + checksum: d0eb0ead64d386342c7813b0bbe163fc9b5f7c3bda9493a5d9106752a1b5643ad5a55a20ae20942931e50aafa80d1d243a05ab23a7c5f19720ed21065b17e1d7 languageName: node linkType: hard @@ -3949,9 +3949,9 @@ __metadata: languageName: node linkType: hard -"antd@npm:^5.5.1": - version: 5.5.1 - resolution: "antd@npm:5.5.1" +"antd@npm:^5.5.2": + version: 5.5.2 + resolution: "antd@npm:5.5.2" dependencies: "@ant-design/colors": ^7.0.0 "@ant-design/cssinjs": ^1.9.1 @@ -3959,7 +3959,7 @@ __metadata: "@ant-design/react-slick": ~1.0.0 "@babel/runtime": ^7.18.3 "@ctrl/tinycolor": ^3.6.0 - "@rc-component/color-picker": ~1.1.1 + "@rc-component/color-picker": ~1.2.0 "@rc-component/mutate-observer": ^1.0.0 "@rc-component/tour": ~1.8.0 "@rc-component/trigger": ^1.13.0 @@ -3973,7 +3973,7 @@ __metadata: rc-dialog: ~9.1.0 rc-drawer: ~6.1.1 rc-dropdown: ~4.1.0 - rc-field-form: ~1.31.0 + rc-field-form: ~1.32.0 rc-image: ~5.16.0 rc-input: ~1.0.4 rc-input-number: ~7.4.0 @@ -3995,16 +3995,16 @@ __metadata: rc-tabs: ~12.6.0 rc-textarea: ~1.2.2 rc-tooltip: ~6.0.0 - rc-tree: ~5.7.0 + rc-tree: ~5.7.4 rc-tree-select: ~5.9.0 rc-upload: ~4.3.0 - rc-util: ^5.27.0 + rc-util: ^5.32.0 scroll-into-view-if-needed: ^3.0.3 throttle-debounce: ^5.0.0 peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: 27d77f2e571d2c6249828b0dd3615c562e1ddd80c0bc41328eca15b5307e995df5db292f2dbd80d0bd8b44e8a5b4d11c7018364d49a4f15a4b2fc119156cae26 + checksum: 41cec99f5a750d6a2d6013655f80e7258d086467a394df4fe8c82098fb824a2dc1f35a65421c2fc4e5fa4db50a243e4fd0561346aa6b8384184e3f2fd5b0a12d languageName: node linkType: hard @@ -11109,7 +11109,7 @@ __metadata: "@types/uuid": ^8.3.4 "@typescript-eslint/eslint-plugin": ^5.10.0 "@typescript-eslint/parser": ^5.8.0 - antd: ^5.5.1 + antd: ^5.5.2 antd-mask-input: ^2.0.7 axios: ^0.24.0 axios-mock-adapter: ^1.20.0 @@ -14473,17 +14473,17 @@ __metadata: languageName: node linkType: hard -"rc-field-form@npm:~1.31.0": - version: 1.31.0 - resolution: "rc-field-form@npm:1.31.0" +"rc-field-form@npm:~1.32.0": + version: 1.32.0 + resolution: "rc-field-form@npm:1.32.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: 690b0867eec797662d0f10694cf4e9e9e36c61b27b5c35024721a7b492829f677aea74a95a572a499e8b9638eafa5a7e62c13ac6e54d19a37e41893c0e40051f + checksum: 39f8b58d10637f6fc70d15842cb1f072bf3088eeee7328de30cd36cd445e082312cd9fbc3e96b4e7fe35210c959c24e80305103939d5ef99cb98e73aee7f8e6f languageName: node linkType: hard @@ -14898,6 +14898,22 @@ __metadata: languageName: node linkType: hard +"rc-tree@npm:~5.7.4": + version: 5.7.4 + resolution: "rc-tree@npm:5.7.4" + dependencies: + "@babel/runtime": ^7.10.1 + classnames: 2.x + rc-motion: ^2.0.1 + rc-util: ^5.16.1 + rc-virtual-list: ^3.5.1 + peerDependencies: + react: "*" + react-dom: "*" + checksum: c478d4d41b31e9fcb0f3be7853800b3f3280e315e4ad3f0eab2587e6d4e79d4c8d0520fceaa48e6e6b9de8fb710624b1702866bd9711d1ed2faed697fb0711d6 + languageName: node + linkType: hard + "rc-trigger@npm:^5.1.2": version: 5.3.4 resolution: "rc-trigger@npm:5.3.4" @@ -14928,7 +14944,7 @@ __metadata: 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.20.1, rc-util@npm:^5.21.0, rc-util@npm:^5.21.2, rc-util@npm:^5.22.5, rc-util@npm:^5.24.4, rc-util@npm:^5.25.0, rc-util@npm:^5.26.0, rc-util@npm:^5.27.0, rc-util@npm:^5.27.1, rc-util@npm:^5.6.1, rc-util@npm:^5.8.0, rc-util@npm:^5.9.4": +"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.20.1, rc-util@npm:^5.21.0, rc-util@npm:^5.21.2, rc-util@npm:^5.22.5, rc-util@npm:^5.24.4, rc-util@npm:^5.25.0, rc-util@npm:^5.26.0, rc-util@npm:^5.27.0, rc-util@npm:^5.27.1, rc-util@npm:^5.6.1, rc-util@npm:^5.9.4": version: 5.28.0 resolution: "rc-util@npm:5.28.0" dependencies: @@ -14954,6 +14970,19 @@ __metadata: languageName: node linkType: hard +"rc-util@npm:^5.32.0, 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-virtual-list@npm:^3.4.8": version: 3.4.13 resolution: "rc-virtual-list@npm:3.4.13" @@ -14969,7 +14998,7 @@ __metadata: languageName: node linkType: hard -"rc-virtual-list@npm:^3.5.2": +"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: From 8adf8c735ffc18c91bbef62cad59d94048d588b2 Mon Sep 17 00:00:00 2001 From: Alexandr Buhlak <48954743+saha80@users.noreply.github.com> Date: Mon, 5 Jun 2023 13:42:10 +0300 Subject: [PATCH 11/81] fix: components styles --- src/App.tsx | 18 +- .../auth/NewPasswordForm/NewPasswordForm.tsx | 1 - .../BasePagination/BasePagination.styles.ts | 19 - .../common/BaseRadio/BaseRadio.styles.ts | 14 + .../components/BaseFormItem/BaseFormItem.ts | 24 +- .../forms/ControlForm/ControlForm.styles.ts | 2 +- src/styles/ThemeConfigProvider.tsx | 359 ------------------ src/styles/themeConfig.tsx | 298 +++++++++++++++ 8 files changed, 335 insertions(+), 400 deletions(-) delete mode 100644 src/styles/ThemeConfigProvider.tsx create mode 100644 src/styles/themeConfig.tsx diff --git a/src/App.tsx b/src/App.tsx index 2c25015b3..8b9f676e0 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -13,7 +13,7 @@ import { usePWA } from './hooks/usePWA'; import { useThemeWatcher } from './hooks/useThemeWatcher'; import { useAppSelector } from './hooks/reduxHooks'; import { themeObject } from './styles/themes/themeVariables'; -import { ThemeConfigProvider } from './styles/ThemeConfigProvider'; +import { getThemeConfig } from './styles/themeConfig'; const App: React.FC = () => { const { language } = useLanguage(); @@ -29,15 +29,13 @@ const App: React.FC = () => { <> - - - - - - - - - + + + + + + + ); }; diff --git a/src/components/auth/NewPasswordForm/NewPasswordForm.tsx b/src/components/auth/NewPasswordForm/NewPasswordForm.tsx index 1e9e108bd..76ebbc25e 100644 --- a/src/components/auth/NewPasswordForm/NewPasswordForm.tsx +++ b/src/components/auth/NewPasswordForm/NewPasswordForm.tsx @@ -73,7 +73,6 @@ export const NewPasswordForm: React.FC = () => { }, }), ]} - hasFeedback > diff --git a/src/components/common/BasePagination/BasePagination.styles.ts b/src/components/common/BasePagination/BasePagination.styles.ts index 62a33b683..827e7e4bb 100644 --- a/src/components/common/BasePagination/BasePagination.styles.ts +++ b/src/components/common/BasePagination/BasePagination.styles.ts @@ -6,25 +6,6 @@ export const Pagination = styled(AntdPagination)` color: var(--disabled-color); } - :not(.ant-pagination-disabled), - &.ant-pagination-disabled { - .ant-pagination-item, - .ant-pagination-jump-prev, - .ant-pagination-jump-next { - &:focus-visible { - outline: none; - } - } - .ant-pagination-prev, - .ant-pagination-next { - &:focus-visible { - .ant-pagination-item-link { - outline: none; - } - } - } - } - :not(.ant-pagination-disabled) { .ant-pagination-item:focus-visible { a { diff --git a/src/components/common/BaseRadio/BaseRadio.styles.ts b/src/components/common/BaseRadio/BaseRadio.styles.ts index a2d853eb9..989a8a508 100644 --- a/src/components/common/BaseRadio/BaseRadio.styles.ts +++ b/src/components/common/BaseRadio/BaseRadio.styles.ts @@ -7,6 +7,20 @@ export const Radio = styled(AntdRadio)` box-shadow: 0 0 0 3px var(--ant-primary-color-outline); } + &.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; + } + } + .ant-radio-disabled + span { color: var(--disabled-color); } diff --git a/src/components/common/forms/components/BaseFormItem/BaseFormItem.ts b/src/components/common/forms/components/BaseFormItem/BaseFormItem.ts index cd4d07e87..0563eb56e 100644 --- a/src/components/common/forms/components/BaseFormItem/BaseFormItem.ts +++ b/src/components/common/forms/components/BaseFormItem/BaseFormItem.ts @@ -113,17 +113,21 @@ export const BaseFormItem = styled(Form.Item)` 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: var(--error-color); + } } - &.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-has-success.ant-form-item-has-feedback { + .ant-input, + .ant-input-affix-wrapper, + .ant-input:hover, + .ant-input-affix-wrapper:hover { + border-color: var(--success-color); + } } `; diff --git a/src/components/forms/ControlForm/ControlForm.styles.ts b/src/components/forms/ControlForm/ControlForm.styles.ts index 968ee5aa2..06b525402 100644 --- a/src/components/forms/ControlForm/ControlForm.styles.ts +++ b/src/components/forms/ControlForm/ControlForm.styles.ts @@ -34,5 +34,5 @@ export const User = styled.div` `; export const AddUserButton = styled(BaseButton)` - margin: 0 0.5rem; + margin: 0.5rem 0; `; diff --git a/src/styles/ThemeConfigProvider.tsx b/src/styles/ThemeConfigProvider.tsx deleted file mode 100644 index 1c0fed63f..000000000 --- a/src/styles/ThemeConfigProvider.tsx +++ /dev/null @@ -1,359 +0,0 @@ -import { FC, useMemo, ReactNode } from 'react'; -import { ThemeConfig, ConfigProvider } from 'antd'; -import { ThemeType } from '@app/interfaces/interfaces'; - -import { - FONT_FAMILY, - FONT_SIZE, - FONT_WEIGHT, - BORDER_RADIUS, - BREAKPOINTS, - BASE_COLORS, - HEIGHT, -} from '@app/styles/themes/constants'; -import { themeObject } from './themes/themeVariables'; -import { hexToRGB } from '@app/utils/utils'; - -export interface ThemeConfigProviderProps { - theme: ThemeType; - children: ReactNode; -} - -const remToPixels = (s: `${number}rem`) => parseFloat(s) * 16; - -const parseNumber = (s: `${number}` | `${number}px`) => parseFloat(s); - -export const ThemeConfigProvider: FC = ({ theme, children }) => { - const themeConfig = useMemo(() => { - const currentTheme = themeObject[theme]; - - const colorFillAlter = `rgba(${hexToRGB(currentTheme.primary)}, 0.05)`; - - const fontFamily = `'${FONT_FAMILY.main}', sans-serif`; - - return { - token: { - colorPrimary: currentTheme.primary, - - boxShadow: currentTheme.boxShadow, - - colorTextHeading: currentTheme.heading, - - colorBgContainer: currentTheme.background, - - colorText: currentTheme.textMain, - - controlItemBgHover: currentTheme.itemHoverBg, - - colorBgBase: currentTheme.backgroundColorBase, - - colorBorder: currentTheme.borderBase, - - colorBgContainerDisabled: currentTheme.disabledBg, - - colorTextDisabled: currentTheme.disable, - - colorBgElevated: currentTheme.background, - - colorFillAlter, - - colorTextPlaceholder: currentTheme.inputPlaceholder, - - colorPrimaryHover: 'var(--ant-primary-5)', - - ...(theme === 'dark' - ? { - colorSuccessBg: 'var(--ant-success-color-deprecated-bg)', - colorSuccessBorder: 'var(--ant-success-color-deprecated-border)', - } - : {}), - - fontFamily, - - fontSize: remToPixels(FONT_SIZE.md), - - fontSizeSM: remToPixels(FONT_SIZE.xs), - - controlHeightSM: remToPixels(HEIGHT.xs), - - controlHeight: remToPixels(HEIGHT.md), - - controlHeightLG: remToPixels(HEIGHT.lg), - - borderRadius: parseNumber(BORDER_RADIUS), - - colorSplit: '#f0f0f0', - - screenXSMin: BREAKPOINTS.xs, - screenXS: BREAKPOINTS.xs, - screenXSMax: BREAKPOINTS.xs, - - screenSMMin: BREAKPOINTS.sm, - screenSM: BREAKPOINTS.sm, - screenSMMax: BREAKPOINTS.sm, - - screenMDMin: BREAKPOINTS.md, - screenMD: BREAKPOINTS.md, - screenMDMax: BREAKPOINTS.md, - - screenLGMin: BREAKPOINTS.lg, - screenLG: BREAKPOINTS.lg, - screenLGMax: BREAKPOINTS.lg, - - screenXLMin: BREAKPOINTS.xl, - screenXL: BREAKPOINTS.xl, - screenXLMax: BREAKPOINTS.xl, - - screenXXLMin: BREAKPOINTS.xxl, - screenXXL: BREAKPOINTS.xxl, - }, - // Some component tokens do not properly parse CSS variables. - components: { - Layout: { - controlHeight: 34, - - controlHeightLG: 12.8, - - colorBgBody: currentTheme.layoutBodyBg, - - colorBgHeader: currentTheme.layoutSiderBg, - }, - Alert: { - colorInfoBg: '#dfefff', - - colorText: currentTheme.alertTextColor, - - marginXS: 8, - - marginSM: 15, - paddingContentVerticalSM: 8, - - paddingMD: 15, - paddingContentHorizontalLG: 15, - - borderRadiusLG: parseNumber(BORDER_RADIUS), - }, - Card: { - colorTextHeading: currentTheme.textMain, - - padding: 20, - - fontSize: remToPixels(FONT_SIZE.lg), - - fontSizeSM: remToPixels(FONT_SIZE.md), - - paddingLG: 20, - - boxShadowTertiary: currentTheme.boxShadow, - borderRadiusLG: parseNumber(BORDER_RADIUS), - }, - Tabs: { - colorPrimaryHover: 'var(--ant-primary-5)', - colorPrimary: 'var(--ant-primary-color)', - }, - Tree: { - controlHeightSM: remToPixels(HEIGHT.xxs), - controlInteractiveSize: 16, - }, - Table: { - borderRadiusLG: 0, - - colorBorderSecondary: '#b3cbe1', - - colorTextHeading: currentTheme.primary, - colorFillAlter, - - controlItemBgActive: 'var(--ant-primary-1)', - controlItemBgActiveHover: `rgba(${hexToRGB(currentTheme.primary)}, 0.12)`, - }, - Checkbox: { - colorBgContainer: 'transparent', - - colorPrimary: currentTheme.primary, - colorTextDisabled: currentTheme.disable, - controlInteractiveSize: 16, - marginXS: 0, - }, - Tag: { - fontSize: remToPixels(FONT_SIZE.xs), - }, - Select: { - fontSizeSM: remToPixels(FONT_SIZE.xs), - borderRadiusXS: parseNumber(BORDER_RADIUS), - borderRadiusSM: parseNumber(BORDER_RADIUS), - - colorFillSecondary: currentTheme.backgroundColorBase, - colorIcon: currentTheme.icon, - colorPrimary: 'var(--ant-primary-color)', - colorPrimaryHover: 'var(--ant-primary-5)', - controlItemBgActive: 'var(--ant-primary-1)', - controlItemBgHover: currentTheme.itemHoverBg, - }, - Steps: { - wireframe: true, - controlHeight: remToPixels(HEIGHT.xs), - controlHeightSM: remToPixels(HEIGHT.xxs), - fontSizeHeading3: remToPixels(FONT_SIZE.xxl), - colorPrimary: currentTheme.primary, - colorTextDescription: currentTheme.subText, - }, - Spin: { - controlHeight: remToPixels(HEIGHT.xs), - controlHeightLG: remToPixels(HEIGHT.sm), - colorPrimary: 'var(--ant-primary-color)', - }, - Skeleton: { - controlHeightXS: 16, - controlHeightSM: remToPixels(HEIGHT.xs), - controlHeight: remToPixels(HEIGHT.md), - controlHeightLG: remToPixels(HEIGHT.lg), - color: 'rgba(190, 190, 190, 0.2)', - }, - Switch: { - controlHeight: remToPixels(HEIGHT.xs), - - colorPrimary: 'var(--ant-primary-color)', - colorWhite: currentTheme.background, - opacityLoading: 0.4, - }, - Menu: { - controlHeightLG: remToPixels(HEIGHT.md), - - fontSize: remToPixels(FONT_SIZE.xl), - - colorItemTextSelected: 'var(--ant-primary-color)', - colorActiveBarWidth: 3, - colorActiveBarBorderSize: 0, - marginXXS: 8, - }, - Popover: { - zIndexPopup: 2000, - - wireframe: true, - controlHeight: 34, - }, - Popconfirm: { - fontWeightStrong: parseNumber(FONT_WEIGHT.semibold), - colorPrimary: currentTheme.primary, - }, - Notification: { - zIndexPopup: 9999, - - width: 36 * 16, - - paddingMD: 2 * 16, - paddingLG: 0, - paddingContentHorizontalLG: 2 * 16, - - lineHeightLG: 2, - - colorSuccess: currentTheme.success, - colorInfo: currentTheme.primary, - colorWarning: currentTheme.warning, - colorError: currentTheme.error, - - fontFamily, - fontSizeLG: remToPixels(FONT_SIZE.xxl), - marginSM: 0, - boxShadow: - '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)', - controlHeightLG: 15 / 0.55, - wireframe: true, - }, - Input: { - colorTextPlaceholder: currentTheme.inputPlaceholder, - colorTextDisabled: currentTheme.disable, - colorPrimaryHover: 'var(--ant-primary-5)', - controlOutline: 'var(--ant-primary-color-outline)', - fontWeightStrong: parseNumber(FONT_WEIGHT.semibold), - colorFillAlter, - }, - InputNumber: { - colorPrimary: 'var(--ant-primary-5)', - }, - Form: { - colorInfoBorderHover: 'var(--ant-primary-color-hover)', - }, - Avatar: { - colorTextPlaceholder: currentTheme.avatarBg, - colorBorderBg: BASE_COLORS.white, - controlHeightSM: remToPixels(HEIGHT.xxs), - controlHeight: remToPixels(HEIGHT.xs), - controlHeightLG: remToPixels(HEIGHT.sm), - }, - Badge: { - colorPrimary: 'var(--ant-primary-color)', - colorTextPlaceholder: '#d9d9d9', - fontSizeSM: remToPixels(FONT_SIZE.xxs), - }, - Button: { - colorPrimary: currentTheme.primary, - borderRadiusSM: parseNumber(BORDER_RADIUS), - controlOutline: '0', - controlOutlineWidth: 0, - }, - Breadcrumb: { - colorTextDescription: currentTheme.breadcrumb, - }, - Rate: { - 'yellow-6': '#ffc24b', - colorFillContent: '#f0f0f0', - }, - Radio: { - colorPrimary: 'var(--ant-primary-color)', - controlItemBgActiveDisabled: '#e6e6e6', - }, - Result: { - fontSizeHeading3: remToPixels(FONT_SIZE.xxl), - }, - Pagination: { - wireframe: true, - colorPrimary: 'var(--ant-primary-color)', - controlItemBgActiveDisabled: '#e6e6e6', - }, - Slider: { - colorPrimaryBorder: 'var(--ant-primary-3)', - - colorPrimary: 'var(--ant-primary-4)', - colorPrimaryBorderHover: 'var(--ant-primary-4)', - - colorFillSecondary: '#e1e1e1', - colorBorderSecondary: '#e1e1e1', - colorFillContentHover: '#e1e1e1', - - colorFillTertiary: currentTheme.backgroundColorBase, - - handleSize: 8, - - colorTextDisabled: currentTheme.disable, - }, - Modal: { - colorTextDescription: currentTheme.icon, - wireframe: true, - }, - Progress: { - marginXS: 0, - colorFillSecondary: currentTheme.backgroundColorBase, - }, - DatePicker: { - colorIcon: currentTheme.textLight, - colorPrimary: '#1c68a6', - controlItemBgActive: 'var(--ant-primary-1)', - colorTextPlaceholder: currentTheme.inputPlaceholder, - fontWeightStrong: parseNumber(FONT_WEIGHT.medium), - controlHeightSM: remToPixels(HEIGHT.xs), - controlHeightLG: remToPixels(HEIGHT.lg), - }, - Dropdown: { - controlHeight: 34, - }, - Upload: { - colorFillAlter, - colorPrimaryHover: 'var(--ant-primary-5)', - }, - }, - }; - }, [theme]); - - return {children}; -}; diff --git a/src/styles/themeConfig.tsx b/src/styles/themeConfig.tsx new file mode 100644 index 000000000..8f30188a8 --- /dev/null +++ b/src/styles/themeConfig.tsx @@ -0,0 +1,298 @@ +import { ThemeConfig } from 'antd'; +import { ThemeType } from '@app/interfaces/interfaces'; +import { + FONT_FAMILY, + FONT_SIZE, + FONT_WEIGHT, + BORDER_RADIUS, + BREAKPOINTS, + BASE_COLORS, + HEIGHT, +} from '@app/styles/themes/constants'; +import { themeObject } from './themes/themeVariables'; +import { hexToRGB } from '@app/utils/utils'; + +const remToPixels = (s: `${number}rem`) => parseFloat(s) * 16; + +const parseNumber = (s: `${number}` | `${number}px`) => parseFloat(s); + +export const getThemeConfig = (theme: ThemeType): ThemeConfig => { + const currentTheme = themeObject[theme]; + + const colorFillAlter = `rgba(${hexToRGB(currentTheme.primary)}, 0.05)`; + + const fontFamily = `'${FONT_FAMILY.main}', sans-serif`; + + return { + token: { + colorPrimary: currentTheme.primary, + boxShadow: currentTheme.boxShadow, + colorTextHeading: currentTheme.heading, + colorBgContainer: currentTheme.background, + colorText: currentTheme.textMain, + controlItemBgHover: currentTheme.itemHoverBg, + colorBgBase: currentTheme.backgroundColorBase, + colorBorder: currentTheme.borderBase, + colorBgContainerDisabled: currentTheme.disabledBg, + colorTextDisabled: currentTheme.disable, + colorBgElevated: currentTheme.background, + colorFillAlter, + colorTextPlaceholder: currentTheme.inputPlaceholder, + colorPrimaryHover: 'var(--ant-primary-5)', + ...(theme === 'dark' + ? { + colorSuccessBg: 'var(--ant-success-color-deprecated-bg)', + colorSuccessBorder: 'var(--ant-success-color-deprecated-border)', + } + : {}), + fontFamily, + fontSize: remToPixels(FONT_SIZE.md), + fontSizeSM: remToPixels(FONT_SIZE.xs), + controlHeightSM: remToPixels(HEIGHT.xs), + controlHeight: remToPixels(HEIGHT.md), + controlHeightLG: remToPixels(HEIGHT.lg), + borderRadius: parseNumber(BORDER_RADIUS), + colorSplit: '#f0f0f0', + controlOutline: 'var(--ant-primary-color-outline)', + controlOutlineWidth: 2, + lineWidthFocus: 0, + screenXSMin: BREAKPOINTS.xs, + screenXS: BREAKPOINTS.xs, + screenXSMax: BREAKPOINTS.xs, + screenSMMin: BREAKPOINTS.sm, + screenSM: BREAKPOINTS.sm, + screenSMMax: BREAKPOINTS.sm, + screenMDMin: BREAKPOINTS.md, + screenMD: BREAKPOINTS.md, + screenMDMax: BREAKPOINTS.md, + screenLGMin: BREAKPOINTS.lg, + screenLG: BREAKPOINTS.lg, + screenLGMax: BREAKPOINTS.lg, + screenXLMin: BREAKPOINTS.xl, + screenXL: BREAKPOINTS.xl, + screenXLMax: BREAKPOINTS.xl, + screenXXLMin: BREAKPOINTS.xxl, + screenXXL: BREAKPOINTS.xxl, + }, + // Some component tokens do not properly parse CSS variables. + components: { + Layout: { + controlHeight: 34, + controlHeightLG: 12.8, + colorBgBody: currentTheme.layoutBodyBg, + colorBgHeader: currentTheme.layoutSiderBg, + }, + Alert: { + colorInfoBg: '#dfefff', + colorText: currentTheme.alertTextColor, + marginXS: 8, + marginSM: 15, + paddingContentVerticalSM: 8, + paddingMD: 15, + paddingContentHorizontalLG: 15, + borderRadiusLG: parseNumber(BORDER_RADIUS), + }, + Card: { + colorTextHeading: currentTheme.textMain, + padding: 20, + fontSize: remToPixels(FONT_SIZE.lg), + fontSizeSM: remToPixels(FONT_SIZE.md), + paddingLG: 20, + boxShadowTertiary: currentTheme.boxShadow, + borderRadiusLG: parseNumber(BORDER_RADIUS), + }, + Tabs: { + colorPrimaryHover: 'var(--ant-primary-5)', + colorPrimary: 'var(--ant-primary-color)', + }, + Tree: { + controlHeightSM: remToPixels(HEIGHT.xxs), + controlInteractiveSize: 16, + }, + Table: { + borderRadiusLG: 0, + colorBorderSecondary: '#b3cbe1', + colorTextHeading: currentTheme.primary, + colorFillAlter, + controlItemBgActive: 'var(--ant-primary-1)', + controlItemBgActiveHover: `rgba(${hexToRGB(currentTheme.primary)}, 0.12)`, + }, + Checkbox: { + colorBgContainer: 'transparent', + colorPrimary: currentTheme.primary, + colorTextDisabled: currentTheme.disable, + controlInteractiveSize: 16, + marginXS: 0, + }, + Tag: { + fontSize: remToPixels(FONT_SIZE.xs), + }, + Select: { + fontSizeSM: remToPixels(FONT_SIZE.xs), + borderRadiusXS: parseNumber(BORDER_RADIUS), + borderRadiusSM: parseNumber(BORDER_RADIUS), + colorFillSecondary: currentTheme.backgroundColorBase, + colorIcon: currentTheme.icon, + colorPrimary: 'var(--ant-primary-color)', + colorPrimaryHover: 'var(--ant-primary-5)', + controlItemBgActive: 'var(--ant-primary-1)', + controlItemBgHover: currentTheme.itemHoverBg, + }, + Steps: { + wireframe: true, + controlHeight: remToPixels(HEIGHT.xs), + controlHeightSM: remToPixels(HEIGHT.xxs), + fontSizeHeading3: remToPixels(FONT_SIZE.xxl), + colorPrimary: currentTheme.primary, + colorTextDescription: currentTheme.subText, + }, + Spin: { + controlHeight: remToPixels(HEIGHT.xs), + controlHeightLG: remToPixels(HEIGHT.sm), + colorPrimary: 'var(--ant-primary-color)', + }, + Skeleton: { + controlHeightXS: 16, + controlHeightSM: remToPixels(HEIGHT.xs), + controlHeight: remToPixels(HEIGHT.md), + controlHeightLG: remToPixels(HEIGHT.lg), + color: 'rgba(190, 190, 190, 0.2)', + }, + Switch: { + controlHeight: remToPixels(HEIGHT.xs), + colorPrimary: 'var(--ant-primary-color)', + colorWhite: currentTheme.background, + lineWidthFocus: 1, + colorPrimaryBorder: 'var(--ant-primary-1)', + opacityLoading: 0.4, + }, + Menu: { + controlHeightLG: remToPixels(HEIGHT.md), + fontSize: remToPixels(FONT_SIZE.xl), + colorItemTextSelected: 'var(--ant-primary-color)', + colorActiveBarWidth: 3, + colorActiveBarBorderSize: 0, + marginXXS: 8, + }, + Divider: { + colorSplit: 'rgba(0, 0, 0, 0.06)', + }, + Popover: { + zIndexPopup: 2000, + wireframe: true, + controlHeight: 34, + sizePopupArrow: 20, + }, + Popconfirm: { + fontWeightStrong: parseNumber(FONT_WEIGHT.semibold), + colorPrimary: currentTheme.primary, + }, + Notification: { + zIndexPopup: 9999, + width: 36 * 16, + paddingMD: 2 * 16, + paddingLG: 0, + paddingContentHorizontalLG: 2 * 16, + lineHeightLG: 2, + colorSuccess: currentTheme.success, + colorInfo: currentTheme.primary, + colorWarning: currentTheme.warning, + colorError: currentTheme.error, + fontFamily, + fontSizeLG: remToPixels(FONT_SIZE.xxl), + marginSM: 0, + boxShadow: + '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)', + controlHeightLG: 15 / 0.55, + wireframe: true, + }, + Input: { + colorTextPlaceholder: currentTheme.inputPlaceholder, + colorTextDisabled: currentTheme.disable, + colorPrimaryHover: 'var(--ant-primary-5)', + fontWeightStrong: parseNumber(FONT_WEIGHT.semibold), + colorFillAlter, + }, + InputNumber: { + colorPrimary: 'var(--ant-primary-5)', + }, + Form: { + colorInfoBorderHover: 'var(--ant-primary-color-hover)', + }, + Avatar: { + colorTextPlaceholder: currentTheme.avatarBg, + colorBorderBg: BASE_COLORS.white, + controlHeightSM: remToPixels(HEIGHT.xxs), + controlHeight: remToPixels(HEIGHT.xs), + controlHeightLG: remToPixels(HEIGHT.sm), + }, + Badge: { + colorPrimary: 'var(--ant-primary-color)', + colorTextPlaceholder: '#d9d9d9', + fontSizeSM: remToPixels(FONT_SIZE.xxs), + }, + Button: { + colorPrimary: currentTheme.primary, + borderRadiusSM: parseNumber(BORDER_RADIUS), + controlTmpOutline: 'var(--ant-primary-color-outline)', + controlOutline: '0', + controlOutlineWidth: 0, + }, + Breadcrumb: { + colorTextDescription: currentTheme.breadcrumb, + }, + Rate: { + 'yellow-6': '#ffc24b', + colorFillContent: '#f0f0f0', + }, + Radio: { + colorPrimary: 'var(--ant-primary-color)', + wireframe: true, + controlItemBgActiveDisabled: '#e6e6e6', + }, + Result: { + fontSizeHeading3: remToPixels(FONT_SIZE.xxl), + }, + Pagination: { + wireframe: true, + colorPrimary: 'var(--ant-primary-color)', + controlItemBgActiveDisabled: '#e6e6e6', + }, + Slider: { + colorPrimaryBorder: 'var(--ant-primary-3)', + colorPrimary: 'var(--ant-primary-4)', + colorPrimaryBorderHover: 'var(--ant-primary-4)', + colorFillSecondary: '#e1e1e1', + colorBorderSecondary: '#e1e1e1', + colorFillContentHover: '#e1e1e1', + colorFillTertiary: currentTheme.backgroundColorBase, + handleSize: 8, + colorTextDisabled: currentTheme.disable, + }, + Modal: { + colorTextDescription: currentTheme.icon, + wireframe: true, + }, + Progress: { + marginXS: 0, + colorFillSecondary: currentTheme.backgroundColorBase, + }, + DatePicker: { + colorIcon: currentTheme.textLight, + colorPrimary: '#1c68a6', + controlItemBgActive: 'var(--ant-primary-1)', + colorTextPlaceholder: currentTheme.inputPlaceholder, + fontWeightStrong: parseNumber(FONT_WEIGHT.medium), + controlHeightSM: remToPixels(HEIGHT.xs), + controlHeightLG: remToPixels(HEIGHT.lg), + }, + Dropdown: { + controlHeight: 34, + }, + Upload: { + colorFillAlter, + colorPrimaryHover: 'var(--ant-primary-5)', + }, + }, + }; +}; From 2093bece2000a5c62b6c3e4974dc53d6405f24e0 Mon Sep 17 00:00:00 2001 From: Alexandr Buhlak <48954743+saha80@users.noreply.github.com> Date: Tue, 13 Jun 2023 01:24:01 +0300 Subject: [PATCH 12/81] chore: bump antd version --- package.json | 2 +- yarn.lock | 187 +++++++++++++++++++++++++-------------------------- 2 files changed, 94 insertions(+), 95 deletions(-) diff --git a/package.json b/package.json index 36519860e..7eb135df6 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,7 @@ "@lit-labs/react": "^1.0.2", "@react-google-maps/api": "^2.18.1", "@reduxjs/toolkit": "^1.7.1", - "antd": "^5.5.2", + "antd": "^5.6.1", "antd-mask-input": "^2.0.7", "axios": "^0.24.0", "axios-mock-adapter": "^1.20.0", diff --git a/yarn.lock b/yarn.lock index 64d6bf659..ca586e902 100644 --- a/yarn.lock +++ b/yarn.lock @@ -24,9 +24,9 @@ __metadata: languageName: node linkType: hard -"@ant-design/cssinjs@npm:^1.9.1": - version: 1.9.1 - resolution: "@ant-design/cssinjs@npm:1.9.1" +"@ant-design/cssinjs@npm:^1.10.1": + version: 1.10.1 + resolution: "@ant-design/cssinjs@npm:1.10.1" dependencies: "@babel/runtime": ^7.11.1 "@emotion/hash": ^0.8.0 @@ -38,7 +38,7 @@ __metadata: peerDependencies: react: ">=16.0.0" react-dom: ">=16.0.0" - checksum: 504f207a315c7232af213ee01351e90b91a54b56de2363e33b8afd75fdd81150cc1156f344eeeb3269557e03d8814287047fd4dc49d8a8626cb37ef9bce7ab41 + checksum: ffaf1f8bc5bed4d05e91f5562c5a9a81c1892ae12c28e43100a8f1cd6e5d29617efacf83aa471dde8a4739f1a2c8b04281d1ecdb3d839e3b60ead5da2e461a39 languageName: node linkType: hard @@ -2285,7 +2285,7 @@ __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.0-9, @rc-component/portal@npm:^1.0.2": +"@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: @@ -2299,7 +2299,7 @@ __metadata: languageName: node linkType: hard -"@rc-component/portal@npm:^1.1.0": +"@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: @@ -2365,6 +2365,24 @@ __metadata: languageName: node linkType: hard +"@rc-component/trigger@npm:^1.6.2": + version: 1.13.5 + resolution: "@rc-component/trigger@npm:1.13.5" + 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.33.0 + peerDependencies: + react: ">=16.9.0" + react-dom: ">=16.9.0" + checksum: 54e216c89375ebc81627cc133493d32e431997ddf84e695dc09f32a8770e25505740743ef07992427050300b0275729fda65452da27e49c0d91ee408ffe48ce0 + 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" @@ -3949,12 +3967,12 @@ __metadata: languageName: node linkType: hard -"antd@npm:^5.5.2": - version: 5.5.2 - resolution: "antd@npm:5.5.2" +"antd@npm:^5.6.1": + version: 5.6.1 + resolution: "antd@npm:5.6.1" dependencies: "@ant-design/colors": ^7.0.0 - "@ant-design/cssinjs": ^1.9.1 + "@ant-design/cssinjs": ^1.10.1 "@ant-design/icons": ^5.1.0 "@ant-design/react-slick": ~1.0.0 "@babel/runtime": ^7.18.3 @@ -3969,22 +3987,22 @@ __metadata: qrcode.react: ^3.1.0 rc-cascader: ~3.12.0 rc-checkbox: ~3.0.0 - rc-collapse: ~3.5.2 + rc-collapse: ~3.7.0 rc-dialog: ~9.1.0 - rc-drawer: ~6.1.1 + rc-drawer: ~6.2.0 rc-dropdown: ~4.1.0 rc-field-form: ~1.32.0 - rc-image: ~5.16.0 + rc-image: ~5.17.1 rc-input: ~1.0.4 rc-input-number: ~7.4.0 - rc-mentions: ~2.2.0 - rc-menu: ~9.8.3 + rc-mentions: ~2.3.0 + rc-menu: ~9.9.2 rc-motion: ^2.7.3 rc-notification: ~5.0.4 - rc-pagination: ~3.4.2 - rc-picker: ~3.7.4 + rc-pagination: ~3.5.0 + rc-picker: ~3.8.0 rc-progress: ~3.4.1 - rc-rate: ~2.10.0 + rc-rate: ~2.12.0 rc-resize-observer: ^1.2.0 rc-segmented: ~2.2.0 rc-select: ~14.5.0 @@ -3992,7 +4010,7 @@ __metadata: rc-steps: ~6.0.0 rc-switch: ~4.1.0 rc-table: ~7.32.1 - rc-tabs: ~12.6.0 + rc-tabs: ~12.7.0 rc-textarea: ~1.2.2 rc-tooltip: ~6.0.0 rc-tree: ~5.7.4 @@ -4004,7 +4022,7 @@ __metadata: peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: 41cec99f5a750d6a2d6013655f80e7258d086467a394df4fe8c82098fb824a2dc1f35a65421c2fc4e5fa4db50a243e4fd0561346aa6b8384184e3f2fd5b0a12d + checksum: 8ee8345375be69fc4b242ecb46e72683be361e102fe306717adcd66b0d208cc82bdf0cb60ed1b557bf3611857e5516d2f69f79e408f262783599f6e36c8fe513 languageName: node linkType: hard @@ -11109,7 +11127,7 @@ __metadata: "@types/uuid": ^8.3.4 "@typescript-eslint/eslint-plugin": ^5.10.0 "@typescript-eslint/parser": ^5.8.0 - antd: ^5.5.2 + antd: ^5.6.1 antd-mask-input: ^2.0.7 axios: ^0.24.0 axios-mock-adapter: ^1.20.0 @@ -14411,9 +14429,9 @@ __metadata: languageName: node linkType: hard -"rc-collapse@npm:~3.5.2": - version: 3.5.2 - resolution: "rc-collapse@npm:3.5.2" +"rc-collapse@npm:~3.7.0": + version: 3.7.0 + resolution: "rc-collapse@npm:3.7.0" dependencies: "@babel/runtime": ^7.10.1 classnames: 2.x @@ -14422,7 +14440,7 @@ __metadata: peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: 38a47d96c09520f11ab324a390f0be6c8e73bb169f8c636c71f88a8d66a70a1a1a12fbc7c754c2ffc973b0bec90d223dfaf637ef474da0a4c9c63fa05d8cc71d + checksum: f3f6dc1724c763f2e89ac8f1a853f8d80bc32731ad266c1092167cf9af3eb7e32a4d6b113c54366716f3e63f14eb511be77d9192103dec9d95c021b813f26203 languageName: node linkType: hard @@ -14442,19 +14460,19 @@ __metadata: languageName: node linkType: hard -"rc-drawer@npm:~6.1.1": - version: 6.1.3 - resolution: "rc-drawer@npm:6.1.3" +"rc-drawer@npm:~6.2.0": + version: 6.2.0 + resolution: "rc-drawer@npm:6.2.0" 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 peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: 09fa3085312f668b27e0a8acae7f560a7d45ad52e4554020a6d3801352331b1173b20f57d32f876cfc1b359bd3088190e90bd7815619144d6d50b83c4ab44196 + checksum: b006caa2036bb84760f447de193841de00a0867e32971349d210b6e1c97f7cf61b2dba05a467f03d55bba592d153b688e882adb4af20daa5271b9286f313fbc0 languageName: node linkType: hard @@ -14487,9 +14505,9 @@ __metadata: languageName: node linkType: hard -"rc-image@npm:~5.16.0": - version: 5.16.0 - resolution: "rc-image@npm:5.16.0" +"rc-image@npm:~5.17.1": + version: 5.17.1 + resolution: "rc-image@npm:5.17.1" dependencies: "@babel/runtime": ^7.11.2 "@rc-component/portal": ^1.0.2 @@ -14500,7 +14518,7 @@ __metadata: peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: 85ea82d349de80a1d9a926997acc8c8576f659bf7b7edb8d090d758ff0e8b7db8f23ce49e344a9cdaef106d00ae5f97e3e23330c83e4ea8f741567c079187541 + checksum: 8e08223261d7b0a7ec6e7f705576d9d721b8bf25b6c1dbc70d01fe7d44c16d290edb3abf13c847331d9791aab2f1c10bef57dfe78b620b945bb45d9643d1fa6b languageName: node linkType: hard @@ -14533,55 +14551,38 @@ __metadata: languageName: node linkType: hard -"rc-mentions@npm:~2.2.0": - version: 2.2.0 - resolution: "rc-mentions@npm:2.2.0" +"rc-mentions@npm:~2.3.0": + version: 2.3.0 + resolution: "rc-mentions@npm:2.3.0" dependencies: "@babel/runtime": ^7.10.1 "@rc-component/trigger": ^1.5.0 classnames: ^2.2.6 rc-input: ~1.0.0 - rc-menu: ~9.8.0 + rc-menu: ~9.9.0 rc-textarea: ~1.2.0 rc-util: ^5.22.5 peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: 79c43188e71d0503c8dbb6919dc7cc3147ae96c97c2a78bf7802e45e127f57cf504a0ed5237960a4bdfd46cb28d0aed24ff820ac4a439f1b653210fc3e671e5a - languageName: node - linkType: hard - -"rc-menu@npm:~9.8.0": - version: 9.8.2 - resolution: "rc-menu@npm:9.8.2" - dependencies: - "@babel/runtime": ^7.10.1 - classnames: 2.x - rc-motion: ^2.4.3 - rc-overflow: ^1.2.8 - rc-trigger: ^5.1.2 - rc-util: ^5.27.0 - peerDependencies: - react: ">=16.9.0" - react-dom: ">=16.9.0" - checksum: cd8513fe329802e627785133784954e2745afde7cd4507dfcd7cdde933b087f93d9acb478b3e02a5cc30228ef7611002a269c9a64bfa5228b74eba63d3d37a05 + checksum: b1548f3a2cec8609cc1ef1a5fe56db5d06983ec465ac00fa2ecd259a20f9619f8e6179135b02aa45565d8b724e66f65d708d3ce4bff254b3c5764db10002c762 languageName: node linkType: hard -"rc-menu@npm:~9.8.3": - version: 9.8.4 - resolution: "rc-menu@npm:9.8.4" +"rc-menu@npm:~9.9.0, rc-menu@npm:~9.9.2": + version: 9.9.2 + resolution: "rc-menu@npm:9.9.2" dependencies: "@babel/runtime": ^7.10.1 + "@rc-component/trigger": ^1.6.2 classnames: 2.x rc-motion: ^2.4.3 rc-overflow: ^1.2.8 - rc-trigger: ^5.1.2 rc-util: ^5.27.0 peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: a646dea20e8f5638aa25da8e9fa552ffb833b13fbfce04b7ae876892e7ea1592143cbf57bcb943fa9ea96f29e65a1987c2aab5c1407874e825e0ba20e16109f2 + checksum: 028108a61c23672c8ac469c14c7545c0f6a7f5b58e49b6bb2a5225d1eb7d86e37fa40cbbcf7150225289ad894b54fa6c974bd7a9562db6f34dbe26ad7db7985c languageName: node linkType: hard @@ -14643,22 +14644,23 @@ __metadata: languageName: node linkType: hard -"rc-pagination@npm:~3.4.2": - version: 3.4.2 - resolution: "rc-pagination@npm:3.4.2" +"rc-pagination@npm:~3.5.0": + version: 3.5.0 + resolution: "rc-pagination@npm:3.5.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: f7425fbf028df56b11ccec9f82f1b11c814e1d42c4d3b9d9e55c1f58592c82046ef9feb7da1de1b77fd6699b3c617ba259b476fae63a29307a62a7f19e8efe37 + checksum: 27ac05cdaf331ba571eb19fdaf79a2e3b6cb3575fce5f011f0de5abbe88db21a4292ef5323abab3a829ff6cda396444c664f88bd55226fa477f473282a8a868e languageName: node linkType: hard -"rc-picker@npm:~3.7.4": - version: 3.7.4 - resolution: "rc-picker@npm:3.7.4" +"rc-picker@npm:~3.8.0": + version: 3.8.1 + resolution: "rc-picker@npm:3.8.1" dependencies: "@babel/runtime": ^7.10.1 "@rc-component/trigger": ^1.5.0 @@ -14680,7 +14682,7 @@ __metadata: optional: true moment: optional: true - checksum: 6b6cc858723763bdc30151635fb70118c390067bafa211a9541c62f017d480ac6fef9a9f8c92eb0c4040bfde9d1d53fc6b3af1d533bbe977a39b4dd915c517c3 + checksum: 6e8c4fc31661c14160cefd2a15175128d9eb49b8ec89c84736d5441653cbcdea884dd57b316b567f0ac08a6b2fdf485c198e55fec07c3866700524286a617b7b languageName: node linkType: hard @@ -14698,9 +14700,9 @@ __metadata: languageName: node linkType: hard -"rc-rate@npm:~2.10.0": - version: 2.10.0 - resolution: "rc-rate@npm:2.10.0" +"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 @@ -14708,7 +14710,7 @@ __metadata: peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: ccc6e683a5297e71c4779358bc21f3908e08deac9f3a6e40b0ce3e3ad8bd430caecb9647258d6f8ba1fac063058b64d34c78b94815de7f104b727c23da5628b5 + checksum: aa41bb6b89a53cb69641123e8e3dfe9e6bb3092fb102b80eb251d32e18c5f7ad9a6f47c7c848ece91eee68f8df5b90719e026c14a148d4645aecf3489727bed5 languageName: node linkType: hard @@ -14818,21 +14820,21 @@ __metadata: languageName: node linkType: hard -"rc-tabs@npm:~12.6.0": - version: 12.6.0 - resolution: "rc-tabs@npm:12.6.0" +"rc-tabs@npm:~12.7.0": + version: 12.7.1 + resolution: "rc-tabs@npm:12.7.1" dependencies: "@babel/runtime": ^7.11.2 classnames: 2.x rc-dropdown: ~4.1.0 - rc-menu: ~9.8.0 + rc-menu: ~9.9.0 rc-motion: ^2.6.2 rc-resize-observer: ^1.0.0 rc-util: ^5.16.0 peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: 42204e15d39920a138cf7455f6e2a2af040c1a1c28e4a343c61b978e5754a2a47bbdfffba5bf66cc85d107bf1193586dc5b12c10411b5c599e50ba8e45ce5af2 + checksum: f20fcf63ea504bd216b3bda849b9ab0c0e308ad6f26eef18f0c4ea17544968ee6bd53f6a3d187476f84ae0ea4390f97467b1a467195c80295154143bc0eee3ad languageName: node linkType: hard @@ -14914,22 +14916,6 @@ __metadata: languageName: node linkType: hard -"rc-trigger@npm:^5.1.2": - version: 5.3.4 - resolution: "rc-trigger@npm:5.3.4" - 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 - peerDependencies: - react: ">=16.9.0" - react-dom: ">=16.9.0" - checksum: 6ca7694a4cf064040b5e0fd9b4629b0e0a19ebb29c4eb5614ee9eb22b4193e21909171fd95e48be73a94e44f249cb9616d7670b696164620b722d3de6f280017 - languageName: node - linkType: hard - "rc-upload@npm:~4.3.0": version: 4.3.4 resolution: "rc-upload@npm:4.3.4" @@ -14983,6 +14969,19 @@ __metadata: languageName: node linkType: hard +"rc-util@npm:^5.33.0": + version: 5.33.0 + resolution: "rc-util@npm:5.33.0" + dependencies: + "@babel/runtime": ^7.18.3 + react-is: ^16.12.0 + peerDependencies: + react: ">=16.9.0" + react-dom: ">=16.9.0" + checksum: 1a5b4f2ded3ca8a874e3a0797158fb1be60987711145346ba4b9ae8e84fb91462dd030ff06850644d93a46c9d53eaccb978c703a1f3841e55ac2af0117c35745 + languageName: node + linkType: hard + "rc-virtual-list@npm:^3.4.8": version: 3.4.13 resolution: "rc-virtual-list@npm:3.4.13" From bc52ebc2a611973118e40d04d3e9801f43ef449f Mon Sep 17 00:00:00 2001 From: Alexandr Buhlak <48954743+saha80@users.noreply.github.com> Date: Tue, 13 Jun 2023 01:33:49 +0300 Subject: [PATCH 13/81] refactor: remove deprecated, preserve css variables --- .../common/BaseTable/BaseTable.styles.ts | 2 +- .../common/BaseTabs/BaseTabs.styles.ts | 9 ++ .../selects/BaseSelect/BaseSelect.styles.ts | 6 ++ .../SettingsOverlay/SettingsOverlay.tsx | 36 +++++--- .../NightTimeSlider/NightTimeSlider.styles.ts | 4 +- .../mapCard/DoctorsMap/DoctorsMap.styles.ts | 2 +- .../collection/TrendingCollection.styles.ts | 1 + .../story/TrendingCreatorsStory.styles.ts | 1 - src/hooks/useThemeWatcher.ts | 12 --- .../dataDisplay/CollapsePage.tsx | 82 ++++++++---------- .../uiComponentsPages/navigation/TabsPage.tsx | 2 +- src/styles/GlobalStyle.ts | 12 +-- src/styles/themeConfig.tsx | 85 ++++++++++++------- src/styles/themes/dark/darkTheme.ts | 13 +++ src/styles/themes/light/lightTheme.ts | 16 ++++ src/styles/themes/themeVariables.ts | 34 ++++---- 16 files changed, 180 insertions(+), 137 deletions(-) diff --git a/src/components/common/BaseTable/BaseTable.styles.ts b/src/components/common/BaseTable/BaseTable.styles.ts index 248284b2b..91c66f489 100644 --- a/src/components/common/BaseTable/BaseTable.styles.ts +++ b/src/components/common/BaseTable/BaseTable.styles.ts @@ -26,7 +26,7 @@ export const Table = styled(AntdTable)` margin-top: 0; } - // Override default antd selector + /* Override default antd selector */ & .ant-table-thead > tr diff --git a/src/components/common/BaseTabs/BaseTabs.styles.ts b/src/components/common/BaseTabs/BaseTabs.styles.ts index 35f241471..03c4eef25 100644 --- a/src/components/common/BaseTabs/BaseTabs.styles.ts +++ b/src/components/common/BaseTabs/BaseTabs.styles.ts @@ -5,4 +5,13 @@ export const Tabs = styled(AntdTabs)` .ant-tabs-tab.ant-tabs-tab-disabled { color: var(--disabled-color); } + + &.ant-tabs .ant-tabs-tab:not(.ant-tabs-tab-active) { + .ant-tabs-tab-btn, + .ant-tabs-tab-remove { + &:focus-visible { + color: var(--ant-primary-7); + } + } + } `; diff --git a/src/components/common/selects/BaseSelect/BaseSelect.styles.ts b/src/components/common/selects/BaseSelect/BaseSelect.styles.ts index ed1b270f2..442111344 100644 --- a/src/components/common/selects/BaseSelect/BaseSelect.styles.ts +++ b/src/components/common/selects/BaseSelect/BaseSelect.styles.ts @@ -52,10 +52,16 @@ export const Select = styled(AntSelect)` } &.ant-select-disabled.ant-select-multiple .ant-select-selection-item { + color: #bfbfbf; background: var(--background-base-color); + border: 1px solid var(--border-base-color); + cursor: not-allowed; } &.ant-select-multiple { + .ant-select-selection-item { + border: 1px solid #f0f0f0; + } .ant-select-selector { padding-inline-start: 11px; } 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..93c505e73 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 @@ -18,7 +18,7 @@ export const Wrapper = styled.div` --round-slider-handle-border-color: var(--primary-color); round-slider { - z-index: 1; // To make it under InnerWrapper + z-index: 1; /* To make it under InnerWrapper */ } `; @@ -44,7 +44,7 @@ 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)` diff --git a/src/components/medical-dashboard/mapCard/DoctorsMap/DoctorsMap.styles.ts b/src/components/medical-dashboard/mapCard/DoctorsMap/DoctorsMap.styles.ts index 5379293f5..f7f6cde2f 100644 --- a/src/components/medical-dashboard/mapCard/DoctorsMap/DoctorsMap.styles.ts +++ b/src/components/medical-dashboard/mapCard/DoctorsMap/DoctorsMap.styles.ts @@ -3,7 +3,7 @@ import styled from 'styled-components'; import { CountryMap } from '../../../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; 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 519fee8d4..76f8a7a48 100644 --- a/src/components/nft-dashboard/trending-collections/collection/TrendingCollection.styles.ts +++ b/src/components/nft-dashboard/trending-collections/collection/TrendingCollection.styles.ts @@ -3,6 +3,7 @@ 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 { BaseTypography } from '@app/components/common/BaseTypography/BaseTypography'; + interface CardInternalProps { $img: string; } 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..812f29f8d 100644 --- a/src/components/nft-dashboard/trending-creators/story/TrendingCreatorsStory.styles.ts +++ b/src/components/nft-dashboard/trending-creators/story/TrendingCreatorsStory.styles.ts @@ -9,7 +9,6 @@ export const CreatorButton = styled.button` align-items: center; text-align: center; background: 0 0; - border: 0; cursor: pointer; border-radius: 50%; padding: 2px; 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/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/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 }))} /> parseFloat(s) * 16; @@ -18,14 +18,20 @@ const parseNumber = (s: `${number}` | `${number}px`) => parseFloat(s); export const getThemeConfig = (theme: ThemeType): ThemeConfig => { const currentTheme = themeObject[theme]; + const antTheme = antThemeObject[theme]; const colorFillAlter = `rgba(${hexToRGB(currentTheme.primary)}, 0.05)`; const fontFamily = `'${FONT_FAMILY.main}', sans-serif`; + // In some properties CSS variables are not parsed properly. return { token: { colorPrimary: currentTheme.primary, + colorInfo: currentTheme.primary, + colorSuccess: currentTheme.success, + colorError: currentTheme.error, + colorWarning: currentTheme.warning, boxShadow: currentTheme.boxShadow, colorTextHeading: currentTheme.heading, colorBgContainer: currentTheme.background, @@ -38,11 +44,11 @@ export const getThemeConfig = (theme: ThemeType): ThemeConfig => { colorBgElevated: currentTheme.background, colorFillAlter, colorTextPlaceholder: currentTheme.inputPlaceholder, - colorPrimaryHover: 'var(--ant-primary-5)', + colorPrimaryHover: antTheme.primary5, ...(theme === 'dark' ? { - colorSuccessBg: 'var(--ant-success-color-deprecated-bg)', - colorSuccessBorder: 'var(--ant-success-color-deprecated-border)', + colorSuccessBg: antThemeObject[theme].successBg, + colorSuccessBorder: antThemeObject[theme].successBorder, } : {}), fontFamily, @@ -53,7 +59,7 @@ export const getThemeConfig = (theme: ThemeType): ThemeConfig => { controlHeightLG: remToPixels(HEIGHT.lg), borderRadius: parseNumber(BORDER_RADIUS), colorSplit: '#f0f0f0', - controlOutline: 'var(--ant-primary-color-outline)', + controlOutline: antTheme.primaryColorOutline, controlOutlineWidth: 2, lineWidthFocus: 0, screenXSMin: BREAKPOINTS.xs, @@ -74,7 +80,6 @@ export const getThemeConfig = (theme: ThemeType): ThemeConfig => { screenXXLMin: BREAKPOINTS.xxl, screenXXL: BREAKPOINTS.xxl, }, - // Some component tokens do not properly parse CSS variables. components: { Layout: { controlHeight: 34, @@ -102,8 +107,17 @@ export const getThemeConfig = (theme: ThemeType): ThemeConfig => { borderRadiusLG: parseNumber(BORDER_RADIUS), }, Tabs: { - colorPrimaryHover: 'var(--ant-primary-5)', - colorPrimary: 'var(--ant-primary-color)', + colorPrimaryHover: antTheme.primary5, + colorPrimary: antTheme.primaryColor, + colorPrimaryActive: antTheme.primary7, + + itemSelectedColor: antTheme.primary5, + itemHoverColor: antTheme.primaryColor, + itemActiveColor: antTheme.primary7, + + colorTextDisabled: currentTheme.disable, + + colorBorderSecondary: '#f0f0f0', }, Tree: { controlHeightSM: remToPixels(HEIGHT.xxs), @@ -114,7 +128,7 @@ export const getThemeConfig = (theme: ThemeType): ThemeConfig => { colorBorderSecondary: '#b3cbe1', colorTextHeading: currentTheme.primary, colorFillAlter, - controlItemBgActive: 'var(--ant-primary-1)', + controlItemBgActive: antTheme.primary1, controlItemBgActiveHover: `rgba(${hexToRGB(currentTheme.primary)}, 0.12)`, }, Checkbox: { @@ -131,11 +145,12 @@ export const getThemeConfig = (theme: ThemeType): ThemeConfig => { fontSizeSM: remToPixels(FONT_SIZE.xs), borderRadiusXS: parseNumber(BORDER_RADIUS), borderRadiusSM: parseNumber(BORDER_RADIUS), + lineWidth: 0.8, colorFillSecondary: currentTheme.backgroundColorBase, colorIcon: currentTheme.icon, - colorPrimary: 'var(--ant-primary-color)', - colorPrimaryHover: 'var(--ant-primary-5)', - controlItemBgActive: 'var(--ant-primary-1)', + colorPrimary: antTheme.primaryColor, + colorPrimaryHover: antTheme.primary5, + controlItemBgActive: antTheme.primary1, controlItemBgHover: currentTheme.itemHoverBg, }, Steps: { @@ -149,30 +164,33 @@ export const getThemeConfig = (theme: ThemeType): ThemeConfig => { Spin: { controlHeight: remToPixels(HEIGHT.xs), controlHeightLG: remToPixels(HEIGHT.sm), - colorPrimary: 'var(--ant-primary-color)', + colorPrimary: antTheme.primaryColor, }, Skeleton: { controlHeightXS: 16, controlHeightSM: remToPixels(HEIGHT.xs), controlHeight: remToPixels(HEIGHT.md), controlHeightLG: remToPixels(HEIGHT.lg), - color: 'rgba(190, 190, 190, 0.2)', + gradientFromColor: 'rgba(190, 190, 190, 0.2)', }, Switch: { controlHeight: remToPixels(HEIGHT.xs), - colorPrimary: 'var(--ant-primary-color)', + colorPrimary: antTheme.primaryColor, colorWhite: currentTheme.background, + lineHeight: 1.375, lineWidthFocus: 1, - colorPrimaryBorder: 'var(--ant-primary-1)', + colorPrimaryBorder: antTheme.primary1, opacityLoading: 0.4, }, Menu: { controlHeightLG: remToPixels(HEIGHT.md), fontSize: remToPixels(FONT_SIZE.xl), - colorItemTextSelected: 'var(--ant-primary-color)', - colorActiveBarWidth: 3, - colorActiveBarBorderSize: 0, + itemSelectedColor: antTheme.primaryColor, + colorFillAlter: `rgba(${hexToRGB(antThemeObject['light'].primary6)}, 0.05)`, + colorSplit: 'transparent', + activeBarWidth: 2, marginXXS: 8, + itemMarginInline: 0, }, Divider: { colorSplit: 'rgba(0, 0, 0, 0.06)', @@ -209,15 +227,15 @@ export const getThemeConfig = (theme: ThemeType): ThemeConfig => { Input: { colorTextPlaceholder: currentTheme.inputPlaceholder, colorTextDisabled: currentTheme.disable, - colorPrimaryHover: 'var(--ant-primary-5)', + colorPrimaryHover: antTheme.primary5, fontWeightStrong: parseNumber(FONT_WEIGHT.semibold), colorFillAlter, }, InputNumber: { - colorPrimary: 'var(--ant-primary-5)', + colorPrimary: antTheme.primary5, }, Form: { - colorInfoBorderHover: 'var(--ant-primary-color-hover)', + colorInfoBorderHover: antTheme.primaryColorHover, }, Avatar: { colorTextPlaceholder: currentTheme.avatarBg, @@ -227,14 +245,14 @@ export const getThemeConfig = (theme: ThemeType): ThemeConfig => { controlHeightLG: remToPixels(HEIGHT.sm), }, Badge: { - colorPrimary: 'var(--ant-primary-color)', + colorPrimary: antTheme.primaryColor, colorTextPlaceholder: '#d9d9d9', fontSizeSM: remToPixels(FONT_SIZE.xxs), }, Button: { colorPrimary: currentTheme.primary, borderRadiusSM: parseNumber(BORDER_RADIUS), - controlTmpOutline: 'var(--ant-primary-color-outline)', + controlTmpOutline: antTheme.primaryColorOutline, controlOutline: '0', controlOutlineWidth: 0, }, @@ -246,7 +264,7 @@ export const getThemeConfig = (theme: ThemeType): ThemeConfig => { colorFillContent: '#f0f0f0', }, Radio: { - colorPrimary: 'var(--ant-primary-color)', + colorPrimary: antTheme.primaryColor, wireframe: true, controlItemBgActiveDisabled: '#e6e6e6', }, @@ -255,13 +273,13 @@ export const getThemeConfig = (theme: ThemeType): ThemeConfig => { }, Pagination: { wireframe: true, - colorPrimary: 'var(--ant-primary-color)', + colorPrimary: antTheme.primaryColor, controlItemBgActiveDisabled: '#e6e6e6', }, Slider: { - colorPrimaryBorder: 'var(--ant-primary-3)', - colorPrimary: 'var(--ant-primary-4)', - colorPrimaryBorderHover: 'var(--ant-primary-4)', + colorPrimaryBorder: antTheme.primary3, + colorPrimary: antTheme.primary4, + colorPrimaryBorderHover: antTheme.primary4, colorFillSecondary: '#e1e1e1', colorBorderSecondary: '#e1e1e1', colorFillContentHover: '#e1e1e1', @@ -271,6 +289,7 @@ export const getThemeConfig = (theme: ThemeType): ThemeConfig => { }, Modal: { colorTextDescription: currentTheme.icon, + colorIcon: currentTheme.icon, wireframe: true, }, Progress: { @@ -280,7 +299,7 @@ export const getThemeConfig = (theme: ThemeType): ThemeConfig => { DatePicker: { colorIcon: currentTheme.textLight, colorPrimary: '#1c68a6', - controlItemBgActive: 'var(--ant-primary-1)', + controlItemBgActive: antTheme.primary1, colorTextPlaceholder: currentTheme.inputPlaceholder, fontWeightStrong: parseNumber(FONT_WEIGHT.medium), controlHeightSM: remToPixels(HEIGHT.xs), @@ -291,7 +310,7 @@ export const getThemeConfig = (theme: ThemeType): ThemeConfig => { }, Upload: { colorFillAlter, - colorPrimaryHover: 'var(--ant-primary-5)', + colorPrimaryHover: antTheme.primary5, }, }, }; diff --git a/src/styles/themes/dark/darkTheme.ts b/src/styles/themes/dark/darkTheme.ts index f1c61c747..4ceecedde 100644 --- a/src/styles/themes/dark/darkTheme.ts +++ b/src/styles/themes/dark/darkTheme.ts @@ -108,6 +108,19 @@ export const darkColorsTheme = { } as const satisfies ITheme; export const antDarkColorsTheme = { + primaryColorHover: '#5cb6ff', + primaryColor: 'rgb(51, 156, 253)', + primaryColorOutline: 'rgba(51, 156, 253, 0.2)', + primary1: darkColorsTheme.primary1, + primary2: '#d6f1ff', + primary3: '#ade0ff', + primary4: '#85ccff', + primary5: '#5cb6ff', + primary6: '#339cfd', + primary7: '#2078d6', + primary8: '#1259b0', + primary9: '#073d8a', + primary10: '#042963', successBg: '#e6fff2', successBorder: '#79fcc4', } as const; diff --git a/src/styles/themes/light/lightTheme.ts b/src/styles/themes/light/lightTheme.ts index 701186312..cc4e7d025 100644 --- a/src/styles/themes/light/lightTheme.ts +++ b/src/styles/themes/light/lightTheme.ts @@ -106,3 +106,19 @@ export const lightColorsTheme = { iconHover: 'rgba(0, 0, 0, 0.75)', ...chartColors, } as const satisfies ITheme; + +export const antLightColorsTheme = { + primaryColorHover: '#1c68a6', + primaryColor: 'rgb(1, 80, 154)', + primaryColorOutline: 'rgba(1, 80, 154, 0.2)', + primary1: lightColorsTheme.primary1, + primary2: '#85b3cc', + primary3: '#5e9abf', + primary4: '#3b81b3', + primary5: '#1c68a6', + primary6: '#01509a', + primary7: '#003773', + primary8: '#00224d', + primary9: '#001026', + primary10: '#000000', +} as const; diff --git a/src/styles/themes/themeVariables.ts b/src/styles/themes/themeVariables.ts index 483d133c8..52253dd6c 100644 --- a/src/styles/themes/themeVariables.ts +++ b/src/styles/themes/themeVariables.ts @@ -1,9 +1,9 @@ import { ThemeType } from '@app/interfaces/interfaces'; import { hexToRGB } from '@app/utils/utils'; -import { css } from 'styled-components'; +import { FlattenSimpleInterpolation, css } from 'styled-components'; import { BASE_COLORS } from './constants'; import { darkColorsTheme, antDarkColorsTheme } from './dark/darkTheme'; -import { lightColorsTheme } from './light/lightTheme'; +import { lightColorsTheme, antLightColorsTheme } from './light/lightTheme'; export const themeObject = { light: lightColorsTheme, @@ -11,11 +11,11 @@ export const themeObject = { }; export const antThemeObject = { - light: {}, + light: antLightColorsTheme, dark: antDarkColorsTheme, }; -const getThemeVariables = (theme: ThemeType) => css` +export const getThemeVariables = (theme: ThemeType): FlattenSimpleInterpolation => css` color-scheme: ${theme}; --primary-color: ${themeObject[theme].primary}; --primary1-color: ${themeObject[theme].primary1}; @@ -99,16 +99,20 @@ const getThemeVariables = (theme: ThemeType) => css` --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; + --ant-primary-color-hover: ${antThemeObject[theme].primaryColorHover}; + --ant-primary-color: ${antThemeObject[theme].primaryColor}; + --ant-primary-color-outline: ${antThemeObject[theme].primaryColorOutline}; + --ant-primary-1: ${antThemeObject[theme].primary1}; + --ant-primary-2: ${antThemeObject[theme].primary2}; + --ant-primary-3: ${antThemeObject[theme].primary3}; + --ant-primary-4: ${antThemeObject[theme].primary4}; + --ant-primary-5: ${antThemeObject[theme].primary5}; + --ant-primary-6: ${antThemeObject[theme].primary6}; + --ant-primary-7: ${antThemeObject[theme].primary7}; + --ant-primary-8: ${antThemeObject[theme].primary8}; + --ant-primary-9: ${antThemeObject[theme].primary9}; + --ant-primary-10: ${antThemeObject[theme].primary10}; `; export const commonThemeVariables = css` @@ -126,7 +130,3 @@ export const commonThemeVariables = css` --skyblue: ${BASE_COLORS.skyblue}; --red: ${BASE_COLORS.red}; `; - -export const antOverrideCssVariables = css` - --ant-primary-1: var(--primary1-color) !important; -`; From 226970e7df07ee99964817da0bfb639bf4074de6 Mon Sep 17 00:00:00 2001 From: Alexandr Buhlak <48954743+saha80@users.noreply.github.com> Date: Tue, 13 Jun 2023 11:09:18 +0300 Subject: [PATCH 14/81] fix(TrendingCreators): infinite carousel --- .../nft-dashboard/trending-creators/TrendingCreators.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/nft-dashboard/trending-creators/TrendingCreators.tsx b/src/components/nft-dashboard/trending-creators/TrendingCreators.tsx index 34ca5ef69..6e8953bc9 100644 --- a/src/components/nft-dashboard/trending-creators/TrendingCreators.tsx +++ b/src/components/nft-dashboard/trending-creators/TrendingCreators.tsx @@ -61,7 +61,7 @@ export const TrendingCreators: React.FC = () => { slidesToShow={11} ref={sliderRef} centerMode={false} - infinite={false} + infinite={true} responsive={[ { breakpoint: 1920, From 3721b6c7d712b396641f8c1706b85aef4faccb6e Mon Sep 17 00:00:00 2001 From: Alexandr Buhlak <48954743+saha80@users.noreply.github.com> Date: Tue, 13 Jun 2023 17:42:02 +0300 Subject: [PATCH 15/81] Revert "fix(TrendingCreators): infinite carousel" This reverts commit 226970e7df07ee99964817da0bfb639bf4074de6. --- .../nft-dashboard/trending-creators/TrendingCreators.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/nft-dashboard/trending-creators/TrendingCreators.tsx b/src/components/nft-dashboard/trending-creators/TrendingCreators.tsx index 6e8953bc9..34ca5ef69 100644 --- a/src/components/nft-dashboard/trending-creators/TrendingCreators.tsx +++ b/src/components/nft-dashboard/trending-creators/TrendingCreators.tsx @@ -61,7 +61,7 @@ export const TrendingCreators: React.FC = () => { slidesToShow={11} ref={sliderRef} centerMode={false} - infinite={true} + infinite={false} responsive={[ { breakpoint: 1920, From cae027e6bf2535712aaa235385616e10f61f131b Mon Sep 17 00:00:00 2001 From: Alexandr Buhlak <48954743+saha80@users.noreply.github.com> Date: Tue, 13 Jun 2023 17:47:42 +0300 Subject: [PATCH 16/81] fix(TrendingCreators): jump to next story --- .../nft-dashboard/trending-creators/TrendingCreators.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/nft-dashboard/trending-creators/TrendingCreators.tsx b/src/components/nft-dashboard/trending-creators/TrendingCreators.tsx index 34ca5ef69..3b8f5aefd 100644 --- a/src/components/nft-dashboard/trending-creators/TrendingCreators.tsx +++ b/src/components/nft-dashboard/trending-creators/TrendingCreators.tsx @@ -214,6 +214,9 @@ export const TrendingCreators: React.FC = () => { return storiesCopy; }); }} + onStoryEnd={(storyNumber: number) => { + setStoryIndex(storyNumber + 1); + }} onAllStoriesEnd={() => { setStoryOpened(false); }} From f64eccdda3fb54f1b0277d5dd7986aa2180170ec Mon Sep 17 00:00:00 2001 From: Alexandr Buhlak <48954743+saha80@users.noreply.github.com> Date: Fri, 16 Jun 2023 17:47:48 +0300 Subject: [PATCH 17/81] fix(TrendingCreators): upgrade react-insta-stories --- package.json | 2 +- .../trending-creators/TrendingCreators.tsx | 3 --- yarn.lock | 12 ++++++------ 3 files changed, 7 insertions(+), 10 deletions(-) diff --git a/package.json b/package.json index 7eb135df6..2441deaa2 100644 --- a/package.json +++ b/package.json @@ -35,7 +35,7 @@ "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-redux": "^7.2.6", diff --git a/src/components/nft-dashboard/trending-creators/TrendingCreators.tsx b/src/components/nft-dashboard/trending-creators/TrendingCreators.tsx index 3b8f5aefd..34ca5ef69 100644 --- a/src/components/nft-dashboard/trending-creators/TrendingCreators.tsx +++ b/src/components/nft-dashboard/trending-creators/TrendingCreators.tsx @@ -214,9 +214,6 @@ export const TrendingCreators: React.FC = () => { return storiesCopy; }); }} - onStoryEnd={(storyNumber: number) => { - setStoryIndex(storyNumber + 1); - }} onAllStoriesEnd={() => { setStoryOpened(false); }} diff --git a/yarn.lock b/yarn.lock index ca586e902..ba88d75c7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -11155,7 +11155,7 @@ __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-redux: ^7.2.6 @@ -15138,12 +15138,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 From b865b6de3660f2f38d728ff9b540bdcd56d3e6d6 Mon Sep 17 00:00:00 2001 From: Alexandr Buhlak <48954743+saha80@users.noreply.github.com> Date: Mon, 19 Jun 2023 16:11:40 +0300 Subject: [PATCH 18/81] refactor: move global styles to components --- .../newsFeed/NewsFilter/NewsFilter.styles.ts | 13 +++- .../apps/newsFeed/NewsFilter/NewsFilter.tsx | 2 +- .../BaseCalendar/BaseCalendar.styles.ts | 10 +++ .../common/BaseCalendar/BaseCalendar.tsx | 12 +++- .../common/BaseMenu/BaseMenu.styles.ts | 9 +++ src/components/common/BaseMenu/BaseMenu.tsx | 11 +++- .../components/BaseFormItem/BaseFormItem.ts | 8 ++- .../inputs/BaseInput/BaseInput.styles.ts | 2 - .../InputPassword/InputPassword.styles.ts | 2 - .../inputs/SearchInput/SearchInput.styles.ts | 2 - .../searchDropdown/SearchDropdown.styles.ts | 18 +++++ .../searchDropdown/SearchDropdown.tsx | 7 +- src/styles/GlobalStyle.ts | 49 ++------------ src/styles/themeConfig.tsx | 65 +++++++++++-------- 14 files changed, 120 insertions(+), 90 deletions(-) create mode 100644 src/components/common/BaseCalendar/BaseCalendar.styles.ts create mode 100644 src/components/common/BaseMenu/BaseMenu.styles.ts create mode 100644 src/components/header/components/searchDropdown/SearchDropdown.styles.ts diff --git a/src/components/apps/newsFeed/NewsFilter/NewsFilter.styles.ts b/src/components/apps/newsFeed/NewsFilter/NewsFilter.styles.ts index 29ec9a265..1a81b3a40 100644 --- a/src/components/apps/newsFeed/NewsFilter/NewsFilter.styles.ts +++ b/src/components/apps/newsFeed/NewsFilter/NewsFilter.styles.ts @@ -1,7 +1,7 @@ import styled from 'styled-components'; import { SearchOutlined, PlusCircleFilled, CloseOutlined } from '@ant-design/icons'; import { BaseDatePicker } from '@app/components/common/pickers/BaseDatePicker'; -import { BORDER_RADIUS, FONT_SIZE, FONT_WEIGHT, media } from '@app/styles/themes/constants'; +import { BORDER_RADIUS, BREAKPOINTS, FONT_SIZE, FONT_WEIGHT, media } from '@app/styles/themes/constants'; import { BasePopover } from '@app/components/common/BasePopover/BasePopover'; import { BaseInput } from '@app/components/common/inputs/BaseInput/BaseInput'; import { BaseButton } from '@app/components/common/BaseButton/BaseButton'; @@ -118,13 +118,22 @@ export const RangePicker = styled(BaseDatePicker.RangePicker)` width: 100%; margin-bottom: 0.875rem; - & input { + &.ant-picker .ant-picker-input input { color: var(--text-main-color); font-size: ${FONT_SIZE.xs}; font-weight: ${FONT_WEIGHT.semibold}; } `; +export const PanelWrapper = styled.div` + .ant-picker-panels { + @media only screen and ${media.xs} and (max-width: ${BREAKPOINTS.md - 0.02}px) { + display: flex; + flex-direction: column; + } + } +`; + export const Btn = styled(BaseButton)` display: block; width: 100%; diff --git a/src/components/apps/newsFeed/NewsFilter/NewsFilter.tsx b/src/components/apps/newsFeed/NewsFilter/NewsFilter.tsx index 077b47138..6cc88173a 100644 --- a/src/components/apps/newsFeed/NewsFilter/NewsFilter.tsx +++ b/src/components/apps/newsFeed/NewsFilter/NewsFilter.tsx @@ -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/common/BaseCalendar/BaseCalendar.styles.ts b/src/components/common/BaseCalendar/BaseCalendar.styles.ts new file mode 100644 index 000000000..cd2701ed3 --- /dev/null +++ b/src/components/common/BaseCalendar/BaseCalendar.styles.ts @@ -0,0 +1,10 @@ +import styled from 'styled-components'; +import { Calendar as AntCalendar } from 'antd'; +import { FONT_WEIGHT } from '@app/styles/themes/constants'; + +export const Calendar = styled(AntCalendar)` + .ant-picker-cell-in-view .ant-picker-calendar-date-value { + color: var(--text-main-color); + font-weight: ${FONT_WEIGHT.bold}; + } +`; diff --git a/src/components/common/BaseCalendar/BaseCalendar.tsx b/src/components/common/BaseCalendar/BaseCalendar.tsx index 7ddb56a7d..63bf8964b 100644 --- a/src/components/common/BaseCalendar/BaseCalendar.tsx +++ b/src/components/common/BaseCalendar/BaseCalendar.tsx @@ -1,2 +1,10 @@ -export { Calendar as BaseCalendar } from 'antd'; -export type { CalendarProps as BaseCalendarProps } from 'antd'; +import { FC } from 'react'; +import type { CalendarProps } from 'antd'; +import type { Dayjs } from 'dayjs'; +import * as S from './BaseCalendar.styles'; + +export type BaseCalendarProps = CalendarProps; + +export const BaseCalendar: FC = (props) => { + 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..01680ecd1 --- /dev/null +++ b/src/components/common/BaseMenu/BaseMenu.styles.ts @@ -0,0 +1,9 @@ +import styled from 'styled-components'; +import { Menu as AntMenu } from 'antd'; + +export const Menu = styled(AntMenu)` + .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..0d6103550 100644 --- a/src/components/common/BaseMenu/BaseMenu.tsx +++ b/src/components/common/BaseMenu/BaseMenu.tsx @@ -1,2 +1,9 @@ -export { Menu as BaseMenu } from 'antd'; -export type { MenuProps as BaseMenuProps } from 'antd'; +import { FC } from 'react'; +import type { MenuProps } from 'antd'; +import * as S from './BaseMenu.styles'; + +export type BaseMenuProps = MenuProps; + +export const BaseMenu: FC = (props) => { + return ; +}; diff --git a/src/components/common/forms/components/BaseFormItem/BaseFormItem.ts b/src/components/common/forms/components/BaseFormItem/BaseFormItem.ts index 0563eb56e..86428ea95 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 { FONT_SIZE, media } from '@app/styles/themes/constants'; interface InternalFormItemProps { $isSuccess?: boolean; @@ -12,7 +12,6 @@ export type BaseFormItemProps = FormItemProps; export const BaseFormItem = styled(Form.Item)` .ant-input { font-size: 1rem; - font-family: inherit; } .ant-input:disabled { @@ -23,6 +22,7 @@ export const BaseFormItem = styled(Form.Item)` .ant-form-item-label > label { color: var(--primary-color); + font-size: ${FONT_SIZE.xs}; } .ant-input-group-addon:first-of-type { @@ -130,4 +130,8 @@ export const BaseFormItem = styled(Form.Item)` border-color: var(--success-color); } } + + & .ant-form-item-row { + flex-wrap: inherit; + } `; diff --git a/src/components/common/inputs/BaseInput/BaseInput.styles.ts b/src/components/common/inputs/BaseInput/BaseInput.styles.ts index f8de37411..d58f95fd6 100644 --- a/src/components/common/inputs/BaseInput/BaseInput.styles.ts +++ b/src/components/common/inputs/BaseInput/BaseInput.styles.ts @@ -3,8 +3,6 @@ import { Input as AntInput } from 'antd'; import { FONT_WEIGHT, FONT_SIZE } from '@app/styles/themes/constants'; export const Input = styled(AntInput)` - font-family: inherit; - .ant-select:not(.ant-select-disabled):not(.ant-select-customize-input):not(.ant-pagination-size-changer):hover .ant-select-selector { border-color: transparent; diff --git a/src/components/common/inputs/InputPassword/InputPassword.styles.ts b/src/components/common/inputs/InputPassword/InputPassword.styles.ts index 5dd6db874..a9a89ef9e 100644 --- a/src/components/common/inputs/InputPassword/InputPassword.styles.ts +++ b/src/components/common/inputs/InputPassword/InputPassword.styles.ts @@ -2,8 +2,6 @@ import styled from 'styled-components'; import { BaseInput } from '../BaseInput/BaseInput'; export const InputPassword = styled(BaseInput.Password)` - font-family: inherit; - .ant-input-password-icon.anticon { color: var(--disabled-color); &:hover { diff --git a/src/components/common/inputs/SearchInput/SearchInput.styles.ts b/src/components/common/inputs/SearchInput/SearchInput.styles.ts index bbf96918e..e05176043 100644 --- a/src/components/common/inputs/SearchInput/SearchInput.styles.ts +++ b/src/components/common/inputs/SearchInput/SearchInput.styles.ts @@ -4,8 +4,6 @@ import { BaseInput } from '../BaseInput/BaseInput'; import { BaseSpace } from '../../BaseSpace/BaseSpace'; export const SearchInput = styled(BaseInput.Search)` - font-family: inherit; - & .ant-input-prefix { margin: 0.5rem; } 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..41434c76a --- /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 { BREAKPOINTS, media } from '@app/styles/themes/constants'; + +export const Popover = styled(BasePopover)` + .ant-popover { + 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; + } + } +`; diff --git a/src/components/header/components/searchDropdown/SearchDropdown.tsx b/src/components/header/components/searchDropdown/SearchDropdown.tsx index 646c08fa4..4f138f968 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} @@ -62,7 +61,7 @@ export const SearchDropdown: React.FC = ({ />
- + ); }; diff --git a/src/styles/GlobalStyle.ts b/src/styles/GlobalStyle.ts index 2ed06a699..cf8765336 100644 --- a/src/styles/GlobalStyle.ts +++ b/src/styles/GlobalStyle.ts @@ -1,6 +1,6 @@ import * as styled from 'styled-components'; import { resetCss } from './resetCss'; -import { BREAKPOINTS, FONT_WEIGHT, media } from './themes/constants'; +import { FONT_FAMILY } from './themes/constants'; import { getThemeVariables, commonThemeVariables } from './themes/themeVariables'; export default styled.createGlobalStyle` @@ -23,26 +23,9 @@ export default styled.createGlobalStyle` 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: ${FONT_FAMILY.main}, sans-serif; } a { @@ -54,27 +37,10 @@ export default styled.createGlobalStyle` } } - .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); - } - .ant-notification { .ant-notification-notice { min-height: 6rem; - - .ant-notification-notice-close { - top: 1.25rem; - right: 1.25rem; - } + padding: 2rem; } .ant-notification-notice-success { @@ -97,9 +63,4 @@ export default styled.createGlobalStyle` background: var(--notification-error-color); } } - - .ant-menu-inline, - .ant-menu-vertical { - border-right: 0; - } `; diff --git a/src/styles/themeConfig.tsx b/src/styles/themeConfig.tsx index 1f7f437c5..c7d2a4040 100644 --- a/src/styles/themeConfig.tsx +++ b/src/styles/themeConfig.tsx @@ -16,14 +16,17 @@ const remToPixels = (s: `${number}rem`) => parseFloat(s) * 16; const parseNumber = (s: `${number}` | `${number}px`) => parseFloat(s); +const fontFamily = `'${FONT_FAMILY.main}', sans-serif`; + +const 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)'; + export const getThemeConfig = (theme: ThemeType): ThemeConfig => { const currentTheme = themeObject[theme]; const antTheme = antThemeObject[theme]; const colorFillAlter = `rgba(${hexToRGB(currentTheme.primary)}, 0.05)`; - const fontFamily = `'${FONT_FAMILY.main}', sans-serif`; - // In some properties CSS variables are not parsed properly. return { token: { @@ -52,6 +55,7 @@ export const getThemeConfig = (theme: ThemeType): ThemeConfig => { } : {}), fontFamily, + fontFamilyCode: fontFamily, fontSize: remToPixels(FONT_SIZE.md), fontSizeSM: remToPixels(FONT_SIZE.xs), controlHeightSM: remToPixels(HEIGHT.xs), @@ -62,21 +66,21 @@ export const getThemeConfig = (theme: ThemeType): ThemeConfig => { controlOutline: antTheme.primaryColorOutline, controlOutlineWidth: 2, lineWidthFocus: 0, - screenXSMin: BREAKPOINTS.xs, + screenXSMin: 0, screenXS: BREAKPOINTS.xs, - screenXSMax: BREAKPOINTS.xs, + screenXSMax: BREAKPOINTS.sm - 1, screenSMMin: BREAKPOINTS.sm, screenSM: BREAKPOINTS.sm, - screenSMMax: BREAKPOINTS.sm, + screenSMMax: BREAKPOINTS.md - 1, screenMDMin: BREAKPOINTS.md, screenMD: BREAKPOINTS.md, - screenMDMax: BREAKPOINTS.md, + screenMDMax: BREAKPOINTS.lg - 1, screenLGMin: BREAKPOINTS.lg, screenLG: BREAKPOINTS.lg, - screenLGMax: BREAKPOINTS.lg, + screenLGMax: BREAKPOINTS.xl - 1, screenXLMin: BREAKPOINTS.xl, screenXL: BREAKPOINTS.xl, - screenXLMax: BREAKPOINTS.xl, + screenXLMax: BREAKPOINTS.xxl - 1, screenXXLMin: BREAKPOINTS.xxl, screenXXL: BREAKPOINTS.xxl, }, @@ -100,8 +104,6 @@ export const getThemeConfig = (theme: ThemeType): ThemeConfig => { Card: { colorTextHeading: currentTheme.textMain, padding: 20, - fontSize: remToPixels(FONT_SIZE.lg), - fontSizeSM: remToPixels(FONT_SIZE.md), paddingLG: 20, boxShadowTertiary: currentTheme.boxShadow, borderRadiusLG: parseNumber(BORDER_RADIUS), @@ -110,13 +112,7 @@ export const getThemeConfig = (theme: ThemeType): ThemeConfig => { colorPrimaryHover: antTheme.primary5, colorPrimary: antTheme.primaryColor, colorPrimaryActive: antTheme.primary7, - - itemSelectedColor: antTheme.primary5, - itemHoverColor: antTheme.primaryColor, - itemActiveColor: antTheme.primary7, - colorTextDisabled: currentTheme.disable, - colorBorderSecondary: '#f0f0f0', }, Tree: { @@ -155,7 +151,9 @@ export const getThemeConfig = (theme: ThemeType): ThemeConfig => { }, Steps: { wireframe: true, - controlHeight: remToPixels(HEIGHT.xs), + iconSize: remToPixels(HEIGHT.xs), + iconFontSize: remToPixels(FONT_SIZE.lg), + controlHeight: remToPixels(HEIGHT.md), controlHeightSM: remToPixels(HEIGHT.xxs), fontSizeHeading3: remToPixels(FONT_SIZE.xxl), colorPrimary: currentTheme.primary, @@ -184,12 +182,13 @@ export const getThemeConfig = (theme: ThemeType): ThemeConfig => { }, Menu: { controlHeightLG: remToPixels(HEIGHT.md), - fontSize: remToPixels(FONT_SIZE.xl), + fontSize: remToPixels(FONT_SIZE.xs), itemSelectedColor: antTheme.primaryColor, colorFillAlter: `rgba(${hexToRGB(antThemeObject['light'].primary6)}, 0.05)`, colorSplit: 'transparent', activeBarWidth: 2, - marginXXS: 8, + marginXXS: 4, + controlHeightSM: 30, itemMarginInline: 0, }, Divider: { @@ -208,22 +207,24 @@ export const getThemeConfig = (theme: ThemeType): ThemeConfig => { Notification: { zIndexPopup: 9999, width: 36 * 16, - paddingMD: 2 * 16, - paddingLG: 0, + paddingMD: 20, + paddingLG: 20, + borderRadiusLG: parseNumber(BORDER_RADIUS), paddingContentHorizontalLG: 2 * 16, lineHeightLG: 2, colorSuccess: currentTheme.success, colorInfo: currentTheme.primary, colorWarning: currentTheme.warning, colorError: currentTheme.error, - fontFamily, fontSizeLG: remToPixels(FONT_SIZE.xxl), marginSM: 0, - boxShadow: - '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)', + boxShadow: modalBoxShadow, controlHeightLG: 15 / 0.55, wireframe: true, }, + Empty: { + controlHeightLG: remToPixels(HEIGHT.sm), + }, Input: { colorTextPlaceholder: currentTheme.inputPlaceholder, colorTextDisabled: currentTheme.disable, @@ -235,6 +236,7 @@ export const getThemeConfig = (theme: ThemeType): ThemeConfig => { colorPrimary: antTheme.primary5, }, Form: { + marginLG: 16, colorInfoBorderHover: antTheme.primaryColorHover, }, Avatar: { @@ -260,7 +262,7 @@ export const getThemeConfig = (theme: ThemeType): ThemeConfig => { colorTextDescription: currentTheme.breadcrumb, }, Rate: { - 'yellow-6': '#ffc24b', + starColor: '#ffc24b', colorFillContent: '#f0f0f0', }, Radio: { @@ -270,6 +272,8 @@ export const getThemeConfig = (theme: ThemeType): ThemeConfig => { }, Result: { fontSizeHeading3: remToPixels(FONT_SIZE.xxl), + lineHeightHeading3: 1.8, + colorTextDescription: currentTheme.breadcrumb, }, Pagination: { wireframe: true, @@ -287,9 +291,13 @@ export const getThemeConfig = (theme: ThemeType): ThemeConfig => { handleSize: 8, colorTextDisabled: currentTheme.disable, }, + Calendar: { + controlHeightSM: remToPixels(HEIGHT.xs) / 1.5, + }, Modal: { colorTextDescription: currentTheme.icon, colorIcon: currentTheme.icon, + boxShadow: modalBoxShadow, wireframe: true, }, Progress: { @@ -298,12 +306,15 @@ export const getThemeConfig = (theme: ThemeType): ThemeConfig => { }, DatePicker: { colorIcon: currentTheme.textLight, + colorTextDisabled: currentTheme.textLight, colorPrimary: '#1c68a6', controlItemBgActive: antTheme.primary1, colorTextPlaceholder: currentTheme.inputPlaceholder, fontWeightStrong: parseNumber(FONT_WEIGHT.medium), - controlHeightSM: remToPixels(HEIGHT.xs), - controlHeightLG: remToPixels(HEIGHT.lg), + controlHeightSM: remToPixels(HEIGHT.xxs), + controlHeightLG: remToPixels(HEIGHT.sm), + padding: 13, + paddingXXS: 2, }, Dropdown: { controlHeight: 34, From d32376dc3d6c628a8a24c077d4c647e1b02f3282 Mon Sep 17 00:00:00 2001 From: Alexandr Buhlak <48954743+saha80@users.noreply.github.com> Date: Mon, 19 Jun 2023 16:40:21 +0300 Subject: [PATCH 19/81] reactor(components): preserve styles --- .../common/BaseAlert/BaseAlert.styles.ts | 4 +++ .../common/BaseButton/BaseButton.styles.ts | 6 +---- .../common/BaseCard/BaseCard.styles.ts | 6 +++++ .../BaseProgress/BaseProgress.styles.ts | 8 ++++++ .../common/BaseProgress/BaseProgress.tsx | 5 ++-- .../common/BaseResult/BaseResult.styles.ts | 18 ++----------- .../inputs/SearchInput/SearchInput.styles.ts | 8 ++++-- .../common/pickers/BaseDatePicker.styled.tsx | 25 +++++++++++-------- .../selects/BaseSelect/BaseSelect.styles.ts | 4 +-- .../forms/ControlForm/ControlForm.styles.ts | 2 +- src/components/header/Header.styles.ts | 2 +- .../SearchResults/SearchResults.styles.ts | 4 ++- .../layouts/AuthLayout/AuthLayout.styles.ts | 3 +-- .../main/sider/SiderMenu/SiderMenu.styles.ts | 9 +++++-- .../StatisticsCard/StatisticsCard.styles.ts | 7 +++++- .../common/ViewAll/ViewAll.styles.ts | 4 ++- src/controllers/notificationController.tsx | 24 +++--------------- 17 files changed, 72 insertions(+), 67 deletions(-) create mode 100644 src/components/common/BaseProgress/BaseProgress.styles.ts diff --git a/src/components/common/BaseAlert/BaseAlert.styles.ts b/src/components/common/BaseAlert/BaseAlert.styles.ts index 649174d64..dadfeb66e 100644 --- a/src/components/common/BaseAlert/BaseAlert.styles.ts +++ b/src/components/common/BaseAlert/BaseAlert.styles.ts @@ -4,6 +4,10 @@ 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); } diff --git a/src/components/common/BaseButton/BaseButton.styles.ts b/src/components/common/BaseButton/BaseButton.styles.ts index 4e763544e..9a06f2bf1 100644 --- a/src/components/common/BaseButton/BaseButton.styles.ts +++ b/src/components/common/BaseButton/BaseButton.styles.ts @@ -2,7 +2,7 @@ import styled, { css } from 'styled-components'; import { Button as AntButton } from 'antd'; import { Severity } from '@app/interfaces/interfaces'; import { defineColorBySeverity } from '@app/utils/utils'; -import { FONT_WEIGHT, FONT_SIZE } from '@app/styles/themes/constants'; +import { FONT_WEIGHT } from '@app/styles/themes/constants'; interface BtnProps { $severity?: Severity; @@ -20,10 +20,6 @@ export const Button = styled(AntButton)` font-weight: ${FONT_WEIGHT.semibold}; box-shadow: none; - &.ant-btn.ant-btn-icon-only .anticon { - font-size: ${FONT_SIZE.xxxl}; - } - &:not(:disabled):focus-visible { outline: none; } diff --git a/src/components/common/BaseCard/BaseCard.styles.ts b/src/components/common/BaseCard/BaseCard.styles.ts index 1d90ea2a5..db4539752 100644 --- a/src/components/common/BaseCard/BaseCard.styles.ts +++ b/src/components/common/BaseCard/BaseCard.styles.ts @@ -46,6 +46,12 @@ export const Card = styled(AntCard)` } } + @media only screen and ${media.xl} { + &.ant-card .ant-card-head .ant-card-head-wrapper .ant-card-head-title .ant-row .ant-col.ant-col-xs-24 { + font-size: ${FONT_SIZE.xxl}; + } + } + .ant-card-body { flex-grow: 1; diff --git a/src/components/common/BaseProgress/BaseProgress.styles.ts b/src/components/common/BaseProgress/BaseProgress.styles.ts new file mode 100644 index 000000000..fe9e1b95a --- /dev/null +++ b/src/components/common/BaseProgress/BaseProgress.styles.ts @@ -0,0 +1,8 @@ +import styled from 'styled-components'; +import { Progress as AntProgress } from 'antd'; + +export const Progress = styled(AntProgress)` + .ant-progress-text .ant-typography { + line-height: inherit; + } +`; diff --git a/src/components/common/BaseProgress/BaseProgress.tsx b/src/components/common/BaseProgress/BaseProgress.tsx index 080b2ca96..a966a5041 100644 --- a/src/components/common/BaseProgress/BaseProgress.tsx +++ b/src/components/common/BaseProgress/BaseProgress.tsx @@ -1,8 +1,9 @@ import React from 'react'; -import { ProgressProps, Progress } from 'antd'; +import { 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/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/inputs/SearchInput/SearchInput.styles.ts b/src/components/common/inputs/SearchInput/SearchInput.styles.ts index e05176043..2a35d92e5 100644 --- a/src/components/common/inputs/SearchInput/SearchInput.styles.ts +++ b/src/components/common/inputs/SearchInput/SearchInput.styles.ts @@ -39,8 +39,12 @@ export const SearchInput = styled(BaseInput.Search)` .ant-input-search-button, .ant-input-search-button:hover { - &.ant-btn .anticon { - color: var(--primary-color); + &.ant-btn { + font-weight: ${FONT_WEIGHT.semibold}; + + .anticon { + color: var(--primary-color); + } } width: 100%; background-color: rgba(1, 80, 154, 0.05); diff --git a/src/components/common/pickers/BaseDatePicker.styled.tsx b/src/components/common/pickers/BaseDatePicker.styled.tsx index f6991cf63..e71ba36c2 100644 --- a/src/components/common/pickers/BaseDatePicker.styled.tsx +++ b/src/components/common/pickers/BaseDatePicker.styled.tsx @@ -1,20 +1,25 @@ -import styled from 'styled-components'; +import styled, { css } from 'styled-components'; import { DatePicker as AntDatePicker } from 'antd'; -export const DatePicker = styled(AntDatePicker)` - & input { - font-family: inherit; +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)` - & input { - font-family: inherit; - } + ${datePickerSizes} `; export const TimePicker = styled(AntDatePicker.TimePicker)` - & input { - font-family: inherit; - } + ${datePickerSizes} `; diff --git a/src/components/common/selects/BaseSelect/BaseSelect.styles.ts b/src/components/common/selects/BaseSelect/BaseSelect.styles.ts index 442111344..96c200119 100644 --- a/src/components/common/selects/BaseSelect/BaseSelect.styles.ts +++ b/src/components/common/selects/BaseSelect/BaseSelect.styles.ts @@ -61,12 +61,10 @@ export const Select = styled(AntSelect)` &.ant-select-multiple { .ant-select-selection-item { border: 1px solid #f0f0f0; + margin-inline-end: 11px; } .ant-select-selector { padding-inline-start: 11px; } - .ant-select-selection-item { - margin-inline-end: 11px; - } } `; diff --git a/src/components/forms/ControlForm/ControlForm.styles.ts b/src/components/forms/ControlForm/ControlForm.styles.ts index 06b525402..c0e62862a 100644 --- a/src/components/forms/ControlForm/ControlForm.styles.ts +++ b/src/components/forms/ControlForm/ControlForm.styles.ts @@ -4,7 +4,7 @@ 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 { + & .ant-form-item-label label { font-size: ${FONT_SIZE.md}; font-weight: ${FONT_WEIGHT.semibold}; } diff --git a/src/components/header/Header.styles.ts b/src/components/header/Header.styles.ts index 064ee6ed1..e16ddf1a7 100644 --- a/src/components/header/Header.styles.ts +++ b/src/components/header/Header.styles.ts @@ -8,7 +8,7 @@ import { BaseCol } from '../common/BaseCol/BaseCol'; export const HeaderActionWrapper = styled.div` cursor: pointer; - & > .ant-btn > span[role='img'], + & > .ant-btn span[role='img'], .ant-badge { font-size: 1.25rem; 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..4e1c27ee7 100644 --- a/src/components/header/components/searchDropdown/searchOverlay/SearchResults/SearchResults.styles.ts +++ b/src/components/header/components/searchDropdown/searchOverlay/SearchResults/SearchResults.styles.ts @@ -4,7 +4,9 @@ import styled from 'styled-components'; export const SearchResultsWrapper = styled.div` & > div { - font-size: 0.875rem; + .ant-typography { + font-size: 0.875rem; + } & .ant-list-header { font-size: 0.75rem; diff --git a/src/components/layouts/AuthLayout/AuthLayout.styles.ts b/src/components/layouts/AuthLayout/AuthLayout.styles.ts index 1ca60b13b..f85cc158f 100644 --- a/src/components/layouts/AuthLayout/AuthLayout.styles.ts +++ b/src/components/layouts/AuthLayout/AuthLayout.styles.ts @@ -101,8 +101,7 @@ export const FormItem = styled(BaseForm.Item)` font-size: ${FONT_SIZE.xs}; } - & label { - color: var(--primary-color); + & .ant-form-item-label label { font-size: ${FONT_SIZE.xs}; line-height: 1.25rem; } diff --git a/src/components/layouts/main/sider/SiderMenu/SiderMenu.styles.ts b/src/components/layouts/main/sider/SiderMenu/SiderMenu.styles.ts index 886fbd506..c02277a37 100644 --- a/src/components/layouts/main/sider/SiderMenu/SiderMenu.styles.ts +++ b/src/components/layouts/main/sider/SiderMenu/SiderMenu.styles.ts @@ -4,7 +4,6 @@ import { BaseMenu } from '@app/components/common/BaseMenu/BaseMenu'; export const Menu = styled(BaseMenu)` background: transparent; - border-right: 0; a { width: 100%; @@ -17,7 +16,8 @@ export const Menu = styled(BaseMenu)` border-radius: 0; } - .ant-menu-item-icon { + &.ant-menu .ant-menu-item-icon { + font-size: ${FONT_SIZE.xl}; width: 1.25rem; } @@ -74,4 +74,9 @@ export const Menu = styled(BaseMenu)` .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/medical-dashboard/statisticsCards/statisticsCard/StatisticsCard/StatisticsCard.styles.ts b/src/components/medical-dashboard/statisticsCards/statisticsCard/StatisticsCard/StatisticsCard.styles.ts index 16a7c68c5..e542e5da8 100644 --- a/src/components/medical-dashboard/statisticsCards/statisticsCard/StatisticsCard/StatisticsCard.styles.ts +++ b/src/components/medical-dashboard/statisticsCards/statisticsCard/StatisticsCard/StatisticsCard.styles.ts @@ -17,7 +17,12 @@ export const Icon = styled(AntIcon)` `; export const StatisticCard = styled(DashboardCard)` - line-height: 1; + & .ant-col, + & .ant-space, + & .ant-space-item, + & .ant-typography { + line-height: 1; + } overflow: hidden; ${Text} { diff --git a/src/components/nft-dashboard/common/ViewAll/ViewAll.styles.ts b/src/components/nft-dashboard/common/ViewAll/ViewAll.styles.ts index 660ea9bcc..55d80d674 100644 --- a/src/components/nft-dashboard/common/ViewAll/ViewAll.styles.ts +++ b/src/components/nft-dashboard/common/ViewAll/ViewAll.styles.ts @@ -7,7 +7,9 @@ interface ViewAllInternalProps { } export const ViewAllBtn = styled(BaseButton)` - font-size: ${FONT_SIZE.xs}; + &.ant-btn { + font-size: ${FONT_SIZE.xs}; + } font-weight: ${FONT_WEIGHT.medium}; diff --git a/src/controllers/notificationController.tsx b/src/controllers/notificationController.tsx index 1585142d4..5561a40bc 100644 --- a/src/controllers/notificationController.tsx +++ b/src/controllers/notificationController.tsx @@ -62,22 +62,6 @@ const EmptyDescription = styled.div` margin-top: -0.75rem; `; -const SuccessIcon = styled(CheckCircleFilled)` - color: var(--success-color); -`; - -const InfoIcon = styled(InfoCircleFilled)` - color: var(--primary-color); -`; - -const WarningIcon = styled(ExclamationCircleFilled)` - color: var(--warning-color); -`; - -const ErrorIcon = styled(StopFilled)` - color: var(--error-color); -`; - type NotificationType = Pick; const openSuccess = (notification: NotificationType) => (config: NotificationProps) => { @@ -85,7 +69,7 @@ const openSuccess = (notification: NotificationType) => (config: NotificationPro ...config, icon: ( - + ), message: {config.message}, @@ -98,7 +82,7 @@ const openInfo = (notification: NotificationType) => (config: NotificationProps) ...config, icon: ( - + ), message: {config.message}, @@ -111,7 +95,7 @@ const openWarning = (notification: NotificationType) => (config: NotificationPro ...config, icon: ( - + ), message: {config.message}, @@ -124,7 +108,7 @@ const openError = (notification: NotificationType) => (config: NotificationProps ...config, icon: ( - + ), message: {config.message}, From cd20878ce08ebaf80a588547e9981759eda07e1d Mon Sep 17 00:00:00 2001 From: Alexandr Buhlak <48954743+saha80@users.noreply.github.com> Date: Mon, 19 Jun 2023 16:42:45 +0300 Subject: [PATCH 20/81] chore: upgrade antd --- package.json | 2 +- yarn.lock | 30 +++++++++++++++--------------- 2 files changed, 16 insertions(+), 16 deletions(-) diff --git a/package.json b/package.json index 2441deaa2..62669bea3 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,7 @@ "@lit-labs/react": "^1.0.2", "@react-google-maps/api": "^2.18.1", "@reduxjs/toolkit": "^1.7.1", - "antd": "^5.6.1", + "antd": "^5.6.2", "antd-mask-input": "^2.0.7", "axios": "^0.24.0", "axios-mock-adapter": "^1.20.0", diff --git a/yarn.lock b/yarn.lock index ba88d75c7..752fb3220 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3967,9 +3967,9 @@ __metadata: languageName: node linkType: hard -"antd@npm:^5.6.1": - version: 5.6.1 - resolution: "antd@npm:5.6.1" +"antd@npm:^5.6.2": + version: 5.6.2 + resolution: "antd@npm:5.6.2" dependencies: "@ant-design/colors": ^7.0.0 "@ant-design/cssinjs": ^1.10.1 @@ -3986,7 +3986,7 @@ __metadata: dayjs: ^1.11.1 qrcode.react: ^3.1.0 rc-cascader: ~3.12.0 - rc-checkbox: ~3.0.0 + rc-checkbox: ~3.1.0 rc-collapse: ~3.7.0 rc-dialog: ~9.1.0 rc-drawer: ~6.2.0 @@ -4000,7 +4000,7 @@ __metadata: rc-motion: ^2.7.3 rc-notification: ~5.0.4 rc-pagination: ~3.5.0 - rc-picker: ~3.8.0 + rc-picker: ~3.8.2 rc-progress: ~3.4.1 rc-rate: ~2.12.0 rc-resize-observer: ^1.2.0 @@ -4022,7 +4022,7 @@ __metadata: peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: 8ee8345375be69fc4b242ecb46e72683be361e102fe306717adcd66b0d208cc82bdf0cb60ed1b557bf3611857e5516d2f69f79e408f262783599f6e36c8fe513 + checksum: ac2e73a53bbb870310ea384e8b7cb178d4326d76637f3e887da5819b915b84ef42790400116a3d6cefed8d5fdc5e3bacc051c55f97eec238af50245a6fa015b0 languageName: node linkType: hard @@ -11127,7 +11127,7 @@ __metadata: "@types/uuid": ^8.3.4 "@typescript-eslint/eslint-plugin": ^5.10.0 "@typescript-eslint/parser": ^5.8.0 - antd: ^5.6.1 + antd: ^5.6.2 antd-mask-input: ^2.0.7 axios: ^0.24.0 axios-mock-adapter: ^1.20.0 @@ -14415,9 +14415,9 @@ __metadata: languageName: node linkType: hard -"rc-checkbox@npm:~3.0.0": - version: 3.0.0 - resolution: "rc-checkbox@npm:3.0.0" +"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.3.2 @@ -14425,7 +14425,7 @@ __metadata: peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: d921c3324f15e98f2222542cb08ae6bf78b5ba1e50d20d6c1f416a4bf73a972c63315542232d7daadaed6dabd720acd62e9782bd3565fd6640a35b7f7795c7d3 + checksum: f15dd3e3e3120567b633392e37c6d904f2b3c32eb752f4197231b6d79bfa257bde9cd32616ad08c0ad5b053d7b197c9e0684479053b4dea384e466ab53f5c7b4 languageName: node linkType: hard @@ -14658,9 +14658,9 @@ __metadata: languageName: node linkType: hard -"rc-picker@npm:~3.8.0": - version: 3.8.1 - resolution: "rc-picker@npm:3.8.1" +"rc-picker@npm:~3.8.2": + version: 3.8.2 + resolution: "rc-picker@npm:3.8.2" dependencies: "@babel/runtime": ^7.10.1 "@rc-component/trigger": ^1.5.0 @@ -14682,7 +14682,7 @@ __metadata: optional: true moment: optional: true - checksum: 6e8c4fc31661c14160cefd2a15175128d9eb49b8ec89c84736d5441653cbcdea884dd57b316b567f0ac08a6b2fdf485c198e55fec07c3866700524286a617b7b + checksum: cc1d23a0d8e4bdce2ca480969be2363d68731cdd0f22e440422f949dfc66d09a5951298444413d5d9d61b1562493d54a365b58716e1d49ec645f7d6d7d011707 languageName: node linkType: hard From 0bf27452024917a3e8d77e1b199217b28f651ec1 Mon Sep 17 00:00:00 2001 From: Alexandr Buhlak <48954743+saha80@users.noreply.github.com> Date: Mon, 19 Jun 2023 22:44:51 +0300 Subject: [PATCH 21/81] refactor(profileCard): preserve styles --- .../common/BaseRadio/BaseRadio.styles.ts | 4 ++++ .../ProfileNav/ProfileNav.styles.ts | 2 +- .../PaymentsTable/PaymentsTable.styles.ts | 22 ++++++++++--------- 3 files changed, 17 insertions(+), 11 deletions(-) diff --git a/src/components/common/BaseRadio/BaseRadio.styles.ts b/src/components/common/BaseRadio/BaseRadio.styles.ts index 989a8a508..e6612bf06 100644 --- a/src/components/common/BaseRadio/BaseRadio.styles.ts +++ b/src/components/common/BaseRadio/BaseRadio.styles.ts @@ -8,6 +8,10 @@ export const Radio = styled(AntdRadio)` } &.ant-radio-wrapper { + .ant-radio { + align-self: inherit; + } + .ant-radio-inner, .ant-radio-inner::after { width: 1rem; diff --git a/src/components/profile/profileCard/ProfileNav/ProfileNav.styles.ts b/src/components/profile/profileCard/ProfileNav/ProfileNav.styles.ts index 20c521e48..8e5580d1f 100644 --- a/src/components/profile/profileCard/ProfileNav/ProfileNav.styles.ts +++ b/src/components/profile/profileCard/ProfileNav/ProfileNav.styles.ts @@ -17,6 +17,7 @@ export const Btn = styled(BaseButton)` align-items: center; justify-content: unset !important; width: 100%; + column-gap: 12px; &.ant-btn:not(:disabled):hover { background-color: rgba(var(--primary-rgb-color), 0.05); @@ -31,7 +32,6 @@ export const Btn = styled(BaseButton)` & > span:first-of-type { padding: 0.625rem; border-radius: 10px; - margin-right: 0.5rem; color: ${(props) => `var(--${props.color}-color)`}; 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..4e0aa423f 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,23 +2,25 @@ 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); + .ant-table-thead > tr { + th, + td { + border-block: 1px solid rgba(var(--primary-rgb-color), 0.3); + } - color: var(--primary-color); + th { + color: var(--primary-color); - text-align: center; + 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); - + border-bottom: 1px solid rgba(var(--primary-rgb-color), 0.3); font-weight: 600; font-size: 1rem; } From 25ac4e6d63b2f1dfac178ea0aab1879b7981e616 Mon Sep 17 00:00:00 2001 From: Alexandr Buhlak <48954743+saha80@users.noreply.github.com> Date: Mon, 19 Jun 2023 22:49:02 +0300 Subject: [PATCH 22/81] refactor(themeConfig): upgraded antd components --- src/styles/themeConfig.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/styles/themeConfig.tsx b/src/styles/themeConfig.tsx index c7d2a4040..9a14729a3 100644 --- a/src/styles/themeConfig.tsx +++ b/src/styles/themeConfig.tsx @@ -132,7 +132,7 @@ export const getThemeConfig = (theme: ThemeType): ThemeConfig => { colorPrimary: currentTheme.primary, colorTextDisabled: currentTheme.disable, controlInteractiveSize: 16, - marginXS: 0, + marginXS: 8, }, Tag: { fontSize: remToPixels(FONT_SIZE.xs), @@ -317,6 +317,7 @@ export const getThemeConfig = (theme: ThemeType): ThemeConfig => { paddingXXS: 2, }, Dropdown: { + paddingXXS: 0, controlHeight: 34, }, Upload: { From bedc419a5e93ebca79c7cfedf12356f3a00c251b Mon Sep 17 00:00:00 2001 From: Alexandr Buhlak <48954743+saha80@users.noreply.github.com> Date: Mon, 19 Jun 2023 23:31:17 +0300 Subject: [PATCH 23/81] refactor(Error): preserve styles --- src/components/Error/Error.styles.ts | 8 +++++++- src/components/Error/Error.tsx | 5 +---- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/src/components/Error/Error.styles.ts b/src/components/Error/Error.styles.ts index dbf360817..f306616d7 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 { BORDER_RADIUS, FONT_WEIGHT, HEIGHT, media } from '@app/styles/themes/constants'; import { BaseImage } from '../common/BaseImage/BaseImage'; import { BaseTypography } from '../common/BaseTypography/BaseTypography'; @@ -73,3 +73,9 @@ export const Text = styled(Title)` margin-bottom: 1.8rem; } `; + +export const Link = styled(BaseTypography.Link)` + font-weight: ${FONT_WEIGHT.semibold}; + line-height: ${HEIGHT.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')} ); From c5ad6bf492671fe640092a9fe4987b5ca87d772f Mon Sep 17 00:00:00 2001 From: Alexandr Buhlak <48954743+saha80@users.noreply.github.com> Date: Tue, 20 Jun 2023 00:00:13 +0300 Subject: [PATCH 24/81] refactor(themeConfig): preserve Table styles --- src/styles/themeConfig.tsx | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/src/styles/themeConfig.tsx b/src/styles/themeConfig.tsx index 9a14729a3..bc2cb923e 100644 --- a/src/styles/themeConfig.tsx +++ b/src/styles/themeConfig.tsx @@ -18,6 +18,8 @@ const parseNumber = (s: `${number}` | `${number}px`) => parseFloat(s); const fontFamily = `'${FONT_FAMILY.main}', sans-serif`; +const borderRadius = parseNumber(BORDER_RADIUS); + const 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)'; @@ -61,7 +63,11 @@ export const getThemeConfig = (theme: ThemeType): ThemeConfig => { controlHeightSM: remToPixels(HEIGHT.xs), controlHeight: remToPixels(HEIGHT.md), controlHeightLG: remToPixels(HEIGHT.lg), - borderRadius: parseNumber(BORDER_RADIUS), + borderRadiusXS: borderRadius, + borderRadiusSM: borderRadius, + borderRadius, + borderRadiusLG: borderRadius, + borderRadiusOuter: borderRadius, colorSplit: '#f0f0f0', controlOutline: antTheme.primaryColorOutline, controlOutlineWidth: 2, @@ -99,14 +105,12 @@ export const getThemeConfig = (theme: ThemeType): ThemeConfig => { paddingContentVerticalSM: 8, paddingMD: 15, paddingContentHorizontalLG: 15, - borderRadiusLG: parseNumber(BORDER_RADIUS), }, Card: { colorTextHeading: currentTheme.textMain, padding: 20, paddingLG: 20, boxShadowTertiary: currentTheme.boxShadow, - borderRadiusLG: parseNumber(BORDER_RADIUS), }, Tabs: { colorPrimaryHover: antTheme.primary5, @@ -125,6 +129,7 @@ export const getThemeConfig = (theme: ThemeType): ThemeConfig => { colorTextHeading: currentTheme.primary, colorFillAlter, controlItemBgActive: antTheme.primary1, + colorSplit: 'rgba(0, 0, 0, 0.15)', controlItemBgActiveHover: `rgba(${hexToRGB(currentTheme.primary)}, 0.12)`, }, Checkbox: { @@ -139,8 +144,6 @@ export const getThemeConfig = (theme: ThemeType): ThemeConfig => { }, Select: { fontSizeSM: remToPixels(FONT_SIZE.xs), - borderRadiusXS: parseNumber(BORDER_RADIUS), - borderRadiusSM: parseNumber(BORDER_RADIUS), lineWidth: 0.8, colorFillSecondary: currentTheme.backgroundColorBase, colorIcon: currentTheme.icon, @@ -209,7 +212,6 @@ export const getThemeConfig = (theme: ThemeType): ThemeConfig => { width: 36 * 16, paddingMD: 20, paddingLG: 20, - borderRadiusLG: parseNumber(BORDER_RADIUS), paddingContentHorizontalLG: 2 * 16, lineHeightLG: 2, colorSuccess: currentTheme.success, @@ -253,7 +255,6 @@ export const getThemeConfig = (theme: ThemeType): ThemeConfig => { }, Button: { colorPrimary: currentTheme.primary, - borderRadiusSM: parseNumber(BORDER_RADIUS), controlTmpOutline: antTheme.primaryColorOutline, controlOutline: '0', controlOutlineWidth: 0, From f9317ac8e7663559b7ce9853e9775addffa89cd5 Mon Sep 17 00:00:00 2001 From: Alexandr Buhlak <48954743+saha80@users.noreply.github.com> Date: Tue, 20 Jun 2023 17:04:29 +0300 Subject: [PATCH 25/81] chore: upgrade @ant-design/icons --- package.json | 7 +++---- yarn.lock | 53 ++++++++++++++++++++++++++++++++-------------------- 2 files changed, 36 insertions(+), 24 deletions(-) diff --git a/package.json b/package.json index 62669bea3..920203ace 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,7 @@ "url": "https://github.com/altence/lightence-admin/issues" }, "dependencies": { - "@ant-design/icons": "^5.0.1", + "@ant-design/icons": "^5.1.4", "@craco/craco": "^6.1.2", "@lit-labs/react": "^1.0.2", "@react-google-maps/api": "^2.18.1", @@ -85,8 +85,8 @@ "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", @@ -120,7 +120,6 @@ "node": "16.x" }, "resolutions": { - "@types/react": "^18.0.28", "react-error-overlay": "6.0.9" }, "packageManager": "yarn@3.1.1", diff --git a/yarn.lock b/yarn.lock index 752fb3220..c514f8a86 100644 --- a/yarn.lock +++ b/yarn.lock @@ -49,9 +49,9 @@ __metadata: languageName: node linkType: hard -"@ant-design/icons@npm:^5.0.1": - version: 5.0.1 - resolution: "@ant-design/icons@npm:5.0.1" +"@ant-design/icons@npm:^5.1.0": + version: 5.1.0 + resolution: "@ant-design/icons@npm:5.1.0" dependencies: "@ant-design/colors": ^7.0.0 "@ant-design/icons-svg": ^4.2.1 @@ -61,23 +61,23 @@ __metadata: peerDependencies: react: ">=16.0.0" react-dom: ">=16.0.0" - checksum: 426371e3a2d5d571a2df18229512ea5951ea71b97f1fa3a3a4dc2feda58498c70da7025c6e3ffcf0ae2dab0fb496d117f8962222f17d95dc58498850d9a21566 + checksum: 977baf9940c91c0939e72b0defd9503463f910b24c0ab2c38b0ca5769bf219923a70a28e431364431d20c880b33f167a636d351af9b668372946584b0f6bb006 languageName: node linkType: hard -"@ant-design/icons@npm:^5.1.0": - version: 5.1.0 - resolution: "@ant-design/icons@npm:5.1.0" +"@ant-design/icons@npm:^5.1.4": + version: 5.1.4 + resolution: "@ant-design/icons@npm:5.1.4" dependencies: "@ant-design/colors": ^7.0.0 "@ant-design/icons-svg": ^4.2.1 "@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: 977baf9940c91c0939e72b0defd9503463f910b24c0ab2c38b0ca5769bf219923a70a28e431364431d20c880b33f167a636d351af9b668372946584b0f6bb006 + checksum: f74f27b526459e69354adbc9d222a99afcf5fd0074a97575df239fbe5d077de0de903afa612546f24c378c2e163e02e4e31cde575da4e84e597025f12c90984f languageName: node linkType: hard @@ -3002,12 +3002,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 @@ -3094,14 +3094,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:*, @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 @@ -11108,15 +11108,15 @@ __metadata: version: 0.0.0-use.local resolution: "lightence-admin@workspace:." dependencies: - "@ant-design/icons": ^5.0.1 + "@ant-design/icons": ^5.1.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 @@ -14956,6 +14956,19 @@ __metadata: 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.0, rc-util@npm:^5.32.2": version: 5.32.3 resolution: "rc-util@npm:5.32.3" From 8b2fc7e397b4c407a9a3376ba20e8eefb81ae711 Mon Sep 17 00:00:00 2001 From: Alexandr Buhlak <48954743+saha80@users.noreply.github.com> Date: Tue, 20 Jun 2023 17:06:03 +0300 Subject: [PATCH 26/81] refactor(Breadcrumb): preserve icon size --- .../BaseBreadcrumb/BaseBreadcrumb.styles.tsx | 2 +- .../common/BaseBreadcrumb/BaseBreadcrumb.tsx | 15 ++++++++++++--- src/styles/themeConfig.tsx | 1 + 3 files changed, 14 insertions(+), 4 deletions(-) diff --git a/src/components/common/BaseBreadcrumb/BaseBreadcrumb.styles.tsx b/src/components/common/BaseBreadcrumb/BaseBreadcrumb.styles.tsx index e2c0c35ef..7d4f97d1b 100644 --- a/src/components/common/BaseBreadcrumb/BaseBreadcrumb.styles.tsx +++ b/src/components/common/BaseBreadcrumb/BaseBreadcrumb.styles.tsx @@ -1,7 +1,7 @@ import styled from 'styled-components'; import { Breadcrumb as AntBreadcrumb } from 'antd'; -export const BaseBreadcrumb = styled(AntBreadcrumb)` +export const Breadcrumb = styled(AntBreadcrumb)` &.ant-breadcrumb { li:last-child { .ant-breadcrumb-link { diff --git a/src/components/common/BaseBreadcrumb/BaseBreadcrumb.tsx b/src/components/common/BaseBreadcrumb/BaseBreadcrumb.tsx index 26c32cb70..74001f943 100644 --- a/src/components/common/BaseBreadcrumb/BaseBreadcrumb.tsx +++ b/src/components/common/BaseBreadcrumb/BaseBreadcrumb.tsx @@ -1,3 +1,12 @@ -export { BaseBreadcrumb } from './BaseBreadcrumb.styles'; -export type { BreadcrumbProps as BaseBreadcrumbProps } from 'antd'; -export type { BreadcrumbItemType as BaseBreadcrumbItemType } from 'antd/es/breadcrumb/Breadcrumb'; +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/styles/themeConfig.tsx b/src/styles/themeConfig.tsx index bc2cb923e..481529df7 100644 --- a/src/styles/themeConfig.tsx +++ b/src/styles/themeConfig.tsx @@ -260,6 +260,7 @@ export const getThemeConfig = (theme: ThemeType): ThemeConfig => { controlOutlineWidth: 0, }, Breadcrumb: { + fontSizeIcon: 10, colorTextDescription: currentTheme.breadcrumb, }, Rate: { From 27202077887d998a83a1ff63cec25dbec79536e7 Mon Sep 17 00:00:00 2001 From: Alexandr Buhlak <48954743+saha80@users.noreply.github.com> Date: Tue, 20 Jun 2023 17:15:58 +0300 Subject: [PATCH 27/81] refactor(controllers): preserve modal outlined icons --- src/controllers/modalController.tsx | 32 ++++++-- src/controllers/notificationController.tsx | 93 +++++++++++----------- 2 files changed, 75 insertions(+), 50 deletions(-) diff --git a/src/controllers/modalController.tsx b/src/controllers/modalController.tsx index 1ef864032..55eea90d3 100644 --- a/src/controllers/modalController.tsx +++ b/src/controllers/modalController.tsx @@ -1,6 +1,12 @@ import styled from 'styled-components'; import { FONT_SIZE, FONT_WEIGHT, HEIGHT } from '@app/styles/themes/constants'; import { ModalStaticFunctions } from 'antd/es/modal/confirm'; +import { + CheckCircleOutlined, + ExclamationCircleOutlined, + InfoCircleOutlined, + CloseCircleOutlined, +} from '@ant-design/icons'; const ModalStyles = styled.div` .ant-modal-confirm-success &, @@ -37,9 +43,25 @@ const modalRender = (node: React.ReactNode) => {node} type ModalType = Pick; -export const modalController = (modalType: ModalType): ModalType => ({ - info: (props) => modalType.info({ modalRender, ...props }), - success: (props) => modalType.success({ modalRender, ...props }), - warning: (props) => modalType.warning({ modalRender, ...props }), - error: (props) => modalType.error({ modalRender, ...props }), +const openInfo = (modal: ModalType): ModalType['info'] => { + return (props) => modal.info({ modalRender, icon: , ...props }); +}; + +const openSuccess = (modal: ModalType): ModalType['success'] => { + return (props) => modal.success({ modalRender, icon: , ...props }); +}; + +const openWarning = (modal: ModalType): ModalType['warning'] => { + return (props) => modal.warning({ modalRender, icon: , ...props }); +}; + +const openError = (modal: ModalType): ModalType['error'] => { + return (props) => modal.error({ modalRender, icon: , ...props }); +}; + +export const modalController = (modal: ModalType): ModalType => ({ + info: openInfo(modal), + success: openSuccess(modal), + warning: openWarning(modal), + error: openError(modal), }); diff --git a/src/controllers/notificationController.tsx b/src/controllers/notificationController.tsx index 5561a40bc..453634fb2 100644 --- a/src/controllers/notificationController.tsx +++ b/src/controllers/notificationController.tsx @@ -1,7 +1,6 @@ import type { NotificationInstance } from 'antd/es/notification/interface'; import styled, { css } from 'styled-components'; import { CheckCircleFilled, ExclamationCircleFilled, InfoCircleFilled, StopFilled } from '@ant-design/icons'; -import { ArgsProps as NotificationProps } from 'antd/lib/notification/interface'; import { FONT_SIZE, FONT_WEIGHT } from '@app/styles/themes/constants'; interface IconWrapperProps { @@ -64,56 +63,60 @@ const EmptyDescription = styled.div` type NotificationType = Pick; -const openSuccess = (notification: NotificationType) => (config: NotificationProps) => { - notification.success({ - ...config, - icon: ( - - - - ), - message: {config.message}, - description: config.description ? {config.description} : , - }); +const openSuccess = (notification: NotificationType): NotificationType['success'] => { + return ({ message, description, ...props }) => + notification.success({ + icon: ( + + + + ), + message: {message}, + description: description ? {description} : , + ...props, + }); }; -const openInfo = (notification: NotificationType) => (config: NotificationProps) => { - notification.info({ - ...config, - icon: ( - - - - ), - message: {config.message}, - description: config.description ? {config.description} : , - }); +const openInfo = (notification: NotificationType): NotificationType['info'] => { + return ({ message, description, ...props }) => + notification.info({ + icon: ( + + + + ), + message: {message}, + description: description ? {description} : , + ...props, + }); }; -const openWarning = (notification: NotificationType) => (config: NotificationProps) => { - notification.warning({ - ...config, - icon: ( - - - - ), - message: {config.message}, - description: config.description ? {config.description} : , - }); +const openWarning = (notification: NotificationType): NotificationType['warning'] => { + return ({ message, description, ...props }) => + notification.warning({ + icon: ( + + + + ), + message: {message}, + description: description ? {description} : , + ...props, + }); }; -const openError = (notification: NotificationType) => (config: NotificationProps) => { - notification.error({ - ...config, - icon: ( - - - - ), - message: {config.message}, - description: config.description ? {config.description} : , - }); +const openError = (notification: NotificationType): NotificationType['error'] => { + return ({ message, description, ...props }) => + notification.error({ + icon: ( + + + + ), + message: {message}, + description: description ? {description} : , + ...props, + }); }; export const notificationController = (notification: NotificationType): NotificationType => ({ From 418cd6b6a626b27154cd65198c7f1f6f7ae42cc5 Mon Sep 17 00:00:00 2001 From: Alexandr Buhlak <48954743+saha80@users.noreply.github.com> Date: Tue, 20 Jun 2023 18:11:25 +0300 Subject: [PATCH 28/81] refactor: preserve components styles --- src/styles/resetCss.ts | 1 - src/styles/themeConfig.tsx | 6 +++++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/styles/resetCss.ts b/src/styles/resetCss.ts index 69edb9492..308b1458a 100644 --- a/src/styles/resetCss.ts +++ b/src/styles/resetCss.ts @@ -22,7 +22,6 @@ export const resetCss = css` body { font-weight: 500; - color: var(--text-main-color); } img { diff --git a/src/styles/themeConfig.tsx b/src/styles/themeConfig.tsx index 481529df7..695cca1aa 100644 --- a/src/styles/themeConfig.tsx +++ b/src/styles/themeConfig.tsx @@ -251,7 +251,7 @@ export const getThemeConfig = (theme: ThemeType): ThemeConfig => { Badge: { colorPrimary: antTheme.primaryColor, colorTextPlaceholder: '#d9d9d9', - fontSizeSM: remToPixels(FONT_SIZE.xxs), + fontSizeSM: remToPixels(FONT_SIZE.xs), }, Button: { colorPrimary: currentTheme.primary, @@ -281,6 +281,8 @@ export const getThemeConfig = (theme: ThemeType): ThemeConfig => { wireframe: true, colorPrimary: antTheme.primaryColor, controlItemBgActiveDisabled: '#e6e6e6', + itemSizeSM: 24, + controlHeightLG: remToPixels(HEIGHT.sm), }, Slider: { colorPrimaryBorder: antTheme.primary3, @@ -301,6 +303,7 @@ export const getThemeConfig = (theme: ThemeType): ThemeConfig => { colorIcon: currentTheme.icon, boxShadow: modalBoxShadow, wireframe: true, + lineHeight: 1.57, }, Progress: { marginXS: 0, @@ -320,6 +323,7 @@ export const getThemeConfig = (theme: ThemeType): ThemeConfig => { }, Dropdown: { paddingXXS: 0, + fontSizeIcon: 10, controlHeight: 34, }, Upload: { From 79e557b365e6cab8476821ec98a7843d24705f66 Mon Sep 17 00:00:00 2001 From: Alexandr Buhlak <48954743+saha80@users.noreply.github.com> Date: Sun, 25 Jun 2023 20:32:05 +0300 Subject: [PATCH 29/81] chore: upgrade antd --- package.json | 3 ++- yarn.lock | 12 ++++++------ 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/package.json b/package.json index 920203ace..3899ffd84 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,7 @@ "@lit-labs/react": "^1.0.2", "@react-google-maps/api": "^2.18.1", "@reduxjs/toolkit": "^1.7.1", - "antd": "^5.6.2", + "antd": "^5.6.3", "antd-mask-input": "^2.0.7", "axios": "^0.24.0", "axios-mock-adapter": "^1.20.0", @@ -120,6 +120,7 @@ "node": "16.x" }, "resolutions": { + "@types/react": "^18.2.13", "react-error-overlay": "6.0.9" }, "packageManager": "yarn@3.1.1", diff --git a/yarn.lock b/yarn.lock index c514f8a86..214efe3bc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3094,7 +3094,7 @@ __metadata: languageName: node linkType: hard -"@types/react@npm:*, @types/react@npm:^18.2.13": +"@types/react@npm:^18.2.13": version: 18.2.13 resolution: "@types/react@npm:18.2.13" dependencies: @@ -3967,9 +3967,9 @@ __metadata: languageName: node linkType: hard -"antd@npm:^5.6.2": - version: 5.6.2 - resolution: "antd@npm:5.6.2" +"antd@npm:^5.6.3": + version: 5.6.3 + resolution: "antd@npm:5.6.3" dependencies: "@ant-design/colors": ^7.0.0 "@ant-design/cssinjs": ^1.10.1 @@ -4022,7 +4022,7 @@ __metadata: peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: ac2e73a53bbb870310ea384e8b7cb178d4326d76637f3e887da5819b915b84ef42790400116a3d6cefed8d5fdc5e3bacc051c55f97eec238af50245a6fa015b0 + checksum: 7ffe43b053383ee53c76213409ef8f6ef42b735ede79c7a0764579bc87ec44cc85dcdae03e82cc53ea3039fc23c0aecf1f6b6a75c6096e42d3c391627ca05a78 languageName: node linkType: hard @@ -11127,7 +11127,7 @@ __metadata: "@types/uuid": ^8.3.4 "@typescript-eslint/eslint-plugin": ^5.10.0 "@typescript-eslint/parser": ^5.8.0 - antd: ^5.6.2 + antd: ^5.6.3 antd-mask-input: ^2.0.7 axios: ^0.24.0 axios-mock-adapter: ^1.20.0 From 14d6e50c4479d0a5a8c95a38f57c89d0d7d8a5ed Mon Sep 17 00:00:00 2001 From: Alexandr Buhlak <48954743+saha80@users.noreply.github.com> Date: Mon, 26 Jun 2023 20:42:48 +0300 Subject: [PATCH 30/81] refactor(MaskedInput): preserve styles --- .../inputs/MaskedInput/MaskedInput.styles.ts | 17 +++++++++++++++++ .../common/inputs/MaskedInput/MaskedInput.tsx | 10 ++++++++++ .../paymentForm/CVVItem/CVVItem.tsx | 2 +- .../CardNumberItem/CardNumberItem.tsx | 2 +- .../paymentForm/ExpDateItem/ExpDateItem.tsx | 2 +- 5 files changed, 30 insertions(+), 3 deletions(-) create mode 100644 src/components/common/inputs/MaskedInput/MaskedInput.styles.ts create mode 100644 src/components/common/inputs/MaskedInput/MaskedInput.tsx 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..a7bbcb13c --- /dev/null +++ b/src/components/common/inputs/MaskedInput/MaskedInput.styles.ts @@ -0,0 +1,17 @@ +import styled from 'styled-components'; +import AntdMaskedInput from 'antd-mask-input'; + +export const MaskedInput = styled(AntdMaskedInput)` + &.ant-input { + font-family: inherit; + color: var(--text-main-color); + background-color: var(--background-color); + padding: 11.4px 11px; + border: 1px solid var(--border-base-color); + border-radius: 7px; + + &::placeholder { + color: var(--input-placeholder-color); + } + } +`; diff --git a/src/components/common/inputs/MaskedInput/MaskedInput.tsx b/src/components/common/inputs/MaskedInput/MaskedInput.tsx new file mode 100644 index 000000000..ab4819c2c --- /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 AntdMaskedInput } from 'antd-mask-input'; +import * as S from './MaskedInput.styles'; + +export type MaskedInputProps = ComponentPropsWithRef; + +export const MaskedInput = forwardRef((props) => { + return ; +}); 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/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'; From 168d295bf7a2382179b9800e556581e3141bc594 Mon Sep 17 00:00:00 2001 From: Alexandr Buhlak <48954743+saha80@users.noreply.github.com> Date: Mon, 26 Jun 2023 20:44:08 +0300 Subject: [PATCH 31/81] refactor(BaseSlider): preserve styles --- src/components/common/BaseSlider/BaseSlider.styles.ts | 4 ++++ src/styles/themeConfig.tsx | 7 +++++-- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/src/components/common/BaseSlider/BaseSlider.styles.ts b/src/components/common/BaseSlider/BaseSlider.styles.ts index 25e81a766..7400a9c6e 100644 --- a/src/components/common/BaseSlider/BaseSlider.styles.ts +++ b/src/components/common/BaseSlider/BaseSlider.styles.ts @@ -6,6 +6,10 @@ export const Slider = styled(AntdSlider)` background-color: var(--background-base-color) !important; } + &.ant-slider .ant-slider-handle:focus::after { + outline: 6px solid var(--ant-primary-color-outline); + } + & .ant-slider-mark-text:not(.ant-slider-mark-text-active) { color: var(--subtext-color); } diff --git a/src/styles/themeConfig.tsx b/src/styles/themeConfig.tsx index 695cca1aa..9c041165a 100644 --- a/src/styles/themeConfig.tsx +++ b/src/styles/themeConfig.tsx @@ -275,7 +275,7 @@ export const getThemeConfig = (theme: ThemeType): ThemeConfig => { Result: { fontSizeHeading3: remToPixels(FONT_SIZE.xxl), lineHeightHeading3: 1.8, - colorTextDescription: currentTheme.breadcrumb, + colorTextDescription: currentTheme.subText, }, Pagination: { wireframe: true, @@ -292,7 +292,10 @@ export const getThemeConfig = (theme: ThemeType): ThemeConfig => { colorBorderSecondary: '#e1e1e1', colorFillContentHover: '#e1e1e1', colorFillTertiary: currentTheme.backgroundColorBase, - handleSize: 8, + handleSize: 11, + handleSizeHover: 11, + handleLineWidth: 2, + handleLineWidthHover: 2, colorTextDisabled: currentTheme.disable, }, Calendar: { From 8a2363aa653a1f73c9d82d2d61dd2dcfea35820d Mon Sep 17 00:00:00 2001 From: Alexandr Buhlak <48954743+saha80@users.noreply.github.com> Date: Tue, 27 Jun 2023 15:39:49 +0300 Subject: [PATCH 32/81] refactor: components focus colors --- src/components/common/BaseButton/BaseButton.styles.ts | 4 ---- src/components/common/BaseRadio/BaseRadio.styles.ts | 7 +++---- src/components/common/BaseSwitch/BaseSwitch.styles.ts | 4 ++++ src/styles/themeConfig.tsx | 3 +-- 4 files changed, 8 insertions(+), 10 deletions(-) diff --git a/src/components/common/BaseButton/BaseButton.styles.ts b/src/components/common/BaseButton/BaseButton.styles.ts index 9a06f2bf1..0e640f75a 100644 --- a/src/components/common/BaseButton/BaseButton.styles.ts +++ b/src/components/common/BaseButton/BaseButton.styles.ts @@ -20,10 +20,6 @@ export const Button = styled(AntButton)` font-weight: ${FONT_WEIGHT.semibold}; box-shadow: none; - &:not(:disabled):focus-visible { - outline: none; - } - ${(props) => props.$noStyle && css` diff --git a/src/components/common/BaseRadio/BaseRadio.styles.ts b/src/components/common/BaseRadio/BaseRadio.styles.ts index e6612bf06..24b862164 100644 --- a/src/components/common/BaseRadio/BaseRadio.styles.ts +++ b/src/components/common/BaseRadio/BaseRadio.styles.ts @@ -3,8 +3,8 @@ import { Radio as AntdRadio } from 'antd'; export const Radio = styled(AntdRadio)` .ant-radio-input:focus-visible + .ant-radio-inner { - outline: none; - box-shadow: 0 0 0 3px var(--ant-primary-color-outline); + border-color: var(--primary-color); + box-shadow: 0 0 0 3px rgba(var(--primary-rgb-color), 0.12); } &.ant-radio-wrapper { @@ -32,8 +32,7 @@ export const Radio = styled(AntdRadio)` export const RadioButton = styled(AntdRadio.Button)` &.ant-radio-button-wrapper:has(:focus-visible) { - outline: none; - box-shadow: 0 0 0 3px var(--ant-primary-color-outline); + box-shadow: 0 0 0 3px rgba(var(--primary-rgb-color), 0.12); } &.ant-radio-button-wrapper-disabled { diff --git a/src/components/common/BaseSwitch/BaseSwitch.styles.ts b/src/components/common/BaseSwitch/BaseSwitch.styles.ts index 15aabea05..6e9996e94 100644 --- a/src/components/common/BaseSwitch/BaseSwitch.styles.ts +++ b/src/components/common/BaseSwitch/BaseSwitch.styles.ts @@ -2,6 +2,10 @@ import styled from 'styled-components'; import { Switch as AntdSwitch } from 'antd'; export const Switch = styled(AntdSwitch)` + &.ant-switch-checked:focus { + box-shadow: 0 0 0 2px var(--ant-primary-1); + } + &.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)); diff --git a/src/styles/themeConfig.tsx b/src/styles/themeConfig.tsx index 9c041165a..0dce1d59d 100644 --- a/src/styles/themeConfig.tsx +++ b/src/styles/themeConfig.tsx @@ -70,6 +70,7 @@ export const getThemeConfig = (theme: ThemeType): ThemeConfig => { borderRadiusOuter: borderRadius, colorSplit: '#f0f0f0', controlOutline: antTheme.primaryColorOutline, + controlTmpOutline: antTheme.primaryColorOutline, controlOutlineWidth: 2, lineWidthFocus: 0, screenXSMin: 0, @@ -179,7 +180,6 @@ export const getThemeConfig = (theme: ThemeType): ThemeConfig => { colorPrimary: antTheme.primaryColor, colorWhite: currentTheme.background, lineHeight: 1.375, - lineWidthFocus: 1, colorPrimaryBorder: antTheme.primary1, opacityLoading: 0.4, }, @@ -255,7 +255,6 @@ export const getThemeConfig = (theme: ThemeType): ThemeConfig => { }, Button: { colorPrimary: currentTheme.primary, - controlTmpOutline: antTheme.primaryColorOutline, controlOutline: '0', controlOutlineWidth: 0, }, From 9a39b65fd99d335920acbaf0ab31b943d8b2ab80 Mon Sep 17 00:00:00 2001 From: Alexandr Buhlak <48954743+saha80@users.noreply.github.com> Date: Tue, 27 Jun 2023 16:22:40 +0300 Subject: [PATCH 33/81] refactor: remove css variable aliases --- .../common/BaseButton/BaseButton.styles.ts | 16 ++++++------ .../BasePagination/BasePagination.styles.ts | 8 +++--- .../common/BaseSlider/BaseSlider.styles.ts | 2 +- src/controllers/modalController.tsx | 4 +-- src/styles/GlobalStyle.ts | 2 +- src/styles/themeConfig.tsx | 25 ++++++++++--------- src/styles/themes/dark/darkTheme.ts | 3 --- src/styles/themes/light/lightTheme.ts | 3 --- src/styles/themes/themeVariables.ts | 3 --- 9 files changed, 29 insertions(+), 37 deletions(-) diff --git a/src/components/common/BaseButton/BaseButton.styles.ts b/src/components/common/BaseButton/BaseButton.styles.ts index 0e640f75a..535f1d4a1 100644 --- a/src/components/common/BaseButton/BaseButton.styles.ts +++ b/src/components/common/BaseButton/BaseButton.styles.ts @@ -56,8 +56,8 @@ export const Button = styled(AntButton)` &:focus, &:not(:disabled):hover { - color: var(--ant-primary-color-hover); - border-color: var(--ant-primary-color-hover); + color: var(--ant-primary-5); + border-color: var(--ant-primary-5); } } @@ -84,8 +84,8 @@ export const Button = styled(AntButton)` } &:focus { - color: var(--ant-primary-color-hover); - border-color: var(--ant-primary-color-hover); + color: var(--ant-primary-5); + border-color: var(--ant-primary-5); } &:not(:disabled):hover { @@ -98,8 +98,8 @@ export const Button = styled(AntButton)` background: var(--primary-color); &:focus { - border-color: var(--ant-primary-color-hover); - background: var(--ant-primary-color-hover); + border-color: var(--ant-primary-5); + background: var(--ant-primary-5); } &:hover { @@ -117,12 +117,12 @@ export const Button = styled(AntButton)` } &:focus { - color: var(--ant-primary-color-hover); + color: var(--ant-primary-5); } &:not(:disabled):hover { text-decoration: none; - color: var(--ant-primary-color-hover); + color: var(--ant-primary-5); } & span, diff --git a/src/components/common/BasePagination/BasePagination.styles.ts b/src/components/common/BasePagination/BasePagination.styles.ts index 827e7e4bb..744da4850 100644 --- a/src/components/common/BasePagination/BasePagination.styles.ts +++ b/src/components/common/BasePagination/BasePagination.styles.ts @@ -9,17 +9,17 @@ export const Pagination = styled(AntdPagination)` :not(.ant-pagination-disabled) { .ant-pagination-item:focus-visible { a { - color: var(--ant-primary-color); + color: var(--primary-color); } - border-color: var(--ant-primary-color); + border-color: var(--primary-color); } .ant-pagination-prev, .ant-pagination-next { &:focus-visible { .ant-pagination-item-link { - color: var(--ant-primary-color); - border-color: var(--ant-primary-color); + color: var(--primary-color); + border-color: var(--primary-color); } } } diff --git a/src/components/common/BaseSlider/BaseSlider.styles.ts b/src/components/common/BaseSlider/BaseSlider.styles.ts index 7400a9c6e..9655391b9 100644 --- a/src/components/common/BaseSlider/BaseSlider.styles.ts +++ b/src/components/common/BaseSlider/BaseSlider.styles.ts @@ -7,7 +7,7 @@ export const Slider = styled(AntdSlider)` } &.ant-slider .ant-slider-handle:focus::after { - outline: 6px solid var(--ant-primary-color-outline); + outline: 6px solid rgba(var(--primary-color), 0.2); } & .ant-slider-mark-text:not(.ant-slider-mark-text-active) { diff --git a/src/controllers/modalController.tsx b/src/controllers/modalController.tsx index 55eea90d3..a4643dc68 100644 --- a/src/controllers/modalController.tsx +++ b/src/controllers/modalController.tsx @@ -30,8 +30,8 @@ const ModalStyles = styled.div` .ant-btn.ant-btn-primary { font-size: ${FONT_SIZE.md}; font-weight: ${FONT_WEIGHT.semibold}; - background-color: var(--ant-primary-color); - border-color: var(--ant-primary-color); + background-color: var(--primary-color); + border-color: var(--primary-color); height: ${HEIGHT.md}; } } diff --git a/src/styles/GlobalStyle.ts b/src/styles/GlobalStyle.ts index cf8765336..d90e860cb 100644 --- a/src/styles/GlobalStyle.ts +++ b/src/styles/GlobalStyle.ts @@ -33,7 +33,7 @@ export default styled.createGlobalStyle` &:hover, :active { - color: var(--ant-primary-color-hover); + color: var(--ant-primary-5); } } diff --git a/src/styles/themeConfig.tsx b/src/styles/themeConfig.tsx index 0dce1d59d..50ee31374 100644 --- a/src/styles/themeConfig.tsx +++ b/src/styles/themeConfig.tsx @@ -29,6 +29,8 @@ export const getThemeConfig = (theme: ThemeType): ThemeConfig => { const colorFillAlter = `rgba(${hexToRGB(currentTheme.primary)}, 0.05)`; + const controlOutline = `rgba(${hexToRGB(currentTheme.primary)}, 0.2)`; + // In some properties CSS variables are not parsed properly. return { token: { @@ -69,8 +71,8 @@ export const getThemeConfig = (theme: ThemeType): ThemeConfig => { borderRadiusLG: borderRadius, borderRadiusOuter: borderRadius, colorSplit: '#f0f0f0', - controlOutline: antTheme.primaryColorOutline, - controlTmpOutline: antTheme.primaryColorOutline, + controlOutline, + controlTmpOutline: controlOutline, controlOutlineWidth: 2, lineWidthFocus: 0, screenXSMin: 0, @@ -115,7 +117,7 @@ export const getThemeConfig = (theme: ThemeType): ThemeConfig => { }, Tabs: { colorPrimaryHover: antTheme.primary5, - colorPrimary: antTheme.primaryColor, + colorPrimary: currentTheme.primary, colorPrimaryActive: antTheme.primary7, colorTextDisabled: currentTheme.disable, colorBorderSecondary: '#f0f0f0', @@ -148,7 +150,7 @@ export const getThemeConfig = (theme: ThemeType): ThemeConfig => { lineWidth: 0.8, colorFillSecondary: currentTheme.backgroundColorBase, colorIcon: currentTheme.icon, - colorPrimary: antTheme.primaryColor, + colorPrimary: currentTheme.primary, colorPrimaryHover: antTheme.primary5, controlItemBgActive: antTheme.primary1, controlItemBgHover: currentTheme.itemHoverBg, @@ -166,7 +168,7 @@ export const getThemeConfig = (theme: ThemeType): ThemeConfig => { Spin: { controlHeight: remToPixels(HEIGHT.xs), controlHeightLG: remToPixels(HEIGHT.sm), - colorPrimary: antTheme.primaryColor, + colorPrimary: currentTheme.primary, }, Skeleton: { controlHeightXS: 16, @@ -177,7 +179,7 @@ export const getThemeConfig = (theme: ThemeType): ThemeConfig => { }, Switch: { controlHeight: remToPixels(HEIGHT.xs), - colorPrimary: antTheme.primaryColor, + colorPrimary: currentTheme.primary, colorWhite: currentTheme.background, lineHeight: 1.375, colorPrimaryBorder: antTheme.primary1, @@ -186,7 +188,7 @@ export const getThemeConfig = (theme: ThemeType): ThemeConfig => { Menu: { controlHeightLG: remToPixels(HEIGHT.md), fontSize: remToPixels(FONT_SIZE.xs), - itemSelectedColor: antTheme.primaryColor, + itemSelectedColor: currentTheme.primary, colorFillAlter: `rgba(${hexToRGB(antThemeObject['light'].primary6)}, 0.05)`, colorSplit: 'transparent', activeBarWidth: 2, @@ -239,7 +241,7 @@ export const getThemeConfig = (theme: ThemeType): ThemeConfig => { }, Form: { marginLG: 16, - colorInfoBorderHover: antTheme.primaryColorHover, + colorInfoBorderHover: antTheme.primary5, }, Avatar: { colorTextPlaceholder: currentTheme.avatarBg, @@ -249,13 +251,12 @@ export const getThemeConfig = (theme: ThemeType): ThemeConfig => { controlHeightLG: remToPixels(HEIGHT.sm), }, Badge: { - colorPrimary: antTheme.primaryColor, + colorPrimary: currentTheme.primary, colorTextPlaceholder: '#d9d9d9', fontSizeSM: remToPixels(FONT_SIZE.xs), }, Button: { colorPrimary: currentTheme.primary, - controlOutline: '0', controlOutlineWidth: 0, }, Breadcrumb: { @@ -267,7 +268,7 @@ export const getThemeConfig = (theme: ThemeType): ThemeConfig => { colorFillContent: '#f0f0f0', }, Radio: { - colorPrimary: antTheme.primaryColor, + colorPrimary: currentTheme.primary, wireframe: true, controlItemBgActiveDisabled: '#e6e6e6', }, @@ -278,7 +279,7 @@ export const getThemeConfig = (theme: ThemeType): ThemeConfig => { }, Pagination: { wireframe: true, - colorPrimary: antTheme.primaryColor, + colorPrimary: currentTheme.primary, controlItemBgActiveDisabled: '#e6e6e6', itemSizeSM: 24, controlHeightLG: remToPixels(HEIGHT.sm), diff --git a/src/styles/themes/dark/darkTheme.ts b/src/styles/themes/dark/darkTheme.ts index 4ceecedde..6a872bbbb 100644 --- a/src/styles/themes/dark/darkTheme.ts +++ b/src/styles/themes/dark/darkTheme.ts @@ -108,9 +108,6 @@ export const darkColorsTheme = { } as const satisfies ITheme; export const antDarkColorsTheme = { - primaryColorHover: '#5cb6ff', - primaryColor: 'rgb(51, 156, 253)', - primaryColorOutline: 'rgba(51, 156, 253, 0.2)', primary1: darkColorsTheme.primary1, primary2: '#d6f1ff', primary3: '#ade0ff', diff --git a/src/styles/themes/light/lightTheme.ts b/src/styles/themes/light/lightTheme.ts index cc4e7d025..eeaf23c6f 100644 --- a/src/styles/themes/light/lightTheme.ts +++ b/src/styles/themes/light/lightTheme.ts @@ -108,9 +108,6 @@ export const lightColorsTheme = { } as const satisfies ITheme; export const antLightColorsTheme = { - primaryColorHover: '#1c68a6', - primaryColor: 'rgb(1, 80, 154)', - primaryColorOutline: 'rgba(1, 80, 154, 0.2)', primary1: lightColorsTheme.primary1, primary2: '#85b3cc', primary3: '#5e9abf', diff --git a/src/styles/themes/themeVariables.ts b/src/styles/themes/themeVariables.ts index 52253dd6c..e6060eeef 100644 --- a/src/styles/themes/themeVariables.ts +++ b/src/styles/themes/themeVariables.ts @@ -100,9 +100,6 @@ export const getThemeVariables = (theme: ThemeType): FlattenSimpleInterpolation --alert-text-color: ${themeObject[theme].alertTextColor}; --breadcrumb-color: ${themeObject[theme].breadcrumb}; - --ant-primary-color-hover: ${antThemeObject[theme].primaryColorHover}; - --ant-primary-color: ${antThemeObject[theme].primaryColor}; - --ant-primary-color-outline: ${antThemeObject[theme].primaryColorOutline}; --ant-primary-1: ${antThemeObject[theme].primary1}; --ant-primary-2: ${antThemeObject[theme].primary2}; --ant-primary-3: ${antThemeObject[theme].primary3}; From c3bec661b15d4630e0052ec73d0680abe258c9ac Mon Sep 17 00:00:00 2001 From: Alexandr Buhlak <48954743+saha80@users.noreply.github.com> Date: Fri, 7 Jul 2023 10:59:51 +0300 Subject: [PATCH 34/81] chore: bump antd version --- package.json | 2 +- yarn.lock | 178 +++++++++++++++++++++++++++++++-------------------- 2 files changed, 109 insertions(+), 71 deletions(-) diff --git a/package.json b/package.json index 3899ffd84..0a8437998 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,7 @@ "@lit-labs/react": "^1.0.2", "@react-google-maps/api": "^2.18.1", "@reduxjs/toolkit": "^1.7.1", - "antd": "^5.6.3", + "antd": "^5.7.0", "antd-mask-input": "^2.0.7", "axios": "^0.24.0", "axios-mock-adapter": "^1.20.0", diff --git a/yarn.lock b/yarn.lock index 214efe3bc..c01afe369 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1567,6 +1567,15 @@ __metadata: 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/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" @@ -2234,9 +2243,9 @@ __metadata: languageName: node linkType: hard -"@rc-component/color-picker@npm:~1.2.0": - version: 1.2.0 - resolution: "@rc-component/color-picker@npm:1.2.0" +"@rc-component/color-picker@npm:~1.4.0": + version: 1.4.0 + resolution: "@rc-component/color-picker@npm:1.4.0" dependencies: "@babel/runtime": ^7.10.1 "@ctrl/tinycolor": ^3.6.0 @@ -2245,7 +2254,7 @@ __metadata: peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: d0eb0ead64d386342c7813b0bbe163fc9b5f7c3bda9493a5d9106752a1b5643ad5a55a20ae20942931e50aafa80d1d243a05ab23a7c5f19720ed21065b17e1d7 + checksum: 2c16c676d5afb234f6d39f399d0a24591136d286728bd333e860a268c6049edf2a7982e621884bf5aadd7dbb58da7997eb7776167ff4031c6a2aef469b50d641 languageName: node linkType: hard @@ -3967,9 +3976,9 @@ __metadata: languageName: node linkType: hard -"antd@npm:^5.6.3": - version: 5.6.3 - resolution: "antd@npm:5.6.3" +"antd@npm:^5.7.0": + version: 5.7.0 + resolution: "antd@npm:5.7.0" dependencies: "@ant-design/colors": ^7.0.0 "@ant-design/cssinjs": ^1.10.1 @@ -3977,7 +3986,7 @@ __metadata: "@ant-design/react-slick": ~1.0.0 "@babel/runtime": ^7.18.3 "@ctrl/tinycolor": ^3.6.0 - "@rc-component/color-picker": ~1.2.0 + "@rc-component/color-picker": ~1.4.0 "@rc-component/mutate-observer": ^1.0.0 "@rc-component/tour": ~1.8.0 "@rc-component/trigger": ^1.13.0 @@ -3991,16 +4000,16 @@ __metadata: rc-dialog: ~9.1.0 rc-drawer: ~6.2.0 rc-dropdown: ~4.1.0 - rc-field-form: ~1.32.0 - rc-image: ~5.17.1 - rc-input: ~1.0.4 - rc-input-number: ~7.4.0 - rc-mentions: ~2.3.0 - rc-menu: ~9.9.2 + rc-field-form: ~1.34.0 + rc-image: ~7.0.0-2 + rc-input: ~1.1.0 + rc-input-number: ~8.0.0 + rc-mentions: ~2.5.0 + rc-menu: ~9.10.0 rc-motion: ^2.7.3 rc-notification: ~5.0.4 rc-pagination: ~3.5.0 - rc-picker: ~3.8.2 + rc-picker: ~3.10.0 rc-progress: ~3.4.1 rc-rate: ~2.12.0 rc-resize-observer: ^1.2.0 @@ -4010,10 +4019,10 @@ __metadata: rc-steps: ~6.0.0 rc-switch: ~4.1.0 rc-table: ~7.32.1 - rc-tabs: ~12.7.0 - rc-textarea: ~1.2.2 + rc-tabs: ~12.9.0 + rc-textarea: ~1.3.2 rc-tooltip: ~6.0.0 - rc-tree: ~5.7.4 + rc-tree: ~5.7.6 rc-tree-select: ~5.9.0 rc-upload: ~4.3.0 rc-util: ^5.32.0 @@ -4022,7 +4031,7 @@ __metadata: peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: 7ffe43b053383ee53c76213409ef8f6ef42b735ede79c7a0764579bc87ec44cc85dcdae03e82cc53ea3039fc23c0aecf1f6b6a75c6096e42d3c391627ca05a78 + checksum: 3915344b8ff92e2e789e4f34338ba62953cfc97a7be2eff420a91f8a6d03d5133c2b60419b4acd39e09faafa71f24281616834e4ab3527733bff3fc09efc0de9 languageName: node linkType: hard @@ -11127,7 +11136,7 @@ __metadata: "@types/uuid": ^8.3.4 "@typescript-eslint/eslint-plugin": ^5.10.0 "@typescript-eslint/parser": ^5.8.0 - antd: ^5.6.3 + antd: ^5.7.0 antd-mask-input: ^2.0.7 axios: ^0.24.0 axios-mock-adapter: ^1.20.0 @@ -14491,9 +14500,9 @@ __metadata: languageName: node linkType: hard -"rc-field-form@npm:~1.32.0": - version: 1.32.0 - resolution: "rc-field-form@npm:1.32.0" +"rc-field-form@npm:~1.34.0": + version: 1.34.1 + resolution: "rc-field-form@npm:1.34.1" dependencies: "@babel/runtime": ^7.18.0 async-validator: ^4.1.0 @@ -14501,13 +14510,13 @@ __metadata: peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: 39f8b58d10637f6fc70d15842cb1f072bf3088eeee7328de30cd36cd445e082312cd9fbc3e96b4e7fe35210c959c24e80305103939d5ef99cb98e73aee7f8e6f + checksum: 30b8bbbcd99907062d93ab683a37c74c3b3dfa35bbc64425836aa8f9db35b5cf81a4f337a0c7b94469d01e3ed4bfa4f91ec2b729803ece62942f5632ba6161f1 languageName: node linkType: hard -"rc-image@npm:~5.17.1": - version: 5.17.1 - resolution: "rc-image@npm:5.17.1" +"rc-image@npm:~7.0.0-2": + version: 7.0.0-2 + resolution: "rc-image@npm:7.0.0-2" dependencies: "@babel/runtime": ^7.11.2 "@rc-component/portal": ^1.0.2 @@ -14518,28 +14527,29 @@ __metadata: peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: 8e08223261d7b0a7ec6e7f705576d9d721b8bf25b6c1dbc70d01fe7d44c16d290edb3abf13c847331d9791aab2f1c10bef57dfe78b620b945bb45d9643d1fa6b + checksum: 65c98bf90f3ce599a9b48ac70f4c4fce72f9e0865789d2796429f561fb0a6fe14a2fb668bbc7438771e1764d58ac165d8ea9d160c2d58cc1b78e5f5b021d2940 languageName: node linkType: hard -"rc-input-number@npm:~7.4.0": - version: 7.4.1 - resolution: "rc-input-number@npm:7.4.1" +"rc-input-number@npm:~8.0.0": + version: 8.0.1 + resolution: "rc-input-number@npm:8.0.1" dependencies: "@babel/runtime": ^7.10.1 "@rc-component/mini-decimal": ^1.0.1 classnames: ^2.2.5 - rc-util: ^5.25.0 + rc-input: ~1.1.0 + rc-util: ^5.28.0 peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: 5c48747da81efb131aaad06c4c9cd78bbf7ad301a91e31599d68cffb05c8be317340ff060285542d9ba57fa8879716adf9e80a54a4a4d89305d5c6c161037304 + checksum: 841d77157dd1e11f355dc444f8cce72848d7a557a00291bbe3a6058c451d0af5c10597683362538e9e2eac090c528a6649edaae5fc6abed2523a8c0735afdc84 languageName: node linkType: hard -"rc-input@npm:~1.0.0, rc-input@npm:~1.0.4": - version: 1.0.4 - resolution: "rc-input@npm:1.0.4" +"rc-input@npm:~1.1.0": + version: 1.1.0 + resolution: "rc-input@npm:1.1.0" dependencies: "@babel/runtime": ^7.11.1 classnames: ^2.2.1 @@ -14547,42 +14557,42 @@ __metadata: peerDependencies: react: ">=16.0.0" react-dom: ">=16.0.0" - checksum: 9fca51ab654fc2b412820a9bfd7e8759799dd74b84bb6b4e3885e2dfcb858d534b4bf8190598cd3e2e9f1887784c69322e5d16266079d87fc2b399da5b6a28bd + checksum: d3f7fc2c6dfe2cf1cec4cebe2c21614f306666f39fef798af4885b58f6ada8cead0a301c10e16940a37199a572420a5146c9ff4d67927da8a9e52ca53b09de04 languageName: node linkType: hard -"rc-mentions@npm:~2.3.0": - version: 2.3.0 - resolution: "rc-mentions@npm:2.3.0" +"rc-mentions@npm:~2.5.0": + version: 2.5.0 + resolution: "rc-mentions@npm:2.5.0" dependencies: - "@babel/runtime": ^7.10.1 + "@babel/runtime": ^7.22.5 "@rc-component/trigger": ^1.5.0 classnames: ^2.2.6 - rc-input: ~1.0.0 - rc-menu: ~9.9.0 - rc-textarea: ~1.2.0 + rc-input: ~1.1.0 + rc-menu: ~9.10.0 + rc-textarea: ~1.3.0 rc-util: ^5.22.5 peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: b1548f3a2cec8609cc1ef1a5fe56db5d06983ec465ac00fa2ecd259a20f9619f8e6179135b02aa45565d8b724e66f65d708d3ce4bff254b3c5764db10002c762 + checksum: 084236d5e58738acbc8ab3ccaa9c02daf6a6cda8040780a8c99cdebf9a7bec262df5a22732ce250d73263bc64c115f44bc8b5e11b0db4eb82c68f7cdcbb2ab9c languageName: node linkType: hard -"rc-menu@npm:~9.9.0, rc-menu@npm:~9.9.2": - version: 9.9.2 - resolution: "rc-menu@npm:9.9.2" +"rc-menu@npm:~9.10.0": + version: 9.10.0 + resolution: "rc-menu@npm:9.10.0" dependencies: "@babel/runtime": ^7.10.1 "@rc-component/trigger": ^1.6.2 classnames: 2.x rc-motion: ^2.4.3 - rc-overflow: ^1.2.8 + rc-overflow: ^1.3.1 rc-util: ^5.27.0 peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: 028108a61c23672c8ac469c14c7545c0f6a7f5b58e49b6bb2a5225d1eb7d86e37fa40cbbcf7150225289ad894b54fa6c974bd7a9562db6f34dbe26ad7db7985c + checksum: 600f16a6d8b64ee90093786abdee3ad4663d4c4922ad7b568bc51dd9e5edbbd230ba93a8eae56d8d8ce070551ca12f3ae3c01d5e5b105a3d07a11245207fda6c languageName: node linkType: hard @@ -14629,7 +14639,7 @@ __metadata: languageName: node linkType: hard -"rc-overflow@npm:^1.0.0, rc-overflow@npm:^1.2.8": +"rc-overflow@npm:^1.0.0": version: 1.2.8 resolution: "rc-overflow@npm:1.2.8" dependencies: @@ -14644,6 +14654,21 @@ __metadata: languageName: node linkType: hard +"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 + rc-resize-observer: ^1.0.0 + rc-util: ^5.19.2 + peerDependencies: + react: ">=16.9.0" + react-dom: ">=16.9.0" + checksum: 1573dcb2509634ca3eea8f45575fd80128b3da9395af64e2ecf0059a8cae6f29e07a8583935682b837f38db0d533b5cd68d75b4918a75f0d0cd10bdbf07db575 + languageName: node + linkType: hard + "rc-pagination@npm:~3.5.0": version: 3.5.0 resolution: "rc-pagination@npm:3.5.0" @@ -14658,9 +14683,9 @@ __metadata: languageName: node linkType: hard -"rc-picker@npm:~3.8.2": - version: 3.8.2 - resolution: "rc-picker@npm:3.8.2" +"rc-picker@npm:~3.10.0": + version: 3.10.0 + resolution: "rc-picker@npm:3.10.0" dependencies: "@babel/runtime": ^7.10.1 "@rc-component/trigger": ^1.5.0 @@ -14682,7 +14707,7 @@ __metadata: optional: true moment: optional: true - checksum: cc1d23a0d8e4bdce2ca480969be2363d68731cdd0f22e440422f949dfc66d09a5951298444413d5d9d61b1562493d54a365b58716e1d49ec645f7d6d7d011707 + checksum: 908df48acfff11d62a64b11f12ceda10f424b3483ea2926ca25d5477609f0416559826ede78f2a0604682cc0e28a8c0ffdd98ee802746b1bee0f5b9890699df4 languageName: node linkType: hard @@ -14820,37 +14845,37 @@ __metadata: languageName: node linkType: hard -"rc-tabs@npm:~12.7.0": - version: 12.7.1 - resolution: "rc-tabs@npm:12.7.1" +"rc-tabs@npm:~12.9.0": + version: 12.9.0 + resolution: "rc-tabs@npm:12.9.0" dependencies: "@babel/runtime": ^7.11.2 classnames: 2.x rc-dropdown: ~4.1.0 - rc-menu: ~9.9.0 + rc-menu: ~9.10.0 rc-motion: ^2.6.2 rc-resize-observer: ^1.0.0 rc-util: ^5.16.0 peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: f20fcf63ea504bd216b3bda849b9ab0c0e308ad6f26eef18f0c4ea17544968ee6bd53f6a3d187476f84ae0ea4390f97467b1a467195c80295154143bc0eee3ad + checksum: a8ab132f3e2f5dfc933e6942962ea3c13a0aa9b88c498d9183901f0124c92d60692fe5e9ee34bfa67dfce3b8ee426d999f9dd465617fde755a27dfbdd6fcd134 languageName: node linkType: hard -"rc-textarea@npm:~1.2.0, rc-textarea@npm:~1.2.2": - version: 1.2.2 - resolution: "rc-textarea@npm:1.2.2" +"rc-textarea@npm:~1.3.0, rc-textarea@npm:~1.3.2": + version: 1.3.2 + resolution: "rc-textarea@npm:1.3.2" dependencies: "@babel/runtime": ^7.10.1 classnames: ^2.2.1 - rc-input: ~1.0.4 + rc-input: ~1.1.0 rc-resize-observer: ^1.0.0 rc-util: ^5.27.0 peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: 4db185617f9a6481bb7f0f77bbc0f5d9b64b82b821b51a34116fba7cd8ee25db754680524c63e409583f8f4edc25fdcd8074ddcb5dc3ec2fbc370965ff3c29a9 + checksum: 8c5c7d345772e1c965b4dc58ac21992015c54ac2865f90a32330945db2999e5b48270a2c89b76967951ebe6be602bff1038161676069dd61d5fd134e4486f213 languageName: node linkType: hard @@ -14900,9 +14925,9 @@ __metadata: languageName: node linkType: hard -"rc-tree@npm:~5.7.4": - version: 5.7.4 - resolution: "rc-tree@npm:5.7.4" +"rc-tree@npm:~5.7.6": + version: 5.7.8 + resolution: "rc-tree@npm:5.7.8" dependencies: "@babel/runtime": ^7.10.1 classnames: 2.x @@ -14912,7 +14937,7 @@ __metadata: peerDependencies: react: "*" react-dom: "*" - checksum: c478d4d41b31e9fcb0f3be7853800b3f3280e315e4ad3f0eab2587e6d4e79d4c8d0520fceaa48e6e6b9de8fb710624b1702866bd9711d1ed2faed697fb0711d6 + checksum: d2e80a32b096ff781e2cbb5b9b8b1f7e2adfff45e74d596985b7d31587fa08755d444388401a39513cb0dc4a97f5e936809749348d85ea555da0913ce0800c6f languageName: node linkType: hard @@ -14930,7 +14955,7 @@ __metadata: 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.20.1, rc-util@npm:^5.21.0, rc-util@npm:^5.21.2, rc-util@npm:^5.22.5, rc-util@npm:^5.24.4, rc-util@npm:^5.25.0, rc-util@npm:^5.26.0, rc-util@npm:^5.27.0, rc-util@npm:^5.27.1, rc-util@npm:^5.6.1, rc-util@npm:^5.9.4": +"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.20.1, rc-util@npm:^5.21.0, rc-util@npm:^5.21.2, rc-util@npm:^5.22.5, rc-util@npm:^5.24.4, rc-util@npm:^5.26.0, rc-util@npm:^5.27.0, rc-util@npm:^5.27.1, rc-util@npm:^5.6.1, rc-util@npm:^5.9.4": version: 5.28.0 resolution: "rc-util@npm:5.28.0" dependencies: @@ -14956,6 +14981,19 @@ __metadata: languageName: node linkType: hard +"rc-util@npm:^5.28.0": + 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" From b8caea3d08cc91bb06d06964cf19d2f0247e0db9 Mon Sep 17 00:00:00 2001 From: Alexandr Buhlak <48954743+saha80@users.noreply.github.com> Date: Wed, 12 Jul 2023 16:58:06 +0300 Subject: [PATCH 35/81] refactor: type exports --- src/components/common/BaseCheckbox/BaseCheckbox.tsx | 4 ++-- src/components/common/BaseTable/BaseTable.tsx | 10 ++++++---- src/components/common/pickers/BaseDatePicker.tsx | 4 ++-- 3 files changed, 10 insertions(+), 8 deletions(-) diff --git a/src/components/common/BaseCheckbox/BaseCheckbox.tsx b/src/components/common/BaseCheckbox/BaseCheckbox.tsx index 7e2b3a907..b16b8877e 100644 --- a/src/components/common/BaseCheckbox/BaseCheckbox.tsx +++ b/src/components/common/BaseCheckbox/BaseCheckbox.tsx @@ -1,8 +1,8 @@ import React from 'react'; -import { CheckboxProps as BaseCheckboxProps } from 'antd'; +import { CheckboxProps } from 'antd'; import * as S from './BaseCheckbox.styles'; -export type { BaseCheckboxProps }; +export type BaseCheckboxProps = CheckboxProps; const Checkbox = React.forwardRef((props, ref) => { return ; diff --git a/src/components/common/BaseTable/BaseTable.tsx b/src/components/common/BaseTable/BaseTable.tsx index 7edf68215..592bb4a2e 100644 --- a/src/components/common/BaseTable/BaseTable.tsx +++ b/src/components/common/BaseTable/BaseTable.tsx @@ -1,10 +1,12 @@ -import { TableProps as BaseTableProps } from 'antd'; +import { TableProps } from 'antd'; import * as S from './BaseTable.styles'; -export type { BaseTableProps }; +// eslint-disable-next-line @typescript-eslint/no-explicit-any +type AnyRecord = Record; + +export type BaseTableProps = TableProps; // TODO make generic! -// eslint-disable-next-line @typescript-eslint/ban-types -export const BaseTable = (props: BaseTableProps): JSX.Element => { +export const BaseTable = (props: BaseTableProps): JSX.Element => { return ; }; diff --git a/src/components/common/pickers/BaseDatePicker.tsx b/src/components/common/pickers/BaseDatePicker.tsx index 9cce2e1ca..af66393d4 100644 --- a/src/components/common/pickers/BaseDatePicker.tsx +++ b/src/components/common/pickers/BaseDatePicker.tsx @@ -1,8 +1,8 @@ import React from 'react'; -import { DatePickerProps as BaseDatePickerProps } from 'antd'; +import { DatePickerProps } from 'antd'; import * as S from './BaseDatePicker.styled'; -export type { BaseDatePickerProps }; +export type BaseDatePickerProps = DatePickerProps; const DatePicker = React.forwardRef, BaseDatePickerProps>( ({ className, ...props }, ref) => , From 3e772682a89b33b7875cdd55b21190e6610a583b Mon Sep 17 00:00:00 2001 From: Alexandr Buhlak <48954743+saha80@users.noreply.github.com> Date: Wed, 12 Jul 2023 17:06:55 +0300 Subject: [PATCH 36/81] fix: form optional item color --- .../common/forms/components/BaseFormItem/BaseFormItem.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/common/forms/components/BaseFormItem/BaseFormItem.ts b/src/components/common/forms/components/BaseFormItem/BaseFormItem.ts index 86428ea95..6c957bd05 100644 --- a/src/components/common/forms/components/BaseFormItem/BaseFormItem.ts +++ b/src/components/common/forms/components/BaseFormItem/BaseFormItem.ts @@ -23,6 +23,10 @@ export const BaseFormItem = styled(Form.Item)` .ant-form-item-label > label { color: var(--primary-color); font-size: ${FONT_SIZE.xs}; + + .ant-form-item-optional { + color: var(--subtext-color); + } } .ant-input-group-addon:first-of-type { From 64634210e8c90c20272c18cd445e24569ebe536e Mon Sep 17 00:00:00 2001 From: Alexandr Buhlak <48954743+saha80@users.noreply.github.com> Date: Wed, 19 Jul 2023 10:43:37 +0300 Subject: [PATCH 37/81] chore: bump antd version --- package.json | 2 +- yarn.lock | 36 ++++++++++++++++++------------------ 2 files changed, 19 insertions(+), 19 deletions(-) diff --git a/package.json b/package.json index 0a8437998..477c83b76 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,7 @@ "@lit-labs/react": "^1.0.2", "@react-google-maps/api": "^2.18.1", "@reduxjs/toolkit": "^1.7.1", - "antd": "^5.7.0", + "antd": "^5.7.1", "antd-mask-input": "^2.0.7", "axios": "^0.24.0", "axios-mock-adapter": "^1.20.0", diff --git a/yarn.lock b/yarn.lock index c01afe369..31d9a3bb4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3976,9 +3976,9 @@ __metadata: languageName: node linkType: hard -"antd@npm:^5.7.0": - version: 5.7.0 - resolution: "antd@npm:5.7.0" +"antd@npm:^5.7.1": + version: 5.7.1 + resolution: "antd@npm:5.7.1" dependencies: "@ant-design/colors": ^7.0.0 "@ant-design/cssinjs": ^1.10.1 @@ -4001,9 +4001,9 @@ __metadata: rc-drawer: ~6.2.0 rc-dropdown: ~4.1.0 rc-field-form: ~1.34.0 - rc-image: ~7.0.0-2 + rc-image: ~7.0.0 rc-input: ~1.1.0 - rc-input-number: ~8.0.0 + rc-input-number: ~8.0.2 rc-mentions: ~2.5.0 rc-menu: ~9.10.0 rc-motion: ^2.7.3 @@ -4031,7 +4031,7 @@ __metadata: peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: 3915344b8ff92e2e789e4f34338ba62953cfc97a7be2eff420a91f8a6d03d5133c2b60419b4acd39e09faafa71f24281616834e4ab3527733bff3fc09efc0de9 + checksum: 03255dcf00b209725f1306ed32575d057f7f16c0a03d2311fcc07ed142427dbc077085a86139dec5b4dc4d760a50584c549cbd9c1530604e9b1405be0c0baa34 languageName: node linkType: hard @@ -11136,7 +11136,7 @@ __metadata: "@types/uuid": ^8.3.4 "@typescript-eslint/eslint-plugin": ^5.10.0 "@typescript-eslint/parser": ^5.8.0 - antd: ^5.7.0 + antd: ^5.7.1 antd-mask-input: ^2.0.7 axios: ^0.24.0 axios-mock-adapter: ^1.20.0 @@ -14514,26 +14514,26 @@ __metadata: languageName: node linkType: hard -"rc-image@npm:~7.0.0-2": - version: 7.0.0-2 - resolution: "rc-image@npm:7.0.0-2" +"rc-image@npm:~7.0.0": + version: 7.0.0 + resolution: "rc-image@npm:7.0.0" dependencies: "@babel/runtime": ^7.11.2 "@rc-component/portal": ^1.0.2 classnames: ^2.2.6 rc-dialog: ~9.1.0 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: 65c98bf90f3ce599a9b48ac70f4c4fce72f9e0865789d2796429f561fb0a6fe14a2fb668bbc7438771e1764d58ac165d8ea9d160c2d58cc1b78e5f5b021d2940 + checksum: e45be52d57481b290501d97dc8fe76a5541564e92a183c087956f09b39b0f4cd21aabad668e8df1ab3a263c009f7d02f91be333e4b153190b95d4dd6c5a08f44 languageName: node linkType: hard -"rc-input-number@npm:~8.0.0": - version: 8.0.1 - resolution: "rc-input-number@npm:8.0.1" +"rc-input-number@npm:~8.0.2": + version: 8.0.3 + resolution: "rc-input-number@npm:8.0.3" dependencies: "@babel/runtime": ^7.10.1 "@rc-component/mini-decimal": ^1.0.1 @@ -14543,7 +14543,7 @@ __metadata: peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: 841d77157dd1e11f355dc444f8cce72848d7a557a00291bbe3a6058c451d0af5c10597683362538e9e2eac090c528a6649edaae5fc6abed2523a8c0735afdc84 + checksum: d567919037db72dd2df04868ae909e1d74959e3956bded722931accefcdfa48d05946489dfd10e39f63599045cc89351108e7bbff869cc4415a53b6f06837d48 languageName: node linkType: hard @@ -14955,7 +14955,7 @@ __metadata: 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.20.1, rc-util@npm:^5.21.0, rc-util@npm:^5.21.2, rc-util@npm:^5.22.5, rc-util@npm:^5.24.4, rc-util@npm:^5.26.0, rc-util@npm:^5.27.0, rc-util@npm:^5.27.1, rc-util@npm:^5.6.1, rc-util@npm:^5.9.4": +"rc-util@npm:^5.0.1, 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.20.1, rc-util@npm:^5.21.0, rc-util@npm:^5.21.2, rc-util@npm:^5.22.5, rc-util@npm:^5.24.4, rc-util@npm:^5.26.0, rc-util@npm:^5.27.0, rc-util@npm:^5.27.1, rc-util@npm:^5.6.1, rc-util@npm:^5.9.4": version: 5.28.0 resolution: "rc-util@npm:5.28.0" dependencies: @@ -14981,7 +14981,7 @@ __metadata: languageName: node linkType: hard -"rc-util@npm:^5.28.0": +"rc-util@npm:^5.28.0, rc-util@npm:^5.34.1": version: 5.34.1 resolution: "rc-util@npm:5.34.1" dependencies: From 67681604b72d6d5c55baf606fd217f324d465dcb Mon Sep 17 00:00:00 2001 From: Alexandr Buhlak <48954743+saha80@users.noreply.github.com> Date: Wed, 19 Jul 2023 14:03:52 +0300 Subject: [PATCH 38/81] refactor(MaskedInput): preserve styles --- .../inputs/MaskedInput/MaskedInput.styles.ts | 20 +++++++++---------- .../common/inputs/MaskedInput/MaskedInput.tsx | 4 ++-- src/styles/themeConfig.tsx | 1 + 3 files changed, 13 insertions(+), 12 deletions(-) diff --git a/src/components/common/inputs/MaskedInput/MaskedInput.styles.ts b/src/components/common/inputs/MaskedInput/MaskedInput.styles.ts index a7bbcb13c..8f5206ede 100644 --- a/src/components/common/inputs/MaskedInput/MaskedInput.styles.ts +++ b/src/components/common/inputs/MaskedInput/MaskedInput.styles.ts @@ -1,17 +1,17 @@ import styled from 'styled-components'; import AntdMaskedInput from 'antd-mask-input'; +import { BORDER_RADIUS } from '@app/styles/themes/constants'; +// https://github.com/antoniopresto/antd-mask-input/issues/73 export const MaskedInput = styled(AntdMaskedInput)` - &.ant-input { - font-family: inherit; - color: var(--text-main-color); - background-color: var(--background-color); - padding: 11.4px 11px; - border: 1px solid var(--border-base-color); - border-radius: 7px; + font-family: inherit; + color: var(--text-main-color); + background-color: var(--background-color); + padding: 11.4px 11px; + border: 1px solid var(--border-base-color); + border-radius: ${BORDER_RADIUS}; - &::placeholder { - color: var(--input-placeholder-color); - } + &::placeholder { + color: var(--input-placeholder-color); } `; diff --git a/src/components/common/inputs/MaskedInput/MaskedInput.tsx b/src/components/common/inputs/MaskedInput/MaskedInput.tsx index ab4819c2c..73068c7a4 100644 --- a/src/components/common/inputs/MaskedInput/MaskedInput.tsx +++ b/src/components/common/inputs/MaskedInput/MaskedInput.tsx @@ -5,6 +5,6 @@ import * as S from './MaskedInput.styles'; export type MaskedInputProps = ComponentPropsWithRef; -export const MaskedInput = forwardRef((props) => { - return ; +export const MaskedInput = forwardRef((props, ref) => { + return ; }); diff --git a/src/styles/themeConfig.tsx b/src/styles/themeConfig.tsx index 50ee31374..7aa91447f 100644 --- a/src/styles/themeConfig.tsx +++ b/src/styles/themeConfig.tsx @@ -235,6 +235,7 @@ export const getThemeConfig = (theme: ThemeType): ThemeConfig => { colorPrimaryHover: antTheme.primary5, fontWeightStrong: parseNumber(FONT_WEIGHT.semibold), colorFillAlter, + controlOutlineWidth: 0, }, InputNumber: { colorPrimary: antTheme.primary5, From fbf548216dd31ad8a6bcf1140fc99dfc26a83a4f Mon Sep 17 00:00:00 2001 From: Alexandr Buhlak <48954743+saha80@users.noreply.github.com> Date: Wed, 19 Jul 2023 18:00:25 +0300 Subject: [PATCH 39/81] refactor(BaseButton): reduce duplicates within selectors --- .../common/BaseButton/BaseButton.styles.ts | 103 +++++++----------- .../common/BaseButton/BaseButton.tsx | 13 ++- 2 files changed, 51 insertions(+), 65 deletions(-) diff --git a/src/components/common/BaseButton/BaseButton.styles.ts b/src/components/common/BaseButton/BaseButton.styles.ts index 535f1d4a1..863d7ebd6 100644 --- a/src/components/common/BaseButton/BaseButton.styles.ts +++ b/src/components/common/BaseButton/BaseButton.styles.ts @@ -28,20 +28,19 @@ export const Button = styled(AntButton)` height: unset; `} - &[disabled], - &[disabled]:active, - &[disabled]:focus, - &[disabled]:hover { - color: var(--disabled-color); + &.ant-btn { + &:disabled { + color: var(--disabled-color); + cursor: not-allowed; /* todo: https://github.com/ant-design/ant-design/issues/43661 */ + } } &.ant-btn-dangerous { - &.ant-btn-primary { - box-shadow: none; - } - - &.ant-btn-text:not(:disabled):hover { - background-color: transparent; + &.ant-btn-text { + &:focus, + &:not(:disabled):hover { + background: rgba(0, 0, 0, 0.018); + } } } @@ -49,15 +48,26 @@ export const Button = styled(AntButton)` !props.danger && css` &.ant-btn-default, - &.ant-btn-dashed { + &.ant-btn-dashed, + &.ant-btn-ghost { &:focus { - background-color: var(--background-color); + color: var(--ant-primary-5); + border-color: var(--ant-primary-5); } + } - &:focus, + &.ant-btn-text, + &.ant-btn-ghost { &:not(:disabled):hover { - color: var(--ant-primary-5); - border-color: var(--ant-primary-5); + color: var(--secondary-color); + background-color: transparent; + } + } + + &.ant-btn-primary, + &.ant-btn-ghost { + &:not(:disabled):hover { + border-color: var(--secondary-color); } } @@ -65,11 +75,6 @@ export const Button = styled(AntButton)` &:focus { background-color: rgba(0, 0, 0, 0.018); } - - &:not(:disabled):hover { - background: transparent; - color: var(--secondary-color); - } } &.ant-btn-ghost { @@ -77,55 +82,29 @@ export const Button = styled(AntButton)` border-color: var(--primary-color); &:disabled { - cursor: not-allowed; - color: var(--disabled-color); border-color: var(--border-base-color); background-color: var(--disabled-bg-color); } - - &:focus { - color: var(--ant-primary-5); - border-color: var(--ant-primary-5); - } - - &:not(:disabled):hover { - color: var(--secondary-color); - border-color: var(--secondary-color); - } } - &.ant-btn-primary:not(:disabled) { - background: var(--primary-color); - + &.ant-btn-primary { &:focus { border-color: var(--ant-primary-5); - background: var(--ant-primary-5); + background-color: var(--ant-primary-5); } - &:hover { - background: var(--secondary-color); - - border-color: var(--secondary-color); + &:not(:disabled):hover { + background-color: var(--secondary-color); } } &.ant-btn-link { - color: var(--primary-color); - - &:disabled { - color: var(--disabled-color); - } - + &:not(:disabled):hover, &:focus { color: var(--ant-primary-5); } - &:not(:disabled):hover { - text-decoration: none; - color: var(--ant-primary-5); - } - - & span, + span, a { text-decoration: underline; } @@ -133,19 +112,17 @@ export const Button = styled(AntButton)` ${props.$severity && css` - background: rgba(${defineColorBySeverity(props.$severity, true)}, 0.2); - + background-color: rgba(${defineColorBySeverity(props.$severity, true)}, 0.2); border-color: ${defineColorBySeverity(props.$severity)}; - color: ${defineColorBySeverity(props.$severity)}; - &.ant-btn-default:focus, - &.ant-btn-default:not(:disabled):hover { - background: var(--background-color); - - border-color: rgba(${defineColorBySeverity(props.$severity, true)}, 0.9); - - color: rgba(${defineColorBySeverity(props.$severity, true)}, 0.9); + &.ant-btn-default { + &:focus, + &:not(:disabled):hover { + background-color: var(--background-color); + border-color: rgba(${defineColorBySeverity(props.$severity, true)}, 0.9); + color: rgba(${defineColorBySeverity(props.$severity, true)}, 0.9); + } } `} `} diff --git a/src/components/common/BaseButton/BaseButton.tsx b/src/components/common/BaseButton/BaseButton.tsx index 1b5c30f28..d8ca36f73 100644 --- a/src/components/common/BaseButton/BaseButton.tsx +++ b/src/components/common/BaseButton/BaseButton.tsx @@ -1,6 +1,8 @@ import React from 'react'; -import { ButtonProps as AntButtonProps, Button as AntdButton } from 'antd'; -import { Severity } from '@app/interfaces/interfaces'; +import { Button as AntdButton } from 'antd'; +import type { BaseButtonProps as AntButtonProps } from 'antd/es/button/button'; +import type { ButtonHTMLType } from 'antd/es/button'; +import type { Severity } from '@app/interfaces/interfaces'; import * as S from './BaseButton.styles'; export const { Group: ButtonGroup } = AntdButton; @@ -8,6 +10,13 @@ export const { Group: ButtonGroup } = AntdButton; export interface BaseButtonProps extends AntButtonProps { severity?: Severity; noStyle?: boolean; + + // todo: https://github.com/ant-design/ant-design/issues/43654 + + href?: string; + target?: React.HTMLAttributeAnchorTarget; + onClick?: React.MouseEventHandler; + htmlType?: ButtonHTMLType; } export const BaseButton = React.forwardRef( From 98f9189188fa02c96df39e79578fbe6124878adc Mon Sep 17 00:00:00 2001 From: Alexandr Buhlak <48954743+saha80@users.noreply.github.com> Date: Wed, 19 Jul 2023 22:26:18 +0300 Subject: [PATCH 40/81] refactor(BaseSelect): remove duplicate styles --- .../selects/BaseSelect/BaseSelect.styles.ts | 44 +++++-------------- src/styles/themeConfig.tsx | 7 +-- 2 files changed, 16 insertions(+), 35 deletions(-) diff --git a/src/components/common/selects/BaseSelect/BaseSelect.styles.ts b/src/components/common/selects/BaseSelect/BaseSelect.styles.ts index 96c200119..c48605e2b 100644 --- a/src/components/common/selects/BaseSelect/BaseSelect.styles.ts +++ b/src/components/common/selects/BaseSelect/BaseSelect.styles.ts @@ -12,57 +12,37 @@ export interface InternalSelectProps { export const Select = styled(AntSelect)` width: ${(props) => props.$width && normalizeProp(props.$width)}; - font-weight: ${FONT_WEIGHT.medium}; + .ant-select-item-option-selected:not(.ant-select-item-option-disabled) { + font-weight: ${FONT_WEIGHT.medium}; + } box-shadow: ${(props) => props.$shadow && 'var(--box-shadow)'}; &.ant-select-borderless { - background: var(--secondary-background-color); - + background: var(--secondary-background-color) !important; border-radius: ${BORDER_RADIUS}; } .ant-select-selection-placeholder { font-size: ${FONT_SIZE.xs}; - - color: var(--text-main-color); - } - - .ant-select-arrow { - color: var(--text-main-color); - } - - &.ant-select-disabled.ant-select:not(.ant-select-customize-input) .ant-select-selector { - color: var(--disabled-color); } - .ant-select-clear { - color: var(--disabled-color); + .ant-select-item { + min-height: unset; + padding-block: 5px; } - .ant-select-selection-item-remove { - color: var(--icon-color); - &:hover { - color: var(--icon-hover-color); + &.ant-select-multiple { + &.ant-select-disabled .ant-select-selection-item { + color: #bfbfbf; + border: 1px solid var(--border-base-color); } - } - - .ant-select-item-option-disabled { - color: var(--disabled-color); - } - &.ant-select-disabled.ant-select-multiple .ant-select-selection-item { - color: #bfbfbf; - background: var(--background-base-color); - border: 1px solid var(--border-base-color); - cursor: not-allowed; - } - - &.ant-select-multiple { .ant-select-selection-item { border: 1px solid #f0f0f0; margin-inline-end: 11px; } + .ant-select-selector { padding-inline-start: 11px; } diff --git a/src/styles/themeConfig.tsx b/src/styles/themeConfig.tsx index 7aa91447f..bb71cf802 100644 --- a/src/styles/themeConfig.tsx +++ b/src/styles/themeConfig.tsx @@ -41,6 +41,7 @@ export const getThemeConfig = (theme: ThemeType): ThemeConfig => { colorWarning: currentTheme.warning, boxShadow: currentTheme.boxShadow, colorTextHeading: currentTheme.heading, + colorTextDescription: currentTheme.subText, colorBgContainer: currentTheme.background, colorText: currentTheme.textMain, controlItemBgHover: currentTheme.itemHoverBg, @@ -147,9 +148,11 @@ export const getThemeConfig = (theme: ThemeType): ThemeConfig => { }, Select: { fontSizeSM: remToPixels(FONT_SIZE.xs), - lineWidth: 0.8, + colorTextTertiary: currentTheme.icon, + colorTextQuaternary: currentTheme.icon, colorFillSecondary: currentTheme.backgroundColorBase, colorIcon: currentTheme.icon, + colorIconHover: currentTheme.iconHover, colorPrimary: currentTheme.primary, colorPrimaryHover: antTheme.primary5, controlItemBgActive: antTheme.primary1, @@ -163,7 +166,6 @@ export const getThemeConfig = (theme: ThemeType): ThemeConfig => { controlHeightSM: remToPixels(HEIGHT.xxs), fontSizeHeading3: remToPixels(FONT_SIZE.xxl), colorPrimary: currentTheme.primary, - colorTextDescription: currentTheme.subText, }, Spin: { controlHeight: remToPixels(HEIGHT.xs), @@ -276,7 +278,6 @@ export const getThemeConfig = (theme: ThemeType): ThemeConfig => { Result: { fontSizeHeading3: remToPixels(FONT_SIZE.xxl), lineHeightHeading3: 1.8, - colorTextDescription: currentTheme.subText, }, Pagination: { wireframe: true, From e94649333ee222880a4a256b5fc64195e1c7c5de Mon Sep 17 00:00:00 2001 From: Alexandr Buhlak <48954743+saha80@users.noreply.github.com> Date: Wed, 19 Jul 2023 23:24:00 +0300 Subject: [PATCH 41/81] refactor(BaseAlert): move styles to themeConfig --- src/components/common/BaseAlert/BaseAlert.styles.ts | 6 ------ src/styles/themeConfig.tsx | 4 ++-- 2 files changed, 2 insertions(+), 8 deletions(-) diff --git a/src/components/common/BaseAlert/BaseAlert.styles.ts b/src/components/common/BaseAlert/BaseAlert.styles.ts index dadfeb66e..ceb832924 100644 --- a/src/components/common/BaseAlert/BaseAlert.styles.ts +++ b/src/components/common/BaseAlert/BaseAlert.styles.ts @@ -2,16 +2,10 @@ 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/styles/themeConfig.tsx b/src/styles/themeConfig.tsx index bb71cf802..dbddd8501 100644 --- a/src/styles/themeConfig.tsx +++ b/src/styles/themeConfig.tsx @@ -103,8 +103,8 @@ export const getThemeConfig = (theme: ThemeType): ThemeConfig => { }, Alert: { colorInfoBg: '#dfefff', - colorText: currentTheme.alertTextColor, - marginXS: 8, + colorText: BASE_COLORS.black, + colorTextHeading: BASE_COLORS.black, marginSM: 15, paddingContentVerticalSM: 8, paddingMD: 15, From c07fd95461ac2c089dd0e714670e08bce21f5fab Mon Sep 17 00:00:00 2001 From: Alexandr Buhlak <48954743+saha80@users.noreply.github.com> Date: Thu, 20 Jul 2023 00:15:10 +0300 Subject: [PATCH 42/81] refactor(BaseBadge): preserve styles --- .../common/BaseBadge/BaseBadge.styles.ts | 12 ++++++++---- src/components/common/BaseBadge/BaseBadge.tsx | 14 +++++++++----- src/styles/themeConfig.tsx | 2 +- 3 files changed, 18 insertions(+), 10 deletions(-) diff --git a/src/components/common/BaseBadge/BaseBadge.styles.ts b/src/components/common/BaseBadge/BaseBadge.styles.ts index 22a0ce707..e7311b7b6 100644 --- a/src/components/common/BaseBadge/BaseBadge.styles.ts +++ b/src/components/common/BaseBadge/BaseBadge.styles.ts @@ -2,15 +2,19 @@ import { defineColorBySeverity } from '@app/utils/utils'; import { Badge as AntBadge } from 'antd'; import styled from 'styled-components'; import { NotificationType } from '../BaseNotification/BaseNotification'; +import { FONT_SIZE } from '@app/styles/themes/constants'; interface BadgeProps { - severity?: NotificationType; + $severity?: NotificationType; } export const Badge = styled(AntBadge)` - color: inherit; + .ant-badge-count { + background: ${(props) => defineColorBySeverity(props.$severity)}; + font-size: ${FONT_SIZE.xs}; + } - & .ant-badge-count { - background: ${(props) => defineColorBySeverity(props.severity)}; + .ant-badge-count-sm { + font-size: ${FONT_SIZE.xs}; } `; diff --git a/src/components/common/BaseBadge/BaseBadge.tsx b/src/components/common/BaseBadge/BaseBadge.tsx index 449361b3f..de8f3a3e4 100644 --- a/src/components/common/BaseBadge/BaseBadge.tsx +++ b/src/components/common/BaseBadge/BaseBadge.tsx @@ -9,10 +9,14 @@ interface BaseBadgeInterface extends React.FC { Ribbon: typeof Badge.Ribbon; } -export const BaseBadge: BaseBadgeInterface = ({ status, children, count, ...props }) => ( - - {children} - -); +export const BaseBadge: BaseBadgeInterface = ({ status, children, count, ...props }) => { + const countSeverityStatus = count ? { count, $severity: mapBadgeStatus(status) } : { status }; + const transformedProps = status ? countSeverityStatus : { count }; + return ( + + {children} + + ); +}; BaseBadge.Ribbon = Badge.Ribbon; diff --git a/src/styles/themeConfig.tsx b/src/styles/themeConfig.tsx index dbddd8501..94c548231 100644 --- a/src/styles/themeConfig.tsx +++ b/src/styles/themeConfig.tsx @@ -256,7 +256,7 @@ export const getThemeConfig = (theme: ThemeType): ThemeConfig => { Badge: { colorPrimary: currentTheme.primary, colorTextPlaceholder: '#d9d9d9', - fontSizeSM: remToPixels(FONT_SIZE.xs), + fontSizeSM: remToPixels(FONT_SIZE.xxs), }, Button: { colorPrimary: currentTheme.primary, From 60dfc8285f123716d27a81467ee23205947c39a6 Mon Sep 17 00:00:00 2001 From: Alexandr Buhlak <48954743+saha80@users.noreply.github.com> Date: Thu, 20 Jul 2023 18:09:25 +0300 Subject: [PATCH 43/81] chore: bump antd version --- package.json | 2 +- yarn.lock | 20 ++++++++++---------- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/package.json b/package.json index 477c83b76..ab6ec5204 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,7 @@ "@lit-labs/react": "^1.0.2", "@react-google-maps/api": "^2.18.1", "@reduxjs/toolkit": "^1.7.1", - "antd": "^5.7.1", + "antd": "^5.7.2", "antd-mask-input": "^2.0.7", "axios": "^0.24.0", "axios-mock-adapter": "^1.20.0", diff --git a/yarn.lock b/yarn.lock index 31d9a3bb4..05073e6c3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3976,9 +3976,9 @@ __metadata: languageName: node linkType: hard -"antd@npm:^5.7.1": - version: 5.7.1 - resolution: "antd@npm:5.7.1" +"antd@npm:^5.7.2": + version: 5.7.2 + resolution: "antd@npm:5.7.2" dependencies: "@ant-design/colors": ^7.0.0 "@ant-design/cssinjs": ^1.10.1 @@ -4016,7 +4016,7 @@ __metadata: rc-segmented: ~2.2.0 rc-select: ~14.5.0 rc-slider: ~10.1.0 - rc-steps: ~6.0.0 + rc-steps: ~6.0.1 rc-switch: ~4.1.0 rc-table: ~7.32.1 rc-tabs: ~12.9.0 @@ -4031,7 +4031,7 @@ __metadata: peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: 03255dcf00b209725f1306ed32575d057f7f16c0a03d2311fcc07ed142427dbc077085a86139dec5b4dc4d760a50584c549cbd9c1530604e9b1405be0c0baa34 + checksum: 38565a6443bf9b801da8c5e9cbaae5b4856aee1e5948e3c0e6ef6948cd0eaaed0f0261724c22e73ec0fc21342585f6f986031bf16e406da847fe0aea69f9ff70 languageName: node linkType: hard @@ -11136,7 +11136,7 @@ __metadata: "@types/uuid": ^8.3.4 "@typescript-eslint/eslint-plugin": ^5.10.0 "@typescript-eslint/parser": ^5.8.0 - antd: ^5.7.1 + antd: ^5.7.2 antd-mask-input: ^2.0.7 axios: ^0.24.0 axios-mock-adapter: ^1.20.0 @@ -14801,9 +14801,9 @@ __metadata: languageName: node linkType: hard -"rc-steps@npm:~6.0.0": - version: 6.0.0 - resolution: "rc-steps@npm:6.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 @@ -14811,7 +14811,7 @@ __metadata: peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: 22cec1477fdd7c92e480d980c88ba8175e897e4dcd06c6c11fcdb8175ebede19b9367d8d62d1ee21ec5dfd9d8ab7724c3665582a51dde86c36ecdc810550bb1b + checksum: b75d6667df6b0c020dc13a595b5c1c9a739ec569242e600d5950f3a8240249b845ad715a3253e658fe02b0ac904a55a0603bb11702f262a3159835b269b9de75 languageName: node linkType: hard From 1270d30603e1d79a7ce7adee8d54c3cc5e22f36b Mon Sep 17 00:00:00 2001 From: Alexandr Buhlak <48954743+saha80@users.noreply.github.com> Date: Tue, 25 Jul 2023 10:45:36 +0300 Subject: [PATCH 44/81] refactor(BaseButton): update button type "ghost" --- .../common/BaseButton/BaseButton.styles.ts | 82 +++++++++---------- .../common/BaseButton/BaseButton.tsx | 11 +-- .../BaseButtonsGroup/BaseButtonsGroup.tsx | 2 +- .../HeaderFullscreen/HeaderFullscreen.tsx | 3 +- .../components/HeaderSearch/HeaderSearch.tsx | 3 +- .../NotificationsDropdown.tsx | 3 +- .../NotificationsOverlay.tsx | 2 +- .../searchDropdown/SearchDropdown.tsx | 3 +- .../settingsDropdown/SettingsDropdown.tsx | 2 +- .../TopUpBalanceButton.styles.ts | 2 +- .../TopUpBalanceButton/TopUpBalanceButton.tsx | 3 +- .../collection/TrendingCollection.styles.ts | 2 +- .../collection/TrendingCollection.tsx | 2 +- .../AddNewCardButton/AddNewCardButton.tsx | 2 +- .../tables/BasicTable/BasicTable.tsx | 2 +- .../tables/editableTable/EditableTable.tsx | 4 +- src/pages/uiComponentsPages/ButtonsPage.tsx | 12 +-- .../uiComponentsPages/feedback/AlertsPage.tsx | 2 +- src/styles/themeConfig.tsx | 1 + 19 files changed, 66 insertions(+), 77 deletions(-) diff --git a/src/components/common/BaseButton/BaseButton.styles.ts b/src/components/common/BaseButton/BaseButton.styles.ts index 863d7ebd6..e1cc39518 100644 --- a/src/components/common/BaseButton/BaseButton.styles.ts +++ b/src/components/common/BaseButton/BaseButton.styles.ts @@ -28,13 +28,6 @@ export const Button = styled(AntButton)` height: unset; `} - &.ant-btn { - &:disabled { - color: var(--disabled-color); - cursor: not-allowed; /* todo: https://github.com/ant-design/ant-design/issues/43661 */ - } - } - &.ant-btn-dangerous { &.ant-btn-text { &:focus, @@ -47,66 +40,65 @@ export const Button = styled(AntButton)` ${(props) => !props.danger && css` - &.ant-btn-default, - &.ant-btn-dashed, - &.ant-btn-ghost { - &:focus { - color: var(--ant-primary-5); - border-color: var(--ant-primary-5); + &.ant-btn-background-ghost { + color: var(--primary-color); + border-color: var(--primary-color); + + &:disabled { + background-color: var(--disabled-bg-color); } } - &.ant-btn-text, - &.ant-btn-ghost { - &:not(:disabled):hover { - color: var(--secondary-color); - background-color: transparent; + &.ant-btn-link { + span, + a { + text-decoration: underline; } } - &.ant-btn-primary, - &.ant-btn-ghost { - &:not(:disabled):hover { - border-color: var(--secondary-color); + &:focus, + &:not(:disabled):hover { + &.ant-btn-default, + &.ant-btn-dashed { + color: var(--ant-primary-5); + border-color: var(--ant-primary-5); } } - &.ant-btn-text { - &:focus { - background-color: rgba(0, 0, 0, 0.018); + &:focus { + &.ant-btn-link, + &.ant-btn-background-ghost { + color: var(--ant-primary-5); } - } - &.ant-btn-ghost { - color: var(--primary-color); - border-color: var(--primary-color); + &.ant-btn-text { + background-color: rgba(0, 0, 0, 0.018); + } - &:disabled { - border-color: var(--border-base-color); - background-color: var(--disabled-bg-color); + &.ant-btn-primary { + background-color: var(--ant-primary-5); } - } - &.ant-btn-primary { - &:focus { + &.ant-btn-primary, + &.ant-btn-background-ghost { border-color: var(--ant-primary-5); - background-color: var(--ant-primary-5); } + } - &:not(:disabled):hover { + &:not(:disabled):hover { + &.ant-btn-primary { background-color: var(--secondary-color); } - } - &.ant-btn-link { - &:not(:disabled):hover, - &:focus { - color: var(--ant-primary-5); + &.ant-btn-text, + &.ant-btn-background-ghost { + color: var(--secondary-color); + background-color: transparent; } - span, - a { - text-decoration: underline; + &.ant-btn-primary, + &.ant-btn-background-ghost { + border-color: var(--secondary-color); } } diff --git a/src/components/common/BaseButton/BaseButton.tsx b/src/components/common/BaseButton/BaseButton.tsx index d8ca36f73..423e7a949 100644 --- a/src/components/common/BaseButton/BaseButton.tsx +++ b/src/components/common/BaseButton/BaseButton.tsx @@ -1,7 +1,5 @@ import React from 'react'; -import { Button as AntdButton } from 'antd'; -import type { BaseButtonProps as AntButtonProps } from 'antd/es/button/button'; -import type { ButtonHTMLType } from 'antd/es/button'; +import { Button as AntdButton, ButtonProps as AntButtonProps } from 'antd'; import type { Severity } from '@app/interfaces/interfaces'; import * as S from './BaseButton.styles'; @@ -10,13 +8,6 @@ export const { Group: ButtonGroup } = AntdButton; export interface BaseButtonProps extends AntButtonProps { severity?: Severity; noStyle?: boolean; - - // todo: https://github.com/ant-design/ant-design/issues/43654 - - href?: string; - target?: React.HTMLAttributeAnchorTarget; - onClick?: React.MouseEventHandler; - htmlType?: ButtonHTMLType; } export const BaseButton = React.forwardRef( 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/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.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)} />} /> { > 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/searchDropdown/SearchDropdown.tsx b/src/components/header/components/searchDropdown/SearchDropdown.tsx index 4f138f968..560527287 100644 --- a/src/components/header/components/searchDropdown/SearchDropdown.tsx +++ b/src/components/header/components/searchDropdown/SearchDropdown.tsx @@ -49,7 +49,8 @@ export const SearchDropdown: React.FC = ({ filter={ } onClick={() => setFilterOpen(!isFilterOpen)} diff --git a/src/components/header/components/settingsDropdown/SettingsDropdown.tsx b/src/components/header/components/settingsDropdown/SettingsDropdown.tsx index 942f1e759..3f3a345a7 100644 --- a/src/components/header/components/settingsDropdown/SettingsDropdown.tsx +++ b/src/components/header/components/settingsDropdown/SettingsDropdown.tsx @@ -11,7 +11,7 @@ export const SettingsDropdown: React.FC = () => { return ( } trigger="click" afterOpenChange={setOpened}> - } /> + } /> ); 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 cdf60c4a3..bcc563207 100644 --- a/src/components/nft-dashboard/Balance/components/TopUpBalanceButton/TopUpBalanceButton.styles.ts +++ b/src/components/nft-dashboard/Balance/components/TopUpBalanceButton/TopUpBalanceButton.styles.ts @@ -2,7 +2,7 @@ import { BaseButton } from '@app/components/common/BaseButton/BaseButton'; import styled from 'styled-components'; export const TopUpButton = styled(BaseButton)` - &.ant-btn-ghost { + &.ant-btn-background-ghost { color: var(--text-secondary-color); } `; 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/trending-collections/collection/TrendingCollection.styles.ts b/src/components/nft-dashboard/trending-collections/collection/TrendingCollection.styles.ts index 76f8a7a48..1f47a4f5d 100644 --- a/src/components/nft-dashboard/trending-collections/collection/TrendingCollection.styles.ts +++ b/src/components/nft-dashboard/trending-collections/collection/TrendingCollection.styles.ts @@ -90,7 +90,7 @@ export const BidButton = styled(BaseButton)` right: 20px; padding: 10px 14px; - &.ant-btn-ghost { + &.ant-btn-background-ghost { color: var(--text-secondary-color); border-color: var(--text-secondary-color); } 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/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/tables/BasicTable/BasicTable.tsx b/src/components/tables/BasicTable/BasicTable.tsx index 7fb74a1d7..ae73b8eda 100644 --- a/src/components/tables/BasicTable/BasicTable.tsx +++ b/src/components/tables/BasicTable/BasicTable.tsx @@ -143,7 +143,7 @@ export const BasicTable: React.FC = () => { return ( { notification.info({ message: t('tables.inviteMessage', { name: record.name }) }); }} diff --git a/src/components/tables/editableTable/EditableTable.tsx b/src/components/tables/editableTable/EditableTable.tsx index d447fb87f..50d9fde3e 100644 --- a/src/components/tables/editableTable/EditableTable.tsx +++ b/src/components/tables/editableTable/EditableTable.tsx @@ -116,12 +116,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)}> 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/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/styles/themeConfig.tsx b/src/styles/themeConfig.tsx index 94c548231..2bcaf6ab4 100644 --- a/src/styles/themeConfig.tsx +++ b/src/styles/themeConfig.tsx @@ -260,6 +260,7 @@ export const getThemeConfig = (theme: ThemeType): ThemeConfig => { }, Button: { colorPrimary: currentTheme.primary, + colorLinkHover: antTheme.primary5, controlOutlineWidth: 0, }, Breadcrumb: { From 0aff01c655f5057c525e941dde8f59f53248a5b0 Mon Sep 17 00:00:00 2001 From: Alexandr Buhlak <48954743+saha80@users.noreply.github.com> Date: Tue, 25 Jul 2023 10:49:04 +0300 Subject: [PATCH 45/81] chore: bump antd version --- package.json | 2 +- yarn.lock | 52 ++++++++++++++++++++++++++++++++++------------------ 2 files changed, 35 insertions(+), 19 deletions(-) diff --git a/package.json b/package.json index ab6ec5204..ce885d180 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,7 @@ "@lit-labs/react": "^1.0.2", "@react-google-maps/api": "^2.18.1", "@reduxjs/toolkit": "^1.7.1", - "antd": "^5.7.2", + "antd": "^5.7.3", "antd-mask-input": "^2.0.7", "axios": "^0.24.0", "axios-mock-adapter": "^1.20.0", diff --git a/yarn.lock b/yarn.lock index 05073e6c3..64c097f6e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -24,21 +24,21 @@ __metadata: languageName: node linkType: hard -"@ant-design/cssinjs@npm:^1.10.1": - version: 1.10.1 - resolution: "@ant-design/cssinjs@npm:1.10.1" +"@ant-design/cssinjs@npm:^1.13.2": + version: 1.13.2 + resolution: "@ant-design/cssinjs@npm:1.13.2" 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.27.0 + rc-util: ^5.34.1 stylis: ^4.0.13 peerDependencies: react: ">=16.0.0" react-dom: ">=16.0.0" - checksum: ffaf1f8bc5bed4d05e91f5562c5a9a81c1892ae12c28e43100a8f1cd6e5d29617efacf83aa471dde8a4739f1a2c8b04281d1ecdb3d839e3b60ead5da2e461a39 + checksum: 630c30defcd713ab64ea9b2f2cd193d9f71eb7d55eef142a86e7a32214e613c2d5ded35dd859d0becb1f005868bb7ae496c18c80edbb6fb5df2f3fef7f9b6ba9 languageName: node linkType: hard @@ -2322,9 +2322,9 @@ __metadata: languageName: node linkType: hard -"@rc-component/tour@npm:~1.8.0": - version: 1.8.0 - resolution: "@rc-component/tour@npm:1.8.0" +"@rc-component/tour@npm:~1.8.1": + version: 1.8.1 + resolution: "@rc-component/tour@npm:1.8.1" dependencies: "@babel/runtime": ^7.18.0 "@rc-component/portal": ^1.0.0-9 @@ -2334,7 +2334,7 @@ __metadata: peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: 58fa0e23b84e581298c0d4f5e0ac3a30eddb6c101a9d3405a3189a20c787254b7f416ecff0e383ffded554ad93f8f732052623c6eaf59f5270f51bd0c4782058 + checksum: dd973de88edcd81c7ad65b9f99673274f9721335a078140872bb83d5dbdaf8abb8747b35ea8b960dbe1122d8e353540c91c7789e32413b8f8daca10065cb1692 languageName: node linkType: hard @@ -3976,19 +3976,19 @@ __metadata: languageName: node linkType: hard -"antd@npm:^5.7.2": - version: 5.7.2 - resolution: "antd@npm:5.7.2" +"antd@npm:^5.7.3": + version: 5.7.3 + resolution: "antd@npm:5.7.3" dependencies: "@ant-design/colors": ^7.0.0 - "@ant-design/cssinjs": ^1.10.1 + "@ant-design/cssinjs": ^1.13.2 "@ant-design/icons": ^5.1.0 "@ant-design/react-slick": ~1.0.0 "@babel/runtime": ^7.18.3 "@ctrl/tinycolor": ^3.6.0 "@rc-component/color-picker": ~1.4.0 "@rc-component/mutate-observer": ^1.0.0 - "@rc-component/tour": ~1.8.0 + "@rc-component/tour": ~1.8.1 "@rc-component/trigger": ^1.13.0 classnames: ^2.2.6 copy-to-clipboard: ^3.2.0 @@ -4020,7 +4020,7 @@ __metadata: rc-switch: ~4.1.0 rc-table: ~7.32.1 rc-tabs: ~12.9.0 - rc-textarea: ~1.3.2 + rc-textarea: ~1.3.3 rc-tooltip: ~6.0.0 rc-tree: ~5.7.6 rc-tree-select: ~5.9.0 @@ -4031,7 +4031,7 @@ __metadata: peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: 38565a6443bf9b801da8c5e9cbaae5b4856aee1e5948e3c0e6ef6948cd0eaaed0f0261724c22e73ec0fc21342585f6f986031bf16e406da847fe0aea69f9ff70 + checksum: ff77ddd1e90da3aa9c7c27174d1330756220ddc40d0f7d0941350ca8f8f6b3f4fa1f965435e9d3ceea03c2153398de04298803de7facac168b4f74c8094d9286 languageName: node linkType: hard @@ -11136,7 +11136,7 @@ __metadata: "@types/uuid": ^8.3.4 "@typescript-eslint/eslint-plugin": ^5.10.0 "@typescript-eslint/parser": ^5.8.0 - antd: ^5.7.2 + antd: ^5.7.3 antd-mask-input: ^2.0.7 axios: ^0.24.0 axios-mock-adapter: ^1.20.0 @@ -14863,7 +14863,7 @@ __metadata: languageName: node linkType: hard -"rc-textarea@npm:~1.3.0, rc-textarea@npm:~1.3.2": +"rc-textarea@npm:~1.3.0": version: 1.3.2 resolution: "rc-textarea@npm:1.3.2" dependencies: @@ -14879,6 +14879,22 @@ __metadata: languageName: node linkType: hard +"rc-textarea@npm:~1.3.3": + version: 1.3.3 + resolution: "rc-textarea@npm:1.3.3" + dependencies: + "@babel/runtime": ^7.10.1 + classnames: ^2.2.1 + rc-input: ~1.1.0 + rc-resize-observer: ^1.0.0 + rc-util: ^5.27.0 + peerDependencies: + react: ">=16.9.0" + react-dom: ">=16.9.0" + checksum: b91a691f63093195f63190258a705ce2464bb3ac22a81d6c4248b888044754e55efdbbe9c3d01bd4ae397731d21fb4ee8c7f07017719195b15dc3a655faea5b7 + languageName: node + linkType: hard + "rc-tooltip@npm:~6.0.0": version: 6.0.1 resolution: "rc-tooltip@npm:6.0.1" From f4fc7ce6f7b4c19aa9628f2168a4ea0141f4bff3 Mon Sep 17 00:00:00 2001 From: Alexandr Buhlak <48954743+saha80@users.noreply.github.com> Date: Tue, 25 Jul 2023 15:03:07 +0300 Subject: [PATCH 46/81] refactor(BaseCalendar): remove duplicate style --- src/components/common/BaseCalendar/BaseCalendar.styles.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/common/BaseCalendar/BaseCalendar.styles.ts b/src/components/common/BaseCalendar/BaseCalendar.styles.ts index cd2701ed3..4b4cefe8f 100644 --- a/src/components/common/BaseCalendar/BaseCalendar.styles.ts +++ b/src/components/common/BaseCalendar/BaseCalendar.styles.ts @@ -4,7 +4,6 @@ import { FONT_WEIGHT } from '@app/styles/themes/constants'; export const Calendar = styled(AntCalendar)` .ant-picker-cell-in-view .ant-picker-calendar-date-value { - color: var(--text-main-color); font-weight: ${FONT_WEIGHT.bold}; } `; From 6df4dc526ad477b4fbe1656d349ae1c9e030d1f2 Mon Sep 17 00:00:00 2001 From: Alexandr Buhlak <48954743+saha80@users.noreply.github.com> Date: Wed, 26 Jul 2023 10:10:52 +0300 Subject: [PATCH 47/81] refactor(BaseCard): decuple styles from BaseCol and BaseRow styles --- .../common/BaseCard/BaseCard.styles.ts | 29 +++++++------------ .../common/BaseCol/BaseCol.styles.ts | 6 ++++ src/components/common/BaseCol/BaseCol.tsx | 9 ++++-- .../common/BaseRow/BaseRow.styles.ts | 6 ++++ src/components/common/BaseRow/BaseRow.tsx | 9 ++++-- 5 files changed, 36 insertions(+), 23 deletions(-) create mode 100644 src/components/common/BaseCol/BaseCol.styles.ts create mode 100644 src/components/common/BaseRow/BaseRow.styles.ts diff --git a/src/components/common/BaseCard/BaseCard.styles.ts b/src/components/common/BaseCard/BaseCard.styles.ts index db4539752..ca1445513 100644 --- a/src/components/common/BaseCard/BaseCard.styles.ts +++ b/src/components/common/BaseCard/BaseCard.styles.ts @@ -14,22 +14,13 @@ export const Card = styled(AntCard)` ${(props) => props.$autoHeight && 'height: 100%'}; - box-shadow: var(--box-shadow); - .ant-card-head { - padding-top: 15px; - padding-bottom: 15px; - min-height: 36px; - border-bottom: 0; - font-weight: ${FONT_WEIGHT.bold}; - .ant-card-head-title { - white-space: unset; - overflow: unset; - padding-bottom: 0; - } + padding-top: 15px; + padding-bottom: 15px; + min-height: 36px; @media only screen and ${media.md} { padding-top: 20px; @@ -39,19 +30,19 @@ export const Card = styled(AntCard)` @media only screen and ${media.xl} { font-size: ${FONT_SIZE.xxl}; + } + + .ant-card-head-title { + white-space: unset; + overflow: unset; + padding-bottom: 0; - .ant-card-head-title { + @media only screen and ${media.xl} { padding-bottom: 0.25rem; } } } - @media only screen and ${media.xl} { - &.ant-card .ant-card-head .ant-card-head-wrapper .ant-card-head-title .ant-row .ant-col.ant-col-xs-24 { - font-size: ${FONT_SIZE.xxl}; - } - } - .ant-card-body { flex-grow: 1; 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/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) => ); From 651dc9015bca20a2756388b785e9e0b8e9acf5cc Mon Sep 17 00:00:00 2001 From: Alexandr Buhlak <48954743+saha80@users.noreply.github.com> Date: Wed, 26 Jul 2023 10:13:13 +0300 Subject: [PATCH 48/81] refactor(BaseProgress): decuple styles from other component styles --- .../common/BaseProgress/BaseProgress.styles.ts | 8 -------- src/components/common/BaseProgress/BaseProgress.tsx | 5 ++--- .../StatisticsCard/StatisticsCard.styles.ts | 9 +++++---- 3 files changed, 7 insertions(+), 15 deletions(-) delete mode 100644 src/components/common/BaseProgress/BaseProgress.styles.ts diff --git a/src/components/common/BaseProgress/BaseProgress.styles.ts b/src/components/common/BaseProgress/BaseProgress.styles.ts deleted file mode 100644 index fe9e1b95a..000000000 --- a/src/components/common/BaseProgress/BaseProgress.styles.ts +++ /dev/null @@ -1,8 +0,0 @@ -import styled from 'styled-components'; -import { Progress as AntProgress } from 'antd'; - -export const Progress = styled(AntProgress)` - .ant-progress-text .ant-typography { - line-height: inherit; - } -`; diff --git a/src/components/common/BaseProgress/BaseProgress.tsx b/src/components/common/BaseProgress/BaseProgress.tsx index a966a5041..080b2ca96 100644 --- a/src/components/common/BaseProgress/BaseProgress.tsx +++ b/src/components/common/BaseProgress/BaseProgress.tsx @@ -1,9 +1,8 @@ import React from 'react'; -import { ProgressProps } from 'antd'; -import * as S from './BaseProgress.styles'; +import { ProgressProps, Progress } from 'antd'; export type BaseProgressProps = ProgressProps; export const BaseProgress: React.FC = (props) => { - return ; + return ; }; 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 e542e5da8..ed0afb81f 100644 --- a/src/components/medical-dashboard/statisticsCards/statisticsCard/StatisticsCard/StatisticsCard.styles.ts +++ b/src/components/medical-dashboard/statisticsCards/statisticsCard/StatisticsCard/StatisticsCard.styles.ts @@ -17,12 +17,13 @@ export const Icon = styled(AntIcon)` `; export const StatisticCard = styled(DashboardCard)` - & .ant-col, - & .ant-space, - & .ant-space-item, - & .ant-typography { + .ant-col, + .ant-space, + .ant-space-item, + .ant-typography { line-height: 1; } + overflow: hidden; ${Text} { From 57f8a85f30ff738a8c66d6a75a751f6c9e25255a Mon Sep 17 00:00:00 2001 From: Alexandr Buhlak <48954743+saha80@users.noreply.github.com> Date: Thu, 27 Jul 2023 10:39:09 +0300 Subject: [PATCH 49/81] refactor(BasePagination): remove duplicate styles --- .../BasePagination/BasePagination.styles.ts | 92 +++++++++---------- .../common/BasePagination/BasePagination.tsx | 10 +- 2 files changed, 51 insertions(+), 51 deletions(-) diff --git a/src/components/common/BasePagination/BasePagination.styles.ts b/src/components/common/BasePagination/BasePagination.styles.ts index 744da4850..494349c01 100644 --- a/src/components/common/BasePagination/BasePagination.styles.ts +++ b/src/components/common/BasePagination/BasePagination.styles.ts @@ -1,64 +1,62 @@ -import styled from 'styled-components'; +import styled, { css } from 'styled-components'; import { Pagination as AntdPagination } from 'antd'; export const Pagination = styled(AntdPagination)` - .ant-pagination-item-container .ant-pagination-item-ellipsis { - color: var(--disabled-color); - } - - :not(.ant-pagination-disabled) { - .ant-pagination-item:focus-visible { - a { - color: var(--primary-color); + ${(props) => + !props.disabled && + css` + .ant-pagination-item:not(.ant-pagination-item-active) { + &:hover, + &:focus-visible { + a { + color: var(--primary-color); + } + } } - border-color: var(--primary-color); - } - .ant-pagination-prev, - .ant-pagination-next { - &:focus-visible { - .ant-pagination-item-link { - color: var(--primary-color); - border-color: var(--primary-color); + .ant-pagination-item-active:focus-visible { + a { + color: var(--ant-primary-5); } + + border-color: var(--ant-primary-5); } - } - } - &.ant-pagination-disabled { - .ant-pagination-jump-prev, - .ant-pagination-jump-next { - &:focus-visible, - &:hover { - .ant-pagination-item-link-icon { - opacity: 0; + &.ant-pagination-mini { + .ant-pagination-prev, + .ant-pagination-next { + &:not(.ant-pagination-disabled) { + &:hover, + &:focus-visible { + .ant-pagination-item-link { + color: var(--primary-color); + background-color: transparent; + } + } + } } - .ant-pagination-item-ellipsis { - opacity: 1; + + .ant-pagination-item:not(.ant-pagination-item-active):hover { + background-color: transparent; } } - } - } - .ant-pagination-disabled { - .ant-pagination-item-link, - .ant-pagination-item a { - color: var(--disabled-color); - } - } - - &.ant-pagination.ant-pagination-disabled { - .ant-pagination-item-link, - .ant-pagination-item a { - color: var(--disabled-color); - } - } + &:not(.ant-pagination-mini) { + .ant-pagination-prev, + .ant-pagination-next { + &:focus-visible .ant-pagination-item-link { + color: var(--primary-color); + border-color: var(--primary-color); + } + } - & .ant-select-arrow { - color: var(--disabled-color); - } + .ant-pagination-item:not(.ant-pagination-item-active):focus-visible { + border-color: var(--primary-color); + } + } + `} - .ant-select-disabled.ant-select:not(.ant-select-customize-input) .ant-select-selector { + .ant-select-arrow { color: var(--disabled-color); } `; diff --git a/src/components/common/BasePagination/BasePagination.tsx b/src/components/common/BasePagination/BasePagination.tsx index 78d0ff53c..484738ae9 100644 --- a/src/components/common/BasePagination/BasePagination.tsx +++ b/src/components/common/BasePagination/BasePagination.tsx @@ -1,8 +1,10 @@ -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 ; -}; +export const BasePagination: React.FC = (props) => ( + + + +); From 0dfdb0df97453541f31d2907b1e83f1cb21e30a5 Mon Sep 17 00:00:00 2001 From: Alexandr Buhlak <48954743+saha80@users.noreply.github.com> Date: Thu, 27 Jul 2023 15:27:03 +0300 Subject: [PATCH 50/81] refactor(BaseMenu): move styles to ThemeConfig --- .../common/BaseMenu/BaseMenu.styles.ts | 16 +++++ .../main/sider/SiderMenu/SiderMenu.styles.ts | 68 +------------------ src/styles/themeConfig.tsx | 6 +- 3 files changed, 23 insertions(+), 67 deletions(-) diff --git a/src/components/common/BaseMenu/BaseMenu.styles.ts b/src/components/common/BaseMenu/BaseMenu.styles.ts index 01680ecd1..8c99666fb 100644 --- a/src/components/common/BaseMenu/BaseMenu.styles.ts +++ b/src/components/common/BaseMenu/BaseMenu.styles.ts @@ -1,7 +1,23 @@ import styled from 'styled-components'; import { Menu as AntMenu } from 'antd'; +import { FONT_SIZE } from '@app/styles/themes/constants'; export const Menu = styled(AntMenu)` + &.ant-menu .ant-menu-item-icon { + font-size: ${FONT_SIZE.xl}; + width: 1.25rem; + } + + .ant-menu-item, + .ant-menu-submenu { + font-size: ${FONT_SIZE.xs}; + border-radius: 0; + } + + .ant-menu-item { + fill: currentColor; + } + .ant-menu-inline, .ant-menu-vertical { border-right: 0; diff --git a/src/components/layouts/main/sider/SiderMenu/SiderMenu.styles.ts b/src/components/layouts/main/sider/SiderMenu/SiderMenu.styles.ts index c02277a37..c63b82a19 100644 --- a/src/components/layouts/main/sider/SiderMenu/SiderMenu.styles.ts +++ b/src/components/layouts/main/sider/SiderMenu/SiderMenu.styles.ts @@ -1,78 +1,14 @@ 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; - a { width: 100%; display: block; } - .ant-menu-item, - .ant-menu-submenu { - font-size: ${FONT_SIZE.xs}; - border-radius: 0; - } - - &.ant-menu .ant-menu-item-icon { - font-size: ${FONT_SIZE.xl}; - 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-active, - .ant-menu-submenu-active .ant-menu-submenu-title { - background-color: transparent !important; + .ant-menu-item.ant-menu-item-selected::after { + border-color: var(--primary-color); } .ant-menu-item:not(:last-child), diff --git a/src/styles/themeConfig.tsx b/src/styles/themeConfig.tsx index 2bcaf6ab4..902f84ff7 100644 --- a/src/styles/themeConfig.tsx +++ b/src/styles/themeConfig.tsx @@ -190,8 +190,12 @@ export const getThemeConfig = (theme: ThemeType): ThemeConfig => { Menu: { controlHeightLG: remToPixels(HEIGHT.md), fontSize: remToPixels(FONT_SIZE.xs), - itemSelectedColor: currentTheme.primary, colorFillAlter: `rgba(${hexToRGB(antThemeObject['light'].primary6)}, 0.05)`, + colorBgContainer: 'unset', + controlItemBgActive: 'unset', + colorBgTextHover: 'transparent', + itemSelectedColor: currentTheme.textSiderPrimary, + colorText: currentTheme.textSiderSecondary, colorSplit: 'transparent', activeBarWidth: 2, marginXXS: 4, From a53d9df31df73394a777b73a6a9aae85531aebb9 Mon Sep 17 00:00:00 2001 From: Alexandr Buhlak <48954743+saha80@users.noreply.github.com> Date: Sat, 29 Jul 2023 22:21:24 +0300 Subject: [PATCH 51/81] refactor: move global styles to component styles --- src/controllers/notificationController.tsx | 105 ++++++++------------- src/styles/GlobalStyle.ts | 27 ------ src/styles/themeConfig.tsx | 1 + 3 files changed, 41 insertions(+), 92 deletions(-) diff --git a/src/controllers/notificationController.tsx b/src/controllers/notificationController.tsx index 453634fb2..c327b962a 100644 --- a/src/controllers/notificationController.tsx +++ b/src/controllers/notificationController.tsx @@ -1,7 +1,8 @@ -import type { NotificationInstance } from 'antd/es/notification/interface'; +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 { FONT_SIZE, FONT_WEIGHT } from '@app/styles/themes/constants'; +import { defineColorBySeverity } from '@app/utils/utils'; interface IconWrapperProps { $isOnlyTitle: boolean; @@ -12,7 +13,11 @@ const IconWrapper = styled.div` line-height: 2rem; `; -const Message = styled.div` +interface MessageProps extends IconWrapperProps { + $type: IconType; +} + +const Message = styled.div` display: flex; align-items: center; margin-bottom: -0.5rem; @@ -32,20 +37,8 @@ const Message = styled.div` margin-inline-start: 21px; `} - .ant-notification-notice.ant-notification-notice-success & { - color: var(--success-color); - } - - .ant-notification-notice.ant-notification-notice-info & { - color: var(--primary-color); - } - - .ant-notification-notice.ant-notification-notice-warning & { - color: var(--warning-color); - } - - .ant-notification-notice.ant-notification-notice-error & { - color: var(--error-color); + .ant-notification-notice.ant-notification-notice-${(props) => props.$type} & { + color: ${(props) => defineColorBySeverity(props.$type)}; } `; @@ -61,67 +54,49 @@ const EmptyDescription = styled.div` margin-top: -0.75rem; `; -type NotificationType = Pick; +type NotificationType = Pick; -const openSuccess = (notification: NotificationType): NotificationType['success'] => { - return ({ message, description, ...props }) => - notification.success({ - icon: ( - - - - ), - message: {message}, - description: description ? {description} : , - ...props, - }); -}; +type NotificationOpener = (props: Omit) => void; -const openInfo = (notification: NotificationType): NotificationType['info'] => { - return ({ message, description, ...props }) => - notification.info({ - icon: ( - - - - ), - message: {message}, - description: description ? {description} : , - ...props, - }); -}; +const Icons = { + success: CheckCircleFilled, + warning: ExclamationCircleFilled, + info: InfoCircleFilled, + error: StopFilled, +} as const; -const openWarning = (notification: NotificationType): NotificationType['warning'] => { - return ({ message, description, ...props }) => - notification.warning({ - icon: ( - - - - ), - message: {message}, - description: description ? {description} : , - ...props, - }); -}; +const open = (type: IconType, notification: NotificationType): NotificationOpener => { + const Icon = Icons[type]; + + const colorType = type === 'info' ? 'primary' : type; -const openError = (notification: NotificationType): NotificationType['error'] => { return ({ message, description, ...props }) => - notification.error({ + notification[type]({ icon: ( - + ), - message: {message}, + message: ( + + {message} + + ), description: description ? {description} : , + style: { + minHeight: '6rem', + padding: '2rem', + border: `1px solid ${defineColorBySeverity(type)}`, + background: `var(--notification-${colorType}-color)`, + }, ...props, + type, }); }; -export const notificationController = (notification: NotificationType): NotificationType => ({ - success: openSuccess(notification), - info: openInfo(notification), - warning: openWarning(notification), - error: openError(notification), +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/styles/GlobalStyle.ts b/src/styles/GlobalStyle.ts index d90e860cb..02a1ba4c8 100644 --- a/src/styles/GlobalStyle.ts +++ b/src/styles/GlobalStyle.ts @@ -36,31 +36,4 @@ export default styled.createGlobalStyle` color: var(--ant-primary-5); } } - - .ant-notification { - .ant-notification-notice { - min-height: 6rem; - padding: 2rem; - } - - .ant-notification-notice-success { - border: 1px solid var(--success-color); - background: var(--notification-success-color); - } - - .ant-notification-notice-info { - border: 1px solid var(--primary-color); - background: var(--notification-primary-color); - } - - .ant-notification-notice-warning { - border: 1px solid var(--warning-color); - background: var(--notification-warning-color); - } - - .ant-notification-notice-error { - border: 1px solid var(--error-color); - background: var(--notification-error-color); - } - } `; diff --git a/src/styles/themeConfig.tsx b/src/styles/themeConfig.tsx index 902f84ff7..78988517b 100644 --- a/src/styles/themeConfig.tsx +++ b/src/styles/themeConfig.tsx @@ -226,6 +226,7 @@ export const getThemeConfig = (theme: ThemeType): ThemeConfig => { colorInfo: currentTheme.primary, colorWarning: currentTheme.warning, colorError: currentTheme.error, + colorIconHover: 'rgba(0, 0, 0, 0.67)', fontSizeLG: remToPixels(FONT_SIZE.xxl), marginSM: 0, boxShadow: modalBoxShadow, From ac7cef3df957971c89aca7f8821c65593b0491aa Mon Sep 17 00:00:00 2001 From: Alexandr Buhlak <48954743+saha80@users.noreply.github.com> Date: Fri, 4 Aug 2023 13:35:44 +0300 Subject: [PATCH 52/81] chore: bump antd version --- package.json | 4 +- yarn.lock | 178 ++++++++++++++++++++++++--------------------------- 2 files changed, 86 insertions(+), 96 deletions(-) diff --git a/package.json b/package.json index ce885d180..d3e701221 100644 --- a/package.json +++ b/package.json @@ -11,12 +11,12 @@ "url": "https://github.com/altence/lightence-admin/issues" }, "dependencies": { - "@ant-design/icons": "^5.1.4", + "@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": "^5.7.3", + "antd": "^5.8.2", "antd-mask-input": "^2.0.7", "axios": "^0.24.0", "axios-mock-adapter": "^1.20.0", diff --git a/yarn.lock b/yarn.lock index 64c097f6e..e097100ec 100644 --- a/yarn.lock +++ b/yarn.lock @@ -24,60 +24,45 @@ __metadata: languageName: node linkType: hard -"@ant-design/cssinjs@npm:^1.13.2": - version: 1.13.2 - resolution: "@ant-design/cssinjs@npm:1.13.2" +"@ant-design/cssinjs@npm:^1.16.0": + version: 1.16.1 + resolution: "@ant-design/cssinjs@npm:1.16.1" 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.34.1 + rc-util: ^5.35.0 stylis: ^4.0.13 peerDependencies: react: ">=16.0.0" react-dom: ">=16.0.0" - checksum: 630c30defcd713ab64ea9b2f2cd193d9f71eb7d55eef142a86e7a32214e613c2d5ded35dd859d0becb1f005868bb7ae496c18c80edbb6fb5df2f3fef7f9b6ba9 + checksum: c69a52e9107d63c741d3f9260210e9d3f287d16c7cd944ca3444527aefc3aec146ff5c3c11fc6bc7771657f01ee90a993819717b11b31acb8b55919b60c812f4 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 - languageName: node - linkType: hard - -"@ant-design/icons@npm:^5.1.0": - version: 5.1.0 - resolution: "@ant-design/icons@npm:5.1.0" - dependencies: - "@ant-design/colors": ^7.0.0 - "@ant-design/icons-svg": ^4.2.1 - "@babel/runtime": ^7.11.2 - classnames: ^2.2.6 - rc-util: ^5.9.4 - peerDependencies: - react: ">=16.0.0" - react-dom: ">=16.0.0" - checksum: 977baf9940c91c0939e72b0defd9503463f910b24c0ab2c38b0ca5769bf219923a70a28e431364431d20c880b33f167a636d351af9b668372946584b0f6bb006 +"@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.1.4": - version: 5.1.4 - resolution: "@ant-design/icons@npm:5.1.4" +"@ant-design/icons@npm:^5.2.2, @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.2.1 + "@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: f74f27b526459e69354adbc9d222a99afcf5fd0074a97575df239fbe5d077de0de903afa612546f24c378c2e163e02e4e31cde575da4e84e597025f12c90984f + checksum: 6f2f2fa01ffcb4048b923d591f2136c753eabaa6b99fcbd28dc04a4cb9ef0759e7805a725907a15440aab6f965b2ea9f9970b48a986dc5b80c31d78587eeb66c languageName: node linkType: hard @@ -2356,9 +2341,9 @@ __metadata: languageName: node linkType: hard -"@rc-component/trigger@npm:^1.13.0": - version: 1.13.0 - resolution: "@rc-component/trigger@npm:1.13.0" +"@rc-component/trigger@npm:^1.15.0": + version: 1.15.1 + resolution: "@rc-component/trigger@npm:1.15.1" dependencies: "@babel/runtime": ^7.18.3 "@rc-component/portal": ^1.1.0 @@ -2366,11 +2351,11 @@ __metadata: rc-align: ^4.0.0 rc-motion: ^2.0.0 rc-resize-observer: ^1.3.1 - rc-util: ^5.29.2 + rc-util: ^5.33.0 peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: c7362a75c080ac0948a3a9f79d47b0e6b0e2dd01b91dfc8e45e599485852003dabd3bf03b569988c1274dd3bce81b576c7a082571c30596ec8561da9da7bd83d + checksum: 92275ea2aa9aa0aaa12a3a6d7d71cccee7d321bad3b89ec95c521037a645ccbc73e4deceb536fce2473c2141552f309613e9df824f15c34963e9b8b36b40e70b languageName: node linkType: hard @@ -3976,32 +3961,32 @@ __metadata: languageName: node linkType: hard -"antd@npm:^5.7.3": - version: 5.7.3 - resolution: "antd@npm:5.7.3" +"antd@npm:^5.8.2": + version: 5.8.2 + resolution: "antd@npm:5.8.2" dependencies: "@ant-design/colors": ^7.0.0 - "@ant-design/cssinjs": ^1.13.2 - "@ant-design/icons": ^5.1.0 + "@ant-design/cssinjs": ^1.16.0 + "@ant-design/icons": ^5.2.2 "@ant-design/react-slick": ~1.0.0 "@babel/runtime": ^7.18.3 "@ctrl/tinycolor": ^3.6.0 "@rc-component/color-picker": ~1.4.0 "@rc-component/mutate-observer": ^1.0.0 "@rc-component/tour": ~1.8.1 - "@rc-component/trigger": ^1.13.0 + "@rc-component/trigger": ^1.15.0 classnames: ^2.2.6 copy-to-clipboard: ^3.2.0 dayjs: ^1.11.1 qrcode.react: ^3.1.0 - rc-cascader: ~3.12.0 + rc-cascader: ~3.14.0 rc-checkbox: ~3.1.0 rc-collapse: ~3.7.0 rc-dialog: ~9.1.0 rc-drawer: ~6.2.0 rc-dropdown: ~4.1.0 - rc-field-form: ~1.34.0 - rc-image: ~7.0.0 + rc-field-form: ~1.36.0 + rc-image: ~7.1.0 rc-input: ~1.1.0 rc-input-number: ~8.0.2 rc-mentions: ~2.5.0 @@ -4009,12 +3994,12 @@ __metadata: rc-motion: ^2.7.3 rc-notification: ~5.0.4 rc-pagination: ~3.5.0 - rc-picker: ~3.10.0 + rc-picker: ~3.12.0 rc-progress: ~3.4.1 rc-rate: ~2.12.0 rc-resize-observer: ^1.2.0 rc-segmented: ~2.2.0 - rc-select: ~14.5.0 + rc-select: ~14.7.1 rc-slider: ~10.1.0 rc-steps: ~6.0.1 rc-switch: ~4.1.0 @@ -4023,7 +4008,7 @@ __metadata: rc-textarea: ~1.3.3 rc-tooltip: ~6.0.0 rc-tree: ~5.7.6 - rc-tree-select: ~5.9.0 + rc-tree-select: ~5.11.0 rc-upload: ~4.3.0 rc-util: ^5.32.0 scroll-into-view-if-needed: ^3.0.3 @@ -4031,7 +4016,7 @@ __metadata: peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: ff77ddd1e90da3aa9c7c27174d1330756220ddc40d0f7d0941350ca8f8f6b3f4fa1f965435e9d3ceea03c2153398de04298803de7facac168b4f74c8094d9286 + checksum: 3b6ba5199883cfce264494191edc847b1ad4c9b831fe68a3093013a20a808e508fa1df3353763e206778eb2aaf5b552b7e60a1481cfd0c7e883b4ba96f254a54 languageName: node linkType: hard @@ -11117,7 +11102,7 @@ __metadata: version: 0.0.0-use.local resolution: "lightence-admin@workspace:." dependencies: - "@ant-design/icons": ^5.1.4 + "@ant-design/icons": ^5.2.4 "@craco/craco": ^6.1.2 "@lit-labs/react": ^1.0.2 "@react-google-maps/api": ^2.18.1 @@ -11136,7 +11121,7 @@ __metadata: "@types/uuid": ^8.3.4 "@typescript-eslint/eslint-plugin": ^5.10.0 "@typescript-eslint/parser": ^5.8.0 - antd: ^5.7.3 + antd: ^5.8.2 antd-mask-input: ^2.0.7 axios: ^0.24.0 axios-mock-adapter: ^1.20.0 @@ -11352,6 +11337,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" @@ -14407,20 +14399,20 @@ __metadata: languageName: node linkType: hard -"rc-cascader@npm:~3.12.0": - version: 3.12.0 - resolution: "rc-cascader@npm:3.12.0" +"rc-cascader@npm:~3.14.0": + version: 3.14.1 + resolution: "rc-cascader@npm:3.14.1" dependencies: "@babel/runtime": ^7.12.5 array-tree-filter: ^2.1.0 classnames: ^2.3.1 - rc-select: ~14.5.0 + rc-select: ~14.7.0 rc-tree: ~5.7.0 - rc-util: ^5.6.1 + rc-util: ^5.35.0 peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: 30b356119f8ae389d9feedb3cfcef07fe55452e5b2819c7df8bfed7f998cbc762a2929fd2b0dd96df2007a5554adb5876df9d9a4303ad0f6c17192e0e072d96a + checksum: 4cd14a477028f18f7919423fc9e770887031330ec05c51fb9e1de465533cee5edb6e6b215ec695703c893e51e6642c7ca4823dc15efef7cf40dadca4c9104965 languageName: node linkType: hard @@ -14500,9 +14492,9 @@ __metadata: languageName: node linkType: hard -"rc-field-form@npm:~1.34.0": - version: 1.34.1 - resolution: "rc-field-form@npm:1.34.1" +"rc-field-form@npm:~1.36.0": + version: 1.36.1 + resolution: "rc-field-form@npm:1.36.1" dependencies: "@babel/runtime": ^7.18.0 async-validator: ^4.1.0 @@ -14510,13 +14502,13 @@ __metadata: peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: 30b8bbbcd99907062d93ab683a37c74c3b3dfa35bbc64425836aa8f9db35b5cf81a4f337a0c7b94469d01e3ed4bfa4f91ec2b729803ece62942f5632ba6161f1 + checksum: 9db818001ff93c22b80f34eb9dd37418767f401b75e9b8720389af55b0423d1d1a4a36c352519f0e1410dc964514be39aa5b915d344619c6ff3815e96f358288 languageName: node linkType: hard -"rc-image@npm:~7.0.0": - version: 7.0.0 - resolution: "rc-image@npm:7.0.0" +"rc-image@npm:~7.1.0": + version: 7.1.2 + resolution: "rc-image@npm:7.1.2" dependencies: "@babel/runtime": ^7.11.2 "@rc-component/portal": ^1.0.2 @@ -14527,7 +14519,7 @@ __metadata: peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: e45be52d57481b290501d97dc8fe76a5541564e92a183c087956f09b39b0f4cd21aabad668e8df1ab3a263c009f7d02f91be333e4b153190b95d4dd6c5a08f44 + checksum: c8b1647d24812ba0009552d91a09418557fa471c386f0e69e743d3d80945b0a776fde01e563e6956b687ecb4684574e311400af08efeed1bfeb005c140b7cd8e languageName: node linkType: hard @@ -14639,21 +14631,6 @@ __metadata: languageName: node linkType: hard -"rc-overflow@npm:^1.0.0": - version: 1.2.8 - resolution: "rc-overflow@npm:1.2.8" - dependencies: - "@babel/runtime": ^7.11.1 - classnames: ^2.2.1 - rc-resize-observer: ^1.0.0 - rc-util: ^5.19.2 - peerDependencies: - react: ">=16.9.0" - react-dom: ">=16.9.0" - checksum: f6df4d1f2baff7391b0ca981fe0f75aba975b1214dc15eba2ee07e4d0b02f19d89a7ac26d6da580cc90b758a8dc07fc69c7599297f38be91cb2d9b387816d3ce - languageName: node - linkType: hard - "rc-overflow@npm:^1.3.1": version: 1.3.1 resolution: "rc-overflow@npm:1.3.1" @@ -14683,9 +14660,9 @@ __metadata: languageName: node linkType: hard -"rc-picker@npm:~3.10.0": - version: 3.10.0 - resolution: "rc-picker@npm:3.10.0" +"rc-picker@npm:~3.12.0": + version: 3.12.0 + resolution: "rc-picker@npm:3.12.0" dependencies: "@babel/runtime": ^7.10.1 "@rc-component/trigger": ^1.5.0 @@ -14707,7 +14684,7 @@ __metadata: optional: true moment: optional: true - checksum: 908df48acfff11d62a64b11f12ceda10f424b3483ea2926ca25d5477609f0416559826ede78f2a0604682cc0e28a8c0ffdd98ee802746b1bee0f5b9890699df4 + checksum: 59659f928c008098e85bceec39dc263669345ad2fa8fada20ad0ce6e46c08f5c089fd668d090a51e06ac10960d43e23c32fe07bb32d1af2ca08af1473ec3aba8 languageName: node linkType: hard @@ -14769,21 +14746,21 @@ __metadata: languageName: node linkType: hard -"rc-select@npm:~14.5.0": - version: 14.5.0 - resolution: "rc-select@npm:14.5.0" +"rc-select@npm:~14.7.0, rc-select@npm:~14.7.1": + version: 14.7.3 + resolution: "rc-select@npm:14.7.3" 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-overflow: ^1.3.1 rc-util: ^5.16.1 rc-virtual-list: ^3.5.2 peerDependencies: react: "*" react-dom: "*" - checksum: 9e10ebf84eac1fc224e9fcc17ea0cec8d07db13cd760749a3b0e798ebcf85ed457a795bf37b157c7a60de4fb3139543fec96e80e5c1524938e2e840e551ea693 + checksum: b81c4b1adc903efc26eab1f85695846f77b4ab7afbd95754fa627e7f8f1390bc63a8e7cd3287c4aacb1565dd1a69d1dc1d3ec8ae3eb0788aa29618fafbd64b8d languageName: node linkType: hard @@ -14909,19 +14886,19 @@ __metadata: languageName: node linkType: hard -"rc-tree-select@npm:~5.9.0": - version: 5.9.0 - resolution: "rc-tree-select@npm:5.9.0" +"rc-tree-select@npm:~5.11.0": + version: 5.11.0 + resolution: "rc-tree-select@npm:5.11.0" dependencies: "@babel/runtime": ^7.10.1 classnames: 2.x - rc-select: ~14.5.0 + rc-select: ~14.7.0 rc-tree: ~5.7.0 rc-util: ^5.16.1 peerDependencies: react: "*" react-dom: "*" - checksum: 35114024de35c59b2b56df77aa5b1ad6d262ae6ac5a02b68a425af598420e98d08a12dfa64f68578d4293166032239647d5c03a9c089aef49b33b5cfc4be9306 + checksum: 97f1e977839542681028e2eafdb9381273610538d16595c50878152b348c6c58626c56821d92f2489cdea693a69e174e0e84b08ee0ac9c0785d1d5f22848e8ba languageName: node linkType: hard @@ -14971,7 +14948,7 @@ __metadata: languageName: node linkType: hard -"rc-util@npm:^5.0.1, 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.20.1, rc-util@npm:^5.21.0, rc-util@npm:^5.21.2, rc-util@npm:^5.22.5, rc-util@npm:^5.24.4, rc-util@npm:^5.26.0, rc-util@npm:^5.27.0, rc-util@npm:^5.27.1, rc-util@npm:^5.6.1, rc-util@npm:^5.9.4": +"rc-util@npm:^5.0.1, 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.20.1, rc-util@npm:^5.21.0, rc-util@npm:^5.21.2, rc-util@npm:^5.22.5, rc-util@npm:^5.24.4, rc-util@npm:^5.26.0, rc-util@npm:^5.27.0, rc-util@npm:^5.27.1": version: 5.28.0 resolution: "rc-util@npm:5.28.0" dependencies: @@ -15049,6 +15026,19 @@ __metadata: 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-virtual-list@npm:^3.4.8": version: 3.4.13 resolution: "rc-virtual-list@npm:3.4.13" From 81e99cb0810e7b1bcda109901573ce0f2d276845 Mon Sep 17 00:00:00 2001 From: Alexandr Buhlak <48954743+saha80@users.noreply.github.com> Date: Tue, 8 Aug 2023 15:37:59 +0300 Subject: [PATCH 53/81] fix: deprecations --- src/components/common/BaseTable/BaseTable.tsx | 2 +- src/components/forms/DynamicForm/DynamicForm.tsx | 2 -- .../NightTimeSlider/NightTimeSlider.tsx | 11 ++++++++--- src/hocs/withLoading.hoc.tsx | 2 +- src/pages/uiComponentsPages/forms/SelectsPage.tsx | 5 ++--- 5 files changed, 12 insertions(+), 10 deletions(-) diff --git a/src/components/common/BaseTable/BaseTable.tsx b/src/components/common/BaseTable/BaseTable.tsx index 592bb4a2e..0589c0ec5 100644 --- a/src/components/common/BaseTable/BaseTable.tsx +++ b/src/components/common/BaseTable/BaseTable.tsx @@ -7,6 +7,6 @@ type AnyRecord = Record; export type BaseTableProps = TableProps; // TODO make generic! -export const BaseTable = (props: BaseTableProps): JSX.Element => { +export const BaseTable = (props: BaseTableProps): React.JSX.Element => { return ; }; diff --git a/src/components/forms/DynamicForm/DynamicForm.tsx b/src/components/forms/DynamicForm/DynamicForm.tsx index 1fe49b2de..db45b2cf4 100644 --- a/src/components/forms/DynamicForm/DynamicForm.tsx +++ b/src/components/forms/DynamicForm/DynamicForm.tsx @@ -80,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') }]} > @@ -99,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/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/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/pages/uiComponentsPages/forms/SelectsPage.tsx b/src/pages/uiComponentsPages/forms/SelectsPage.tsx index f734e2142..4e6ecf10a 100644 --- a/src/pages/uiComponentsPages/forms/SelectsPage.tsx +++ b/src/pages/uiComponentsPages/forms/SelectsPage.tsx @@ -83,7 +83,7 @@ const SelectsPage: React.FC = () => { mode="multiple" allowClear width="100%" - showArrow={false} + suffixIcon={null} placeholder={t('selects.pleaseSelect')} defaultValue={['a10', 'c12']} > @@ -92,7 +92,7 @@ const SelectsPage: React.FC = () => { @@ -133,7 +133,6 @@ const SelectsPage: React.FC = () => { Date: Tue, 8 Aug 2023 16:11:16 +0300 Subject: [PATCH 54/81] fix(Form.Item): type definitions --- .../common/forms/components/BaseFormItem/BaseFormItem.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/common/forms/components/BaseFormItem/BaseFormItem.ts b/src/components/common/forms/components/BaseFormItem/BaseFormItem.ts index 6c957bd05..9bf6391bf 100644 --- a/src/components/common/forms/components/BaseFormItem/BaseFormItem.ts +++ b/src/components/common/forms/components/BaseFormItem/BaseFormItem.ts @@ -9,7 +9,7 @@ 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: 1rem; } From 037984acb841c7636692f87639323b0ccc9e5cca Mon Sep 17 00:00:00 2001 From: Alexandr Buhlak <48954743+saha80@users.noreply.github.com> Date: Tue, 8 Aug 2023 16:15:26 +0300 Subject: [PATCH 55/81] refactor(Select): preserve arrow color --- src/styles/themeConfig.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/themeConfig.tsx b/src/styles/themeConfig.tsx index 78988517b..8da02a25d 100644 --- a/src/styles/themeConfig.tsx +++ b/src/styles/themeConfig.tsx @@ -149,7 +149,7 @@ export const getThemeConfig = (theme: ThemeType): ThemeConfig => { Select: { fontSizeSM: remToPixels(FONT_SIZE.xs), colorTextTertiary: currentTheme.icon, - colorTextQuaternary: currentTheme.icon, + colorTextQuaternary: currentTheme.textMain, // arrow color colorFillSecondary: currentTheme.backgroundColorBase, colorIcon: currentTheme.icon, colorIconHover: currentTheme.iconHover, From 7cc2f7bad346b3312a7e2617646d71417a104556 Mon Sep 17 00:00:00 2001 From: Alexandr Buhlak <48954743+saha80@users.noreply.github.com> Date: Wed, 30 Aug 2023 11:17:02 +0300 Subject: [PATCH 56/81] refactor(TreeTable): remove deprecated TableRowSelection props --- src/components/tables/TreeTable/TreeTable.tsx | 35 ++++++++----------- .../tables/editableTable/EditableTable.tsx | 3 +- 2 files changed, 17 insertions(+), 21 deletions(-) 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 50d9fde3e..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, @@ -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; } From 832a74dd42d9c247a83dd86da8b4410f7f4f7641 Mon Sep 17 00:00:00 2001 From: Alexandr Buhlak <48954743+saha80@users.noreply.github.com> Date: Thu, 14 Sep 2023 12:52:03 +0300 Subject: [PATCH 57/81] fix(#267): types annotations --- src/components/common/BaseCalendar/BaseCalendar.tsx | 7 +++---- src/components/common/BaseTable/BaseTable.styles.ts | 2 +- src/components/common/BaseTable/BaseTable.tsx | 9 ++++----- src/components/common/forms/BaseForm/BaseForm.tsx | 9 ++++----- .../BloodScreeningTable/BloodScreeningTable.styles.ts | 2 +- 5 files changed, 13 insertions(+), 16 deletions(-) diff --git a/src/components/common/BaseCalendar/BaseCalendar.tsx b/src/components/common/BaseCalendar/BaseCalendar.tsx index 63bf8964b..4d38f36dc 100644 --- a/src/components/common/BaseCalendar/BaseCalendar.tsx +++ b/src/components/common/BaseCalendar/BaseCalendar.tsx @@ -1,9 +1,8 @@ -import { FC } from 'react'; -import type { CalendarProps } from 'antd'; -import type { Dayjs } from 'dayjs'; +import { ComponentProps, FC } from 'react'; +import type { Calendar } from 'antd'; import * as S from './BaseCalendar.styles'; -export type BaseCalendarProps = CalendarProps; +export type BaseCalendarProps = ComponentProps; export const BaseCalendar: FC = (props) => { return ; diff --git a/src/components/common/BaseTable/BaseTable.styles.ts b/src/components/common/BaseTable/BaseTable.styles.ts index 91c66f489..efc86a5e9 100644 --- a/src/components/common/BaseTable/BaseTable.styles.ts +++ b/src/components/common/BaseTable/BaseTable.styles.ts @@ -85,4 +85,4 @@ export const Table = styled(AntdTable)` color: var(--disabled-color); } } -` as typeof AntdTable; +`; diff --git a/src/components/common/BaseTable/BaseTable.tsx b/src/components/common/BaseTable/BaseTable.tsx index 0589c0ec5..a9c9eb854 100644 --- a/src/components/common/BaseTable/BaseTable.tsx +++ b/src/components/common/BaseTable/BaseTable.tsx @@ -1,12 +1,11 @@ -import { TableProps } from 'antd'; +import type { ComponentProps, FC } from 'react'; +import { Table } from 'antd'; import * as S from './BaseTable.styles'; // eslint-disable-next-line @typescript-eslint/no-explicit-any -type AnyRecord = Record; - -export type BaseTableProps = TableProps; +export type BaseTableProps = ComponentProps>; // TODO make generic! -export const BaseTable = (props: BaseTableProps): React.JSX.Element => { +export const BaseTable: FC = (props) => { return ; }; diff --git a/src/components/common/forms/BaseForm/BaseForm.tsx b/src/components/common/forms/BaseForm/BaseForm.tsx index 41e4eab80..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 { 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; @@ -24,7 +23,7 @@ export const BaseForm: BaseFormInterface = ({ onFinishFailed, lay const { t } = useTranslation(); const { notification } = useFeedback(); - const onFinishFailedDefault = (error: ValidateErrorEntity) => { + const onFinishFailedDefault: typeof onFinishFailed = (error) => { notification.error({ message: t('common.error'), description: error.errorFields[0].errors, diff --git a/src/components/medical-dashboard/bloodScreeningCard/BloodScreeningTable/BloodScreeningTable.styles.ts b/src/components/medical-dashboard/bloodScreeningCard/BloodScreeningTable/BloodScreeningTable.styles.ts index 38a389a25..18f05b9cd 100644 --- a/src/components/medical-dashboard/bloodScreeningCard/BloodScreeningTable/BloodScreeningTable.styles.ts +++ b/src/components/medical-dashboard/bloodScreeningCard/BloodScreeningTable/BloodScreeningTable.styles.ts @@ -27,7 +27,7 @@ export const Table = styled(BaseTable)` border: 0; cursor: pointer; } -` as typeof BaseTable; // todo: remove type assertion +`; export const Text = styled.span` color: var(--text-main-color); From 5edec65cec07d5d06b658851d73d9b6ac9edf6de Mon Sep 17 00:00:00 2001 From: Alexandr Buhlak <48954743+saha80@users.noreply.github.com> Date: Thu, 14 Sep 2023 17:14:02 +0300 Subject: [PATCH 58/81] chore(#267): unclear inline style --- src/components/common/BaseFeed/BaseFeed.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/common/BaseFeed/BaseFeed.tsx b/src/components/common/BaseFeed/BaseFeed.tsx index fd23c7607..e46a1e2a6 100644 --- a/src/components/common/BaseFeed/BaseFeed.tsx +++ b/src/components/common/BaseFeed/BaseFeed.tsx @@ -22,7 +22,7 @@ export const BaseFeed: React.FC = ({ next, hasMore, target = 'mai } scrollableTarget={target} - style={{ overflow: 'visible' }} + style={{ overflow: undefined }} // workaround for https://github.com/ankeetmaini/react-infinite-scroll-component/issues/228 > {children} From b497034926be56219eb64a0c5f334a3435933106 Mon Sep 17 00:00:00 2001 From: Alexandr Buhlak <48954743+saha80@users.noreply.github.com> Date: Mon, 18 Sep 2023 16:00:28 +0300 Subject: [PATCH 59/81] refactor(#267): replace CSS variables with styled-components theme variables --- src/App.tsx | 10 +- src/components/Error/Error.styles.ts | 30 +- .../newsFeed/NewsFilter/NewsFilter.styles.ts | 60 +-- .../apps/newsFeed/NewsFilter/NewsFilter.tsx | 2 +- src/components/apps/newsFeed/Validator.ts | 2 +- .../ForgotPasswordForm.styles.ts | 20 +- .../auth/LockForm/LockForm.styles.ts | 48 +-- .../auth/LoginForm/LoginForm.styles.ts | 24 +- .../NewPasswordForm/NewPasswordForm.styles.ts | 20 +- .../SecurityCodeForm.styles.ts | 22 +- .../GradientStackedAreaChart.tsx | 43 +-- .../common/BaseAlert/BaseAlert.styles.ts | 12 - .../common/BaseAlert/BaseAlert.styles.tsx | 33 ++ .../common/BaseArticle/BaseArticle.styles.ts | 45 ++- .../common/BaseBadge/BaseBadge.styles.ts | 20 - .../common/BaseBadge/BaseBadge.styles.tsx | 36 ++ .../BaseBreadcrumb/BaseBreadcrumb.styles.tsx | 24 +- .../common/BaseButton/BaseButton.styles.ts | 41 +- .../common/BaseButton/BaseButton.tsx | 8 +- .../BaseCalendar/BaseCalendar.styles.ts | 9 - .../BaseCalendar/BaseCalendar.styles.tsx | 24 ++ .../common/BaseCard/BaseCard.styles.ts | 55 --- .../common/BaseCard/BaseCard.styles.tsx | 75 ++++ .../CarouselArrow/CarouselArrow.styles.ts | 4 +- .../BaseCheckbox/BaseCheckbox.styles.ts | 14 +- .../common/BaseCollapse/BaseCollapse.tsx | 8 +- .../common/BaseDivider/BaseDivider.styles.tsx | 16 + .../common/BaseDivider/BaseDivider.tsx | 10 +- .../BaseDropdown/BaseDropdown.styles.tsx | 4 + .../common/BaseDropdown/BaseDropdown.tsx | 10 + .../common/BaseDropdown/Dropdown.tsx | 10 - .../common/BaseEmpty/BaseEmpty.styles.tsx | 20 + src/components/common/BaseEmpty/BaseEmpty.tsx | 10 +- .../common/BaseFeed/BaseFeed.styles.ts | 6 +- .../common/BaseHashTag/BaseHashTag.styles.ts | 5 +- .../common/BaseHashTag/BaseHashTag.tsx | 6 +- .../common/BaseMenu/BaseMenu.styles.ts | 25 -- .../common/BaseMenu/BaseMenu.styles.tsx | 53 +++ src/components/common/BaseMenu/BaseMenu.tsx | 5 +- .../BaseNotification.styles.ts | 26 +- .../BasePagination/BasePagination.styles.ts | 62 ---- .../BasePagination/BasePagination.styles.tsx | 81 ++++ .../BasePopconfirm/BasePopconfirm.styles.tsx | 20 + .../common/BasePopconfirm/BasePopconfirm.tsx | 10 +- .../common/BasePopover/BasePopover.styles.tsx | 18 + .../common/BasePopover/BasePopover.tsx | 10 +- .../BaseProgress/BaseProgress.styles.tsx | 20 + .../common/BaseProgress/BaseProgress.tsx | 6 +- .../common/BaseRadio/BaseRadio.styles.ts | 16 +- .../common/BaseRate/BaseRate.styles.ts | 7 - .../common/BaseRate/BaseRate.styles.tsx | 19 + .../common/BaseResult/BaseResult.styles.ts | 8 - .../common/BaseResult/BaseResult.styles.tsx | 25 ++ .../common/BaseSlider/BaseSlider.styles.ts | 16 - .../common/BaseSlider/BaseSlider.styles.tsx | 42 +++ .../common/BaseSpin/BaseSpin.styles.tsx | 22 ++ src/components/common/BaseSpin/BaseSpin.tsx | 10 +- .../common/BaseSteps/BaseSteps.styles.ts | 60 --- .../common/BaseSteps/BaseSteps.styles.tsx | 85 +++++ .../common/BaseSwitch/BaseSwitch.styles.ts | 13 - .../common/BaseSwitch/BaseSwitch.styles.tsx | 34 ++ ...seTable.styles.ts => BaseTable.styles.tsx} | 51 ++- src/components/common/BaseTable/BaseTable.tsx | 5 +- .../common/BaseTabs/BaseTabs.styles.ts | 17 - .../common/BaseTabs/BaseTabs.styles.tsx | 36 ++ .../CalendarSwitch/CalendarSwitch.styles.ts | 8 +- .../common/CountryMap/CountryMap.tsx | 3 +- .../DoctorProfile/DoctorProfile.styles.ts | 10 +- .../MoonSunSwitch/MoonSunSwitch.styles.ts | 15 +- .../common/References/References.styles.ts | 8 +- src/components/common/charts/BaseChart.tsx | 9 +- .../common/charts/Legend/Legend.styles.ts | 27 +- src/components/common/charts/PieChart.tsx | 12 +- .../components/BaseFormItem/BaseFormItem.ts | 33 +- .../components/BaseFormTitle/BaseFormTitle.ts | 4 +- .../inputs/BaseInput/BaseInput.styles.ts | 21 +- .../inputs/InputNumber/InputNumber.styles.ts | 10 - .../inputs/InputNumber/InputNumber.styles.tsx | 33 ++ .../common/inputs/InputNumber/InputNumber.tsx | 4 +- .../InputPassword/InputPassword.styles.ts | 5 +- .../inputs/MaskedInput/MaskedInput.styles.ts | 15 +- .../common/inputs/MaskedInput/MaskedInput.tsx | 4 +- .../inputs/SearchInput/SearchInput.styles.ts | 21 +- .../inputs/SuffixInput/SuffixInput.styles.ts | 9 +- .../VerificationCodeInput.styles.ts | 20 +- ...er.styled.tsx => BaseDatePicker.styles.ts} | 0 .../common/pickers/BaseDatePicker.tsx | 2 +- .../selects/BaseSelect/BaseSelect.styles.ts | 16 +- .../forms/ControlForm/ControlForm.styles.ts | 17 +- .../forms/ControlForm/ControlForm.tsx | 4 +- .../forms/StepForm/StepForm.styles.ts | 13 +- src/components/header/Header.styles.ts | 25 +- .../GithubButton/GitHubButton.styles.ts | 10 +- .../HeaderSearch/HeaderSearch.styles.ts | 8 +- .../NotificationsOverlay.styles.ts | 4 +- .../ProfileDropdown/ProfileDropdown.styles.ts | 12 +- .../ProfileOverlay/ProfileOverlay.styles.ts | 4 +- .../searchDropdown/SearchDropdown.styles.ts | 8 +- .../SearchFilter/SearchFilter.styles.ts | 4 +- .../SearchResults/SearchResults.styles.ts | 9 +- .../NightTimeSlider/NightTimeSlider.styles.ts | 18 +- .../layouts/AuthLayout/AuthLayout.styles.ts | 68 ++-- .../layouts/main/MainContent/MainContent.tsx | 7 +- .../main/MainHeader/MainHeader.styles.ts | 9 +- .../main/MainLayout/MainLayout.styles.ts | 6 +- .../layouts/main/MainLayout/MainLayout.tsx | 4 +- .../main/sider/MainSider/MainSider.styles.ts | 37 +- .../main/sider/MainSider/MainSider.tsx | 4 +- .../main/sider/SiderMenu/SiderMenu.styles.ts | 2 +- .../HealthCard/HealthCard.tsx | 3 +- .../PatientResultsCard.styles.ts | 38 +- .../activityCard/ActivityCard.tsx | 12 +- .../BloodScreeningCard.styles.ts | 9 +- .../BloodScreeningChart.tsx | 4 +- .../BloodScreeningTable.styles.ts | 15 +- .../DoctorCard/DoctorCard.styles.ts | 45 ++- .../FavoritesDoctorsCard.styles.ts | 2 +- .../FavoritesDoctorsCard.tsx | 9 +- .../mapCard/DoctorsMap/DoctorsMap.styles.ts | 25 +- .../ScreeningsCard/ScreeningsCard.styles.ts | 4 +- .../DesktopScreenings.styles.ts | 6 +- .../MobileScreenings/MobileScreenings.tsx | 6 +- .../ScreeningsFriend.styles.ts | 31 +- .../ScreeningsFriends.styles.ts | 16 +- .../StatisticsCard/StatisticsCard.styles.ts | 2 +- .../StatisticsInfo/StatisticsInfo.styles.ts | 18 +- .../StatisticsProgress.styles.ts | 9 +- .../TreatmentCalendar.styles.ts | 43 +-- .../treatmentCard/TreatmentCard.tsx | 34 +- .../TreatmentDoctor/TreatmentDoctor.styles.ts | 10 +- .../TreatmentNotFound.styles.ts | 2 +- .../TreatmentNotFound/TreatmentNotFound.tsx | 2 +- .../treatmentCard/TreatmentPanel.tsx | 2 +- .../nft-dashboard/Balance/Balance.styles.ts | 18 +- .../TopUpBalanceButton.styles.ts | 2 +- .../TopUpBalanceForm.styles.ts | 5 +- .../TopUpPaymentCard.styles.ts | 2 +- .../activityStory/ActivityStory.styles.ts | 7 +- .../ActivityStoryItem.styles.ts | 24 +- .../common/NFTCard/NFTCard.styles.ts | 4 +- .../NFTCardHeader/NFTCardHeader.styles.ts | 11 +- .../common/ViewAll/ViewAll.styles.ts | 10 +- .../RecentActivityItem.styles.ts | 36 +- .../RecentActivityFilter.styles.ts | 15 +- .../recently-added/RecentlyAddedNft.styles.ts | 5 +- .../recently-added/nft-card/NftCard.styles.ts | 66 ++-- .../totalEarning/TotalEarning.styles.ts | 20 +- .../TrendingCollections.styles.ts | 5 +- .../collection/TrendingCollection.styles.ts | 49 +-- .../TrendingCreators.styles.ts | 11 +- .../story/TrendingCreatorsStory.styles.ts | 2 +- src/components/profile/ProfileLayout.tsx | 28 +- .../ProfileInfo/ProfileInfo.styles.ts | 32 +- .../ProfileNav/ProfileNav.styles.ts | 8 +- .../PhoneItem/PhoneItem.styles.ts | 10 +- .../PasswordForm/PasswordForm.styles.ts | 6 +- .../TwoFactorOptions.styles.ts | 8 +- .../CheckboxColumn/CheckboxColumn.styles.ts | 19 +- .../Notifications/Notifications.styles.ts | 4 +- .../paymentHistory/Payment/Payment.styles.ts | 9 +- .../paymentHistory/Payment/Payment.tsx | 8 +- .../PaymentHistory/PaymentHistory.styles.ts | 8 +- .../PaymentsTable/PaymentsTable.styles.ts | 7 +- .../PaymentsTable/PaymentsTable.tsx | 10 +- .../paymentHistory/Status/Status.styles.ts | 4 +- .../ActionButtons/ActionButtons.styles.ts | 3 +- .../PaymentCard/PaymentCard.styles.ts | 2 +- .../CardThemeItem/CardThemeItem.styles.ts | 27 +- .../tables/BasicTable/BasicTable.tsx | 8 +- src/controllers/modalController.tsx | 55 ++- src/controllers/notificationController.tsx | 21 +- src/hooks/useResponsive.ts | 18 +- .../DashboardPages/DashboardPage.styles.ts | 7 +- .../ReactSimpleMapsPage.tsx | 20 +- src/pages/uiComponentsPages/DropdownsPage.tsx | 2 +- .../UIComponentsPage.styles.ts | 10 +- .../dataDisplay/AvatarsPage.tsx | 15 +- .../feedback/ProgressPage.tsx | 45 ++- .../feedback/ResultsPage.tsx | 6 +- .../feedback/SkeletonsPage.tsx | 6 +- .../uiComponentsPages/forms/UploadsPage.tsx | 11 +- .../modals/PopconfirmsPage.tsx | 11 +- .../uiComponentsPages/modals/PopoversPage.tsx | 14 +- src/styles/GlobalStyle.ts | 32 +- src/styles/resetCss.ts | 4 +- src/styles/themeConfig.tsx | 350 +++++------------- src/styles/themes/constants.ts | 45 +-- src/styles/themes/dark/darkTheme.ts | 170 +++++---- src/styles/themes/light/lightTheme.ts | 168 +++++---- src/styles/themes/themeVariables.ts | 132 +------ src/styles/themes/types.ts | 88 +++-- src/utils/utils.ts | 52 ++- 192 files changed, 2166 insertions(+), 2106 deletions(-) delete mode 100644 src/components/common/BaseAlert/BaseAlert.styles.ts create mode 100644 src/components/common/BaseAlert/BaseAlert.styles.tsx delete mode 100644 src/components/common/BaseBadge/BaseBadge.styles.ts create mode 100644 src/components/common/BaseBadge/BaseBadge.styles.tsx delete mode 100644 src/components/common/BaseCalendar/BaseCalendar.styles.ts create mode 100644 src/components/common/BaseCalendar/BaseCalendar.styles.tsx delete mode 100644 src/components/common/BaseCard/BaseCard.styles.ts create mode 100644 src/components/common/BaseCard/BaseCard.styles.tsx create mode 100644 src/components/common/BaseDivider/BaseDivider.styles.tsx create mode 100644 src/components/common/BaseDropdown/BaseDropdown.styles.tsx create mode 100644 src/components/common/BaseDropdown/BaseDropdown.tsx delete mode 100644 src/components/common/BaseDropdown/Dropdown.tsx create mode 100644 src/components/common/BaseEmpty/BaseEmpty.styles.tsx delete mode 100644 src/components/common/BaseMenu/BaseMenu.styles.ts create mode 100644 src/components/common/BaseMenu/BaseMenu.styles.tsx delete mode 100644 src/components/common/BasePagination/BasePagination.styles.ts create mode 100644 src/components/common/BasePagination/BasePagination.styles.tsx create mode 100644 src/components/common/BasePopconfirm/BasePopconfirm.styles.tsx create mode 100644 src/components/common/BasePopover/BasePopover.styles.tsx create mode 100644 src/components/common/BaseProgress/BaseProgress.styles.tsx delete mode 100644 src/components/common/BaseRate/BaseRate.styles.ts create mode 100644 src/components/common/BaseRate/BaseRate.styles.tsx delete mode 100644 src/components/common/BaseResult/BaseResult.styles.ts create mode 100644 src/components/common/BaseResult/BaseResult.styles.tsx delete mode 100644 src/components/common/BaseSlider/BaseSlider.styles.ts create mode 100644 src/components/common/BaseSlider/BaseSlider.styles.tsx create mode 100644 src/components/common/BaseSpin/BaseSpin.styles.tsx delete mode 100644 src/components/common/BaseSteps/BaseSteps.styles.ts create mode 100644 src/components/common/BaseSteps/BaseSteps.styles.tsx delete mode 100644 src/components/common/BaseSwitch/BaseSwitch.styles.ts create mode 100644 src/components/common/BaseSwitch/BaseSwitch.styles.tsx rename src/components/common/BaseTable/{BaseTable.styles.ts => BaseTable.styles.tsx} (51%) delete mode 100644 src/components/common/BaseTabs/BaseTabs.styles.ts create mode 100644 src/components/common/BaseTabs/BaseTabs.styles.tsx delete mode 100644 src/components/common/inputs/InputNumber/InputNumber.styles.ts create mode 100644 src/components/common/inputs/InputNumber/InputNumber.styles.tsx rename src/components/common/pickers/{BaseDatePicker.styled.tsx => BaseDatePicker.styles.ts} (100%) diff --git a/src/App.tsx b/src/App.tsx index 8b9f676e0..2d9f1eaa8 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { ConfigProvider, App as FeedbackProvider } from 'antd'; import { HelmetProvider } from 'react-helmet-async'; +import { ThemeProvider } from 'styled-components'; import deDe from 'antd/lib/locale/de_DE'; import enUS from 'antd/lib/locale/en_US'; import GlobalStyle from './styles/GlobalStyle'; @@ -18,6 +19,7 @@ import { getThemeConfig } from './styles/themeConfig'; const App: React.FC = () => { const { language } = useLanguage(); const theme = useAppSelector((state) => state.theme.theme); + const currentTheme = themeObject[theme]; usePWA(); @@ -26,17 +28,17 @@ const App: React.FC = () => { useThemeWatcher(); return ( - <> - + + - + - + ); }; diff --git a/src/components/Error/Error.styles.ts b/src/components/Error/Error.styles.ts index f306616d7..0d4255260 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, FONT_WEIGHT, HEIGHT, media } from '@app/styles/themes/constants'; +import { media } from '@app/utils/utils'; import { BaseImage } from '../common/BaseImage/BaseImage'; import { BaseTypography } from '../common/BaseTypography/BaseTypography'; @@ -8,15 +8,14 @@ export const Wrapper = styled.div` flex-direction: column; align-items: center; padding: 3.75rem 1.25rem; - border-radius: ${BORDER_RADIUS}; + border-radius: ${({ theme }) => theme.borderRadius}; + background-color: ${({ theme }) => theme.background}; - background-color: var(--background-color); - - @media only screen and ${media.md} { + @media only screen and (${media('md')}) { padding: 2.5rem 6.25rem 6.25rem; } - @media only screen and ${media.xl} { + @media only screen and (${media('xl')}) { flex-direction: row-reverse; justify-content: center; padding: 12.5rem 3.5rem; @@ -26,7 +25,7 @@ export const Wrapper = styled.div` export const Image = styled(BaseImage)` margin-bottom: 4rem; - @media only screen and ${media.xxl} { + @media only screen and (${media('xxl')}) { margin-bottom: 0; } `; @@ -36,7 +35,7 @@ export const ContentWrapper = styled.div` flex-direction: column; align-items: center; - @media only screen and ${media.xl} { + @media only screen and (${media('xl')}) { margin-right: 7.5rem; } `; @@ -45,15 +44,14 @@ export const Title = styled(BaseTypography.Text)` font-size: 2.25rem; font-weight: 600; margin-bottom: 1rem; + color: ${({ theme }) => theme.textMain}; - color: var(--text-main-color); - - @media only screen and ${media.md} { + @media only screen and (${media('md')}) { font-size: 3rem; margin-bottom: 1.75rem; } - @media only screen and ${media.xl} { + @media only screen and (${media('xl')}) { font-size: 4rem; margin-bottom: 2.25rem; } @@ -63,19 +61,19 @@ export const Text = styled(Title)` font-size: 0.875rem; margin-bottom: 1.25rem; - @media only screen and ${media.md} { + @media only screen and (${media('md')}) { font-size: 1.12rem; margin-bottom: 1.45rem; } - @media only screen and ${media.xl} { + @media only screen and (${media('xl')}) { font-size: 1.5rem; margin-bottom: 1.8rem; } `; export const Link = styled(BaseTypography.Link)` - font-weight: ${FONT_WEIGHT.semibold}; - line-height: ${HEIGHT.md}; + font-weight: ${({ theme }) => theme.fontWeights.semibold}; + line-height: ${({ theme }) => theme.heights.md}; padding-inline: 15px; `; diff --git a/src/components/apps/newsFeed/NewsFilter/NewsFilter.styles.ts b/src/components/apps/newsFeed/NewsFilter/NewsFilter.styles.ts index 1a81b3a40..4c843b8e1 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 { BaseDatePicker } from '@app/components/common/pickers/BaseDatePicker'; -import { BORDER_RADIUS, BREAKPOINTS, FONT_SIZE, FONT_WEIGHT, media } from '@app/styles/themes/constants'; import { BasePopover } from '@app/components/common/BasePopover/BasePopover'; import { BaseInput } from '@app/components/common/inputs/BaseInput/BaseInput'; import { BaseButton } from '@app/components/common/BaseButton/BaseButton'; import { BaseCheckbox } from '@app/components/common/BaseCheckbox/BaseCheckbox'; +import { media } from '@app/utils/utils'; export const AddTagText = styled.span` - color: var(--text-main-color); - font-size: ${FONT_SIZE.md}; - font-weight: ${FONT_WEIGHT.semibold}; + color: ${({ theme }) => theme.textMain}; + font-size: ${({ theme }) => theme.fontSizes.md}; + font-weight: ${({ theme }) => theme.fontWeights.semibold}; line-height: 1.375rem; `; @@ -26,10 +26,10 @@ export const FilterButton = styled.div` display: flex; justify-content: center; align-items: center; - background: var(--background-color); - border-radius: ${BORDER_RADIUS}; - font-size: ${FONT_SIZE.xs}; - font-weight: ${FONT_WEIGHT.semibold}; + background: ${({ theme }) => theme.background}; + border-radius: ${({ theme }) => theme.borderRadius}; + font-size: ${({ theme }) => theme.fontSizes.xs}; + font-weight: ${({ theme }) => theme.fontWeights.semibold}; line-height: 1.25rem; `; @@ -42,7 +42,7 @@ export const DateLabel = styled.div` width: 50%; line-height: 1.25rem; margin-bottom: 0.4375rem; - font-size: ${FONT_SIZE.xs}; + font-size: ${({ theme }) => theme.fontSizes.xs}; `; export const AddTagWrapper = styled.div` @@ -65,7 +65,7 @@ export const BtnWrapper = styled.div` `; export const PlusIcon = styled(PlusCircleFilled)` - color: var(--lightgrey); + color: ${({ theme }) => theme.lightgray}; font-size: 1.5625rem; margin-right: 1rem; `; @@ -81,7 +81,7 @@ export const InputWrapper = styled.div` display: flex; height: 3.125rem; border-radius: 3.125rem; - background: var(--secondary-background-color); + background: ${({ theme }) => theme.secondaryBackground}; margin-bottom: 1.25rem; position: relative; `; @@ -98,19 +98,19 @@ export const TitleHeader = styled.div` margin-bottom: 1.25rem; box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.07); cursor: pointer; - background-color: var(--background-color); - border-radius: ${BORDER_RADIUS}; + background-color: ${({ theme }) => theme.background}; + border-radius: ${({ theme }) => theme.borderRadius}; `; export const Input = styled(BaseInput)` height: 3.125rem; border: none; - background: var(--secondary-background-color); + background: ${({ theme }) => theme.secondaryBackground}; border-radius: 3.125rem; padding-left: 3rem; - color: var(--text-main-color); - font-size: ${FONT_SIZE.md}; - font-weight: ${FONT_WEIGHT.semibold}; + color: ${({ theme }) => theme.textMain}; + font-size: ${({ theme }) => theme.fontSizes.md}; + font-weight: ${({ theme }) => theme.fontWeights.semibold}; line-height: 1.375rem; `; @@ -119,15 +119,15 @@ export const RangePicker = styled(BaseDatePicker.RangePicker)` margin-bottom: 0.875rem; &.ant-picker .ant-picker-input input { - color: var(--text-main-color); - font-size: ${FONT_SIZE.xs}; - font-weight: ${FONT_WEIGHT.semibold}; + color: ${({ theme }) => theme.textMain}; + font-size: ${({ theme }) => theme.fontSizes.xs}; + font-weight: ${({ theme }) => theme.fontWeights.semibold}; } `; export const PanelWrapper = styled.div` .ant-picker-panels { - @media only screen and ${media.xs} and (max-width: ${BREAKPOINTS.md - 0.02}px) { + @media only screen and (${media('xs')}) and (max-width: ${({ theme }) => theme.breakpoints.md - 0.02}px) { display: flex; flex-direction: column; } @@ -142,11 +142,11 @@ export const Btn = styled(BaseButton)` export const NewsWrapper = styled.div` max-width: 35rem; - @media only screen and ${media.xs} { + @media only screen and (${media('xs')}) { width: 100%; } - @media only screen and ${media.md} { + @media only screen and (${media('md')}) { width: calc(100% - 21.25rem); } `; @@ -156,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}; + background: ${({ theme }) => theme.background}; + border-radius: ${({ theme }) => theme.borderRadius}; } `; @@ -171,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; `; @@ -199,7 +199,7 @@ export const ClosePopoverWrapper = styled.div` `; export const ClosePopover = styled(CloseOutlined)` - color: var(--primary-color); + color: ${({ theme }) => theme.primary}; width: 0.875rem; height: 0.875rem; `; diff --git a/src/components/apps/newsFeed/NewsFilter/NewsFilter.tsx b/src/components/apps/newsFeed/NewsFilter/NewsFilter.tsx index 6cc88173a..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[]; 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/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/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/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/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/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/common/BaseAlert/BaseAlert.styles.ts b/src/components/common/BaseAlert/BaseAlert.styles.ts deleted file mode 100644 index ceb832924..000000000 --- a/src/components/common/BaseAlert/BaseAlert.styles.ts +++ /dev/null @@ -1,12 +0,0 @@ -import styled from 'styled-components'; -import { Alert as AntAlert } from 'antd'; - -export const Alert = styled(AntAlert)` - &.ant-alert { - padding-inline: 15px; - } - - .ant-alert-action { - margin-inline-start: 8px; - } -`; diff --git a/src/components/common/BaseAlert/BaseAlert.styles.tsx b/src/components/common/BaseAlert/BaseAlert.styles.tsx new file mode 100644 index 000000000..8ac7603ae --- /dev/null +++ b/src/components/common/BaseAlert/BaseAlert.styles.tsx @@ -0,0 +1,33 @@ +import styled, { useTheme } from 'styled-components'; +import { Alert as AntAlert, ConfigProvider } from 'antd'; + +export const Alert = styled((props: React.ComponentProps) => { + const theme = useTheme(); + return ( + + + + ); +})` + &.ant-alert { + padding-inline: 15px; + } + + .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..7ddbed430 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,34 @@ 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,39 +57,38 @@ 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} { + @media only screen and (${media('xxl')}) { font-size: 1rem; } `; diff --git a/src/components/common/BaseBadge/BaseBadge.styles.ts b/src/components/common/BaseBadge/BaseBadge.styles.ts deleted file mode 100644 index e7311b7b6..000000000 --- a/src/components/common/BaseBadge/BaseBadge.styles.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { defineColorBySeverity } from '@app/utils/utils'; -import { Badge as AntBadge } from 'antd'; -import styled from 'styled-components'; -import { NotificationType } from '../BaseNotification/BaseNotification'; -import { FONT_SIZE } from '@app/styles/themes/constants'; - -interface BadgeProps { - $severity?: NotificationType; -} - -export const Badge = styled(AntBadge)` - .ant-badge-count { - background: ${(props) => defineColorBySeverity(props.$severity)}; - font-size: ${FONT_SIZE.xs}; - } - - .ant-badge-count-sm { - font-size: ${FONT_SIZE.xs}; - } -`; diff --git a/src/components/common/BaseBadge/BaseBadge.styles.tsx b/src/components/common/BaseBadge/BaseBadge.styles.tsx new file mode 100644 index 000000000..c98885bab --- /dev/null +++ b/src/components/common/BaseBadge/BaseBadge.styles.tsx @@ -0,0 +1,36 @@ +import { colorTypeFrom, remToPixels } from '@app/utils/utils'; +import { Badge as AntBadge, ConfigProvider } from 'antd'; +import styled, { useTheme } from 'styled-components'; +import { NotificationType } from '../BaseNotification/BaseNotification'; + +interface BadgeProps { + $severity?: NotificationType; +} + +export const Badge = styled((props: React.ComponentProps) => { + const theme = useTheme(); + return ( + + + + ); +})` + .ant-badge-count { + background: ${({ $severity, theme }) => theme[colorTypeFrom($severity)]}; + font-size: ${({ theme }) => theme.fontSizes.xs}; + } + + .ant-badge-count-sm { + font-size: ${({ theme }) => theme.fontSizes.xs}; + } +`; diff --git a/src/components/common/BaseBreadcrumb/BaseBreadcrumb.styles.tsx b/src/components/common/BaseBreadcrumb/BaseBreadcrumb.styles.tsx index 7d4f97d1b..535f03db6 100644 --- a/src/components/common/BaseBreadcrumb/BaseBreadcrumb.styles.tsx +++ b/src/components/common/BaseBreadcrumb/BaseBreadcrumb.styles.tsx @@ -1,11 +1,27 @@ -import styled from 'styled-components'; -import { Breadcrumb as AntBreadcrumb } from 'antd'; +import styled, { useTheme } from 'styled-components'; +import { Breadcrumb as AntBreadcrumb, ConfigProvider } from 'antd'; -export const Breadcrumb = styled(AntBreadcrumb)` +export const Breadcrumb = styled((props: React.ComponentProps) => { + const theme = useTheme(); + return ( + + + + ); +})` &.ant-breadcrumb { li:last-child { .ant-breadcrumb-link { - color: var(--text-main-color); + color: ${({ theme }) => theme.textMain}; } } } diff --git a/src/components/common/BaseButton/BaseButton.styles.ts b/src/components/common/BaseButton/BaseButton.styles.ts index e1cc39518..6f25c8cbd 100644 --- a/src/components/common/BaseButton/BaseButton.styles.ts +++ b/src/components/common/BaseButton/BaseButton.styles.ts @@ -1,8 +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 { FONT_WEIGHT } from '@app/styles/themes/constants'; +import { colorTypeFrom } from '@app/utils/utils'; interface BtnProps { $severity?: Severity; @@ -14,10 +13,8 @@ export const Button = styled(AntButton)` align-items: center; justify-content: center; gap: 0.3rem; - transition-duration: 0.3s; - - font-weight: ${FONT_WEIGHT.semibold}; + font-weight: ${({ theme }) => theme.fontWeights.semibold}; box-shadow: none; ${(props) => @@ -41,11 +38,11 @@ export const Button = styled(AntButton)` !props.danger && css` &.ant-btn-background-ghost { - color: var(--primary-color); - border-color: var(--primary-color); + color: ${({ theme }) => theme.primary}; + border-color: ${({ theme }) => theme.primary}; &:disabled { - background-color: var(--disabled-bg-color); + background-color: ${({ theme }) => theme.disabledBg}; } } @@ -60,15 +57,15 @@ export const Button = styled(AntButton)` &:not(:disabled):hover { &.ant-btn-default, &.ant-btn-dashed { - color: var(--ant-primary-5); - border-color: var(--ant-primary-5); + color: ${({ theme }) => theme.primary5}; + border-color: ${({ theme }) => theme.primary5}; } } &:focus { &.ant-btn-link, &.ant-btn-background-ghost { - color: var(--ant-primary-5); + color: ${({ theme }) => theme.primary5}; } &.ant-btn-text { @@ -76,44 +73,44 @@ export const Button = styled(AntButton)` } &.ant-btn-primary { - background-color: var(--ant-primary-5); + background-color: ${({ theme }) => theme.primary5}; } &.ant-btn-primary, &.ant-btn-background-ghost { - border-color: var(--ant-primary-5); + border-color: ${({ theme }) => theme.primary5}; } } &:not(:disabled):hover { &.ant-btn-primary { - background-color: var(--secondary-color); + background-color: ${({ theme }) => theme.secondary}; } &.ant-btn-text, &.ant-btn-background-ghost { - color: var(--secondary-color); + color: ${({ theme }) => theme.secondary}; background-color: transparent; } &.ant-btn-primary, &.ant-btn-background-ghost { - border-color: var(--secondary-color); + border-color: ${({ theme }) => theme.secondary}; } } ${props.$severity && css` - background-color: rgba(${defineColorBySeverity(props.$severity, true)}, 0.2); - border-color: ${defineColorBySeverity(props.$severity)}; - color: ${defineColorBySeverity(props.$severity)}; + 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: var(--background-color); - border-color: rgba(${defineColorBySeverity(props.$severity, true)}, 0.9); - color: rgba(${defineColorBySeverity(props.$severity, true)}, 0.9); + background-color: ${({ theme }) => 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 423e7a949..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 { Button as AntdButton, ButtonProps as AntButtonProps } from 'antd'; +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 deleted file mode 100644 index 4b4cefe8f..000000000 --- a/src/components/common/BaseCalendar/BaseCalendar.styles.ts +++ /dev/null @@ -1,9 +0,0 @@ -import styled from 'styled-components'; -import { Calendar as AntCalendar } from 'antd'; -import { FONT_WEIGHT } from '@app/styles/themes/constants'; - -export const Calendar = styled(AntCalendar)` - .ant-picker-cell-in-view .ant-picker-calendar-date-value { - font-weight: ${FONT_WEIGHT.bold}; - } -`; diff --git a/src/components/common/BaseCalendar/BaseCalendar.styles.tsx b/src/components/common/BaseCalendar/BaseCalendar.styles.tsx new file mode 100644 index 000000000..382343ecc --- /dev/null +++ b/src/components/common/BaseCalendar/BaseCalendar.styles.tsx @@ -0,0 +1,24 @@ +import styled, { useTheme } from 'styled-components'; +import { Calendar as AntCalendar, ConfigProvider } from 'antd'; +import { remToPixels } from '@app/utils/utils'; + +export const Calendar = styled((props: React.ComponentProps) => { + const theme = useTheme(); + return ( + + + + ); +})` + .ant-picker-cell-in-view .ant-picker-calendar-date-value { + font-weight: ${({ theme }) => theme.fontWeights.bold}; + } +`; diff --git a/src/components/common/BaseCard/BaseCard.styles.ts b/src/components/common/BaseCard/BaseCard.styles.ts deleted file mode 100644 index ca1445513..000000000 --- a/src/components/common/BaseCard/BaseCard.styles.ts +++ /dev/null @@ -1,55 +0,0 @@ -import styled 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'; - -interface CardInternalProps { - $padding: string | number | [number, number]; - $autoHeight: boolean; -} - -export const Card = styled(AntCard)` - display: flex; - flex-direction: column; - - ${(props) => props.$autoHeight && 'height: 100%'}; - - .ant-card-head { - border-bottom: 0; - font-weight: ${FONT_WEIGHT.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; - } - - @media only screen and ${media.xl} { - font-size: ${FONT_SIZE.xxl}; - } - - .ant-card-head-title { - white-space: unset; - overflow: unset; - padding-bottom: 0; - - @media only screen and ${media.xl} { - padding-bottom: 0.25rem; - } - } - } - - .ant-card-body { - flex-grow: 1; - - padding: ${(props) => props.$padding && normalizeProp(props.$padding)}; - } - - .ant-card-bordered { - border-color: #f0f0f0; - } -`; diff --git a/src/components/common/BaseCard/BaseCard.styles.tsx b/src/components/common/BaseCard/BaseCard.styles.tsx new file mode 100644 index 000000000..bc23d6091 --- /dev/null +++ b/src/components/common/BaseCard/BaseCard.styles.tsx @@ -0,0 +1,75 @@ +import styled, { css, useTheme } from 'styled-components'; +import { Card as AntCard, ConfigProvider } from 'antd'; +import { normalizeProp } from '@app/utils/utils'; +import { media } from '@app/utils/utils'; + +interface CardInternalProps { + $padding: string | number | [number, number]; + $autoHeight: boolean; +} + +export const Card = styled((props: React.ComponentProps) => { + const theme = useTheme(); + return ( + + + + ); +})` + display: flex; + flex-direction: column; + + ${(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; + } + + @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')}) { + padding-bottom: 0.25rem; + } + } + } + + .ant-card-body { + flex-grow: 1; + padding: ${({ $padding }) => $padding && normalizeProp($padding)}; + } + + .ant-card-bordered { + border-color: #f0f0f0; + } +`; diff --git a/src/components/common/BaseCarousel/CarouselArrow/CarouselArrow.styles.ts b/src/components/common/BaseCarousel/CarouselArrow/CarouselArrow.styles.ts index 6c6249aef..f405342fe 100644 --- a/src/components/common/BaseCarousel/CarouselArrow/CarouselArrow.styles.ts +++ b/src/components/common/BaseCarousel/CarouselArrow/CarouselArrow.styles.ts @@ -6,7 +6,7 @@ export const ArrowWrapper = styled.div.withConfig({ })` font-size: 1rem; - 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 957ad2891..561e9fb36 100644 --- a/src/components/common/BaseCheckbox/BaseCheckbox.styles.ts +++ b/src/components/common/BaseCheckbox/BaseCheckbox.styles.ts @@ -1,22 +1,22 @@ 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-inner { - border-color: var(--border-base-color); + border-color: ${({ theme }) => theme.borderBase}; } &.ant-checkbox-disabled.ant-checkbox-checked .ant-checkbox-inner::after { - border-color: var(--disabled-color); + border-color: ${({ theme }) => theme.disabled}; } `; @@ -29,6 +29,6 @@ export const CheckboxGroup = styled(Group)` 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/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.tsx b/src/components/common/BaseDivider/BaseDivider.styles.tsx new file mode 100644 index 000000000..cbe9fdadc --- /dev/null +++ b/src/components/common/BaseDivider/BaseDivider.styles.tsx @@ -0,0 +1,16 @@ +import { Divider as AntDivider, ConfigProvider } from 'antd'; +import styled from 'styled-components'; + +export const Divider = styled((props: React.ComponentProps) => ( + + + +))``; 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.tsx b/src/components/common/BaseDropdown/BaseDropdown.styles.tsx new file mode 100644 index 000000000..7183a4788 --- /dev/null +++ b/src/components/common/BaseDropdown/BaseDropdown.styles.tsx @@ -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.tsx b/src/components/common/BaseEmpty/BaseEmpty.styles.tsx new file mode 100644 index 000000000..73899134e --- /dev/null +++ b/src/components/common/BaseEmpty/BaseEmpty.styles.tsx @@ -0,0 +1,20 @@ +import styled, { useTheme } from 'styled-components'; +import { ConfigProvider, Empty as AntEmpty } from 'antd'; +import { remToPixels } from '@app/utils/utils'; + +export const Empty = styled((props: React.ComponentProps) => { + const theme = useTheme(); + return ( + + + + ); +})``; 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/BaseHashTag/BaseHashTag.styles.ts b/src/components/common/BaseHashTag/BaseHashTag.styles.ts index 2a0083959..6d8ea1fb9 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; @@ -11,7 +10,7 @@ export const RemoveTagWrapper = styled.span` export const RemoveTagIcon = styled(CloseOutlined)` color: #ffffff; - font-size: ${FONT_SIZE.xxs}; + 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 deleted file mode 100644 index 8c99666fb..000000000 --- a/src/components/common/BaseMenu/BaseMenu.styles.ts +++ /dev/null @@ -1,25 +0,0 @@ -import styled from 'styled-components'; -import { Menu as AntMenu } from 'antd'; -import { FONT_SIZE } from '@app/styles/themes/constants'; - -export const Menu = styled(AntMenu)` - &.ant-menu .ant-menu-item-icon { - font-size: ${FONT_SIZE.xl}; - width: 1.25rem; - } - - .ant-menu-item, - .ant-menu-submenu { - font-size: ${FONT_SIZE.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.styles.tsx b/src/components/common/BaseMenu/BaseMenu.styles.tsx new file mode 100644 index 000000000..88723f482 --- /dev/null +++ b/src/components/common/BaseMenu/BaseMenu.styles.tsx @@ -0,0 +1,53 @@ +import styled, { useTheme } from 'styled-components'; +import { Menu as AntMenu, ConfigProvider } from 'antd'; +import { hexToRGB, remToPixels } from '@app/utils/utils'; +import { themeObject } from '@app/styles/themes/themeVariables'; + +export const Menu = styled((props: React.ComponentProps) => { + const theme = useTheme(); + return ( + + + + ); +})` + &.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 0d6103550..8f32fb0c6 100644 --- a/src/components/common/BaseMenu/BaseMenu.tsx +++ b/src/components/common/BaseMenu/BaseMenu.tsx @@ -1,9 +1,8 @@ -import { FC } from 'react'; import type { MenuProps } from 'antd'; import * as S from './BaseMenu.styles'; -export type BaseMenuProps = MenuProps; +export type BaseMenuProps = Omit; -export const BaseMenu: FC = (props) => { +export const BaseMenu: React.FC = (props) => { return ; }; diff --git a/src/components/common/BaseNotification/BaseNotification.styles.ts b/src/components/common/BaseNotification/BaseNotification.styles.ts index 4ad548e0d..d5593b121 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; @@ -20,26 +21,15 @@ export const Description = styled(BaseTypography.Text)` `; 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 ''; - } - }} + ${({ type, theme }) => + type + ? css` + color: ${theme[colorTypeFrom(type)]}; + ` + : ''} } & span[role='img'] { diff --git a/src/components/common/BasePagination/BasePagination.styles.ts b/src/components/common/BasePagination/BasePagination.styles.ts deleted file mode 100644 index 494349c01..000000000 --- a/src/components/common/BasePagination/BasePagination.styles.ts +++ /dev/null @@ -1,62 +0,0 @@ -import styled, { css } from 'styled-components'; -import { Pagination as AntdPagination } from 'antd'; - -export const Pagination = styled(AntdPagination)` - ${(props) => - !props.disabled && - css` - .ant-pagination-item:not(.ant-pagination-item-active) { - &:hover, - &:focus-visible { - a { - color: var(--primary-color); - } - } - } - - .ant-pagination-item-active:focus-visible { - a { - color: var(--ant-primary-5); - } - - border-color: var(--ant-primary-5); - } - - &.ant-pagination-mini { - .ant-pagination-prev, - .ant-pagination-next { - &:not(.ant-pagination-disabled) { - &:hover, - &:focus-visible { - .ant-pagination-item-link { - color: var(--primary-color); - 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: var(--primary-color); - border-color: var(--primary-color); - } - } - - .ant-pagination-item:not(.ant-pagination-item-active):focus-visible { - border-color: var(--primary-color); - } - } - `} - - .ant-select-arrow { - color: var(--disabled-color); - } -`; diff --git a/src/components/common/BasePagination/BasePagination.styles.tsx b/src/components/common/BasePagination/BasePagination.styles.tsx new file mode 100644 index 000000000..cbf935548 --- /dev/null +++ b/src/components/common/BasePagination/BasePagination.styles.tsx @@ -0,0 +1,81 @@ +import styled, { css, useTheme } from 'styled-components'; +import { Pagination as AntPagination, ConfigProvider } from 'antd'; +import { remToPixels } from '@app/utils/utils'; + +export const Pagination = styled((props: React.ComponentProps) => { + const theme = useTheme(); + return ( + + + + ); +})` + ${(props) => + !props.disabled && + css` + .ant-pagination-item:not(.ant-pagination-item-active) { + &:hover, + &:focus-visible { + a { + color: ${({ theme }) => theme.primary}; + } + } + } + + .ant-pagination-item-active:focus-visible { + border-color: ${({ theme }) => theme.primary5}; + + 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-arrow { + color: ${({ theme }) => theme.disabled}; + } +`; diff --git a/src/components/common/BasePopconfirm/BasePopconfirm.styles.tsx b/src/components/common/BasePopconfirm/BasePopconfirm.styles.tsx new file mode 100644 index 000000000..1151b246d --- /dev/null +++ b/src/components/common/BasePopconfirm/BasePopconfirm.styles.tsx @@ -0,0 +1,20 @@ +import styled, { useTheme } from 'styled-components'; +import { Popconfirm as AntPopconfirm, ConfigProvider } from 'antd'; + +export const Popconfirm = styled((props: React.ComponentProps) => { + const theme = useTheme(); + return ( + + + + ); +})``; 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.tsx b/src/components/common/BasePopover/BasePopover.styles.tsx new file mode 100644 index 000000000..70769c6c8 --- /dev/null +++ b/src/components/common/BasePopover/BasePopover.styles.tsx @@ -0,0 +1,18 @@ +import styled from 'styled-components'; +import { Popover as AntPopover, ConfigProvider } from 'antd'; + +export const Popover = styled((props: React.ComponentProps) => ( + + + +))``; 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.tsx b/src/components/common/BaseProgress/BaseProgress.styles.tsx new file mode 100644 index 000000000..28ff86df0 --- /dev/null +++ b/src/components/common/BaseProgress/BaseProgress.styles.tsx @@ -0,0 +1,20 @@ +import styled, { useTheme } from 'styled-components'; +import { Progress as AntProgress, ConfigProvider } from 'antd'; + +export const Progress = styled((props: React.ComponentProps) => { + const theme = useTheme(); + return ( + + + + ); +})``; 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 24b862164..518dc6989 100644 --- a/src/components/common/BaseRadio/BaseRadio.styles.ts +++ b/src/components/common/BaseRadio/BaseRadio.styles.ts @@ -1,10 +1,10 @@ import styled from 'styled-components'; -import { Radio as AntdRadio } from 'antd'; +import { Radio as AntRadio } from 'antd'; -export const Radio = styled(AntdRadio)` +export const Radio = styled(AntRadio)` .ant-radio-input:focus-visible + .ant-radio-inner { - border-color: var(--primary-color); - box-shadow: 0 0 0 3px rgba(var(--primary-rgb-color), 0.12); + border-color: ${({ theme }) => theme.primary}; + box-shadow: 0 0 0 3px rgba(${({ theme }) => theme.rgb.primary}, 0.12); } &.ant-radio-wrapper { @@ -26,16 +26,16 @@ 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: 0 0 0 3px rgba(var(--primary-rgb-color), 0.12); + box-shadow: 0 0 0 3px rgba(${({ theme }) => theme.rgb.primary}, 0.12); } &.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 deleted file mode 100644 index 8c341615d..000000000 --- a/src/components/common/BaseRate/BaseRate.styles.ts +++ /dev/null @@ -1,7 +0,0 @@ -import styled from 'styled-components'; -import { Rate as AntdRate } from 'antd'; -import { FONT_SIZE } from '@app/styles/themes/constants'; - -export const Rate = styled(AntdRate)` - font-size: ${FONT_SIZE.lg}; -`; diff --git a/src/components/common/BaseRate/BaseRate.styles.tsx b/src/components/common/BaseRate/BaseRate.styles.tsx new file mode 100644 index 000000000..b68691047 --- /dev/null +++ b/src/components/common/BaseRate/BaseRate.styles.tsx @@ -0,0 +1,19 @@ +import styled from 'styled-components'; +import { Rate as AntRate, ConfigProvider } from 'antd'; + +export const Rate = styled((props: React.ComponentProps) => ( + + + +))` + font-size: ${({ theme }) => theme.fontSizes.lg}; +`; diff --git a/src/components/common/BaseResult/BaseResult.styles.ts b/src/components/common/BaseResult/BaseResult.styles.ts deleted file mode 100644 index c4e6b579d..000000000 --- a/src/components/common/BaseResult/BaseResult.styles.ts +++ /dev/null @@ -1,8 +0,0 @@ -import styled from 'styled-components'; -import { Result as AntResult } from 'antd'; - -export const Result = styled(AntResult)` - .ant-result-title { - margin: 0; - } -`; diff --git a/src/components/common/BaseResult/BaseResult.styles.tsx b/src/components/common/BaseResult/BaseResult.styles.tsx new file mode 100644 index 000000000..6e5ae963b --- /dev/null +++ b/src/components/common/BaseResult/BaseResult.styles.tsx @@ -0,0 +1,25 @@ +import styled, { useTheme } from 'styled-components'; +import { Result as AntResult, ConfigProvider } from 'antd'; +import { remToPixels } from '@app/utils/utils'; + +export const Result = styled((props: React.ComponentProps) => { + const theme = useTheme(); + return ( + + + + ); +})` + .ant-result-title { + margin: 0; + } +`; diff --git a/src/components/common/BaseSlider/BaseSlider.styles.ts b/src/components/common/BaseSlider/BaseSlider.styles.ts deleted file mode 100644 index 9655391b9..000000000 --- a/src/components/common/BaseSlider/BaseSlider.styles.ts +++ /dev/null @@ -1,16 +0,0 @@ -import styled from 'styled-components'; -import { Slider as AntdSlider } from 'antd'; - -export const Slider = styled(AntdSlider)` - &.ant-slider.ant-slider-disabled .ant-slider-rail { - background-color: var(--background-base-color) !important; - } - - &.ant-slider .ant-slider-handle:focus::after { - outline: 6px solid rgba(var(--primary-color), 0.2); - } - - & .ant-slider-mark-text:not(.ant-slider-mark-text-active) { - color: var(--subtext-color); - } -`; diff --git a/src/components/common/BaseSlider/BaseSlider.styles.tsx b/src/components/common/BaseSlider/BaseSlider.styles.tsx new file mode 100644 index 000000000..a74c33c29 --- /dev/null +++ b/src/components/common/BaseSlider/BaseSlider.styles.tsx @@ -0,0 +1,42 @@ +import styled, { useTheme } from 'styled-components'; +import { Slider as AntSlider, ConfigProvider } from 'antd'; + +export const Slider = styled((props: React.ComponentProps) => { + const theme = useTheme(); + return ( + + + + ); +})` + &.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); + } + + & .ant-slider-mark-text:not(.ant-slider-mark-text-active) { + color: ${({ theme }) => theme.subText}; + } +`; diff --git a/src/components/common/BaseSpin/BaseSpin.styles.tsx b/src/components/common/BaseSpin/BaseSpin.styles.tsx new file mode 100644 index 000000000..dad141351 --- /dev/null +++ b/src/components/common/BaseSpin/BaseSpin.styles.tsx @@ -0,0 +1,22 @@ +import styled, { useTheme } from 'styled-components'; +import { ConfigProvider, Spin as AntSpin } from 'antd'; +import { remToPixels } from '@app/utils/utils'; + +export const Spin = styled((props: React.ComponentProps) => { + const theme = useTheme(); + return ( + + + + ); +})``; 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 deleted file mode 100644 index b419afe4a..000000000 --- a/src/components/common/BaseSteps/BaseSteps.styles.ts +++ /dev/null @@ -1,60 +0,0 @@ -import styled from 'styled-components'; -import { Steps as AntdSteps } from 'antd'; -import { FONT_SIZE, FONT_WEIGHT, media } from '@app/styles/themes/constants'; - -export const Steps = styled(AntdSteps)` - 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}; - - @media only screen and ${media.md} { - font-size: ${FONT_SIZE.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}; - - @media only screen and ${media.md} { - font-size: ${FONT_SIZE.md}; - } - } - .ant-steps-item-wait .ant-steps-item-icon { - border-color: var(--disabled-color); - - & > .ant-steps-icon { - color: var(--disabled-color); - } - } - - .ant-steps-item-container { - display: flex; - align-items: baseline; - } - - &.ant-steps-vertical { - .ant-steps-item-container { - 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); - } - } - .ant-steps-item-subtitle { - color: var(--subtext-color); - } - } -`; diff --git a/src/components/common/BaseSteps/BaseSteps.styles.tsx b/src/components/common/BaseSteps/BaseSteps.styles.tsx new file mode 100644 index 000000000..bc070bbdd --- /dev/null +++ b/src/components/common/BaseSteps/BaseSteps.styles.tsx @@ -0,0 +1,85 @@ +import styled, { useTheme } from 'styled-components'; +import { Steps as AntSteps, ConfigProvider } from 'antd'; +import { media } from '@app/utils/utils'; +import { remToPixels } from '@app/utils/utils'; + +export const Steps = styled((props: React.ComponentProps) => { + const theme = useTheme(); + return ( + + + + ); +})` + font-size: unset; + + & .ant-steps-item-process > .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-title { + color: ${({ theme }) => theme.primary}; + font-weight: ${({ theme }) => theme.fontWeights.semibold}; + font-size: ${({ theme }) => theme.fontSizes.xs}; + + @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: ${({ theme }) => theme.textMain}; + font-weight: ${({ theme }) => theme.fontWeights.semibold}; + font-size: ${({ theme }) => theme.fontSizes.xs}; + + @media only screen and (${media('md')}) { + font-size: ${({ theme }) => theme.fontSizes.md}; + } + } + + .ant-steps-item-wait .ant-steps-item-icon { + border-color: ${({ theme }) => theme.disabled}; + + & > .ant-steps-icon { + color: ${({ theme }) => theme.disabled}; + } + } + + .ant-steps-item-container { + display: flex; + align-items: baseline; + } + + &.ant-steps-vertical { + .ant-steps-item-container { + 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: ${({ theme }) => theme.subText}; + } + } + + .ant-steps-item-subtitle { + color: ${({ theme }) => theme.subText}; + } + } +`; diff --git a/src/components/common/BaseSwitch/BaseSwitch.styles.ts b/src/components/common/BaseSwitch/BaseSwitch.styles.ts deleted file mode 100644 index 6e9996e94..000000000 --- a/src/components/common/BaseSwitch/BaseSwitch.styles.ts +++ /dev/null @@ -1,13 +0,0 @@ -import styled from 'styled-components'; -import { Switch as AntdSwitch } from 'antd'; - -export const Switch = styled(AntdSwitch)` - &.ant-switch-checked:focus { - box-shadow: 0 0 0 2px var(--ant-primary-1); - } - - &.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)); - } -`; diff --git a/src/components/common/BaseSwitch/BaseSwitch.styles.tsx b/src/components/common/BaseSwitch/BaseSwitch.styles.tsx new file mode 100644 index 000000000..a3fbfe048 --- /dev/null +++ b/src/components/common/BaseSwitch/BaseSwitch.styles.tsx @@ -0,0 +1,34 @@ +import styled, { useTheme } from 'styled-components'; +import { Switch as AntSwitch, ConfigProvider } from 'antd'; +import { remToPixels } from '@app/utils/utils'; + +export const Switch = styled((props: React.ComponentProps) => { + const theme = useTheme(); + return ( + + + + ); +})` + &.ant-switch-checked:focus { + box-shadow: 0 0 0 2px ${({ theme }) => theme.primary1}; + } + + &.ant-switch[aria-checked='false'] { + background-image: linear-gradient(to right, ${({ theme }) => theme.disabled}, ${({ theme }) => theme.disabled}), + linear-gradient(to right, ${({ theme }) => theme.background}, ${({ theme }) => theme.background}); + } +`; diff --git a/src/components/common/BaseTable/BaseTable.styles.ts b/src/components/common/BaseTable/BaseTable.styles.tsx similarity index 51% rename from src/components/common/BaseTable/BaseTable.styles.ts rename to src/components/common/BaseTable/BaseTable.styles.tsx index efc86a5e9..93b5ca634 100644 --- a/src/components/common/BaseTable/BaseTable.styles.ts +++ b/src/components/common/BaseTable/BaseTable.styles.tsx @@ -1,21 +1,42 @@ -import styled from 'styled-components'; -import { Table as AntdTable } from 'antd'; -import { FONT_SIZE } from '@app/styles/themes/constants'; +import styled, { useTheme } from 'styled-components'; +import { Table as AntTable, ConfigProvider } from 'antd'; +import { hexToRGB } from '@app/utils/utils'; -export const Table = styled(AntdTable)` +export const Table = styled((props: React.ComponentProps) => { + const theme = useTheme(); + return ( + + + + ); +})` & 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; } @@ -31,7 +52,7 @@ export const Table = styled(AntdTable)` .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 +64,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,7 +76,7 @@ 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 { @@ -69,20 +90,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 a9c9eb854..d43042c2f 100644 --- a/src/components/common/BaseTable/BaseTable.tsx +++ b/src/components/common/BaseTable/BaseTable.tsx @@ -1,11 +1,10 @@ -import type { ComponentProps, FC } from 'react'; import { Table } from 'antd'; import * as S from './BaseTable.styles'; // eslint-disable-next-line @typescript-eslint/no-explicit-any -export type BaseTableProps = ComponentProps>; +export type BaseTableProps = React.ComponentProps>; // TODO make generic! -export const BaseTable: 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 deleted file mode 100644 index 03c4eef25..000000000 --- a/src/components/common/BaseTabs/BaseTabs.styles.ts +++ /dev/null @@ -1,17 +0,0 @@ -import styled from 'styled-components'; -import { Tabs as AntdTabs } from 'antd'; - -export const Tabs = styled(AntdTabs)` - .ant-tabs-tab.ant-tabs-tab-disabled { - color: var(--disabled-color); - } - - &.ant-tabs .ant-tabs-tab:not(.ant-tabs-tab-active) { - .ant-tabs-tab-btn, - .ant-tabs-tab-remove { - &:focus-visible { - color: var(--ant-primary-7); - } - } - } -`; diff --git a/src/components/common/BaseTabs/BaseTabs.styles.tsx b/src/components/common/BaseTabs/BaseTabs.styles.tsx new file mode 100644 index 000000000..57a19a91a --- /dev/null +++ b/src/components/common/BaseTabs/BaseTabs.styles.tsx @@ -0,0 +1,36 @@ +import styled, { useTheme } from 'styled-components'; +import { Tabs as AntTabs, ConfigProvider } from 'antd'; + +export const Tabs = styled((props: React.ComponentProps) => { + const theme = useTheme(); + return ( + + + + ); +})` + .ant-tabs-tab.ant-tabs-tab-disabled { + 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..bed84aae4 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'; @@ -9,10 +9,10 @@ export const CalendarSwitch = styled.div` `; export const Text = styled(BaseTypography.Text)` font-weight: bold; - font-size: ${FONT_SIZE.xs}; + 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/MoonSunSwitch/MoonSunSwitch.styles.ts b/src/components/common/MoonSunSwitch/MoonSunSwitch.styles.ts index bf8b89500..6e07382cf 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: ${({ theme }) => theme.primary}; + color: ${({ theme }) => theme.textSecondary}; } ` : css` & > ${Btn}:last-of-type { - background: var(--warning-color); - color: var(--text-secondary-color); + background: ${({ theme }) => theme.warning}; + color: ${({ theme }) => theme.textSecondary}; } `} diff --git a/src/components/common/References/References.styles.ts b/src/components/common/References/References.styles.ts index c8db9578f..7ac9a0104 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; } `; diff --git a/src/components/common/charts/BaseChart.tsx b/src/components/common/charts/BaseChart.tsx index 861546eef..112cbe1b5 100644 --- a/src/components/common/charts/BaseChart.tsx +++ b/src/components/common/charts/BaseChart.tsx @@ -1,11 +1,10 @@ import React, { CSSProperties, useEffect, useState } from 'react'; +import { DefaultTheme } 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 +27,7 @@ interface DefaultTooltipStyles { }; } -export const getChartColors = (theme: ITheme): string[] => [ +export const getChartColors = (theme: DefaultTheme): string[] => [ theme.chartColor1, theme.chartColor2, theme.chartColor3, @@ -36,10 +35,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, 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/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/components/BaseFormItem/BaseFormItem.ts b/src/components/common/forms/components/BaseFormItem/BaseFormItem.ts index 9bf6391bf..6a7aaf2ff 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 { FONT_SIZE, media } from '@app/styles/themes/constants'; +import { media } from '@app/utils/utils'; interface InternalFormItemProps { $isSuccess?: boolean; @@ -11,41 +11,40 @@ export type BaseFormItemProps = FormItemProps; export const BaseFormItem = styled(Form.Item as React.FC)` .ant-input { - font-size: 1rem; + font-size: ${({ theme }) => theme.fontSizes.md}; } .ant-input:disabled { - color: var(--disabled-color); - background-color: var(--disabled-bg-color); + color: ${({ theme }) => theme.disabled}; + background-color: ${({ theme }) => theme.disabledBg}; cursor: not-allowed; } .ant-form-item-label > label { - color: var(--primary-color); - font-size: ${FONT_SIZE.xs}; + color: ${({ theme }) => theme.primary}; + font-size: ${({ theme }) => theme.fontSizes.xs}; .ant-form-item-optional { - color: var(--subtext-color); + color: ${({ theme }) => theme.subText}; } } .ant-input-group-addon:first-of-type { font-weight: 600; width: 5rem; - - color: var(--primary-color); + color: ${({ theme }) => theme.primary}; .anticon, svg { font-size: 1.25rem; } - @media only screen and ${media.md} { + @media only screen and (${media('md')}) { width: 5.5rem; font-size: 1.125rem; } - @media only screen and ${media.xl} { + @media only screen and (${media('xl')}) { font-size: 1.5rem; } } @@ -69,8 +68,8 @@ export const BaseFormItem = styled(Form.Item as React.FC) theme.textSecondary}; + background: ${({ theme }) => theme.error}; border-radius: 50%; width: 1rem; height: 1rem; @@ -88,7 +87,7 @@ export const BaseFormItem = styled(Form.Item as React.FC) theme.success}; } } @@ -97,7 +96,7 @@ export const BaseFormItem = styled(Form.Item as React.FC) theme.success}; } } `} @@ -122,7 +121,7 @@ export const BaseFormItem = styled(Form.Item as React.FC) theme.error}; } } @@ -131,7 +130,7 @@ export const BaseFormItem = styled(Form.Item as React.FC) theme.success}; } } diff --git a/src/components/common/forms/components/BaseFormTitle/BaseFormTitle.ts b/src/components/common/forms/components/BaseFormTitle/BaseFormTitle.ts index 9ef376daf..a099a6883 100644 --- a/src/components/common/forms/components/BaseFormTitle/BaseFormTitle.ts +++ b/src/components/common/forms/components/BaseFormTitle/BaseFormTitle.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'; export const BaseFormTitle = styled(BaseTypography.Text)` @@ -7,7 +7,7 @@ export const BaseFormTitle = styled(BaseTypography.Text)` font-size: 1rem; display: block; - @media only screen and ${media.md} { + @media only screen and (${media('md')}) { font-size: 1.125rem; } `; diff --git a/src/components/common/inputs/BaseInput/BaseInput.styles.ts b/src/components/common/inputs/BaseInput/BaseInput.styles.ts index d58f95fd6..75382043b 100644 --- a/src/components/common/inputs/BaseInput/BaseInput.styles.ts +++ b/src/components/common/inputs/BaseInput/BaseInput.styles.ts @@ -1,6 +1,5 @@ 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-select:not(.ant-select-disabled):not(.ant-select-customize-input):not(.ant-pagination-size-changer):hover @@ -9,23 +8,15 @@ export const Input = styled(AntInput)` } .ant-input-group-addon:first-child, - .ant-input-group-addon:last-child { + .ant-input-group-addon:last-child, + .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 .ant-select { - .ant-select-selection-item { - 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-select-arrow { - color: var(--disabled-color); + color: ${({ theme }) => theme.disabled}; } `; diff --git a/src/components/common/inputs/InputNumber/InputNumber.styles.ts b/src/components/common/inputs/InputNumber/InputNumber.styles.ts deleted file mode 100644 index ebc60f50a..000000000 --- a/src/components/common/inputs/InputNumber/InputNumber.styles.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { InputNumber as AntInputNumber } from 'antd'; -import styled from 'styled-components'; - -interface InputNumberProps { - $block?: boolean; -} - -export const InputNumber = styled(AntInputNumber)` - ${(props) => props.$block && 'display: block; width: 100%'}; -`; diff --git a/src/components/common/inputs/InputNumber/InputNumber.styles.tsx b/src/components/common/inputs/InputNumber/InputNumber.styles.tsx new file mode 100644 index 000000000..7f8d71f2b --- /dev/null +++ b/src/components/common/inputs/InputNumber/InputNumber.styles.tsx @@ -0,0 +1,33 @@ +import { InputNumber as AntInputNumber, ConfigProvider } from 'antd'; +import { forwardRef, ComponentProps } from 'react'; +import styled, { css, useTheme } from 'styled-components'; + +interface InputNumberProps { + $block?: boolean; +} + +export const InputNumber = styled( + forwardRef>((props, ref) => { + const theme = useTheme(); + return ( + + + + ); + }), +)` + ${(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 index 8f5206ede..6085f5083 100644 --- a/src/components/common/inputs/MaskedInput/MaskedInput.styles.ts +++ b/src/components/common/inputs/MaskedInput/MaskedInput.styles.ts @@ -1,17 +1,16 @@ import styled from 'styled-components'; -import AntdMaskedInput from 'antd-mask-input'; -import { BORDER_RADIUS } from '@app/styles/themes/constants'; +import { MaskedInput as AntMaskedInput } from 'antd-mask-input'; // https://github.com/antoniopresto/antd-mask-input/issues/73 -export const MaskedInput = styled(AntdMaskedInput)` +export const MaskedInput = styled(AntMaskedInput)` font-family: inherit; - color: var(--text-main-color); - background-color: var(--background-color); + color: ${({ theme }) => theme.textMain}; + background-color: ${({ theme }) => theme.background}; padding: 11.4px 11px; - border: 1px solid var(--border-base-color); - border-radius: ${BORDER_RADIUS}; + border: 1px solid ${({ theme }) => theme.borderBase}; + border-radius: ${({ theme }) => theme.borderRadius}; &::placeholder { - color: var(--input-placeholder-color); + color: ${({ theme }) => theme.inputPlaceholder}; } `; diff --git a/src/components/common/inputs/MaskedInput/MaskedInput.tsx b/src/components/common/inputs/MaskedInput/MaskedInput.tsx index 73068c7a4..8c5831724 100644 --- a/src/components/common/inputs/MaskedInput/MaskedInput.tsx +++ b/src/components/common/inputs/MaskedInput/MaskedInput.tsx @@ -1,9 +1,9 @@ import { forwardRef, ComponentPropsWithRef } from 'react'; import type { InputRef } from 'antd'; -import type { MaskedInput as AntdMaskedInput } from 'antd-mask-input'; +import type { MaskedInput as AntMaskedInput } from 'antd-mask-input'; import * as S from './MaskedInput.styles'; -export type MaskedInputProps = ComponentPropsWithRef; +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 2a35d92e5..5c36d0364 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'; @@ -19,9 +19,9 @@ export const SearchInput = styled(BaseInput.Search)` & input { font-weight: 600; - background-color: var(--background-color); + background-color: ${({ theme }) => theme.background}; - @media only screen and ${media.md} { + @media only screen and (${media('md')}) { font-size: 1rem; } @@ -32,24 +32,25 @@ export const SearchInput = styled(BaseInput.Search)` .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-input-search-button:hover { &.ant-btn { - font-weight: ${FONT_WEIGHT.semibold}; + font-weight: ${({ theme }) => theme.fontWeights.semibold}; .anticon { - color: var(--primary-color); + 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..0ac57d86c 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.styled.tsx b/src/components/common/pickers/BaseDatePicker.styles.ts similarity index 100% rename from src/components/common/pickers/BaseDatePicker.styled.tsx rename to src/components/common/pickers/BaseDatePicker.styles.ts diff --git a/src/components/common/pickers/BaseDatePicker.tsx b/src/components/common/pickers/BaseDatePicker.tsx index af66393d4..23a2a907b 100644 --- a/src/components/common/pickers/BaseDatePicker.tsx +++ b/src/components/common/pickers/BaseDatePicker.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { DatePickerProps } from 'antd'; -import * as S from './BaseDatePicker.styled'; +import * as S from './BaseDatePicker.styles'; export type BaseDatePickerProps = DatePickerProps; diff --git a/src/components/common/selects/BaseSelect/BaseSelect.styles.ts b/src/components/common/selects/BaseSelect/BaseSelect.styles.ts index c48605e2b..275d22780 100644 --- a/src/components/common/selects/BaseSelect/BaseSelect.styles.ts +++ b/src/components/common/selects/BaseSelect/BaseSelect.styles.ts @@ -2,7 +2,6 @@ import styled from 'styled-components'; import { Select as AntSelect } from 'antd'; import { Dimension } from 'interfaces/interfaces'; import { normalizeProp } from '@app/utils/utils'; -import { FONT_WEIGHT, BORDER_RADIUS, FONT_SIZE } from '@app/styles/themes/constants'; export interface InternalSelectProps { $width?: Dimension; @@ -10,21 +9,20 @@ export interface InternalSelectProps { } export const Select = styled(AntSelect)` - width: ${(props) => props.$width && normalizeProp(props.$width)}; + width: ${({ $width }) => $width && normalizeProp($width)}; + box-shadow: ${(props) => props.$shadow && props.theme.boxShadow}; .ant-select-item-option-selected:not(.ant-select-item-option-disabled) { - font-weight: ${FONT_WEIGHT.medium}; + font-weight: ${({ theme }) => theme.fontWeights.medium}; } - box-shadow: ${(props) => props.$shadow && 'var(--box-shadow)'}; - &.ant-select-borderless { - background: var(--secondary-background-color) !important; - border-radius: ${BORDER_RADIUS}; + background: ${({ theme }) => theme.secondaryBackground} !important; + border-radius: ${({ theme }) => theme.borderRadius}; } .ant-select-selection-placeholder { - font-size: ${FONT_SIZE.xs}; + font-size: ${({ theme }) => theme.fontSizes.xs}; } .ant-select-item { @@ -35,7 +33,7 @@ export const Select = styled(AntSelect)` &.ant-select-multiple { &.ant-select-disabled .ant-select-selection-item { color: #bfbfbf; - border: 1px solid var(--border-base-color); + border: 1px solid ${({ theme }) => theme.borderBase}; } .ant-select-selection-item { diff --git a/src/components/forms/ControlForm/ControlForm.styles.ts b/src/components/forms/ControlForm/ControlForm.styles.ts index c0e62862a..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)` & .ant-form-item-label label { - font-size: ${FONT_SIZE.md}; - font-weight: ${FONT_WEIGHT.semibold}; + 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,9 +26,9 @@ 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; `; diff --git a/src/components/forms/ControlForm/ControlForm.tsx b/src/components/forms/ControlForm/ControlForm.tsx index 4cd8b6ace..a97a7443b 100644 --- a/src/components/forms/ControlForm/ControlForm.tsx +++ b/src/components/forms/ControlForm/ControlForm.tsx @@ -2,8 +2,8 @@ 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 { useFeedback } from '@app/hooks/useFeedback'; 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/header/Header.styles.ts b/src/components/header/Header.styles.ts index e16ddf1a7..6d4749535 100644 --- a/src/components/header/Header.styles.ts +++ b/src/components/header/Header.styles.ts @@ -1,9 +1,10 @@ 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 { LAYOUT } 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; @@ -12,7 +13,7 @@ export const HeaderActionWrapper = styled.div` .ant-badge { font-size: 1.25rem; - @media only screen and ${media.md} { + @media only screen and (${media('md')}) { font-size: 1.625rem; } } @@ -27,9 +28,9 @@ export const DropdownCollapse = styled(BaseCollapse)` font-weight: 600; font-size: 0.875rem; - color: var(--primary-color); + color: ${({ theme }) => theme.primary}; - @media only screen and ${media.md} { + @media only screen and (${media('md')}) { font-size: 1rem; } } @@ -52,13 +53,7 @@ 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)` @@ -70,11 +65,11 @@ interface ProfileColumn { } export const ProfileColumn = styled(BaseCol)` - @media only screen and ${media.md} { + @media only screen and (${media('md')}) { ${(props) => props?.$isTwoColumnsLayout && css` - background-color: var(--sider-background-color); + background-color: ${({ theme }) => theme.siderBackground}; padding: ${LAYOUT.desktop.paddingVertical} ${LAYOUT.desktop.paddingHorizontal}; `} } @@ -83,10 +78,8 @@ export const ProfileColumn = styled(BaseCol)` export const GHButton = styled(GitHubButton)` &.ant-btn { display: none; - } - @media only screen and ${media.lg} { - &.ant-btn { + @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 index aa92a2f03..8b7471939 100644 --- a/src/components/header/components/GithubButton/GitHubButton.styles.ts +++ b/src/components/header/components/GithubButton/GitHubButton.styles.ts @@ -1,6 +1,5 @@ import { GithubOutlined } from '@ant-design/icons'; import styled from 'styled-components'; -import { BASE_COLORS } from '@app/styles/themes/constants'; import { BaseButton } from '@app/components/common/BaseButton/BaseButton'; interface Dark { @@ -8,21 +7,20 @@ interface Dark { } export const Button = styled(BaseButton)` - color: ${(props) => BASE_COLORS[props.$isDark ? 'white' : 'black']}; - background: ${(props) => BASE_COLORS[props.$isDark ? 'black' : 'white']}; + color: ${({ $isDark, theme }) => ($isDark ? theme.white : theme.black)}; + background: ${({ $isDark, theme }) => ($isDark ? theme.black : 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) => BASE_COLORS[props.$isDark ? 'black' : 'white']}; - background: ${(props) => BASE_COLORS[props.$isDark ? 'white' : 'black']}; + color: ${({ $isDark, theme }) => ($isDark ? theme.black : theme.white)}; + background: ${({ $isDark, theme }) => ($isDark ? theme.white : theme.black)}; } } `; diff --git a/src/components/header/components/HeaderSearch/HeaderSearch.styles.ts b/src/components/header/components/HeaderSearch/HeaderSearch.styles.ts index 4c0569898..e6b28edac 100644 --- a/src/components/header/components/HeaderSearch/HeaderSearch.styles.ts +++ b/src/components/header/components/HeaderSearch/HeaderSearch.styles.ts @@ -3,14 +3,14 @@ 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; - @media only screen and ${media.md} { + @media only screen and (${media('md')}) { font-size: 1.625rem; } } @@ -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/notificationsDropdown/NotificationsOverlay/NotificationsOverlay.styles.ts b/src/components/header/components/notificationsDropdown/NotificationsOverlay/NotificationsOverlay.styles.ts index 1fe0366c7..2b6cc857d 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; } `; 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..3c0547937 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'; @@ -15,7 +15,7 @@ export const Text = styled(BaseTypography.Text)` display: block; } - @media only screen and ${media.md} { + @media only screen and (${media('md')}) { font-size: 1rem; } `; diff --git a/src/components/header/components/searchDropdown/SearchDropdown.styles.ts b/src/components/header/components/searchDropdown/SearchDropdown.styles.ts index 41434c76a..d3395f3dc 100644 --- a/src/components/header/components/searchDropdown/SearchDropdown.styles.ts +++ b/src/components/header/components/searchDropdown/SearchDropdown.styles.ts @@ -1,17 +1,17 @@ import styled from 'styled-components'; import { BasePopover } from '@app/components/common/BasePopover/BasePopover'; -import { BREAKPOINTS, media } from '@app/styles/themes/constants'; +import { media } from '@app/utils/utils'; export const Popover = styled(BasePopover)` .ant-popover { - box-shadow: var(--box-shadow); + box-shadow: ${({ theme }) => theme.boxShadow}; - @media only screen and ${media.xs} and (max-width: ${BREAKPOINTS.md - 0.02}px) { + @media only screen and (${media('xs')}) and (max-width: ${({ theme }) => theme.breakpoints.md - 0.02}px) { width: calc(100vw - 16px); max-width: 600px; } - @media only screen and ${media.md} { + @media only screen and (${media('md')}) { width: 323px; } } 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..30e94628e 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 { @@ -27,7 +27,7 @@ export const FilterWrapper = styled.div` export const CheckBox = styled(BaseCheckbox)` font-size: 0.75rem; - @media only screen and ${media.md} { + @media only screen and (${media('md')}) { font-size: 0.875rem; } `; 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 4e1c27ee7..0f744ea3f 100644 --- a/src/components/header/components/searchDropdown/searchOverlay/SearchResults/SearchResults.styles.ts +++ b/src/components/header/components/searchDropdown/searchOverlay/SearchResults/SearchResults.styles.ts @@ -1,5 +1,5 @@ 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` @@ -11,10 +11,9 @@ export const SearchResultsWrapper = styled.div` & .ant-list-header { font-size: 0.75rem; padding-bottom: 6px; + color: ${({ theme }) => theme.primary}; - color: var(--primary-color); - - @media only screen and ${media.md} { + @media only screen and (${media('md')}) { font-size: 0.875rem; } } @@ -26,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/dropdowns/settingsDropdown/settingsOverlay/nightModeSettings/NightTimeSlider/NightTimeSlider.styles.ts b/src/components/header/dropdowns/settingsDropdown/settingsOverlay/nightModeSettings/NightTimeSlider/NightTimeSlider.styles.ts index 93c505e73..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,10 +11,10 @@ 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 */ @@ -48,7 +47,7 @@ export const ShadowWrapper = styled(InnerWrapper)` `; 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/layouts/AuthLayout/AuthLayout.styles.ts b/src/components/layouts/AuthLayout/AuthLayout.styles.ts index f85cc158f..feac63455 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,16 +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; } & .ant-form-item-explain-error { - font-size: ${FONT_SIZE.xs}; + font-size: ${({ theme }) => theme.fontSizes.xs}; } & .ant-form-item-label label { - font-size: ${FONT_SIZE.xs}; + font-size: ${({ theme }) => theme.fontSizes.xs}; line-height: 1.25rem; } @@ -112,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 { @@ -121,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 { @@ -136,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; @@ -176,8 +177,8 @@ export const BackIcon = styled(LeftOutlined)` `; 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; @@ -187,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..83010664e 100644 --- a/src/components/layouts/main/MainContent/MainContent.tsx +++ b/src/components/layouts/main/MainContent/MainContent.tsx @@ -1,6 +1,7 @@ import styled, { css } from 'styled-components'; -import { LAYOUT, media } from '@app/styles/themes/constants'; +import { LAYOUT } from '@app/styles/themes/constants'; import { BaseLayout } from '@app/components/common/BaseLayout/BaseLayout'; +import { media } from '@app/utils/utils'; interface HeaderProps { $isTwoColumnsLayout: boolean; @@ -13,11 +14,11 @@ export default styled(BaseLayout.Content)` flex-direction: column; justify-content: space-between; - @media only screen and ${media.md} { + @media only screen and (${media('md')}) { padding: ${LAYOUT.desktop.paddingVertical} ${LAYOUT.desktop.paddingHorizontal}; } - @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 db6d58206..1b905a2fb 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,17 +9,14 @@ interface Header { export const Header = styled(BaseLayout.Header)
` line-height: 1.5; - background: var(--layout-header-bg-color); - + background: ${({ theme }) => theme.layoutHeaderBg}; padding-top: 1rem; padding-bottom: 1rem; - @media only screen and ${media.md} { + @media only screen and (${media('md')}) { padding: ${LAYOUT.desktop.paddingVertical} ${LAYOUT.desktop.paddingHorizontal}; height: ${LAYOUT.desktop.headerHeight}; - } - @media only screen and ${media.md} { ${(props) => props?.$isTwoColumnsLayoutHeader && css` 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 8cfd55a76..44a6b40e4 100644 --- a/src/components/layouts/main/sider/MainSider/MainSider.styles.ts +++ b/src/components/layouts/main/sider/MainSider/MainSider.styles.ts @@ -1,30 +1,27 @@ 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)` - &.ant-layout-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} { - &.ant-layout-sider { + &.ant-layout-sider { + position: fixed; + + @media only screen and (${media('xl')}) { position: unset; } } @@ -35,12 +32,12 @@ interface Collapse { } export const CollapseButton = styled(BaseButton)` - background: var(--collapse-background-color); - - border: 1px solid var(--border-color); + 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 && @@ -48,13 +45,11 @@ export const CollapseButton = styled(BaseButton)` right: -1rem; `} - color: var(--text-secondary-color); - &.ant-btn:not(:disabled):hover, &.ant-btn:not(:disabled):focus { - color: var(--text-secondary-color); - background: var(--primary-color); - border: 1px solid var(--border-color); + color: ${({ theme }) => theme.textSecondary}; + background: ${({ theme }) => theme.primary}; + border: 1px solid ${({ theme }) => theme.border}; } `; @@ -63,7 +58,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}); } `; @@ -82,7 +77,7 @@ export const SiderLogoDiv = styled.div` 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}; @@ -93,5 +88,5 @@ export const BrandSpan = styled.span` margin: 0 1rem; font-weight: 700; font-size: 1.125rem; - color: var(--white); + 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 c63b82a19..5c6cb9628 100644 --- a/src/components/layouts/main/sider/SiderMenu/SiderMenu.styles.ts +++ b/src/components/layouts/main/sider/SiderMenu/SiderMenu.styles.ts @@ -8,7 +8,7 @@ export const Menu = styled(BaseMenu)` } .ant-menu-item.ant-menu-item-selected::after { - border-color: var(--primary-color); + border-color: ${({ theme }) => theme.primary}; } .ant-menu-item:not(:last-child), 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..d0c08a117 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,10 +13,10 @@ 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}; } `; @@ -35,26 +35,26 @@ 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}; } `; @@ -65,15 +65,7 @@ export const IconWrapper = styled.div` 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: ${({ isActive, theme }) => (isActive ? theme.primary : theme.timelineBackground)}; + color: ${({ isActive, theme }) => (isActive ? theme.textSecondary : 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/bloodScreeningCard/BloodScreeningCard/BloodScreeningCard.styles.ts b/src/components/medical-dashboard/bloodScreeningCard/BloodScreeningCard/BloodScreeningCard.styles.ts index b249469c7..4a0994084 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%; @@ -15,11 +14,11 @@ export const TitleWrapper = styled.div` export const ActiveItem = styled.div` background: #ecf6ff; height: 3.125rem; - border-radius: ${BORDER_RADIUS}; + 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..234829ea7 100644 --- a/src/components/medical-dashboard/bloodScreeningCard/BloodScreeningChart/BloodScreeningChart.tsx +++ b/src/components/medical-dashboard/bloodScreeningCard/BloodScreeningChart/BloodScreeningChart.tsx @@ -1,6 +1,6 @@ -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'; diff --git a/src/components/medical-dashboard/bloodScreeningCard/BloodScreeningTable/BloodScreeningTable.styles.ts b/src/components/medical-dashboard/bloodScreeningCard/BloodScreeningTable/BloodScreeningTable.styles.ts index 18f05b9cd..41fe9c0a7 100644 --- a/src/components/medical-dashboard/bloodScreeningCard/BloodScreeningTable/BloodScreeningTable.styles.ts +++ b/src/components/medical-dashboard/bloodScreeningCard/BloodScreeningTable/BloodScreeningTable.styles.ts @@ -1,6 +1,5 @@ import styled from 'styled-components'; import { BaseTable } from '@app/components/common/BaseTable/BaseTable'; -import { FONT_SIZE, FONT_WEIGHT } from '@app/styles/themes/constants'; interface TextProps { $isActive?: boolean; @@ -9,14 +8,14 @@ interface TextProps { 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(BaseTable)` `; 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: ${({ $isActive, theme }) => ($isActive ? theme.fontWeights.semibold : theme.fontWeights.regular)}; `; export const Flag = styled(Text)<{ $isNorm: boolean }>` - color: ${(props) => (props.$isNorm ? 'var(--success-color)' : 'var(--error-color)')}; + color: ${({ $isNorm, theme }) => ($isNorm ? theme.success : theme.error)}; `; diff --git a/src/components/medical-dashboard/favoriteDoctors/DoctorCard/DoctorCard.styles.ts b/src/components/medical-dashboard/favoriteDoctors/DoctorCard/DoctorCard.styles.ts index 82a43b805..cb1508404 100644 --- a/src/components/medical-dashboard/favoriteDoctors/DoctorCard/DoctorCard.styles.ts +++ b/src/components/medical-dashboard/favoriteDoctors/DoctorCard/DoctorCard.styles.ts @@ -1,40 +1,37 @@ +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}; } `; @@ -42,8 +39,8 @@ 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 +49,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..91ae55e1b 100644 --- a/src/components/medical-dashboard/favoriteDoctors/FavoriteDoctorsCard/FavoritesDoctorsCard.styles.ts +++ b/src/components/medical-dashboard/favoriteDoctors/FavoriteDoctorsCard/FavoritesDoctorsCard.styles.ts @@ -19,7 +19,7 @@ export const SliderArrow = styled.div` } &:before { - color: var(--primary-color) !important; + color: ${({ theme }) => theme.primary} !important; font-size: 2rem !important; position: absolute; left: -6px; diff --git a/src/components/medical-dashboard/favoriteDoctors/FavoriteDoctorsCard/FavoritesDoctorsCard.tsx b/src/components/medical-dashboard/favoriteDoctors/FavoriteDoctorsCard/FavoritesDoctorsCard.tsx index e2d94f459..094462a10 100644 --- a/src/components/medical-dashboard/favoriteDoctors/FavoriteDoctorsCard/FavoritesDoctorsCard.tsx +++ b/src/components/medical-dashboard/favoriteDoctors/FavoriteDoctorsCard/FavoritesDoctorsCard.tsx @@ -1,5 +1,6 @@ -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 { DoctorCard } from '../DoctorCard/DoctorCard'; @@ -8,7 +9,6 @@ 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 f7f6cde2f..8902b393d 100644 --- a/src/components/medical-dashboard/mapCard/DoctorsMap/DoctorsMap.styles.ts +++ b/src/components/medical-dashboard/mapCard/DoctorsMap/DoctorsMap.styles.ts @@ -1,6 +1,5 @@ -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 */ @@ -8,8 +7,8 @@ export const DoctorsMap = styled(CountryMap)` 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/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.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..7c94ea3ad 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: ${({ $isActive, theme }) => ($isActive ? theme.fontWeights.bold : 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: ${({ $isDowngrade, theme }) => ($isDowngrade ? theme.error : 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..baffb7713 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 } 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; } - @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 ed0afb81f..309cae733 100644 --- a/src/components/medical-dashboard/statisticsCards/statisticsCard/StatisticsCard/StatisticsCard.styles.ts +++ b/src/components/medical-dashboard/statisticsCards/statisticsCard/StatisticsCard/StatisticsCard.styles.ts @@ -27,6 +27,6 @@ export const StatisticCard = styled(DashboardCard)` overflow: hidden; ${Text} { - color: ${(props) => `var(--${props.$color}-color)`}; + color: ${({ $color, theme }) => theme[$color]}; } `; 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/treatmentCard/TreatmentCalendar/TreatmentCalendar.styles.ts b/src/components/medical-dashboard/treatmentCard/TreatmentCalendar/TreatmentCalendar.styles.ts index d0f738b27..837f2b7b8 100644 --- a/src/components/medical-dashboard/treatmentCard/TreatmentCalendar/TreatmentCalendar.styles.ts +++ b/src/components/medical-dashboard/treatmentCard/TreatmentCalendar/TreatmentCalendar.styles.ts @@ -1,6 +1,5 @@ -import styled, { css } from 'styled-components'; +import styled from 'styled-components'; import { BaseCalendar } from '@app/components/common/BaseCalendar/BaseCalendar'; -import { BORDER_RADIUS, FONT_SIZE, FONT_WEIGHT } from '@app/styles/themes/constants'; interface Event { $isPast: boolean; @@ -16,21 +15,10 @@ export const Event = styled.div` 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}; + 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(BaseCalendar)` @@ -47,18 +35,16 @@ export const Calendar = styled(BaseCalendar)` } .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}; } } } @@ -66,23 +52,22 @@ export const Calendar = styled(BaseCalendar)` &.ant-picker-cell-selected { .ant-picker-cell-inner { box-shadow: 0 5px 15px rgba(0, 89, 171, 0.3); - - background: var(--primary-color); + 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/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..927b68260 100644 --- a/src/components/medical-dashboard/treatmentCard/TreatmentDoctor/TreatmentDoctor.styles.ts +++ b/src/components/medical-dashboard/treatmentCard/TreatmentDoctor/TreatmentDoctor.styles.ts @@ -1,6 +1,6 @@ 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; @@ -11,7 +11,11 @@ export const DoctorName = styled.span` `; export const DoctorCard = styled(BaseCard)` - background: linear-gradient(to bottom, var(--primary-color) 5rem, var(--secondary-background-color) 5rem); + background: linear-gradient( + to bottom, + ${({ theme }) => theme.primary} 5rem, + ${({ theme }) => theme.secondaryBackground} 5rem + ); `; export const DoctorCardBody = styled.div` @@ -28,7 +32,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..a7576550a 100644 --- a/src/components/medical-dashboard/treatmentCard/TreatmentNotFound/TreatmentNotFound.styles.ts +++ b/src/components/medical-dashboard/treatmentCard/TreatmentNotFound/TreatmentNotFound.styles.ts @@ -2,7 +2,7 @@ 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; 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 bcc563207..eefd49c62 100644 --- a/src/components/nft-dashboard/Balance/components/TopUpBalanceButton/TopUpBalanceButton.styles.ts +++ b/src/components/nft-dashboard/Balance/components/TopUpBalanceButton/TopUpBalanceButton.styles.ts @@ -3,6 +3,6 @@ import styled from 'styled-components'; export const TopUpButton = styled(BaseButton)` &.ant-btn-background-ghost { - color: var(--text-secondary-color); + color: ${({ theme }) => theme.textSecondary}; } `; 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..914667d38 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: ${({ $color, theme }) => theme[$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 dbb678df2..4a58e8104 100644 --- a/src/components/nft-dashboard/common/NFTCard/NFTCard.styles.ts +++ b/src/components/nft-dashboard/common/NFTCard/NFTCard.styles.ts @@ -7,12 +7,12 @@ interface CardInternalProps { export const Card = styled(BaseCard)` &.ant-card:not(.ant-card-bordered) { - box-shadow: var(--box-shadow-nft-color); + 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 55d80d674..2ad90ab53 100644 --- a/src/components/nft-dashboard/common/ViewAll/ViewAll.styles.ts +++ b/src/components/nft-dashboard/common/ViewAll/ViewAll.styles.ts @@ -1,6 +1,5 @@ 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; @@ -8,16 +7,15 @@ interface ViewAllInternalProps { export const ViewAllBtn = styled(BaseButton)` &.ant-btn { - font-size: ${FONT_SIZE.xs}; + 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 ${({ theme }) => 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..a56ac82a3 100644 --- a/src/components/nft-dashboard/recently-added/RecentlyAddedNft.styles.ts +++ b/src/components/nft-dashboard/recently-added/RecentlyAddedNft.styles.ts @@ -1,6 +1,5 @@ import styled from 'styled-components'; import { BaseButton } from '@app/components/common/BaseButton/BaseButton'; -import { BREAKPOINTS } from '@app/styles/themes/constants'; export const SectionWrapper = styled.div` .slick-slide > div { @@ -14,7 +13,7 @@ export const SectionWrapper = styled.div` margin-bottom: -40px; } - @media only screen and (max-width: ${BREAKPOINTS.md - 0.02}px) { + @media only screen and (max-width: ${({ theme }) => theme.breakpoints.md - 0.02}px) { display: flex; flex-direction: column; width: 100%; @@ -33,5 +32,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/nft-card/NftCard.styles.ts b/src/components/nft-dashboard/recently-added/nft-card/NftCard.styles.ts index d0ba9bfe0..a244c2716 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 } 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 (max-width: ${({ theme }) => theme.breakpoints.md - 0.02}px) { &: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..24d6a7f91 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: ${({ $color, theme }) => theme[$color]}; `; diff --git a/src/components/nft-dashboard/trending-collections/TrendingCollections.styles.ts b/src/components/nft-dashboard/trending-collections/TrendingCollections.styles.ts index 13b8425b2..a56ac82a3 100644 --- a/src/components/nft-dashboard/trending-collections/TrendingCollections.styles.ts +++ b/src/components/nft-dashboard/trending-collections/TrendingCollections.styles.ts @@ -1,6 +1,5 @@ import styled from 'styled-components'; import { BaseButton } from '@app/components/common/BaseButton/BaseButton'; -import { BREAKPOINTS } from '@app/styles/themes/constants'; export const SectionWrapper = styled.div` .slick-slide > div { @@ -14,7 +13,7 @@ export const SectionWrapper = styled.div` margin-bottom: -40px; } - @media only screen and (max-width: ${BREAKPOINTS.md - 0.02}px) { + @media only screen and (max-width: ${({ theme }) => theme.breakpoints.md - 0.02}px) { display: flex; flex-direction: column; width: 100%; @@ -33,5 +32,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/collection/TrendingCollection.styles.ts b/src/components/nft-dashboard/trending-collections/collection/TrendingCollection.styles.ts index 1f47a4f5d..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,7 +1,7 @@ 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 { @@ -13,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` @@ -37,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` @@ -79,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)` @@ -89,13 +79,12 @@ export const BidButton = styled(BaseButton)` top: 20px; right: 20px; padding: 10px 14px; + font-size: ${({ theme }) => theme.fontSizes.md}; &.ant-btn-background-ghost { - color: var(--text-secondary-color); - border-color: var(--text-secondary-color); + color: ${({ theme }) => theme.textSecondary}; + border-color: ${({ theme }) => theme.textSecondary}; } - - font-size: ${FONT_SIZE.md}; `; export const Card = styled(NFTCard)` @@ -116,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-creators/TrendingCreators.styles.ts b/src/components/nft-dashboard/trending-creators/TrendingCreators.styles.ts index 93f9f12a0..cb26432b4 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 } from '@app/utils/utils'; export const StoriesModal = styled(BaseModal)` - @media only screen and (max-width: ${BREAKPOINTS.md - 0.02}px) { + @media only screen and (max-width: ${({ theme }) => theme.breakpoints.md - 0.02}px) { 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/story/TrendingCreatorsStory.styles.ts b/src/components/nft-dashboard/trending-creators/story/TrendingCreatorsStory.styles.ts index 812f29f8d..5db3f5c8b 100644 --- a/src/components/nft-dashboard/trending-creators/story/TrendingCreatorsStory.styles.ts +++ b/src/components/nft-dashboard/trending-creators/story/TrendingCreatorsStory.styles.ts @@ -13,7 +13,7 @@ export const CreatorButton = styled.button` 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..642121588 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: 1rem; + margin-bottom: 1rem; + font-weight: 600; + 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..f64c14d32 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,7 +37,7 @@ 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; } } @@ -49,7 +48,7 @@ export const Title = styled(BaseTypography.Text)` font-weight: 700; margin-bottom: 0.5rem; - @media only screen and ${media.xl} { + @media only screen and (${media('xl')}) { font-size: 1.5rem; margin-bottom: 1rem; } @@ -58,7 +57,7 @@ export const Title = styled(BaseTypography.Text)` export const Subtitle = styled(BaseTypography.Text)` margin-bottom: 2rem; - @media only screen and ${media.xl} { + @media only screen and (${media('xl')}) { font-weight: 600; font-size: 1rem; margin-bottom: 2.5rem; @@ -69,10 +68,9 @@ 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} { + @media only screen and (${media('xl')}) { height: 2.5rem; margin-bottom: 1rem; } @@ -85,14 +83,11 @@ export const FullnessLine = styled.div` height: 100%; padding-right: 0.625rem; border-radius: 50px; - width: ${(props) => props.width}%; + background: linear-gradient(90deg, ${({ theme }) => theme.warning} 0%, ${({ theme }) => 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} { + @media only screen and (${media('xl')}) { font-size: 1rem; font-weight: 600; padding-right: 0.875rem; @@ -102,14 +97,13 @@ export const FullnessLine = styled.div` export const Text = styled(BaseTypography.Text)` font-size: 0.75rem; 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} { + @media only screen and (${media('xl')}) { font-size: 0.875rem; text-align: left; } diff --git a/src/components/profile/profileCard/ProfileNav/ProfileNav.styles.ts b/src/components/profile/profileCard/ProfileNav/ProfileNav.styles.ts index 8e5580d1f..973f0a072 100644 --- a/src/components/profile/profileCard/ProfileNav/ProfileNav.styles.ts +++ b/src/components/profile/profileCard/ProfileNav/ProfileNav.styles.ts @@ -20,21 +20,21 @@ export const Btn = styled(BaseButton)` column-gap: 12px; &.ant-btn:not(:disabled):hover { - background-color: rgba(var(--primary-rgb-color), 0.05); + 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(${({ theme }) => theme.rgb.primary}, 0.05); `}; & > span:first-of-type { padding: 0.625rem; border-radius: 10px; - color: ${(props) => `var(--${props.color}-color)`}; + color: ${({ color, theme }) => theme[color]}; - background-color: rgba(var(--primary-rgb-color), 0.05); + background-color: rgba(${({ theme }) => theme.rgb.primary}, 0.05); } `; 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..65fe5820a 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,4 +1,3 @@ -import { BORDER_RADIUS } from '@app/styles/themes/constants'; import PhoneInput from 'react-phone-number-input/input'; import styled from 'styled-components'; @@ -9,12 +8,9 @@ export const PhoneNumberInput = styled(PhoneInput as any)` 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/twoFactorAuth/TwoFactorOptions/TwoFactorOptions.styles.ts b/src/components/profile/profileCard/profileFormNav/nav/SecuritySettings/twoFactorAuth/TwoFactorOptions/TwoFactorOptions.styles.ts index 6597d9790..ee0087395 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..1fc9ccdfb 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; 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..b0d2622c9 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,5 +1,5 @@ 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)` @@ -7,7 +7,7 @@ export const Description = styled(BaseTypography.Text)` font-size: 0.75rem; margin-bottom: 1rem; - @media only screen and ${media.md} { + @media only screen and (${media('md')}) { font-size: 1rem; margin-bottom: 2rem; } diff --git a/src/components/profile/profileCard/profileFormNav/nav/payments/paymentHistory/Payment/Payment.styles.ts b/src/components/profile/profileCard/profileFormNav/nav/payments/paymentHistory/Payment/Payment.styles.ts index 9925664d4..f96f47f56 100644 --- a/src/components/profile/profileCard/profileFormNav/nav/payments/paymentHistory/Payment/Payment.styles.ts +++ b/src/components/profile/profileCard/profileFormNav/nav/payments/paymentHistory/Payment/Payment.styles.ts @@ -5,8 +5,7 @@ export const Header = styled.div` padding: 1.5rem 3.5rem; display: flex; align-items: center; - - background-color: var(--secondary-background-color); + background-color: ${({ theme }) => theme.secondaryBackground}; `; export const AvatarWrapper = 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); } `; @@ -48,8 +46,7 @@ export const Item = styled.div` export const Subtitle = styled(BaseTypography.Text)` font-weight: 500; font-size: 0.75rem; - - color: var(--primary-color); + 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..da1598c23 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 { media } from '@app/utils/utils'; import { BaseTypography } from '@app/components/common/BaseTypography/BaseTypography'; interface ContentWrapperProps { @@ -12,19 +12,19 @@ export const ContentWrapper = styled.div` !props.isEmptyHistory && `margin: 0 -${defaultPaddings.mobile[1]}px -${defaultPaddings.mobile[0]}px -${defaultPaddings.mobile[1]}px`}; - @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`}; } - @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} { + @media only screen and (${media('md')}) { font-size: 1rem; } `; 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 4e0aa423f..3c03925c3 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 @@ -5,12 +5,11 @@ export const PaymentHistoryTable = styled(BaseTable)` .ant-table-thead > tr { th, td { - border-block: 1px solid rgba(var(--primary-rgb-color), 0.3); + border-block: 1px solid rgba(${({ theme }) => theme.rgb.primary}, 0.3); } th { - color: var(--primary-color); - + color: ${({ theme }) => theme.primary}; text-align: center; &::before { @@ -20,7 +19,7 @@ export const PaymentHistoryTable = styled(BaseTable)` } .ant-table-tbody > tr > td { - border-bottom: 1px solid rgba(var(--primary-rgb-color), 0.3); + border-bottom: 1px solid rgba(${({ theme }) => theme.rgb.primary}, 0.3); font-weight: 600; font-size: 1rem; } 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 306de2672..f3bae0d50 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 @@ -12,7 +12,6 @@ export const BtnWrapper = styled.div` 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/paymentForm/CardThemeItem/CardThemeItem.styles.ts b/src/components/profile/profileCard/profileFormNav/nav/payments/paymentMethod/paymentForm/CardThemeItem/CardThemeItem.styles.ts index 7f1698bba..8111e08a3 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; @@ -15,12 +14,15 @@ export const BackgroundWrapper = styled.div` height: 3.125rem; 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; + ${(props) => + props.isActive && + css` + background: url(${props.background}); + `}; + & > div { background: ${(props) => `url(${props.background})`}; background-size: cover; @@ -28,9 +30,12 @@ export const BackgroundWrapper = styled.div` &:hover { opacity: 0.7; - - ${(props) => `background: url(${props.background})`}; background-size: cover; + + ${(props) => + css` + background: url(${props.background}); + `}; } `; @@ -38,8 +43,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/tables/BasicTable/BasicTable.tsx b/src/components/tables/BasicTable/BasicTable.tsx index ae73b8eda..7ec90a5b3 100644 --- a/src/components/tables/BasicTable/BasicTable.tsx +++ b/src/components/tables/BasicTable/BasicTable.tsx @@ -1,10 +1,11 @@ -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 { 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'; @@ -26,6 +27,7 @@ export const BasicTable: React.FC = () => { const { t } = useTranslation(); const { isMounted } = useMounted(); const { notification } = useFeedback(); + const theme = useTheme(); const fetch = useCallback( (pagination: Pagination) => { @@ -128,7 +130,7 @@ export const BasicTable: React.FC = () => { {tags.map((tag: Tag) => { return ( - + ); })} diff --git a/src/controllers/modalController.tsx b/src/controllers/modalController.tsx index a4643dc68..4f8feb98d 100644 --- a/src/controllers/modalController.tsx +++ b/src/controllers/modalController.tsx @@ -1,5 +1,4 @@ import styled from 'styled-components'; -import { FONT_SIZE, FONT_WEIGHT, HEIGHT } from '@app/styles/themes/constants'; import { ModalStaticFunctions } from 'antd/es/modal/confirm'; import { CheckCircleOutlined, @@ -14,54 +13,52 @@ const ModalStyles = styled.div` .ant-modal-confirm-warning &, .ant-modal-confirm-error & { .ant-modal-content { - background-color: var(--background-color); + background-color: ${({ theme }) => theme.background}; .ant-modal-confirm-title { - color: var(--heading-color); - font-size: ${FONT_SIZE.lg}; + color: ${({ theme }) => theme.heading}; + font-size: ${({ theme }) => theme.fontSizes.lg}; } .ant-modal-confirm-content { - color: var(--text-main-color); - font-size: ${FONT_SIZE.md}; + color: ${({ theme }) => theme.textMain}; + font-size: ${({ theme }) => theme.fontSizes.md}; } .ant-modal-confirm-btns { .ant-btn.ant-btn-primary { - font-size: ${FONT_SIZE.md}; - font-weight: ${FONT_WEIGHT.semibold}; - background-color: var(--primary-color); - border-color: var(--primary-color); - height: ${HEIGHT.md}; + 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 modalRender = (node: React.ReactNode) => {node}; - -type ModalType = Pick; +const Icons = { + success: CheckCircleOutlined, + warning: ExclamationCircleOutlined, + info: InfoCircleOutlined, + error: CloseCircleOutlined, +} as const; -const openInfo = (modal: ModalType): ModalType['info'] => { - return (props) => modal.info({ modalRender, icon: , ...props }); -}; +const modalRender = (node: React.ReactNode) => {node}; -const openSuccess = (modal: ModalType): ModalType['success'] => { - return (props) => modal.success({ modalRender, icon: , ...props }); -}; +type IconType = 'info' | 'success' | 'warning' | 'error'; -const openWarning = (modal: ModalType): ModalType['warning'] => { - return (props) => modal.warning({ modalRender, icon: , ...props }); -}; +type ModalType = Pick; -const openError = (modal: ModalType): ModalType['error'] => { - return (props) => modal.error({ modalRender, icon: , ...props }); +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: openInfo(modal), - success: openSuccess(modal), - warning: openWarning(modal), - error: openError(modal), + 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 c327b962a..f42ff0a4a 100644 --- a/src/controllers/notificationController.tsx +++ b/src/controllers/notificationController.tsx @@ -1,8 +1,7 @@ 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 { FONT_SIZE, FONT_WEIGHT } from '@app/styles/themes/constants'; -import { defineColorBySeverity } from '@app/utils/utils'; +import { colorTypeFrom } from '@app/utils/utils'; interface IconWrapperProps { $isOnlyTitle: boolean; @@ -25,27 +24,27 @@ const Message = styled.div` ${(props) => props.$isOnlyTitle ? css` - font-size: ${FONT_SIZE.md}; + font-size: ${({ theme }) => theme.fontSizes.md}; height: 2rem; - font-weight: ${FONT_WEIGHT.semibold}; + font-weight: ${({ theme }) => theme.fontWeights.semibold}; margin-inline-start: 9px; ` : css` - font-size: ${FONT_SIZE.xxl}; + font-size: ${({ theme }) => theme.fontSizes.xxl}; height: 3rem; - font-weight: ${FONT_WEIGHT.bold}; + font-weight: ${({ theme }) => theme.fontWeights.bold}; margin-inline-start: 21px; `} .ant-notification-notice.ant-notification-notice-${(props) => props.$type} & { - color: ${(props) => defineColorBySeverity(props.$type)}; + color: ${(props) => props.theme[colorTypeFrom(props.$type)]}; } `; const Description = styled.div` color: #404040; - font-size: ${FONT_SIZE.md}; - font-weight: ${FONT_WEIGHT.semibold}; + font-size: ${({ theme }) => theme.fontSizes.md}; + font-weight: ${({ theme }) => theme.fontWeights.semibold}; line-height: 1.375rem; margin-inline-start: 22px; `; @@ -68,8 +67,6 @@ const Icons = { const open = (type: IconType, notification: NotificationType): NotificationOpener => { const Icon = Icons[type]; - const colorType = type === 'info' ? 'primary' : type; - return ({ message, description, ...props }) => notification[type]({ icon: ( @@ -86,8 +83,6 @@ const open = (type: IconType, notification: NotificationType): NotificationOpene style: { minHeight: '6rem', padding: '2rem', - border: `1px solid ${defineColorBySeverity(type)}`, - background: `var(--notification-${colorType}-color)`, }, ...props, type, diff --git a/src/hooks/useResponsive.ts b/src/hooks/useResponsive.ts index 8731f3d83..4e5d589eb 100644 --- a/src/hooks/useResponsive.ts +++ b/src/hooks/useResponsive.ts @@ -1,4 +1,4 @@ -import { BREAKPOINTS, media } from '@app/styles/themes/constants'; +import { useTheme } from 'styled-components'; import { MediaQueryAllQueryable, MediaQueryMatchers, useMediaQuery } from 'react-responsive'; interface ResponsiveReturnValues { @@ -17,21 +17,23 @@ 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 isMobile = useMediaQuery({ query: `(min-width: ${theme.breakpoints.xs}px)` }); + const isTablet = useMediaQuery({ query: `(min-width: ${theme.breakpoints.md}px)` }); + const isDesktop = useMediaQuery({ query: `(min-width: ${theme.breakpoints.xl}px)` }); + const isBigScreen = useMediaQuery({ query: `(min-width: ${theme.breakpoints.xxl}px)` }); const mobileOnly = useMediaQuery({ - query: `(max-width: ${BREAKPOINTS.md - 0.02}px)`, + query: `(max-width: ${theme.breakpoints.md - 0.02}px)`, }); const tabletOnly = useMediaQuery({ - query: `(min-width: ${BREAKPOINTS.md}px) and (max-width: ${BREAKPOINTS.xl - 0.02}px)`, + query: `(min-width: ${theme.breakpoints.md}px) and (max-width: ${theme.breakpoints.xl - 0.02}px)`, }); const desktopOnly = useMediaQuery({ - query: `(min-width: ${BREAKPOINTS.xl}px) and (max-width: ${BREAKPOINTS.xxl - 0.02}px)`, + query: `(min-width: ${theme.breakpoints.xl}px) and (max-width: ${theme.breakpoints.xxl - 0.02}px)`, }); return { diff --git a/src/pages/DashboardPages/DashboardPage.styles.ts b/src/pages/DashboardPages/DashboardPage.styles.ts index 150653bb1..432233222 100644 --- a/src/pages/DashboardPages/DashboardPage.styles.ts +++ b/src/pages/DashboardPages/DashboardPage.styles.ts @@ -1,6 +1,7 @@ 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}; @@ -9,12 +10,12 @@ export const RightSideCol = styled(BaseCol)` 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} { + @media only screen and (${media('xl')}) { padding: ${LAYOUT.desktop.paddingVertical} ${LAYOUT.desktop.paddingHorizontal}; height: calc(100vh - ${LAYOUT.desktop.headerHeight}); overflow: auto; diff --git a/src/pages/maps/ReactSimpleMapsPage/ReactSimpleMapsPage.tsx b/src/pages/maps/ReactSimpleMapsPage/ReactSimpleMapsPage.tsx index e3bdd4eb1..5af830d60 100644 --- a/src/pages/maps/ReactSimpleMapsPage/ReactSimpleMapsPage.tsx +++ b/src/pages/maps/ReactSimpleMapsPage/ReactSimpleMapsPage.tsx @@ -1,8 +1,6 @@ -import React from 'react'; - import { useTranslation } from 'react-i18next'; import { ComposableMap, Geographies, Geography, Marker } from 'react-simple-maps'; -import styled from 'styled-components'; +import styled, { useTheme } from 'styled-components'; import { PageTitle } from '@app/components/common/PageTitle/PageTitle'; import { MapsCard } from '@app/pages/maps/maps.styles'; @@ -30,6 +28,7 @@ const markers = [ const ReactSimpleMaps: React.FC = () => { const { t } = useTranslation(); + const theme = useTheme(); return ( <> @@ -45,12 +44,7 @@ const ReactSimpleMaps: React.FC = () => { {({ geographies }) => geographies.map((geo) => ( - + )) } @@ -58,7 +52,7 @@ const ReactSimpleMaps: React.FC = () => { { - + {name} 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/UIComponentsPage.styles.ts b/src/pages/uiComponentsPages/UIComponentsPage.styles.ts index 860117dee..b7baf2c21 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; } + .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/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/UploadsPage.tsx b/src/pages/uiComponentsPages/forms/UploadsPage.tsx index ec33d36b5..d31c1ccf1 100644 --- a/src/pages/uiComponentsPages/forms/UploadsPage.tsx +++ b/src/pages/uiComponentsPages/forms/UploadsPage.tsx @@ -6,20 +6,21 @@ 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 { 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; `; diff --git a/src/pages/uiComponentsPages/modals/PopconfirmsPage.tsx b/src/pages/uiComponentsPages/modals/PopconfirmsPage.tsx index 8afd7c544..44f313dc0 100644 --- a/src/pages/uiComponentsPages/modals/PopconfirmsPage.tsx +++ b/src/pages/uiComponentsPages/modals/PopconfirmsPage.tsx @@ -6,16 +6,17 @@ 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 { 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}; } `; 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/styles/GlobalStyle.ts b/src/styles/GlobalStyle.ts index 02a1ba4c8..31aeca5e2 100644 --- a/src/styles/GlobalStyle.ts +++ b/src/styles/GlobalStyle.ts @@ -1,22 +1,12 @@ import * as styled from 'styled-components'; import { resetCss } from './resetCss'; -import { FONT_FAMILY } from './themes/constants'; -import { getThemeVariables, commonThemeVariables } from './themes/themeVariables'; +import { colorTypeFrom } from '@app/utils/utils'; export default styled.createGlobalStyle` ${resetCss} - [data-theme='light'], :root { - ${getThemeVariables('light')} - } - - [data-theme='dark'] { - ${getThemeVariables('dark')} - } - - :root { - ${commonThemeVariables}; + color-scheme: light dark; } [data-no-transition] * { @@ -25,15 +15,27 @@ export default styled.createGlobalStyle` button, input { - font-family: ${FONT_FAMILY.main}, sans-serif; + font-family: ${({ theme }) => theme.fontFamilies.main}, sans-serif; } a { - color: var(--primary-color); + color: ${({ theme }) => theme.primary}; &:hover, :active { - color: var(--ant-primary-5); + color: ${({ theme }) => theme.primary5}; } } + + .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)]}; + } + `, + )} + } `; diff --git a/src/styles/resetCss.ts b/src/styles/resetCss.ts index 308b1458a..fc95e8f63 100644 --- a/src/styles/resetCss.ts +++ b/src/styles/resetCss.ts @@ -10,11 +10,13 @@ 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; diff --git a/src/styles/themeConfig.tsx b/src/styles/themeConfig.tsx index 8da02a25d..6a88daa65 100644 --- a/src/styles/themeConfig.tsx +++ b/src/styles/themeConfig.tsx @@ -1,220 +1,118 @@ import type { ThemeConfig } from 'antd'; -import type { ThemeType } from '@app/interfaces/interfaces'; -import { - FONT_FAMILY, - FONT_SIZE, - FONT_WEIGHT, - BORDER_RADIUS, - BREAKPOINTS, - BASE_COLORS, - HEIGHT, -} from '@app/styles/themes/constants'; -import { antThemeObject, themeObject } from './themes/themeVariables'; -import { hexToRGB } from '@app/utils/utils'; - -const remToPixels = (s: `${number}rem`) => parseFloat(s) * 16; - -const parseNumber = (s: `${number}` | `${number}px`) => parseFloat(s); - -const fontFamily = `'${FONT_FAMILY.main}', sans-serif`; - -const borderRadius = parseNumber(BORDER_RADIUS); +import { remToPixels } from '@app/utils/utils'; +import { DefaultTheme } from 'styled-components'; const 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)'; -export const getThemeConfig = (theme: ThemeType): ThemeConfig => { - const currentTheme = themeObject[theme]; - const antTheme = antThemeObject[theme]; +export const getThemeConfig = (theme: DefaultTheme): ThemeConfig => { + const fontFamily = `'${theme.fontFamilies.main}', sans-serif`; + const borderRadius = parseInt(theme.borderRadius); - const colorFillAlter = `rgba(${hexToRGB(currentTheme.primary)}, 0.05)`; + const colorFillAlter = `rgba(${theme.rgb.primary}, 0.05)`; - const controlOutline = `rgba(${hexToRGB(currentTheme.primary)}, 0.2)`; + const controlOutline = `rgba(${theme.rgb.primary}, 0.2)`; // In some properties CSS variables are not parsed properly. return { token: { - colorPrimary: currentTheme.primary, - colorInfo: currentTheme.primary, - colorSuccess: currentTheme.success, - colorError: currentTheme.error, - colorWarning: currentTheme.warning, - boxShadow: currentTheme.boxShadow, - colorTextHeading: currentTheme.heading, - colorTextDescription: currentTheme.subText, - colorBgContainer: currentTheme.background, - colorText: currentTheme.textMain, - controlItemBgHover: currentTheme.itemHoverBg, - colorBgBase: currentTheme.backgroundColorBase, - colorBorder: currentTheme.borderBase, - colorBgContainerDisabled: currentTheme.disabledBg, - colorTextDisabled: currentTheme.disable, - colorBgElevated: currentTheme.background, + 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: currentTheme.inputPlaceholder, - colorPrimaryHover: antTheme.primary5, - ...(theme === 'dark' - ? { - colorSuccessBg: antThemeObject[theme].successBg, - colorSuccessBorder: antThemeObject[theme].successBorder, - } - : {}), + colorTextPlaceholder: theme.inputPlaceholder, + colorPrimaryHover: theme.primary5, + colorSuccessBg: theme['successBg'], + colorSuccessBorder: theme.successBorder, fontFamily, fontFamilyCode: fontFamily, - fontSize: remToPixels(FONT_SIZE.md), - fontSizeSM: remToPixels(FONT_SIZE.xs), - controlHeightSM: remToPixels(HEIGHT.xs), - controlHeight: remToPixels(HEIGHT.md), - controlHeightLG: remToPixels(HEIGHT.lg), + 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: '#f0f0f0', + wireframe: true, controlOutline, controlTmpOutline: controlOutline, controlOutlineWidth: 2, lineWidthFocus: 0, screenXSMin: 0, - screenXS: BREAKPOINTS.xs, - screenXSMax: BREAKPOINTS.sm - 1, - screenSMMin: BREAKPOINTS.sm, - screenSM: BREAKPOINTS.sm, - screenSMMax: BREAKPOINTS.md - 1, - screenMDMin: BREAKPOINTS.md, - screenMD: BREAKPOINTS.md, - screenMDMax: BREAKPOINTS.lg - 1, - screenLGMin: BREAKPOINTS.lg, - screenLG: BREAKPOINTS.lg, - screenLGMax: BREAKPOINTS.xl - 1, - screenXLMin: BREAKPOINTS.xl, - screenXL: BREAKPOINTS.xl, - screenXLMax: BREAKPOINTS.xxl - 1, - screenXXLMin: BREAKPOINTS.xxl, - screenXXL: BREAKPOINTS.xxl, + 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: { Layout: { controlHeight: 34, controlHeightLG: 12.8, - colorBgBody: currentTheme.layoutBodyBg, - colorBgHeader: currentTheme.layoutSiderBg, - }, - Alert: { - colorInfoBg: '#dfefff', - colorText: BASE_COLORS.black, - colorTextHeading: BASE_COLORS.black, - marginSM: 15, - paddingContentVerticalSM: 8, - paddingMD: 15, - paddingContentHorizontalLG: 15, - }, - Card: { - colorTextHeading: currentTheme.textMain, - padding: 20, - paddingLG: 20, - boxShadowTertiary: currentTheme.boxShadow, - }, - Tabs: { - colorPrimaryHover: antTheme.primary5, - colorPrimary: currentTheme.primary, - colorPrimaryActive: antTheme.primary7, - colorTextDisabled: currentTheme.disable, - colorBorderSecondary: '#f0f0f0', + colorBgBody: theme.layoutBodyBg, + colorBgHeader: theme.layoutSiderBg, }, Tree: { - controlHeightSM: remToPixels(HEIGHT.xxs), + controlHeightSM: remToPixels(theme.heights.xxs), controlInteractiveSize: 16, }, - Table: { - borderRadiusLG: 0, - colorBorderSecondary: '#b3cbe1', - colorTextHeading: currentTheme.primary, - colorFillAlter, - controlItemBgActive: antTheme.primary1, - colorSplit: 'rgba(0, 0, 0, 0.15)', - controlItemBgActiveHover: `rgba(${hexToRGB(currentTheme.primary)}, 0.12)`, - }, Checkbox: { colorBgContainer: 'transparent', - colorPrimary: currentTheme.primary, - colorTextDisabled: currentTheme.disable, + colorPrimary: theme.primary, + colorTextDisabled: theme.disabled, controlInteractiveSize: 16, marginXS: 8, }, Tag: { - fontSize: remToPixels(FONT_SIZE.xs), + fontSize: remToPixels(theme.fontSizes.xs), }, Select: { - fontSizeSM: remToPixels(FONT_SIZE.xs), - colorTextTertiary: currentTheme.icon, - colorTextQuaternary: currentTheme.textMain, // arrow color - colorFillSecondary: currentTheme.backgroundColorBase, - colorIcon: currentTheme.icon, - colorIconHover: currentTheme.iconHover, - colorPrimary: currentTheme.primary, - colorPrimaryHover: antTheme.primary5, - controlItemBgActive: antTheme.primary1, - controlItemBgHover: currentTheme.itemHoverBg, - }, - Steps: { - wireframe: true, - iconSize: remToPixels(HEIGHT.xs), - iconFontSize: remToPixels(FONT_SIZE.lg), - controlHeight: remToPixels(HEIGHT.md), - controlHeightSM: remToPixels(HEIGHT.xxs), - fontSizeHeading3: remToPixels(FONT_SIZE.xxl), - colorPrimary: currentTheme.primary, - }, - Spin: { - controlHeight: remToPixels(HEIGHT.xs), - controlHeightLG: remToPixels(HEIGHT.sm), - colorPrimary: currentTheme.primary, + fontSizeSM: remToPixels(theme.fontSizes.xs), + 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(HEIGHT.xs), - controlHeight: remToPixels(HEIGHT.md), - controlHeightLG: remToPixels(HEIGHT.lg), + controlHeightSM: remToPixels(theme.heights.xs), + controlHeight: remToPixels(theme.heights.md), + controlHeightLG: remToPixels(theme.heights.lg), gradientFromColor: 'rgba(190, 190, 190, 0.2)', }, - Switch: { - controlHeight: remToPixels(HEIGHT.xs), - colorPrimary: currentTheme.primary, - colorWhite: currentTheme.background, - lineHeight: 1.375, - colorPrimaryBorder: antTheme.primary1, - opacityLoading: 0.4, - }, - Menu: { - controlHeightLG: remToPixels(HEIGHT.md), - fontSize: remToPixels(FONT_SIZE.xs), - colorFillAlter: `rgba(${hexToRGB(antThemeObject['light'].primary6)}, 0.05)`, - colorBgContainer: 'unset', - controlItemBgActive: 'unset', - colorBgTextHover: 'transparent', - itemSelectedColor: currentTheme.textSiderPrimary, - colorText: currentTheme.textSiderSecondary, - colorSplit: 'transparent', - activeBarWidth: 2, - marginXXS: 4, - controlHeightSM: 30, - itemMarginInline: 0, - }, - Divider: { - colorSplit: 'rgba(0, 0, 0, 0.06)', - }, - Popover: { - zIndexPopup: 2000, - wireframe: true, - controlHeight: 34, - sizePopupArrow: 20, - }, - Popconfirm: { - fontWeightStrong: parseNumber(FONT_WEIGHT.semibold), - colorPrimary: currentTheme.primary, - }, Notification: { zIndexPopup: 9999, width: 36 * 16, @@ -222,113 +120,59 @@ export const getThemeConfig = (theme: ThemeType): ThemeConfig => { paddingLG: 20, paddingContentHorizontalLG: 2 * 16, lineHeightLG: 2, - colorSuccess: currentTheme.success, - colorInfo: currentTheme.primary, - colorWarning: currentTheme.warning, - colorError: currentTheme.error, + colorSuccess: theme.success, + colorInfo: theme.primary, + colorWarning: theme.warning, + colorError: theme.error, colorIconHover: 'rgba(0, 0, 0, 0.67)', - fontSizeLG: remToPixels(FONT_SIZE.xxl), + fontSizeLG: remToPixels(theme.fontSizes.xxl), marginSM: 0, boxShadow: modalBoxShadow, controlHeightLG: 15 / 0.55, - wireframe: true, - }, - Empty: { - controlHeightLG: remToPixels(HEIGHT.sm), }, Input: { - colorTextPlaceholder: currentTheme.inputPlaceholder, - colorTextDisabled: currentTheme.disable, - colorPrimaryHover: antTheme.primary5, - fontWeightStrong: parseNumber(FONT_WEIGHT.semibold), + colorTextPlaceholder: theme.inputPlaceholder, + colorTextDisabled: theme.disabled, + colorPrimaryHover: theme.primary5, + fontWeightStrong: theme.fontWeights.semibold, colorFillAlter, controlOutlineWidth: 0, }, - InputNumber: { - colorPrimary: antTheme.primary5, - }, Form: { marginLG: 16, - colorInfoBorderHover: antTheme.primary5, + colorInfoBorderHover: theme.primary5, }, Avatar: { - colorTextPlaceholder: currentTheme.avatarBg, - colorBorderBg: BASE_COLORS.white, - controlHeightSM: remToPixels(HEIGHT.xxs), - controlHeight: remToPixels(HEIGHT.xs), - controlHeightLG: remToPixels(HEIGHT.sm), - }, - Badge: { - colorPrimary: currentTheme.primary, - colorTextPlaceholder: '#d9d9d9', - fontSizeSM: remToPixels(FONT_SIZE.xxs), + colorTextPlaceholder: theme.avatarBg, + colorBorderBg: theme.white, + controlHeightSM: remToPixels(theme.heights.xxs), + controlHeight: remToPixels(theme.heights.xs), + controlHeightLG: remToPixels(theme.heights.sm), }, Button: { - colorPrimary: currentTheme.primary, - colorLinkHover: antTheme.primary5, + colorPrimary: theme.primary, + colorLinkHover: theme.primary5, controlOutlineWidth: 0, }, - Breadcrumb: { - fontSizeIcon: 10, - colorTextDescription: currentTheme.breadcrumb, - }, - Rate: { - starColor: '#ffc24b', - colorFillContent: '#f0f0f0', - }, Radio: { - colorPrimary: currentTheme.primary, - wireframe: true, + colorPrimary: theme.primary, controlItemBgActiveDisabled: '#e6e6e6', }, - Result: { - fontSizeHeading3: remToPixels(FONT_SIZE.xxl), - lineHeightHeading3: 1.8, - }, - Pagination: { - wireframe: true, - colorPrimary: currentTheme.primary, - controlItemBgActiveDisabled: '#e6e6e6', - itemSizeSM: 24, - controlHeightLG: remToPixels(HEIGHT.sm), - }, - Slider: { - colorPrimaryBorder: antTheme.primary3, - colorPrimary: antTheme.primary4, - colorPrimaryBorderHover: antTheme.primary4, - colorFillSecondary: '#e1e1e1', - colorBorderSecondary: '#e1e1e1', - colorFillContentHover: '#e1e1e1', - colorFillTertiary: currentTheme.backgroundColorBase, - handleSize: 11, - handleSizeHover: 11, - handleLineWidth: 2, - handleLineWidthHover: 2, - colorTextDisabled: currentTheme.disable, - }, - Calendar: { - controlHeightSM: remToPixels(HEIGHT.xs) / 1.5, - }, Modal: { - colorTextDescription: currentTheme.icon, - colorIcon: currentTheme.icon, + colorTextDescription: theme.icon, + colorIcon: theme.icon, boxShadow: modalBoxShadow, - wireframe: true, lineHeight: 1.57, }, - Progress: { - marginXS: 0, - colorFillSecondary: currentTheme.backgroundColorBase, - }, DatePicker: { - colorIcon: currentTheme.textLight, - colorTextDisabled: currentTheme.textLight, + colorIcon: theme.textLight, + colorTextDisabled: theme.textLight, colorPrimary: '#1c68a6', - controlItemBgActive: antTheme.primary1, - colorTextPlaceholder: currentTheme.inputPlaceholder, - fontWeightStrong: parseNumber(FONT_WEIGHT.medium), - controlHeightSM: remToPixels(HEIGHT.xxs), - controlHeightLG: remToPixels(HEIGHT.sm), + controlItemBgActive: theme.primary1, + colorTextPlaceholder: theme.inputPlaceholder, + fontWeightStrong: theme.fontWeights.medium, + controlHeightSM: remToPixels(theme.heights.xxs), + controlHeightLG: remToPixels(theme.heights.sm), padding: 13, paddingXXS: 2, }, @@ -338,8 +182,8 @@ export const getThemeConfig = (theme: ThemeType): ThemeConfig => { controlHeight: 34, }, Upload: { - colorFillAlter, - colorPrimaryHover: antTheme.primary5, + 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 118c6725a..7d33346b8 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,14 +8,14 @@ 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: { @@ -32,7 +34,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 +45,19 @@ 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 HEIGHT = { xxs: '1.5rem', @@ -63,7 +65,7 @@ export const HEIGHT = { sm: '2.5rem', md: '3.125rem', lg: '4rem', -} as const; +} as const satisfies Partial; export const BREAKPOINTS = { xs: 360, @@ -72,15 +74,4 @@ export const BREAKPOINTS = { lg: 992, xl: 1280, xxl: 1920, -} as const; - -const getMedia = (breakpoint: T): `(min-width: ${T}px)` => `(min-width: ${breakpoint}px)`; - -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), -}; +} as const satisfies Partial; diff --git a/src/styles/themes/dark/darkTheme.ts b/src/styles/themes/dark/darkTheme.ts index 6a872bbbb..7ce520e86 100644 --- a/src/styles/themes/dark/darkTheme.ts +++ b/src/styles/themes/dark/darkTheme.ts @@ -1,62 +1,34 @@ -import { shadeColor } from '@app/utils/utils'; +import { hexToRGB, shadeColor } from '@app/utils/utils'; import { graphic } from 'echarts'; -import { BASE_COLORS } from '../constants'; -import type { ITheme } from '../types'; +import { BASE_COLORS, BORDER_RADIUS, BREAKPOINTS, FONT_FAMILY, FONT_SIZE, FONT_WEIGHT, HEIGHT } from '../constants'; +import type { ColorType, ITheme } from '../types'; -const chartColors = { - chartTooltipLabel: '#6a7985', - chartColor1: '#339CFD', - chartColor1Tint: '#339CFD', // update - chartColor2: '#dc88f5', - chartColor2Tint: '#dc88f5', // update - chartColor3: '#FFB765', - chartColor3Tint: '#FFB765', // update - chartColor4: '#306955', - chartColor4Tint: '#306955', // update - 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)', - }, - ]), -} as const satisfies Partial; +const colorTypes = { + primary: '#339CFD', + success: '#57D682', + warning: '#FFB765', + error: '#FF5252', +} as const satisfies Record; + +const background = '#25284B'; export const darkColorsTheme = { - primary: '#339CFD', primary1: '#7568f6', + primary2: '#d6f1ff', + primary3: '#ade0ff', + primary4: '#85ccff', + primary5: '#5cb6ff', + primary6: '#339cfd', + primary7: '#2078d6', + primary8: '#1259b0', + primary9: '#073d8a', + primary10: '#042963', + 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 +38,44 @@ export const darkColorsTheme = { 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: { + primary: hexToRGB(colorTypes.primary), + success: hexToRGB(colorTypes.success), + warning: hexToRGB(colorTypes.warning), + error: hexToRGB(colorTypes.error), + background: hexToRGB(background), + }, + 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,20 +88,52 @@ export const darkColorsTheme = { breadcrumb: '#a9a9a9', icon: '#a9a9a9', iconHover: '#ffffff', - ...chartColors, + chartTooltipLabel: '#6a7985', + chartColor1: '#339CFD', + chartColor1Tint: '#339CFD', + chartColor2: '#dc88f5', + chartColor2Tint: '#dc88f5', + chartColor3: '#FFB765', + chartColor3Tint: '#FFB765', + chartColor4: '#306955', + chartColor4Tint: '#306955', + chartColor5: '#ff3d71', + chartColor5Tint: '#ff3d71', + 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: HEIGHT, + borderRadius: BORDER_RADIUS, + fontWeights: FONT_WEIGHT, + fontFamilies: FONT_FAMILY, + breakpoints: BREAKPOINTS, } as const satisfies ITheme; - -export const antDarkColorsTheme = { - primary1: darkColorsTheme.primary1, - primary2: '#d6f1ff', - primary3: '#ade0ff', - primary4: '#85ccff', - primary5: '#5cb6ff', - primary6: '#339cfd', - primary7: '#2078d6', - primary8: '#1259b0', - primary9: '#073d8a', - primary10: '#042963', - successBg: '#e6fff2', - successBorder: '#79fcc4', -} as const; diff --git a/src/styles/themes/light/lightTheme.ts b/src/styles/themes/light/lightTheme.ts index eeaf23c6f..e07ec9da0 100644 --- a/src/styles/themes/light/lightTheme.ts +++ b/src/styles/themes/light/lightTheme.ts @@ -1,62 +1,34 @@ -import { shadeColor } from '@app/utils/utils'; +import { hexToRGB, shadeColor } from '@app/utils/utils'; import { graphic } from 'echarts'; -import { BASE_COLORS } from '../constants'; -import type { ITheme } from '../types'; +import { BASE_COLORS, BORDER_RADIUS, BREAKPOINTS, FONT_FAMILY, FONT_SIZE, FONT_WEIGHT, HEIGHT } from '../constants'; +import type { ColorType, ITheme } from '../types'; -const chartColors = { - chartTooltipLabel: '#6A7985', - chartColor1: '#01509A', - chartColor1Tint: '#2983D8', - chartColor2: '#35A0DC', - chartColor2Tint: '#67C5FA', - chartColor3: '#FFB155', - chartColor3Tint: '#FFA800', - chartColor4: '#31A652', - 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 Partial; +const colorTypes = { + primary: '#01509A', + success: '#30AF5B', + warning: '#FFB155', + error: '#FF5252', +} as const satisfies Record; + +const background = BASE_COLORS.white; export const lightColorsTheme = { - primary: '#01509A', primary1: '#f5f5f5', + primary2: '#85b3cc', + primary3: '#5e9abf', + primary4: '#3b81b3', + primary5: '#1c68a6', + primary6: '#01509a', + primary7: '#003773', + primary8: '#00224d', + primary9: '#001026', + primary10: '#000000', + successBg: undefined, + successBorder: undefined, 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 +38,44 @@ export const lightColorsTheme = { 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: { + primary: hexToRGB(colorTypes.primary), + success: hexToRGB(colorTypes.success), + warning: hexToRGB(colorTypes.warning), + error: hexToRGB(colorTypes.error), + background: hexToRGB(background), + }, + 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,18 +88,52 @@ export const lightColorsTheme = { breadcrumb: 'rgba(0, 0, 0, 0.45)', icon: '#a9a9a9', iconHover: 'rgba(0, 0, 0, 0.75)', - ...chartColors, + chartTooltipLabel: '#6A7985', + chartColor1: '#01509A', + chartColor1Tint: '#2983D8', + chartColor2: '#35A0DC', + chartColor2Tint: '#67C5FA', + chartColor3: '#FFB155', + chartColor3Tint: '#FFA800', + chartColor4: '#31A652', + 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)', + }, + ]), + ...BASE_COLORS, + fontSizes: FONT_SIZE, + heights: HEIGHT, + borderRadius: BORDER_RADIUS, + fontWeights: FONT_WEIGHT, + fontFamilies: FONT_FAMILY, + breakpoints: BREAKPOINTS, } as const satisfies ITheme; - -export const antLightColorsTheme = { - primary1: lightColorsTheme.primary1, - primary2: '#85b3cc', - primary3: '#5e9abf', - primary4: '#3b81b3', - primary5: '#1c68a6', - primary6: '#01509a', - primary7: '#003773', - primary8: '#00224d', - primary9: '#001026', - primary10: '#000000', -} as const; diff --git a/src/styles/themes/themeVariables.ts b/src/styles/themes/themeVariables.ts index e6060eeef..903ad9f84 100644 --- a/src/styles/themes/themeVariables.ts +++ b/src/styles/themes/themeVariables.ts @@ -1,129 +1,15 @@ -import { ThemeType } from '@app/interfaces/interfaces'; -import { hexToRGB } from '@app/utils/utils'; -import { FlattenSimpleInterpolation, css } from 'styled-components'; -import { BASE_COLORS } from './constants'; -import { darkColorsTheme, antDarkColorsTheme } from './dark/darkTheme'; -import { lightColorsTheme, antLightColorsTheme } from './light/lightTheme'; +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: antLightColorsTheme, - dark: antDarkColorsTheme, -}; +type Merge = { [K in keyof (A | B)]: A[K] | B[K] }; -export const getThemeVariables = (theme: ThemeType): FlattenSimpleInterpolation => 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}; - - --ant-primary-1: ${antThemeObject[theme].primary1}; - --ant-primary-2: ${antThemeObject[theme].primary2}; - --ant-primary-3: ${antThemeObject[theme].primary3}; - --ant-primary-4: ${antThemeObject[theme].primary4}; - --ant-primary-5: ${antThemeObject[theme].primary5}; - --ant-primary-6: ${antThemeObject[theme].primary6}; - --ant-primary-7: ${antThemeObject[theme].primary7}; - --ant-primary-8: ${antThemeObject[theme].primary8}; - --ant-primary-9: ${antThemeObject[theme].primary9}; - --ant-primary-10: ${antThemeObject[theme].primary10}; -`; - -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}; -`; +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..fd529b9bf 100644 --- a/src/styles/themes/types.ts +++ b/src/styles/themes/types.ts @@ -1,14 +1,58 @@ -import { LinearGradientObject } from 'echarts'; +import 'styled-components'; +import type { LinearGradientObject } from 'echarts'; -export interface ITheme { - primary: string; - primary1: string; +type IndexedPrimary = Record<`primary${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10}`, string>; + +type ChartColor = Record<`chartColor${1 | 2 | 3 | 4 | 5}${'Tint' | ''}`, string>; + +export type NamedColors = Record< + | 'black' + | 'blue' + | 'cyan' + | 'gray' + | 'green' + | 'lime' + | 'magenta' + | 'maroon' + | 'navy' + | 'olive' + | 'purple' + | 'red' + | 'silver' + | 'teal' + | 'white' + | 'yellow' + | 'orange' + | 'pink' + | 'skyblue' + | 'violet' + | `${'light'}${'blue' | 'cyan' | 'gray' | 'green' | 'yellow'}`, + string +>; + +export type ColorType = 'primary' | 'success' | 'warning' | 'error'; + +type ColorTypes = 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 type RelativeSizeKey = 'sm' | 'md' | 'lg' | `${'x' | 'xx' | 'xxx' | 'xxxx'}${'s' | 'l'}`; + +export type RelativeSizes = Record | Record; + +export interface ITheme extends ColorTypes, IndexedPrimary, ChartColor, 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: Record; + 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,10 @@ export interface ITheme { breadcrumb: string; icon: string; iconHover: string; + borderRadius: string; + fontWeights: FontWeights; + fontFamilies: Partial; + fontSizes: Partial; + heights: Partial; + breakpoints: Partial; } diff --git a/src/utils/utils.ts b/src/utils/utils.ts index cc610e23d..31cd72966 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 @@ -48,35 +50,29 @@ 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)'; - } + typeof prop === 'number' ? `${prop}px` : Array.isArray(prop) ? `${prop[0]}px ${prop[1]}px` : prop; + +export const colorTypeFrom = (severity: Priority | NotificationType | undefined): ColorType => { + const lookup: Record = { + [Priority.INFO]: 'primary', + [Priority.LOW]: 'success', + [Priority.MEDIUM]: 'warning', + [Priority.HIGH]: 'error', + + ['info']: 'primary', + ['mention']: 'primary', + ['success']: 'success', + ['warning']: 'warning', + ['error']: 'error', + }; + + return severity !== undefined && Object.hasOwn(lookup, severity) ? lookup[severity] : 'primary'; }; -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 media = + (breakpoint: T) => + ({ theme }: { theme: DefaultTheme }): `(min-width: ${DefaultTheme['breakpoints'][T]}px)` => + `(min-width: ${theme.breakpoints[breakpoint]}px)`; // eslint-disable-next-line @typescript-eslint/no-explicit-any export const mergeBy = (a: any[], b: any[], key: string): any[] => @@ -110,6 +106,8 @@ export const shadeColor = (color: string, percent: number): string => { return '#' + RR + GG + BB; }; +export const remToPixels = (s: `${number}rem` | string): number => parseFloat(s) * 16; + export const hexToHSL = (hex: string): { h: number; s: number; l: number } => { const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); From 74a040a97ab2ca90f120fbbded8e6aa6e5e9237a Mon Sep 17 00:00:00 2001 From: Alexandr Buhlak <48954743+saha80@users.noreply.github.com> Date: Mon, 18 Sep 2023 16:12:27 +0300 Subject: [PATCH 60/81] refactor(#267): simplify color construction --- src/components/common/BaseSwitch/BaseSwitch.styles.tsx | 4 ++-- src/components/common/BaseTable/BaseTable.styles.tsx | 5 ++--- .../treatmentCard/TreatmentDoctor/TreatmentDoctor.styles.ts | 6 +----- .../profile/profileCard/ProfileInfo/ProfileInfo.styles.ts | 2 +- 4 files changed, 6 insertions(+), 11 deletions(-) diff --git a/src/components/common/BaseSwitch/BaseSwitch.styles.tsx b/src/components/common/BaseSwitch/BaseSwitch.styles.tsx index a3fbfe048..7d0da3c57 100644 --- a/src/components/common/BaseSwitch/BaseSwitch.styles.tsx +++ b/src/components/common/BaseSwitch/BaseSwitch.styles.tsx @@ -28,7 +28,7 @@ export const Switch = styled((props: React.ComponentProps) => } &.ant-switch[aria-checked='false'] { - background-image: linear-gradient(to right, ${({ theme }) => theme.disabled}, ${({ theme }) => theme.disabled}), - linear-gradient(to right, ${({ theme }) => theme.background}, ${({ theme }) => theme.background}); + 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.tsx b/src/components/common/BaseTable/BaseTable.styles.tsx index 93b5ca634..d5b4bdc65 100644 --- a/src/components/common/BaseTable/BaseTable.styles.tsx +++ b/src/components/common/BaseTable/BaseTable.styles.tsx @@ -1,6 +1,5 @@ import styled, { useTheme } from 'styled-components'; import { Table as AntTable, ConfigProvider } from 'antd'; -import { hexToRGB } from '@app/utils/utils'; export const Table = styled((props: React.ComponentProps) => { const theme = useTheme(); @@ -12,10 +11,10 @@ export const Table = styled((props: React.ComponentProps) => { borderRadiusLG: 0, colorBorderSecondary: '#b3cbe1', colorTextHeading: theme.primary, - colorFillAlter: `rgba(${hexToRGB(theme.primary)}, 0.05)`, + colorFillAlter: `rgba(${theme.rgb.primary}, 0.05)`, controlItemBgActive: theme.primary1, colorSplit: 'rgba(0, 0, 0, 0.15)', - controlItemBgActiveHover: `rgba(${hexToRGB(theme.primary)}, 0.12)`, + controlItemBgActiveHover: `rgba(${theme.rgb.primary}, 0.12)`, }, }, }} diff --git a/src/components/medical-dashboard/treatmentCard/TreatmentDoctor/TreatmentDoctor.styles.ts b/src/components/medical-dashboard/treatmentCard/TreatmentDoctor/TreatmentDoctor.styles.ts index 927b68260..f666d95cf 100644 --- a/src/components/medical-dashboard/treatmentCard/TreatmentDoctor/TreatmentDoctor.styles.ts +++ b/src/components/medical-dashboard/treatmentCard/TreatmentDoctor/TreatmentDoctor.styles.ts @@ -11,11 +11,7 @@ export const DoctorName = styled.span` `; export const DoctorCard = styled(BaseCard)` - background: linear-gradient( - to bottom, - ${({ theme }) => theme.primary} 5rem, - ${({ theme }) => theme.secondaryBackground} 5rem - ); + background: ${({ theme }) => `linear-gradient(to bottom, ${theme.primary} 5rem, ${theme.secondaryBackground} 5rem)`}; `; export const DoctorCardBody = styled.div` diff --git a/src/components/profile/profileCard/ProfileInfo/ProfileInfo.styles.ts b/src/components/profile/profileCard/ProfileInfo/ProfileInfo.styles.ts index f64c14d32..eadc05bec 100644 --- a/src/components/profile/profileCard/ProfileInfo/ProfileInfo.styles.ts +++ b/src/components/profile/profileCard/ProfileInfo/ProfileInfo.styles.ts @@ -84,7 +84,7 @@ export const FullnessLine = styled.div` padding-right: 0.625rem; border-radius: 50px; width: ${(props) => props.width}%; - background: linear-gradient(90deg, ${({ theme }) => theme.warning} 0%, ${({ theme }) => theme.error} 100%); + background: ${({ theme }) => `linear-gradient(90deg, ${theme.warning} 0%, ${theme.error} 100%)`}; color: ${({ theme }) => theme.textSecondary}; @media only screen and (${media('xl')}) { From 81222574481be2296054963a7cb8114d927f6b36 Mon Sep 17 00:00:00 2001 From: Alexandr Buhlak <48954743+saha80@users.noreply.github.com> Date: Mon, 18 Sep 2023 18:09:54 +0300 Subject: [PATCH 61/81] refactor(#267): move hardcoded values to constants --- .../newsFeed/NewsFilter/NewsFilter.styles.ts | 4 +-- .../BarAnimationDelayChart.tsx | 13 ++++---- .../GradientStackedAreaChart.tsx | 2 +- .../charts/LineRaceChart/LineRaceChart.tsx | 9 +++--- .../charts/ScatterChart/ScatterChart.tsx | 4 ++- src/components/charts/VisitorsPieChart.tsx | 4 ++- .../common/BaseButton/BaseButton.styles.ts | 13 -------- .../common/BaseCard/BaseCard.styles.tsx | 2 +- .../common/BaseHashTag/BaseHashTag.styles.ts | 2 +- .../common/BaseRadio/BaseRadio.styles.ts | 4 +-- .../common/BaseRate/BaseRate.styles.tsx | 31 ++++++++++--------- .../common/BaseSlider/BaseSlider.styles.tsx | 6 ++-- .../common/BaseTabs/BaseTabs.styles.tsx | 2 +- src/components/common/Loading/Loading.tsx | 8 ++--- src/components/common/charts/BaseChart.tsx | 8 ++--- .../common/charts/Legend/Legend.tsx | 7 ++--- .../selects/BaseSelect/BaseSelect.styles.ts | 4 +-- .../activityCard/ActivityChart.tsx | 11 +++---- .../BloodScreeningChart.tsx | 15 +++++---- .../covidCard/CovidChart.tsx | 17 +++++----- .../ScreeningsChart/ScreeningsChart.tsx | 17 +++++----- .../StatisticsCard/StatisticsCard.tsx | 7 ++--- .../TreatmentCalendar.styles.ts | 4 +-- .../TotalEarningChart/TotalEarningChart.tsx | 9 +++--- src/components/tables/Tables/Tables.tsx | 7 +++-- src/controllers/notificationController.tsx | 2 +- src/pages/AdvancedFormsPage.tsx | 9 +++--- src/styles/themeConfig.tsx | 2 +- src/styles/themes/dark/darkTheme.ts | 7 +++++ src/styles/themes/light/lightTheme.ts | 7 +++++ src/styles/themes/types.ts | 7 +++++ 31 files changed, 124 insertions(+), 120 deletions(-) diff --git a/src/components/apps/newsFeed/NewsFilter/NewsFilter.styles.ts b/src/components/apps/newsFeed/NewsFilter/NewsFilter.styles.ts index 4c843b8e1..ec2f2ab6b 100644 --- a/src/components/apps/newsFeed/NewsFilter/NewsFilter.styles.ts +++ b/src/components/apps/newsFeed/NewsFilter/NewsFilter.styles.ts @@ -96,7 +96,7 @@ 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: ${({ theme }) => theme.background}; border-radius: ${({ theme }) => theme.borderRadius}; @@ -161,7 +161,7 @@ export const FilterWrapper = styled.div` position: sticky; top: 1.875rem; padding: 1.25rem 1rem; - filter: drop-shadow(0 4px 40px rgba(0, 0, 0, 0.07)); + filter: drop-shadow(${({ theme }) => theme.newsFilterBoxShadow}); background: ${({ theme }) => theme.background}; border-radius: ${({ theme }) => theme.borderRadius}; } diff --git a/src/components/charts/BarAnimationDelayChart/BarAnimationDelayChart.tsx b/src/components/charts/BarAnimationDelayChart/BarAnimationDelayChart.tsx index 3bf37cee1..76e5dd1db 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', }, @@ -85,7 +84,7 @@ export const BarAnimationDelayChart: React.FC = () => { animationEasing: 'elasticOut', }; return ( - + ); diff --git a/src/components/charts/GradientStackedAreaChart/GradientStackedAreaChart.tsx b/src/components/charts/GradientStackedAreaChart/GradientStackedAreaChart.tsx index 06d505031..a535f2c14 100644 --- a/src/components/charts/GradientStackedAreaChart/GradientStackedAreaChart.tsx +++ b/src/components/charts/GradientStackedAreaChart/GradientStackedAreaChart.tsx @@ -200,7 +200,7 @@ export const GradientStackedAreaChart: React.FC = () => { }; return ( - + ); diff --git a/src/components/charts/LineRaceChart/LineRaceChart.tsx b/src/components/charts/LineRaceChart/LineRaceChart.tsx index f5acbdfb9..a7d5c66e9 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', @@ -133,7 +132,7 @@ export const LineRaceChart: React.FC = () => { }; return ( - + ); diff --git a/src/components/charts/ScatterChart/ScatterChart.tsx b/src/components/charts/ScatterChart/ScatterChart.tsx index 4ac1ec721..074ddea03 100644 --- a/src/components/charts/ScatterChart/ScatterChart.tsx +++ b/src/components/charts/ScatterChart/ScatterChart.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { BaseCard } from '@app/components/common/BaseCard/BaseCard'; import { BaseChart } from 'components/common/charts/BaseChart'; import { useTranslation } from 'react-i18next'; +import { useTheme } from 'styled-components'; const data = [ [170.0, 59.0], @@ -109,9 +110,10 @@ const defaultOption = { export const ScatterChart: React.FC = () => { const { t } = useTranslation(); + const theme = useTheme(); return ( - + ); diff --git a/src/components/charts/VisitorsPieChart.tsx b/src/components/charts/VisitorsPieChart.tsx index 0b986c0f3..516475d66 100644 --- a/src/components/charts/VisitorsPieChart.tsx +++ b/src/components/charts/VisitorsPieChart.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { BaseCard } from '@app/components/common/BaseCard/BaseCard'; import { useTranslation } from 'react-i18next'; import { PieChart } from '../common/charts/PieChart'; +import { useTheme } from 'styled-components'; export const VisitorsPieChart: React.FC = () => { const { t } = useTranslation(); @@ -13,9 +14,10 @@ export const VisitorsPieChart: React.FC = () => { { value: 300, name: t('charts.video') }, ]; const name = t('charts.visitorsFrom'); + const theme = useTheme(); return ( - + ); diff --git a/src/components/common/BaseButton/BaseButton.styles.ts b/src/components/common/BaseButton/BaseButton.styles.ts index 6f25c8cbd..67a54058d 100644 --- a/src/components/common/BaseButton/BaseButton.styles.ts +++ b/src/components/common/BaseButton/BaseButton.styles.ts @@ -25,15 +25,6 @@ export const Button = styled(AntButton)` height: unset; `} - &.ant-btn-dangerous { - &.ant-btn-text { - &:focus, - &:not(:disabled):hover { - background: rgba(0, 0, 0, 0.018); - } - } - } - ${(props) => !props.danger && css` @@ -68,10 +59,6 @@ export const Button = styled(AntButton)` color: ${({ theme }) => theme.primary5}; } - &.ant-btn-text { - background-color: rgba(0, 0, 0, 0.018); - } - &.ant-btn-primary { background-color: ${({ theme }) => theme.primary5}; } diff --git a/src/components/common/BaseCard/BaseCard.styles.tsx b/src/components/common/BaseCard/BaseCard.styles.tsx index bc23d6091..3eeb65e9b 100644 --- a/src/components/common/BaseCard/BaseCard.styles.tsx +++ b/src/components/common/BaseCard/BaseCard.styles.tsx @@ -70,6 +70,6 @@ export const Card = styled((props: React.ComponentProps) => { } .ant-card-bordered { - border-color: #f0f0f0; + border-color: ${({ theme }) => theme.split}; } `; diff --git a/src/components/common/BaseHashTag/BaseHashTag.styles.ts b/src/components/common/BaseHashTag/BaseHashTag.styles.ts index 6d8ea1fb9..17f07e707 100644 --- a/src/components/common/BaseHashTag/BaseHashTag.styles.ts +++ b/src/components/common/BaseHashTag/BaseHashTag.styles.ts @@ -9,7 +9,7 @@ export const RemoveTagWrapper = styled.span` `; export const RemoveTagIcon = styled(CloseOutlined)` - color: #ffffff; + color: ${({ theme }) => theme.white}; font-size: ${({ theme }) => theme.fontSizes.xxs}; cursor: pointer; `; diff --git a/src/components/common/BaseRadio/BaseRadio.styles.ts b/src/components/common/BaseRadio/BaseRadio.styles.ts index 518dc6989..62e0c25b0 100644 --- a/src/components/common/BaseRadio/BaseRadio.styles.ts +++ b/src/components/common/BaseRadio/BaseRadio.styles.ts @@ -4,7 +4,7 @@ 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: 0 0 0 3px rgba(${({ theme }) => theme.rgb.primary}, 0.12); + box-shadow: ${({ theme }) => theme.radioBoxShadow}; } &.ant-radio-wrapper { @@ -32,7 +32,7 @@ export const Radio = styled(AntRadio)` export const RadioButton = styled(AntRadio.Button)` &.ant-radio-button-wrapper:has(:focus-visible) { - box-shadow: 0 0 0 3px rgba(${({ theme }) => theme.rgb.primary}, 0.12); + box-shadow: ${({ theme }) => theme.radioBoxShadow}; } &.ant-radio-button-wrapper-disabled { diff --git a/src/components/common/BaseRate/BaseRate.styles.tsx b/src/components/common/BaseRate/BaseRate.styles.tsx index b68691047..ea5f44dcd 100644 --- a/src/components/common/BaseRate/BaseRate.styles.tsx +++ b/src/components/common/BaseRate/BaseRate.styles.tsx @@ -1,19 +1,22 @@ -import styled from 'styled-components'; +import styled, { useTheme } from 'styled-components'; import { Rate as AntRate, ConfigProvider } from 'antd'; -export const Rate = styled((props: React.ComponentProps) => ( - ) => { + const theme = useTheme(); + return ( + - - -))` + }} + > + + + ); +})` font-size: ${({ theme }) => theme.fontSizes.lg}; `; diff --git a/src/components/common/BaseSlider/BaseSlider.styles.tsx b/src/components/common/BaseSlider/BaseSlider.styles.tsx index a74c33c29..995115f9a 100644 --- a/src/components/common/BaseSlider/BaseSlider.styles.tsx +++ b/src/components/common/BaseSlider/BaseSlider.styles.tsx @@ -11,9 +11,9 @@ export const Slider = styled((props: React.ComponentProps) => colorPrimaryBorder: theme.primary3, colorPrimary: theme.primary4, colorPrimaryBorderHover: theme.primary4, - colorFillSecondary: '#e1e1e1', - colorBorderSecondary: '#e1e1e1', - colorFillContentHover: '#e1e1e1', + colorFillSecondary: theme.sliderFillColor, + colorBorderSecondary: theme.sliderFillColor, + colorFillContentHover: theme.sliderFillColor, colorFillTertiary: theme.backgroundColorBase, handleSize: 11, handleSizeHover: 11, diff --git a/src/components/common/BaseTabs/BaseTabs.styles.tsx b/src/components/common/BaseTabs/BaseTabs.styles.tsx index 57a19a91a..c4d94f21d 100644 --- a/src/components/common/BaseTabs/BaseTabs.styles.tsx +++ b/src/components/common/BaseTabs/BaseTabs.styles.tsx @@ -12,7 +12,7 @@ export const Tabs = styled((props: React.ComponentProps) => { colorPrimary: theme.primary, colorPrimaryActive: theme.primary7, colorTextDisabled: theme.disabled, - colorBorderSecondary: '#f0f0f0', + colorBorderSecondary: theme.split, }, }, }} 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/charts/BaseChart.tsx b/src/components/common/charts/BaseChart.tsx index 112cbe1b5..383813f3f 100644 --- a/src/components/common/charts/BaseChart.tsx +++ b/src/components/common/charts/BaseChart.tsx @@ -1,10 +1,8 @@ import React, { CSSProperties, useEffect, useState } from 'react'; -import { DefaultTheme } from 'styled-components'; +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'; export interface BaseChartProps { option?: EChartsOption; @@ -47,13 +45,13 @@ export const getDefaultTooltipStyles = (theme: DefaultTheme): DefaultTooltipStyl }); 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.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/selects/BaseSelect/BaseSelect.styles.ts b/src/components/common/selects/BaseSelect/BaseSelect.styles.ts index 275d22780..8936716cf 100644 --- a/src/components/common/selects/BaseSelect/BaseSelect.styles.ts +++ b/src/components/common/selects/BaseSelect/BaseSelect.styles.ts @@ -32,12 +32,12 @@ export const Select = styled(AntSelect)` &.ant-select-multiple { &.ant-select-disabled .ant-select-selection-item { - color: #bfbfbf; + color: ${({ theme }) => theme.selectionDisabled}; border: 1px solid ${({ theme }) => theme.borderBase}; } .ant-select-selection-item { - border: 1px solid #f0f0f0; + border: 1px solid ${({ theme }) => theme.split}; margin-inline-end: 11px; } diff --git a/src/components/medical-dashboard/activityCard/ActivityChart.tsx b/src/components/medical-dashboard/activityCard/ActivityChart.tsx index 75ab6849f..fcf33f87d 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,7 +13,7 @@ interface ActivityChartProps { } export const ActivityChart: React.FC = ({ data }) => { - const theme = useAppSelector((state) => state.theme.theme); + const theme = useTheme(); const { t } = useTranslation(); @@ -53,7 +52,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 +62,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 +78,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/BloodScreeningChart/BloodScreeningChart.tsx b/src/components/medical-dashboard/bloodScreeningCard/BloodScreeningChart/BloodScreeningChart.tsx index 234829ea7..2795d0fb5 100644 --- a/src/components/medical-dashboard/bloodScreeningCard/BloodScreeningChart/BloodScreeningChart.tsx +++ b/src/components/medical-dashboard/bloodScreeningCard/BloodScreeningChart/BloodScreeningChart.tsx @@ -3,15 +3,14 @@ import { EChartsInstance } from 'echarts-for-react'; 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/covidCard/CovidChart.tsx b/src/components/medical-dashboard/covidCard/CovidChart.tsx index 9a26b304d..4b092134c 100644 --- a/src/components/medical-dashboard/covidCard/CovidChart.tsx +++ b/src/components/medical-dashboard/covidCard/CovidChart.tsx @@ -2,8 +2,7 @@ import React from 'react'; import { BaseChart, getDefaultTooltipStyles } from '@app/components/common/charts/BaseChart'; import { getMarkAreaData, hexToRGB } 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(${hexToRGB(theme.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(${hexToRGB(theme.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/screeningsCard/ScreeningsChart/ScreeningsChart.tsx b/src/components/medical-dashboard/screeningsCard/ScreeningsChart/ScreeningsChart.tsx index 1e53a5850..f75b458ac 100644 --- a/src/components/medical-dashboard/screeningsCard/ScreeningsChart/ScreeningsChart.tsx +++ b/src/components/medical-dashboard/screeningsCard/ScreeningsChart/ScreeningsChart.tsx @@ -4,8 +4,7 @@ import { BaseChart, getDefaultTooltipStyles } from '@app/components/common/chart 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 +24,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 +75,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 +86,7 @@ export const ScreeningsChart: React.FC = ({ firstUser, sec data: firstUser?.data, markArea: { itemStyle: { - color: `rgba(${hexToRGB(themeObject[theme].chartColor1)}, 0.01)`, + color: `rgba(${hexToRGB(theme.chartColor1)}, 0.01)`, }, data: getMarkAreaData(xAxisData), }, @@ -98,7 +97,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 +109,7 @@ export const ScreeningsChart: React.FC = ({ firstUser, sec data: secondUser?.data, markArea: { itemStyle: { - color: `rgba(${hexToRGB(themeObject[theme].chartColor1)}, 0.01)`, + color: `rgba(${hexToRGB(theme.chartColor1)}, 0.01)`, }, data: getMarkAreaData(xAxisData), }, 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/treatmentCard/TreatmentCalendar/TreatmentCalendar.styles.ts b/src/components/medical-dashboard/treatmentCard/TreatmentCalendar/TreatmentCalendar.styles.ts index 837f2b7b8..9598fcedb 100644 --- a/src/components/medical-dashboard/treatmentCard/TreatmentCalendar/TreatmentCalendar.styles.ts +++ b/src/components/medical-dashboard/treatmentCard/TreatmentCalendar/TreatmentCalendar.styles.ts @@ -14,7 +14,7 @@ export const Event = styled.div` right: 0; width: 100%; height: 100%; - box-shadow: 0 5px 15px rgba(0, 89, 171, 0.3); + 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)}; @@ -51,7 +51,7 @@ export const Calendar = styled(BaseCalendar)` &.ant-picker-cell-selected { .ant-picker-cell-inner { - box-shadow: 0 5px 15px rgba(0, 89, 171, 0.3); + box-shadow: ${({ theme }) => theme.treatmentCalendarEventBoxShadow}; background: ${({ theme }) => theme.primary}; .ant-picker-calendar-date-value, 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/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/controllers/notificationController.tsx b/src/controllers/notificationController.tsx index f42ff0a4a..79fdca0cf 100644 --- a/src/controllers/notificationController.tsx +++ b/src/controllers/notificationController.tsx @@ -42,7 +42,7 @@ const Message = styled.div` `; const Description = styled.div` - color: #404040; + color: ${({ theme }) => theme.textDark}; font-size: ${({ theme }) => theme.fontSizes.md}; font-weight: ${({ theme }) => theme.fontWeights.semibold}; line-height: 1.375rem; 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/styles/themeConfig.tsx b/src/styles/themeConfig.tsx index 6a88daa65..92c042aa2 100644 --- a/src/styles/themeConfig.tsx +++ b/src/styles/themeConfig.tsx @@ -49,7 +49,7 @@ export const getThemeConfig = (theme: DefaultTheme): ThemeConfig => { borderRadius, borderRadiusLG: borderRadius, borderRadiusOuter: borderRadius, - colorSplit: '#f0f0f0', + colorSplit: theme.split, wireframe: true, controlOutline, controlTmpOutline: controlOutline, diff --git a/src/styles/themes/dark/darkTheme.ts b/src/styles/themes/dark/darkTheme.ts index 7ce520e86..f771cbe6a 100644 --- a/src/styles/themes/dark/darkTheme.ts +++ b/src/styles/themes/dark/darkTheme.ts @@ -136,4 +136,11 @@ export const darkColorsTheme = { 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(${hexToRGB(colorTypes.primary)}, 0.12)`, + chartsCardPadding: '0 0 1.875rem', + treatmentCalendarEventBoxShadow: '0 5px 15px rgba(0, 89, 171, 0.3)', } as const satisfies ITheme; diff --git a/src/styles/themes/light/lightTheme.ts b/src/styles/themes/light/lightTheme.ts index e07ec9da0..d32c14fb4 100644 --- a/src/styles/themes/light/lightTheme.ts +++ b/src/styles/themes/light/lightTheme.ts @@ -136,4 +136,11 @@ export const lightColorsTheme = { 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(${hexToRGB(colorTypes.primary)}, 0.12)`, + chartsCardPadding: '0 0 1.875rem', + treatmentCalendarEventBoxShadow: '0 5px 15px rgba(0, 89, 171, 0.3)', } as const satisfies ITheme; diff --git a/src/styles/themes/types.ts b/src/styles/themes/types.ts index fd529b9bf..9fbb32581 100644 --- a/src/styles/themes/types.ts +++ b/src/styles/themes/types.ts @@ -106,4 +106,11 @@ export interface ITheme extends ColorTypes, IndexedPrimary, ChartColor, Partial< fontSizes: Partial; heights: Partial; breakpoints: Partial; + selectionDisabled: string; + split: string; + sliderFillColor: string; + radioBoxShadow: string; + newsFilterBoxShadow: string; + chartsCardPadding: string; + treatmentCalendarEventBoxShadow: string; } From 96e4be13f1536acd30139d16749d6facf8447feb Mon Sep 17 00:00:00 2001 From: Alexandr Buhlak <48954743+saha80@users.noreply.github.com> Date: Tue, 19 Sep 2023 16:15:59 +0300 Subject: [PATCH 62/81] fix(#267): stalled white background --- src/components/common/BaseArticle/BaseArticle.styles.ts | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/components/common/BaseArticle/BaseArticle.styles.ts b/src/components/common/BaseArticle/BaseArticle.styles.ts index 7ddbed430..7893aa267 100644 --- a/src/components/common/BaseArticle/BaseArticle.styles.ts +++ b/src/components/common/BaseArticle/BaseArticle.styles.ts @@ -24,10 +24,7 @@ export const Wrapper = styled.div` box-shadow: ${({ theme }) => theme.boxShadow}; border-radius: ${({ theme }) => theme.borderRadius}; transition: 0.3s; - - [data-theme='dark'] & { - background: ${({ theme }) => theme.secondaryBackground}; - } + background: ${({ theme }) => theme.secondaryBackground}; &:hover { box-shadow: ${({ theme }) => theme.boxShadowHover}; From fa79b23adce1305b436f14b30bc07d10207c5e3b Mon Sep 17 00:00:00 2001 From: Alexandr Buhlak <48954743+saha80@users.noreply.github.com> Date: Tue, 19 Sep 2023 16:35:43 +0300 Subject: [PATCH 63/81] refactor: use naming conventions --- .../SignUpForm/{SignUpForm.styles.tsx => SignUpForm.styles.ts} | 0 .../common/BaseCarousel/{Carousel.tsx => BaseCarousel.tsx} | 0 .../FavoriteDoctorsCard/FavoritesDoctorsCard.tsx | 2 +- .../MobileScreenings/MobileScreenings.styles.ts | 2 +- .../nft-dashboard/recently-added/RecentlyAddedNft.tsx | 2 +- .../nft-dashboard/trending-collections/TrendingCollections.tsx | 2 +- .../nft-dashboard/trending-creators/TrendingCreators.tsx | 2 +- 7 files changed, 5 insertions(+), 5 deletions(-) rename src/components/auth/SignUpForm/{SignUpForm.styles.tsx => SignUpForm.styles.ts} (100%) rename src/components/common/BaseCarousel/{Carousel.tsx => BaseCarousel.tsx} (100%) 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/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/medical-dashboard/favoriteDoctors/FavoriteDoctorsCard/FavoritesDoctorsCard.tsx b/src/components/medical-dashboard/favoriteDoctors/FavoriteDoctorsCard/FavoritesDoctorsCard.tsx index 094462a10..f04507857 100644 --- a/src/components/medical-dashboard/favoriteDoctors/FavoriteDoctorsCard/FavoritesDoctorsCard.tsx +++ b/src/components/medical-dashboard/favoriteDoctors/FavoriteDoctorsCard/FavoritesDoctorsCard.tsx @@ -2,7 +2,7 @@ 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'; 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/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/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-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'; From b8731950214a87e1884e85d9703d133e02deed90 Mon Sep 17 00:00:00 2001 From: Alexandr Buhlak <48954743+saha80@users.noreply.github.com> Date: Tue, 19 Sep 2023 16:54:32 +0300 Subject: [PATCH 64/81] refactor(styles): precompute hex to RGB color conversion --- .../covidCard/CovidChart.tsx | 6 +-- .../ScreeningsChart/ScreeningsChart.tsx | 5 +- src/styles/themes/dark/darkTheme.ts | 54 +++++++++++-------- src/styles/themes/light/lightTheme.ts | 54 +++++++++++-------- src/styles/themes/types.ts | 45 ++++++---------- 5 files changed, 84 insertions(+), 80 deletions(-) diff --git a/src/components/medical-dashboard/covidCard/CovidChart.tsx b/src/components/medical-dashboard/covidCard/CovidChart.tsx index 4b092134c..6425c313f 100644 --- a/src/components/medical-dashboard/covidCard/CovidChart.tsx +++ b/src/components/medical-dashboard/covidCard/CovidChart.tsx @@ -1,6 +1,6 @@ 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 { useTheme } from 'styled-components'; @@ -69,7 +69,7 @@ export const CovidChart: React.FC<{ areaStyle: {}, markArea: { itemStyle: { - color: `rgba(${hexToRGB(theme.chartColor1)}, 0.02)`, + color: `rgba(${theme.rgb.chartColor1}, 0.02)`, }, data: dateArr && getMarkAreaData(dateArr), }, @@ -89,7 +89,7 @@ export const CovidChart: React.FC<{ areaStyle: {}, markArea: { itemStyle: { - color: `rgba(${hexToRGB(theme.chartColor5)}, 0.02)`, + color: `rgba(${theme.rgb.chartColor5}, 0.02)`, }, data: dateArr && getMarkAreaData(dateArr), }, diff --git a/src/components/medical-dashboard/screeningsCard/ScreeningsChart/ScreeningsChart.tsx b/src/components/medical-dashboard/screeningsCard/ScreeningsChart/ScreeningsChart.tsx index f75b458ac..224263341 100644 --- a/src/components/medical-dashboard/screeningsCard/ScreeningsChart/ScreeningsChart.tsx +++ b/src/components/medical-dashboard/screeningsCard/ScreeningsChart/ScreeningsChart.tsx @@ -1,7 +1,6 @@ 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 { useTheme } from 'styled-components'; @@ -86,7 +85,7 @@ export const ScreeningsChart: React.FC = ({ firstUser, sec data: firstUser?.data, markArea: { itemStyle: { - color: `rgba(${hexToRGB(theme.chartColor1)}, 0.01)`, + color: `rgba(${theme.rgb.chartColor1}, 0.01)`, }, data: getMarkAreaData(xAxisData), }, @@ -109,7 +108,7 @@ export const ScreeningsChart: React.FC = ({ firstUser, sec data: secondUser?.data, markArea: { itemStyle: { - color: `rgba(${hexToRGB(theme.chartColor1)}, 0.01)`, + color: `rgba(${theme.rgb.chartColor1}, 0.01)`, }, data: getMarkAreaData(xAxisData), }, diff --git a/src/styles/themes/dark/darkTheme.ts b/src/styles/themes/dark/darkTheme.ts index f771cbe6a..e0b78f8de 100644 --- a/src/styles/themes/dark/darkTheme.ts +++ b/src/styles/themes/dark/darkTheme.ts @@ -1,7 +1,7 @@ import { hexToRGB, shadeColor } from '@app/utils/utils'; import { graphic } from 'echarts'; import { BASE_COLORS, BORDER_RADIUS, BREAKPOINTS, FONT_FAMILY, FONT_SIZE, FONT_WEIGHT, HEIGHT } from '../constants'; -import type { ColorType, ITheme } from '../types'; +import type { ChartColors, ColorType, ITheme, IndexedPrimaries } from '../types'; const colorTypes = { primary: '#339CFD', @@ -10,9 +10,7 @@ const colorTypes = { error: '#FF5252', } as const satisfies Record; -const background = '#25284B'; - -export const darkColorsTheme = { +const indexedPrimaries = { primary1: '#7568f6', primary2: '#d6f1ff', primary3: '#ade0ff', @@ -23,6 +21,31 @@ export const darkColorsTheme = { primary8: '#1259b0', primary9: '#073d8a', primary10: '#042963', +} as const satisfies IndexedPrimaries; + +const chartColors = { + chartColor1: '#339CFD', + chartColor1Tint: '#339CFD', + chartColor2: '#dc88f5', + chartColor2Tint: '#dc88f5', + chartColor3: '#FFB765', + chartColor3Tint: '#FFB765', + chartColor4: '#306955', + chartColor4Tint: '#306955', + chartColor5: '#ff3d71', + chartColor5Tint: '#ff3d71', +} as const satisfies ChartColors; + +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%)', @@ -50,13 +73,7 @@ export const darkColorsTheme = { boxShadow: 'none', boxShadowHover: 'none', ...colorTypes, - rgb: { - primary: hexToRGB(colorTypes.primary), - success: hexToRGB(colorTypes.success), - warning: hexToRGB(colorTypes.warning), - error: hexToRGB(colorTypes.error), - background: hexToRGB(background), - }, + rgb, nft: { border: '#797c9a', textLight: '#797C9A', @@ -89,16 +106,7 @@ export const darkColorsTheme = { icon: '#a9a9a9', iconHover: '#ffffff', chartTooltipLabel: '#6a7985', - chartColor1: '#339CFD', - chartColor1Tint: '#339CFD', - chartColor2: '#dc88f5', - chartColor2Tint: '#dc88f5', - chartColor3: '#FFB765', - chartColor3Tint: '#FFB765', - chartColor4: '#306955', - chartColor4Tint: '#306955', - chartColor5: '#ff3d71', - chartColor5Tint: '#ff3d71', + ...chartColors, chartPrimaryGradient: new graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, @@ -140,7 +148,9 @@ export const darkColorsTheme = { split: '#f0f0f0', sliderFillColor: '#e1e1e1', newsFilterBoxShadow: '0 4px 40px rgba(0, 0, 0, 0.07)', - radioBoxShadow: `0 0 0 3px rgba(${hexToRGB(colorTypes.primary)}, 0.12)`, + radioBoxShadow: `0 0 0 3px rgba(${rgb.primary}, 0.12)`, chartsCardPadding: '0 0 1.875rem', 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)', } as const satisfies ITheme; diff --git a/src/styles/themes/light/lightTheme.ts b/src/styles/themes/light/lightTheme.ts index d32c14fb4..6c9ffc872 100644 --- a/src/styles/themes/light/lightTheme.ts +++ b/src/styles/themes/light/lightTheme.ts @@ -1,7 +1,7 @@ import { hexToRGB, shadeColor } from '@app/utils/utils'; import { graphic } from 'echarts'; import { BASE_COLORS, BORDER_RADIUS, BREAKPOINTS, FONT_FAMILY, FONT_SIZE, FONT_WEIGHT, HEIGHT } from '../constants'; -import type { ColorType, ITheme } from '../types'; +import type { ChartColors, ColorType, ITheme, IndexedPrimaries } from '../types'; const colorTypes = { primary: '#01509A', @@ -10,9 +10,7 @@ const colorTypes = { error: '#FF5252', } as const satisfies Record; -const background = BASE_COLORS.white; - -export const lightColorsTheme = { +const indexedPrimaries = { primary1: '#f5f5f5', primary2: '#85b3cc', primary3: '#5e9abf', @@ -23,6 +21,31 @@ export const lightColorsTheme = { primary8: '#00224d', primary9: '#001026', primary10: '#000000', +} as const satisfies IndexedPrimaries; + +const chartColors = { + chartColor1: '#01509A', + chartColor1Tint: '#2983D8', + chartColor2: '#35A0DC', + chartColor2Tint: '#67C5FA', + chartColor3: '#FFB155', + chartColor3Tint: '#FFA800', + chartColor4: '#31A652', + chartColor4Tint: '#89DCA0', + chartColor5: '#FF5252', + chartColor5Tint: '#FFC1C1', +} as const satisfies ChartColors; + +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: undefined, successBorder: undefined, primaryGradient: 'linear-gradient(211.49deg, #006CCF 15.89%, #00509A 48.97%)', @@ -50,13 +73,7 @@ export const lightColorsTheme = { boxShadow: '0 2px 8px 0 rgba(0, 0, 0, 0.07)', boxShadowHover: '0 4px 16px 0 rgba(0, 0, 0, 0.2)', ...colorTypes, - rgb: { - primary: hexToRGB(colorTypes.primary), - success: hexToRGB(colorTypes.success), - warning: hexToRGB(colorTypes.warning), - error: hexToRGB(colorTypes.error), - background: hexToRGB(background), - }, + rgb, nft: { border: '#79819A', textLight: '#79819A', @@ -89,16 +106,7 @@ export const lightColorsTheme = { icon: '#a9a9a9', iconHover: 'rgba(0, 0, 0, 0.75)', chartTooltipLabel: '#6A7985', - chartColor1: '#01509A', - chartColor1Tint: '#2983D8', - chartColor2: '#35A0DC', - chartColor2Tint: '#67C5FA', - chartColor3: '#FFB155', - chartColor3Tint: '#FFA800', - chartColor4: '#31A652', - chartColor4Tint: '#89DCA0', - chartColor5: '#FF5252', - chartColor5Tint: '#FFC1C1', + ...chartColors, chartPrimaryGradient: new graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, @@ -140,7 +148,9 @@ export const lightColorsTheme = { split: '#f0f0f0', sliderFillColor: '#e1e1e1', newsFilterBoxShadow: '0 4px 40px rgba(0, 0, 0, 0.07)', - radioBoxShadow: `0 0 0 3px rgba(${hexToRGB(colorTypes.primary)}, 0.12)`, + radioBoxShadow: `0 0 0 3px rgba(${rgb.primary}, 0.12)`, chartsCardPadding: '0 0 1.875rem', 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)', } as const satisfies ITheme; diff --git a/src/styles/themes/types.ts b/src/styles/themes/types.ts index 9fbb32581..67c0da0c0 100644 --- a/src/styles/themes/types.ts +++ b/src/styles/themes/types.ts @@ -1,39 +1,23 @@ -import 'styled-components'; +import type * as CSS from 'csstype'; import type { LinearGradientObject } from 'echarts'; +import type { Breakpoint } from 'antd'; -type IndexedPrimary = Record<`primary${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10}`, string>; +type IndexedPrimary = `primary${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10}`; -type ChartColor = Record<`chartColor${1 | 2 | 3 | 4 | 5}${'Tint' | ''}`, string>; +export type IndexedPrimaries = Record; -export type NamedColors = Record< - | 'black' - | 'blue' - | 'cyan' - | 'gray' - | 'green' - | 'lime' - | 'magenta' - | 'maroon' - | 'navy' - | 'olive' - | 'purple' - | 'red' - | 'silver' - | 'teal' - | 'white' - | 'yellow' - | 'orange' - | 'pink' - | 'skyblue' - | 'violet' - | `${'light'}${'blue' | 'cyan' | 'gray' | 'green' | 'yellow'}`, - string ->; +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< @@ -43,11 +27,11 @@ export type FontWeights = Record< export type NamedIndexes = Record<'main' | 'secondary' | 'tertiary' | 'quaternary', string>; -export type RelativeSizeKey = 'sm' | 'md' | 'lg' | `${'x' | 'xx' | 'xxx' | 'xxxx'}${'s' | 'l'}`; +export type RelativeSizeKey = Breakpoint | `${'x' | 'xx' | 'xxx' | 'xxxx'}${'s' | 'l'}`; export type RelativeSizes = Record | Record; -export interface ITheme extends ColorTypes, IndexedPrimary, ChartColor, Partial { +export interface ITheme extends ColorTypes, IndexedPrimaries, ChartColors, Partial { primaryGradient: string; light: string; secondary: string; @@ -73,7 +57,7 @@ export interface ITheme extends ColorTypes, IndexedPrimary, ChartColor, Partial< boxShadow: string; boxShadowHover: string; /** @summary strings in the format `'R, G, B'` */ - rgb: Record; + rgb: RGB; nft: NFT; dashboardMapBackground: string; dashboardMapCircleColor: string; @@ -113,4 +97,5 @@ export interface ITheme extends ColorTypes, IndexedPrimary, ChartColor, Partial< newsFilterBoxShadow: string; chartsCardPadding: string; treatmentCalendarEventBoxShadow: string; + modalBoxShadow: string; } From 749e0eb81f98ca3ed4f85288fee24426e89bd794 Mon Sep 17 00:00:00 2001 From: Alexandr Buhlak <48954743+saha80@users.noreply.github.com> Date: Tue, 19 Sep 2023 16:54:51 +0300 Subject: [PATCH 65/81] refactor: move components' ThemeConfig to getThemeConfig --- src/App.tsx | 3 +- .../common/BaseAlert/BaseAlert.styles.ts | 12 ++ .../common/BaseAlert/BaseAlert.styles.tsx | 33 ----- .../common/BaseBadge/BaseBadge.styles.ts | 19 +++ .../common/BaseBadge/BaseBadge.styles.tsx | 36 ----- .../BaseBreadcrumb/BaseBreadcrumb.styles.ts | 12 ++ .../BaseBreadcrumb/BaseBreadcrumb.styles.tsx | 28 ---- .../BaseCalendar/BaseCalendar.styles.ts | 8 + .../BaseCalendar/BaseCalendar.styles.tsx | 24 --- .../common/BaseCalendar/BaseCalendar.tsx | 5 +- ...BaseCard.styles.tsx => BaseCard.styles.ts} | 24 +-- .../common/BaseDivider/BaseDivider.styles.ts | 4 + .../common/BaseDivider/BaseDivider.styles.tsx | 16 -- ...down.styles.tsx => BaseDropdown.styles.ts} | 0 .../common/BaseEmpty/BaseEmpty.styles.ts | 4 + .../common/BaseEmpty/BaseEmpty.styles.tsx | 20 --- .../common/BaseMenu/BaseMenu.styles.ts | 24 +++ .../common/BaseMenu/BaseMenu.styles.tsx | 53 ------- ...on.styles.tsx => BasePagination.styles.ts} | 25 +--- .../common/BasePagination/BasePagination.tsx | 14 +- .../BasePopconfirm/BasePopconfirm.styles.ts | 4 + .../BasePopconfirm/BasePopconfirm.styles.tsx | 20 --- .../common/BasePopover/BasePopover.styles.ts | 4 + .../common/BasePopover/BasePopover.styles.tsx | 18 --- .../BaseProgress/BaseProgress.styles.ts | 4 + .../BaseProgress/BaseProgress.styles.tsx | 20 --- .../common/BaseRate/BaseRate.styles.ts | 6 + .../common/BaseRate/BaseRate.styles.tsx | 22 --- .../common/BaseResult/BaseResult.styles.ts | 8 + .../common/BaseResult/BaseResult.styles.tsx | 25 ---- .../common/BaseSlider/BaseSlider.styles.ts | 16 ++ .../common/BaseSlider/BaseSlider.styles.tsx | 42 ------ .../common/BaseSpin/BaseSpin.styles.ts | 4 + .../common/BaseSpin/BaseSpin.styles.tsx | 22 --- ...seSteps.styles.tsx => BaseSteps.styles.ts} | 27 +--- .../common/BaseSwitch/BaseSwitch.styles.ts | 13 ++ .../common/BaseSwitch/BaseSwitch.styles.tsx | 34 ----- ...seTable.styles.tsx => BaseTable.styles.ts} | 27 +--- .../common/BaseTabs/BaseTabs.styles.ts | 17 +++ .../common/BaseTabs/BaseTabs.styles.tsx | 36 ----- .../inputs/InputNumber/InputNumber.styles.ts | 15 ++ .../inputs/InputNumber/InputNumber.styles.tsx | 33 ----- .../{themeConfig.tsx => themeConfig.ts} | 140 +++++++++++++++++- src/utils/utils.ts | 21 ++- 44 files changed, 349 insertions(+), 593 deletions(-) create mode 100644 src/components/common/BaseAlert/BaseAlert.styles.ts delete mode 100644 src/components/common/BaseAlert/BaseAlert.styles.tsx create mode 100644 src/components/common/BaseBadge/BaseBadge.styles.ts delete mode 100644 src/components/common/BaseBadge/BaseBadge.styles.tsx create mode 100644 src/components/common/BaseBreadcrumb/BaseBreadcrumb.styles.ts delete mode 100644 src/components/common/BaseBreadcrumb/BaseBreadcrumb.styles.tsx create mode 100644 src/components/common/BaseCalendar/BaseCalendar.styles.ts delete mode 100644 src/components/common/BaseCalendar/BaseCalendar.styles.tsx rename src/components/common/BaseCard/{BaseCard.styles.tsx => BaseCard.styles.ts} (66%) create mode 100644 src/components/common/BaseDivider/BaseDivider.styles.ts delete mode 100644 src/components/common/BaseDivider/BaseDivider.styles.tsx rename src/components/common/BaseDropdown/{BaseDropdown.styles.tsx => BaseDropdown.styles.ts} (100%) create mode 100644 src/components/common/BaseEmpty/BaseEmpty.styles.ts delete mode 100644 src/components/common/BaseEmpty/BaseEmpty.styles.tsx create mode 100644 src/components/common/BaseMenu/BaseMenu.styles.ts delete mode 100644 src/components/common/BaseMenu/BaseMenu.styles.tsx rename src/components/common/BasePagination/{BasePagination.styles.tsx => BasePagination.styles.ts} (68%) create mode 100644 src/components/common/BasePopconfirm/BasePopconfirm.styles.ts delete mode 100644 src/components/common/BasePopconfirm/BasePopconfirm.styles.tsx create mode 100644 src/components/common/BasePopover/BasePopover.styles.ts delete mode 100644 src/components/common/BasePopover/BasePopover.styles.tsx create mode 100644 src/components/common/BaseProgress/BaseProgress.styles.ts delete mode 100644 src/components/common/BaseProgress/BaseProgress.styles.tsx create mode 100644 src/components/common/BaseRate/BaseRate.styles.ts delete mode 100644 src/components/common/BaseRate/BaseRate.styles.tsx create mode 100644 src/components/common/BaseResult/BaseResult.styles.ts delete mode 100644 src/components/common/BaseResult/BaseResult.styles.tsx create mode 100644 src/components/common/BaseSlider/BaseSlider.styles.ts delete mode 100644 src/components/common/BaseSlider/BaseSlider.styles.tsx create mode 100644 src/components/common/BaseSpin/BaseSpin.styles.ts delete mode 100644 src/components/common/BaseSpin/BaseSpin.styles.tsx rename src/components/common/BaseSteps/{BaseSteps.styles.tsx => BaseSteps.styles.ts} (66%) create mode 100644 src/components/common/BaseSwitch/BaseSwitch.styles.ts delete mode 100644 src/components/common/BaseSwitch/BaseSwitch.styles.tsx rename src/components/common/BaseTable/{BaseTable.styles.tsx => BaseTable.styles.ts} (72%) create mode 100644 src/components/common/BaseTabs/BaseTabs.styles.ts delete mode 100644 src/components/common/BaseTabs/BaseTabs.styles.tsx create mode 100644 src/components/common/inputs/InputNumber/InputNumber.styles.ts delete mode 100644 src/components/common/inputs/InputNumber/InputNumber.styles.tsx rename src/styles/{themeConfig.tsx => themeConfig.ts} (58%) diff --git a/src/App.tsx b/src/App.tsx index 2d9f1eaa8..a3ae46a12 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -20,6 +20,7 @@ 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(); @@ -32,7 +33,7 @@ const App: React.FC = () => { - + diff --git a/src/components/common/BaseAlert/BaseAlert.styles.ts b/src/components/common/BaseAlert/BaseAlert.styles.ts new file mode 100644 index 000000000..ceb832924 --- /dev/null +++ b/src/components/common/BaseAlert/BaseAlert.styles.ts @@ -0,0 +1,12 @@ +import styled from 'styled-components'; +import { Alert as AntAlert } from 'antd'; + +export const Alert = styled(AntAlert)` + &.ant-alert { + padding-inline: 15px; + } + + .ant-alert-action { + margin-inline-start: 8px; + } +`; diff --git a/src/components/common/BaseAlert/BaseAlert.styles.tsx b/src/components/common/BaseAlert/BaseAlert.styles.tsx deleted file mode 100644 index 8ac7603ae..000000000 --- a/src/components/common/BaseAlert/BaseAlert.styles.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import styled, { useTheme } from 'styled-components'; -import { Alert as AntAlert, ConfigProvider } from 'antd'; - -export const Alert = styled((props: React.ComponentProps) => { - const theme = useTheme(); - return ( - - - - ); -})` - &.ant-alert { - padding-inline: 15px; - } - - .ant-alert-action { - margin-inline-start: 8px; - } -`; diff --git a/src/components/common/BaseBadge/BaseBadge.styles.ts b/src/components/common/BaseBadge/BaseBadge.styles.ts new file mode 100644 index 000000000..27ece7782 --- /dev/null +++ b/src/components/common/BaseBadge/BaseBadge.styles.ts @@ -0,0 +1,19 @@ +import styled from 'styled-components'; +import { Badge as AntBadge } from 'antd'; +import { colorTypeFrom } from '@app/utils/utils'; +import { NotificationType } from '../BaseNotification/BaseNotification'; + +interface BadgeProps { + $severity?: NotificationType; +} + +export const Badge = styled(AntBadge)` + .ant-badge-count { + background: ${({ $severity, theme }) => theme[colorTypeFrom($severity)]}; + font-size: ${({ theme }) => theme.fontSizes.xs}; + } + + .ant-badge-count-sm { + font-size: ${({ theme }) => theme.fontSizes.xs}; + } +`; diff --git a/src/components/common/BaseBadge/BaseBadge.styles.tsx b/src/components/common/BaseBadge/BaseBadge.styles.tsx deleted file mode 100644 index c98885bab..000000000 --- a/src/components/common/BaseBadge/BaseBadge.styles.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import { colorTypeFrom, remToPixels } from '@app/utils/utils'; -import { Badge as AntBadge, ConfigProvider } from 'antd'; -import styled, { useTheme } from 'styled-components'; -import { NotificationType } from '../BaseNotification/BaseNotification'; - -interface BadgeProps { - $severity?: NotificationType; -} - -export const Badge = styled((props: React.ComponentProps) => { - const theme = useTheme(); - return ( - - - - ); -})` - .ant-badge-count { - background: ${({ $severity, theme }) => theme[colorTypeFrom($severity)]}; - font-size: ${({ theme }) => theme.fontSizes.xs}; - } - - .ant-badge-count-sm { - font-size: ${({ theme }) => theme.fontSizes.xs}; - } -`; 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.styles.tsx b/src/components/common/BaseBreadcrumb/BaseBreadcrumb.styles.tsx deleted file mode 100644 index 535f03db6..000000000 --- a/src/components/common/BaseBreadcrumb/BaseBreadcrumb.styles.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import styled, { useTheme } from 'styled-components'; -import { Breadcrumb as AntBreadcrumb, ConfigProvider } from 'antd'; - -export const Breadcrumb = styled((props: React.ComponentProps) => { - const theme = useTheme(); - return ( - - - - ); -})` - &.ant-breadcrumb { - li:last-child { - .ant-breadcrumb-link { - color: ${({ theme }) => theme.textMain}; - } - } - } -`; 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.styles.tsx b/src/components/common/BaseCalendar/BaseCalendar.styles.tsx deleted file mode 100644 index 382343ecc..000000000 --- a/src/components/common/BaseCalendar/BaseCalendar.styles.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import styled, { useTheme } from 'styled-components'; -import { Calendar as AntCalendar, ConfigProvider } from 'antd'; -import { remToPixels } from '@app/utils/utils'; - -export const Calendar = styled((props: React.ComponentProps) => { - const theme = useTheme(); - return ( - - - - ); -})` - .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 index 4d38f36dc..c36a59b91 100644 --- a/src/components/common/BaseCalendar/BaseCalendar.tsx +++ b/src/components/common/BaseCalendar/BaseCalendar.tsx @@ -1,9 +1,8 @@ -import { ComponentProps, FC } from 'react'; import type { Calendar } from 'antd'; import * as S from './BaseCalendar.styles'; -export type BaseCalendarProps = ComponentProps; +export type BaseCalendarProps = React.ComponentProps; -export const BaseCalendar: FC = (props) => { +export const BaseCalendar: React.FC = (props) => { return ; }; diff --git a/src/components/common/BaseCard/BaseCard.styles.tsx b/src/components/common/BaseCard/BaseCard.styles.ts similarity index 66% rename from src/components/common/BaseCard/BaseCard.styles.tsx rename to src/components/common/BaseCard/BaseCard.styles.ts index 3eeb65e9b..520530d41 100644 --- a/src/components/common/BaseCard/BaseCard.styles.tsx +++ b/src/components/common/BaseCard/BaseCard.styles.ts @@ -1,5 +1,5 @@ -import styled, { css, useTheme } from 'styled-components'; -import { Card as AntCard, ConfigProvider } from 'antd'; +import styled, { css } from 'styled-components'; +import { Card as AntCard } from 'antd'; import { normalizeProp } from '@app/utils/utils'; import { media } from '@app/utils/utils'; @@ -8,25 +8,7 @@ interface CardInternalProps { $autoHeight: boolean; } -export const Card = styled((props: React.ComponentProps) => { - const theme = useTheme(); - return ( - - - - ); -})` +export const Card = styled(AntCard)` display: flex; flex-direction: column; 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.styles.tsx b/src/components/common/BaseDivider/BaseDivider.styles.tsx deleted file mode 100644 index cbe9fdadc..000000000 --- a/src/components/common/BaseDivider/BaseDivider.styles.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { Divider as AntDivider, ConfigProvider } from 'antd'; -import styled from 'styled-components'; - -export const Divider = styled((props: React.ComponentProps) => ( - - - -))``; diff --git a/src/components/common/BaseDropdown/BaseDropdown.styles.tsx b/src/components/common/BaseDropdown/BaseDropdown.styles.ts similarity index 100% rename from src/components/common/BaseDropdown/BaseDropdown.styles.tsx rename to src/components/common/BaseDropdown/BaseDropdown.styles.ts 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.styles.tsx b/src/components/common/BaseEmpty/BaseEmpty.styles.tsx deleted file mode 100644 index 73899134e..000000000 --- a/src/components/common/BaseEmpty/BaseEmpty.styles.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import styled, { useTheme } from 'styled-components'; -import { ConfigProvider, Empty as AntEmpty } from 'antd'; -import { remToPixels } from '@app/utils/utils'; - -export const Empty = styled((props: React.ComponentProps) => { - const theme = useTheme(); - 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.styles.tsx b/src/components/common/BaseMenu/BaseMenu.styles.tsx deleted file mode 100644 index 88723f482..000000000 --- a/src/components/common/BaseMenu/BaseMenu.styles.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import styled, { useTheme } from 'styled-components'; -import { Menu as AntMenu, ConfigProvider } from 'antd'; -import { hexToRGB, remToPixels } from '@app/utils/utils'; -import { themeObject } from '@app/styles/themes/themeVariables'; - -export const Menu = styled((props: React.ComponentProps) => { - const theme = useTheme(); - return ( - - - - ); -})` - &.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/BasePagination/BasePagination.styles.tsx b/src/components/common/BasePagination/BasePagination.styles.ts similarity index 68% rename from src/components/common/BasePagination/BasePagination.styles.tsx rename to src/components/common/BasePagination/BasePagination.styles.ts index cbf935548..7dc11e9fe 100644 --- a/src/components/common/BasePagination/BasePagination.styles.tsx +++ b/src/components/common/BasePagination/BasePagination.styles.ts @@ -1,26 +1,7 @@ -import styled, { css, useTheme } from 'styled-components'; -import { Pagination as AntPagination, ConfigProvider } from 'antd'; -import { remToPixels } from '@app/utils/utils'; +import styled, { css } from 'styled-components'; +import { Pagination as AntPagination } from 'antd'; -export const Pagination = styled((props: React.ComponentProps) => { - const theme = useTheme(); - return ( - - - - ); -})` +export const Pagination = styled(AntPagination)` ${(props) => !props.disabled && css` diff --git a/src/components/common/BasePagination/BasePagination.tsx b/src/components/common/BasePagination/BasePagination.tsx index 484738ae9..c1fc46a33 100644 --- a/src/components/common/BasePagination/BasePagination.tsx +++ b/src/components/common/BasePagination/BasePagination.tsx @@ -3,8 +3,12 @@ import * as S from './BasePagination.styles'; export type BasePaginationProps = PaginationProps; -export const BasePagination: React.FC = (props) => ( - - - -); +export const BasePagination: React.FC = (props) => { + 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.styles.tsx b/src/components/common/BasePopconfirm/BasePopconfirm.styles.tsx deleted file mode 100644 index 1151b246d..000000000 --- a/src/components/common/BasePopconfirm/BasePopconfirm.styles.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import styled, { useTheme } from 'styled-components'; -import { Popconfirm as AntPopconfirm, ConfigProvider } from 'antd'; - -export const Popconfirm = styled((props: React.ComponentProps) => { - const theme = useTheme(); - 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.styles.tsx b/src/components/common/BasePopover/BasePopover.styles.tsx deleted file mode 100644 index 70769c6c8..000000000 --- a/src/components/common/BasePopover/BasePopover.styles.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import styled from 'styled-components'; -import { Popover as AntPopover, ConfigProvider } from 'antd'; - -export const Popover = styled((props: React.ComponentProps) => ( - - - -))``; 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.styles.tsx b/src/components/common/BaseProgress/BaseProgress.styles.tsx deleted file mode 100644 index 28ff86df0..000000000 --- a/src/components/common/BaseProgress/BaseProgress.styles.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import styled, { useTheme } from 'styled-components'; -import { Progress as AntProgress, ConfigProvider } from 'antd'; - -export const Progress = styled((props: React.ComponentProps) => { - const theme = useTheme(); - return ( - - - - ); -})``; diff --git a/src/components/common/BaseRate/BaseRate.styles.ts b/src/components/common/BaseRate/BaseRate.styles.ts new file mode 100644 index 000000000..6d9ad7479 --- /dev/null +++ b/src/components/common/BaseRate/BaseRate.styles.ts @@ -0,0 +1,6 @@ +import styled from 'styled-components'; +import { Rate as AntRate } from 'antd'; + +export const Rate = styled(AntRate)` + font-size: ${({ theme }) => theme.fontSizes.lg}; +`; diff --git a/src/components/common/BaseRate/BaseRate.styles.tsx b/src/components/common/BaseRate/BaseRate.styles.tsx deleted file mode 100644 index ea5f44dcd..000000000 --- a/src/components/common/BaseRate/BaseRate.styles.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import styled, { useTheme } from 'styled-components'; -import { Rate as AntRate, ConfigProvider } from 'antd'; - -export const Rate = styled((props: React.ComponentProps) => { - const theme = useTheme(); - return ( - - - - ); -})` - font-size: ${({ theme }) => theme.fontSizes.lg}; -`; diff --git a/src/components/common/BaseResult/BaseResult.styles.ts b/src/components/common/BaseResult/BaseResult.styles.ts new file mode 100644 index 000000000..c4e6b579d --- /dev/null +++ b/src/components/common/BaseResult/BaseResult.styles.ts @@ -0,0 +1,8 @@ +import styled from 'styled-components'; +import { Result as AntResult } from 'antd'; + +export const Result = styled(AntResult)` + .ant-result-title { + margin: 0; + } +`; diff --git a/src/components/common/BaseResult/BaseResult.styles.tsx b/src/components/common/BaseResult/BaseResult.styles.tsx deleted file mode 100644 index 6e5ae963b..000000000 --- a/src/components/common/BaseResult/BaseResult.styles.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import styled, { useTheme } from 'styled-components'; -import { Result as AntResult, ConfigProvider } from 'antd'; -import { remToPixels } from '@app/utils/utils'; - -export const Result = styled((props: React.ComponentProps) => { - const theme = useTheme(); - return ( - - - - ); -})` - .ant-result-title { - margin: 0; - } -`; diff --git a/src/components/common/BaseSlider/BaseSlider.styles.ts b/src/components/common/BaseSlider/BaseSlider.styles.ts new file mode 100644 index 000000000..7a58c5a42 --- /dev/null +++ b/src/components/common/BaseSlider/BaseSlider.styles.ts @@ -0,0 +1,16 @@ +import styled from 'styled-components'; +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); + } + + & .ant-slider-mark-text:not(.ant-slider-mark-text-active) { + color: ${({ theme }) => theme.subText}; + } +`; diff --git a/src/components/common/BaseSlider/BaseSlider.styles.tsx b/src/components/common/BaseSlider/BaseSlider.styles.tsx deleted file mode 100644 index 995115f9a..000000000 --- a/src/components/common/BaseSlider/BaseSlider.styles.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import styled, { useTheme } from 'styled-components'; -import { Slider as AntSlider, ConfigProvider } from 'antd'; - -export const Slider = styled((props: React.ComponentProps) => { - const theme = useTheme(); - return ( - - - - ); -})` - &.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); - } - - & .ant-slider-mark-text:not(.ant-slider-mark-text-active) { - 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..3307f8a55 --- /dev/null +++ b/src/components/common/BaseSpin/BaseSpin.styles.ts @@ -0,0 +1,4 @@ +import styled from 'styled-components'; +import { Spin as AntSpin } from 'antd'; + +export const Spin = styled(AntSpin)``; diff --git a/src/components/common/BaseSpin/BaseSpin.styles.tsx b/src/components/common/BaseSpin/BaseSpin.styles.tsx deleted file mode 100644 index dad141351..000000000 --- a/src/components/common/BaseSpin/BaseSpin.styles.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import styled, { useTheme } from 'styled-components'; -import { ConfigProvider, Spin as AntSpin } from 'antd'; -import { remToPixels } from '@app/utils/utils'; - -export const Spin = styled((props: React.ComponentProps) => { - const theme = useTheme(); - return ( - - - - ); -})``; diff --git a/src/components/common/BaseSteps/BaseSteps.styles.tsx b/src/components/common/BaseSteps/BaseSteps.styles.ts similarity index 66% rename from src/components/common/BaseSteps/BaseSteps.styles.tsx rename to src/components/common/BaseSteps/BaseSteps.styles.ts index bc070bbdd..beccd54dc 100644 --- a/src/components/common/BaseSteps/BaseSteps.styles.tsx +++ b/src/components/common/BaseSteps/BaseSteps.styles.ts @@ -1,29 +1,8 @@ -import styled, { useTheme } from 'styled-components'; -import { Steps as AntSteps, ConfigProvider } from 'antd'; +import styled from 'styled-components'; +import { Steps as AntSteps } from 'antd'; import { media } from '@app/utils/utils'; -import { remToPixels } from '@app/utils/utils'; -export const Steps = styled((props: React.ComponentProps) => { - const theme = useTheme(); - return ( - - - - ); -})` +export const Steps = styled(AntSteps)` font-size: unset; & .ant-steps-item-process > .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-title { diff --git a/src/components/common/BaseSwitch/BaseSwitch.styles.ts b/src/components/common/BaseSwitch/BaseSwitch.styles.ts new file mode 100644 index 000000000..126666851 --- /dev/null +++ b/src/components/common/BaseSwitch/BaseSwitch.styles.ts @@ -0,0 +1,13 @@ +import styled from 'styled-components'; +import { Switch as AntSwitch } from 'antd'; + +export const Switch = styled(AntSwitch)` + &.ant-switch-checked:focus { + box-shadow: 0 0 0 2px ${({ theme }) => theme.primary1}; + } + + &.ant-switch[aria-checked='false'] { + 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/BaseSwitch/BaseSwitch.styles.tsx b/src/components/common/BaseSwitch/BaseSwitch.styles.tsx deleted file mode 100644 index 7d0da3c57..000000000 --- a/src/components/common/BaseSwitch/BaseSwitch.styles.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import styled, { useTheme } from 'styled-components'; -import { Switch as AntSwitch, ConfigProvider } from 'antd'; -import { remToPixels } from '@app/utils/utils'; - -export const Switch = styled((props: React.ComponentProps) => { - const theme = useTheme(); - return ( - - - - ); -})` - &.ant-switch-checked:focus { - box-shadow: 0 0 0 2px ${({ theme }) => theme.primary1}; - } - - &.ant-switch[aria-checked='false'] { - 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.tsx b/src/components/common/BaseTable/BaseTable.styles.ts similarity index 72% rename from src/components/common/BaseTable/BaseTable.styles.tsx rename to src/components/common/BaseTable/BaseTable.styles.ts index d5b4bdc65..c16b46bb6 100644 --- a/src/components/common/BaseTable/BaseTable.styles.tsx +++ b/src/components/common/BaseTable/BaseTable.styles.ts @@ -1,28 +1,7 @@ -import styled, { useTheme } from 'styled-components'; -import { Table as AntTable, ConfigProvider } from 'antd'; +import styled from 'styled-components'; +import { Table as AntTable } from 'antd'; -export const Table = styled((props: React.ComponentProps) => { - const theme = useTheme(); - return ( - - - - ); -})` +export const Table = styled(AntTable)` & thead .ant-table-cell { color: ${({ theme }) => theme.primary}; font-size: ${({ theme }) => theme.fontSizes.xs}; diff --git a/src/components/common/BaseTabs/BaseTabs.styles.ts b/src/components/common/BaseTabs/BaseTabs.styles.ts new file mode 100644 index 000000000..a3549e70d --- /dev/null +++ b/src/components/common/BaseTabs/BaseTabs.styles.ts @@ -0,0 +1,17 @@ +import styled from 'styled-components'; +import { Tabs as AntTabs } from 'antd'; + +export const Tabs = styled(AntTabs)` + .ant-tabs-tab.ant-tabs-tab-disabled { + 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/BaseTabs/BaseTabs.styles.tsx b/src/components/common/BaseTabs/BaseTabs.styles.tsx deleted file mode 100644 index c4d94f21d..000000000 --- a/src/components/common/BaseTabs/BaseTabs.styles.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import styled, { useTheme } from 'styled-components'; -import { Tabs as AntTabs, ConfigProvider } from 'antd'; - -export const Tabs = styled((props: React.ComponentProps) => { - const theme = useTheme(); - return ( - - - - ); -})` - .ant-tabs-tab.ant-tabs-tab-disabled { - 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/inputs/InputNumber/InputNumber.styles.ts b/src/components/common/inputs/InputNumber/InputNumber.styles.ts new file mode 100644 index 000000000..80a86764d --- /dev/null +++ b/src/components/common/inputs/InputNumber/InputNumber.styles.ts @@ -0,0 +1,15 @@ +import { InputNumber as AntInputNumber } from 'antd'; +import styled, { css } from 'styled-components'; + +interface InputNumberProps { + $block?: boolean; +} + +export const InputNumber = styled(AntInputNumber)` + ${(props) => + props.$block && + css` + display: block; + width: 100%; + `}; +`; diff --git a/src/components/common/inputs/InputNumber/InputNumber.styles.tsx b/src/components/common/inputs/InputNumber/InputNumber.styles.tsx deleted file mode 100644 index 7f8d71f2b..000000000 --- a/src/components/common/inputs/InputNumber/InputNumber.styles.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { InputNumber as AntInputNumber, ConfigProvider } from 'antd'; -import { forwardRef, ComponentProps } from 'react'; -import styled, { css, useTheme } from 'styled-components'; - -interface InputNumberProps { - $block?: boolean; -} - -export const InputNumber = styled( - forwardRef>((props, ref) => { - const theme = useTheme(); - return ( - - - - ); - }), -)` - ${(props) => - props.$block && - css` - display: block; - width: 100%; - `}; -`; diff --git a/src/styles/themeConfig.tsx b/src/styles/themeConfig.ts similarity index 58% rename from src/styles/themeConfig.tsx rename to src/styles/themeConfig.ts index 92c042aa2..70bf4c3d7 100644 --- a/src/styles/themeConfig.tsx +++ b/src/styles/themeConfig.ts @@ -1,9 +1,8 @@ import type { ThemeConfig } from 'antd'; -import { remToPixels } from '@app/utils/utils'; -import { DefaultTheme } from 'styled-components'; +import type { DefaultTheme } from 'styled-components'; +import { themeObject } from './themes/themeVariables'; -const 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)'; +const remToPixels = (s: `${number}rem`) => parseFloat(s) * 16; export const getThemeConfig = (theme: DefaultTheme): ThemeConfig => { const fontFamily = `'${theme.fontFamilies.main}', sans-serif`; @@ -74,6 +73,135 @@ export const getThemeConfig = (theme: DefaultTheme): ThemeConfig => { 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, @@ -127,7 +255,7 @@ export const getThemeConfig = (theme: DefaultTheme): ThemeConfig => { colorIconHover: 'rgba(0, 0, 0, 0.67)', fontSizeLG: remToPixels(theme.fontSizes.xxl), marginSM: 0, - boxShadow: modalBoxShadow, + boxShadow: theme.modalBoxShadow, controlHeightLG: 15 / 0.55, }, Input: { @@ -161,7 +289,7 @@ export const getThemeConfig = (theme: DefaultTheme): ThemeConfig => { Modal: { colorTextDescription: theme.icon, colorIcon: theme.icon, - boxShadow: modalBoxShadow, + boxShadow: theme.modalBoxShadow, lineHeight: 1.57, }, DatePicker: { diff --git a/src/utils/utils.ts b/src/utils/utils.ts index 31cd72966..2fea4a042 100644 --- a/src/utils/utils.ts +++ b/src/utils/utils.ts @@ -53,7 +53,11 @@ export const normalizeProp = (prop: string | number | [number, number]): string typeof prop === 'number' ? `${prop}px` : Array.isArray(prop) ? `${prop[0]}px ${prop[1]}px` : prop; export const colorTypeFrom = (severity: Priority | NotificationType | undefined): ColorType => { - const lookup: Record = { + if (severity === undefined) { + return 'primary'; + } + + const lookup = { [Priority.INFO]: 'primary', [Priority.LOW]: 'success', [Priority.MEDIUM]: 'warning', @@ -64,9 +68,17 @@ export const colorTypeFrom = (severity: Priority | NotificationType | undefined) ['success']: 'success', ['warning']: 'warning', ['error']: 'error', - }; + } as const; + + if (Object.hasOwn(lookup, severity)) { + return lookup[severity]; + } - return severity !== undefined && Object.hasOwn(lookup, severity) ? lookup[severity] : 'primary'; + if (Object.values(Priority).includes(severity)) { + return 'success'; + } + + return 'primary'; }; export const media = @@ -106,8 +118,6 @@ export const shadeColor = (color: string, percent: number): string => { return '#' + RR + GG + BB; }; -export const remToPixels = (s: `${number}rem` | string): number => parseFloat(s) * 16; - export const hexToHSL = (hex: string): { h: number; s: number; l: number } => { const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); @@ -153,6 +163,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; From a7767c9379bde9e188e722ffadc801a8b9db5144 Mon Sep 17 00:00:00 2001 From: Alexandr Buhlak <48954743+saha80@users.noreply.github.com> Date: Tue, 19 Sep 2023 23:29:13 +0300 Subject: [PATCH 66/81] refactor: remove redundant semicolon --- src/components/common/BaseCard/BaseCard.styles.ts | 2 +- .../common/inputs/InputNumber/InputNumber.styles.ts | 2 +- .../common/inputs/SuffixInput/SuffixInput.styles.ts | 2 +- .../nft-dashboard/common/NFTCard/NFTCard.styles.ts | 2 +- .../nft-dashboard/common/ViewAll/ViewAll.styles.ts | 2 +- .../profileCard/ProfileNav/ProfileNav.styles.ts | 6 ++---- .../TwoFactorOptions/TwoFactorOptions.styles.ts | 2 +- .../paymentForm/CardThemeItem/CardThemeItem.styles.ts | 10 ++-------- src/pages/DashboardPages/DashboardPage.styles.ts | 2 -- 9 files changed, 10 insertions(+), 20 deletions(-) diff --git a/src/components/common/BaseCard/BaseCard.styles.ts b/src/components/common/BaseCard/BaseCard.styles.ts index 520530d41..c9c84de39 100644 --- a/src/components/common/BaseCard/BaseCard.styles.ts +++ b/src/components/common/BaseCard/BaseCard.styles.ts @@ -16,7 +16,7 @@ export const Card = styled(AntCard)` props.$autoHeight && css` height: 100%; - `}; + `} .ant-card-head { border-bottom: 0; diff --git a/src/components/common/inputs/InputNumber/InputNumber.styles.ts b/src/components/common/inputs/InputNumber/InputNumber.styles.ts index 80a86764d..81167caee 100644 --- a/src/components/common/inputs/InputNumber/InputNumber.styles.ts +++ b/src/components/common/inputs/InputNumber/InputNumber.styles.ts @@ -11,5 +11,5 @@ export const InputNumber = styled(AntInputNumber)` css` display: block; width: 100%; - `}; + `} `; diff --git a/src/components/common/inputs/SuffixInput/SuffixInput.styles.ts b/src/components/common/inputs/SuffixInput/SuffixInput.styles.ts index 0ac57d86c..4c879f7eb 100644 --- a/src/components/common/inputs/SuffixInput/SuffixInput.styles.ts +++ b/src/components/common/inputs/SuffixInput/SuffixInput.styles.ts @@ -14,5 +14,5 @@ export const Suffix = styled.div` css` opacity: 0; visibility: hidden; - `}; + `} `; diff --git a/src/components/nft-dashboard/common/NFTCard/NFTCard.styles.ts b/src/components/nft-dashboard/common/NFTCard/NFTCard.styles.ts index 4a58e8104..cfdda1e17 100644 --- a/src/components/nft-dashboard/common/NFTCard/NFTCard.styles.ts +++ b/src/components/nft-dashboard/common/NFTCard/NFTCard.styles.ts @@ -14,5 +14,5 @@ export const Card = styled(BaseCard)` props.$isSider && css` background: ${({ theme }) => theme.additionalBackground}; - `}; + `} `; diff --git a/src/components/nft-dashboard/common/ViewAll/ViewAll.styles.ts b/src/components/nft-dashboard/common/ViewAll/ViewAll.styles.ts index 2ad90ab53..7ed8a9799 100644 --- a/src/components/nft-dashboard/common/ViewAll/ViewAll.styles.ts +++ b/src/components/nft-dashboard/common/ViewAll/ViewAll.styles.ts @@ -17,5 +17,5 @@ export const ViewAllBtn = styled(BaseButton)` props.$bordered && css` border-bottom: 0.2px solid ${({ theme }) => theme.nft.border}; - `}; + `} `; diff --git a/src/components/profile/profileCard/ProfileNav/ProfileNav.styles.ts b/src/components/profile/profileCard/ProfileNav/ProfileNav.styles.ts index 973f0a072..6deaff84e 100644 --- a/src/components/profile/profileCard/ProfileNav/ProfileNav.styles.ts +++ b/src/components/profile/profileCard/ProfileNav/ProfileNav.styles.ts @@ -26,15 +26,13 @@ export const Btn = styled(BaseButton)` ${(props) => props.$isActive && css` - background-color: rgba(${({ theme }) => theme.rgb.primary}, 0.05); - `}; + background-color: rgba(${props.theme.rgb.primary}, 0.05); + `} & > span:first-of-type { padding: 0.625rem; border-radius: 10px; - color: ${({ color, theme }) => theme[color]}; - background-color: rgba(${({ theme }) => theme.rgb.primary}, 0.05); } `; 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 ee0087395..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 @@ -14,7 +14,7 @@ export const RadioBtn = styled(BaseRadio)` !props.$isActive && css` opacity: 0.5; - `}; + `} & > span:last-of-type { flex-grow: 1; 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 8111e08a3..fccda5b53 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 @@ -21,21 +21,15 @@ export const BackgroundWrapper = styled.div` props.isActive && css` background: url(${props.background}); - `}; + `} - & > div { + &:hover, & > div { background: ${(props) => `url(${props.background})`}; background-size: cover; } &:hover { opacity: 0.7; - background-size: cover; - - ${(props) => - css` - background: url(${props.background}); - `}; } `; diff --git a/src/pages/DashboardPages/DashboardPage.styles.ts b/src/pages/DashboardPages/DashboardPage.styles.ts index 432233222..ede98a902 100644 --- a/src/pages/DashboardPages/DashboardPage.styles.ts +++ b/src/pages/DashboardPages/DashboardPage.styles.ts @@ -43,9 +43,7 @@ export const BlockWrapper = styled.div` flex-direction: column; flex-shrink: 0; gap: 15px; - background: black; - min-height: 300px; overflow-y: auto; `; From 5084bca10e5591a8866795896a7e1d4e08db27ce Mon Sep 17 00:00:00 2001 From: Alexandr Buhlak <48954743+saha80@users.noreply.github.com> Date: Wed, 20 Sep 2023 00:06:23 +0300 Subject: [PATCH 67/81] refactor: prefer unpacking only for the theme. --- .../common/BaseButton/BaseButton.styles.ts | 24 +++++++++---------- .../common/BaseCard/BaseCard.styles.ts | 4 ++-- .../BaseNotification.styles.ts | 11 ++++----- .../MoonSunSwitch/MoonSunSwitch.styles.ts | 8 +++---- .../selects/BaseSelect/BaseSelect.styles.ts | 2 +- src/components/header/Header.styles.ts | 5 ++-- .../GithubButton/GitHubButton.styles.ts | 8 +++---- .../main/MainHeader/MainHeader.styles.ts | 2 +- .../PatientResultsCard.styles.ts | 4 ++-- .../BloodScreeningTable.styles.ts | 4 ++-- .../DoctorCard/DoctorCard.styles.ts | 1 - .../ScreeningsFriend.styles.ts | 4 ++-- .../StatisticsCard/StatisticsCard.styles.ts | 2 +- .../ActivityStoryItem.styles.ts | 2 +- .../common/ViewAll/ViewAll.styles.ts | 2 +- .../totalEarning/TotalEarning.styles.ts | 2 +- .../ProfileNav/ProfileNav.styles.ts | 2 +- src/controllers/notificationController.tsx | 8 +++---- 18 files changed, 46 insertions(+), 49 deletions(-) diff --git a/src/components/common/BaseButton/BaseButton.styles.ts b/src/components/common/BaseButton/BaseButton.styles.ts index 67a54058d..b94d70cf0 100644 --- a/src/components/common/BaseButton/BaseButton.styles.ts +++ b/src/components/common/BaseButton/BaseButton.styles.ts @@ -29,11 +29,11 @@ export const Button = styled(AntButton)` !props.danger && css` &.ant-btn-background-ghost { - color: ${({ theme }) => theme.primary}; - border-color: ${({ theme }) => theme.primary}; + color: ${props.theme.primary}; + border-color: ${props.theme.primary}; &:disabled { - background-color: ${({ theme }) => theme.disabledBg}; + background-color: ${props.theme.disabledBg}; } } @@ -48,41 +48,41 @@ export const Button = styled(AntButton)` &:not(:disabled):hover { &.ant-btn-default, &.ant-btn-dashed { - color: ${({ theme }) => theme.primary5}; - border-color: ${({ theme }) => theme.primary5}; + color: ${props.theme.primary5}; + border-color: ${props.theme.primary5}; } } &:focus { &.ant-btn-link, &.ant-btn-background-ghost { - color: ${({ theme }) => theme.primary5}; + color: ${props.theme.primary5}; } &.ant-btn-primary { - background-color: ${({ theme }) => theme.primary5}; + background-color: ${props.theme.primary5}; } &.ant-btn-primary, &.ant-btn-background-ghost { - border-color: ${({ theme }) => theme.primary5}; + border-color: ${props.theme.primary5}; } } &:not(:disabled):hover { &.ant-btn-primary { - background-color: ${({ theme }) => theme.secondary}; + background-color: ${props.theme.secondary}; } &.ant-btn-text, &.ant-btn-background-ghost { - color: ${({ theme }) => theme.secondary}; + color: ${props.theme.secondary}; background-color: transparent; } &.ant-btn-primary, &.ant-btn-background-ghost { - border-color: ${({ theme }) => theme.secondary}; + border-color: ${props.theme.secondary}; } } @@ -95,7 +95,7 @@ export const Button = styled(AntButton)` &.ant-btn-default { &:focus, &:not(:disabled):hover { - background-color: ${({ theme }) => theme.background}; + 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/BaseCard/BaseCard.styles.ts b/src/components/common/BaseCard/BaseCard.styles.ts index c9c84de39..0f67ef025 100644 --- a/src/components/common/BaseCard/BaseCard.styles.ts +++ b/src/components/common/BaseCard/BaseCard.styles.ts @@ -4,7 +4,7 @@ import { normalizeProp } from '@app/utils/utils'; import { media } from '@app/utils/utils'; interface CardInternalProps { - $padding: string | number | [number, number]; + $padding: string | number | readonly [number, number]; $autoHeight: boolean; } @@ -48,7 +48,7 @@ export const Card = styled(AntCard)` .ant-card-body { flex-grow: 1; - padding: ${({ $padding }) => $padding && normalizeProp($padding)}; + padding: ${(props) => props.$padding && normalizeProp(props.$padding)}; } .ant-card-bordered { diff --git a/src/components/common/BaseNotification/BaseNotification.styles.ts b/src/components/common/BaseNotification/BaseNotification.styles.ts index d5593b121..c245de6c4 100644 --- a/src/components/common/BaseNotification/BaseNotification.styles.ts +++ b/src/components/common/BaseNotification/BaseNotification.styles.ts @@ -24,12 +24,11 @@ export const SpaceWrapper = styled(BaseSpace)` background-color: ${({ theme }) => theme.background}; & ${Title}, span[role='img'] { - ${({ type, theme }) => - type - ? css` - color: ${theme[colorTypeFrom(type)]}; - ` - : ''} + ${(props) => + props.type && + css` + color: ${props.theme[colorTypeFrom(props.type)]}; + `} } & span[role='img'] { diff --git a/src/components/common/MoonSunSwitch/MoonSunSwitch.styles.ts b/src/components/common/MoonSunSwitch/MoonSunSwitch.styles.ts index 6e07382cf..09567b0ca 100644 --- a/src/components/common/MoonSunSwitch/MoonSunSwitch.styles.ts +++ b/src/components/common/MoonSunSwitch/MoonSunSwitch.styles.ts @@ -26,14 +26,14 @@ export const ButtonGroup = styled.div` props.$isFirstActive ? css` & > ${Btn}:first-of-type { - background: ${({ theme }) => theme.primary}; - color: ${({ theme }) => theme.textSecondary}; + background: ${props.theme.primary}; + color: ${props.theme.textSecondary}; } ` : css` & > ${Btn}:last-of-type { - background: ${({ theme }) => theme.warning}; - color: ${({ theme }) => theme.textSecondary}; + background: ${props.theme.warning}; + color: ${props.theme.textSecondary}; } `} diff --git a/src/components/common/selects/BaseSelect/BaseSelect.styles.ts b/src/components/common/selects/BaseSelect/BaseSelect.styles.ts index 8936716cf..61a9040c0 100644 --- a/src/components/common/selects/BaseSelect/BaseSelect.styles.ts +++ b/src/components/common/selects/BaseSelect/BaseSelect.styles.ts @@ -9,7 +9,7 @@ export interface InternalSelectProps { } export const Select = styled(AntSelect)` - width: ${({ $width }) => $width && normalizeProp($width)}; + width: ${(props) => props.$width && normalizeProp(props.$width)}; box-shadow: ${(props) => props.$shadow && props.theme.boxShadow}; .ant-select-item-option-selected:not(.ant-select-item-option-disabled) { diff --git a/src/components/header/Header.styles.ts b/src/components/header/Header.styles.ts index 6d4749535..f0ae46e97 100644 --- a/src/components/header/Header.styles.ts +++ b/src/components/header/Header.styles.ts @@ -27,7 +27,6 @@ export const DropdownCollapse = styled(BaseCollapse)` & > .ant-collapse-item > .ant-collapse-header { font-weight: 600; font-size: 0.875rem; - color: ${({ theme }) => theme.primary}; @media only screen and (${media('md')}) { @@ -67,9 +66,9 @@ interface ProfileColumn { export const ProfileColumn = styled(BaseCol)` @media only screen and (${media('md')}) { ${(props) => - props?.$isTwoColumnsLayout && + props.$isTwoColumnsLayout && css` - background-color: ${({ theme }) => theme.siderBackground}; + background-color: ${props.theme.siderBackground}; padding: ${LAYOUT.desktop.paddingVertical} ${LAYOUT.desktop.paddingHorizontal}; `} } diff --git a/src/components/header/components/GithubButton/GitHubButton.styles.ts b/src/components/header/components/GithubButton/GitHubButton.styles.ts index 8b7471939..f9e559242 100644 --- a/src/components/header/components/GithubButton/GitHubButton.styles.ts +++ b/src/components/header/components/GithubButton/GitHubButton.styles.ts @@ -7,8 +7,8 @@ interface Dark { } export const Button = styled(BaseButton)` - color: ${({ $isDark, theme }) => ($isDark ? theme.white : theme.black)}; - background: ${({ $isDark, theme }) => ($isDark ? theme.black : theme.white)}; + 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; @@ -19,8 +19,8 @@ export const Button = styled(BaseButton)` &:hover, &:active, &:focus { - color: ${({ $isDark, theme }) => ($isDark ? theme.black : theme.white)}; - background: ${({ $isDark, theme }) => ($isDark ? theme.white : theme.black)}; + color: ${(props) => (props.$isDark ? props.theme.black : props.theme.white)}; + background: ${(props) => (props.$isDark ? props.theme.white : props.theme.black)}; } } `; diff --git a/src/components/layouts/main/MainHeader/MainHeader.styles.ts b/src/components/layouts/main/MainHeader/MainHeader.styles.ts index 1b905a2fb..66d6251b1 100644 --- a/src/components/layouts/main/MainHeader/MainHeader.styles.ts +++ b/src/components/layouts/main/MainHeader/MainHeader.styles.ts @@ -18,7 +18,7 @@ export const Header = styled(BaseLayout.Header)
` height: ${LAYOUT.desktop.headerHeight}; ${(props) => - props?.$isTwoColumnsLayoutHeader && + props.$isTwoColumnsLayoutHeader && css` padding: 0; `} diff --git a/src/components/medical-dashboard/PatientResultsCard/PatientResultsCard.styles.ts b/src/components/medical-dashboard/PatientResultsCard/PatientResultsCard.styles.ts index d0c08a117..dbc67f0e9 100644 --- a/src/components/medical-dashboard/PatientResultsCard/PatientResultsCard.styles.ts +++ b/src/components/medical-dashboard/PatientResultsCard/PatientResultsCard.styles.ts @@ -65,7 +65,7 @@ export const IconWrapper = styled.div` display: flex; justify-content: center; align-items: center; - background-color: ${({ isActive, theme }) => (isActive ? theme.primary : theme.timelineBackground)}; - color: ${({ isActive, theme }) => (isActive ? theme.textSecondary : theme.primary)}; + 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/bloodScreeningCard/BloodScreeningTable/BloodScreeningTable.styles.ts b/src/components/medical-dashboard/bloodScreeningCard/BloodScreeningTable/BloodScreeningTable.styles.ts index 41fe9c0a7..1464065be 100644 --- a/src/components/medical-dashboard/bloodScreeningCard/BloodScreeningTable/BloodScreeningTable.styles.ts +++ b/src/components/medical-dashboard/bloodScreeningCard/BloodScreeningTable/BloodScreeningTable.styles.ts @@ -30,9 +30,9 @@ export const Table = styled(BaseTable)` export const Text = styled.span` color: ${({ theme }) => theme.textMain}; - font-weight: ${({ $isActive, theme }) => ($isActive ? theme.fontWeights.semibold : theme.fontWeights.regular)}; + font-weight: ${(props) => (props.$isActive ? props.theme.fontWeights.semibold : props.theme.fontWeights.regular)}; `; export const Flag = styled(Text)<{ $isNorm: boolean }>` - color: ${({ $isNorm, theme }) => ($isNorm ? theme.success : theme.error)}; + color: ${(props) => (props.$isNorm ? props.theme.success : props.theme.error)}; `; diff --git a/src/components/medical-dashboard/favoriteDoctors/DoctorCard/DoctorCard.styles.ts b/src/components/medical-dashboard/favoriteDoctors/DoctorCard/DoctorCard.styles.ts index cb1508404..8db61c75d 100644 --- a/src/components/medical-dashboard/favoriteDoctors/DoctorCard/DoctorCard.styles.ts +++ b/src/components/medical-dashboard/favoriteDoctors/DoctorCard/DoctorCard.styles.ts @@ -38,7 +38,6 @@ export const Text = styled(BaseTypography.Text)` export const ImgWrapper = styled.div` overflow: hidden; margin: -1rem -1rem 0; - border-top-left-radius: ${({ theme }) => theme.borderRadius}; border-top-right-radius: ${({ theme }) => theme.borderRadius}; 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 7c94ea3ad..256d9a09e 100644 --- a/src/components/medical-dashboard/screeningsCard/screeningsFriends/ScreeningsFriend/ScreeningsFriend.styles.ts +++ b/src/components/medical-dashboard/screeningsCard/screeningsFriends/ScreeningsFriend/ScreeningsFriend.styles.ts @@ -22,7 +22,7 @@ export const ScreeningsRow = styled(BaseRow)` transition: all 0.3s ease; .ant-typography { - font-weight: ${({ $isActive, theme }) => ($isActive ? theme.fontWeights.bold : theme.fontWeights.regular)}; + font-weight: ${(props) => (props.$isActive ? props.theme.fontWeights.bold : props.theme.fontWeights.regular)}; } `; @@ -44,7 +44,7 @@ export const Name = styled(BaseTypography.Text)` export const Percentage = styled(BaseTypography.Text)` font-size: ${({ theme }) => theme.fontSizes.xs}; - color: ${({ $isDowngrade, theme }) => ($isDowngrade ? theme.error : theme.success)}; + color: ${(props) => (props.$isDowngrade ? props.theme.error : props.theme.success)}; @media only screen and (${media('xl')}) { font-size: ${({ theme }) => theme.fontSizes.md}; 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 309cae733..030a71485 100644 --- a/src/components/medical-dashboard/statisticsCards/statisticsCard/StatisticsCard/StatisticsCard.styles.ts +++ b/src/components/medical-dashboard/statisticsCards/statisticsCard/StatisticsCard/StatisticsCard.styles.ts @@ -27,6 +27,6 @@ export const StatisticCard = styled(DashboardCard)` overflow: hidden; ${Text} { - color: ${({ $color, theme }) => theme[$color]}; + color: ${(props) => props.theme[props.$color]}; } `; diff --git a/src/components/nft-dashboard/activityStory/ActivityStoryItem/ActivityStoryItem.styles.ts b/src/components/nft-dashboard/activityStory/ActivityStoryItem/ActivityStoryItem.styles.ts index 914667d38..ee0e6a394 100644 --- a/src/components/nft-dashboard/activityStory/ActivityStoryItem/ActivityStoryItem.styles.ts +++ b/src/components/nft-dashboard/activityStory/ActivityStoryItem/ActivityStoryItem.styles.ts @@ -11,7 +11,7 @@ export const Title = styled(BaseTypography.Text)` `; export const Status = styled(BaseTypography.Text)` - color: ${({ $color, theme }) => theme[$color]}; + color: ${(props) => props.theme[props.$color]}; font-size: ${({ theme }) => theme.fontSizes.xs}; font-family: ${({ theme }) => theme.fontFamilies.secondary}; `; diff --git a/src/components/nft-dashboard/common/ViewAll/ViewAll.styles.ts b/src/components/nft-dashboard/common/ViewAll/ViewAll.styles.ts index 7ed8a9799..b94e3daed 100644 --- a/src/components/nft-dashboard/common/ViewAll/ViewAll.styles.ts +++ b/src/components/nft-dashboard/common/ViewAll/ViewAll.styles.ts @@ -16,6 +16,6 @@ export const ViewAllBtn = styled(BaseButton)` ${(props) => props.$bordered && css` - border-bottom: 0.2px solid ${({ theme }) => theme.nft.border}; + border-bottom: 0.2px solid ${props.theme.nft.border}; `} `; diff --git a/src/components/nft-dashboard/totalEarning/TotalEarning.styles.ts b/src/components/nft-dashboard/totalEarning/TotalEarning.styles.ts index 24d6a7f91..65af44a47 100644 --- a/src/components/nft-dashboard/totalEarning/TotalEarning.styles.ts +++ b/src/components/nft-dashboard/totalEarning/TotalEarning.styles.ts @@ -21,5 +21,5 @@ export const Text = styled(BaseTypography.Text)` export const ValueText = styled(BaseTypography.Text)` font-size: ${({ theme }) => theme.fontSizes.xs}; font-family: ${({ theme }) => theme.fontFamilies.secondary}; - color: ${({ $color, theme }) => theme[$color]}; + color: ${(props) => props.theme[props.$color]}; `; diff --git a/src/components/profile/profileCard/ProfileNav/ProfileNav.styles.ts b/src/components/profile/profileCard/ProfileNav/ProfileNav.styles.ts index 6deaff84e..392c833f0 100644 --- a/src/components/profile/profileCard/ProfileNav/ProfileNav.styles.ts +++ b/src/components/profile/profileCard/ProfileNav/ProfileNav.styles.ts @@ -32,7 +32,7 @@ export const Btn = styled(BaseButton)` & > span:first-of-type { padding: 0.625rem; border-radius: 10px; - color: ${({ color, theme }) => theme[color]}; + color: ${(props) => props.theme[props.color]}; background-color: rgba(${({ theme }) => theme.rgb.primary}, 0.05); } `; diff --git a/src/controllers/notificationController.tsx b/src/controllers/notificationController.tsx index 79fdca0cf..45fd19a06 100644 --- a/src/controllers/notificationController.tsx +++ b/src/controllers/notificationController.tsx @@ -24,15 +24,15 @@ const Message = styled.div` ${(props) => props.$isOnlyTitle ? css` - font-size: ${({ theme }) => theme.fontSizes.md}; + font-size: ${props.theme.fontSizes.md}; height: 2rem; - font-weight: ${({ theme }) => theme.fontWeights.semibold}; + font-weight: ${props.theme.fontWeights.semibold}; margin-inline-start: 9px; ` : css` - font-size: ${({ theme }) => theme.fontSizes.xxl}; + font-size: ${props.theme.fontSizes.xxl}; height: 3rem; - font-weight: ${({ theme }) => theme.fontWeights.bold}; + font-weight: ${props.theme.fontWeights.bold}; margin-inline-start: 21px; `} From 2b4ae0ebd98f4114bd8b48c0efd590cd5588c211 Mon Sep 17 00:00:00 2001 From: Alexandr Buhlak <48954743+saha80@users.noreply.github.com> Date: Wed, 20 Sep 2023 00:10:43 +0300 Subject: [PATCH 68/81] refactor(BaseBadge): use status directly --- .../common/BaseBadge/BaseBadge.styles.ts | 9 ++--- src/components/common/BaseBadge/BaseBadge.tsx | 11 ++---- src/utils/utils.ts | 35 +++++++------------ 3 files changed, 17 insertions(+), 38 deletions(-) diff --git a/src/components/common/BaseBadge/BaseBadge.styles.ts b/src/components/common/BaseBadge/BaseBadge.styles.ts index 27ece7782..3885046d5 100644 --- a/src/components/common/BaseBadge/BaseBadge.styles.ts +++ b/src/components/common/BaseBadge/BaseBadge.styles.ts @@ -1,15 +1,10 @@ import styled from 'styled-components'; import { Badge as AntBadge } from 'antd'; import { colorTypeFrom } from '@app/utils/utils'; -import { NotificationType } from '../BaseNotification/BaseNotification'; -interface BadgeProps { - $severity?: NotificationType; -} - -export const Badge = styled(AntBadge)` +export const Badge = styled(AntBadge)` .ant-badge-count { - background: ${({ $severity, theme }) => theme[colorTypeFrom($severity)]}; + background: ${(props) => props.theme[colorTypeFrom(props.status)]}; font-size: ${({ theme }) => theme.fontSizes.xs}; } diff --git a/src/components/common/BaseBadge/BaseBadge.tsx b/src/components/common/BaseBadge/BaseBadge.tsx index de8f3a3e4..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,14 +8,8 @@ interface BaseBadgeInterface extends React.FC { Ribbon: typeof Badge.Ribbon; } -export const BaseBadge: BaseBadgeInterface = ({ status, children, count, ...props }) => { - const countSeverityStatus = count ? { count, $severity: mapBadgeStatus(status) } : { status }; - const transformedProps = status ? countSeverityStatus : { count }; - return ( - - {children} - - ); +export const BaseBadge: BaseBadgeInterface = ({ children, ...props }) => { + return {children}; }; BaseBadge.Ribbon = Badge.Ribbon; diff --git a/src/utils/utils.ts b/src/utils/utils.ts index 2fea4a042..a7bf76c2b 100644 --- a/src/utils/utils.ts +++ b/src/utils/utils.ts @@ -57,28 +57,27 @@ export const colorTypeFrom = (severity: Priority | NotificationType | undefined) return 'primary'; } +export const colorTypeFrom = ( + value: Priority | Severity | NotificationType | BaseBadgeProps['status'] | undefined, +): ColorType => { const lookup = { - [Priority.INFO]: 'primary', - [Priority.LOW]: 'success', - [Priority.MEDIUM]: 'warning', - [Priority.HIGH]: 'error', - + ['default']: 'primary', ['info']: 'primary', ['mention']: 'primary', + ['processing']: 'primary', + [Priority.INFO]: 'primary', + ['success']: 'success', + [Priority.LOW]: 'success', + ['warning']: 'warning', + [Priority.MEDIUM]: 'warning', + ['error']: 'error', + [Priority.HIGH]: 'error', } as const; - if (Object.hasOwn(lookup, severity)) { - return lookup[severity]; - } - - if (Object.values(Priority).includes(severity)) { - return 'success'; - } - - return 'primary'; + return value !== undefined && Object.hasOwn(lookup, value) ? lookup[value] : 'primary'; }; export const media = @@ -190,11 +189,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; -}; From f11ede4b2ff51c261ea3bd2a05aa7e425ddeb88c Mon Sep 17 00:00:00 2001 From: Alexandr Buhlak <48954743+saha80@users.noreply.github.com> Date: Mon, 25 Sep 2023 10:37:04 +0300 Subject: [PATCH 69/81] refactor: font size and weight from SC --- src/components/Error/Error.styles.ts | 6 +++--- .../common/BaseArticle/BaseArticle.styles.ts | 2 +- .../CarouselArrow/CarouselArrow.styles.ts | 2 +- .../BaseNotification.styles.ts | 8 ++++---- .../common/BaseTable/BaseTable.styles.ts | 2 +- .../CalendarSwitch/CalendarSwitch.styles.ts | 2 +- .../common/NotFound/NotFound.styles.ts | 4 ++-- .../common/References/References.styles.ts | 2 +- .../components/BaseFormItem/BaseFormItem.ts | 14 +++++++------- .../components/BaseFormTitle/BaseFormTitle.ts | 6 +++--- .../inputs/SearchInput/SearchInput.styles.ts | 6 +++--- src/components/header/Header.styles.ts | 10 +++++----- .../GithubButton/GitHubButton.styles.ts | 2 +- .../HeaderSearch/HeaderSearch.styles.ts | 4 ++-- .../NotificationsOverlay.styles.ts | 2 +- .../ProfileOverlay/ProfileOverlay.styles.ts | 6 +++--- .../SearchFilter/SearchFilter.styles.ts | 4 ++-- .../SearchResults/SearchResults.styles.ts | 8 ++++---- .../SettingsOverlay/SettingsOverlay.styles.ts | 2 +- .../layouts/AuthLayout/AuthLayout.styles.ts | 2 +- .../main/sider/MainSider/MainSider.styles.ts | 4 ++-- .../FavoritesDoctorsCard.styles.ts | 2 +- .../StatisticsCard/StatisticsCard.styles.ts | 2 +- .../TreatmentDoctor/TreatmentDoctor.styles.ts | 4 ++-- .../TreatmentNotFound.styles.ts | 2 +- src/components/profile/ProfileLayout.tsx | 4 ++-- .../ProfileInfo/ProfileInfo.styles.ts | 18 +++++++++--------- .../CheckboxColumn/CheckboxColumn.styles.ts | 2 +- .../Notifications/Notifications.styles.ts | 4 ++-- .../paymentHistory/Payment/Payment.styles.ts | 6 +++--- .../PaymentHistory/PaymentHistory.styles.ts | 2 +- .../PaymentsTable/PaymentsTable.styles.ts | 4 ++-- .../ActionButtons/ActionButtons.styles.ts | 2 +- .../AddNewCardButton.styles.ts | 2 +- .../UIComponentsPage.styles.ts | 2 +- src/styles/resetCss.ts | 2 +- 36 files changed, 78 insertions(+), 78 deletions(-) diff --git a/src/components/Error/Error.styles.ts b/src/components/Error/Error.styles.ts index 0d4255260..15c2c84fe 100644 --- a/src/components/Error/Error.styles.ts +++ b/src/components/Error/Error.styles.ts @@ -42,7 +42,7 @@ export const ContentWrapper = styled.div` 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}; @@ -58,7 +58,7 @@ export const Title = styled(BaseTypography.Text)` `; 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')}) { @@ -67,7 +67,7 @@ export const Text = styled(Title)` } @media only screen and (${media('xl')}) { - font-size: 1.5rem; + font-size: ${({ theme }) => theme.fontSizes.xxl}; margin-bottom: 1.8rem; } `; diff --git a/src/components/common/BaseArticle/BaseArticle.styles.ts b/src/components/common/BaseArticle/BaseArticle.styles.ts index 7893aa267..39b90d04c 100644 --- a/src/components/common/BaseArticle/BaseArticle.styles.ts +++ b/src/components/common/BaseArticle/BaseArticle.styles.ts @@ -86,7 +86,7 @@ export const Description = styled.div` color: ${({ theme }) => theme.textMain}; @media only screen and (${media('xxl')}) { - font-size: 1rem; + font-size: ${({ theme }) => theme.fontSizes.md}; } `; diff --git a/src/components/common/BaseCarousel/CarouselArrow/CarouselArrow.styles.ts b/src/components/common/BaseCarousel/CarouselArrow/CarouselArrow.styles.ts index f405342fe..a22dba46b 100644 --- a/src/components/common/BaseCarousel/CarouselArrow/CarouselArrow.styles.ts +++ b/src/components/common/BaseCarousel/CarouselArrow/CarouselArrow.styles.ts @@ -4,7 +4,7 @@ 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: ${({ theme }) => theme.textMain}; diff --git a/src/components/common/BaseNotification/BaseNotification.styles.ts b/src/components/common/BaseNotification/BaseNotification.styles.ts index c245de6c4..77fc8fb1b 100644 --- a/src/components/common/BaseNotification/BaseNotification.styles.ts +++ b/src/components/common/BaseNotification/BaseNotification.styles.ts @@ -12,12 +12,12 @@ 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)` @@ -32,6 +32,6 @@ export const SpaceWrapper = styled(BaseSpace)` } & span[role='img'] { - font-size: 2rem; + font-size: ${({ theme }) => theme.fontSizes.xxxxl}; } `; diff --git a/src/components/common/BaseTable/BaseTable.styles.ts b/src/components/common/BaseTable/BaseTable.styles.ts index c16b46bb6..892905e8f 100644 --- a/src/components/common/BaseTable/BaseTable.styles.ts +++ b/src/components/common/BaseTable/BaseTable.styles.ts @@ -60,7 +60,7 @@ export const Table = styled(AntTable)` & .editable-row .ant-form-item-explain { position: absolute; top: 100%; - font-size: 0.75rem; + font-size: ${({ theme }) => theme.fontSizes.xxs}; } .ant-table-column-sort { diff --git a/src/components/common/CalendarSwitch/CalendarSwitch.styles.ts b/src/components/common/CalendarSwitch/CalendarSwitch.styles.ts index bed84aae4..b9b5a016e 100644 --- a/src/components/common/CalendarSwitch/CalendarSwitch.styles.ts +++ b/src/components/common/CalendarSwitch/CalendarSwitch.styles.ts @@ -8,7 +8,7 @@ export const CalendarSwitch = styled.div` align-items: center; `; export const Text = styled(BaseTypography.Text)` - font-weight: bold; + font-weight: ${({ theme }) => theme.fontWeights.bold}; font-size: ${({ theme }) => theme.fontSizes.xs}; @media only screen and (${media('md')}) { 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 7ac9a0104..b01065231 100644 --- a/src/components/common/References/References.styles.ts +++ b/src/components/common/References/References.styles.ts @@ -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/forms/components/BaseFormItem/BaseFormItem.ts b/src/components/common/forms/components/BaseFormItem/BaseFormItem.ts index 6a7aaf2ff..1d533479d 100644 --- a/src/components/common/forms/components/BaseFormItem/BaseFormItem.ts +++ b/src/components/common/forms/components/BaseFormItem/BaseFormItem.ts @@ -30,22 +30,22 @@ export const BaseFormItem = styled(Form.Item as React.FC) theme.fontWeights.semibold}; width: 5rem; color: ${({ theme }) => theme.primary}; .anticon, svg { - font-size: 1.25rem; + font-size: ${({ theme }) => theme.fontSizes.xl}; } @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; + font-size: ${({ theme }) => theme.fontSizes.xxl}; } } @@ -105,12 +105,12 @@ export const BaseFormItem = styled(Form.Item as React.FC) theme.fontSizes.md}; } .ant-select-arrow { - font-size: 1rem; width: unset; height: unset; top: 50%; diff --git a/src/components/common/forms/components/BaseFormTitle/BaseFormTitle.ts b/src/components/common/forms/components/BaseFormTitle/BaseFormTitle.ts index a099a6883..20490a85b 100644 --- a/src/components/common/forms/components/BaseFormTitle/BaseFormTitle.ts +++ b/src/components/common/forms/components/BaseFormTitle/BaseFormTitle.ts @@ -3,11 +3,11 @@ 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; + font-size: ${({ theme }) => theme.fontSizes.lg}; } `; diff --git a/src/components/common/inputs/SearchInput/SearchInput.styles.ts b/src/components/common/inputs/SearchInput/SearchInput.styles.ts index 5c36d0364..55bd6491d 100644 --- a/src/components/common/inputs/SearchInput/SearchInput.styles.ts +++ b/src/components/common/inputs/SearchInput/SearchInput.styles.ts @@ -18,15 +18,15 @@ export const SearchInput = styled(BaseInput.Search)` } & input { - font-weight: 600; + font-weight: ${({ theme }) => theme.fontWeights.semibold}; background-color: ${({ theme }) => theme.background}; @media only screen and (${media('md')}) { - font-size: 1rem; + font-size: ${({ theme }) => theme.fontSizes.md}; } &::placeholder { - font-weight: 500; + font-weight: ${({ theme }) => theme.fontWeights.medium}; } } diff --git a/src/components/header/Header.styles.ts b/src/components/header/Header.styles.ts index f0ae46e97..213a06742 100644 --- a/src/components/header/Header.styles.ts +++ b/src/components/header/Header.styles.ts @@ -11,10 +11,10 @@ export const HeaderActionWrapper = styled.div` & > .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; + font-size: ${({ theme }) => theme.fontSizes.xxxl}; } } @@ -25,12 +25,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}; @media only screen and (${media('md')}) { - font-size: 1rem; + font-size: ${({ theme }) => theme.fontSizes.md}; } } diff --git a/src/components/header/components/GithubButton/GitHubButton.styles.ts b/src/components/header/components/GithubButton/GitHubButton.styles.ts index f9e559242..b9e4c2406 100644 --- a/src/components/header/components/GithubButton/GitHubButton.styles.ts +++ b/src/components/header/components/GithubButton/GitHubButton.styles.ts @@ -26,6 +26,6 @@ export const Button = styled(BaseButton)` `; export const GithubIcon = styled(GithubOutlined)` - font-size: 1.5rem; + font-size: ${({ theme }) => theme.fontSizes.xxl}; vertical-align: middle; `; diff --git a/src/components/header/components/HeaderSearch/HeaderSearch.styles.ts b/src/components/header/components/HeaderSearch/HeaderSearch.styles.ts index e6b28edac..38d33ef22 100644 --- a/src/components/header/components/HeaderSearch/HeaderSearch.styles.ts +++ b/src/components/header/components/HeaderSearch/HeaderSearch.styles.ts @@ -8,10 +8,10 @@ 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; + font-size: ${({ theme }) => theme.fontSizes.xxxl}; } } `; diff --git a/src/components/header/components/notificationsDropdown/NotificationsOverlay/NotificationsOverlay.styles.ts b/src/components/header/components/notificationsDropdown/NotificationsOverlay/NotificationsOverlay.styles.ts index 2b6cc857d..db901d3f3 100644 --- a/src/components/header/components/notificationsDropdown/NotificationsOverlay/NotificationsOverlay.styles.ts +++ b/src/components/header/components/notificationsDropdown/NotificationsOverlay/NotificationsOverlay.styles.ts @@ -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/profileDropdown/ProfileOverlay/ProfileOverlay.styles.ts b/src/components/header/components/profileDropdown/ProfileOverlay/ProfileOverlay.styles.ts index 3c0547937..8d2bbbc90 100644 --- a/src/components/header/components/profileDropdown/ProfileOverlay/ProfileOverlay.styles.ts +++ b/src/components/header/components/profileDropdown/ProfileOverlay/ProfileOverlay.styles.ts @@ -8,15 +8,15 @@ export const Text = styled(BaseTypography.Text)` align-items: center; justify-content: center; height: 50px; - font-size: 0.875rem; - font-weight: 600; + font-size: ${({ theme }) => theme.fontSizes.xs}; + font-weight: ${({ theme }) => theme.fontWeights.semibold}; & > a { display: block; } @media only screen and (${media('md')}) { - font-size: 1rem; + font-size: ${({ theme }) => theme.fontSizes.md}; } `; 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 30e94628e..91e2a1660 100644 --- a/src/components/header/components/searchDropdown/searchOverlay/SearchFilter/SearchFilter.styles.ts +++ b/src/components/header/components/searchDropdown/searchOverlay/SearchFilter/SearchFilter.styles.ts @@ -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; + 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 0f744ea3f..09a5f63f1 100644 --- a/src/components/header/components/searchDropdown/searchOverlay/SearchResults/SearchResults.styles.ts +++ b/src/components/header/components/searchDropdown/searchOverlay/SearchResults/SearchResults.styles.ts @@ -5,16 +5,16 @@ import styled from 'styled-components'; export const SearchResultsWrapper = styled.div` & > div { .ant-typography { - font-size: 0.875rem; + font-size: ${({ theme }) => theme.fontSizes.xs}; } & .ant-list-header { - font-size: 0.75rem; - padding-bottom: 6px; + font-size: ${({ theme }) => theme.fontSizes.xxs}; + padding-bottom: 0.375rem; color: ${({ theme }) => theme.primary}; @media only screen and (${media('md')}) { - font-size: 0.875rem; + font-size: ${({ theme }) => theme.fontSizes.xs}; } } 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/layouts/AuthLayout/AuthLayout.styles.ts b/src/components/layouts/AuthLayout/AuthLayout.styles.ts index feac63455..29f81b568 100644 --- a/src/components/layouts/AuthLayout/AuthLayout.styles.ts +++ b/src/components/layouts/AuthLayout/AuthLayout.styles.ts @@ -172,7 +172,7 @@ export const FooterWrapper = styled.div` `; export const BackIcon = styled(LeftOutlined)` - font-size: 0.75rem; + font-size: ${({ theme }) => theme.fontSizes.xxs}; margin-right: 0.75rem; `; diff --git a/src/components/layouts/main/sider/MainSider/MainSider.styles.ts b/src/components/layouts/main/sider/MainSider/MainSider.styles.ts index 44a6b40e4..3da64a93f 100644 --- a/src/components/layouts/main/sider/MainSider/MainSider.styles.ts +++ b/src/components/layouts/main/sider/MainSider/MainSider.styles.ts @@ -86,7 +86,7 @@ export const SiderLogoDiv = styled.div` export const BrandSpan = styled.span` margin: 0 1rem; - font-weight: 700; - font-size: 1.125rem; + font-weight: ${({ theme }) => theme.fontWeights.bold}; + font-size: ${({ theme }) => theme.fontSizes.lg}; color: ${({ theme }) => theme.white}; `; diff --git a/src/components/medical-dashboard/favoriteDoctors/FavoriteDoctorsCard/FavoritesDoctorsCard.styles.ts b/src/components/medical-dashboard/favoriteDoctors/FavoriteDoctorsCard/FavoritesDoctorsCard.styles.ts index 91ae55e1b..4a0e68685 100644 --- a/src/components/medical-dashboard/favoriteDoctors/FavoriteDoctorsCard/FavoritesDoctorsCard.styles.ts +++ b/src/components/medical-dashboard/favoriteDoctors/FavoriteDoctorsCard/FavoritesDoctorsCard.styles.ts @@ -20,7 +20,7 @@ export const SliderArrow = styled.div` &:before { color: ${({ theme }) => theme.primary} !important; - font-size: 2rem !important; + font-size: ${({ theme }) => theme.fontSizes.xxxxl} !important; position: absolute; left: -6px; top: -6px; 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 030a71485..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,7 +13,7 @@ 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)` diff --git a/src/components/medical-dashboard/treatmentCard/TreatmentDoctor/TreatmentDoctor.styles.ts b/src/components/medical-dashboard/treatmentCard/TreatmentDoctor/TreatmentDoctor.styles.ts index f666d95cf..6ba4d3340 100644 --- a/src/components/medical-dashboard/treatmentCard/TreatmentDoctor/TreatmentDoctor.styles.ts +++ b/src/components/medical-dashboard/treatmentCard/TreatmentDoctor/TreatmentDoctor.styles.ts @@ -3,8 +3,8 @@ import styled from 'styled-components'; 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; diff --git a/src/components/medical-dashboard/treatmentCard/TreatmentNotFound/TreatmentNotFound.styles.ts b/src/components/medical-dashboard/treatmentCard/TreatmentNotFound/TreatmentNotFound.styles.ts index a7576550a..da8423c54 100644 --- a/src/components/medical-dashboard/treatmentCard/TreatmentNotFound/TreatmentNotFound.styles.ts +++ b/src/components/medical-dashboard/treatmentCard/TreatmentNotFound/TreatmentNotFound.styles.ts @@ -4,7 +4,7 @@ import styled from 'styled-components'; export const Text = styled.div` 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/profile/ProfileLayout.tsx b/src/components/profile/ProfileLayout.tsx index 642121588..72fc35d4a 100644 --- a/src/components/profile/ProfileLayout.tsx +++ b/src/components/profile/ProfileLayout.tsx @@ -19,9 +19,9 @@ const ProfileCard = styled(BaseCard)` `; const Btn = styled(BaseButton)` - font-size: 1rem; + font-size: ${({ theme }) => theme.fontSizes.md}; margin-bottom: 1rem; - font-weight: 600; + font-weight: ${({ theme }) => theme.fontWeights.semibold}; padding: 0; height: unset; color: ${({ theme }) => theme.secondary}; diff --git a/src/components/profile/profileCard/ProfileInfo/ProfileInfo.styles.ts b/src/components/profile/profileCard/ProfileInfo/ProfileInfo.styles.ts index eadc05bec..af52294be 100644 --- a/src/components/profile/profileCard/ProfileInfo/ProfileInfo.styles.ts +++ b/src/components/profile/profileCard/ProfileInfo/ProfileInfo.styles.ts @@ -44,12 +44,12 @@ export const ImgWrapper = styled.div` `; 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; + font-size: ${({ theme }) => theme.fontSizes.xxl}; margin-bottom: 1rem; } `; @@ -58,8 +58,8 @@ export const Subtitle = styled(BaseTypography.Text)` margin-bottom: 2rem; @media only screen and (${media('xl')}) { - font-weight: 600; - font-size: 1rem; + font-weight: ${({ theme }) => theme.fontWeights.semibold}; + font-size: ${({ theme }) => theme.fontSizes.md}; margin-bottom: 2.5rem; } `; @@ -88,14 +88,14 @@ export const FullnessLine = styled.div` color: ${({ theme }) => theme.textSecondary}; @media only screen and (${media('xl')}) { - font-size: 1rem; - font-weight: 600; + 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}; @@ -104,7 +104,7 @@ export const Text = styled(BaseTypography.Text)` } @media only screen and (${media('xl')}) { - font-size: 0.875rem; + font-size: ${({ theme }) => theme.fontSizes.xs}; text-align: left; } `; 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 1fc9ccdfb..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 @@ -18,7 +18,7 @@ export const Col = styled.div` @media only screen and (${media('md')}) { justify-content: unset; - font-size: 1rem; + font-size: ${({ theme }) => theme.fontSizes.md}; padding: 0.5rem; } 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 b0d2622c9..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 @@ -4,11 +4,11 @@ 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; + font-size: ${({ theme }) => theme.fontSizes.md}; margin-bottom: 2rem; } `; diff --git a/src/components/profile/profileCard/profileFormNav/nav/payments/paymentHistory/Payment/Payment.styles.ts b/src/components/profile/profileCard/profileFormNav/nav/payments/paymentHistory/Payment/Payment.styles.ts index f96f47f56..942b64438 100644 --- a/src/components/profile/profileCard/profileFormNav/nav/payments/paymentHistory/Payment/Payment.styles.ts +++ b/src/components/profile/profileCard/profileFormNav/nav/payments/paymentHistory/Payment/Payment.styles.ts @@ -14,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` @@ -44,8 +44,8 @@ export const Item = styled.div` `; export const Subtitle = styled(BaseTypography.Text)` - font-weight: 500; - font-size: 0.75rem; + font-weight: ${({ theme }) => theme.fontWeights.medium}; + font-size: ${({ theme }) => theme.fontSizes.xxs}; color: ${({ theme }) => theme.primary}; `; 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 da1598c23..0a3004328 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 @@ -25,6 +25,6 @@ export const ContentWrapper = styled.div` export const Text = styled(BaseTypography.Text)` @media only screen and (${media('md')}) { - font-size: 1rem; + 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 3c03925c3..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 @@ -20,8 +20,8 @@ export const PaymentHistoryTable = styled(BaseTable)` .ant-table-tbody > tr > td { border-bottom: 1px solid rgba(${({ theme }) => theme.rgb.primary}, 0.3); - font-weight: 600; - font-size: 1rem; + font-weight: ${({ theme }) => theme.fontWeights.semibold}; + font-size: ${({ theme }) => theme.fontSizes.md}; } `; 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 f3bae0d50..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 @@ -8,7 +8,7 @@ export const BtnWrapper = styled.div` right: 7%; & > .ant-btn-link { - font-size: 18px; + font-size: ${({ theme }) => theme.fontSizes.lg}; padding: 0; width: unset; height: unset; 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/pages/uiComponentsPages/UIComponentsPage.styles.ts b/src/pages/uiComponentsPages/UIComponentsPage.styles.ts index b7baf2c21..2851876f7 100644 --- a/src/pages/uiComponentsPages/UIComponentsPage.styles.ts +++ b/src/pages/uiComponentsPages/UIComponentsPage.styles.ts @@ -7,7 +7,7 @@ export const Card = styled(CommonCard)` margin-bottom: 1.25rem; .ant-card-head-title { - font-size: 1rem; + font-size: ${({ theme }) => theme.fontSizes.md}; } .ant-card-body { diff --git a/src/styles/resetCss.ts b/src/styles/resetCss.ts index fc95e8f63..f2870bd47 100644 --- a/src/styles/resetCss.ts +++ b/src/styles/resetCss.ts @@ -23,7 +23,7 @@ export const resetCss = css` } body { - font-weight: 500; + font-weight: ${({ theme }) => theme.fontWeights.medium}; } img { From 425d40d94540405305e18071e07d53ec383bc377 Mon Sep 17 00:00:00 2001 From: Alexandr Buhlak <48954743+saha80@users.noreply.github.com> Date: Sun, 12 Nov 2023 15:57:46 +0200 Subject: [PATCH 70/81] refactor: media queries, constants --- .../newsFeed/NewsFilter/NewsFilter.styles.ts | 10 +-- .../BarAnimationDelayChart.tsx | 2 +- .../GradientStackedAreaChart.tsx | 2 +- .../charts/LineRaceChart/LineRaceChart.tsx | 2 +- .../charts/ScatterChart/ScatterChart.tsx | 4 +- src/components/charts/VisitorsPieChart.tsx | 4 +- src/components/common/BaseCard/BaseCard.tsx | 20 +++--- src/components/common/BaseModal/BaseModal.tsx | 3 +- src/components/header/Header.styles.ts | 5 +- .../ProfileOverlay/ProfileOverlay.styles.ts | 2 +- .../searchDropdown/SearchDropdown.styles.ts | 4 +- .../layouts/AuthLayout/AuthLayout.styles.ts | 2 +- .../layouts/main/MainContent/MainContent.tsx | 5 +- .../main/MainHeader/MainHeader.styles.ts | 2 +- .../main/sider/MainSider/MainSider.styles.ts | 6 +- .../DashboardCard/DashboardCard.tsx | 21 ++---- .../PatientResultsCard.styles.ts | 4 +- .../activityCard/ActivityChart.tsx | 12 ++-- .../BloodScreeningCard.styles.ts | 2 +- .../ScreeningsFriends.styles.ts | 4 +- .../recently-added/RecentlyAddedNft.styles.ts | 3 +- .../recently-added/nft-card/NftCard.styles.ts | 4 +- .../TrendingCollections.styles.ts | 3 +- .../TrendingCreators.styles.ts | 4 +- .../ProfileInfo/ProfileInfo.styles.ts | 2 +- .../PhoneItem/PhoneItem.styles.ts | 2 +- .../PaymentHistory/PaymentHistory.styles.ts | 14 ++-- .../CardThemeItem/CardThemeItem.styles.ts | 2 +- src/constants/defaultPaddings.ts | 11 ---- src/constants/modalSizes.ts | 16 ++--- src/controllers/notificationController.tsx | 4 +- src/hooks/useResponsive.ts | 26 ++++---- .../DashboardPages/DashboardPage.styles.ts | 4 +- src/styles/themes/constants.ts | 27 ++++++-- src/styles/themes/dark/darkTheme.ts | 17 ++++- src/styles/themes/light/lightTheme.ts | 17 ++++- src/styles/themes/types.ts | 23 ++++++- src/utils/utils.ts | 66 +++++++++++-------- 38 files changed, 201 insertions(+), 160 deletions(-) delete mode 100644 src/constants/defaultPaddings.ts diff --git a/src/components/apps/newsFeed/NewsFilter/NewsFilter.styles.ts b/src/components/apps/newsFeed/NewsFilter/NewsFilter.styles.ts index ec2f2ab6b..5ad59c9d2 100644 --- a/src/components/apps/newsFeed/NewsFilter/NewsFilter.styles.ts +++ b/src/components/apps/newsFeed/NewsFilter/NewsFilter.styles.ts @@ -5,7 +5,7 @@ import { BasePopover } from '@app/components/common/BasePopover/BasePopover'; import { BaseInput } from '@app/components/common/inputs/BaseInput/BaseInput'; import { BaseButton } from '@app/components/common/BaseButton/BaseButton'; import { BaseCheckbox } from '@app/components/common/BaseCheckbox/BaseCheckbox'; -import { media } from '@app/utils/utils'; +import { media, mediaRange } from '@app/utils/utils'; export const AddTagText = styled.span` color: ${({ theme }) => theme.textMain}; @@ -21,7 +21,7 @@ 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; @@ -79,7 +79,7 @@ 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: ${({ theme }) => theme.secondaryBackground}; margin-bottom: 1.25rem; @@ -103,7 +103,7 @@ export const TitleHeader = styled.div` `; export const Input = styled(BaseInput)` - height: 3.125rem; + height: ${({ theme }) => theme.heights.md}; border: none; background: ${({ theme }) => theme.secondaryBackground}; border-radius: 3.125rem; @@ -127,7 +127,7 @@ export const RangePicker = styled(BaseDatePicker.RangePicker)` export const PanelWrapper = styled.div` .ant-picker-panels { - @media only screen and (${media('xs')}) and (max-width: ${({ theme }) => theme.breakpoints.md - 0.02}px) { + @media only screen and (${mediaRange('xs', 'md')}) { display: flex; flex-direction: column; } diff --git a/src/components/charts/BarAnimationDelayChart/BarAnimationDelayChart.tsx b/src/components/charts/BarAnimationDelayChart/BarAnimationDelayChart.tsx index 76e5dd1db..eab3c0ed1 100644 --- a/src/components/charts/BarAnimationDelayChart/BarAnimationDelayChart.tsx +++ b/src/components/charts/BarAnimationDelayChart/BarAnimationDelayChart.tsx @@ -84,7 +84,7 @@ export const BarAnimationDelayChart: React.FC = () => { animationEasing: 'elasticOut', }; return ( - + ); diff --git a/src/components/charts/GradientStackedAreaChart/GradientStackedAreaChart.tsx b/src/components/charts/GradientStackedAreaChart/GradientStackedAreaChart.tsx index a535f2c14..06d505031 100644 --- a/src/components/charts/GradientStackedAreaChart/GradientStackedAreaChart.tsx +++ b/src/components/charts/GradientStackedAreaChart/GradientStackedAreaChart.tsx @@ -200,7 +200,7 @@ export const GradientStackedAreaChart: React.FC = () => { }; return ( - + ); diff --git a/src/components/charts/LineRaceChart/LineRaceChart.tsx b/src/components/charts/LineRaceChart/LineRaceChart.tsx index a7d5c66e9..6458c6a6c 100644 --- a/src/components/charts/LineRaceChart/LineRaceChart.tsx +++ b/src/components/charts/LineRaceChart/LineRaceChart.tsx @@ -132,7 +132,7 @@ export const LineRaceChart: React.FC = () => { }; return ( - + ); diff --git a/src/components/charts/ScatterChart/ScatterChart.tsx b/src/components/charts/ScatterChart/ScatterChart.tsx index 074ddea03..4ac1ec721 100644 --- a/src/components/charts/ScatterChart/ScatterChart.tsx +++ b/src/components/charts/ScatterChart/ScatterChart.tsx @@ -2,7 +2,6 @@ import React from 'react'; import { BaseCard } from '@app/components/common/BaseCard/BaseCard'; import { BaseChart } from 'components/common/charts/BaseChart'; import { useTranslation } from 'react-i18next'; -import { useTheme } from 'styled-components'; const data = [ [170.0, 59.0], @@ -110,10 +109,9 @@ const defaultOption = { export const ScatterChart: React.FC = () => { const { t } = useTranslation(); - const theme = useTheme(); return ( - + ); diff --git a/src/components/charts/VisitorsPieChart.tsx b/src/components/charts/VisitorsPieChart.tsx index 516475d66..0b986c0f3 100644 --- a/src/components/charts/VisitorsPieChart.tsx +++ b/src/components/charts/VisitorsPieChart.tsx @@ -2,7 +2,6 @@ import React from 'react'; import { BaseCard } from '@app/components/common/BaseCard/BaseCard'; import { useTranslation } from 'react-i18next'; import { PieChart } from '../common/charts/PieChart'; -import { useTheme } from 'styled-components'; export const VisitorsPieChart: React.FC = () => { const { t } = useTranslation(); @@ -14,10 +13,9 @@ export const VisitorsPieChart: React.FC = () => { { value: 300, name: t('charts.video') }, ]; const name = t('charts.visitorsFrom'); - const theme = useTheme(); return ( - + ); 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/BaseModal/BaseModal.tsx b/src/components/common/BaseModal/BaseModal.tsx index f0d960e74..ab71492d3 100644 --- a/src/components/common/BaseModal/BaseModal.tsx +++ b/src/components/common/BaseModal/BaseModal.tsx @@ -1,5 +1,6 @@ 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 { @@ -7,7 +8,7 @@ interface BaseModalProps extends ModalProps { } export const BaseModal: React.FC = ({ size = 'medium', children, ...props }) => { - const modalSize = modalSizes[size]; + const modalSize = modalSizes[WidthCategory[size]]; return ( diff --git a/src/components/header/Header.styles.ts b/src/components/header/Header.styles.ts index 213a06742..06f31f927 100644 --- a/src/components/header/Header.styles.ts +++ b/src/components/header/Header.styles.ts @@ -1,7 +1,6 @@ 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 } from '@app/styles/themes/constants'; import { BaseCollapse } from '../common/BaseCollapse/BaseCollapse'; import { BaseCol } from '../common/BaseCol/BaseCol'; import { media } from '@app/utils/utils'; @@ -56,7 +55,7 @@ export const MobileBurger = styled(BurgerIcon)` `; export const SearchColumn = styled(BaseCol)` - padding: ${LAYOUT.desktop.paddingVertical} ${LAYOUT.desktop.paddingHorizontal}; + padding: ${({ theme }) => `${theme.paddings.md} ${theme.paddings.xl}`}; `; interface ProfileColumn { @@ -69,7 +68,7 @@ export const ProfileColumn = styled(BaseCol)` props.$isTwoColumnsLayout && css` background-color: ${props.theme.siderBackground}; - padding: ${LAYOUT.desktop.paddingVertical} ${LAYOUT.desktop.paddingHorizontal}; + padding: ${({ theme }) => `${theme.paddings.md} ${theme.paddings.xl}`}; `} } `; diff --git a/src/components/header/components/profileDropdown/ProfileOverlay/ProfileOverlay.styles.ts b/src/components/header/components/profileDropdown/ProfileOverlay/ProfileOverlay.styles.ts index 8d2bbbc90..ed565c454 100644 --- a/src/components/header/components/profileDropdown/ProfileOverlay/ProfileOverlay.styles.ts +++ b/src/components/header/components/profileDropdown/ProfileOverlay/ProfileOverlay.styles.ts @@ -7,7 +7,7 @@ export const Text = styled(BaseTypography.Text)` display: flex; align-items: center; justify-content: center; - height: 50px; + height: ${({ theme }) => theme.heights.md}; font-size: ${({ theme }) => theme.fontSizes.xs}; font-weight: ${({ theme }) => theme.fontWeights.semibold}; diff --git a/src/components/header/components/searchDropdown/SearchDropdown.styles.ts b/src/components/header/components/searchDropdown/SearchDropdown.styles.ts index d3395f3dc..f61730ca9 100644 --- a/src/components/header/components/searchDropdown/SearchDropdown.styles.ts +++ b/src/components/header/components/searchDropdown/SearchDropdown.styles.ts @@ -1,12 +1,12 @@ import styled from 'styled-components'; import { BasePopover } from '@app/components/common/BasePopover/BasePopover'; -import { media } from '@app/utils/utils'; +import { media, mediaRange } from '@app/utils/utils'; export const Popover = styled(BasePopover)` .ant-popover { box-shadow: ${({ theme }) => theme.boxShadow}; - @media only screen and (${media('xs')}) and (max-width: ${({ theme }) => theme.breakpoints.md - 0.02}px) { + @media only screen and (${mediaRange('xs', 'md')}) { width: calc(100vw - 16px); max-width: 600px; } diff --git a/src/components/layouts/AuthLayout/AuthLayout.styles.ts b/src/components/layouts/AuthLayout/AuthLayout.styles.ts index 29f81b568..84cb681bf 100644 --- a/src/components/layouts/AuthLayout/AuthLayout.styles.ts +++ b/src/components/layouts/AuthLayout/AuthLayout.styles.ts @@ -95,7 +95,7 @@ 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 { diff --git a/src/components/layouts/main/MainContent/MainContent.tsx b/src/components/layouts/main/MainContent/MainContent.tsx index 83010664e..abc8649e7 100644 --- a/src/components/layouts/main/MainContent/MainContent.tsx +++ b/src/components/layouts/main/MainContent/MainContent.tsx @@ -1,5 +1,4 @@ import styled, { css } from 'styled-components'; -import { LAYOUT } from '@app/styles/themes/constants'; import { BaseLayout } from '@app/components/common/BaseLayout/BaseLayout'; import { media } from '@app/utils/utils'; @@ -8,14 +7,14 @@ interface HeaderProps { } 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}; + padding: ${({ theme }) => `${theme.paddings.md} ${theme.paddings.xl}`}; } @media only screen and (${media('xl')}) { diff --git a/src/components/layouts/main/MainHeader/MainHeader.styles.ts b/src/components/layouts/main/MainHeader/MainHeader.styles.ts index 66d6251b1..c89cd7e66 100644 --- a/src/components/layouts/main/MainHeader/MainHeader.styles.ts +++ b/src/components/layouts/main/MainHeader/MainHeader.styles.ts @@ -14,7 +14,7 @@ export const Header = styled(BaseLayout.Header)
` padding-bottom: 1rem; @media only screen and (${media('md')}) { - padding: ${LAYOUT.desktop.paddingVertical} ${LAYOUT.desktop.paddingHorizontal}; + padding: ${({ theme }) => `${theme.paddings.md} ${theme.paddings.xl}`}; height: ${LAYOUT.desktop.headerHeight}; ${(props) => diff --git a/src/components/layouts/main/sider/MainSider/MainSider.styles.ts b/src/components/layouts/main/sider/MainSider/MainSider.styles.ts index 3da64a93f..8bc8a4812 100644 --- a/src/components/layouts/main/sider/MainSider/MainSider.styles.ts +++ b/src/components/layouts/main/sider/MainSider/MainSider.styles.ts @@ -72,15 +72,15 @@ 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')}) { 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}; } `; 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/PatientResultsCard/PatientResultsCard.styles.ts b/src/components/medical-dashboard/PatientResultsCard/PatientResultsCard.styles.ts index dbc67f0e9..15c24bf12 100644 --- a/src/components/medical-dashboard/PatientResultsCard/PatientResultsCard.styles.ts +++ b/src/components/medical-dashboard/PatientResultsCard/PatientResultsCard.styles.ts @@ -23,7 +23,7 @@ export const CalendarIcon = styled(CalendarOutlined)` export const MobileTitleWrapper = styled.div` display: flex; justify-content: space-between; - height: 2rem; + height: ${({ theme }) => theme.heights.xs}; align-items: center; `; @@ -59,7 +59,7 @@ export const Description = styled(BaseTypography.Text)` `; export const IconWrapper = styled.div` - height: 2rem; + height: ${({ theme }) => theme.heights.xs}; width: 2rem; border-radius: 50%; display: flex; diff --git a/src/components/medical-dashboard/activityCard/ActivityChart.tsx b/src/components/medical-dashboard/activityCard/ActivityChart.tsx index fcf33f87d..a27fe5363 100644 --- a/src/components/medical-dashboard/activityCard/ActivityChart.tsx +++ b/src/components/medical-dashboard/activityCard/ActivityChart.tsx @@ -19,9 +19,7 @@ export const ActivityChart: React.FC = ({ data }) => { 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, [ @@ -35,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: { diff --git a/src/components/medical-dashboard/bloodScreeningCard/BloodScreeningCard/BloodScreeningCard.styles.ts b/src/components/medical-dashboard/bloodScreeningCard/BloodScreeningCard/BloodScreeningCard.styles.ts index 4a0994084..93921275c 100644 --- a/src/components/medical-dashboard/bloodScreeningCard/BloodScreeningCard/BloodScreeningCard.styles.ts +++ b/src/components/medical-dashboard/bloodScreeningCard/BloodScreeningCard/BloodScreeningCard.styles.ts @@ -13,7 +13,7 @@ export const TitleWrapper = styled.div` export const ActiveItem = styled.div` background: #ecf6ff; - height: 3.125rem; + height: ${({ theme }) => theme.heights.md}; border-radius: ${({ theme }) => theme.borderRadius}; padding: 0 1rem; display: flex; 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 baffb7713..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/utils/utils'; +import { media, normalizeProp } from '@app/utils/utils'; interface WrapperProps { $isOpen: boolean; @@ -14,7 +14,7 @@ export const Wrapper = styled.div` @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')}) { diff --git a/src/components/nft-dashboard/recently-added/RecentlyAddedNft.styles.ts b/src/components/nft-dashboard/recently-added/RecentlyAddedNft.styles.ts index a56ac82a3..58faee5a7 100644 --- a/src/components/nft-dashboard/recently-added/RecentlyAddedNft.styles.ts +++ b/src/components/nft-dashboard/recently-added/RecentlyAddedNft.styles.ts @@ -1,5 +1,6 @@ import styled from 'styled-components'; import { BaseButton } from '@app/components/common/BaseButton/BaseButton'; +import { mediaMax } from '@app/utils/utils'; export const SectionWrapper = styled.div` .slick-slide > div { @@ -13,7 +14,7 @@ export const SectionWrapper = styled.div` margin-bottom: -40px; } - @media only screen and (max-width: ${({ theme }) => theme.breakpoints.md - 0.02}px) { + @media only screen and (${mediaMax('md')}) { display: flex; flex-direction: column; width: 100%; 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 a244c2716..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 { media } from '@app/utils/utils'; +import { media, mediaMax } from '@app/utils/utils'; import { BaseTypography } from '@app/components/common/BaseTypography/BaseTypography'; interface CardInternalProps { @@ -36,7 +36,7 @@ export const InfoRow = styled.div` justify-content: space-between; margin-bottom: 0.625rem; - @media only screen and (max-width: ${({ theme }) => theme.breakpoints.md - 0.02}px) { + @media only screen and (${mediaMax('md')}) { &:first-of-type { margin-bottom: 0; } diff --git a/src/components/nft-dashboard/trending-collections/TrendingCollections.styles.ts b/src/components/nft-dashboard/trending-collections/TrendingCollections.styles.ts index a56ac82a3..58faee5a7 100644 --- a/src/components/nft-dashboard/trending-collections/TrendingCollections.styles.ts +++ b/src/components/nft-dashboard/trending-collections/TrendingCollections.styles.ts @@ -1,5 +1,6 @@ import styled from 'styled-components'; import { BaseButton } from '@app/components/common/BaseButton/BaseButton'; +import { mediaMax } from '@app/utils/utils'; export const SectionWrapper = styled.div` .slick-slide > div { @@ -13,7 +14,7 @@ export const SectionWrapper = styled.div` margin-bottom: -40px; } - @media only screen and (max-width: ${({ theme }) => theme.breakpoints.md - 0.02}px) { + @media only screen and (${mediaMax('md')}) { display: flex; flex-direction: column; width: 100%; diff --git a/src/components/nft-dashboard/trending-creators/TrendingCreators.styles.ts b/src/components/nft-dashboard/trending-creators/TrendingCreators.styles.ts index cb26432b4..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 { media } from '@app/utils/utils'; +import { media, mediaMax } from '@app/utils/utils'; export const StoriesModal = styled(BaseModal)` - @media only screen and (max-width: ${({ theme }) => theme.breakpoints.md - 0.02}px) { + @media only screen and (${mediaMax('md')}) { top: 0; padding: 0; margin: 0; diff --git a/src/components/profile/profileCard/ProfileInfo/ProfileInfo.styles.ts b/src/components/profile/profileCard/ProfileInfo/ProfileInfo.styles.ts index af52294be..7cf3b6c4e 100644 --- a/src/components/profile/profileCard/ProfileInfo/ProfileInfo.styles.ts +++ b/src/components/profile/profileCard/ProfileInfo/ProfileInfo.styles.ts @@ -71,7 +71,7 @@ export const FullnessWrapper = styled.div` background-color: rgba(${({ theme }) => theme.rgb.warning}, 0.5); @media only screen and (${media('xl')}) { - height: 2.5rem; + height: ${({ theme }) => theme.heights.sm}; margin-bottom: 1rem; } `; 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 65fe5820a..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 @@ -4,7 +4,7 @@ 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; 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 0a3004328..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/utils/utils'; +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,12 +10,16 @@ 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')}) { ${(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')}) { 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 fccda5b53..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 @@ -11,7 +11,7 @@ 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: ${({ theme }) => theme.borderRadius}; 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/notificationController.tsx b/src/controllers/notificationController.tsx index 45fd19a06..62fac335c 100644 --- a/src/controllers/notificationController.tsx +++ b/src/controllers/notificationController.tsx @@ -8,7 +8,7 @@ interface IconWrapperProps { } const IconWrapper = styled.div` - font-size: ${(props) => (props.$isOnlyTitle ? '2rem' : '3rem')}; + font-size: ${(props) => (props.$isOnlyTitle ? props.theme.fontSizes.xxxxl : '3rem')}; line-height: 2rem; `; @@ -25,7 +25,7 @@ const Message = styled.div` props.$isOnlyTitle ? css` font-size: ${props.theme.fontSizes.md}; - height: 2rem; + height: ${props.theme.heights.xs}; font-weight: ${props.theme.fontWeights.semibold}; margin-inline-start: 9px; ` diff --git a/src/hooks/useResponsive.ts b/src/hooks/useResponsive.ts index 4e5d589eb..f8eaf7658 100644 --- a/src/hooks/useResponsive.ts +++ b/src/hooks/useResponsive.ts @@ -1,5 +1,7 @@ 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, @@ -19,22 +22,16 @@ interface ResponsiveReturnValues { export const useResponsive = (): ResponsiveReturnValues => { const theme = useTheme(); - const isMobile = useMediaQuery({ query: `(min-width: ${theme.breakpoints.xs}px)` }); - const isTablet = useMediaQuery({ query: `(min-width: ${theme.breakpoints.md}px)` }); - const isDesktop = useMediaQuery({ query: `(min-width: ${theme.breakpoints.xl}px)` }); - const isBigScreen = useMediaQuery({ query: `(min-width: ${theme.breakpoints.xxl}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 mobileOnly = useMediaQuery({ - query: `(max-width: ${theme.breakpoints.md - 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 tabletOnly = useMediaQuery({ - query: `(min-width: ${theme.breakpoints.md}px) and (max-width: ${theme.breakpoints.xl - 0.02}px)`, - }); - - const desktopOnly = useMediaQuery({ - query: `(min-width: ${theme.breakpoints.xl}px) and (max-width: ${theme.breakpoints.xxl - 0.02}px)`, - }); + const breakpoint = isDesktop ? WidthCategory.large : isTablet ? WidthCategory.medium : WidthCategory.small; return { isMobile, @@ -44,6 +41,7 @@ export const useResponsive = (): ResponsiveReturnValues => { mobileOnly, tabletOnly, desktopOnly, + breakpoint, useMediaQuery, }; }; diff --git a/src/pages/DashboardPages/DashboardPage.styles.ts b/src/pages/DashboardPages/DashboardPage.styles.ts index ede98a902..b30ca9071 100644 --- a/src/pages/DashboardPages/DashboardPage.styles.ts +++ b/src/pages/DashboardPages/DashboardPage.styles.ts @@ -4,7 +4,7 @@ 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; @@ -16,7 +16,7 @@ export const RightSideCol = styled(BaseCol)` export const LeftSideCol = styled(BaseCol)` @media only screen and (${media('xl')}) { - padding: ${LAYOUT.desktop.paddingVertical} ${LAYOUT.desktop.paddingHorizontal}; + padding: ${({ theme }) => `${theme.paddings.md} ${theme.paddings.xl}`}; height: calc(100vh - ${LAYOUT.desktop.headerHeight}); overflow: auto; } diff --git a/src/styles/themes/constants.ts b/src/styles/themes/constants.ts index 7d33346b8..b4f32c23e 100644 --- a/src/styles/themes/constants.ts +++ b/src/styles/themes/constants.ts @@ -19,14 +19,9 @@ export const BASE_COLORS = { 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; @@ -59,7 +54,7 @@ export const FONT_WEIGHT = { black: 900, } as const satisfies FontWeights; -export const HEIGHT = { +export const HEIGHTS = { xxs: '1.5rem', xs: '2rem', sm: '2.5rem', @@ -75,3 +70,23 @@ export const BREAKPOINTS = { xl: 1280, xxl: 1920, } as const satisfies Partial; + +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 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 e0b78f8de..a55b8390e 100644 --- a/src/styles/themes/dark/darkTheme.ts +++ b/src/styles/themes/dark/darkTheme.ts @@ -1,6 +1,16 @@ import { hexToRGB, shadeColor } from '@app/utils/utils'; import { graphic } from 'echarts'; -import { BASE_COLORS, BORDER_RADIUS, BREAKPOINTS, FONT_FAMILY, FONT_SIZE, FONT_WEIGHT, HEIGHT } from '../constants'; +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 = { @@ -139,7 +149,7 @@ export const darkColorsTheme = { ]), ...BASE_COLORS, fontSizes: FONT_SIZE, - heights: HEIGHT, + heights: HEIGHTS, borderRadius: BORDER_RADIUS, fontWeights: FONT_WEIGHT, fontFamilies: FONT_FAMILY, @@ -149,8 +159,9 @@ export const darkColorsTheme = { sliderFillColor: '#e1e1e1', newsFilterBoxShadow: '0 4px 40px rgba(0, 0, 0, 0.07)', radioBoxShadow: `0 0 0 3px rgba(${rgb.primary}, 0.12)`, - chartsCardPadding: '0 0 1.875rem', 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 6c9ffc872..c21e70e78 100644 --- a/src/styles/themes/light/lightTheme.ts +++ b/src/styles/themes/light/lightTheme.ts @@ -1,6 +1,16 @@ import { hexToRGB, shadeColor } from '@app/utils/utils'; import { graphic } from 'echarts'; -import { BASE_COLORS, BORDER_RADIUS, BREAKPOINTS, FONT_FAMILY, FONT_SIZE, FONT_WEIGHT, HEIGHT } from '../constants'; +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 = { @@ -139,7 +149,7 @@ export const lightColorsTheme = { ]), ...BASE_COLORS, fontSizes: FONT_SIZE, - heights: HEIGHT, + heights: HEIGHTS, borderRadius: BORDER_RADIUS, fontWeights: FONT_WEIGHT, fontFamilies: FONT_FAMILY, @@ -149,8 +159,9 @@ export const lightColorsTheme = { sliderFillColor: '#e1e1e1', newsFilterBoxShadow: '0 4px 40px rgba(0, 0, 0, 0.07)', radioBoxShadow: `0 0 0 3px rgba(${rgb.primary}, 0.12)`, - chartsCardPadding: '0 0 1.875rem', 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/types.ts b/src/styles/themes/types.ts index 67c0da0c0..b723585bd 100644 --- a/src/styles/themes/types.ts +++ b/src/styles/themes/types.ts @@ -1,6 +1,7 @@ import type * as CSS from 'csstype'; import type { LinearGradientObject } from 'echarts'; import type { Breakpoint } from 'antd'; +import type { PresetColorKey } from 'antd/es/theme/interface'; type IndexedPrimary = `primary${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10}`; @@ -10,7 +11,7 @@ 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 NamedColors = Record; export type ColorType = 'primary' | 'success' | 'warning' | 'error'; @@ -27,7 +28,22 @@ export type FontWeights = Record< export type NamedIndexes = Record<'main' | 'secondary' | 'tertiary' | 'quaternary', string>; -export type RelativeSizeKey = Breakpoint | `${'x' | 'xx' | 'xxx' | 'xxxx'}${'s' | 'l'}`; +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; @@ -95,7 +111,8 @@ export interface ITheme extends ColorTypes, IndexedPrimaries, ChartColors, Parti sliderFillColor: string; radioBoxShadow: string; newsFilterBoxShadow: string; - chartsCardPadding: string; treatmentCalendarEventBoxShadow: string; modalBoxShadow: string; + margins: Partial; + paddings: Partial; } diff --git a/src/utils/utils.ts b/src/utils/utils.ts index a7bf76c2b..e98189456 100644 --- a/src/utils/utils.ts +++ b/src/utils/utils.ts @@ -49,41 +49,55 @@ 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; +const units = 'px'; +const normalize = (value: T) => + typeof value === 'string' ? value : (`${value}${units}` as const); -export const colorTypeFrom = (severity: Priority | NotificationType | undefined): ColorType => { - if (severity === undefined) { - return 'primary'; +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(' '); +}; -export const colorTypeFrom = ( - value: Priority | Severity | NotificationType | BaseBadgeProps['status'] | undefined, -): ColorType => { - const lookup = { - ['default']: 'primary', - ['info']: 'primary', - ['mention']: 'primary', - ['processing']: 'primary', - [Priority.INFO]: 'primary', +const colorTypeLookup = { + ['default']: 'primary', + ['info']: 'primary', + ['mention']: 'primary', + ['processing']: 'primary', + ['undefined']: 'primary', + [Priority.INFO]: 'primary', - ['success']: 'success', - [Priority.LOW]: 'success', + ['success']: 'success', + [Priority.LOW]: 'success', - ['warning']: 'warning', - [Priority.MEDIUM]: 'warning', + ['warning']: 'warning', + [Priority.MEDIUM]: 'warning', - ['error']: 'error', - [Priority.HIGH]: 'error', - } as const; + ['error']: 'error', + [Priority.HIGH]: 'error', +} as const; - return value !== undefined && Object.hasOwn(lookup, value) ? lookup[value] : 'primary'; -}; +export const colorTypeFrom = ( + value: Priority | Severity | NotificationType | BaseBadgeProps['status'] | undefined, +): ColorType => colorTypeLookup[`${value}`]; + +type Breakpoints = keyof DefaultTheme['breakpoints']; export const media = - (breakpoint: T) => - ({ theme }: { theme: DefaultTheme }): `(min-width: ${DefaultTheme['breakpoints'][T]}px)` => - `(min-width: ${theme.breakpoints[breakpoint]}px)`; + (breakpoint: T) => + ({ theme }: { theme: DefaultTheme }) => + `width >= ${normalize(theme.breakpoints[breakpoint])}` as const; + +export const mediaMax = + (breakpoint: T) => + ({ theme }: { theme: DefaultTheme }) => + `width < ${normalize(theme.breakpoints[breakpoint])}` as const; + +export const mediaRange = + (lower: Lower, upper: Upper) => + ({ theme }: { 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[] => From ff053884f77a35019bdbc99c5705005ca0d166f5 Mon Sep 17 00:00:00 2001 From: Alexandr Buhlak <48954743+saha80@users.noreply.github.com> Date: Sun, 12 Nov 2023 17:41:24 +0200 Subject: [PATCH 71/81] fix(useResponsive): add missing parentheses --- src/hooks/useResponsive.ts | 14 +++++++------- src/utils/utils.ts | 6 +++--- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/hooks/useResponsive.ts b/src/hooks/useResponsive.ts index f8eaf7658..d0ba87bd4 100644 --- a/src/hooks/useResponsive.ts +++ b/src/hooks/useResponsive.ts @@ -22,14 +22,14 @@ interface ResponsiveReturnValues { export const useResponsive = (): ResponsiveReturnValues => { const theme = useTheme(); - 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 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 mobileOnly = useMediaQuery({ query: mediaMax('md')({ theme }) }); - const tabletOnly = useMediaQuery({ query: mediaRange('md', 'xl')({ theme }) }); - const desktopOnly = useMediaQuery({ query: mediaRange('xl', 'xxl')({ theme }) }); + const mobileOnly = useMediaQuery({ query: `(${mediaMax('md')({ theme })})` }); + const tabletOnly = useMediaQuery({ query: `(${mediaRange('md', 'xl')({ theme })})` }); + const desktopOnly = useMediaQuery({ query: `(${mediaRange('xl', 'xxl')({ theme })})` }); const breakpoint = isDesktop ? WidthCategory.large : isTablet ? WidthCategory.medium : WidthCategory.small; diff --git a/src/utils/utils.ts b/src/utils/utils.ts index e98189456..ca0d4d413 100644 --- a/src/utils/utils.ts +++ b/src/utils/utils.ts @@ -86,17 +86,17 @@ type Breakpoints = keyof DefaultTheme['breakpoints']; export const media = (breakpoint: T) => - ({ theme }: { theme: DefaultTheme }) => + ({ theme }: { readonly theme: DefaultTheme }) => `width >= ${normalize(theme.breakpoints[breakpoint])}` as const; export const mediaMax = (breakpoint: T) => - ({ theme }: { theme: DefaultTheme }) => + ({ theme }: { readonly theme: DefaultTheme }) => `width < ${normalize(theme.breakpoints[breakpoint])}` as const; export const mediaRange = (lower: Lower, upper: Upper) => - ({ theme }: { theme: DefaultTheme }) => + ({ theme }: { readonly theme: DefaultTheme }) => `${normalize(theme.breakpoints[lower])} <= width < ${normalize(theme.breakpoints[upper])}` as const; // eslint-disable-next-line @typescript-eslint/no-explicit-any From cef65871abd273a6e38174a84602214364f836b8 Mon Sep 17 00:00:00 2001 From: Alexandr Buhlak <48954743+saha80@users.noreply.github.com> Date: Sun, 12 Nov 2023 17:49:50 +0200 Subject: [PATCH 72/81] fix(BaseAlert): success background and border --- src/styles/themeConfig.ts | 2 +- src/styles/themes/light/lightTheme.ts | 4 ++-- src/styles/themes/types.ts | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/styles/themeConfig.ts b/src/styles/themeConfig.ts index 70bf4c3d7..71c889147 100644 --- a/src/styles/themeConfig.ts +++ b/src/styles/themeConfig.ts @@ -34,7 +34,7 @@ export const getThemeConfig = (theme: DefaultTheme): ThemeConfig => { colorFillAlter, colorTextPlaceholder: theme.inputPlaceholder, colorPrimaryHover: theme.primary5, - colorSuccessBg: theme['successBg'], + colorSuccessBg: theme.successBg, colorSuccessBorder: theme.successBorder, fontFamily, fontFamilyCode: fontFamily, diff --git a/src/styles/themes/light/lightTheme.ts b/src/styles/themes/light/lightTheme.ts index c21e70e78..4fb66dfd7 100644 --- a/src/styles/themes/light/lightTheme.ts +++ b/src/styles/themes/light/lightTheme.ts @@ -56,8 +56,8 @@ const rgb = Object.fromEntries( export const lightColorsTheme = { ...indexedPrimaries, - successBg: undefined, - successBorder: undefined, + successBg: '#e1f0e4', + successBorder: '#a1d6ad', primaryGradient: 'linear-gradient(211.49deg, #006CCF 15.89%, #00509A 48.97%)', light: '#C5D3E0', secondary: '#0085FF', diff --git a/src/styles/themes/types.ts b/src/styles/themes/types.ts index b723585bd..7345021a5 100644 --- a/src/styles/themes/types.ts +++ b/src/styles/themes/types.ts @@ -51,8 +51,8 @@ export interface ITheme extends ColorTypes, IndexedPrimaries, ChartColors, Parti primaryGradient: string; light: string; secondary: string; - successBg?: string; - successBorder?: string; + successBg: string; + successBorder: string; background: string; secondaryBackground: string; secondaryBackgroundSelected: string; From 0fe4a1a69b643d953a586077dfafa0480ad76920 Mon Sep 17 00:00:00 2001 From: Alexandr Buhlak <48954743+saha80@users.noreply.github.com> Date: Sun, 12 Nov 2023 19:05:18 +0200 Subject: [PATCH 73/81] fix(BaseSelect): placeholder color --- src/styles/themeConfig.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/styles/themeConfig.ts b/src/styles/themeConfig.ts index 71c889147..0eaa09b5f 100644 --- a/src/styles/themeConfig.ts +++ b/src/styles/themeConfig.ts @@ -224,6 +224,7 @@ export const getThemeConfig = (theme: DefaultTheme): ThemeConfig => { }, Select: { fontSizeSM: remToPixels(theme.fontSizes.xs), + colorTextPlaceholder: theme.textMain, colorTextTertiary: theme.icon, colorTextQuaternary: theme.textMain, // arrow color colorFillSecondary: theme.backgroundColorBase, From e5226f80efaec26bd93ddd649dd1f2b0abf488b2 Mon Sep 17 00:00:00 2001 From: Alexandr Buhlak <48954743+saha80@users.noreply.github.com> Date: Sun, 12 Nov 2023 19:23:41 +0200 Subject: [PATCH 74/81] fix(BaseTable): row-expand icon incorrect size --- src/components/common/BaseTable/BaseTable.styles.ts | 2 -- src/styles/themeConfig.ts | 3 +-- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/src/components/common/BaseTable/BaseTable.styles.ts b/src/components/common/BaseTable/BaseTable.styles.ts index 892905e8f..c85638f75 100644 --- a/src/components/common/BaseTable/BaseTable.styles.ts +++ b/src/components/common/BaseTable/BaseTable.styles.ts @@ -19,8 +19,6 @@ export const Table = styled(AntTable)` } & tbody .ant-table-row-expand-icon { - min-height: 1.25rem; - min-width: 1.25rem; border-radius: 0.1875rem; margin-top: 0; } diff --git a/src/styles/themeConfig.ts b/src/styles/themeConfig.ts index 0eaa09b5f..7592e79ad 100644 --- a/src/styles/themeConfig.ts +++ b/src/styles/themeConfig.ts @@ -54,6 +54,7 @@ export const getThemeConfig = (theme: DefaultTheme): ThemeConfig => { controlTmpOutline: controlOutline, controlOutlineWidth: 2, lineWidthFocus: 0, + controlInteractiveSize: 16, screenXSMin: 0, screenXS: theme.breakpoints.xs, screenXSMax: theme.breakpoints.sm - 1, @@ -210,13 +211,11 @@ export const getThemeConfig = (theme: DefaultTheme): ThemeConfig => { }, Tree: { controlHeightSM: remToPixels(theme.heights.xxs), - controlInteractiveSize: 16, }, Checkbox: { colorBgContainer: 'transparent', colorPrimary: theme.primary, colorTextDisabled: theme.disabled, - controlInteractiveSize: 16, marginXS: 8, }, Tag: { From ae95c71f4493ae3e901646e9ffd956323f122af4 Mon Sep 17 00:00:00 2001 From: Alexandr Buhlak <48954743+saha80@users.noreply.github.com> Date: Tue, 14 Nov 2023 10:20:25 +0200 Subject: [PATCH 75/81] fix(PhoneItem): missing styles --- package.json | 2 +- .../components/BaseFormItem/BaseFormItem.ts | 7 +++++++ yarn.lock | 20 +++++++++---------- 3 files changed, 18 insertions(+), 11 deletions(-) diff --git a/package.json b/package.json index d3e701221..2133e8ee4 100644 --- a/package.json +++ b/package.json @@ -37,7 +37,7 @@ "react-infinite-scroll-component": "^6.1.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", diff --git a/src/components/common/forms/components/BaseFormItem/BaseFormItem.ts b/src/components/common/forms/components/BaseFormItem/BaseFormItem.ts index 1d533479d..20e38f0a5 100644 --- a/src/components/common/forms/components/BaseFormItem/BaseFormItem.ts +++ b/src/components/common/forms/components/BaseFormItem/BaseFormItem.ts @@ -12,6 +12,13 @@ export type BaseFormItemProps = FormItemProps; 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 { diff --git a/yarn.lock b/yarn.lock index e097100ec..76be302dc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -11091,10 +11091,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 @@ -11151,7 +11151,7 @@ __metadata: react-infinite-scroll-component: ^6.1.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 @@ -15231,19 +15231,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 From 27911ce9cdb05510e54ed743b6c5e3ec2eefc307 Mon Sep 17 00:00:00 2001 From: Rozhkow Date: Wed, 29 Nov 2023 17:41:15 +0400 Subject: [PATCH 76/81] fix(styles): fix general issues --- package.json | 2 +- .../main/sider/MainSider/MainSider.styles.ts | 1 + .../medical-dashboard/covidCard/CovidCard.tsx | 3 +- .../UIComponentsPage.styles.ts | 8 + src/styles/themeConfig.ts | 4 +- yarn.lock | 567 +++++++++--------- 6 files changed, 303 insertions(+), 282 deletions(-) diff --git a/package.json b/package.json index 2133e8ee4..6d82f9b41 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,7 @@ "@lit-labs/react": "^1.0.2", "@react-google-maps/api": "^2.18.1", "@reduxjs/toolkit": "^1.7.1", - "antd": "^5.8.2", + "antd": "^5.11.5", "antd-mask-input": "^2.0.7", "axios": "^0.24.0", "axios-mock-adapter": "^1.20.0", diff --git a/src/components/layouts/main/sider/MainSider/MainSider.styles.ts b/src/components/layouts/main/sider/MainSider/MainSider.styles.ts index 8bc8a4812..f2197bf39 100644 --- a/src/components/layouts/main/sider/MainSider/MainSider.styles.ts +++ b/src/components/layouts/main/sider/MainSider/MainSider.styles.ts @@ -20,6 +20,7 @@ export const Sider = styled(BaseLayout.Sider)` &.ant-layout-sider { position: fixed; + background: ${(({ theme }) => theme.layoutSiderBg)}; @media only screen and (${media('xl')}) { position: unset; diff --git a/src/components/medical-dashboard/covidCard/CovidCard.tsx b/src/components/medical-dashboard/covidCard/CovidCard.tsx index 09b057b37..165ea5686 100644 --- a/src/components/medical-dashboard/covidCard/CovidCard.tsx +++ b/src/components/medical-dashboard/covidCard/CovidCard.tsx @@ -17,7 +17,8 @@ export const CovidCard: React.FC = () => { getCovidData() .then((res) => setData(res)) .catch((e) => notification.error({ message: e.message })); - }, [notification]); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); const { confirmedArr, deathsArr, dateArr } = useMemo(() => { const confirmedArr: number[] = Object.values(data?.cases || {}).splice(0, 100); diff --git a/src/pages/uiComponentsPages/UIComponentsPage.styles.ts b/src/pages/uiComponentsPages/UIComponentsPage.styles.ts index 2851876f7..9eaf55c6c 100644 --- a/src/pages/uiComponentsPages/UIComponentsPage.styles.ts +++ b/src/pages/uiComponentsPages/UIComponentsPage.styles.ts @@ -25,6 +25,14 @@ export const Card = styled(CommonCard)` &.ant-card-bordered { border: 1px solid ${({ theme }) => theme.border}; } + + .ant-radio-wrapper, label { + align-items: center; + } + + .ant-spin-blur { + opacity: 0; + } `; export const InputsWrapper = styled.div` diff --git a/src/styles/themeConfig.ts b/src/styles/themeConfig.ts index 7592e79ad..aec608f59 100644 --- a/src/styles/themeConfig.ts +++ b/src/styles/themeConfig.ts @@ -206,8 +206,8 @@ export const getThemeConfig = (theme: DefaultTheme): ThemeConfig => { Layout: { controlHeight: 34, controlHeightLG: 12.8, - colorBgBody: theme.layoutBodyBg, - colorBgHeader: theme.layoutSiderBg, + bodyBg: theme.layoutBodyBg, + headerBg: theme.layoutSiderBg, }, Tree: { controlHeightSM: remToPixels(theme.heights.xxs), diff --git a/yarn.lock b/yarn.lock index 76be302dc..2b2156210 100644 --- a/yarn.lock +++ b/yarn.lock @@ -24,9 +24,9 @@ __metadata: languageName: node linkType: hard -"@ant-design/cssinjs@npm:^1.16.0": - version: 1.16.1 - resolution: "@ant-design/cssinjs@npm:1.16.1" +"@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 @@ -38,7 +38,7 @@ __metadata: peerDependencies: react: ">=16.0.0" react-dom: ">=16.0.0" - checksum: c69a52e9107d63c741d3f9260210e9d3f287d16c7cd944ca3444527aefc3aec146ff5c3c11fc6bc7771657f01ee90a993819717b11b31acb8b55919b60c812f4 + checksum: e87063170db42d2b80737f27dcd7d56536495538b0965f8be19fd938cc93b90c35c618fe75632bc7654d4d8931ece2c201ad62eb8fc5a15597bbe996bf498652 languageName: node linkType: hard @@ -49,7 +49,7 @@ __metadata: languageName: node linkType: hard -"@ant-design/icons@npm:^5.2.2, @ant-design/icons@npm:^5.2.4": +"@ant-design/icons@npm:^5.2.4": version: 5.2.4 resolution: "@ant-design/icons@npm:5.2.4" dependencies: @@ -66,9 +66,25 @@ __metadata: languageName: node linkType: hard -"@ant-design/react-slick@npm:~1.0.0": - version: 1.0.0 - resolution: "@ant-design/react-slick@npm:1.0.0" +"@ant-design/icons@npm:^5.2.6": + version: 5.2.6 + resolution: "@ant-design/icons@npm:5.2.6" + dependencies: + "@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.31.1 + peerDependencies: + react: ">=16.0.0" + react-dom: ">=16.0.0" + checksum: 2f571699b1903383cd09faa78e4cce34973debb0e7ec6223b9d9a0a6ab2b2f0c876072db62bbd4e6a45e864df5447343315e066abeffaf58aa5b97df3acc89f1 + languageName: node + linkType: hard + +"@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 @@ -77,7 +93,7 @@ __metadata: throttle-debounce: ^5.0.0 peerDependencies: react: ">=16.9.0" - checksum: ec9fe42bdcbca7091c156b256b723567621540ff0ad188a672123437d452e1949a4e3f63ed9fa19067a211af5110d8cea8cadba85df9fef264f8785514bac06a + checksum: c2a2d14270b3551c1af16c4cc8c63e29ee7f08e4203191d834df61211235102fd5d8e4325adfa41ada1c5212e4388849ec0d23fcb980bf69790b565f363e2d1f languageName: node linkType: hard @@ -1561,6 +1577,15 @@ __metadata: 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" @@ -1668,6 +1693,13 @@ __metadata: 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" @@ -2228,9 +2260,9 @@ __metadata: languageName: node linkType: hard -"@rc-component/color-picker@npm:~1.4.0": - version: 1.4.0 - resolution: "@rc-component/color-picker@npm:1.4.0" +"@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 @@ -2239,20 +2271,20 @@ __metadata: peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: 2c16c676d5afb234f6d39f399d0a24591136d286728bd333e860a268c6049edf2a7982e621884bf5aadd7dbb58da7997eb7776167ff4031c6a2aef469b50d641 + checksum: 7695dc182d5c88039b7c1a82acbd796111f5e90692641151555dc78b234ab67b7f2aedfab38a6874eb245f98a0b444c8b36c0c08885eb9de5eb6a096801c2225 languageName: node linkType: hard -"@rc-component/context@npm:^1.3.0": - version: 1.3.0 - resolution: "@rc-component/context@npm:1.3.0" +"@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: 77cdd49a2dfde3b2d82ff8652581eddeceefb53c0f3f31b9ed6b09356291821d4e16e915c07a1e15a38ceb6087fb92e7c2cb8ddb26d304fafd96c8571c9136ce + checksum: 3771237de1e82a453cfff7b5f0ca0dcc370a2838be8ecbfe172c26dec2e94dc2354a8b3061deaff7e633e418fc1b70ce3d10d770603f12dc477fe03f2ada7059 languageName: node linkType: hard @@ -2265,9 +2297,9 @@ __metadata: languageName: node linkType: hard -"@rc-component/mutate-observer@npm:^1.0.0": - version: 1.0.0 - resolution: "@rc-component/mutate-observer@npm:1.0.0" +"@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 @@ -2275,7 +2307,7 @@ __metadata: peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: fd6d9581882cca35582e399bf5585e237748fc8240a2d76549ed003ea17fdf7ca97609cb6c8113c2836e9d3182fceda2c1469620560168eeb66fc95656f495e7 + checksum: ffd79ad54b1f4dd02a94306373d3ebe408d5348156ac7908a86937f58c169f2fd42457461a5dc27bb874b9af5c2c196dc11a18db6bb6a5ff514cfd6bc1a3bb6a languageName: node linkType: hard @@ -2307,9 +2339,9 @@ __metadata: languageName: node linkType: hard -"@rc-component/tour@npm:~1.8.1": - version: 1.8.1 - resolution: "@rc-component/tour@npm:1.8.1" +"@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 @@ -2319,49 +2351,30 @@ __metadata: peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: dd973de88edcd81c7ad65b9f99673274f9721335a078140872bb83d5dbdaf8abb8747b35ea8b960dbe1122d8e353540c91c7789e32413b8f8daca10065cb1692 - languageName: node - linkType: hard - -"@rc-component/trigger@npm:^1.0.4, @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 + checksum: d586ca2e02d85c346640ddb228b60ddae94790973b030a85297aeef1e10e8e4ce1bef9d65f66098de59cafdacff5c04ad390528099d2b23fab449813696ba089 languageName: node linkType: hard -"@rc-component/trigger@npm:^1.15.0": - version: 1.15.1 - resolution: "@rc-component/trigger@npm:1.15.1" +"@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.18.3 + "@babel/runtime": ^7.23.2 "@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.33.0 + rc-util: ^5.38.0 peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: 92275ea2aa9aa0aaa12a3a6d7d71cccee7d321bad3b89ec95c521037a645ccbc73e4deceb536fce2473c2141552f309613e9df824f15c34963e9b8b36b40e70b + checksum: a1ecc787919c614d4cdd0ec140caf1685de4570da159248701edf1cb379f5cebf2e66f0a9ed7d6542b522c2a92fcdb72ec5dfb9a34a00599278381f598a6f7fb languageName: node linkType: hard -"@rc-component/trigger@npm:^1.6.2": - version: 1.13.5 - resolution: "@rc-component/trigger@npm:1.13.5" +"@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 @@ -2369,11 +2382,11 @@ __metadata: rc-align: ^4.0.0 rc-motion: ^2.0.0 rc-resize-observer: ^1.3.1 - rc-util: ^5.33.0 + rc-util: ^5.29.2 peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: 54e216c89375ebc81627cc133493d32e431997ddf84e695dc09f32a8770e25505740743ef07992427050300b0275729fda65452da27e49c0d91ee408ffe48ce0 + checksum: 3c1db298216cf8799f8bad51d62e1adc73f68eb488a31384bf3cdcff8e2b6e0b33bab64a245217a4e4603d0b5bf01537afbc0c09d0874fe48b8c3e036ea6258b languageName: node linkType: hard @@ -3961,62 +3974,62 @@ __metadata: languageName: node linkType: hard -"antd@npm:^5.8.2": - version: 5.8.2 - resolution: "antd@npm:5.8.2" +"antd@npm:^5.11.5": + version: 5.11.5 + resolution: "antd@npm:5.11.5" dependencies: "@ant-design/colors": ^7.0.0 - "@ant-design/cssinjs": ^1.16.0 - "@ant-design/icons": ^5.2.2 - "@ant-design/react-slick": ~1.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.6.0 - "@rc-component/color-picker": ~1.4.0 - "@rc-component/mutate-observer": ^1.0.0 - "@rc-component/tour": ~1.8.1 - "@rc-component/trigger": ^1.15.0 - classnames: ^2.2.6 - copy-to-clipboard: ^3.2.0 + "@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.14.0 + rc-cascader: ~3.20.0 rc-checkbox: ~3.1.0 - rc-collapse: ~3.7.0 - rc-dialog: ~9.1.0 - rc-drawer: ~6.2.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.36.0 - rc-image: ~7.1.0 - rc-input: ~1.1.0 - rc-input-number: ~8.0.2 - rc-mentions: ~2.5.0 - rc-menu: ~9.10.0 - rc-motion: ^2.7.3 - rc-notification: ~5.0.4 - rc-pagination: ~3.5.0 - rc-picker: ~3.12.0 - rc-progress: ~3.4.1 + 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.2.0 - rc-segmented: ~2.2.0 - rc-select: ~14.7.1 - rc-slider: ~10.1.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.32.1 - rc-tabs: ~12.9.0 - rc-textarea: ~1.3.3 - rc-tooltip: ~6.0.0 - rc-tree: ~5.7.6 - rc-tree-select: ~5.11.0 - rc-upload: ~4.3.0 - rc-util: ^5.32.0 - scroll-into-view-if-needed: ^3.0.3 + 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: 3b6ba5199883cfce264494191edc847b1ad4c9b831fe68a3093013a20a808e508fa1df3353763e206778eb2aaf5b552b7e60a1481cfd0c7e883b4ba96f254a54 + checksum: daeea1d276b2646ad726ec568cb32517543fe592e08b04db41802621a08c3cd43372b8ae0893115ca2e016a562f6a02096334fe36812d1a3488bb12ade43488e languageName: node linkType: hard @@ -5696,10 +5709,10 @@ __metadata: languageName: node linkType: hard -"compute-scroll-into-view@npm:^3.0.0": - version: 3.0.0 - resolution: "compute-scroll-into-view@npm:3.0.0" - checksum: 06965595510d3190bfb58705cf74bacc0b6fea8021f56a6477ad134fadcd1971d2083a714c6e3c99f545cc72614d60a9a97d774ea81a37ad302efddc849d372c +"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 @@ -5838,7 +5851,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: @@ -11121,7 +11134,7 @@ __metadata: "@types/uuid": ^8.3.4 "@typescript-eslint/eslint-plugin": ^5.10.0 "@typescript-eslint/parser": ^5.8.0 - antd: ^5.8.2 + antd: ^5.11.5 antd-mask-input: ^2.0.7 axios: ^0.24.0 axios-mock-adapter: ^1.20.0 @@ -14399,20 +14412,20 @@ __metadata: languageName: node linkType: hard -"rc-cascader@npm:~3.14.0": - version: 3.14.1 - resolution: "rc-cascader@npm:3.14.1" +"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.7.0 - rc-tree: ~5.7.0 - rc-util: ^5.35.0 + 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: 4cd14a477028f18f7919423fc9e770887031330ec05c51fb9e1de465533cee5edb6e6b215ec695703c893e51e6642c7ca4823dc15efef7cf40dadca4c9104965 + checksum: fd85091f90c7a82ff8e240c356de9f1070e6371217a7ab852908b64746488586d8c9b2893ce5895373e1e8d55c36d5cd899808ec6d7938bfe81d19be2ceee94a languageName: node linkType: hard @@ -14430,9 +14443,9 @@ __metadata: languageName: node linkType: hard -"rc-collapse@npm:~3.7.0": - version: 3.7.0 - resolution: "rc-collapse@npm:3.7.0" +"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 @@ -14441,13 +14454,13 @@ __metadata: peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: f3f6dc1724c763f2e89ac8f1a853f8d80bc32731ad266c1092167cf9af3eb7e32a4d6b113c54366716f3e63f14eb511be77d9192103dec9d95c021b813f26203 + checksum: b8e295fbd96325545bab7f7e4014fe5bb606ce973544479e3012704439b910215e5197e0e26bdc08d42d2321e7694c5e2d5a6c1bd81b790e03826b2bf60791b5 languageName: node linkType: hard -"rc-dialog@npm:~9.1.0": - version: 9.1.0 - resolution: "rc-dialog@npm:9.1.0" +"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 @@ -14457,23 +14470,23 @@ __metadata: peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: 59d2504301a813022b9782e808e61e4e6a55d746a5608d9927b8f6cf4806dd694df7812678f56174419cccb5273d5e302c3178d31a6c5871aa97be5fd086267c + checksum: 75d689d281ae3a1a85faa2f87c95ac65995ed58f696898edbe89a79604e18213565edc1d21291c9a640379fa6705c19ec51ba9275d69cde877d21f5108eb3503 languageName: node linkType: hard -"rc-drawer@npm:~6.2.0": - version: 6.2.0 - resolution: "rc-drawer@npm:6.2.0" +"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.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: b006caa2036bb84760f447de193841de00a0867e32971349d210b6e1c97f7cf61b2dba05a467f03d55bba592d153b688e882adb4af20daa5271b9286f313fbc0 + checksum: e96908f641ea0a4b26e7142a932cefe60ee34c03c6c569a6070af770b0be8a883e89521217d8391957254b0ed88b4ac1735129c9e062528db0751bfd0222a0c1 languageName: node linkType: hard @@ -14492,9 +14505,9 @@ __metadata: languageName: node linkType: hard -"rc-field-form@npm:~1.36.0": - version: 1.36.1 - resolution: "rc-field-form@npm:1.36.1" +"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 @@ -14502,46 +14515,46 @@ __metadata: peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: 9db818001ff93c22b80f34eb9dd37418767f401b75e9b8720389af55b0423d1d1a4a36c352519f0e1410dc964514be39aa5b915d344619c6ff3815e96f358288 + checksum: 72e80c8eb76c64df90d7cdb2d38f5f085f298cee09423fd7cefe3b5f9afeed92b325a52b150bbf7a86a3159ade77094daaf097b0781e0a7cb16429a46c05a30b languageName: node linkType: hard -"rc-image@npm:~7.1.0": - version: 7.1.2 - resolution: "rc-image@npm:7.1.2" +"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.1.0 + rc-dialog: ~9.3.4 rc-motion: ^2.6.2 rc-util: ^5.34.1 peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: c8b1647d24812ba0009552d91a09418557fa471c386f0e69e743d3d80945b0a776fde01e563e6956b687ecb4684574e311400af08efeed1bfeb005c140b7cd8e + checksum: ec5ffd6ed34a2f1502a4374a622144c1554f83a376b87ffc54712ddd891c83e423cc0e5c3c228606ee0e1dc571df685d493c9e10582b352064b2073ec72c8d4b languageName: node linkType: hard -"rc-input-number@npm:~8.0.2": - version: 8.0.3 - resolution: "rc-input-number@npm:8.0.3" +"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-input: ~1.1.0 + rc-input: ~1.3.5 rc-util: ^5.28.0 peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: d567919037db72dd2df04868ae909e1d74959e3956bded722931accefcdfa48d05946489dfd10e39f63599045cc89351108e7bbff869cc4415a53b6f06837d48 + checksum: 00bb0b40c0f13747315790d1ec2b8707abee8388c1623dee5ebdf51cc93ae6441f200d19ecda5f85e44dd180d9e93dadf4cb8ce2e02c3a4db81f1e69d9b4dc04 languageName: node linkType: hard -"rc-input@npm:~1.1.0": - version: 1.1.0 - resolution: "rc-input@npm:1.1.0" +"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 @@ -14549,34 +14562,34 @@ __metadata: peerDependencies: react: ">=16.0.0" react-dom: ">=16.0.0" - checksum: d3f7fc2c6dfe2cf1cec4cebe2c21614f306666f39fef798af4885b58f6ada8cead0a301c10e16940a37199a572420a5146c9ff4d67927da8a9e52ca53b09de04 + checksum: 4e9e7adedc16319980220df4ef802077781e1224c4510a02c78d67c6a834bf58d9508170ab8d375efe9dd186f9497ae07f7c1a997d84aa1bc978985fdf56aeda languageName: node linkType: hard -"rc-mentions@npm:~2.5.0": - version: 2.5.0 - resolution: "rc-mentions@npm:2.5.0" +"rc-mentions@npm:~2.9.1": + version: 2.9.1 + resolution: "rc-mentions@npm:2.9.1" dependencies: "@babel/runtime": ^7.22.5 "@rc-component/trigger": ^1.5.0 classnames: ^2.2.6 - rc-input: ~1.1.0 - rc-menu: ~9.10.0 - rc-textarea: ~1.3.0 - 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: 084236d5e58738acbc8ab3ccaa9c02daf6a6cda8040780a8c99cdebf9a7bec262df5a22732ce250d73263bc64c115f44bc8b5e11b0db4eb82c68f7cdcbb2ab9c + checksum: f5b7ad6a3f674e259e243c12450f81ee7f69298a4cce8a4ef9a467622651f7452eebcfdf737e8587239d77a9f109aafafe5e547401ec806e3a2a14a9df20800e languageName: node linkType: hard -"rc-menu@npm:~9.10.0": - version: 9.10.0 - resolution: "rc-menu@npm:9.10.0" +"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.6.2 + "@rc-component/trigger": ^1.17.0 classnames: 2.x rc-motion: ^2.4.3 rc-overflow: ^1.3.1 @@ -14584,11 +14597,11 @@ __metadata: peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: 600f16a6d8b64ee90093786abdee3ad4663d4c4922ad7b568bc51dd9e5edbbd230ba93a8eae56d8d8ce070551ca12f3ae3c01d5e5b105a3d07a11245207fda6c + checksum: 0db857a5e0819348f86a66a560e7bf0496a6e69ef88b96fe2fccd1616ff5989d20bb0c3d84bbec892483f9f29c9c210be1ead3b7f08c608dc7dce439b0637dd0 languageName: node linkType: hard -"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.0, 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: @@ -14602,9 +14615,9 @@ __metadata: languageName: node linkType: hard -"rc-motion@npm:^2.7.3": - version: 2.7.3 - resolution: "rc-motion@npm:2.7.3" +"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 @@ -14612,22 +14625,22 @@ __metadata: peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: d3b2762a35103938ecc5b1739c100bbf84451c332cf4bb4b71cfa4b3604fbe515ff6f8928e7452f3c88148bb8e5d3480d2a5a06629df02395819724df36a751b + checksum: 6c7c211a62896a2c443c43f27d13ec84c832884ec1860a40025f6270321e4e8c8a7abaf99d60a09d6e5cadc112e3d9787e0c58970eb69b0bb798eaa6be81dcf5 languageName: node linkType: hard -"rc-notification@npm:~5.0.4": - version: 5.0.4 - resolution: "rc-notification@npm:5.0.4" +"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.6.0 + rc-motion: ^2.9.0 rc-util: ^5.20.1 peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: b17b0cf18d18549685441a7a17b4ca0d797ae817b514ec4492ac637b1a9a75c1a121bcc54cb966f64294a13c9161bd5614e710242a7d2c056b9322d6148cba57 + checksum: 1e6bc146e687815d784e0b4c626a9af82435086bc02bb5e19827baa523e26440d6ed03b43de83a15e0272b83bebede3b67d61c4d4af2240ae7dcdd6604f0ef58 languageName: node linkType: hard @@ -14646,9 +14659,9 @@ __metadata: languageName: node linkType: hard -"rc-pagination@npm:~3.5.0": - version: 3.5.0 - resolution: "rc-pagination@npm:3.5.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 @@ -14656,13 +14669,13 @@ __metadata: peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: 27ac05cdaf331ba571eb19fdaf79a2e3b6cb3575fce5f011f0de5abbe88db21a4292ef5323abab3a829ff6cda396444c664f88bd55226fa477f473282a8a868e + checksum: c10fabae34fbb89e72500575aec0ecb8d0e91d810eb46eed15a132416ed124ece8673171a395e120f56d4ab61296a9bfc104ce6465865e1266da6cc1b1580abf languageName: node linkType: hard -"rc-picker@npm:~3.12.0": - version: 3.12.0 - resolution: "rc-picker@npm:3.12.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 @@ -14684,13 +14697,13 @@ __metadata: optional: true moment: optional: true - checksum: 59659f928c008098e85bceec39dc263669345ad2fa8fada20ad0ce6e46c08f5c089fd668d090a51e06ac10960d43e23c32fe07bb32d1af2ca08af1473ec3aba8 + 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 @@ -14698,7 +14711,7 @@ __metadata: peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: d4dce5231ea29bfa866935a59f05473711f9dfc944f95cc78b0fdcd1508a063983cc58973f54c2b20797f0b0f480c4a2b84aaa2ca185158c14800ec659163880 + checksum: b0722a696396f985267e35e26f49c1c1bd6a17b4918eb93318fc36a7a5ffae9806932d4982a7da0d83349648ca85325b792003ec40240820fd6e00e0bc6f3c1d languageName: node linkType: hard @@ -14716,7 +14729,7 @@ __metadata: 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, rc-resize-observer@npm:^1.3.1": +"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: @@ -14731,9 +14744,24 @@ __metadata: languageName: node linkType: hard -"rc-segmented@npm:~2.2.0": - version: 2.2.0 - resolution: "rc-segmented@npm:2.2.0" +"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 @@ -14742,13 +14770,13 @@ __metadata: peerDependencies: react: ">=16.0.0" react-dom: ">=16.0.0" - checksum: eb551cc6f28e8a972b195327ed1c4cee70dcfb0959ca2bf29c9c034687aedc6b224b556443b6b04ab921fd0ff3505e9a45173ea22ae16216a4f369e98fd7ae05 + checksum: 018325f1fe183dec98a358c8180ea8483ee8e593b2fa72767b765b9f200aed4054eea6257f93f48a456324cb082fd8b8e38a9929cb71eb37ac63357ad9d89f04 languageName: node linkType: hard -"rc-select@npm:~14.7.0, rc-select@npm:~14.7.1": - version: 14.7.3 - resolution: "rc-select@npm:14.7.3" +"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 @@ -14760,13 +14788,13 @@ __metadata: peerDependencies: react: "*" react-dom: "*" - checksum: b81c4b1adc903efc26eab1f85695846f77b4ab7afbd95754fa627e7f8f1390bc63a8e7cd3287c4aacb1565dd1a69d1dc1d3ec8ae3eb0788aa29618fafbd64b8d + checksum: 1f922000e64338b7c43ba0e67429e482291f4e8d9e2d1977e0414171ff388050de4802c780baaa4e48c299b025c2334227382d3c47ca1f2888dbef83c73ab43e languageName: node linkType: hard -"rc-slider@npm:~10.1.0": - version: 10.1.1 - resolution: "rc-slider@npm:10.1.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 @@ -14774,7 +14802,7 @@ __metadata: peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: 8df66142f1be00d31aaa45f3cf266fa30d03b70c74c734502389bbfacdb6741e149cd36dc1d3557d9dbb0194ed2733748366d888651d1120098338086419ba2c + checksum: 713cfcf0bc1f35b70db3f233ed76f84e3c43c39700631db4932aff760289c8174076ecd5ec8a6184d056beda28b6b2e08b7add98edebf1ba1025a392ebff9280 languageName: node linkType: hard @@ -14806,121 +14834,90 @@ __metadata: languageName: node linkType: hard -"rc-table@npm:~7.32.1": - version: 7.32.1 - resolution: "rc-table@npm:7.32.1" +"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.3.0 + "@rc-component/context": ^1.4.0 classnames: ^2.2.5 rc-resize-observer: ^1.1.0 - rc-util: ^5.27.1 + rc-util: ^5.37.0 + rc-virtual-list: ^3.11.1 peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: b2ecc2a11ceb4789414c3e49947508d570c163911d4c09926277b1c2973806bdc6932ca9652cf8098c1ad73657b6c6e412b002555d90f1bd9104d0cc570e09de + checksum: 4db1fbd348bd2ebde767f87e047abd07c60a2ddd054f74bf3193a6bf789714512c5aca36e946ee7491d08b202b625a652c7ac9f48d213f034816a6ad6d8dcffe languageName: node linkType: hard -"rc-tabs@npm:~12.9.0": - version: 12.9.0 - resolution: "rc-tabs@npm:12.9.0" +"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.1.0 - rc-menu: ~9.10.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: a8ab132f3e2f5dfc933e6942962ea3c13a0aa9b88c498d9183901f0124c92d60692fe5e9ee34bfa67dfce3b8ee426d999f9dd465617fde755a27dfbdd6fcd134 + checksum: c0a204f288ca6a37f5a72646a0443d13aee4d427d88e1866718681fe2c4fad3dc72ff729acc09191e227f9f04975f9452f465f2501c052ccf285283a78b5bd64 languageName: node linkType: hard -"rc-textarea@npm:~1.3.0": - version: 1.3.2 - resolution: "rc-textarea@npm:1.3.2" +"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.1.0 + rc-input: ~1.3.5 rc-resize-observer: ^1.0.0 rc-util: ^5.27.0 peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: 8c5c7d345772e1c965b4dc58ac21992015c54ac2865f90a32330945db2999e5b48270a2c89b76967951ebe6be602bff1038161676069dd61d5fd134e4486f213 + checksum: 44ca7e5b62938c18ef57f80f9ed08dcadc6b741dd420a53b1afcbd3d7c23d72bc5335b28e17fa70782f699cd9d1108f8be56db3e326c6abd364a1cbe8c480b43 languageName: node linkType: hard -"rc-textarea@npm:~1.3.3": - version: 1.3.3 - resolution: "rc-textarea@npm:1.3.3" - dependencies: - "@babel/runtime": ^7.10.1 - classnames: ^2.2.1 - rc-input: ~1.1.0 - rc-resize-observer: ^1.0.0 - rc-util: ^5.27.0 - peerDependencies: - react: ">=16.9.0" - react-dom: ">=16.9.0" - checksum: b91a691f63093195f63190258a705ce2464bb3ac22a81d6c4248b888044754e55efdbbe9c3d01bd4ae397731d21fb4ee8c7f07017719195b15dc3a655faea5b7 - languageName: node - linkType: hard - -"rc-tooltip@npm:~6.0.0": - version: 6.0.1 - resolution: "rc-tooltip@npm:6.0.1" +"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.0.4 + "@rc-component/trigger": ^1.18.0 classnames: ^2.3.1 peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: fe7f617a4f4e0085d8f5eb5e8da5598f0164841c841f62f77966706ae604491246441a469aeb44f1dec7001bb4716ee81d11ec646e8889f4164fcba3a024eea5 + checksum: 0450fe0bac954fe13cc1117cef1e632ec65e5fbb7bc9d31069925e7df026ff39211cad95509ec93500541bf55e70efaf0ee99694fdd18deac7e804b1b3f72240 languageName: node linkType: hard -"rc-tree-select@npm:~5.11.0": - version: 5.11.0 - resolution: "rc-tree-select@npm:5.11.0" +"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.7.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: 97f1e977839542681028e2eafdb9381273610538d16595c50878152b348c6c58626c56821d92f2489cdea693a69e174e0e84b08ee0ac9c0785d1d5f22848e8ba + checksum: 34ed86e65a5ab0a3b80f25ccced3c1d4641621638cf4d5953af8420306a513e93194a9e30f5e689e4e4e8b44f1461b82b5443f71d72f6ca72e1f612487e09d87 languageName: node linkType: hard -"rc-tree@npm:~5.7.0": - version: 5.7.2 - resolution: "rc-tree@npm:5.7.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 - peerDependencies: - react: "*" - react-dom: "*" - checksum: 9b465e1937fdd59987d2e69587b10c3d1415072ed6cd8e953d8975c4d31ddfa3f963d6d824b6d5017bd3a4331d9a0af029886a484af70a861ddda02dcfcb964c - languageName: node - linkType: hard - -"rc-tree@npm:~5.7.6": - version: 5.7.8 - resolution: "rc-tree@npm:5.7.8" +"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 @@ -14930,13 +14927,13 @@ __metadata: peerDependencies: react: "*" react-dom: "*" - checksum: d2e80a32b096ff781e2cbb5b9b8b1f7e2adfff45e74d596985b7d31587fa08755d444388401a39513cb0dc4a97f5e936809749348d85ea555da0913ce0800c6f + checksum: 74802b2e670fd6696e294ba6eeb20381feab5704e8f92de981725e56b00070c87ef0c2ece2846566715ee7420878743cd22d3443235732282400b6e475ecff36 languageName: node linkType: hard -"rc-upload@npm:~4.3.0": - version: 4.3.4 - resolution: "rc-upload@npm:4.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.5 @@ -14944,11 +14941,11 @@ __metadata: peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: 59ddf31a58ce716d1ace506b1c3e36744895c24c683a17185517dab68dfbb1cf158f57ce14a8f0899e85b2924bfa0d82587771939225ea21a41b907f91779afa + checksum: 00758b3f34d5850a37cba8e1b4d7c5e2e60c8bd21e44b42c4ac2fe5f641575464e4209d7b9bdbdab70e46ff55705f5be71b1df7f13bbe15fd5950e895474c0cd languageName: node linkType: hard -"rc-util@npm:^5.0.1, 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.20.1, rc-util@npm:^5.21.0, rc-util@npm:^5.21.2, rc-util@npm:^5.22.5, rc-util@npm:^5.24.4, rc-util@npm:^5.26.0, rc-util@npm:^5.27.0, rc-util@npm:^5.27.1": +"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: @@ -15000,7 +14997,7 @@ __metadata: languageName: node linkType: hard -"rc-util@npm:^5.32.0, rc-util@npm:^5.32.2": +"rc-util@npm:^5.32.2": version: 5.32.3 resolution: "rc-util@npm:5.32.3" dependencies: @@ -15013,44 +15010,44 @@ __metadata: languageName: node linkType: hard -"rc-util@npm:^5.33.0": - version: 5.33.0 - resolution: "rc-util@npm:5.33.0" +"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: 1a5b4f2ded3ca8a874e3a0797158fb1be60987711145346ba4b9ae8e84fb91462dd030ff06850644d93a46c9d53eaccb978c703a1f3841e55ac2af0117c35745 + checksum: 8e99225c7d964d0be7b011e1b945822673f83437098bee5871d45d49531ac3d08128ddcaf0c0b503aad26feeced15a455082de179dd8c546be0f0281d8e7c176 languageName: node linkType: hard -"rc-util@npm:^5.35.0": - version: 5.35.0 - resolution: "rc-util@npm:5.35.0" +"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: ^16.12.0 + react-is: ^18.2.0 peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: 8e99225c7d964d0be7b011e1b945822673f83437098bee5871d45d49531ac3d08128ddcaf0c0b503aad26feeced15a455082de179dd8c546be0f0281d8e7c176 + checksum: 40d0411fb5d6b0a187e718ff16c18f3d68eae3d7e4def43a9a9b2690b89cfce639077a69d683aa01302f8132394dd633baf76b07e5a3b8438fb706b1abb31937 languageName: node linkType: hard -"rc-virtual-list@npm:^3.4.8": - version: 3.4.13 - resolution: "rc-virtual-list@npm:3.4.13" +"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.15.0 + rc-util: ^5.36.0 peerDependencies: react: "*" react-dom: "*" - checksum: 590baca20aa209bdc7038c4cdbedef78100e8f8762966b8ae556d0c7154ce8a4f26737a5bd59580ee1ed446c79a8eb627e3fb003e1ee0de38f1bb9a7b3cd7e78 + checksum: 488661f158de37ace5ed0d7543fe4ed19e0145cc59f3b842f9c1ff5dfda687240620ba59bb44ec9425c5703c8ac9683449b3012722ca7da5e0a585ce2104629b languageName: node linkType: hard @@ -15218,6 +15215,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" @@ -15590,6 +15594,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" @@ -16259,12 +16270,12 @@ __metadata: languageName: node linkType: hard -"scroll-into-view-if-needed@npm:^3.0.3": - version: 3.0.6 - resolution: "scroll-into-view-if-needed@npm:3.0.6" +"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: ^3.0.0 - checksum: fb3a62748f44bc14ee5f6986e6c3fd1a571811ff14e894f5ff1045247cfd9bf94ebd2038319971a8657bdd4c70a165e523ec1a0b90f74ded175a77035ff2d109 + compute-scroll-into-view: ^3.0.2 + checksum: edc0f68dc170d0c153ce4ae2929cbdfaf3426d1fc842b67d5f092c5ec38fbb8408e6cb8467f86d8dfb23de3f77a2f2a9e79cbf80bc49b35a39f3092e18b4c3d5 languageName: node linkType: hard From b4db7e65575b581476294ce481853db04558b6d7 Mon Sep 17 00:00:00 2001 From: Rozhkow Date: Thu, 30 Nov 2023 15:48:10 +0400 Subject: [PATCH 77/81] fix(global): style fixes --- .../maps/PigeonsMapsPage/PigeonsMapsPage.tsx | 4 +-- .../UIComponentsPage.styles.ts | 10 ++++++ src/styles/GlobalStyle.ts | 34 ++++++++++++++++--- 3 files changed, 41 insertions(+), 7 deletions(-) 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/uiComponentsPages/UIComponentsPage.styles.ts b/src/pages/uiComponentsPages/UIComponentsPage.styles.ts index 9eaf55c6c..76a374fc8 100644 --- a/src/pages/uiComponentsPages/UIComponentsPage.styles.ts +++ b/src/pages/uiComponentsPages/UIComponentsPage.styles.ts @@ -33,6 +33,16 @@ export const Card = styled(CommonCard)` .ant-spin-blur { opacity: 0; } + + .ant-select-selection-search { + input { + font-size: ${({ theme }) => theme.fontSizes.md}; + } + } + + .ant-select-selection-placeholder { + opacity: 0.5; + } `; export const InputsWrapper = styled.div` diff --git a/src/styles/GlobalStyle.ts b/src/styles/GlobalStyle.ts index 31aeca5e2..de0f88afa 100644 --- a/src/styles/GlobalStyle.ts +++ b/src/styles/GlobalStyle.ts @@ -18,12 +18,36 @@ export default styled.createGlobalStyle` font-family: ${({ theme }) => theme.fontFamilies.main}, sans-serif; } - a { - color: ${({ theme }) => theme.primary}; + .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}; + } + } + } + } + .ant-menu-item-selected { + .ant-menu-title-content { + a { + color: inherit; + } + } + } + } - &:hover, - :active { - color: ${({ theme }) => theme.primary5}; + .ant-tooltip { + .ant-tooltip-content { + .ant-tooltip-inner { + min-width: 30px; + min-height: 32px; + font-size: ${({ theme }) => theme.fontSizes.md}; + } } } From 67b1d07128e17177ad0722e3dc55e2754108f0da Mon Sep 17 00:00:00 2001 From: Rozhkow Date: Thu, 30 Nov 2023 18:57:22 +0400 Subject: [PATCH 78/81] fix(general): fix warnings and remove react simple maps --- package.json | 2 - .../common/BaseCheckbox/BaseCheckbox.tsx | 14 +- .../searchDropdown/SearchDropdown.styles.ts | 2 +- .../layouts/main/sider/sidebarNavigation.tsx | 5 - src/components/router/AppRouter.tsx | 3 - src/locales/de/translation.json | 1 - src/locales/en/translation.json | 1 - .../ReactSimpleMapsPage.tsx | 79 ------- yarn.lock | 194 +----------------- 9 files changed, 7 insertions(+), 294 deletions(-) delete mode 100644 src/pages/maps/ReactSimpleMapsPage/ReactSimpleMapsPage.tsx diff --git a/package.json b/package.json index 6d82f9b41..7388e93ef 100644 --- a/package.json +++ b/package.json @@ -43,7 +43,6 @@ "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", @@ -91,7 +90,6 @@ "@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", diff --git a/src/components/common/BaseCheckbox/BaseCheckbox.tsx b/src/components/common/BaseCheckbox/BaseCheckbox.tsx index b16b8877e..cd30b5f2c 100644 --- a/src/components/common/BaseCheckbox/BaseCheckbox.tsx +++ b/src/components/common/BaseCheckbox/BaseCheckbox.tsx @@ -4,16 +4,12 @@ import * as S from './BaseCheckbox.styles'; export type BaseCheckboxProps = CheckboxProps; -const Checkbox = React.forwardRef((props, ref) => { - return ; -}); - -type CheckboxForwardRef = typeof Checkbox; - -interface BaseCheckboxInterface extends CheckboxForwardRef { +interface BaseCheckboxInterface extends React.FC { Group: typeof S.CheckboxGroup; } -export const BaseCheckbox = Checkbox as BaseCheckboxInterface; +export const BaseCheckbox: BaseCheckboxInterface = (props) => { + return ; +}; -BaseCheckbox.Group = S.CheckboxGroup; +BaseCheckbox.Group = S.CheckboxGroup; \ No newline at end of file diff --git a/src/components/header/components/searchDropdown/SearchDropdown.styles.ts b/src/components/header/components/searchDropdown/SearchDropdown.styles.ts index f61730ca9..a782e2a95 100644 --- a/src/components/header/components/searchDropdown/SearchDropdown.styles.ts +++ b/src/components/header/components/searchDropdown/SearchDropdown.styles.ts @@ -12,7 +12,7 @@ export const Popover = styled(BasePopover)` } @media only screen and (${media('md')}) { - width: 323px; + width: 100%; } } `; 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/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/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/maps/ReactSimpleMapsPage/ReactSimpleMapsPage.tsx b/src/pages/maps/ReactSimpleMapsPage/ReactSimpleMapsPage.tsx deleted file mode 100644 index 5af830d60..000000000 --- a/src/pages/maps/ReactSimpleMapsPage/ReactSimpleMapsPage.tsx +++ /dev/null @@ -1,79 +0,0 @@ -import { useTranslation } from 'react-i18next'; -import { ComposableMap, Geographies, Geography, Marker } from 'react-simple-maps'; -import styled, { useTheme } 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(); - const theme = useTheme(); - - 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/yarn.lock b/yarn.lock index 2b2156210..de2696279 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2773,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" @@ -3080,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" @@ -5627,7 +5573,7 @@ __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 @@ -6378,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" @@ -9525,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" @@ -11128,7 +10967,6 @@ __metadata: "@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 @@ -11170,7 +11008,6 @@ __metadata: 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" @@ -15407,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" @@ -17751,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" From def21325d193ac9d491d940d738552d824bc73d0 Mon Sep 17 00:00:00 2001 From: Rozhkow Date: Fri, 1 Dec 2023 17:14:06 +0400 Subject: [PATCH 79/81] fix(styles): remove styles from ui components file --- .../BaseAutoComplete.styles.ts | 10 ++++++++++ .../BaseAutoComplete/BaseAutoComplete.tsx | 7 ++++++- .../common/BaseRadio/BaseRadio.styles.ts | 4 ---- .../common/BaseSpin/BaseSpin.styles.ts | 6 +++++- .../UIComponentsPage.styles.ts | 18 ------------------ 5 files changed, 21 insertions(+), 24 deletions(-) create mode 100644 src/components/common/BaseAutoComplete/BaseAutoComplete.styles.ts diff --git a/src/components/common/BaseAutoComplete/BaseAutoComplete.styles.ts b/src/components/common/BaseAutoComplete/BaseAutoComplete.styles.ts new file mode 100644 index 000000000..accaeadf4 --- /dev/null +++ b/src/components/common/BaseAutoComplete/BaseAutoComplete.styles.ts @@ -0,0 +1,10 @@ +import styled from 'styled-components'; +import { AutoComplete as BaseAutoComplete } from 'antd'; + +export const AutoComplete = styled(BaseAutoComplete)` + .ant-select-selection-search { + input { + font-size: ${({ theme }) => theme.fontSizes.md}; + } + } +`; diff --git a/src/components/common/BaseAutoComplete/BaseAutoComplete.tsx b/src/components/common/BaseAutoComplete/BaseAutoComplete.tsx index 7037570ee..369e481af 100644 --- a/src/components/common/BaseAutoComplete/BaseAutoComplete.tsx +++ b/src/components/common/BaseAutoComplete/BaseAutoComplete.tsx @@ -1,2 +1,7 @@ -export { AutoComplete as BaseAutoComplete } from 'antd'; +import * as S from './BaseAutoComplete.styles'; + export type { AutoCompleteProps as BaseAutoCompleteProps } from 'antd'; + +export const BaseAutoComplete : React.FC = (props) => { + return ; +} \ No newline at end of file diff --git a/src/components/common/BaseRadio/BaseRadio.styles.ts b/src/components/common/BaseRadio/BaseRadio.styles.ts index 62e0c25b0..0686b527b 100644 --- a/src/components/common/BaseRadio/BaseRadio.styles.ts +++ b/src/components/common/BaseRadio/BaseRadio.styles.ts @@ -8,10 +8,6 @@ export const Radio = styled(AntRadio)` } &.ant-radio-wrapper { - .ant-radio { - align-self: inherit; - } - .ant-radio-inner, .ant-radio-inner::after { width: 1rem; diff --git a/src/components/common/BaseSpin/BaseSpin.styles.ts b/src/components/common/BaseSpin/BaseSpin.styles.ts index 3307f8a55..4462f25b3 100644 --- a/src/components/common/BaseSpin/BaseSpin.styles.ts +++ b/src/components/common/BaseSpin/BaseSpin.styles.ts @@ -1,4 +1,8 @@ import styled from 'styled-components'; import { Spin as AntSpin } from 'antd'; -export const Spin = styled(AntSpin)``; +export const Spin = styled(AntSpin)` + .ant-spin-blur { + opacity: 0; + } +`; diff --git a/src/pages/uiComponentsPages/UIComponentsPage.styles.ts b/src/pages/uiComponentsPages/UIComponentsPage.styles.ts index 76a374fc8..2851876f7 100644 --- a/src/pages/uiComponentsPages/UIComponentsPage.styles.ts +++ b/src/pages/uiComponentsPages/UIComponentsPage.styles.ts @@ -25,24 +25,6 @@ export const Card = styled(CommonCard)` &.ant-card-bordered { border: 1px solid ${({ theme }) => theme.border}; } - - .ant-radio-wrapper, label { - align-items: center; - } - - .ant-spin-blur { - opacity: 0; - } - - .ant-select-selection-search { - input { - font-size: ${({ theme }) => theme.fontSizes.md}; - } - } - - .ant-select-selection-placeholder { - opacity: 0.5; - } `; export const InputsWrapper = styled.div` From f21dda787203df66682ef4c5e3f5f4576418b405 Mon Sep 17 00:00:00 2001 From: Rozhkow Date: Fri, 1 Dec 2023 17:33:30 +0400 Subject: [PATCH 80/81] fix(styles): general style fixes --- .../BaseAutoComplete/BaseAutoComplete.styles.ts | 10 ---------- .../common/BaseAutoComplete/BaseAutoComplete.tsx | 7 +------ src/components/common/BaseCheckbox/BaseCheckbox.tsx | 12 ++++++++---- 3 files changed, 9 insertions(+), 20 deletions(-) delete mode 100644 src/components/common/BaseAutoComplete/BaseAutoComplete.styles.ts diff --git a/src/components/common/BaseAutoComplete/BaseAutoComplete.styles.ts b/src/components/common/BaseAutoComplete/BaseAutoComplete.styles.ts deleted file mode 100644 index accaeadf4..000000000 --- a/src/components/common/BaseAutoComplete/BaseAutoComplete.styles.ts +++ /dev/null @@ -1,10 +0,0 @@ -import styled from 'styled-components'; -import { AutoComplete as BaseAutoComplete } from 'antd'; - -export const AutoComplete = styled(BaseAutoComplete)` - .ant-select-selection-search { - input { - font-size: ${({ theme }) => theme.fontSizes.md}; - } - } -`; diff --git a/src/components/common/BaseAutoComplete/BaseAutoComplete.tsx b/src/components/common/BaseAutoComplete/BaseAutoComplete.tsx index 369e481af..7037570ee 100644 --- a/src/components/common/BaseAutoComplete/BaseAutoComplete.tsx +++ b/src/components/common/BaseAutoComplete/BaseAutoComplete.tsx @@ -1,7 +1,2 @@ -import * as S from './BaseAutoComplete.styles'; - +export { AutoComplete as BaseAutoComplete } from 'antd'; export type { AutoCompleteProps as BaseAutoCompleteProps } from 'antd'; - -export const BaseAutoComplete : React.FC = (props) => { - return ; -} \ No newline at end of file diff --git a/src/components/common/BaseCheckbox/BaseCheckbox.tsx b/src/components/common/BaseCheckbox/BaseCheckbox.tsx index cd30b5f2c..8abbc528a 100644 --- a/src/components/common/BaseCheckbox/BaseCheckbox.tsx +++ b/src/components/common/BaseCheckbox/BaseCheckbox.tsx @@ -4,12 +4,16 @@ import * as S from './BaseCheckbox.styles'; 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; \ No newline at end of file From 2e3c90433622aae1c1d80bd52da52895283a203c Mon Sep 17 00:00:00 2001 From: leineveber Date: Fri, 1 Dec 2023 17:15:54 +0300 Subject: [PATCH 81/81] fix(app): fix terminal errors --- src/components/common/BaseCheckbox/BaseCheckbox.tsx | 8 +++++--- .../layouts/main/sider/MainSider/MainSider.styles.ts | 2 +- src/controllers/modalController.tsx | 2 +- src/hooks/useFeedback.ts | 7 ++++--- src/styles/GlobalStyle.ts | 2 +- 5 files changed, 12 insertions(+), 9 deletions(-) diff --git a/src/components/common/BaseCheckbox/BaseCheckbox.tsx b/src/components/common/BaseCheckbox/BaseCheckbox.tsx index 8abbc528a..896d9245a 100644 --- a/src/components/common/BaseCheckbox/BaseCheckbox.tsx +++ b/src/components/common/BaseCheckbox/BaseCheckbox.tsx @@ -1,10 +1,12 @@ 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; -const Checkbox = React.forwardRef((props, ref) => { +const Checkbox = React.forwardRef((props, ref) => { return ; }); @@ -16,4 +18,4 @@ interface BaseCheckboxInterface extends CheckboxForwardRef { export const BaseCheckbox = Checkbox as BaseCheckboxInterface; -BaseCheckbox.Group = S.CheckboxGroup; \ No newline at end of file +BaseCheckbox.Group = S.CheckboxGroup; diff --git a/src/components/layouts/main/sider/MainSider/MainSider.styles.ts b/src/components/layouts/main/sider/MainSider/MainSider.styles.ts index f2197bf39..6cdf99089 100644 --- a/src/components/layouts/main/sider/MainSider/MainSider.styles.ts +++ b/src/components/layouts/main/sider/MainSider/MainSider.styles.ts @@ -20,7 +20,7 @@ export const Sider = styled(BaseLayout.Sider)` &.ant-layout-sider { position: fixed; - background: ${(({ theme }) => theme.layoutSiderBg)}; + background: ${({ theme }) => theme.layoutSiderBg}; @media only screen and (${media('xl')}) { position: unset; diff --git a/src/controllers/modalController.tsx b/src/controllers/modalController.tsx index 4f8feb98d..119633c3a 100644 --- a/src/controllers/modalController.tsx +++ b/src/controllers/modalController.tsx @@ -49,7 +49,7 @@ const modalRender = (node: React.ReactNode) => {node} type IconType = 'info' | 'success' | 'warning' | 'error'; -type ModalType = Pick; +export type ModalType = Pick; const open = (type: IconType, modal: ModalType): ModalType[IconType] => { const Icon = Icons[type]; diff --git a/src/hooks/useFeedback.ts b/src/hooks/useFeedback.ts index f57be384d..08380c19b 100644 --- a/src/hooks/useFeedback.ts +++ b/src/hooks/useFeedback.ts @@ -1,9 +1,11 @@ import { App } from 'antd'; import { notificationController } from '@app/controllers/notificationController'; -import { modalController } from '@app/controllers/modalController'; +import { ModalType, modalController } from '@app/controllers/modalController'; -export const useFeedback = (): ReturnType => { +export const useFeedback = (): Omit, 'modal'> & { + modal: ModalType; +} => { const { message, notification, modal } = App.useApp(); return { @@ -15,7 +17,6 @@ export const useFeedback = (): ReturnType => { }, modal: { ...modalController(modal), - confirm: modal.confirm, }, }; }; diff --git a/src/styles/GlobalStyle.ts b/src/styles/GlobalStyle.ts index de0f88afa..bdf38f399 100644 --- a/src/styles/GlobalStyle.ts +++ b/src/styles/GlobalStyle.ts @@ -24,7 +24,7 @@ export default styled.createGlobalStyle` a { font-size: ${({ theme }) => theme.fontSizes.md}; color: ${({ theme }) => theme.textMain}; - + &:hover, :active { color: ${({ theme }) => theme.primary6};