diff --git a/package.json b/package.json index 309a040132..f369be66b2 100644 --- a/package.json +++ b/package.json @@ -58,7 +58,7 @@ "react-scripts": "^5.0.1", "react-scroll": "^1.8.7", "react-scrollbars-custom": "^4.1.1", - "react-select": "^5.4.0", + "react-select": "^5.8.0", "react-split-pane": "^0.1.92", "react-use": "^17.4.0", "react-virtualized": "^9.22.3", diff --git a/public/assets/images/floppy-disk.svg b/public/assets/images/floppy-disk.svg index 35104ff896..52f688e4c4 100644 --- a/public/assets/images/floppy-disk.svg +++ b/public/assets/images/floppy-disk.svg @@ -1,10 +1,17 @@ - - - - - - - - - + + + + + + + + + + + + + + + + diff --git a/src/constants.scss b/src/constants.scss index 2afb37a95a..c3c7782250 100644 --- a/src/constants.scss +++ b/src/constants.scss @@ -107,6 +107,7 @@ $sticky-info-shadow: rgba(0, 0, 0, 0.02); $carousel-overlay-shadow: rgba(0, 26, 54, 0.4); $shadow-1: rgba(79, 92, 105, 0.1); $date-picker-arrow-color: #aeaeae; +$transparent: rgba(255, 255, 255, 0); /* colors v2 */ $c-primary-100: #f4f6ff; @@ -119,7 +120,7 @@ $c-neutrals-100-hover: #e1e1e1; $c-neutrals-100-shadow: 4px 4px 0px #e2e2e2; $c-neutrals-200: #d5d5e4; $c-neutrals-300: #979bba; -$c-neutrals-600: #001a36; +$c-neutrals-600: var(--primary-text); $c-notification-100: #f9faff; $c-shades-white: #ffffff; $c-shades-black: #000000; @@ -143,8 +144,8 @@ $c-pink-active-feed-cards-light: #fcf4ff; $c-pink-active-feed-cards: #a75a93; $c-pink-hover-feed-cards: #fff9fd; $c-gray-5: #f4f5f5; -$c-gray-10: #eef0f4; -$c-gray-20: #dcdee7; +$c-gray-10: var(--gentle-stroke); +$c-gray-20: var(--gentle-stroke); $c-gray-30: #b7bcd2; $c-gray-40: #8d91a9; $c-gray-50: #7a819c; diff --git a/src/index.scss b/src/index.scss index 4aff548864..f99d58aee4 100644 --- a/src/index.scss +++ b/src/index.scss @@ -31,15 +31,37 @@ font-display: swap; } +html { + background-color: var(--primary-background); +} + :root { --page-extra-pr: 0px; } +// Remove Arrows/Spinners from input type number +/* Chrome, Safari, Edge, Opera */ +input::-webkit-outer-spin-button, +input::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} + +/* Firefox */ +input[type="number"] { + -moz-appearance: textfield; +} + +// Disable highlight when Touch/Press for inputs +input:focus { + outline: $transparent; +} + body { --safe-area-inset-bottom: 0; // Disable highlight when Touch/Press - -webkit-tap-highlight-color: rgba(255, 255, 255, 0); + -webkit-tap-highlight-color: $transparent; margin: 0; font-family: PoppinsSans, sans-serif; -webkit-font-smoothing: antialiased; @@ -230,10 +252,15 @@ code { } ::-webkit-scrollbar-thumb { - background-color: var(--medium-gray); + background-color: $c-gray-20; border-radius: 0.5rem; &:hover { - background-color: var(--strong-gray); + background-color: $c-gray-50; cursor: pointer; } } + +a:visited { + background-color: transparent; + text-decoration: none; +} diff --git a/src/pages/App/providers/NotificationProvider/Notification/index.scss b/src/pages/App/providers/NotificationProvider/Notification/index.scss index 9799551310..c44b1454c5 100644 --- a/src/pages/App/providers/NotificationProvider/Notification/index.scss +++ b/src/pages/App/providers/NotificationProvider/Notification/index.scss @@ -2,17 +2,19 @@ @import "../../../../../styles/sizes"; .notification-wrapper { - background-color: $purple; + background-color: var(--primary-background); padding: 0.5rem; margin: 0.5rem 0; display: flex; justify-content: space-between; border-radius: 0.25rem; + box-shadow: 0 0.25rem 0.9375rem var(--drop-shadow); + color: var(--primary-text); .dismiss-btn { background: none; border: none; - color: $white; + color: inherit; font-weight: bold; cursor: pointer; &:hover { diff --git a/src/pages/Login/components/LoginContainer/Connect/index.scss b/src/pages/Login/components/LoginContainer/Connect/index.scss index 82ccb3cc17..f1da062659 100644 --- a/src/pages/Login/components/LoginContainer/Connect/index.scss +++ b/src/pages/Login/components/LoginContainer/Connect/index.scss @@ -106,7 +106,6 @@ .connect-wrapper__terms-of-use { font-weight: 600; - color: $secondary-blue; text-decoration: underline; } diff --git a/src/pages/Login/components/LoginContainer/PhoneAuth/PhoneAuth.tsx b/src/pages/Login/components/LoginContainer/PhoneAuth/PhoneAuth.tsx index 324e4ff94e..a8727b784b 100644 --- a/src/pages/Login/components/LoginContainer/PhoneAuth/PhoneAuth.tsx +++ b/src/pages/Login/components/LoginContainer/PhoneAuth/PhoneAuth.tsx @@ -4,7 +4,7 @@ import { useDispatch, useSelector } from "react-redux"; import classNames from "classnames"; import moment from "moment"; import { ERROR_TEXT_FOR_NON_EXISTENT_USER } from "@/pages/Login/constants"; -import { Button, Loader, ModalFooter } from "@/shared/components"; +import { Loader, ModalFooter } from "@/shared/components"; import { PhoneInput, PhoneInputCountryCode, @@ -16,6 +16,7 @@ import { RECAPTCHA_CONTAINER_ID, } from "@/shared/constants"; import { getScreenSize } from "@/shared/store/selectors"; +import { Button, ButtonVariant } from "@/shared/ui-kit"; import { isGeneralError } from "@/shared/utils"; import firebase, { isFirebaseError } from "@/shared/utils/firebase"; import { @@ -150,10 +151,10 @@ const PhoneAuth: FC = ({ authCode, onFinish, onError }) => { case PhoneAuthStep.PhoneInput: { const buttonEl = ( diff --git a/src/pages/Login/components/LoginContainer/PhoneAuth/index.scss b/src/pages/Login/components/LoginContainer/PhoneAuth/index.scss index 272b959f7e..0888877704 100644 --- a/src/pages/Login/components/LoginContainer/PhoneAuth/index.scss +++ b/src/pages/Login/components/LoginContainer/PhoneAuth/index.scss @@ -8,7 +8,6 @@ align-items: center; text-align: center; font-family: PoppinsSans, sans-serif; - color: $secondary-blue; .phone-auth__recaptcha-container { display: none; @@ -78,10 +77,10 @@ padding: 2rem 0; } -.phone-auth__submit-button { - max-width: 20.5rem; +// .phone-auth__submit-button { +// max-width: 20.5rem; - @include big-phone { - max-width: unset; - } -} +// @include big-phone { +// max-width: unset; +// } +// } diff --git a/src/pages/Login/components/LoginContainer/Verification/Verification.tsx b/src/pages/Login/components/LoginContainer/Verification/Verification.tsx index 495085d3d9..f720bdefd2 100644 --- a/src/pages/Login/components/LoginContainer/Verification/Verification.tsx +++ b/src/pages/Login/components/LoginContainer/Verification/Verification.tsx @@ -9,12 +9,8 @@ import React, { import { formatPhoneNumberIntl } from "react-phone-number-input"; import PinInput from "react-pin-input"; import { useSelector } from "react-redux"; -import { - Button, - ButtonIcon, - ButtonVariant, - ModalFooter, -} from "../../../../../shared/components"; +import { Button, ButtonVariant } from "@/shared/ui-kit"; +import { ButtonIcon, ModalFooter } from "../../../../../shared/components"; import { ErrorText, PhoneInputValue, @@ -76,7 +72,7 @@ const Verification: FC = (props) => { return { text: "Resend code", handler: onCodeResend, - variant: ButtonVariant.Secondary, + variant: ButtonVariant.PrimaryPink, disabled: false, }; } @@ -84,14 +80,14 @@ const Verification: FC = (props) => { return { text: "Submit", handler: handleFinish, - variant: ButtonVariant.Primary, + variant: ButtonVariant.PrimaryPink, disabled: false, }; } return { text: `${formatCountdownValue(minutes)}:${formatCountdownValue(seconds)}`, - variant: ButtonVariant.Primary, + variant: ButtonVariant.PrimaryPink, disabled: true, }; }, [ @@ -123,7 +119,6 @@ const Verification: FC = (props) => { onClick={submitButtonState.handler} disabled={submitButtonState.disabled} variant={submitButtonState.variant} - shouldUseFullWidth > {submitButtonState.text} diff --git a/src/pages/Login/components/LoginContainer/Verification/index.scss b/src/pages/Login/components/LoginContainer/Verification/index.scss index bafaaa2e5c..5f9906faf7 100644 --- a/src/pages/Login/components/LoginContainer/Verification/index.scss +++ b/src/pages/Login/components/LoginContainer/Verification/index.scss @@ -38,7 +38,6 @@ font-size: $small; font-weight: 600; letter-spacing: 0.16px; - color: $secondary-blue; } .verification__phone-wrapper-edit { @@ -66,13 +65,7 @@ } .verification__submit-button { - max-width: 20.5rem; margin-top: 3rem; - - @include big-phone { - max-width: unset; - margin-top: 0; - } } .verification__code-wrapper { diff --git a/src/pages/MyAccount/components/Billing/AddingCard/AddingCard.tsx b/src/pages/MyAccount/components/Billing/AddingCard/AddingCard.tsx index 41f604cc67..24612e3126 100644 --- a/src/pages/MyAccount/components/Billing/AddingCard/AddingCard.tsx +++ b/src/pages/MyAccount/components/Billing/AddingCard/AddingCard.tsx @@ -1,5 +1,5 @@ import React, { FC } from "react"; -import { Button, ButtonVariant } from "@/shared/components"; +import { Button, ButtonVariant } from "@/shared/ui-kit"; import "./index.scss"; interface AddingCardProps { @@ -22,11 +22,7 @@ const AddingCard: FC = (props) => { />

{text}

