diff --git a/src/components/apps/newsFeed/NewsFilter/NewsFilter.styles.ts b/src/components/apps/newsFeed/NewsFilter/NewsFilter.styles.ts index 8c95caed..29ec9a26 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 4d940987..649174d6 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 50f92dae..e3023c92 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 41ddc515..1d90ea2a 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 ab7b4aea..957ad289 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 3d1d993a..62a33b68 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 58563aa8..a2d853eb 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 54b609f1..25e81a76 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 f7e6cfd7..f8de3741 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 56db32d4..bbf96918 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 00000000..f6991cf6 --- /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 ebcc068a..9cce2e1c 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 9474bb99..00000000 --- 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 b610dea8..00000000 --- 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 36c7d922..e8add878 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 abc82c9d..db6d5820 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 f2709efc..3d5fd8ba 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 599988b5..886fbd50 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 3e1d1c26..69523bac 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 b0d7acbf..80499a96 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 2e275213..cdf60c4a 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 f5272b8d..20c521e4 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 00d6a1f6..5c6b9a73 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 3c3df777..f5b49c9d 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 0d45bf72..a3a987de 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 (