From a9ad4649659c07243849fb762831be60f1da7d78 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] 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);