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..66b0d503 100644 --- a/src/styles/ThemeConfigProvider.tsx +++ b/src/styles/ThemeConfigProvider.tsx @@ -17,37 +17,40 @@ export const ThemeConfigProvider = ({ theme, children }: ThemeConfigProviderProp theme={{ token: { ...{ - colorPrimary: currentTheme.primary, + colorPrimary: 'var(--primary-color)', - boxShadow: currentTheme.boxShadow, // assume naming and meaning are same + boxShadow: 'var(--box-shadow)', - // 'heading-color': 'var(--heading-color)', - colorTextHeading: currentTheme.heading, + // @heading-color: var(--heading-color); + colorTextHeading: 'var(--heading-color)', - // 'component-background': 'var(--background-color)', - colorBgContainer: currentTheme.background, + // @component-background: var(--background-color); + colorBgContainer: 'var(--background-color)', - // 'text-color': 'var(--text-main-color)', - colorText: currentTheme.textMain, + // @text-color: var(--text-main-color); + colorText: 'var(--text-main-color)', - // 'item-hover-bg': 'var(--item-hover-bg)', - controlItemBgHover: currentTheme.itemHoverBg, + // @item-hover-bg: var(--item-hover-bg); + controlItemBgHover: 'var(--item-hover-bg)', - // 'background-color-base': 'var(--background-base-color)', - colorBgBase: currentTheme.backgroundColorBase, + // @background-color-base: var(--background-base-color); + colorBgBase: 'var(--background-base-color)', - // 'border-color-base': 'var(--border-base-color)', - colorBorder: currentTheme.borderBase, + // @border-color-base: var(--border-base-color); + colorBorder: 'var(--border-base-color)', - // 'disabled-bg': 'var(--disabled-bg-color)', - colorBgContainerDisabled: currentTheme.disabledBg, + // @disabled-bg: var(--disabled-bg-color); + colorBgContainerDisabled: 'var(--disabled-bg-color)', - // --disabled-color - colorTextDisabled: currentTheme.disable, + colorTextDisabled: 'var(--disabled-color)', - colorBgElevated: currentTheme.background, + colorBgElevated: 'var(--background-color)', colorFillAlter: `rgba(${hexToRGB(currentTheme.primary)}, 0.05)`, + + colorTextPlaceholder: 'var(--input-placeholder-color)', + + colorPrimaryHover: 'var(--ant-primary-5)', }, ...(theme === 'dark' ? { @@ -57,173 +60,199 @@ export const ThemeConfigProvider = ({ theme, children }: ThemeConfigProviderProp : antThemeObject[theme]), // base override - // 'font-family': "'Montserrat', sans-serif", + // @font-family: 'Montserrat', sans-serif; fontFamily: "'Montserrat', sans-serif", - // 'font-size-base': '16px', - fontSize: 16, + // @font-size-base: 16px; + fontSize: parseFloat(FONT_SIZE.md) * 16, - // 'font-size-sm': '@font-size-base - 2px', - fontSizeSM: 14, + // @font-size-sm: @font-size-base - 2px; + fontSizeSM: parseFloat(FONT_SIZE.xs) * 16, - // 'height-sm': '32px', + // @height-sm: 32px; controlHeightSM: 32, - // 'height-base': '50px', + // @height-base: 50px; controlHeight: 50, - // 'height-lg': '64px', + // @height-lg: 64px; controlHeightLG: 64, - // 'border-radius-base': '7px', - borderRadius: 7, + // @border-radius-base: 7px; + borderRadius: parseInt(BORDER_RADIUS), - // 'border-color-split': '#f0f0f0', + // @border-color-split: #f0f0f0; colorSplit: '#f0f0f0', // Media queries - // 'screen-xs': '360px', - screenXS: 360, - screenXSMin: 360, - screenXSMax: 568, + // // @screen-xs: 360px; + // screenXS: BREAKPOINTS.xs, + // screenXSMin: BREAKPOINTS.xs, + // screenXSMax: BREAKPOINTS.sm, - // 'screen-sm': '568px', - screenSM: 568, - screenSMMin: 568, - // screenSMMax: 1280, + // // @screen-sm: 568px; + // screenSM: BREAKPOINTS.sm, + // screenSMMin: BREAKPOINTS.sm, - // 'screen-xl': '1280px', - screenXL: 1280, + // // @screen-xl: 1280px; + // screenXL: BREAKPOINTS.xl, - // 'screen-xxl': '1920px', - screenXXL: 1920, + // // @screen-xxl: 1920px; + // screenXXL: BREAKPOINTS.xxl, }, components: { Layout: { - //'layout-header-height': '4.25rem', - controlHeight: 34, // (4.25 * 16 / 2) + // @layout-header-height: 4.25rem; + controlHeight: 34, - // 'layout-header-padding': '1rem', - controlHeightLG: 12.8, // (1 * 16 / 1.25) ? + // @layout-header-padding: 1rem; + controlHeightLG: 12.8, - // 'layout-body-background': 'var(--layout-body-bg-color)', - colorBgBody: currentTheme.layoutBodyBg, + // @layout-body-background: var(--layout-body-bg-color); + colorBgBody: 'var(--layout-body-bg-color)', /* - 'layout-header-background': 'var(--layout-header-bg-color)', - 'layout-sider-background': 'var(--layout-sider-bg-color)', + @layout-header-background: var(--layout-header-bg-color); + @layout-sider-background: var(--layout-sider-bg-color); */ - colorBgHeader: currentTheme.layoutSiderBg, + colorBgHeader: 'var(--layout-sider-bg-color)', }, Alert: { - // 'alert-info-bg-color': '#dfefff', + // @alert-info-bg-color: #dfefff; colorInfoBg: '#dfefff', - // 'alert-text-color': 'var(--alert-text-color)', - colorText: currentTheme.alertTextColor, + // @alert-text-color: var(--alert-text-color); + colorText: 'var(--alert-text-color)', + marginXS: 8, - marginSM: 14, + + marginSM: 15, + paddingContentVerticalSM: 8, + + paddingMD: 15, + paddingContentHorizontalLG: 15, + + borderRadiusLG: parseInt(BORDER_RADIUS), }, Card: { - // 'card-head-color': '@text-color', - // ? + // @card-head-color: @text-color; + colorTextHeading: 'var(--text-main-color)', - // 'card-head-padding': '20px', + // @card-head-padding: 20px; padding: 20, - boxShadowTertiary: currentTheme.boxShadow, - // 'card-head-padding-sm': '15px', - // ? - // 'card-head-font-size': '18px', - // ? + // @card-head-font-size: 18px; + fontSize: 18, - // 'card-head-font-size-sm': '@font-size-base', - // ? + // @card-head-font-size-sm: @font-size-base; + fontSizeSM: parseFloat(FONT_SIZE.md) * 16, - // 'card-padding-base': '20px', + // @card-padding-base: 20px; paddingLG: 20, - // 'card-padding-base-sm': '15px', - // ? + boxShadowTertiary: 'var(--box-shadow)', + borderRadiusLG: parseInt(BORDER_RADIUS), + + // @card-padding-base-sm: 15px; + // paddingXS: 15, + }, + Collapse: { + // }, - // Collapse: { }, Tabs: { colorPrimaryHover: 'var(--ant-primary-5)', + colorPrimary: 'var(--ant-primary-color)', }, Table: { - // 'table-border-radius-base': '0', + // @table-border-radius-base: 0; borderRadiusLG: 0, - // 'table-border-color': '#b3cbe1', + // @table-border-color: #b3cbe1; colorBorderSecondary: '#b3cbe1', + + colorTextHeading: 'var(--primary-color)', + controlItemBgActive: 'var(--ant-primary-1)', + controlItemBgActiveHover: `rgba(${hexToRGB(currentTheme.primary)}, 0.12)`, + colorBgContainer: `rgba(${hexToRGB(currentTheme.primary)}, 0.003)`, }, Checkbox: { - // 'checkbox-check-bg': 'transparent', + // @checkbox-check-bg: transparent; colorBgContainer: 'transparent', - controlInteractiveSize: 16, + colorPrimary: 'var(--primary-color)', + colorTextDisabled: 'var(--disabled-color)', + controlInteractiveSize: 16, marginXS: 0, }, Tag: { - // 'tag-font-size': '@font-size-sm', - fontSize: 14, + // @tag-font-size: @font-size-sm; + fontSize: parseFloat(FONT_SIZE.xs) * 16, }, Select: { fontSizeSM: parseFloat(FONT_SIZE.xs) * 16, borderRadiusXS: parseInt(BORDER_RADIUS), borderRadiusSM: parseInt(BORDER_RADIUS), + + colorFillSecondary: 'var(--background-base-color)', + colorIcon: 'var(--icon-color)', + colorPrimary: 'var(--ant-primary-color)', + colorPrimaryHover: 'var(--ant-primary-5)', + controlItemBgActive: 'var(--ant-primary-1)', + controlItemBgHover: 'var(--item-hover-bg)', }, Steps: { wireframe: true, controlHeight: 32, controlHeightSM: 24, fontSizeHeading3: 24, + colorPrimary: 'var(--primary-color)', + colorTextDescription: 'var(--subtext-color)', }, Spin: { controlHeight: 32, controlHeightLG: 40, + colorPrimary: 'var(--ant-primary-color)', }, Skeleton: { controlHeightXS: 16, controlHeightSM: 32, controlHeight: 50, controlHeightLG: 64, + color: 'rgba(190, 190, 190, 0.2)', }, Switch: { controlHeight: 32, + + colorPrimary: 'var(--ant-primary-color)', + colorWhite: 'var(--background-color)', + opacityLoading: 0.4, }, Menu: { - // 'menu-inline-toplevel-item-height': '@height-base', - // ? - - // 'menu-item-height': '@height-base', - controlHeightLG: 50, // ? + // @menu-item-height: @height-base; + controlHeightLG: 50, - // 'menu-icon-margin-right': '1rem', - // ? + // @menu-icon-size: 1.25rem; + fontSize: parseFloat(FONT_SIZE.xl) * 16, - // 'menu-icon-size': '1.25rem', - fontSize: 20, // ? - - // .ant-menu-inline, - // .ant-menu-vertical { - // border-right: 0; - // borderInlineEnd: `${colorActiveBarBorderSize}px ${lineType} ${colorSplit}` + colorItemTextSelected: 'var(--ant-primary-color)', + colorActiveBarWidth: 3, colorActiveBarBorderSize: 0, + marginXXS: 8, }, Popover: { - // 'zindex-popover': '2000', + // @zindex-popover: 2000; zIndexPopup: 2000, + wireframe: true, controlHeight: 34, - colorBgElevated: currentTheme.background, }, Popconfirm: { fontWeightStrong: parseInt(FONT_WEIGHT.semibold), + colorPrimary: 'var(--primary-color)', }, Notification: { - // 'zindex-notification': '9999', + // @zindex-notification: 9999; zIndexPopup: 9999, // .ant-notification-notice { @@ -234,29 +263,12 @@ export const ThemeConfigProvider = ({ theme, children }: ThemeConfigProviderProp paddingMD: 2 * 16, paddingContentHorizontalLG: 2 * 16, - /* - .ant-notification-notice-with-icon .ant-notification-notice-message { - .ant-notification-notice-with-icon .ant-notification-notice-description { - */ - // marginInlineStart /* 540? */: token.marginSM /* 12 default */ + notificationIconSize /* 2.8125 * 16 */, - - // .ant-notification-notice-icon { - // font-size: 2.8125rem; - // notificationIconSize: token.fontSizeLG /* 16 default */ * token.lineHeightLG /* 1.5 default */, - lineHeightLG: 2.8125, // ? - - // .ant-notification-notice-close { - // top: 1.25rem; - // const notificationPaddingVertical = token.paddingMD /* 2 * 16 */; - - // .success-icon { - colorSuccess: currentTheme.success, - // .info-icon { - colorInfo: currentTheme.primary, - // .warning-icon { - colorWarning: currentTheme.warning, - // .error-icon { - colorError: currentTheme.error, + lineHeightLG: 2.8125, + + colorSuccess: 'var(--success-color)', + colorInfo: 'var(--primary-color)', + colorWarning: 'var(--warning-color)', + colorError: 'var(--error-color)', fontWeightStrong: parseInt(FONT_WEIGHT.semibold), fontSize: 500, @@ -264,86 +276,109 @@ export const ThemeConfigProvider = ({ theme, children }: ThemeConfigProviderProp fontSizeHeading3: 24, }, Input: { - // 'input-placeholder-color': 'var(--input-placeholder-color)', - colorTextPlaceholder: currentTheme.inputPlaceholder, + // @input-placeholder-color: var(--input-placeholder-color); + colorTextPlaceholder: 'var(--input-placeholder-color)', - // 'input-disabled-color': 'var(--disabled-color)', - colorTextDisabled: currentTheme.disable, + // @input-disabled-color: var(--disabled-color); + colorTextDisabled: 'var(--disabled-color)', fontWeightStrong: parseInt(FONT_WEIGHT.semibold), colorFillAlter: `rgba(${hexToRGB(currentTheme.primary)}, 0.05)`, }, + InputNumber: { + colorPrimary: 'var(--ant-primary-5)', + }, + Form: { + colorInfoBorderHover: 'var(--ant-primary-color-hover)', + }, Avatar: { - // 'avatar-bg': 'var(--avatar-bg)', - colorTextPlaceholder: currentTheme.avatarBg, + // @avatar-bg: var(--avatar-bg); + colorTextPlaceholder: 'var(--avatar-bg)', + colorBorderBg: 'var(--white)', controlHeightSM: 24, controlHeight: 32, controlHeightLG: 40, }, + Badge: { + colorPrimary: 'var(--ant-primary-color)', + colorTextPlaceholder: '#d9d9d9', + fontSizeSM: 12, + }, + Button: { + colorPrimary: 'var(--primary-color)', + borderRadiusSM: parseInt(BORDER_RADIUS), + controlOutline: '0', + controlOutlineWidth: 0, + }, Breadcrumb: { /* - 'breadcrumb-base-color': 'var(--breadcrumb-color)', - 'breadcrumb-link-color': 'var(--breadcrumb-color)', - 'breadcrumb-separator-color': 'var(--breadcrumb-color)', + @breadcrumb-base-color: var(--breadcrumb-color); + @breadcrumb-link-color: var(--breadcrumb-color); + @breadcrumb-separator-color: var(--breadcrumb-color); */ - colorTextDescription: currentTheme.breadcrumb, - colorText: currentTheme.textMain, + colorTextDescription: 'var(--breadcrumb-color)', }, Rate: { - // 'rate-star-color': '#ffc24b'; + // @rate-star-color: #ffc24b; 'yellow-6': '#ffc24b', colorFillContent: '#f0f0f0', }, Radio: { - // 'radio-disabled-button-checked-color': 'var(--disabled-color)', - // colorTextDisabled: currentTheme.disable, + // @radio-disabled-button-checked-color: var(--disabled-color); + colorPrimary: 'var(--ant-primary-color)', + controlItemBgActiveDisabled: '#e6e6e6', }, Result: { fontSizeHeading3: parseFloat(FONT_SIZE.xxl) * 16, }, Pagination: { wireframe: true, + colorPrimary: 'var(--ant-primary-color)', + controlItemBgActiveDisabled: '#e6e6e6', }, Slider: { - // 'slider-disabled-color': 'var(--disabled-color)', - colorFillSecondary: currentTheme.disable, // ? + colorPrimaryBorder: 'var(--ant-primary-3)', + + colorPrimary: 'var(--ant-primary-4)', + colorPrimaryBorderHover: 'var(--ant-primary-4)', + + colorFillSecondary: '#e1e1e1', + colorBorderSecondary: '#e1e1e1', + colorFillContentHover: '#e1e1e1', + + colorFillTertiary: 'var(--background-base-color)', + + handleSize: 8, + + // @slider-disabled-color: var(--disabled-color); + colorTextDisabled: 'var(--disabled-color)', }, Modal: { - // 'modal-close-color': 'var(--icon-color)', - colorTextDescription: currentTheme.icon, + // @modal-close-color: var(--icon-color); + colorTextDescription: 'var(--icon-color)', wireframe: true, - colorBgElevated: currentTheme.background, }, Progress: { marginXS: 0, - // 'progress-remaining-color': 'var(--background-base-color)', - colorFillSecondary: currentTheme.backgroundColorBase, + // @progress-remaining-color: var(--background-base-color); + colorFillSecondary: 'var(--background-base-color)', }, DatePicker: { - // .ant-picker-cell { color: var(--text-main-color); } - colorText: currentTheme.textMain, // ? - - // .ant-picker svg { color: var(--text-light-color); } - colorIcon: currentTheme.textLight, // ? - - fontFamily: "'Montserrat', sans-serif", - colorTextPlaceholder: currentTheme.inputPlaceholder, + colorIcon: 'var(--text-light-color)', + colorPrimary: 'var(--ant-primary-color)', + controlItemBgActive: 'var(--ant-primary-1)', + colorTextPlaceholder: 'var(--input-placeholder-color)', fontWeightStrong: parseInt(FONT_WEIGHT.medium), controlHeightSM: 32, controlHeightLG: 64, }, Dropdown: { - // const dropdownPaddingVertical = (controlHeight - fontSize /* 16 */ * lineHeight /* ? */ ) / 2; controlHeight: 34, }, Upload: { colorFillAlter: `rgba(${hexToRGB(currentTheme.primary)}, 0.05)`, colorPrimaryHover: 'var(--ant-primary-5)', }, - Form: { - fontFamily: "'Montserrat', sans-serif", - // fontFamily: 'inherit', - }, }, }} >