-
diff --git a/src/pages/MyAccount/components/Billing/AddingCard/index.scss b/src/pages/MyAccount/components/Billing/AddingCard/index.scss index ba8ff2152c..7a3f3fed03 100644 --- a/src/pages/MyAccount/components/Billing/AddingCard/index.scss +++ b/src/pages/MyAccount/components/Billing/AddingCard/index.scss @@ -8,7 +8,7 @@ flex-wrap: wrap; align-items: center; border-radius: 0.875rem; - background-color: $light-gray-4; + background-color: var(--secondary-background); box-sizing: border-box; justify-content: space-around; } @@ -30,9 +30,5 @@ font-size: $xsmall; text-align: center; white-space: pre-line; -} - -.billing-adding-card__content__button { - color: $purple; - border-radius: 0.5rem; + color: var(--primary-text); } diff --git a/src/pages/MyAccount/components/Billing/BankAccountInfo/BankAccountInfo.tsx b/src/pages/MyAccount/components/Billing/BankAccountInfo/BankAccountInfo.tsx index 5811272298..caa808d619 100644 --- a/src/pages/MyAccount/components/Billing/BankAccountInfo/BankAccountInfo.tsx +++ b/src/pages/MyAccount/components/Billing/BankAccountInfo/BankAccountInfo.tsx @@ -1,15 +1,11 @@ import React, { FC } from "react"; import { useSelector } from "react-redux"; import { BANKS_OPTIONS } from "@/shared/assets/banks"; -import { - Modal, - Button, - ButtonVariant, - DeletePrompt, -} from "@/shared/components"; +import { Modal, DeletePrompt } from "@/shared/components"; import { ScreenSize } from "@/shared/constants"; import { BankAccountDetails } from "@/shared/models"; import { getScreenSize } from "@/shared/store/selectors"; +import { Button, ButtonVariant } from "@/shared/ui-kit"; import "./index.scss"; interface BankAccountInfoProps { @@ -39,10 +35,8 @@ const BankAccountInfo: FC = (props) => { const detailsButtons = (
diff --git a/src/pages/MyAccount/components/Billing/BankAccountInfo/index.scss b/src/pages/MyAccount/components/Billing/BankAccountInfo/index.scss index 197a62a2fb..bd1e56a605 100644 --- a/src/pages/MyAccount/components/Billing/BankAccountInfo/index.scss +++ b/src/pages/MyAccount/components/Billing/BankAccountInfo/index.scss @@ -1,4 +1,5 @@ @import "../../../../../constants"; +@import "../../../../../constants"; @import "../../../../../styles/sizes"; .billing-bank-account-info { @@ -19,10 +20,11 @@ display: flex; flex-direction: column; align-items: center; - background-color: $white; - border: 1px solid $light-gray-1; + background-color: var(--secondary-background); + border: 1px solid var(--gentle-stroke); border-radius: 0.5rem; box-sizing: border-box; + color: var(--primary-text); @include big-phone { padding: 2.25rem 1.5rem; @@ -79,25 +81,6 @@ flex-direction: column; width: 100%; } - - .billing-bank-account-info__details-button { - max-width: 9rem; - border-radius: 0.5rem; - - &.edit-details { - color: $purple; - } - - &.delete-details { - color: $red; - } - - @include big-phone { - max-width: unset; - margin-bottom: 0.5rem; - border-radius: 6.25rem; - } - } } .billing-bank-account-info__delete-prompt-modal { diff --git a/src/pages/MyAccount/components/Billing/MobileBilling/index.scss b/src/pages/MyAccount/components/Billing/MobileBilling/index.scss index 39f43b8bb8..b4d8ee1b5e 100644 --- a/src/pages/MyAccount/components/Billing/MobileBilling/index.scss +++ b/src/pages/MyAccount/components/Billing/MobileBilling/index.scss @@ -20,7 +20,7 @@ .my-account-mobile-billing__tabs-wrapper { padding: 0 var(--content-ph); white-space: nowrap; - border-bottom: 1px solid $light-gray-1; + border-bottom: 1px solid var(--gentle-stroke); } .my-account-mobile-billing__tab-panels { diff --git a/src/pages/MyAccount/components/Billing/PaymentInformation/index.scss b/src/pages/MyAccount/components/Billing/PaymentInformation/index.scss index b570dc169b..2be05d427a 100644 --- a/src/pages/MyAccount/components/Billing/PaymentInformation/index.scss +++ b/src/pages/MyAccount/components/Billing/PaymentInformation/index.scss @@ -2,8 +2,8 @@ @import "../../../../../styles/sizes"; .billing-payment-information__payment-method-card { - background-color: $white; - border: 1px solid $light-gray-1; + background-color: var(--secondary-background); + border: 1px solid var(--gentle-stroke); border-radius: 0.5rem; box-sizing: border-box; diff --git a/src/pages/MyAccount/components/Billing/components/Header/Header.module.scss b/src/pages/MyAccount/components/Billing/components/Header/Header.module.scss index 21247df7e5..2990c78277 100644 --- a/src/pages/MyAccount/components/Billing/components/Header/Header.module.scss +++ b/src/pages/MyAccount/components/Billing/components/Header/Header.module.scss @@ -30,7 +30,6 @@ font-weight: 500; font-size: 1rem; text-align: center; - color: $c-gray-100; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; diff --git a/src/pages/MyAccount/components/Billing/index.scss b/src/pages/MyAccount/components/Billing/index.scss index d2db0f7536..efdbeb07e9 100644 --- a/src/pages/MyAccount/components/Billing/index.scss +++ b/src/pages/MyAccount/components/Billing/index.scss @@ -9,7 +9,7 @@ display: flex; flex-direction: column; font-family: PoppinsSans, sans-serif; - color: $secondary-blue; + color: var(--primary-text); @include tablet { padding-top: 0; diff --git a/src/pages/MyAccount/components/Profile/DeleteUserModal/MainStep/index.scss b/src/pages/MyAccount/components/Profile/DeleteUserModal/MainStep/index.scss index 6c1e4df7f2..74ac6b7a99 100644 --- a/src/pages/MyAccount/components/Profile/DeleteUserModal/MainStep/index.scss +++ b/src/pages/MyAccount/components/Profile/DeleteUserModal/MainStep/index.scss @@ -34,8 +34,8 @@ margin: 0.875rem 0 1.125rem; padding: 1.25rem 1.375rem; font-size: $small; - background-color: $light-gray-11; - border: 1px solid $light-gray-1; + background-color: var(--secondary-background); + border: 1px solid var(--gentle-stroke); border-radius: 0.5rem; } diff --git a/src/pages/MyAccount/components/Profile/Profile.module.scss b/src/pages/MyAccount/components/Profile/Profile.module.scss index dd4e764f0d..80379ce922 100644 --- a/src/pages/MyAccount/components/Profile/Profile.module.scss +++ b/src/pages/MyAccount/components/Profile/Profile.module.scss @@ -5,6 +5,7 @@ .container { position: relative; width: 100%; + color: var(--primary-text); } .content { @@ -30,6 +31,7 @@ position: absolute; top: 1.5rem; right: 0; + color: var(--primary-text); @include tablet { position: static; @@ -58,11 +60,16 @@ } .menuButtonsWrapper { - border-top: 0.0625rem solid $c-gray-20; + border-top: 0.0625rem solid var(--gentle-stroke); } .menuButton { - border-bottom: 0.0625rem solid $c-gray-20; + border-bottom: 0.0625rem solid var(--gentle-stroke); + color: var(--primary-text); +} + +.themeMenuButton { + color: var(--primary-text); } .logoutMenuButton { diff --git a/src/pages/MyAccount/components/Profile/Profile.tsx b/src/pages/MyAccount/components/Profile/Profile.tsx index d0ffbcafb6..bdb93399ac 100644 --- a/src/pages/MyAccount/components/Profile/Profile.tsx +++ b/src/pages/MyAccount/components/Profile/Profile.tsx @@ -1,11 +1,15 @@ import React, { FC, useRef, useState } from "react"; import { useDispatch, useSelector } from "react-redux"; +import { matchPath, useLocation } from "react-router"; import { logOut } from "@/pages/Auth/store/actions"; import { selectUser } from "@/pages/Auth/store/selectors"; import { ButtonIcon, Loader } from "@/shared/components"; +import { ROUTE_PATHS } from "@/shared/constants"; import { useRoutesContext } from "@/shared/contexts"; import { useIsTabletView } from "@/shared/hooks/viewport"; import { Edit3Icon as EditIcon, LogoutIcon } from "@/shared/icons"; +import ThemeIcon from "@/shared/icons/theme.icon"; +import { toggleTheme } from "@/shared/store/actions"; import { Button, ButtonVariant } from "@/shared/ui-kit"; import { Header, MenuButton, UserDetails, UserDetailsRef } from "./components"; import styles from "./Profile.module.scss"; @@ -23,6 +27,8 @@ const Profile: FC = (props) => { const [isSubmitting, setIsSubmitting] = useState(false); const user = useSelector(selectUser()); const isMobileView = useIsTabletView(); + const { pathname } = useLocation(); + const isV04 = matchPath(ROUTE_PATHS.V04_PROFILE, pathname); const handleEditingChange = (isEditing: boolean) => { setIsEditing(isEditing); @@ -49,6 +55,10 @@ const Profile: FC = (props) => { userDetailsRef.current?.submit(); }; + const handleThemeToggle = () => { + dispatch(toggleTheme(null)); + }; + const handleLogout = () => { dispatch(logOut()); }; @@ -116,6 +126,14 @@ const Profile: FC = (props) => { text="Billing" to={getBillingPagePath()} /> + {!isV04 && ( + } + /> + )} { onClick={handleSubmitForm} disabled={isSubmitButtonDisabled} className="save-button" + variant={ButtonVariant.PrimaryPink} > Save @@ -600,7 +600,7 @@ export const AddBankDetails = (props: IProps) => { diff --git a/src/pages/OldCommon/components/CommonDetailContainer/AddProposalComponent/AddBankDetails/index.scss b/src/pages/OldCommon/components/CommonDetailContainer/AddProposalComponent/AddBankDetails/index.scss index d638c8769f..6fc00028db 100644 --- a/src/pages/OldCommon/components/CommonDetailContainer/AddProposalComponent/AddBankDetails/index.scss +++ b/src/pages/OldCommon/components/CommonDetailContainer/AddProposalComponent/AddBankDetails/index.scss @@ -13,7 +13,6 @@ font-weight: bold; line-height: 1.33; text-align: center; - color: $secondary-blue; margin-top: -1.5rem; } @@ -22,7 +21,6 @@ font-size: 0.875rem; line-height: 1.43; text-align: center; - color: $secondary-blue; padding-bottom: 1rem; border-bottom: 1px solid $light-gray-1; margin-bottom: 2rem; diff --git a/src/pages/OldCommon/components/CommonDetailContainer/AddProposalComponent/FileUploadButton/index.scss b/src/pages/OldCommon/components/CommonDetailContainer/AddProposalComponent/FileUploadButton/index.scss index 8f5e19133e..7be6ac77bc 100644 --- a/src/pages/OldCommon/components/CommonDetailContainer/AddProposalComponent/FileUploadButton/index.scss +++ b/src/pages/OldCommon/components/CommonDetailContainer/AddProposalComponent/FileUploadButton/index.scss @@ -9,12 +9,13 @@ color: $secondary-blue; text-align: center; border-radius: 0.75rem; - background-color: $light-gray-4; + background-color: var(--secondary-background); + color: var(--primary-text); box-sizing: border-box; transition: background-color 0.2s; &:hover { - background-color: $light-gray-9; + background-color: var(--hover-fill); } @include big-phone { @@ -60,6 +61,5 @@ text-align: left; .bank-account-file-info-upload__button-hint { margin-top: 0.25rem; - color: $purple; } } diff --git a/src/pages/OldCommon/components/CommonDetailContainer/CreateProposalModal/DeleteCommonStage/Configuration/index.scss b/src/pages/OldCommon/components/CommonDetailContainer/CreateProposalModal/DeleteCommonStage/Configuration/index.scss index c28f5ea239..d3c66ab2c4 100644 --- a/src/pages/OldCommon/components/CommonDetailContainer/CreateProposalModal/DeleteCommonStage/Configuration/index.scss +++ b/src/pages/OldCommon/components/CommonDetailContainer/CreateProposalModal/DeleteCommonStage/Configuration/index.scss @@ -35,8 +35,8 @@ margin: 0 0 1.125rem; padding: 1.25rem 1.375rem; font-size: $small; - background-color: $light-gray-11; - border: 1px solid $light-gray-1; + background-color: var(--secondary-background); + border: 1px solid var(--gentle-stroke); border-radius: 0.5rem; list-style-position: inside; diff --git a/src/pages/OldCommon/components/CommonDetailContainer/CreateProposalModal/StageName/index.scss b/src/pages/OldCommon/components/CommonDetailContainer/CreateProposalModal/StageName/index.scss index ebe53c7121..8510faeaa2 100644 --- a/src/pages/OldCommon/components/CommonDetailContainer/CreateProposalModal/StageName/index.scss +++ b/src/pages/OldCommon/components/CommonDetailContainer/CreateProposalModal/StageName/index.scss @@ -15,7 +15,7 @@ box-sizing: border-box; } .create-proposal-stage-name--light-pink { - background-color: $light-red-2; + background-color: var(--secondary-background); } .create-proposal-stage-name--light-yellow { diff --git a/src/pages/OldCommon/components/CommonDetailContainer/CreateProposalModal/index.scss b/src/pages/OldCommon/components/CommonDetailContainer/CreateProposalModal/index.scss index ff86e42eaf..682776a0be 100644 --- a/src/pages/OldCommon/components/CommonDetailContainer/CreateProposalModal/index.scss +++ b/src/pages/OldCommon/components/CommonDetailContainer/CreateProposalModal/index.scss @@ -2,5 +2,4 @@ .create-proposal-modal { font-family: PoppinsSans, sans-serif; - color: $secondary-blue; } diff --git a/src/pages/OldCommon/components/CommonDetailContainer/LeaveCommonModal/MainStep/index.scss b/src/pages/OldCommon/components/CommonDetailContainer/LeaveCommonModal/MainStep/index.scss index 933d4a7c8d..b251f2b4d5 100644 --- a/src/pages/OldCommon/components/CommonDetailContainer/LeaveCommonModal/MainStep/index.scss +++ b/src/pages/OldCommon/components/CommonDetailContainer/LeaveCommonModal/MainStep/index.scss @@ -22,8 +22,8 @@ margin: 0.875rem 0 1.125rem; padding: 1.25rem 1.375rem; font-size: $small; - background-color: $light-gray-11; - border: 1px solid $light-gray-1; + background-color: var(--secondary-background); + border: 1px solid var(--gentle-stroke); border-radius: 0.5rem; list-style-position: inside; diff --git a/src/pages/OldCommon/components/CommonDetailContainer/MembersComponent/index.scss b/src/pages/OldCommon/components/CommonDetailContainer/MembersComponent/index.scss index a76e3d3505..ffb837617b 100644 --- a/src/pages/OldCommon/components/CommonDetailContainer/MembersComponent/index.scss +++ b/src/pages/OldCommon/components/CommonDetailContainer/MembersComponent/index.scss @@ -18,13 +18,13 @@ font-weight: bold; line-height: 1.8rem; letter-spacing: normal; - color: $secondary-blue; + color: var(--primary-text); } .members__common-name { font-size: $small; font-weight: bold; - color: $purple-2; + color: var(--primary-text); margin-top: 0.5rem; } } @@ -126,8 +126,8 @@ justify-content: space-between; align-items: center; padding: 1rem; - background-color: $c-shades-white; - box-shadow: 0 0.1875rem 0.5rem $box-shadow-color; + background-color: var(--primary-background); + box-shadow: 0 0.1875rem 0.5rem var(--drop-shadow); margin-bottom: 1rem; .members__section__common-member-details { @@ -145,7 +145,7 @@ font-style: normal; font-weight: 400; font-size: $xxsmall; - color: var(--secondary-fill); + color: var(--secondary-text); margin-top: 0.1rem; } @@ -155,7 +155,7 @@ font-style: normal; font-weight: 700; font-size: $xsmall; - color: $secondary-blue; + color: var(--primary-text); } } diff --git a/src/pages/OldCommon/components/CommonDetailContainer/TransactionsList/index.scss b/src/pages/OldCommon/components/CommonDetailContainer/TransactionsList/index.scss index e25e60c07e..a00d5d3a20 100644 --- a/src/pages/OldCommon/components/CommonDetailContainer/TransactionsList/index.scss +++ b/src/pages/OldCommon/components/CommonDetailContainer/TransactionsList/index.scss @@ -25,7 +25,7 @@ justify-content: center; align-items: center; width: 100%; - background-color: $white; + background-color: var(--secondary-background); border-radius: 1rem; box-shadow: 0 0.188rem 0.625rem rgba(0, 0, 0, 0.05); @@ -57,7 +57,7 @@ .transaction__time { font-size: $xxsmall; - color: $secondary-blue; + color: var(--primary-text); } } diff --git a/src/pages/OldCommon/containers/CommonDetailContainer/CommonDetailContainer.tsx b/src/pages/OldCommon/containers/CommonDetailContainer/CommonDetailContainer.tsx index 23f8adb176..7be839a2c0 100644 --- a/src/pages/OldCommon/containers/CommonDetailContainer/CommonDetailContainer.tsx +++ b/src/pages/OldCommon/containers/CommonDetailContainer/CommonDetailContainer.tsx @@ -25,6 +25,7 @@ import { useModal, useQueryParams, useIntersectionObserver, + useLightThemeOnly, } from "@/shared/hooks"; import { useCommon, useSubCommons } from "@/shared/hooks/useCases"; import PurpleCheckIcon from "@/shared/icons/purpleCheck.icon"; @@ -150,6 +151,7 @@ export default function CommonDetail(props: CommonDetailProps = {}) { fetchSubCommons, addSubCommon, } = useSubCommons(); + useLightThemeOnly(); const [joinEffortRef, setJoinEffortRef] = useState( null, diff --git a/src/pages/billing/Billing.module.scss b/src/pages/billing/Billing.module.scss index 779c11b95f..a58c2d7b00 100644 --- a/src/pages/billing/Billing.module.scss +++ b/src/pages/billing/Billing.module.scss @@ -6,8 +6,8 @@ max-width: 49.5rem; padding-top: var(--header-h); padding-bottom: 3rem; - border-left: 0.0625rem solid $c-gray-10; - border-right: 0.0625rem solid $c-gray-10; + border-left: 0.0625rem solid var(--gentle-stroke); + border-right: 0.0625rem solid var(--gentle-stroke); @include tablet { padding-top: 0; diff --git a/src/pages/common/components/ChatComponent/ChatComponent.module.scss b/src/pages/common/components/ChatComponent/ChatComponent.module.scss index 002252b7a6..d026dc8057 100644 --- a/src/pages/common/components/ChatComponent/ChatComponent.module.scss +++ b/src/pages/common/components/ChatComponent/ChatComponent.module.scss @@ -7,7 +7,7 @@ flex: 1; width: inherit; height: calc(100% - var(--chat-header-height, 0rem)); - background-color: $white; + background-color: var(--primary-background); box-sizing: border-box; --chat-input-wrapper-height: 3.125rem; } @@ -22,7 +22,8 @@ margin-bottom: var(--chat-input-wrapper-height); @include big-phone { - margin-bottom: 0; + --chat-input-wrapper-height: 2.5rem; + padding: 0.5rem 0.75rem 0 0.5rem; } } @@ -47,8 +48,8 @@ display: flex; flex-shrink: 0; padding: 0 1.125rem; - background-color: $c-input-100; - border: 0.0625rem solid $c-neutrals-100; + background-color: var(--primary-background); + border: 0.0625rem solid var(--gentle-stroke); border-left-width: 0; border-right-width: 0; box-shadow: none; @@ -67,12 +68,12 @@ min-height: 2.625rem; line-height: 1.5rem; border-radius: 1.25rem; - background-color: $light-gray-1; - border: 0.0625rem solid $c-neutrals-200; + background-color: var(--secondary-background); + border: 0.0625rem solid var(--gentle-stroke); outline: none; resize: none; font-size: 0.875rem; - color: $c-neutrals-600; + color: var(--primary-text); box-sizing: border-box; text-align: left; display: flex; @@ -97,6 +98,7 @@ margin-bottom: 0.8rem; margin-right: 0.5rem; height: 1.5rem; + color: var(--primary-text); } .sendIcon { @@ -106,7 +108,7 @@ margin-bottom: 0.8rem; border: none; outline: none; - background: $c-input-100; + background: transparent; &:disabled { cursor: not-allowed; diff --git a/src/pages/common/components/ChatComponent/components/ChatContent/ChatContent.module.scss b/src/pages/common/components/ChatComponent/components/ChatContent/ChatContent.module.scss index 3ec76095c6..432ba247eb 100644 --- a/src/pages/common/components/ChatComponent/components/ChatContent/ChatContent.module.scss +++ b/src/pages/common/components/ChatComponent/components/ChatContent/ChatContent.module.scss @@ -14,7 +14,7 @@ .dateTitle { padding: 0.0625rem 0.1875rem; border-radius: 0.25rem; - background-color: $c-pink-hover-feed-cards; + background-color: var(--secondary-background); font-size: $xxsmall; text-align: center; color: $c-pink-primary; @@ -30,7 +30,8 @@ font-size: $xsmall; line-height: 143%; text-align: left; - background-color: $c-light-gray; + background-color: var(--secondary-background); + color: var(--primary-text); border-radius: 0.9375rem; box-sizing: border-box; } diff --git a/src/pages/common/components/ChatComponent/components/ChatContent/components/Separator/Separator.module.scss b/src/pages/common/components/ChatComponent/components/ChatContent/components/Separator/Separator.module.scss index 5aca715e66..b749219fd8 100644 --- a/src/pages/common/components/ChatComponent/components/ChatContent/components/Separator/Separator.module.scss +++ b/src/pages/common/components/ChatComponent/components/ChatContent/components/Separator/Separator.module.scss @@ -9,7 +9,7 @@ .line { width: 100%; height: 0.0625rem; - background-color: $c-neutrals-200; + background-color: var(--gentle-stroke); } .content { diff --git a/src/pages/common/components/ChatComponent/components/ChatFilePreview/ChatFilePreview.module.scss b/src/pages/common/components/ChatComponent/components/ChatFilePreview/ChatFilePreview.module.scss index 9ffef90ebc..df32237f7c 100644 --- a/src/pages/common/components/ChatComponent/components/ChatFilePreview/ChatFilePreview.module.scss +++ b/src/pages/common/components/ChatComponent/components/ChatFilePreview/ChatFilePreview.module.scss @@ -3,7 +3,7 @@ .container { display: flex; flex-direction: row; - background-color: $c-neutrals-100; + background-color: var(--secondary-background); padding: 0 1rem; } @@ -34,9 +34,10 @@ position: absolute; top: -0.375rem; left: -0.3125rem; - background-color: $white; + background-color: var(--primary-text); + color: var(--primary-background); height: 1.5rem; width: 1.5rem; border-radius: 0.75rem; - border: 0.0625rem solid $c-neutrals-200; + border: 0.0625rem solid var(--gentle-stroke); } diff --git a/src/pages/common/components/ChatComponent/components/MessageReply/MessageReply.module.scss b/src/pages/common/components/ChatComponent/components/MessageReply/MessageReply.module.scss index bea30b1c7b..a73cb951fe 100644 --- a/src/pages/common/components/ChatComponent/components/MessageReply/MessageReply.module.scss +++ b/src/pages/common/components/ChatComponent/components/MessageReply/MessageReply.module.scss @@ -3,10 +3,10 @@ .container { display: flex; flex-direction: row; - background-color: $white; + background-color: var(--primary-background); padding: 0.4375rem 2rem 0.625rem; - border-top: 0.0625rem solid $c-neutrals-100; - border-bottom: 0.0625rem solid $c-neutrals-100; + border-top: 0.0625rem solid var(--gentle-stroke); + border-bottom: 0.0625rem solid var(--gentle-stroke); } .containerEmpty { @@ -18,7 +18,8 @@ flex-direction: row; align-items: flex-start; width: 100%; - background-color: $c-pink-light; + background-color: var(--secondary-fill); + color: var(--primary-text); border-radius: 0.875rem; padding: 0.5rem 0.75rem; } @@ -67,4 +68,5 @@ .closeButton { margin-left: 1.375rem; + color: var(--primary-text); } diff --git a/src/pages/common/components/CommonCard/CommonCard.module.scss b/src/pages/common/components/CommonCard/CommonCard.module.scss index 44af2e6159..6d12cd00c5 100644 --- a/src/pages/common/components/CommonCard/CommonCard.module.scss +++ b/src/pages/common/components/CommonCard/CommonCard.module.scss @@ -6,6 +6,6 @@ } .containerWithCardStyles { padding: 1.125rem 1.25rem; - background-color: $c-shades-white; - box-shadow: 0 0.1875rem 0.5rem #{$c-common-card-shadow}; + background-color: var(--primary-background); + box-shadow: 0 0.1875rem 0.5rem var(--drop-shadow); } diff --git a/src/pages/common/components/CommonManagement/CommonManagement.module.scss b/src/pages/common/components/CommonManagement/CommonManagement.module.scss index cbb77cc01a..cdbc80039b 100644 --- a/src/pages/common/components/CommonManagement/CommonManagement.module.scss +++ b/src/pages/common/components/CommonManagement/CommonManagement.module.scss @@ -5,7 +5,7 @@ margin-top: 1.75rem; display: flex; align-items: center; - border-bottom: 0.0625rem solid #{$c-neutrals-200}; + border-bottom: 0.0625rem solid var(--gentle-stroke); } .tabs { @@ -15,7 +15,7 @@ } .memberInfo { - border-left: 0.0625rem solid #{$c-neutrals-100}; + border-left: 0.0625rem solid var(--gentle-stroke); } .commonMenuButtonContainer { @@ -23,17 +23,16 @@ display: flex; align-items: center; padding-left: 1.875rem; - border-left: 0.0625rem solid #{$c-neutrals-100}; + border-left: 0.0625rem solid var(--gentle-stroke); } .commonMenuButton { padding: 0.625rem; - //background-color: $c-neutrals-100; border-radius: 0.375rem; transition: background-color 0.2s; &:hover { - background-color: var(--gentle-fill); + background-color: var(--hover-fill); } } diff --git a/src/pages/common/components/CommonMemberInfo/components/PopoverButton/PopoverButton.module.scss b/src/pages/common/components/CommonMemberInfo/components/PopoverButton/PopoverButton.module.scss index 07bf21cc39..4f6a6a2cb2 100644 --- a/src/pages/common/components/CommonMemberInfo/components/PopoverButton/PopoverButton.module.scss +++ b/src/pages/common/components/CommonMemberInfo/components/PopoverButton/PopoverButton.module.scss @@ -10,7 +10,7 @@ align-items: center; &:hover { - background-color: $light-gray-11; + background-color: var(--hover-fill); } @include tablet { @@ -44,7 +44,7 @@ font-weight: bold; font-size: $xxsmall-2; line-height: 120%; - color: $c-neutrals-300; + color: var(--primary-text); } .circleNames { @@ -65,7 +65,7 @@ height: 1.5rem; transform: rotate(90deg); transition: all 0.2s; - color: $light-gray-2; + color: var(--primary-text); margin-left: 1rem; @include tablet { diff --git a/src/pages/common/components/CommonMemberInfo/components/PopoverItem/PopoverItem.module.scss b/src/pages/common/components/CommonMemberInfo/components/PopoverItem/PopoverItem.module.scss index 54f7d890c4..c61e222f5f 100644 --- a/src/pages/common/components/CommonMemberInfo/components/PopoverItem/PopoverItem.module.scss +++ b/src/pages/common/components/CommonMemberInfo/components/PopoverItem/PopoverItem.module.scss @@ -1,9 +1,9 @@ @import "../../../../../../constants"; .item { - --item-color: #{$c-neutrals-600}; - --item-bg-color: #{$c-shades-white}; - --item-border: 0.0625rem solid #{$c-neutrals-100}; + --item-color: var(--primary-text); + --item-bg-color: var(--primary-background); + --item-border: 0.0625rem solid var(--gentle-stroke); display: flex; justify-content: space-between; @@ -14,7 +14,7 @@ padding: 1.125rem 1.5rem; text-decoration: none; color: var(--item-color); - background-color: var(--item-bg-color); + background-color: var(--tertiary-fill); border: var(--item-border); border-bottom: 0; font-family: PoppinsSans, sans-serif; @@ -67,7 +67,7 @@ .pendingStatus { font-size: $small; line-height: 1.25rem; - color: $light-gray-2; + color: var(--primary-text); margin: 0; } @@ -75,4 +75,5 @@ margin-top: 1.125rem; max-width: 20.9375rem; z-index: 1; + background-color: var(--primary-background); } diff --git a/src/pages/common/components/CommonMemberInfo/components/PopoverItem/PopoverItem.tsx b/src/pages/common/components/CommonMemberInfo/components/PopoverItem/PopoverItem.tsx index 0bc159aee1..04275c28bd 100644 --- a/src/pages/common/components/CommonMemberInfo/components/PopoverItem/PopoverItem.tsx +++ b/src/pages/common/components/CommonMemberInfo/components/PopoverItem/PopoverItem.tsx @@ -97,7 +97,7 @@ export const PopoverItem: FC = (props) => { return ( diff --git a/src/pages/commonFeed/CommonFeedPage.module.scss b/src/pages/commonFeed/CommonFeedPage.module.scss index 24441d5776..300f9c49c0 100644 --- a/src/pages/commonFeed/CommonFeedPage.module.scss +++ b/src/pages/commonFeed/CommonFeedPage.module.scss @@ -20,7 +20,7 @@ padding: 0 1rem; display: flex; align-items: center; - border-bottom: 0.0625rem solid $c-light-gray; + border-bottom: 0.0625rem solid var(--gentle-stroke); overflow: hidden; box-sizing: border-box; } diff --git a/src/pages/commonFeed/components/FeedLayout/FeedLayout.module.scss b/src/pages/commonFeed/components/FeedLayout/FeedLayout.module.scss index 8a8742305f..c0b8bc96ca 100644 --- a/src/pages/commonFeed/components/FeedLayout/FeedLayout.module.scss +++ b/src/pages/commonFeed/components/FeedLayout/FeedLayout.module.scss @@ -28,13 +28,13 @@ font-weight: 500; font-size: $moderate-xsmall; text-align: center; - color: $c-neutrals-600; + color: var(--primary-text); } .desktopRightPane { right: calc(var(--page-extra-pr) + var(--sb-h-indent)); width: var(--chat-w, 22rem); - border-right: 0.0625rem solid $c-light-gray; + border-right: 0.0625rem solid var(--gentle-stroke); } .feedItemDetailsModal { diff --git a/src/pages/commonFeed/components/FeedLayout/components/DesktopChat/DesktopChat.module.scss b/src/pages/commonFeed/components/FeedLayout/components/DesktopChat/DesktopChat.module.scss index 9f5a8cc971..a105bf5469 100644 --- a/src/pages/commonFeed/components/FeedLayout/components/DesktopChat/DesktopChat.module.scss +++ b/src/pages/commonFeed/components/FeedLayout/components/DesktopChat/DesktopChat.module.scss @@ -10,7 +10,7 @@ display: flex; align-items: center; background-color: $c-light-gray-2; - border-bottom: 0.0625rem solid $c-light-gray; + border-bottom: 0.0625rem solid var(--gentle-stroke); box-sizing: border-box; } diff --git a/src/pages/commonFeed/components/FeedLayout/components/DesktopRightPane/DesktopRightPane.module.scss b/src/pages/commonFeed/components/FeedLayout/components/DesktopRightPane/DesktopRightPane.module.scss index 39fc98a991..f1dd8f6a94 100644 --- a/src/pages/commonFeed/components/FeedLayout/components/DesktopRightPane/DesktopRightPane.module.scss +++ b/src/pages/commonFeed/components/FeedLayout/components/DesktopRightPane/DesktopRightPane.module.scss @@ -6,6 +6,6 @@ right: 0; bottom: 0; z-index: 1; - background-color: $c-shades-white; - border-left: 0.0625rem solid $c-light-gray; + background-color: var(--primary-background); + border-left: 0.0625rem solid var(--gentle-stroke); } diff --git a/src/pages/commonFeed/components/FeedLayout/components/FeedItemPreviewModal/FeedItemPreviewModal.module.scss b/src/pages/commonFeed/components/FeedLayout/components/FeedItemPreviewModal/FeedItemPreviewModal.module.scss index b2c007ead4..c1b52f9561 100644 --- a/src/pages/commonFeed/components/FeedLayout/components/FeedItemPreviewModal/FeedItemPreviewModal.module.scss +++ b/src/pages/commonFeed/components/FeedLayout/components/FeedItemPreviewModal/FeedItemPreviewModal.module.scss @@ -2,7 +2,7 @@ .modal { border-radius: 0; - box-shadow: 0px -5px 4px rgba(0, 0, 0, 0.07); + box-shadow: 0px -5px 4px var(--drop-shadow); .modalWrapper { .modalHeader { @@ -32,6 +32,5 @@ margin: 0; font-weight: 500; font-size: $moderate-med-2; - color: $c-gray-100; word-break: break-word; } diff --git a/src/pages/commonFeed/components/FeedLayout/components/FeedItemPreviewModal/FeedItemPreviewModal.tsx b/src/pages/commonFeed/components/FeedLayout/components/FeedItemPreviewModal/FeedItemPreviewModal.tsx index 5001d0a3ea..1725a65876 100644 --- a/src/pages/commonFeed/components/FeedLayout/components/FeedItemPreviewModal/FeedItemPreviewModal.tsx +++ b/src/pages/commonFeed/components/FeedLayout/components/FeedItemPreviewModal/FeedItemPreviewModal.tsx @@ -3,11 +3,7 @@ import { FeedItem } from "@/pages/common"; import { useChatContext } from "@/pages/common/components/ChatComponent"; import { Modal } from "@/shared/components"; import { useIsTabletView } from "@/shared/hooks/viewport"; -import { - ModalType, - CloseIconVariant, - FeedLayoutItemChangeData, -} from "@/shared/interfaces"; +import { ModalType, FeedLayoutItemChangeData } from "@/shared/interfaces"; import { Circles, CommonFeed } from "@/shared/models"; import styles from "./FeedItemPreviewModal.module.scss"; @@ -68,13 +64,11 @@ const FeedItemPreviewModal: FC = (props) => { modalOverlay: styles.modalOverlay, modalWrapper: styles.modalWrapper, }} - closeIconSize={16} isShowing={ Boolean(isShowFeedItemDetailsModal) && Boolean(selectedFeedItem) } onClose={handleCloseModal} type={ModalType.MobilePopUp} - closeIconVariant={CloseIconVariant.Thin} > {selectedFeedItem && ( <> diff --git a/src/pages/commonFeed/components/FeedLayout/components/FollowFeedItemButton/FollowFeedItemButton.module.scss b/src/pages/commonFeed/components/FeedLayout/components/FollowFeedItemButton/FollowFeedItemButton.module.scss index 0e8b32c95c..10821f0778 100644 --- a/src/pages/commonFeed/components/FeedLayout/components/FollowFeedItemButton/FollowFeedItemButton.module.scss +++ b/src/pages/commonFeed/components/FeedLayout/components/FollowFeedItemButton/FollowFeedItemButton.module.scss @@ -2,7 +2,8 @@ .button { --btn-w: 3rem; - background-color: $c-pink-active-feed-cards-light; + background-color: transparent; + border: none; } .icon { diff --git a/src/pages/commonFeed/components/FeedLayout/components/MobileChat/MobileChat.module.scss b/src/pages/commonFeed/components/FeedLayout/components/MobileChat/MobileChat.module.scss index b326d84cff..6ce2e6b58f 100644 --- a/src/pages/commonFeed/components/FeedLayout/components/MobileChat/MobileChat.module.scss +++ b/src/pages/commonFeed/components/FeedLayout/components/MobileChat/MobileChat.module.scss @@ -1,4 +1,5 @@ @import "../../../../../../constants"; +@import "../../../../../../styles/sizes"; .modal { height: 90vh; @@ -10,6 +11,10 @@ padding: 0; } } + + @include big-phone { + height: 100vh; + } } .headerTitleWrapper { diff --git a/src/pages/commonFeed/components/FeedLayout/components/MobileChat/components/Header/Header.module.scss b/src/pages/commonFeed/components/FeedLayout/components/MobileChat/components/Header/Header.module.scss index d87ac0d04f..32ce57fafa 100644 --- a/src/pages/commonFeed/components/FeedLayout/components/MobileChat/components/Header/Header.module.scss +++ b/src/pages/commonFeed/components/FeedLayout/components/MobileChat/components/Header/Header.module.scss @@ -8,8 +8,8 @@ padding-right: 1.5rem; display: flex; align-items: center; - background-color: $c-shades-white; - border-bottom: 0.0625rem solid $c-light-gray; + background-color: var(--primary-background); + border-bottom: 0.0625rem solid var(--gentle-stroke); box-sizing: border-box; } diff --git a/src/pages/commonFeed/components/FeedLayout/components/ProfileContent/ProfileContent.tsx b/src/pages/commonFeed/components/FeedLayout/components/ProfileContent/ProfileContent.tsx index 3ec8fa6b37..99b64f0d26 100644 --- a/src/pages/commonFeed/components/FeedLayout/components/ProfileContent/ProfileContent.tsx +++ b/src/pages/commonFeed/components/FeedLayout/components/ProfileContent/ProfileContent.tsx @@ -150,7 +150,7 @@ const ProfileContent: FC = (props) => { {country &&

{country.name}

}
{ (async () => { try { const [common, governance, sharedFeedItem] = await Promise.all([ - CommonService.getCommonById(commonId), - GovernanceService.getGovernanceByCommonId(commonId), + CommonService.getCommonById(commonId, true), + GovernanceService.getGovernanceByCommonId(commonId, true), sharedFeedItemId ? CommonFeedService.getCommonFeedItemById( commonId, sharedFeedItemId, + true, ) : null, ]); @@ -69,10 +70,10 @@ export const useCommonData = (userId?: string): Return => { const { rootCommonId } = common; const [parentCommons, subCommons, rootCommonGovernance] = await Promise.all([ - CommonService.getAllParentCommonsForCommon(common), - CommonService.getCommonsByDirectParentIds([common.id]), + CommonService.getAllParentCommonsForCommon(common, true), + CommonService.getCommonsByDirectParentId(common.id, true), rootCommonId - ? GovernanceService.getGovernanceByCommonId(rootCommonId) + ? GovernanceService.getGovernanceByCommonId(rootCommonId, true) : null, ]); const rootCommon = await getRootCommon( diff --git a/src/pages/inbox/components/DirectMessageButton/components/DirectMessageModal/DirectMessageModal.module.scss b/src/pages/inbox/components/DirectMessageButton/components/DirectMessageModal/DirectMessageModal.module.scss index f365f2b61a..cbba965aed 100644 --- a/src/pages/inbox/components/DirectMessageButton/components/DirectMessageModal/DirectMessageModal.module.scss +++ b/src/pages/inbox/components/DirectMessageButton/components/DirectMessageModal/DirectMessageModal.module.scss @@ -6,7 +6,7 @@ width: 100%; max-height: 29.25rem; border-radius: 0; - box-shadow: 0 0.25rem 0.9375rem rgba(0, 0, 0, 0.15259); + box-shadow: 0 0.25rem 0.9375rem var(--drop-shadow); :global(.modal__header-wrapper--with-modal-padding) { .modalHeader { @@ -38,7 +38,7 @@ width: 100%; display: flex; flex-direction: column; - color: $c-neutrals-600; + color: var(--primary-text); } .modalTitle { @@ -66,6 +66,7 @@ padding: 0 1rem; font-size: $mobile-title; text-align: center; + color: var(--primary-text); } .itemList { diff --git a/src/pages/inbox/components/DirectMessageButton/components/DirectMessageModal/components/DirectMessageUserItem/DirectMessageUserItem.module.scss b/src/pages/inbox/components/DirectMessageButton/components/DirectMessageModal/components/DirectMessageUserItem/DirectMessageUserItem.module.scss index 059abd4710..63711d8b9b 100644 --- a/src/pages/inbox/components/DirectMessageButton/components/DirectMessageModal/components/DirectMessageUserItem/DirectMessageUserItem.module.scss +++ b/src/pages/inbox/components/DirectMessageButton/components/DirectMessageModal/components/DirectMessageUserItem/DirectMessageUserItem.module.scss @@ -3,10 +3,10 @@ .container { display: flex; justify-content: space-between; - background-color: $c-shades-white; + background-color: var(--primary-background); &:hover { - background-color: $c-pink-active-btn; + background-color: var(--hover-fill); cursor: pointer; } } @@ -32,7 +32,7 @@ .name { font-weight: 500; font-size: $mobile-title; - color: $c-gray-100; + color: var(--primary-text); } .lastActivity { diff --git a/src/pages/inbox/components/DirectMessageButton/components/DirectMessageModal/components/SearchInput/SearchInput.module.scss b/src/pages/inbox/components/DirectMessageButton/components/DirectMessageModal/components/SearchInput/SearchInput.module.scss index deeb4e4362..d7cc47fc9e 100644 --- a/src/pages/inbox/components/DirectMessageButton/components/DirectMessageModal/components/SearchInput/SearchInput.module.scss +++ b/src/pages/inbox/components/DirectMessageButton/components/DirectMessageModal/components/SearchInput/SearchInput.module.scss @@ -26,9 +26,9 @@ font-size: $moderate-xsmall; font-weight: normal; line-height: 127%; - color: $c-neutrals-600; - background-color: $c-shades-white; - border: 0.0625rem solid $c-neutrals-200; + color: var(--primary-text); + background-color: var(--secondary-background); + border: 0.0625rem solid var(--gentle-stroke); border-radius: 0.25rem; outline: none; box-sizing: border-box; diff --git a/src/pages/inbox/components/FeedItemBaseContent/FeedItemBaseContent.module.scss b/src/pages/inbox/components/FeedItemBaseContent/FeedItemBaseContent.module.scss index 84e20ecf46..10e99bb3be 100644 --- a/src/pages/inbox/components/FeedItemBaseContent/FeedItemBaseContent.module.scss +++ b/src/pages/inbox/components/FeedItemBaseContent/FeedItemBaseContent.module.scss @@ -7,14 +7,14 @@ margin: 0 -1.5rem; padding: 0.875rem 0.875rem 1.0625rem 1.5rem; display: flex; - border-bottom: 0.0625rem solid $c-light-gray; + border-bottom: 0.0625rem solid var(--gentle-stroke); cursor: pointer; user-select: none; &:hover { - background-color: $c-pink-hover-feed-cards; + background-color: var(--hover-fill); .lastMessage { - background-color: $c-pink-hover-feed-cards; + background-color: var(--hover-fill); } .lastMessageActive { background-color: $c-pink-active-feed-cards; @@ -44,7 +44,7 @@ } .containerExpanded { - border: 0.0625rem solid $c-neutrals-200; + border: 0.0625rem solid var(--gentle-stroke); border-bottom: none; } @@ -106,7 +106,7 @@ } .title { - color: $secondary-blue; + color: var(--primary-text); font-size: $moderate-xsmall; line-height: 1.5rem; text-overflow: ellipsis; diff --git a/src/pages/inbox/components/HeaderContent/components/PlusButton/PlusButton.module.scss b/src/pages/inbox/components/HeaderContent/components/PlusButton/PlusButton.module.scss index 5cd45faf8c..7998017df6 100644 --- a/src/pages/inbox/components/HeaderContent/components/PlusButton/PlusButton.module.scss +++ b/src/pages/inbox/components/HeaderContent/components/PlusButton/PlusButton.module.scss @@ -5,14 +5,14 @@ background-color: transparent; &:hover { - background-color: $light-gray-1; + background-color: var(--hover-fill); } } .icon { width: 1rem; height: 1rem; - color: $c-gray-800; + color: inherit; @include tablet { width: 0.875rem; diff --git a/src/pages/inbox/components/InboxFilterButton/InboxFilterButton.module.scss b/src/pages/inbox/components/InboxFilterButton/InboxFilterButton.module.scss index 5f1116d826..5c270bae76 100644 --- a/src/pages/inbox/components/InboxFilterButton/InboxFilterButton.module.scss +++ b/src/pages/inbox/components/InboxFilterButton/InboxFilterButton.module.scss @@ -6,7 +6,7 @@ @media (hover: hover) and (pointer: fine) { &:hover { - background-color: $light-gray-1; + background-color: var(--hover-fill); } } } diff --git a/src/pages/settings/components/Settings/Settings.module.scss b/src/pages/settings/components/Settings/Settings.module.scss index be50aa9287..319c185d3f 100644 --- a/src/pages/settings/components/Settings/Settings.module.scss +++ b/src/pages/settings/components/Settings/Settings.module.scss @@ -4,6 +4,7 @@ .container { position: relative; width: 100%; + color: var(--primary-text); } .content { diff --git a/src/pages/settings/components/Settings/components/Header/Header.module.scss b/src/pages/settings/components/Settings/components/Header/Header.module.scss index 21247df7e5..2990c78277 100644 --- a/src/pages/settings/components/Settings/components/Header/Header.module.scss +++ b/src/pages/settings/components/Settings/components/Header/Header.module.scss @@ -30,7 +30,6 @@ font-weight: 500; font-size: 1rem; text-align: center; - color: $c-gray-100; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; diff --git a/src/services/Chat.ts b/src/services/Chat.ts index b46e3a0284..581fad5d3a 100644 --- a/src/services/Chat.ts +++ b/src/services/Chat.ts @@ -238,8 +238,9 @@ class ChatService { participantId: string; startAt?: Timestamp; endAt?: Timestamp; + onlyWithMessages?: boolean; }): Promise => { - const { participantId, startAt, endAt } = options; + const { participantId, startAt, endAt, onlyWithMessages = false } = options; let query = this.getChatChannelCollection() .where("participants", "array-contains", participantId) .orderBy("updatedAt", "desc"); @@ -252,8 +253,13 @@ class ChatService { } const snapshot = await query.get(); + const chatChannels = snapshot.docs.map((doc) => doc.data()); - return snapshot.docs.map((doc) => doc.data()); + if (!onlyWithMessages) { + return chatChannels; + } + + return chatChannels.filter((chatChannel) => chatChannel.messageCount > 0); }; public subscribeToNewUpdatedChatChannels = ( diff --git a/src/services/Common.ts b/src/services/Common.ts index 50bd9192f5..4ba3541c9a 100644 --- a/src/services/Common.ts +++ b/src/services/Common.ts @@ -17,7 +17,6 @@ import { SubCollections, } from "@/shared/models"; import { - convertObjectDatesToFirestoreTimestamps, emptyFunction, firestoreDataConverter, transformFirebaseDataList, @@ -30,16 +29,25 @@ const converter = firestoreDataConverter(); const commonMemberConverter = firestoreDataConverter(); class CommonService { - public getCommonById = async (commonId: string): Promise => { - const common = await firebase + public getCommonById = async ( + commonId: string, + cached = false, + ): Promise => { + const snapshot = await firebase .firestore() .collection(Collection.Daos) .where("id", "==", commonId) .where("state", "==", CommonState.ACTIVE) - .get(); - const data = transformFirebaseDataList(common); + .withConverter(converter) + .get({ source: cached ? "cache" : "default" }); + const commons = snapshot.docs.map((doc) => doc.data()); + const common = commons[0] || null; + + if (cached && !common) { + return this.getCommonById(commonId); + } - return data[0] ? convertObjectDatesToFirestoreTimestamps(data[0]) : null; + return common; }; public getCachedCommonById = async ( @@ -93,6 +101,26 @@ class CommonService { .reduce((acc, items) => [...acc, ...items], []); }; + public getCommonsByDirectParentId = async ( + parentCommonId: string, + cached = false, + ): Promise => { + const snapshot = await firebase + .firestore() + .collection(Collection.Daos) + .where("state", "==", CommonState.ACTIVE) + .where("directParent.commonId", "==", parentCommonId) + .withConverter(converter) + .get({ source: cached ? "cache" : "default" }); + const commons = snapshot.docs.map((doc) => doc.data()); + + if (cached && commons.length === 0) { + return this.getCommonsByDirectParentId(parentCommonId); + } + + return commons; + }; + public getCommonsByDirectParentIds = async ( ids: string[], ): Promise => { @@ -249,10 +277,11 @@ class CommonService { // Fetch all parent commons. Order: from root parent common to lowest ones public getAllParentCommonsForCommon = async ( commonToCheck: Pick | string, + cached = false, ): Promise => { const common = typeof commonToCheck === "string" - ? await this.getCommonById(commonToCheck) + ? await this.getCommonById(commonToCheck, cached) : commonToCheck; if (!common || common.directParent === null) { @@ -263,7 +292,7 @@ class CommonService { let nextCommonId = common.directParent.commonId; while (nextCommonId) { - const common = await this.getCommonById(nextCommonId); + const common = await this.getCommonById(nextCommonId, cached); if (common) { finalCommons = [common, ...finalCommons]; diff --git a/src/services/CommonFeed.ts b/src/services/CommonFeed.ts index f9920217aa..7ab52352fb 100644 --- a/src/services/CommonFeed.ts +++ b/src/services/CommonFeed.ts @@ -25,7 +25,7 @@ import { convertToTimestamp, firestoreDataConverter, } from "@/shared/utils"; -import firebase from "@/shared/utils/firebase"; +import firebase, { isFirestoreCacheError } from "@/shared/utils/firebase"; import Api, { CancelToken } from "./Api"; const converter = firestoreDataConverter(); @@ -42,12 +42,21 @@ class CommonFeedService { public getCommonFeedItemById = async ( commonId: string, commonFeedId: string, + cached = false, ): Promise => { - const snapshot = await this.getCommonFeedSubCollection(commonId) - .doc(commonFeedId) - .get(); + try { + const snapshot = await this.getCommonFeedSubCollection(commonId) + .doc(commonFeedId) + .get({ source: cached ? "cache" : "default" }); - return snapshot?.data() || null; + return snapshot?.data() || null; + } catch (error) { + if (cached && isFirestoreCacheError(error)) { + return this.getCommonFeedItemById(commonId, commonFeedId); + } else { + throw error; + } + } }; public getCommonFeedItemWithSnapshot = async ( diff --git a/src/services/Discussion.ts b/src/services/Discussion.ts index fc198e4c33..d756bd1735 100644 --- a/src/services/Discussion.ts +++ b/src/services/Discussion.ts @@ -64,7 +64,11 @@ class DiscussionService { const query = this.getDiscussionCollection().doc(discussionId); return query.onSnapshot((snapshot) => { - callback(transformFirebaseDataSingle(snapshot)); + const discussion = snapshot.data(); + + if (discussion) { + callback(discussion); + } }); }; diff --git a/src/services/Governance.ts b/src/services/Governance.ts index 3a1784db95..eb94536183 100644 --- a/src/services/Governance.ts +++ b/src/services/Governance.ts @@ -13,12 +13,20 @@ const converter = firestoreDataConverter(); class GovernanceService { public getGovernanceByCommonId = async ( commonId: string, + cached = false, ): Promise => { - const governanceList = await governanceCollection + const snapshot = await governanceCollection .where("commonId", "==", commonId) - .get(); + .withConverter(converter) + .get({ source: cached ? "cache" : "default" }); + const governanceList = snapshot.docs.map((doc) => doc.data()); + const governance = governanceList[0] || null; - return transformFirebaseDataList(governanceList)[0] || null; + if (cached && !governance) { + return this.getGovernanceByCommonId(commonId); + } + + return governance; }; public getGovernanceListByCommonIds = async ( diff --git a/src/services/PayMeService.ts b/src/services/PayMeService.ts index 6b0a1c02a7..d9a89b82a3 100644 --- a/src/services/PayMeService.ts +++ b/src/services/PayMeService.ts @@ -10,7 +10,7 @@ const axiosClient = axios.create({ }); const endpoints = { - createBuyerTokenPage: `${config.cloudFunctionUrl}/payments/payme/payin/create-buyer-token-page`, + createBuyerTokenPage: `${config.cloudFunctionUrl}/api/payments/payme/payin/create-buyer-token-page`, }; const createBuyerTokenPage = async ( diff --git a/src/shared/components/BackgroundNotification/index.scss b/src/shared/components/BackgroundNotification/index.scss index b698e41655..9f5b4119a4 100644 --- a/src/shared/components/BackgroundNotification/index.scss +++ b/src/shared/components/BackgroundNotification/index.scss @@ -29,7 +29,7 @@ line-height: 1.2; letter-spacing: normal; text-align: center; - color: #000; + color: var(--primary-text); margin-top: 1.5rem; } @@ -42,7 +42,7 @@ display: flex; align-items: center; justify-content: center; - span{ + span { font-size: 0.75rem; font-weight: normal; font-stretch: normal; @@ -50,16 +50,13 @@ line-height: 1.2; letter-spacing: normal; text-align: center; - } &.approved { - background: $light-green; span { color: $green; } - } &.rejected { @@ -68,7 +65,6 @@ span { color: $red; } - } } @@ -77,7 +73,7 @@ object-fit: contain; border-radius: 0.875rem; box-shadow: 0 0.188rem 0.5rem 0 $shadow-2; - background-color: #fff; + background-color: var(--secondary-background); margin-top: 1.5rem; .notification-content, @@ -96,11 +92,11 @@ margin-top: 1.5rem; } } - .notification-actions{ + .notification-actions { margin-top: 1.5rem; text-align: center; - button{ + button { width: 100%; } } @@ -109,8 +105,6 @@ @media only screen and (max-width: $mobile-portrait) { .notification-layout-wrapper { .notification-img-wrapper { - - &.fundingRequestRejected { img { width: 4.5rem; diff --git a/src/shared/components/ButtonIcon/index.scss b/src/shared/components/ButtonIcon/index.scss index 45b6b254e7..4004218657 100644 --- a/src/shared/components/ButtonIcon/index.scss +++ b/src/shared/components/ButtonIcon/index.scss @@ -8,6 +8,7 @@ padding: 0; background: transparent; border: 0; + color: var(--primary-text); &:hover { cursor: pointer; diff --git a/src/shared/components/Chat/ChatMessage/ChatMessage.module.scss b/src/shared/components/Chat/ChatMessage/ChatMessage.module.scss index 0c49ea1085..59b11ede60 100644 --- a/src/shared/components/Chat/ChatMessage/ChatMessage.module.scss +++ b/src/shared/components/Chat/ChatMessage/ChatMessage.module.scss @@ -53,13 +53,13 @@ .messageText { padding: 0.5rem 0rem; border-radius: 0.875rem; - background-color: $c-light-gray; + background-color: var(--secondary-background); flex-direction: row; box-sizing: border-box; position: relative; text-align: start; font-size: $small; - color: $secondary-blue; + color: var(--primary-text); max-width: 33.563rem; margin-right: 2.8rem; @@ -107,15 +107,15 @@ font-size: $xxsmall-2; color: $c-gray-60; direction: ltr; - margin: 0 4.25rem; + margin: 0 1.25rem; } .messageName { font-size: $xsmall; font-weight: 600; - color: $secondary-blue; + color: var(--primary-text); margin-right: 2.5rem; - margin-left: 1rem; + margin-left: 0.75rem; margin-bottom: 0.5rem; cursor: pointer; } @@ -123,8 +123,8 @@ .messageContent { word-wrap: break-word; white-space: pre-line; - margin-right: 1rem; - margin-left: 1rem; + margin-right: 0.75rem; + margin-left: 0.75rem; word-break: break-word; } @@ -135,7 +135,8 @@ .messageContentCurrentUser { color: $white; - margin-right: 2.5rem; + margin-right: 0.75rem; + margin-top: 0.5rem; } .mentionText { @@ -161,7 +162,8 @@ .replyMessageContainer { display: flex; cursor: pointer; - background-color: $c-neutrals-200; + background-color: var(--quaternary-fill); + color: var(--primary-text); border-radius: 0.625rem; padding: 0.5rem 0 0.625rem; margin: 0.25rem; @@ -169,7 +171,7 @@ } .replyMessageContainerCurrentUser { - background-color: $c-pink-light; + background-color: var(--secondary-fill); } .replyMessageImage { @@ -185,14 +187,13 @@ .replyMessageName { font-size: $xxsmall; - color: $c-neutrals-600; font-weight: 600; line-height: 1.25rem; margin-bottom: 0.125rem; } .replyMessageNameCurrentUser { - color: $c-neutrals-600; + color: var(--primary-text); } .replyMessageNameWithImage { @@ -205,7 +206,6 @@ -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; - color: $c-neutrals-600; font-size: $xxsmall; margin-bottom: 0.4rem; line-height: 0.8rem; @@ -213,7 +213,7 @@ } .replyMessageContentCurrentUser { - color: $c-neutrals-600; + color: var(--primary-text); } .replyMessageContentWithImage { diff --git a/src/shared/components/Chat/EditMessageInput/EditMessageInput.module.scss b/src/shared/components/Chat/EditMessageInput/EditMessageInput.module.scss index 73b1191ea5..36cccc3bb5 100644 --- a/src/shared/components/Chat/EditMessageInput/EditMessageInput.module.scss +++ b/src/shared/components/Chat/EditMessageInput/EditMessageInput.module.scss @@ -9,9 +9,9 @@ $phone-breakpoint: 415px; flex-direction: column; box-sizing: border-box; border-radius: 0.875rem; - border: 0.0625rem $light-gray-2 solid; + border: 0.0625rem var(--gentle-stroke) solid; width: 85%; - background-color: $white; + background-color: var(--secondary-background); padding: 0.5rem 1rem; } diff --git a/src/shared/components/DatePicker/index.scss b/src/shared/components/DatePicker/index.scss index 0df709d637..583b34f658 100644 --- a/src/shared/components/DatePicker/index.scss +++ b/src/shared/components/DatePicker/index.scss @@ -9,7 +9,7 @@ $custom-dropdown-vertical-padding: 0.875rem; flex-direction: column; font-family: PoppinsSans, sans-serif; font-weight: normal; - color: $secondary-blue; + color: var(--primary-text); .custom-date-picker__label { margin-bottom: 0.625rem; @@ -70,8 +70,9 @@ $custom-dropdown-vertical-padding: 0.875rem; padding: $custom-dropdown-vertical-padding 1.875rem $custom-dropdown-vertical-padding 0.75rem; border-radius: 3px; - border: 1px solid $light-gray-1; - background-color: $white; + border: 1px solid var(--gentle-stroke); + background-color: var(--secondary-background); + color: var(--primary-text); font-family: inherit; font-size: $xsmall; line-height: 1.42; @@ -88,5 +89,6 @@ $custom-dropdown-vertical-padding: 0.875rem; position: absolute; top: 1rem; right: 0.75rem; + color: var(--primary-text); } } diff --git a/src/shared/components/DeleteModal/DeleteModal.tsx b/src/shared/components/DeleteModal/DeleteModal.tsx index 3e5627348d..53486a488b 100644 --- a/src/shared/components/DeleteModal/DeleteModal.tsx +++ b/src/shared/components/DeleteModal/DeleteModal.tsx @@ -8,8 +8,8 @@ import React, { import { useDispatch } from "react-redux"; import { deleteDiscussionMessage } from "@/pages/OldCommon/store/actions"; import { ChatService } from "@/services"; -import { Loader, Button } from "@/shared/components"; -import { Colors, EntityTypes } from "@/shared/constants"; +import { Loader } from "@/shared/components"; +import { EntityTypes } from "@/shared/constants"; import { useNotification } from "@/shared/hooks"; import { Common, @@ -17,6 +17,7 @@ import { DiscussionMessage, Proposal, } from "@/shared/models"; +import { Button, ButtonVariant } from "@/shared/ui-kit"; import { Modal } from "../Modal"; import "./index.scss"; @@ -128,8 +129,6 @@ const DeleteModal: FC> = (props) => { isShowing={isShowing} onClose={onClose} title="Are you sure?" - closeColor={Colors.black} - closeIconSize={20} styles={{ header: "delete-modal__header", content: "delete-modal__content", @@ -141,6 +140,7 @@ const DeleteModal: FC> = (props) => { disabled={isLoading} className="delete-modal__button-container__button delete-modal__button-container__cancel" onClick={onClose} + variant={ButtonVariant.OutlineDarkPink} > Cancel @@ -148,6 +148,7 @@ const DeleteModal: FC> = (props) => { disabled={isLoading} className="delete-modal__button-container__button delete-modal__button-container__send" onClick={onDelete} + variant={ButtonVariant.PrimaryPink} > {isLoading ? ( diff --git a/src/shared/components/DeleteModal/index.scss b/src/shared/components/DeleteModal/index.scss index d9546fbd67..3123b7c0b0 100644 --- a/src/shared/components/DeleteModal/index.scss +++ b/src/shared/components/DeleteModal/index.scss @@ -21,7 +21,6 @@ .delete-modal__title { font-size: $moderate; - color: $secondary-blue; text-align: center; margin-top: 0; } @@ -42,31 +41,8 @@ .delete-modal__button-container__button { width: 100%; - height: 3rem; - border-radius: 0.5rem; } .delete-modal__button-container__cancel { - background-color: $light-gray-1; - color: $light-gray-2; margin-right: 0.75rem; } - -.delete-modal__button-container__cancel:hover { - background-color: $light-gray-3; -} - -.delete-modal__button-container__send { - background-color: $error; - color: $white; - margin-left: 0.75rem; -} - -.delete-modal__button-container__send:hover { - background-color: $red; -} - -.delete-modal__button-container__send__loader { - height: 1.25rem; - width: 1.25rem; -} diff --git a/src/shared/components/DeletePrompt/index.scss b/src/shared/components/DeletePrompt/index.scss index fbecd3119a..42c249e83b 100644 --- a/src/shared/components/DeletePrompt/index.scss +++ b/src/shared/components/DeletePrompt/index.scss @@ -9,11 +9,13 @@ top: 50%; left: 50%; z-index: 11; - background-color: $white; + background-color: var(--primary-background); align-items: center; - box-shadow: $secondary-modal-shadow; + color: var(--primary-text); border-radius: 30px; padding: 45px; + filter: drop-shadow(0 0.6rem 1.3rem rgba(0, 0, 0, 0.25)); + box-shadow: 0 0.25rem 1rem 0 var(--drop-shadow); .delete-prompt__buttons-wrapper { display: flex; @@ -26,8 +28,8 @@ margin: 0 0.5rem; &.delete { - background-color: $red; - color: $white; + background-color: var(--warning); + color: var(--primary-text); margin-left: 1.5rem; } } diff --git a/src/shared/components/Dropdown/index.scss b/src/shared/components/Dropdown/index.scss index fd92e174eb..209610b463 100644 --- a/src/shared/components/Dropdown/index.scss +++ b/src/shared/components/Dropdown/index.scss @@ -2,7 +2,7 @@ .custom-dropdown-wrapper { position: relative; - color: $secondary-blue; + color: var(--primary-text); font-family: PoppinsSans, sans-serif; font-size: $xsmall; z-index: $dropdown-z-index; @@ -26,8 +26,8 @@ align-items: center; padding: 0.75rem 0.8rem; border-radius: 3px; - border: 1px solid $light-gray-1; - background-color: $white; + border: 1px solid var(--gentle-stroke); + background-color: var(--secondary-background); user-select: none; box-sizing: border-box; @@ -37,7 +37,7 @@ } .custom-dropdown-wrapper__menu-button--disabled { color: $c-gray-30; - border-color: $c-gray-20; + border-color: var(--gentle-stroke); } .custom-dropdown-wrapper__value { @@ -63,8 +63,8 @@ .custom-dropdown-wrapper__menu { position: absolute; width: 100%; - border: 1px solid $light-gray-1; - background-color: $white; + border: 1px solid var(--gentle-stroke); + background-color: var(--tertiary-fill); box-sizing: border-box; &:hover { @@ -104,11 +104,11 @@ transition: all 0.2s; &:hover { - background-color: $light-gray-1; + background-color: var(--secondary-hover-fill); } } .custom-dropdown-wrapper__menu-item--active { - background-color: $light-gray-6; + background-color: var(--secondary-background); } .custom-dropdown-wrapper__global-overlay { diff --git a/src/shared/components/ElementDropdown/index.scss b/src/shared/components/ElementDropdown/index.scss index bbcf3a6f09..8eaeca3cc8 100644 --- a/src/shared/components/ElementDropdown/index.scss +++ b/src/shared/components/ElementDropdown/index.scss @@ -19,7 +19,7 @@ height: 2.5rem; padding: 0.65625rem 1.5rem; font-size: $small; - box-shadow: inset 0 -0.0625rem 0 $c-neutrals-100; + box-shadow: inset 0 -0.0625rem 0 var(--drop-shadow); > :first-child { margin-right: 0.3rem; diff --git a/src/shared/components/Form/Checkbox/index.scss b/src/shared/components/Form/Checkbox/index.scss index 8b1b73aea1..64d23afc35 100644 --- a/src/shared/components/Form/Checkbox/index.scss +++ b/src/shared/components/Form/Checkbox/index.scss @@ -53,7 +53,7 @@ font-family: PoppinsSans, sans-serif; font-size: $xsmall; line-height: 1.42; - color: $secondary-blue; + color: var(--primary-text); cursor: pointer; user-select: none; } diff --git a/src/shared/components/Form/Input/index.scss b/src/shared/components/Form/Input/index.scss index 646545f165..c842037f23 100644 --- a/src/shared/components/Form/Input/index.scss +++ b/src/shared/components/Form/Input/index.scss @@ -7,7 +7,7 @@ $custom-input-vertical-padding: 14px; flex-direction: column; font-family: PoppinsSans, sans-serif; font-weight: normal; - color: $secondary-blue; + color: var(--primary-text); .custom-input__label-wrapper { margin-bottom: 10px; @@ -28,7 +28,7 @@ $custom-input-vertical-padding: 14px; margin-bottom: 8px; font-size: $xxsmall; line-height: 1.42; - color: $light-gray-2; + color: var(--primary-text); } .custom-input__hint { @@ -48,14 +48,14 @@ $custom-input-vertical-padding: 14px; -webkit-appearance: none; -moz-appearance: none; appearance: none; - + color: var(--primary-text); width: 100%; height: 3rem; margin: 0; padding: $custom-input-vertical-padding 12px; border-radius: 3px; - border: solid 1px $light-gray-1; - background-color: $white; + border: solid 1px var(--gentle-stroke); + background-color: var(--secondary-background); font-family: inherit; font-size: $xsmall; line-height: 1.42; @@ -72,7 +72,7 @@ $custom-input-vertical-padding: 14px; height: unset; } .custom-input__input--error { - border-color: $error; + border-color: var(--warning); } .custom-input__input-length { diff --git a/src/shared/components/Form/PhoneInput/CustomSelect/index.scss b/src/shared/components/Form/PhoneInput/CustomSelect/index.scss index e721866d0b..29fbb09909 100644 --- a/src/shared/components/Form/PhoneInput/CustomSelect/index.scss +++ b/src/shared/components/Form/PhoneInput/CustomSelect/index.scss @@ -13,6 +13,7 @@ border-top-left-radius: inherit; border-bottom-left-radius: inherit; background-color: transparent; + color: $black; } .custom-phone-input-custom-select__value { diff --git a/src/shared/components/Form/PhoneInput/index.scss b/src/shared/components/Form/PhoneInput/index.scss index 5c436beedf..03a61151f3 100644 --- a/src/shared/components/Form/PhoneInput/index.scss +++ b/src/shared/components/Form/PhoneInput/index.scss @@ -13,10 +13,10 @@ font-size: $small; font-weight: 600; color: $secondary-blue; - border: 1px solid $light-gray-3; + border: 1px solid var(--gentle-stroke); border-radius: 1.75rem; background-color: $white; - box-shadow: 0 3px 8px 0 $invoice-description-card-shadow; + box-shadow: 0 3px 8px 0 var(--drop-shadow); box-sizing: border-box; } @@ -33,7 +33,7 @@ font-weight: inherit; color: inherit; border: 0; - border-left: 1px solid $light-gray-3; + border-left: 1px solid var(--gentle-stroke); border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: inherit; diff --git a/src/shared/components/Form/RadioButtonGroup/RadioButton/index.scss b/src/shared/components/Form/RadioButtonGroup/RadioButton/index.scss index 8ef6288b40..d32e5bf75b 100644 --- a/src/shared/components/Form/RadioButtonGroup/RadioButton/index.scss +++ b/src/shared/components/Form/RadioButtonGroup/RadioButton/index.scss @@ -8,7 +8,7 @@ $custom-radio-button-border-radius: 1rem; font-size: inherit; text-align: center; margin-right: 1rem; - background-color: green; + accent-color: var(--primary-fill); &:first-child { border-top-left-radius: $custom-radio-button-border-radius; diff --git a/src/shared/components/Form/RadioButtonGroup/index.scss b/src/shared/components/Form/RadioButtonGroup/index.scss index 8e197fa432..72af3f6673 100644 --- a/src/shared/components/Form/RadioButtonGroup/index.scss +++ b/src/shared/components/Form/RadioButtonGroup/index.scss @@ -6,7 +6,6 @@ font-family: PoppinsSans, sans-serif; font-weight: normal; font-size: $xsmall; - color: $secondary-blue; margin-bottom: 1rem; .custom-radio-button-group__label { diff --git a/src/shared/components/Form/Select/Select.tsx b/src/shared/components/Form/Select/Select.tsx index 0bc8720731..51d1629510 100644 --- a/src/shared/components/Form/Select/Select.tsx +++ b/src/shared/components/Form/Select/Select.tsx @@ -1,9 +1,12 @@ import React, { FC } from "react"; +import { useSelector } from "react-redux"; import Select, { components, DropdownIndicatorProps } from "react-select"; import classNames from "classnames"; import { useFormikContext } from "formik"; +import { Theme } from "@/shared/constants/theme"; import { RightArrowThinIcon } from "@/shared/icons"; import { SelectOptionType } from "@/shared/interfaces/Select"; +import { selectTheme } from "@/shared/store/selectors"; import { selectorStyles } from "./selectorStyles"; import styles from "./Select.module.scss"; @@ -39,6 +42,7 @@ const FormSelect: FC = ({ const { values, setFieldValue, handleBlur, touched, errors } = useFormikContext>(); const hasError = Boolean(touched[formName] && errors[formName]); + const theme = useSelector(selectTheme); return (
@@ -54,7 +58,7 @@ const FormSelect: FC = ({ }} onBlur={handleBlur(formName)} hideSelectedOptions={false} - styles={selectorStyles(hasError)} + styles={selectorStyles(hasError, theme === Theme.Dark)} components={{ DropdownIndicator, }} diff --git a/src/shared/components/Form/Select/selectorStyles.ts b/src/shared/components/Form/Select/selectorStyles.ts index 30e329920e..4964459b86 100644 --- a/src/shared/components/Form/Select/selectorStyles.ts +++ b/src/shared/components/Form/Select/selectorStyles.ts @@ -1,16 +1,49 @@ -import { Colors } from "@/shared/constants" +import { Colors } from "@/shared/constants"; -export const selectorStyles = (hasError: boolean) => ({ +export const selectorStyles = (hasError: boolean, isDarkMode: boolean) => ({ menu: (provided) => ({ ...provided, zIndex: 10000 }), menuPortal: (provided) => ({ ...provided, zIndex: 10000 }), + menuList: (provided) => ({ + ...provided, + backgroundColor: isDarkMode ? "#131b23" : "#ffffff", + }), control: (provided) => ({ ...provided, height: "3rem", ...(hasError && { borderColor: Colors.error }), + backgroundColor: isDarkMode ? "#2e3452" : "#f8f8f5", + color: isDarkMode ? "#ffffff" : "#001a36", + borderColor: "rgba(255, 255, 255, 0)", + boxShadow: "rgba(255, 255, 255, 0)", + "&:hover": { + boxShadow: "rgba(255, 255, 255, 0)", + }, }), indicatorSeparator: () => ({ display: "none" }), indicatorsContainer: (provided) => ({ ...provided, - color: `${Colors.black} !important`, + color: isDarkMode ? "#ffffff" : "#001a36", + }), + option: (provided, data) => ({ + ...provided, + backgroundColor: data.isDisabled + ? "transparent" + : isDarkMode + ? "#131b23" + : "#ffffff", + color: isDarkMode ? "#ffffff" : "#001a36", + "&:hover": { + backgroundColor: data.isDisabled + ? "" + : isDarkMode + ? "#2e3452" + : "#fff9fd", + }, + cursor: data.isDisabled ? "not-allowed" : "default", + }), + singleValue: (provided) => ({ + ...provided, + backgroundColor: isDarkMode ? "#2e3452" : "#f8f8f5", + color: isDarkMode ? "#ffffff" : "#001a36", }), -}) \ No newline at end of file +}); diff --git a/src/shared/components/GlobalOverlay/index.scss b/src/shared/components/GlobalOverlay/index.scss index 290c923cb9..d2ed0be345 100644 --- a/src/shared/components/GlobalOverlay/index.scss +++ b/src/shared/components/GlobalOverlay/index.scss @@ -7,4 +7,7 @@ bottom: 0; left: 0; z-index: $global-overlay-z-index; + -webkit-backdrop-filter: blur(0.13rem); + backdrop-filter: blur(0.13rem); + background-color: rgba($black, 0.5); } diff --git a/src/shared/components/HideModal/HideModal.tsx b/src/shared/components/HideModal/HideModal.tsx index da873c3fa2..f384ba999d 100644 --- a/src/shared/components/HideModal/HideModal.tsx +++ b/src/shared/components/HideModal/HideModal.tsx @@ -18,7 +18,7 @@ import { selectCurrentProposal, } from "@/pages/OldCommon/store/selectors"; import { Loader, Button } from "@/shared/components"; -import { Colors, EntityTypes } from "@/shared/constants"; +import { EntityTypes } from "@/shared/constants"; import { useNotification } from "@/shared/hooks"; import { Common, @@ -120,8 +120,6 @@ const HideModal: FC> = (props) => { isShowing={isShowing} onClose={onClose} title="Are you sure?" - closeColor={Colors.black} - closeIconSize={20} styles={{ header: "hide-modal__header", content: "hide-modal__content", diff --git a/src/shared/components/Linkify/index.scss b/src/shared/components/Linkify/index.scss index de74f6f1bd..185d83556c 100644 --- a/src/shared/components/Linkify/index.scss +++ b/src/shared/components/Linkify/index.scss @@ -6,4 +6,8 @@ &:hover { opacity: 0.9; } + + &:visited { + color: $c-pink-mention-2; + } } diff --git a/src/shared/components/MenuButton/index.scss b/src/shared/components/MenuButton/index.scss index 2471b7880c..f6196b359e 100644 --- a/src/shared/components/MenuButton/index.scss +++ b/src/shared/components/MenuButton/index.scss @@ -7,14 +7,14 @@ justify-content: center; align-items: center; border-radius: 50%; - background-color: var(--gentle-fill); + background-color: var(--tertiary-fill); &:hover { - background-color: var(--hover-fill); + background-color: var(--secondary-hover-fill); } &.menu-button--with-border { - border: 1px solid $light-gray-1; + border: 1px solid var(--gentle-stroke); } } diff --git a/src/shared/components/Modal/Modal.tsx b/src/shared/components/Modal/Modal.tsx index 19b6ed0715..5c502c8255 100644 --- a/src/shared/components/Modal/Modal.tsx +++ b/src/shared/components/Modal/Modal.tsx @@ -14,17 +14,10 @@ import React, { import ReactDOM from "react-dom"; import classNames from "classnames"; import { v4 as uuidv4 } from "uuid"; -import { Colors } from "../../constants"; import { useComponentWillUnmount } from "../../hooks"; import Close2Icon from "../../icons/close2.icon"; -import CloseIcon from "../../icons/close.icon"; import LeftArrowIcon from "../../icons/leftArrow.icon"; -import { - CloseIconVariant, - ModalProps, - ModalRef, - ModalType, -} from "../../interfaces"; +import { ModalProps, ModalRef, ModalType } from "../../interfaces"; import { ClosePrompt } from "./components/ClosePrompt"; import { ModalContext, FooterOptions, ModalContextValue } from "./context"; import "./index.scss"; @@ -38,21 +31,19 @@ const Modal: ForwardRefRenderFunction = ( onGoBack, onClose, children, - closeColor, mobileFullScreen, title, onHeaderScrolledToTop, styles, type = ModalType.Default, hideCloseButton = false, - closeIconSize = 24, + closeIconSize = 14, isHeaderSticky = false, shouldShowHeaderShadow = true, closePrompt = false, withoutHorizontalPadding = false, withoutHeader = false, fullHeight = false, - closeIconVariant = CloseIconVariant.Regular, } = props; const contentRef = useRef(null); const [footer, setFooter] = useState(null); @@ -200,15 +191,7 @@ const Modal: ForwardRefRenderFunction = ( )} onClick={handleClose} > - {closeIconVariant === CloseIconVariant.Regular ? ( - - ) : ( - - )} +
)}
diff --git a/src/shared/components/Modal/components/ClosePrompt/ClosePrompt.tsx b/src/shared/components/Modal/components/ClosePrompt/ClosePrompt.tsx index c368ad63b0..8f90c64afe 100644 --- a/src/shared/components/Modal/components/ClosePrompt/ClosePrompt.tsx +++ b/src/shared/components/Modal/components/ClosePrompt/ClosePrompt.tsx @@ -20,7 +20,7 @@ export default function ClosePrompt({ onClose, onContinue }: IProps) { - diff --git a/src/shared/components/Modal/components/ClosePrompt/index.scss b/src/shared/components/Modal/components/ClosePrompt/index.scss index 2360eb5e27..b07252ddb7 100644 --- a/src/shared/components/Modal/components/ClosePrompt/index.scss +++ b/src/shared/components/Modal/components/ClosePrompt/index.scss @@ -14,10 +14,10 @@ flex-direction: column; align-items: center; justify-content: center; - background-color: $white; + background-color: var(--primary-background); margin: auto; border-radius: 12px; - box-shadow: 0 4px 15px 0 $shadow; + box-shadow: 0 4px 15px 0 var(--drop-shadow); padding: 50px; text-align: center; } diff --git a/src/shared/components/Modal/index.scss b/src/shared/components/Modal/index.scss index 8227adb026..460c4daeba 100644 --- a/src/shared/components/Modal/index.scss +++ b/src/shared/components/Modal/index.scss @@ -29,6 +29,7 @@ $modal-mobile-padding: 1.5rem; outline: 0; box-sizing: border-box; backdrop-filter: blur(2px); + color: var(--primary-text); @include big-phone { display: flex; @@ -40,7 +41,7 @@ $modal-mobile-padding: 1.5rem; .modal { display: flex; flex-direction: column; - background-color: $white; + background-color: var(--primary-background); z-index: 100; position: relative; max-width: 900px; @@ -110,7 +111,7 @@ $modal-mobile-padding: 1.5rem; font-weight: bold; line-height: 1; text-align: center; - color: $secondary-blue; + color: var(--primary-text); } .modal__action-wrapper { diff --git a/src/shared/components/NotFound/NotFound.tsx b/src/shared/components/NotFound/NotFound.tsx index f400a5378c..b989cbb18d 100644 --- a/src/shared/components/NotFound/NotFound.tsx +++ b/src/shared/components/NotFound/NotFound.tsx @@ -1,17 +1,24 @@ import React from "react"; import { useHistory } from "react-router-dom"; import { ROUTE_PATHS } from "@/shared/constants"; -import Button from "../Button/Button"; +import { Button, ButtonVariant } from "@/shared/ui-kit"; import "./index.scss"; export default function NotFound() { const history = useHistory(); - + return (
404 -

Woops, the page you’re looking for isn’t there

- +

+ Woops, the page you’re looking for isn’t there +

+
- ) + ); } diff --git a/src/shared/components/NotFound/index.scss b/src/shared/components/NotFound/index.scss index 91865991f1..6c0ce7ace3 100644 --- a/src/shared/components/NotFound/index.scss +++ b/src/shared/components/NotFound/index.scss @@ -7,7 +7,7 @@ flex-direction: column; justify-content: center; align-items: center; - color: $secondary-blue; + color: var(--primary-text); .page-not-found__message { margin: 0 0 0 1.5rem; diff --git a/src/shared/components/PaymentMethod/index.scss b/src/shared/components/PaymentMethod/index.scss index b66c1a841a..d66d2984c3 100644 --- a/src/shared/components/PaymentMethod/index.scss +++ b/src/shared/components/PaymentMethod/index.scss @@ -5,7 +5,7 @@ .payment-method { direction: ltr; width: 100%; - color: $secondary-blue; + color: var(--primary-text); .payment-method__content-wrapper { display: flex; diff --git a/src/shared/components/ReportModal/ReportModal.tsx b/src/shared/components/ReportModal/ReportModal.tsx index 5eb9932d36..31eb26f722 100644 --- a/src/shared/components/ReportModal/ReportModal.tsx +++ b/src/shared/components/ReportModal/ReportModal.tsx @@ -8,8 +8,8 @@ import React, { import { useDispatch } from "react-redux"; import { createReport } from "@/pages/OldCommon/store/actions"; import { subscribeToMessageRefresh } from "@/pages/OldCommon/store/saga"; -import { Loader, Button } from "@/shared/components"; -import { Colors, EntityTypes } from "@/shared/constants"; +import { Loader } from "@/shared/components"; +import { EntityTypes } from "@/shared/constants"; import { useNotification } from "@/shared/hooks"; import { Discussion, @@ -17,6 +17,7 @@ import { Proposal, Common, } from "@/shared/models"; +import { Button, ButtonVariant } from "@/shared/ui-kit"; import { emptyFunction } from "@/shared/utils"; import { Modal } from "../Modal"; import "./index.scss"; @@ -132,8 +133,6 @@ const ReportModal: FC> = (props) => { onClose={isLoading ? emptyFunction : onClose} hideCloseButton={isLoading} title="Report" - closeColor={Colors.black} - closeIconSize={20} styles={{ header: "report-modal__header", content: "report-modal__content", @@ -151,6 +150,7 @@ const ReportModal: FC> = (props) => { disabled={isLoading} className="report-modal__button-container__button report-modal__button-container__cancel" onClick={onClose} + variant={ButtonVariant.OutlineDarkPink} > Cancel @@ -158,6 +158,7 @@ const ReportModal: FC> = (props) => { disabled={isLoading || !message} className="report-modal__button-container__button report-modal__button-container__send" onClick={sendReport} + variant={ButtonVariant.PrimaryPink} > {isLoading ? ( diff --git a/src/shared/components/ReportModal/index.scss b/src/shared/components/ReportModal/index.scss index 51ae5b77e1..16e6bba7c2 100644 --- a/src/shared/components/ReportModal/index.scss +++ b/src/shared/components/ReportModal/index.scss @@ -20,7 +20,8 @@ display: flex; flex: 1; flex-direction: column; - + overflow: hidden; + @media screen and (min-width: $mobile-breakpoint) { padding: 2rem 3rem !important; } @@ -28,7 +29,6 @@ .report-modal__title { font-size: $xsmall; - color: $secondary-blue; } .report-modal__input { @@ -36,8 +36,10 @@ width: 100%; border-width: 0; outline: 0; - border: 0.0625rem $light-gray-3 solid; + border: 0.0625rem var(--gentle-stroke) solid; height: 100%; + background-color: var(--secondary-background); + color: var(--primary-text); } .report-modal__button-container { @@ -54,8 +56,6 @@ } .report-modal__button-container__cancel { - background-color: $light-gray-1; - color: $light-gray-2; margin-right: 0.75rem; } @@ -64,12 +64,10 @@ } .report-modal__button-container__send { - background-color: $purple; - color: $white; margin-left: 0.75rem; } .report-modal__button-container__send__loader { height: 1.25rem; width: 1.25rem; -} \ No newline at end of file +} diff --git a/src/shared/components/ShareModal/ShareModal.tsx b/src/shared/components/ShareModal/ShareModal.tsx index e43574341e..2811daf6cc 100644 --- a/src/shared/components/ShareModal/ShareModal.tsx +++ b/src/shared/components/ShareModal/ShareModal.tsx @@ -3,7 +3,7 @@ import { useTranslation } from "react-i18next"; import classNames from "classnames"; import copyToClipboard from "copy-to-clipboard"; import { ButtonIcon, SocialLinks, Loader } from "@/shared/components"; -import { Colors, ShareViewType } from "@/shared/constants"; +import { ShareViewType } from "@/shared/constants"; import { useNotification } from "@/shared/hooks"; import { useIsTabletView } from "@/shared/hooks/viewport"; import { CopyLinkChainIcon } from "@/shared/icons"; @@ -48,8 +48,6 @@ const ShareModal: FC> = (props) => { isShowing={isShowing} onClose={onClose} title={isTabletView && title} - closeColor={Colors.black} - closeIconSize={isTabletView ? 16 : 20} styles={{ header: "share-modal__wrapper-header", content: isTabletView ? "share-modal__wrapper-content-mobile" : "", diff --git a/src/shared/components/SocialLinks/index.scss b/src/shared/components/SocialLinks/index.scss index 7ec52fac10..0897bcb2a0 100644 --- a/src/shared/components/SocialLinks/index.scss +++ b/src/shared/components/SocialLinks/index.scss @@ -7,7 +7,6 @@ margin: 1.5rem 0; border-radius: 1.875rem; box-shadow: 0 0.25rem 1rem 0 $shadow; - background-color: $white; top: 4rem; right: 10%; @@ -52,7 +51,7 @@ align-items: center; width: 3.5rem; height: 3.5rem; - background-color: $white; + background-color: var(--secondary-background); box-shadow: 0px 6.77778px 25.4167px rgba(0, 0, 0, 0.15259); border-radius: 50%; border: none; diff --git a/src/shared/components/Tabs/Tab/index.scss b/src/shared/components/Tabs/Tab/index.scss index 2f8f6172e3..79475ed58d 100644 --- a/src/shared/components/Tabs/Tab/index.scss +++ b/src/shared/components/Tabs/Tab/index.scss @@ -45,13 +45,13 @@ } } .custom-tab--active { - --tab-bb-color: var(--tab-active-color); - --tab-color: var(--tab-active-color); + --tab-bb-color: var(--secondary-text); + --tab-color: var(--secondary-text); &:active, &:hover { - --tab-bb-color: var(--tab-active-color); - --tab-color: var(--tab-active-color); + --tab-bb-color: var(--secondary-text); + --tab-color: var(--secondary-text); } } .custom-tab--with-icon { diff --git a/src/shared/components/UserInfoPopup/UserInfoPopup.module.scss b/src/shared/components/UserInfoPopup/UserInfoPopup.module.scss index 87edfbbb8b..6eee1f5ef3 100644 --- a/src/shared/components/UserInfoPopup/UserInfoPopup.module.scss +++ b/src/shared/components/UserInfoPopup/UserInfoPopup.module.scss @@ -1,7 +1,6 @@ @import "../../../constants.scss"; .modal { - max-height: 35rem; max-width: 35rem; } diff --git a/src/shared/hooks/index.tsx b/src/shared/hooks/index.tsx index 0133b43f91..305446416c 100644 --- a/src/shared/hooks/index.tsx +++ b/src/shared/hooks/index.tsx @@ -27,3 +27,4 @@ export { useLanguage } from "./useLanguage"; export { useIsMounted } from "./useIsMounted"; export * from "./usePreventReload"; export { default as useImageSizeCheck } from "./useImageSizeCheck"; +export { default as useLightThemeOnly } from "./useLightThemeOnly"; diff --git a/src/shared/hooks/useCases/useFullCommonData/index.ts b/src/shared/hooks/useCases/useFullCommonData/index.ts index 20a85949cb..0e6133a3f9 100644 --- a/src/shared/hooks/useCases/useFullCommonData/index.ts +++ b/src/shared/hooks/useCases/useFullCommonData/index.ts @@ -26,7 +26,7 @@ export const getRootCommon = async ( return initialRootCommon; } - return CommonService.getCommonById(rootCommonId); + return CommonService.getCommonById(rootCommonId, true); }; export const useFullCommonData = (): Return => { diff --git a/src/shared/hooks/useCases/useInboxItems.ts b/src/shared/hooks/useCases/useInboxItems.ts index 82805954d4..5966ae3f4d 100644 --- a/src/shared/hooks/useCases/useInboxItems.ts +++ b/src/shared/hooks/useCases/useInboxItems.ts @@ -125,13 +125,14 @@ export const useInboxItems = ( const inboxItems = useSelector(selectInboxItems); const user = useSelector(selectUser()); const userId = user?.uid; + const unread = options?.unread; const lastBatch = newItemsBatches[0]; const fetch = () => { dispatch( inboxActions.getInboxItems.request({ limit: 15, - unread: options?.unread, + unread, }), ); }; @@ -213,6 +214,7 @@ export const useInboxItems = ( participantId: userId, startAt, endAt, + onlyWithMessages: true, }), FeedItemFollowsService.getFollowFeedItems({ userId, @@ -250,7 +252,7 @@ export const useInboxItems = ( }, []); useEffect(() => { - if (!inboxItems.firstDocTimestamp || !userId) { + if (!inboxItems.firstDocTimestamp || !userId || unread) { return; } @@ -263,10 +265,15 @@ export const useInboxItems = ( ); return unsubscribe; - }, [inboxItems.firstDocTimestamp, userId, feedItemIdsForNotListening]); + }, [ + inboxItems.firstDocTimestamp, + userId, + feedItemIdsForNotListening, + unread, + ]); useEffect(() => { - if (!inboxItems.firstDocTimestamp || !userId) { + if (!inboxItems.firstDocTimestamp || !userId || unread) { return; } @@ -280,7 +287,12 @@ export const useInboxItems = ( ); return unsubscribe; - }, [inboxItems.firstDocTimestamp, userId, feedItemIdsForNotListening]); + }, [ + inboxItems.firstDocTimestamp, + userId, + feedItemIdsForNotListening, + unread, + ]); useEffect(() => { if (!lastBatch) { diff --git a/src/shared/hooks/useLightThemeOnly.tsx b/src/shared/hooks/useLightThemeOnly.tsx new file mode 100644 index 0000000000..780db2158e --- /dev/null +++ b/src/shared/hooks/useLightThemeOnly.tsx @@ -0,0 +1,18 @@ +import { useEffect } from "react"; +import { useDispatch, useSelector } from "react-redux"; +import { Theme } from "../constants"; +import { toggleTheme } from "../store/actions"; +import { selectTheme } from "../store/selectors"; + +const useLightThemeOnly = () => { + const dispatch = useDispatch(); + const theme = useSelector(selectTheme); + + useEffect(() => { + if (theme === Theme.Dark) { + dispatch(toggleTheme(Theme.Light)); + } + }, [theme, dispatch]); +}; + +export default useLightThemeOnly; diff --git a/src/shared/icons/copy.icon.tsx b/src/shared/icons/copy.icon.tsx index 6d07a03261..da702bcd61 100644 --- a/src/shared/icons/copy.icon.tsx +++ b/src/shared/icons/copy.icon.tsx @@ -5,6 +5,8 @@ interface CopyIconProps { } export default function CopyIcon({ className }: CopyIconProps): ReactElement { + const color = "currentColor"; + return ( = ({ className }) => { + const color = "currentColor"; + + return ( + + + + ); +}; + +export default ThemeIcon; diff --git a/src/shared/interfaces/ModalProps.tsx b/src/shared/interfaces/ModalProps.tsx index 5d02c98d8f..5f09737534 100644 --- a/src/shared/interfaces/ModalProps.tsx +++ b/src/shared/interfaces/ModalProps.tsx @@ -1,28 +1,20 @@ import React, { ReactNode } from "react"; -import { Colors } from "../constants"; export enum ModalType { Default, MobilePopUp, } -export enum CloseIconVariant { - Regular = "regular", - Thin = "thin", -} - export interface ModalProps { isShowing: boolean; type?: ModalType; onGoBack?: () => void; onClose: () => void; children: React.ReactNode; - closeColor?: Colors; className?: string; mobileFullScreen?: boolean; title?: ReactNode; hideCloseButton?: boolean; - closeIconVariant?: CloseIconVariant; closeIconSize?: number; isHeaderSticky?: boolean; shouldShowHeaderShadow?: boolean; diff --git a/src/shared/layouts/CommonSidenavLayout/CommonSidenavLayout.module.scss b/src/shared/layouts/CommonSidenavLayout/CommonSidenavLayout.module.scss index a9bab75222..23b4c9cdf1 100644 --- a/src/shared/layouts/CommonSidenavLayout/CommonSidenavLayout.module.scss +++ b/src/shared/layouts/CommonSidenavLayout/CommonSidenavLayout.module.scss @@ -14,7 +14,7 @@ --sb-transition-duration: 0.6s; --page-bg-color: #{$c-shades-white}; --scroll-bg-color: #{$c-shades-white}; - --scroll-thumb-color: var(--gentle-gray); + --scroll-thumb-color: var(--gentle-stroke); --layout-tabs-height: 0rem; min-height: 100vh; @@ -43,8 +43,8 @@ } .sidenavContentWrapper { - border-left: 0.0625rem solid $c-light-gray; - border-right: 0.0625rem solid $c-light-gray; + border-left: 0.0625rem solid var(--gentle-stroke); + border-right: 0.0625rem solid var(--gentle-stroke); @include tablet { border: 0; diff --git a/src/shared/layouts/CommonSidenavLayout/CommonSidenavLayout.tsx b/src/shared/layouts/CommonSidenavLayout/CommonSidenavLayout.tsx index 483fc22062..56d7c9d14d 100644 --- a/src/shared/layouts/CommonSidenavLayout/CommonSidenavLayout.tsx +++ b/src/shared/layouts/CommonSidenavLayout/CommonSidenavLayout.tsx @@ -6,7 +6,7 @@ import { useLayoutRouteContext, } from "@/pages/App/router"; import { RoutesV04Provider } from "@/shared/contexts"; -import { useLockedBody } from "@/shared/hooks"; +import { useLightThemeOnly, useLockedBody } from "@/shared/hooks"; import { Sidenav } from "@/shared/ui-kit"; import { checkSidenavVisibility } from "../SidenavLayout/utils"; import { SidenavContent } from "./components"; @@ -18,6 +18,7 @@ const CommonSidenavLayout: FC = (props) => { const { routeOptions = {} } = useLayoutRouteContext(); const isSidenavVisible = checkSidenavVisibility(routeOptions.sidenav); + useLightThemeOnly(); const { width } = useWindowSize(); const { lockBodyScroll, unlockBodyScroll } = useLockedBody(); const sidenavLeft = getSidenavLeft(width); diff --git a/src/shared/layouts/CommonSidenavLayout/components/LayoutTabs/LayoutTabs.module.scss b/src/shared/layouts/CommonSidenavLayout/components/LayoutTabs/LayoutTabs.module.scss index ce7a16972d..c5d5d0a273 100644 --- a/src/shared/layouts/CommonSidenavLayout/components/LayoutTabs/LayoutTabs.module.scss +++ b/src/shared/layouts/CommonSidenavLayout/components/LayoutTabs/LayoutTabs.module.scss @@ -7,8 +7,8 @@ height: var(--layout-tabs-height, 4rem); display: none; grid-template-columns: repeat(var(--items-amount, 3), minmax(0, 1fr)); - background-color: $c-shades-white; - border-top: 0.0625rem solid $c-neutrals-100; + background-color: var(--secondary-background); + border-top: 0.0625rem solid var(--gentle-stroke); white-space: nowrap; @include tablet { @@ -22,7 +22,7 @@ --tab-fw: 600; --tab-fs: #{$small}; --tab-inactive-color: #{$c-neutrals-300}; - --tab-inactive-hover-color: #{$c-pink-primary}; + --tab-inactive-hover-color: var(--hover-fill); --tab-active-color: #{$c-pink-primary}; @include tablet { diff --git a/src/shared/layouts/CommonSidenavLayout/components/PageContent/PageContent.module.scss b/src/shared/layouts/CommonSidenavLayout/components/PageContent/PageContent.module.scss index 53e4ed9327..36cc42d20f 100644 --- a/src/shared/layouts/CommonSidenavLayout/components/PageContent/PageContent.module.scss +++ b/src/shared/layouts/CommonSidenavLayout/components/PageContent/PageContent.module.scss @@ -12,7 +12,7 @@ padding-top: var(--header-h); display: flex; flex-direction: column; - border-right: 0.0625rem solid $c-light-gray; + border-right: 0.0625rem solid var(--gentle-stroke); @include tablet { border: 0; @@ -34,8 +34,8 @@ z-index: 2; height: var(--header-h); background-color: $c-light-gray-2; - border-right: 0.0625rem solid $c-light-gray; - border-bottom: 0.0625rem solid $c-light-gray; + border-right: 0.0625rem solid var(--gentle-stroke); + border-bottom: 0.0625rem solid var(--gentle-stroke); box-sizing: border-box; @include tablet { diff --git a/src/shared/layouts/CommonSidenavLayout/components/SidenavContent/SidenavContent.tsx b/src/shared/layouts/CommonSidenavLayout/components/SidenavContent/SidenavContent.tsx index c8c2609f1a..f4cf2ab24c 100644 --- a/src/shared/layouts/CommonSidenavLayout/components/SidenavContent/SidenavContent.tsx +++ b/src/shared/layouts/CommonSidenavLayout/components/SidenavContent/SidenavContent.tsx @@ -7,7 +7,7 @@ import { ButtonIcon } from "@/shared/components"; import { useIsTabletView } from "@/shared/hooks/viewport"; import { Close2Icon } from "@/shared/icons"; import { CommonLogo } from "@/shared/ui-kit"; -import { getUserName } from "@/shared/utils"; +import { closeSidenav, getUserName } from "@/shared/utils"; import { ContentStyles, MenuItemsPlacement, @@ -19,11 +19,10 @@ import styles from "./SidenavContent.module.scss"; interface SidenavContentProps { className?: string; - onClose?: () => void; } const SidenavContent: FC = (props) => { - const { className, onClose } = props; + const { className } = props; const isAuthenticated = useSelector(authentificated()); const user = useSelector(selectUser()); const isTabletView = useIsTabletView(); @@ -43,7 +42,7 @@ const SidenavContent: FC = (props) => { logoSrc={commonLogoSrc} /> {isTabletView && ( - + )} diff --git a/src/shared/layouts/CommonSidenavLayout/components/SidenavContent/components/CommonDropdown/components/DesktopCommonDropdown/DesktopCommonDropdown.module.scss b/src/shared/layouts/CommonSidenavLayout/components/SidenavContent/components/CommonDropdown/components/DesktopCommonDropdown/DesktopCommonDropdown.module.scss index 72a53b7291..c5a8625856 100644 --- a/src/shared/layouts/CommonSidenavLayout/components/SidenavContent/components/CommonDropdown/components/DesktopCommonDropdown/DesktopCommonDropdown.module.scss +++ b/src/shared/layouts/CommonSidenavLayout/components/SidenavContent/components/CommonDropdown/components/DesktopCommonDropdown/DesktopCommonDropdown.module.scss @@ -14,7 +14,7 @@ } .iconActive { - color: $white; + color: var(--primary-text); } .changeLabel { @@ -46,7 +46,7 @@ } .menuItemActive { - --item-bg-color: #{$c-pink-hover-feed-cards}; + --item-bg-color: var(--secondary-hover-fill); } .menuItemText { diff --git a/src/shared/layouts/CommonSidenavLayout/components/SidenavContent/components/Navigation/components/NavigationItem/NavigationItem.module.scss b/src/shared/layouts/CommonSidenavLayout/components/SidenavContent/components/Navigation/components/NavigationItem/NavigationItem.module.scss index 8f319ca784..c7c385de66 100644 --- a/src/shared/layouts/CommonSidenavLayout/components/SidenavContent/components/Navigation/components/NavigationItem/NavigationItem.module.scss +++ b/src/shared/layouts/CommonSidenavLayout/components/SidenavContent/components/Navigation/components/NavigationItem/NavigationItem.module.scss @@ -25,7 +25,7 @@ --item-bg-color: #{$c-pink-active-feed-cards}; &:hover { - --item-bg-color: var(--hover-fill); + --item-bg-color: var(--secondary-hover-fill); } } .itemDisabled { diff --git a/src/shared/layouts/CommonSidenavLayout/components/SidenavContent/components/Projects/Projects.module.scss b/src/shared/layouts/CommonSidenavLayout/components/SidenavContent/components/Projects/Projects.module.scss index c54856fec8..c8248c9afd 100644 --- a/src/shared/layouts/CommonSidenavLayout/components/SidenavContent/components/Projects/Projects.module.scss +++ b/src/shared/layouts/CommonSidenavLayout/components/SidenavContent/components/Projects/Projects.module.scss @@ -13,14 +13,13 @@ border-radius: 0; &:hover { - --bg-color: #{$c-pink-hover-feed-cards}; + --bg-color: #{var(--hover-fill)}; } } .projectsTreeItemTriggerActiveClassName { - --bg-color: #{$c-pink-active-feed-cards}; - color: $white; + --bg-color: #{var(--secondary-background)}; &:hover { - --bg-color: #{$c-pink-active-feed-cards}; + --bg-color: #{var(--hover-fill)}; } } diff --git a/src/shared/layouts/CommonSidenavLayout/components/SidenavContent/components/ProjectsTree/ProjectsTree.module.scss b/src/shared/layouts/CommonSidenavLayout/components/SidenavContent/components/ProjectsTree/ProjectsTree.module.scss index ec0e719d37..552e536d64 100644 --- a/src/shared/layouts/CommonSidenavLayout/components/SidenavContent/components/ProjectsTree/ProjectsTree.module.scss +++ b/src/shared/layouts/CommonSidenavLayout/components/SidenavContent/components/ProjectsTree/ProjectsTree.module.scss @@ -2,7 +2,7 @@ .parentItem { flex-shrink: 0; - border-bottom: 0.06rem solid $c-light-gray; + border-bottom: 0.06rem solid var(--gentle-stroke); } .parentItemTrigger { diff --git a/src/shared/layouts/MultipleSpacesLayout/MultipleSpacesLayout.module.scss b/src/shared/layouts/MultipleSpacesLayout/MultipleSpacesLayout.module.scss index 7ab633234d..1f259c1b07 100644 --- a/src/shared/layouts/MultipleSpacesLayout/MultipleSpacesLayout.module.scss +++ b/src/shared/layouts/MultipleSpacesLayout/MultipleSpacesLayout.module.scss @@ -12,7 +12,7 @@ --sb-bg-color: #{$c-shades-white}; --sb-easing: cubic-bezier(0.16, 1, 0.3, 1); --sb-transition-duration: 0.6s; - --page-bg-color: #{$c-shades-white}; + --page-bg-color: var(--primary-background); --scroll-bg-color: #{$c-shades-white}; --scroll-thumb-color: #{$c-neutrals-200}; --layout-tabs-height: 0rem; @@ -49,7 +49,7 @@ } .sidenavContentWrapper { - border-right: 0.25rem solid $c-light-gray-2; + border-right: 0.25rem solid var(--gentle-stroke); @include tablet { border: 0; @@ -67,7 +67,7 @@ padding-left: var(--main-pl); display: flex; flex-direction: column; - background-color: var(--page-bg-color); + background-color: var(--primary-background); box-sizing: border-box; } diff --git a/src/shared/layouts/MultipleSpacesLayout/components/Header/Header.module.scss b/src/shared/layouts/MultipleSpacesLayout/components/Header/Header.module.scss index 2aa9e2df5e..fb37129fb9 100644 --- a/src/shared/layouts/MultipleSpacesLayout/components/Header/Header.module.scss +++ b/src/shared/layouts/MultipleSpacesLayout/components/Header/Header.module.scss @@ -12,7 +12,7 @@ display: flex; justify-content: space-between; align-items: center; - background-color: $c-light-gray-2; + background-color: var(--secondary-background); box-sizing: border-box; } @@ -32,6 +32,7 @@ align-items: center; font-family: PoppinsSans, sans-serif; font-size: 1rem; + color: var(--primary-text); &:hover { text-decoration: underline; diff --git a/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/BreadcrumbsItem/BreadcrumbsItem.module.scss b/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/BreadcrumbsItem/BreadcrumbsItem.module.scss index a443abb22e..90e53e79cb 100644 --- a/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/BreadcrumbsItem/BreadcrumbsItem.module.scss +++ b/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/BreadcrumbsItem/BreadcrumbsItem.module.scss @@ -23,7 +23,7 @@ box-sizing: border-box; &:hover { - --breadcrumbs-color: #{$c-shades-black}; + --breadcrumbs-color: #{var(--primary-text)}; --breadcrumbs-bg-color: #{$c-gray-20}; } } diff --git a/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/BreadcrumbsMenu/BreadcrumbsMenu.module.scss b/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/BreadcrumbsMenu/BreadcrumbsMenu.module.scss index b46112c50a..2d3a3f9d52 100644 --- a/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/BreadcrumbsMenu/BreadcrumbsMenu.module.scss +++ b/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/BreadcrumbsMenu/BreadcrumbsMenu.module.scss @@ -1,16 +1,14 @@ @import "../../../../../../../../../constants"; .contextMenuList { - --items-br: 0; - width: 16.25rem; max-height: 23.625rem; overflow-y: auto; + background-color: var((--primary-background)); + border-radius: var(--items-br); } .contextMenuItem { - --item-border: 0; - padding: 1rem 1.375rem 1rem 0.75rem; display: flex; align-items: center; diff --git a/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/LoadingBreadcrumbsItem/LoadingBreadcrumbsItem.tsx b/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/LoadingBreadcrumbsItem/LoadingBreadcrumbsItem.tsx index d796cc82f3..283e9a6156 100644 --- a/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/LoadingBreadcrumbsItem/LoadingBreadcrumbsItem.tsx +++ b/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/LoadingBreadcrumbsItem/LoadingBreadcrumbsItem.tsx @@ -1,24 +1,34 @@ import React, { FC } from "react"; import ContentLoader from "react-content-loader"; +import { useSelector } from "react-redux"; +import { Theme } from "@/shared/constants"; +import { selectTheme } from "@/shared/store/selectors"; import { Separator } from "../Separator"; import styles from "./LoadingBreadcrumbsItem.module.scss"; -const LoadingBreadcrumbsItem: FC = (props) => ( -
  • - - - - - -
    • -); +const LoadingBreadcrumbsItem: FC = (props) => { + const theme = useSelector(selectTheme); + + const backgroundColor = theme === Theme.Light ? "#f3f3f3" : "#1f2535"; + const foregroundColor = theme === Theme.Light ? "#ecebeb" : "#2e3452"; + + return ( +
  • + + + + + +
    • + ); +}; export default LoadingBreadcrumbsItem; diff --git a/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Navigation/components/NavigationItem/NavigationItem.module.scss b/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Navigation/components/NavigationItem/NavigationItem.module.scss index 1c777e04af..e8d2e3d0c4 100644 --- a/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Navigation/components/NavigationItem/NavigationItem.module.scss +++ b/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Navigation/components/NavigationItem/NavigationItem.module.scss @@ -20,7 +20,7 @@ cursor: pointer; &:hover { - --item-color: #{$c-shades-black}; + --item-color: #{var(--primary-text)}; } } .itemActive { diff --git a/src/shared/layouts/MultipleSpacesLayout/components/PageContent/PageContent.module.scss b/src/shared/layouts/MultipleSpacesLayout/components/PageContent/PageContent.module.scss index 8dfc91fbc6..bea0a11f65 100644 --- a/src/shared/layouts/MultipleSpacesLayout/components/PageContent/PageContent.module.scss +++ b/src/shared/layouts/MultipleSpacesLayout/components/PageContent/PageContent.module.scss @@ -33,9 +33,10 @@ left: var(--main-pl); z-index: 2; height: var(--page-content-header); - background-color: $c-shades-white; - border-bottom: 0.0625rem solid $c-light-gray; + background-color: var(--primary-background); + border-bottom: 0.0625rem solid var(--gentle-stroke); box-sizing: border-box; + color: var(--primary-text); @include tablet { top: 0; diff --git a/src/shared/layouts/MultipleSpacesLayout/components/SidenavContent/SidenavContent.module.scss b/src/shared/layouts/MultipleSpacesLayout/components/SidenavContent/SidenavContent.module.scss index 20ecdbc718..e36860d345 100644 --- a/src/shared/layouts/MultipleSpacesLayout/components/SidenavContent/SidenavContent.module.scss +++ b/src/shared/layouts/MultipleSpacesLayout/components/SidenavContent/SidenavContent.module.scss @@ -11,6 +11,7 @@ .closeIconWrapper { margin-left: auto; padding: 1.25rem 1.5rem; + color: var(--primary-text); } .noCommonsInfoContainer { diff --git a/src/shared/layouts/SidenavLayout/SidenavLayout.module.scss b/src/shared/layouts/SidenavLayout/SidenavLayout.module.scss index 9703f38da0..014271ce7f 100644 --- a/src/shared/layouts/SidenavLayout/SidenavLayout.module.scss +++ b/src/shared/layouts/SidenavLayout/SidenavLayout.module.scss @@ -14,7 +14,7 @@ --sb-transition-duration: 0.6s; --page-bg-color: #{$c-shades-100}; --scroll-bg-color: #{$c-shades-white}; - --scroll-thumb-color: var(--gentle-gray); + --scroll-thumb-color: var(--gentle-stroke); min-height: 100vh; height: 100%; diff --git a/src/shared/layouts/SidenavLayout/SidenavLayout.tsx b/src/shared/layouts/SidenavLayout/SidenavLayout.tsx index 38087e4748..52be0c0aa3 100644 --- a/src/shared/layouts/SidenavLayout/SidenavLayout.tsx +++ b/src/shared/layouts/SidenavLayout/SidenavLayout.tsx @@ -5,7 +5,7 @@ import { useLayoutRouteContext, } from "@/pages/App/router"; import { RoutesV03Provider } from "@/shared/contexts"; -import { useLockedBody } from "@/shared/hooks"; +import { useLightThemeOnly, useLockedBody } from "@/shared/hooks"; import { Sidenav } from "@/shared/ui-kit"; import { SidenavContent } from "./components"; import { checkSidenavVisibility } from "./utils"; @@ -17,6 +17,7 @@ const SidenavLayout: FC = (props) => { useLayoutRouteContext(); const isSidenavVisible = checkSidenavVisibility(routeOptions.sidenav); const { lockBodyScroll, unlockBodyScroll } = useLockedBody(); + useLightThemeOnly(); const handleSidenavOpenToggle = useCallback( (isOpen: boolean) => { diff --git a/src/shared/layouts/SidenavLayout/components/SidenavContent/components/ProjectsTree/components/PlaceholderTreeItem/PlaceholderTreeItem.module.scss b/src/shared/layouts/SidenavLayout/components/SidenavContent/components/ProjectsTree/components/PlaceholderTreeItem/PlaceholderTreeItem.module.scss index 36c21583b0..e86213f395 100644 --- a/src/shared/layouts/SidenavLayout/components/SidenavContent/components/ProjectsTree/components/PlaceholderTreeItem/PlaceholderTreeItem.module.scss +++ b/src/shared/layouts/SidenavLayout/components/SidenavContent/components/ProjectsTree/components/PlaceholderTreeItem/PlaceholderTreeItem.module.scss @@ -15,3 +15,7 @@ margin-right: var(--item-image-mr); color: var(--item-text-color); } + +.text { + color: $c-pink-primary; +} diff --git a/src/shared/layouts/SidenavLayout/components/SidenavContent/components/ProjectsTree/components/PlaceholderTreeItem/PlaceholderTreeItem.tsx b/src/shared/layouts/SidenavLayout/components/SidenavContent/components/ProjectsTree/components/PlaceholderTreeItem/PlaceholderTreeItem.tsx index fe6882c9c8..ef13e973d0 100644 --- a/src/shared/layouts/SidenavLayout/components/SidenavContent/components/ProjectsTree/components/PlaceholderTreeItem/PlaceholderTreeItem.tsx +++ b/src/shared/layouts/SidenavLayout/components/SidenavContent/components/ProjectsTree/components/PlaceholderTreeItem/PlaceholderTreeItem.tsx @@ -79,6 +79,7 @@ const PlaceholderTreeItem: FC = (props) => { className={classNames( treeItemTriggerStyles.name, treeItemTriggerStylesFromContext?.name, + styles.text, )} title={name} > diff --git a/src/shared/layouts/SidenavLayout/components/SidenavContent/components/ProjectsTree/components/TreeItemTrigger/TreeItemTrigger.module.scss b/src/shared/layouts/SidenavLayout/components/SidenavContent/components/ProjectsTree/components/TreeItemTrigger/TreeItemTrigger.module.scss index 933ca60aa0..4ff097ff33 100644 --- a/src/shared/layouts/SidenavLayout/components/SidenavContent/components/ProjectsTree/components/TreeItemTrigger/TreeItemTrigger.module.scss +++ b/src/shared/layouts/SidenavLayout/components/SidenavContent/components/ProjectsTree/components/TreeItemTrigger/TreeItemTrigger.module.scss @@ -1,11 +1,11 @@ @import "../../../../../../../../../constants"; .item { - --bg-color: #{$c-shades-white}; + --bg-color: --var(--primary-background); --item-pl-per-level: 1.125rem; --item-arrow-pl: var(--item-pl-per-level); --item-image-mr: 0.5rem; - --item-text-color: #{$c-neutrals-600}; + --item-text-color: var(--primary-text); height: 2.75rem; padding-left: calc(var(--item-pl-per-level) * (var(--tree-level, 1) - 1)); @@ -20,7 +20,7 @@ overflow: hidden; &:hover { - --bg-color: #{$c-primary-100}; + --bg-color: var(--secondary-hover-fill); } } .itemActive { @@ -28,7 +28,7 @@ --item-text-color: #{$white}; &:hover { - --bg-color: var(--hover-fill); + --bg-color: var(--secondary-hover-fill); } } .itemWithoutMembership { @@ -71,7 +71,7 @@ font-family: PoppinsSans, sans-serif; font-weight: 600; font-size: $small; - color: var(--item-text-color); + color: var(--primary-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; diff --git a/src/shared/layouts/SidenavLayout/components/SidenavContent/components/Scrollbar/Scrollbar.module.scss b/src/shared/layouts/SidenavLayout/components/SidenavContent/components/Scrollbar/Scrollbar.module.scss index 42bced7dd3..0c33878853 100644 --- a/src/shared/layouts/SidenavLayout/components/SidenavContent/components/Scrollbar/Scrollbar.module.scss +++ b/src/shared/layouts/SidenavLayout/components/SidenavContent/components/Scrollbar/Scrollbar.module.scss @@ -35,6 +35,6 @@ --scroll-thumb-color: #{$c-neutrals-300}; } &:hover { - --scroll-thumb-color: var(--medium-gray); + --scroll-thumb-color: $c-gray-20; } } diff --git a/src/shared/layouts/SidenavLayout/components/SidenavContent/components/UserInfo/components/AuthenticatedContent/AuthenticatedContent.module.scss b/src/shared/layouts/SidenavLayout/components/SidenavContent/components/UserInfo/components/AuthenticatedContent/AuthenticatedContent.module.scss index fef1a1a2ac..6c11999b90 100644 --- a/src/shared/layouts/SidenavLayout/components/SidenavContent/components/UserInfo/components/AuthenticatedContent/AuthenticatedContent.module.scss +++ b/src/shared/layouts/SidenavLayout/components/SidenavContent/components/UserInfo/components/AuthenticatedContent/AuthenticatedContent.module.scss @@ -3,7 +3,6 @@ .arrowIcon { margin-left: 1.5rem; transform: rotate(90deg); - color: $c-shades-black; } .menuTransitionEnter { diff --git a/src/shared/layouts/SidenavLayout/components/SidenavContent/components/UserInfo/components/Content/Content.module.scss b/src/shared/layouts/SidenavLayout/components/SidenavContent/components/UserInfo/components/Content/Content.module.scss index 25f0ac0522..5bfca6115a 100644 --- a/src/shared/layouts/SidenavLayout/components/SidenavContent/components/UserInfo/components/Content/Content.module.scss +++ b/src/shared/layouts/SidenavLayout/components/SidenavContent/components/UserInfo/components/Content/Content.module.scss @@ -7,7 +7,7 @@ padding: 0.875rem 0.625rem; display: flex; align-items: center; - color: inherit; + color: var(--primary-text); background-color: transparent; border: 0; box-sizing: border-box; diff --git a/src/shared/layouts/SidenavLayout/components/SidenavContent/components/UserInfo/components/MenuItems/MenuItems.module.scss b/src/shared/layouts/SidenavLayout/components/SidenavContent/components/UserInfo/components/MenuItems/MenuItems.module.scss index dbeec0bb42..fb49f9c6ef 100644 --- a/src/shared/layouts/SidenavLayout/components/SidenavContent/components/UserInfo/components/MenuItems/MenuItems.module.scss +++ b/src/shared/layouts/SidenavLayout/components/SidenavContent/components/UserInfo/components/MenuItems/MenuItems.module.scss @@ -12,9 +12,8 @@ display: flex; flex-direction: column; list-style-type: none; - background-color: $c-shades-white; border-radius: var(--items-br); - filter: drop-shadow(0 0.25rem 0.9375rem #{$c-sidebar-user-menu-shadow}); + filter: drop-shadow(0 0.25rem 0.9375rem var(--drop-shadow)); } .itemsWrapperPlacementTop { bottom: 100%; diff --git a/src/shared/layouts/SidenavLayout/components/SidenavContent/components/UserInfo/components/MenuItems/MenuItems.tsx b/src/shared/layouts/SidenavLayout/components/SidenavContent/components/UserInfo/components/MenuItems/MenuItems.tsx index 78b6884971..ce2d62249d 100644 --- a/src/shared/layouts/SidenavLayout/components/SidenavContent/components/UserInfo/components/MenuItems/MenuItems.tsx +++ b/src/shared/layouts/SidenavLayout/components/SidenavContent/components/UserInfo/components/MenuItems/MenuItems.tsx @@ -1,5 +1,6 @@ import React, { FC } from "react"; import { useDispatch } from "react-redux"; +import { useLocation } from "react-router"; import classNames from "classnames"; import { Menu } from "@headlessui/react"; import { logOut } from "@/pages/Auth/store/actions"; @@ -10,6 +11,8 @@ import { LogoutIcon, SettingsIcon, } from "@/shared/icons"; +import ThemeIcon from "@/shared/icons/theme.icon"; +import { toggleTheme } from "@/shared/store/actions"; import { MenuItem } from "./components"; import { Item, ItemType } from "./types"; import styles from "./MenuItems.module.scss"; @@ -28,11 +31,28 @@ interface MenuItemsProps { styles?: MenuItemsStyles; } +const insertIf = (condition: boolean, ...elements: any) => { + return condition ? elements : []; +}; + const MenuItems: FC = (props) => { const { placement = MenuItemsPlacement.Bottom, styles: outerStyles } = props; const dispatch = useDispatch(); const { getProfilePagePath, getBillingPagePath, getSettingsPagePath } = useRoutesContext(); + const { pathname } = useLocation(); + const isV04 = pathname.includes("-v04"); + + const toggleThemeMenuItem = { + key: "theme", + type: ItemType.Button, + text: "Light/Dark mode", + icon: , + onClick: () => { + dispatch(toggleTheme(null)); + }, + }; + const items: Item[] = [ { key: "my-profile", @@ -52,6 +72,7 @@ const MenuItems: FC = (props) => { icon: , to: getBillingPagePath(), }, + ...insertIf(!isV04, toggleThemeMenuItem), { key: "log-out", type: ItemType.Button, diff --git a/src/shared/layouts/SidenavLayout/components/SidenavContent/components/UserInfo/components/MenuItems/components/MenuItem/MenuItem.module.scss b/src/shared/layouts/SidenavLayout/components/SidenavContent/components/UserInfo/components/MenuItems/components/MenuItem/MenuItem.module.scss index 17721a6e55..1dfd898c67 100644 --- a/src/shared/layouts/SidenavLayout/components/SidenavContent/components/UserInfo/components/MenuItems/components/MenuItem/MenuItem.module.scss +++ b/src/shared/layouts/SidenavLayout/components/SidenavContent/components/UserInfo/components/MenuItems/components/MenuItem/MenuItem.module.scss @@ -1,14 +1,14 @@ @import "../../../../../../../../../../../constants"; .item { - --item-bg-color: #{$c-shades-white}; - --item-border: 0.0625rem solid #{$c-neutrals-100}; + --item-bg-color: var(--tertiary-fill); + --item-border: 0.0625rem solid var(--gentle-stroke); padding: 1.125rem 1.5rem; display: flex; align-items: center; text-decoration: none; - color: inherit; + color: var(--primary-text); background-color: var(--item-bg-color); border: var(--item-border); border-bottom: 0; @@ -31,7 +31,7 @@ } } .itemActive { - --item-bg-color: var(--hover-fill); + --item-bg-color: var(--secondary-hover-fill); } .icon { diff --git a/src/shared/layouts/SidenavLayout/components/SidenavContent/components/UserInfo/components/UnauthenticatedContent/UnauthenticatedContent.tsx b/src/shared/layouts/SidenavLayout/components/SidenavContent/components/UserInfo/components/UnauthenticatedContent/UnauthenticatedContent.tsx index 753ea80e6a..afbbdeb7dd 100644 --- a/src/shared/layouts/SidenavLayout/components/SidenavContent/components/UserInfo/components/UnauthenticatedContent/UnauthenticatedContent.tsx +++ b/src/shared/layouts/SidenavLayout/components/SidenavContent/components/UserInfo/components/UnauthenticatedContent/UnauthenticatedContent.tsx @@ -27,7 +27,7 @@ const UnauthenticatedContent: FC = (props) => { leftSideEl={