From 3aba425345bcbf608dbe6e5ec1a09707be9f66c8 Mon Sep 17 00:00:00 2001 From: Roie Natan Date: Sun, 5 Nov 2023 18:02:29 -0500 Subject: [PATCH 01/21] support dark mode init --- src/shared/icons/theme.icon.tsx | 30 +++++++++++++++++++ .../MultipleSpacesLayout.module.scss | 2 +- .../components/Header/Header.module.scss | 2 +- .../components/MenuItems/MenuItems.tsx | 9 ++++++ src/shared/ui-kit/Sidenav/Sidenav.module.scss | 2 +- src/shared/ui-kit/Theme/Theme.tsx | 5 +--- src/styles/theme.scss | 4 +++ 7 files changed, 47 insertions(+), 7 deletions(-) create mode 100644 src/shared/icons/theme.icon.tsx diff --git a/src/shared/icons/theme.icon.tsx b/src/shared/icons/theme.icon.tsx new file mode 100644 index 0000000000..7933acf1aa --- /dev/null +++ b/src/shared/icons/theme.icon.tsx @@ -0,0 +1,30 @@ +import React, { FC } from "react"; + +interface ThemeIconProps { + className?: string; +} + +const ThemeIcon: FC = ({ className }) => { + const color = "currentColor"; + + return ( + + + + ); +}; + +export default ThemeIcon; diff --git a/src/shared/layouts/MultipleSpacesLayout/MultipleSpacesLayout.module.scss b/src/shared/layouts/MultipleSpacesLayout/MultipleSpacesLayout.module.scss index 64b3e94956..844f6ddd0c 100644 --- a/src/shared/layouts/MultipleSpacesLayout/MultipleSpacesLayout.module.scss +++ b/src/shared/layouts/MultipleSpacesLayout/MultipleSpacesLayout.module.scss @@ -66,7 +66,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..6461d9be01 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; } 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..5b49ddce33 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 @@ -10,6 +10,8 @@ import { LogoutIcon, SettingsIcon, } from "@/shared/icons"; +import ThemeIcon from "@/shared/icons/theme.icon"; +import { Theme } from "@/shared/ui-kit/Theme"; import { MenuItem } from "./components"; import { Item, ItemType } from "./types"; import styles from "./MenuItems.module.scss"; @@ -52,6 +54,13 @@ const MenuItems: FC = (props) => { icon: , to: getBillingPagePath(), }, + { + key: "theme", + type: ItemType.Button, + text: , + icon: , + onClick: () => {}, + }, { key: "log-out", type: ItemType.Button, diff --git a/src/shared/ui-kit/Sidenav/Sidenav.module.scss b/src/shared/ui-kit/Sidenav/Sidenav.module.scss index fbe0603aa8..b2ae8e08fd 100644 --- a/src/shared/ui-kit/Sidenav/Sidenav.module.scss +++ b/src/shared/ui-kit/Sidenav/Sidenav.module.scss @@ -42,7 +42,7 @@ padding-bottom: var(--sb-content-pb); display: flex; flex-direction: column; - background-color: var(--sb-bg-color); + background-color: var(--primary-background); box-shadow: var(--sb-shadow); overflow: hidden; box-sizing: border-box; diff --git a/src/shared/ui-kit/Theme/Theme.tsx b/src/shared/ui-kit/Theme/Theme.tsx index bf1aaa5a88..11c750b010 100644 --- a/src/shared/ui-kit/Theme/Theme.tsx +++ b/src/shared/ui-kit/Theme/Theme.tsx @@ -12,10 +12,7 @@ const Theme = () => { dispatch(changeTheme(theme === Themes.Dark ? Themes.Light : Themes.Dark)); }; - /** - * Need design. For now 'Light' theme is the default. - */ - return
Toggle Theme
; + return
Light/Dark mode
; }; export default Theme; diff --git a/src/styles/theme.scss b/src/styles/theme.scss index 80287cb5d7..3e605af426 100644 --- a/src/styles/theme.scss +++ b/src/styles/theme.scss @@ -1,4 +1,6 @@ :root[data-theme="light"] { + --primary-background: #ffffff; + --secondary-background: #f8f8f5; --primary-fill: #c32ea3; --secondary-fill: #a75a93; --gentle-fill: #f3d4eb; @@ -13,4 +15,6 @@ } :root[data-theme="dark"] { + --primary-background: #1f2535; + --secondary-background: #2e3452; } From e45952bf61325e66367e1f7030ee3db839408c26 Mon Sep 17 00:00:00 2001 From: Roie Natan Date: Mon, 6 Nov 2023 17:36:05 -0500 Subject: [PATCH 02/21] . --- .../components/ChatComponent/ChatComponent.module.scss | 6 +++--- .../FeedItemBaseContent/FeedItemBaseContent.module.scss | 6 +++--- .../DesktopRightPane/DesktopRightPane.module.scss | 2 +- .../MobileChat/components/Header/Header.module.scss | 2 +- .../HeaderCommonContent/HeaderCommonContent.module.scss | 1 + .../FeedItemBaseContent/FeedItemBaseContent.module.scss | 4 ++-- .../components/Chat/ChatMessage/ChatMessage.module.scss | 6 +++--- src/shared/components/Modal/index.scss | 4 ++-- .../components/PageContent/PageContent.module.scss | 2 +- .../components/TreeItemTrigger/TreeItemTrigger.module.scss | 6 +++--- .../UserInfo/components/Content/Content.module.scss | 2 +- .../MenuItems/components/MenuItem/MenuItem.module.scss | 4 ++-- .../components/ContextMenuItem/ContextMenuItem.module.scss | 4 ++-- .../MenuItems/components/MenuItem/MenuItem.module.scss | 6 +++--- .../MenuItems/components/MenuItem/MenuItem.module.scss | 4 ++-- src/styles/theme.scss | 5 ++++- 16 files changed, 34 insertions(+), 30 deletions(-) diff --git a/src/pages/common/components/ChatComponent/ChatComponent.module.scss b/src/pages/common/components/ChatComponent/ChatComponent.module.scss index 32838bd7c3..0d64132197 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% - #{$container-desktop-header-height}); - background-color: $white; + background-color: var(--primary-background); box-sizing: border-box; --chat-input-wrapper-height: 3.125rem; } @@ -44,7 +44,7 @@ display: flex; flex-shrink: 0; padding: 0 1.125rem; - background-color: $c-input-100; + background-color: var(--primary-background); border: 0.0625rem solid $c-neutrals-100; border-left-width: 0; border-right-width: 0; @@ -69,7 +69,7 @@ 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; diff --git a/src/pages/common/components/FeedCard/components/FeedItemBaseContent/FeedItemBaseContent.module.scss b/src/pages/common/components/FeedCard/components/FeedItemBaseContent/FeedItemBaseContent.module.scss index ae6f403e21..3aae95854d 100644 --- a/src/pages/common/components/FeedCard/components/FeedItemBaseContent/FeedItemBaseContent.module.scss +++ b/src/pages/common/components/FeedCard/components/FeedItemBaseContent/FeedItemBaseContent.module.scss @@ -2,7 +2,7 @@ @import "../../../../../../styles/sizes"; .container { - --title-color: #{$secondary-blue}; + --title-color: var(--primary-text); min-height: 3.0625rem; max-height: 5rem; @@ -14,9 +14,9 @@ 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; 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..135c57e952 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; + background-color: var(--primary-background); border-left: 0.0625rem solid $c-light-gray; } 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..a863926147 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,7 +8,7 @@ padding-right: 1.5rem; display: flex; align-items: center; - background-color: $c-shades-white; + background-color: var(--primary-background); border-bottom: 0.0625rem solid $c-light-gray; box-sizing: border-box; } diff --git a/src/pages/commonFeed/components/HeaderContent/components/HeaderCommonContent/HeaderCommonContent.module.scss b/src/pages/commonFeed/components/HeaderContent/components/HeaderCommonContent/HeaderCommonContent.module.scss index 4a17e06688..30a3dc64f2 100644 --- a/src/pages/commonFeed/components/HeaderContent/components/HeaderCommonContent/HeaderCommonContent.module.scss +++ b/src/pages/commonFeed/components/HeaderContent/components/HeaderCommonContent/HeaderCommonContent.module.scss @@ -83,6 +83,7 @@ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; + color: var(--primary-text); @include tablet { font-size: $moderate-xsmall; diff --git a/src/pages/inbox/components/FeedItemBaseContent/FeedItemBaseContent.module.scss b/src/pages/inbox/components/FeedItemBaseContent/FeedItemBaseContent.module.scss index 84e20ecf46..439c22a577 100644 --- a/src/pages/inbox/components/FeedItemBaseContent/FeedItemBaseContent.module.scss +++ b/src/pages/inbox/components/FeedItemBaseContent/FeedItemBaseContent.module.scss @@ -12,9 +12,9 @@ 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; diff --git a/src/shared/components/Chat/ChatMessage/ChatMessage.module.scss b/src/shared/components/Chat/ChatMessage/ChatMessage.module.scss index d9cd0d7295..cb093ca430 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); &:hover { .menuArrowButton { @@ -108,7 +108,7 @@ .messageName { font-size: $xsmall; font-weight: 600; - color: $secondary-blue; + color: var(--primary-text); margin-right: 2.5rem; margin-left: 1rem; margin-bottom: 0.5rem; diff --git a/src/shared/components/Modal/index.scss b/src/shared/components/Modal/index.scss index 8227adb026..bcdbe47545 100644 --- a/src/shared/components/Modal/index.scss +++ b/src/shared/components/Modal/index.scss @@ -40,7 +40,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 +110,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/layouts/MultipleSpacesLayout/components/PageContent/PageContent.module.scss b/src/shared/layouts/MultipleSpacesLayout/components/PageContent/PageContent.module.scss index 8dfc91fbc6..14699408d7 100644 --- a/src/shared/layouts/MultipleSpacesLayout/components/PageContent/PageContent.module.scss +++ b/src/shared/layouts/MultipleSpacesLayout/components/PageContent/PageContent.module.scss @@ -33,7 +33,7 @@ left: var(--main-pl); z-index: 2; height: var(--page-content-header); - background-color: $c-shades-white; + background-color: var(--primary-background); border-bottom: 0.0625rem solid $c-light-gray; box-sizing: border-box; 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 57d9f17603..bf5f53e5c4 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(--hover-fill); } } .itemActive { 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/components/MenuItem/MenuItem.module.scss b/src/shared/layouts/SidenavLayout/components/SidenavContent/components/UserInfo/components/MenuItems/components/MenuItem/MenuItem.module.scss index 17721a6e55..9aa3b5a1cf 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-bg-color: var(--primary-background); --item-border: 0.0625rem solid #{$c-neutrals-100}; 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; diff --git a/src/shared/ui-kit/ContextMenu/components/ContextMenuItem/ContextMenuItem.module.scss b/src/shared/ui-kit/ContextMenu/components/ContextMenuItem/ContextMenuItem.module.scss index 93d6846a8d..42d02b9bd0 100644 --- a/src/shared/ui-kit/ContextMenu/components/ContextMenuItem/ContextMenuItem.module.scss +++ b/src/shared/ui-kit/ContextMenu/components/ContextMenuItem/ContextMenuItem.module.scss @@ -1,8 +1,8 @@ @import "../../../../../constants"; .item { - --item-color: #{$c-neutrals-600}; - --item-bg-color: #{$c-shades-white}; + --item-color: var(--primary-text); + --item-bg-color: var(--primary-background); --item-border: 0.0625rem solid #{$c-neutrals-100}; margin: 0; diff --git a/src/shared/ui-kit/DesktopMenu/components/MenuItems/components/MenuItem/MenuItem.module.scss b/src/shared/ui-kit/DesktopMenu/components/MenuItems/components/MenuItem/MenuItem.module.scss index 21257a186f..0652f08c1e 100644 --- a/src/shared/ui-kit/DesktopMenu/components/MenuItems/components/MenuItem/MenuItem.module.scss +++ b/src/shared/ui-kit/DesktopMenu/components/MenuItems/components/MenuItem/MenuItem.module.scss @@ -1,8 +1,8 @@ @import "../../../../../../../constants"; .item { - --item-color: #{$c-neutrals-600}; - --item-bg-color: #{$c-shades-white}; + --item-color: var(--primary-text); + --item-bg-color: var(--primary-background); --item-border: 0.0625rem solid #{$c-neutrals-100}; margin: 0; @@ -34,7 +34,7 @@ } } .itemActive { - --item-bg-color: #{$c-pink-hover-feed-cards}; + --item-bg-color: var(--hover-fill); } .itemWithWarning { diff --git a/src/shared/ui-kit/MobileMenu/components/MenuItems/components/MenuItem/MenuItem.module.scss b/src/shared/ui-kit/MobileMenu/components/MenuItems/components/MenuItem/MenuItem.module.scss index 1e84ca6d2f..ff008b40b9 100644 --- a/src/shared/ui-kit/MobileMenu/components/MenuItems/components/MenuItem/MenuItem.module.scss +++ b/src/shared/ui-kit/MobileMenu/components/MenuItems/components/MenuItem/MenuItem.module.scss @@ -1,8 +1,8 @@ @import "../../../../../../../constants"; .item { - --item-color: #{$c-neutrals-600}; - --item-bg-color: rgba(242, 242, 242, 0.8); + --item-color: var(--primary-text); + --item-bg-color: var(--primary-background); margin: 0; padding: 1.125rem 1.5rem; diff --git a/src/styles/theme.scss b/src/styles/theme.scss index 3e605af426..5804bbd21c 100644 --- a/src/styles/theme.scss +++ b/src/styles/theme.scss @@ -10,11 +10,14 @@ --strong-gray: #7a819c; --gray-60: #6b718e; --red: #ff603e; - + --hover-fill: #fff9fd; --white-text: #ffffff; + --primary-text: #001a36; } :root[data-theme="dark"] { --primary-background: #1f2535; --secondary-background: #2e3452; + --hover-fill: #131b23; + --primary-text: #ffffff; } From bd8eed534e3cdf25f243f683e1c3544f07dcf27e Mon Sep 17 00:00:00 2001 From: Roie Natan Date: Wed, 8 Nov 2023 13:12:31 -0500 Subject: [PATCH 03/21] . --- .../ChatComponent/ChatComponent.module.scss | 2 +- .../FeedItemBaseContent.module.scss | 5 ++--- .../components/VoteButton/VoteButton.module.scss | 4 ++-- .../components/FeedLayout/FeedLayout.module.scss | 2 +- .../DirectMessageModal.module.scss | 3 ++- .../DirectMessageUserItem.module.scss | 6 +++--- .../FeedItemBaseContent.module.scss | 2 +- .../DesktopCommonDropdown.module.scss | 2 +- .../components/Projects/Projects.module.scss | 2 +- .../components/PageContent/PageContent.module.scss | 1 + .../components/MenuItem/MenuItem.module.scss | 2 +- src/shared/ui-kit/Button/Button.module.scss | 2 +- .../components/MenuItem/MenuItem.module.scss | 2 +- .../components/MenuItem/MenuItem.module.scss | 2 +- .../ui-kit/TextEditor/TextEditor.module.scss | 2 +- .../components/Editor/Editor.module.scss | 2 +- src/styles/theme.scss | 14 +++++++++----- 17 files changed, 30 insertions(+), 25 deletions(-) diff --git a/src/pages/common/components/ChatComponent/ChatComponent.module.scss b/src/pages/common/components/ChatComponent/ChatComponent.module.scss index b269e3ac1c..7515b0f293 100644 --- a/src/pages/common/components/ChatComponent/ChatComponent.module.scss +++ b/src/pages/common/components/ChatComponent/ChatComponent.module.scss @@ -67,7 +67,7 @@ min-height: 2.625rem; line-height: 1.5rem; border-radius: 1.25rem; - background-color: $light-gray-1; + background-color: var(--secondary-background); border: 0.0625rem solid $c-neutrals-200; outline: none; resize: none; diff --git a/src/pages/common/components/FeedCard/components/FeedItemBaseContent/FeedItemBaseContent.module.scss b/src/pages/common/components/FeedCard/components/FeedItemBaseContent/FeedItemBaseContent.module.scss index 3aae95854d..6e6ac3f979 100644 --- a/src/pages/common/components/FeedCard/components/FeedItemBaseContent/FeedItemBaseContent.module.scss +++ b/src/pages/common/components/FeedCard/components/FeedItemBaseContent/FeedItemBaseContent.module.scss @@ -9,7 +9,7 @@ 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; @@ -33,8 +33,7 @@ } .containerActive { - --title-color: var(--white-text); - + --title-color: #ffffff; margin: 0 -1.4375rem 0 -1.5rem; background-color: $c-pink-active-feed-cards; diff --git a/src/pages/common/components/ProposalFeedCard/components/VoteButton/VoteButton.module.scss b/src/pages/common/components/ProposalFeedCard/components/VoteButton/VoteButton.module.scss index 12c07c1a3e..0d5714a4ff 100644 --- a/src/pages/common/components/ProposalFeedCard/components/VoteButton/VoteButton.module.scss +++ b/src/pages/common/components/ProposalFeedCard/components/VoteButton/VoteButton.module.scss @@ -41,8 +41,8 @@ } .rejectButton { - color: var(--red); - border-color: var(--red); + color: var(--warning); + border-color: var(--warning); } .rejectButton:hover { diff --git a/src/pages/commonFeed/components/FeedLayout/FeedLayout.module.scss b/src/pages/commonFeed/components/FeedLayout/FeedLayout.module.scss index 8a8742305f..40ed54d54e 100644 --- a/src/pages/commonFeed/components/FeedLayout/FeedLayout.module.scss +++ b/src/pages/commonFeed/components/FeedLayout/FeedLayout.module.scss @@ -28,7 +28,7 @@ font-weight: 500; font-size: $moderate-xsmall; text-align: center; - color: $c-neutrals-600; + color: var(--primary-text); } .desktopRightPane { 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..94c11d3a16 100644 --- a/src/pages/inbox/components/DirectMessageButton/components/DirectMessageModal/DirectMessageModal.module.scss +++ b/src/pages/inbox/components/DirectMessageButton/components/DirectMessageModal/DirectMessageModal.module.scss @@ -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/FeedItemBaseContent/FeedItemBaseContent.module.scss b/src/pages/inbox/components/FeedItemBaseContent/FeedItemBaseContent.module.scss index 439c22a577..6ce375e5af 100644 --- a/src/pages/inbox/components/FeedItemBaseContent/FeedItemBaseContent.module.scss +++ b/src/pages/inbox/components/FeedItemBaseContent/FeedItemBaseContent.module.scss @@ -7,7 +7,7 @@ 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; 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..c76395b388 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 @@ -46,7 +46,7 @@ } .menuItemActive { - --item-bg-color: #{$c-pink-hover-feed-cards}; + --item-bg-color: var(--hover-fill); } .menuItemText { 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 c1938dec1e..f7e472eeaa 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,7 +13,7 @@ border-radius: 0; &:hover { - --bg-color: #{$c-pink-hover-feed-cards}; + --bg-color: var(--hover-fill); } @include tablet { diff --git a/src/shared/layouts/MultipleSpacesLayout/components/PageContent/PageContent.module.scss b/src/shared/layouts/MultipleSpacesLayout/components/PageContent/PageContent.module.scss index 14699408d7..e8cfd08d3f 100644 --- a/src/shared/layouts/MultipleSpacesLayout/components/PageContent/PageContent.module.scss +++ b/src/shared/layouts/MultipleSpacesLayout/components/PageContent/PageContent.module.scss @@ -36,6 +36,7 @@ background-color: var(--primary-background); border-bottom: 0.0625rem solid $c-light-gray; box-sizing: border-box; + color: var(--primary-text); @include tablet { top: 0; 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 9aa3b5a1cf..56424cb0e6 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 @@ -2,7 +2,7 @@ .item { --item-bg-color: var(--primary-background); - --item-border: 0.0625rem solid #{$c-neutrals-100}; + --item-border: 0.0625rem solid var(--gentle-stroke); padding: 1.125rem 1.5rem; display: flex; diff --git a/src/shared/ui-kit/Button/Button.module.scss b/src/shared/ui-kit/Button/Button.module.scss index cfc8e566a7..b9879f67e3 100644 --- a/src/shared/ui-kit/Button/Button.module.scss +++ b/src/shared/ui-kit/Button/Button.module.scss @@ -122,7 +122,7 @@ } .buttonPrimaryPinkVariant { - --btn-color: var(--white-text); + --btn-color: #ffffff; --btn-bg-color: var(--primary-fill); --btn-border-color: none; --btn-border: 0; diff --git a/src/shared/ui-kit/DesktopMenu/components/MenuItems/components/MenuItem/MenuItem.module.scss b/src/shared/ui-kit/DesktopMenu/components/MenuItems/components/MenuItem/MenuItem.module.scss index 0652f08c1e..c058754869 100644 --- a/src/shared/ui-kit/DesktopMenu/components/MenuItems/components/MenuItem/MenuItem.module.scss +++ b/src/shared/ui-kit/DesktopMenu/components/MenuItems/components/MenuItem/MenuItem.module.scss @@ -3,7 +3,7 @@ .item { --item-color: var(--primary-text); --item-bg-color: var(--primary-background); - --item-border: 0.0625rem solid #{$c-neutrals-100}; + --item-border: 0.0625rem solid var(--gentle-stroke); margin: 0; padding: 1.125rem 1.5rem; diff --git a/src/shared/ui-kit/MobileMenu/components/MenuItems/components/MenuItem/MenuItem.module.scss b/src/shared/ui-kit/MobileMenu/components/MenuItems/components/MenuItem/MenuItem.module.scss index ff008b40b9..0bf39feaae 100644 --- a/src/shared/ui-kit/MobileMenu/components/MenuItems/components/MenuItem/MenuItem.module.scss +++ b/src/shared/ui-kit/MobileMenu/components/MenuItems/components/MenuItem/MenuItem.module.scss @@ -10,7 +10,7 @@ color: var(--item-color); background-color: var(--item-bg-color); border: 0; - border-bottom: 0.0625rem solid #{$c-separator-light-non-opaque}; + border-bottom: 0.0625rem solid var(--gentle-stroke); font-family: PoppinsSans, sans-serif; font-weight: 600; font-size: $small; diff --git a/src/shared/ui-kit/TextEditor/TextEditor.module.scss b/src/shared/ui-kit/TextEditor/TextEditor.module.scss index 5c1bb52c18..bc7b69ad1e 100644 --- a/src/shared/ui-kit/TextEditor/TextEditor.module.scss +++ b/src/shared/ui-kit/TextEditor/TextEditor.module.scss @@ -13,7 +13,7 @@ display: flex; flex-direction: column; - background-color: $c-shades-white; + //background-color: $c-shades-white; } .editorWrapperReadOnly { --text-editor-border: 0; diff --git a/src/shared/ui-kit/TextEditor/components/Editor/Editor.module.scss b/src/shared/ui-kit/TextEditor/components/Editor/Editor.module.scss index 271cc4c195..1c27e14f74 100644 --- a/src/shared/ui-kit/TextEditor/components/Editor/Editor.module.scss +++ b/src/shared/ui-kit/TextEditor/components/Editor/Editor.module.scss @@ -9,7 +9,7 @@ font-weight: normal; font-size: var(--text-editor-elements-fs); line-height: 120%; - color: $secondary-blue; + color: var(--primary-text); overflow-y: auto; border: var(--text-editor-border); box-sizing: border-box; diff --git a/src/styles/theme.scss b/src/styles/theme.scss index 5804bbd21c..3eeea6aa6c 100644 --- a/src/styles/theme.scss +++ b/src/styles/theme.scss @@ -1,18 +1,18 @@ :root[data-theme="light"] { --primary-background: #ffffff; --secondary-background: #f8f8f5; + --hover-fill: #fff9fd; + --primary-text: #001a36; + --gentle-stroke: #f4f5f5; + --warning: #ff603e; --primary-fill: #c32ea3; --secondary-fill: #a75a93; + --gentle-fill: #f3d4eb; - --hover-fill: #fff3fc; --gentle-gray: #f4f5f5; --medium-gray: #dcdee7; --strong-gray: #7a819c; --gray-60: #6b718e; - --red: #ff603e; - --hover-fill: #fff9fd; - --white-text: #ffffff; - --primary-text: #001a36; } :root[data-theme="dark"] { @@ -20,4 +20,8 @@ --secondary-background: #2e3452; --hover-fill: #131b23; --primary-text: #ffffff; + --gentle-stroke: #8d91a9; + --warning: #ff603e; + --primary-fill: #c32ea3; + --secondary-fill: #a75a93; } From 24f1d8f04591396151dddc7e24e2edaeb90d5f8e Mon Sep 17 00:00:00 2001 From: Roie Natan Date: Wed, 8 Nov 2023 16:51:47 -0500 Subject: [PATCH 04/21] . --- .../components/ChatComponent/ChatComponent.module.scss | 2 +- src/pages/commonFeed/CommonFeedPage.module.scss | 2 +- .../commonFeed/components/FeedLayout/FeedLayout.module.scss | 2 +- .../components/DesktopChat/DesktopChat.module.scss | 2 +- .../DesktopRightPane/DesktopRightPane.module.scss | 2 +- .../MobileChat/components/Header/Header.module.scss | 2 +- .../FeedLayout/components/SplitView/SplitView.module.scss | 4 ++-- src/shared/icons/theme.icon.tsx | 6 +++--- .../CommonSidenavLayout/CommonSidenavLayout.module.scss | 4 ++-- .../components/PageContent/PageContent.module.scss | 6 +++--- .../components/ProjectsTree/ProjectsTree.module.scss | 2 +- .../MultipleSpacesLayout/MultipleSpacesLayout.module.scss | 2 +- .../components/PageContent/PageContent.module.scss | 2 +- .../components/SidenavContent/SidenavContent.module.scss | 1 + .../AuthenticatedContent/AuthenticatedContent.module.scss | 1 - src/shared/ui-kit/Button/Button.module.scss | 1 - src/styles/theme.scss | 2 +- 17 files changed, 21 insertions(+), 22 deletions(-) diff --git a/src/pages/common/components/ChatComponent/ChatComponent.module.scss b/src/pages/common/components/ChatComponent/ChatComponent.module.scss index 7515b0f293..d1b7f368d9 100644 --- a/src/pages/common/components/ChatComponent/ChatComponent.module.scss +++ b/src/pages/common/components/ChatComponent/ChatComponent.module.scss @@ -48,7 +48,7 @@ flex-shrink: 0; padding: 0 1.125rem; background-color: var(--primary-background); - border: 0.0625rem solid $c-neutrals-100; + border: 0.0625rem solid var(--gentle-stroke); border-left-width: 0; border-right-width: 0; box-shadow: none; 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 40ed54d54e..c0b8bc96ca 100644 --- a/src/pages/commonFeed/components/FeedLayout/FeedLayout.module.scss +++ b/src/pages/commonFeed/components/FeedLayout/FeedLayout.module.scss @@ -34,7 +34,7 @@ .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 135c57e952..f1dd8f6a94 100644 --- a/src/pages/commonFeed/components/FeedLayout/components/DesktopRightPane/DesktopRightPane.module.scss +++ b/src/pages/commonFeed/components/FeedLayout/components/DesktopRightPane/DesktopRightPane.module.scss @@ -7,5 +7,5 @@ bottom: 0; z-index: 1; background-color: var(--primary-background); - border-left: 0.0625rem solid $c-light-gray; + border-left: 0.0625rem solid var(--gentle-stroke); } 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 a863926147..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 @@ -9,7 +9,7 @@ display: flex; align-items: center; background-color: var(--primary-background); - 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/SplitView/SplitView.module.scss b/src/pages/commonFeed/components/FeedLayout/components/SplitView/SplitView.module.scss index 3a23523609..7ef1fb3ea9 100644 --- a/src/pages/commonFeed/components/FeedLayout/components/SplitView/SplitView.module.scss +++ b/src/pages/commonFeed/components/FeedLayout/components/SplitView/SplitView.module.scss @@ -15,8 +15,8 @@ &:global(.vertical) { width: 0.6875rem; margin: 0 -0.3125rem; - border-left: 0.3125rem solid #{$split-view-resizer-border-color}; - border-right: 0.3125rem solid #{$split-view-resizer-border-color}; + border-left: 0.3125rem solid var(--gentle-stroke); + border-right: 0.3125rem solid var(--gentle-stroke); cursor: col-resize; &:hover { diff --git a/src/shared/icons/theme.icon.tsx b/src/shared/icons/theme.icon.tsx index 7933acf1aa..fcc7784110 100644 --- a/src/shared/icons/theme.icon.tsx +++ b/src/shared/icons/theme.icon.tsx @@ -19,9 +19,9 @@ const ThemeIcon: FC = ({ className }) => { ); diff --git a/src/shared/layouts/CommonSidenavLayout/CommonSidenavLayout.module.scss b/src/shared/layouts/CommonSidenavLayout/CommonSidenavLayout.module.scss index c4839e3539..599252ac4a 100644 --- a/src/shared/layouts/CommonSidenavLayout/CommonSidenavLayout.module.scss +++ b/src/shared/layouts/CommonSidenavLayout/CommonSidenavLayout.module.scss @@ -42,8 +42,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/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/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 844f6ddd0c..92c2ff176e 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; diff --git a/src/shared/layouts/MultipleSpacesLayout/components/PageContent/PageContent.module.scss b/src/shared/layouts/MultipleSpacesLayout/components/PageContent/PageContent.module.scss index e8cfd08d3f..bea0a11f65 100644 --- a/src/shared/layouts/MultipleSpacesLayout/components/PageContent/PageContent.module.scss +++ b/src/shared/layouts/MultipleSpacesLayout/components/PageContent/PageContent.module.scss @@ -34,7 +34,7 @@ z-index: 2; height: var(--page-content-header); background-color: var(--primary-background); - border-bottom: 0.0625rem solid $c-light-gray; + border-bottom: 0.0625rem solid var(--gentle-stroke); box-sizing: border-box; color: var(--primary-text); 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/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/ui-kit/Button/Button.module.scss b/src/shared/ui-kit/Button/Button.module.scss index b9879f67e3..b2a3dba1d4 100644 --- a/src/shared/ui-kit/Button/Button.module.scss +++ b/src/shared/ui-kit/Button/Button.module.scss @@ -24,7 +24,6 @@ color: var(--btn-color); text-align: center; line-height: 125%; - background-color: var(--btn-bg-color); border: var(--btn-border); border-radius: var(--btn-border-radius); overflow: hidden; diff --git a/src/styles/theme.scss b/src/styles/theme.scss index 3eeea6aa6c..eb40c347ab 100644 --- a/src/styles/theme.scss +++ b/src/styles/theme.scss @@ -20,7 +20,7 @@ --secondary-background: #2e3452; --hover-fill: #131b23; --primary-text: #ffffff; - --gentle-stroke: #8d91a9; + --gentle-stroke: #525876; --warning: #ff603e; --primary-fill: #c32ea3; --secondary-fill: #a75a93; From d7c1c5e9c29f1c40ac2b0e5fe51aaf58fb5d1f5e Mon Sep 17 00:00:00 2001 From: Roie Natan Date: Wed, 8 Nov 2023 17:24:58 -0500 Subject: [PATCH 05/21] . --- src/index.scss | 4 ++-- .../CommonManagement/CommonManagement.module.scss | 2 +- .../ImmediateProposalInfo.module.scss | 2 +- .../ImmediateProposalVoteInfo.module.scss | 2 +- .../components/VoteButton/VoteButton.module.scss | 4 ++-- .../NewStreamButton/NewStreamButton.module.scss | 2 +- src/shared/components/MenuButton/index.scss | 2 +- .../CommonSidenavLayout.module.scss | 2 +- .../SidenavLayout/SidenavLayout.module.scss | 2 +- .../components/Scrollbar/Scrollbar.module.scss | 2 +- .../components/MenuItems/MenuItems.module.scss | 2 +- .../UserInfo/components/MenuItems/MenuItems.tsx | 14 ++++++++++---- src/shared/ui-kit/Button/Button.module.scss | 2 ++ .../ui-kit/ContextMenu/ContextMenu.module.scss | 2 +- .../components/MenuItems/MenuItems.module.scss | 2 +- .../components/MenuItems/MenuItems.module.scss | 2 +- .../components/Trigger/Trigger.module.scss | 2 +- src/styles/theme.scss | 8 ++------ 18 files changed, 31 insertions(+), 27 deletions(-) diff --git a/src/index.scss b/src/index.scss index 4aff548864..7591f51410 100644 --- a/src/index.scss +++ b/src/index.scss @@ -230,10 +230,10 @@ 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; } } diff --git a/src/pages/common/components/CommonManagement/CommonManagement.module.scss b/src/pages/common/components/CommonManagement/CommonManagement.module.scss index cbb77cc01a..e84cb37ed6 100644 --- a/src/pages/common/components/CommonManagement/CommonManagement.module.scss +++ b/src/pages/common/components/CommonManagement/CommonManagement.module.scss @@ -33,7 +33,7 @@ transition: background-color 0.2s; &:hover { - background-color: var(--gentle-fill); + background-color: $c-pink-light; } } diff --git a/src/pages/common/components/ProposalFeedCard/components/ImmediateProposalInfo/ImmediateProposalInfo.module.scss b/src/pages/common/components/ProposalFeedCard/components/ImmediateProposalInfo/ImmediateProposalInfo.module.scss index aed53bac63..83ce7148b8 100644 --- a/src/pages/common/components/ProposalFeedCard/components/ImmediateProposalInfo/ImmediateProposalInfo.module.scss +++ b/src/pages/common/components/ProposalFeedCard/components/ImmediateProposalInfo/ImmediateProposalInfo.module.scss @@ -12,5 +12,5 @@ .subtitle { font-size: $mobile-title; - color: var(--gray-60); + color: $c-gray-60; } diff --git a/src/pages/common/components/ProposalFeedCard/components/ImmediateProposalVoteInfo/ImmediateProposalVoteInfo.module.scss b/src/pages/common/components/ProposalFeedCard/components/ImmediateProposalVoteInfo/ImmediateProposalVoteInfo.module.scss index a45dec2716..3ac6e22cdf 100644 --- a/src/pages/common/components/ProposalFeedCard/components/ImmediateProposalVoteInfo/ImmediateProposalVoteInfo.module.scss +++ b/src/pages/common/components/ProposalFeedCard/components/ImmediateProposalVoteInfo/ImmediateProposalVoteInfo.module.scss @@ -15,5 +15,5 @@ .subtitle { font-size: $mobile-title; - color: var(--gray-60); + color: $c-gray-60; } diff --git a/src/pages/common/components/ProposalFeedCard/components/VoteButton/VoteButton.module.scss b/src/pages/common/components/ProposalFeedCard/components/VoteButton/VoteButton.module.scss index 0d5714a4ff..93eb70d121 100644 --- a/src/pages/common/components/ProposalFeedCard/components/VoteButton/VoteButton.module.scss +++ b/src/pages/common/components/ProposalFeedCard/components/VoteButton/VoteButton.module.scss @@ -30,8 +30,8 @@ } .abstainButton { - color: var(--strong-gray); - border-color: var(--strong-gray); + color: $c-gray-50; + border-color: $c-gray-50; } .abstainButton:hover { diff --git a/src/pages/commonFeed/components/HeaderContent/components/NewStreamButton/NewStreamButton.module.scss b/src/pages/commonFeed/components/HeaderContent/components/NewStreamButton/NewStreamButton.module.scss index 5cd45faf8c..9b3856b577 100644 --- a/src/pages/commonFeed/components/HeaderContent/components/NewStreamButton/NewStreamButton.module.scss +++ b/src/pages/commonFeed/components/HeaderContent/components/NewStreamButton/NewStreamButton.module.scss @@ -12,7 +12,7 @@ .icon { width: 1rem; height: 1rem; - color: $c-gray-800; + color: var(--primary-text); @include tablet { width: 0.875rem; diff --git a/src/shared/components/MenuButton/index.scss b/src/shared/components/MenuButton/index.scss index 2471b7880c..71609fe78f 100644 --- a/src/shared/components/MenuButton/index.scss +++ b/src/shared/components/MenuButton/index.scss @@ -7,7 +7,7 @@ justify-content: center; align-items: center; border-radius: 50%; - background-color: var(--gentle-fill); + background-color: $c-pink-light; &:hover { background-color: var(--hover-fill); diff --git a/src/shared/layouts/CommonSidenavLayout/CommonSidenavLayout.module.scss b/src/shared/layouts/CommonSidenavLayout/CommonSidenavLayout.module.scss index 599252ac4a..985d570759 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; 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/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/MenuItems/MenuItems.module.scss b/src/shared/layouts/SidenavLayout/components/SidenavContent/components/UserInfo/components/MenuItems/MenuItems.module.scss index dbeec0bb42..76aca1b293 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 @@ -14,7 +14,7 @@ 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 5b49ddce33..172b36e18d 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,8 +1,9 @@ import React, { FC } from "react"; -import { useDispatch } from "react-redux"; +import { useDispatch, useSelector } from "react-redux"; import classNames from "classnames"; import { Menu } from "@headlessui/react"; import { logOut } from "@/pages/Auth/store/actions"; +import { Theme } from "@/shared/constants"; import { useRoutesContext } from "@/shared/contexts"; import { Avatar3Icon, @@ -11,7 +12,8 @@ import { SettingsIcon, } from "@/shared/icons"; import ThemeIcon from "@/shared/icons/theme.icon"; -import { Theme } from "@/shared/ui-kit/Theme"; +import { changeTheme } from "@/shared/store/actions"; +import { selectTheme } from "@/shared/store/selectors"; import { MenuItem } from "./components"; import { Item, ItemType } from "./types"; import styles from "./MenuItems.module.scss"; @@ -35,6 +37,8 @@ const MenuItems: FC = (props) => { const dispatch = useDispatch(); const { getProfilePagePath, getBillingPagePath, getSettingsPagePath } = useRoutesContext(); + const theme = useSelector(selectTheme); + const items: Item[] = [ { key: "my-profile", @@ -57,9 +61,11 @@ const MenuItems: FC = (props) => { { key: "theme", type: ItemType.Button, - text: , + text: "Light/Dark mode", icon: , - onClick: () => {}, + onClick: () => { + dispatch(changeTheme(theme === Theme.Dark ? Theme.Light : Theme.Dark)); + }, }, { key: "log-out", diff --git a/src/shared/ui-kit/Button/Button.module.scss b/src/shared/ui-kit/Button/Button.module.scss index b2a3dba1d4..1d88d2baa0 100644 --- a/src/shared/ui-kit/Button/Button.module.scss +++ b/src/shared/ui-kit/Button/Button.module.scss @@ -24,6 +24,7 @@ color: var(--btn-color); text-align: center; line-height: 125%; + background-color: var(--btn-bg-color); border: var(--btn-border); border-radius: var(--btn-border-radius); overflow: hidden; @@ -32,6 +33,7 @@ user-select: none; transition: all 0.2s; box-sizing: border-box; + color: var(--primary-text); &.buttonDisabled { cursor: not-allowed; diff --git a/src/shared/ui-kit/ContextMenu/ContextMenu.module.scss b/src/shared/ui-kit/ContextMenu/ContextMenu.module.scss index ea1ebedf7b..4b4a2480da 100644 --- a/src/shared/ui-kit/ContextMenu/ContextMenu.module.scss +++ b/src/shared/ui-kit/ContextMenu/ContextMenu.module.scss @@ -18,7 +18,7 @@ list-style-type: none; background-color: $c-shades-white; border-radius: var(--items-br); - box-shadow: 0 0.25rem 0.9375rem #{$c-sidebar-user-menu-shadow}; + box-shadow: 0 0.25rem 0.9375rem var(--drop-shadow); } .loader { diff --git a/src/shared/ui-kit/DesktopMenu/components/MenuItems/MenuItems.module.scss b/src/shared/ui-kit/DesktopMenu/components/MenuItems/MenuItems.module.scss index f0d5509d69..f2580a9399 100644 --- a/src/shared/ui-kit/DesktopMenu/components/MenuItems/MenuItems.module.scss +++ b/src/shared/ui-kit/DesktopMenu/components/MenuItems/MenuItems.module.scss @@ -16,5 +16,5 @@ list-style-type: none; background-color: $c-shades-white; border-radius: var(--items-br); - box-shadow: 0 0.25rem 0.9375rem #{$c-sidebar-user-menu-shadow}; + box-shadow: 0 0.25rem 0.9375rem var(--drop-shadow); } diff --git a/src/shared/ui-kit/MobileMenu/components/MenuItems/MenuItems.module.scss b/src/shared/ui-kit/MobileMenu/components/MenuItems/MenuItems.module.scss index fe337ccfa5..2f2fb5f3a5 100644 --- a/src/shared/ui-kit/MobileMenu/components/MenuItems/MenuItems.module.scss +++ b/src/shared/ui-kit/MobileMenu/components/MenuItems/MenuItems.module.scss @@ -14,7 +14,7 @@ list-style-type: none; background-color: rgba(242, 242, 242, 0.9); border-radius: var(--items-br); - box-shadow: 0 0.25rem 0.9375rem #{$c-sidebar-user-menu-shadow}; + box-shadow: 0 0.25rem 0.9375rem var(--drop-shadow); } @supports (backdrop-filter: blur(1.7rem)) { diff --git a/src/shared/ui-kit/UploadFiles/components/Trigger/Trigger.module.scss b/src/shared/ui-kit/UploadFiles/components/Trigger/Trigger.module.scss index 75acd937aa..0e53876b57 100644 --- a/src/shared/ui-kit/UploadFiles/components/Trigger/Trigger.module.scss +++ b/src/shared/ui-kit/UploadFiles/components/Trigger/Trigger.module.scss @@ -1,7 +1,7 @@ @import "../../../../../constants"; .container { - --upload-trigger-color: var(--gentle-fill); + --upload-trigger-color: $c-pink-light; --upload-trigger-border-color: #{$c-neutrals-100}; --upload-trigger-border: 0.0625rem solid var(--upload-trigger-border-color); diff --git a/src/styles/theme.scss b/src/styles/theme.scss index eb40c347ab..abc23dcb82 100644 --- a/src/styles/theme.scss +++ b/src/styles/theme.scss @@ -7,12 +7,7 @@ --warning: #ff603e; --primary-fill: #c32ea3; --secondary-fill: #a75a93; - - --gentle-fill: #f3d4eb; - --gentle-gray: #f4f5f5; - --medium-gray: #dcdee7; - --strong-gray: #7a819c; - --gray-60: #6b718e; + --drop-shadow: rgba(0, 0, 0, 0.15259); } :root[data-theme="dark"] { @@ -24,4 +19,5 @@ --warning: #ff603e; --primary-fill: #c32ea3; --secondary-fill: #a75a93; + --drop-shadow: rgba(248, 245, 245, 0.153); } From 2f42cd70939d5868f8e0aaf4cb6db101d8dc0fde Mon Sep 17 00:00:00 2001 From: Roie Natan Date: Thu, 9 Nov 2023 18:38:18 -0500 Subject: [PATCH 06/21] version 1 init --- src/constants.scss | 6 ++--- .../Notification/index.scss | 6 +++-- .../components/Billing/AddingCard/index.scss | 3 ++- .../MyAccount/components/Billing/index.scss | 2 +- .../DeleteUserModal/MainStep/index.scss | 4 ++-- .../components/Profile/Profile.module.scss | 2 ++ .../UserDetails/UserDetails.module.scss | 4 +--- .../UserDetailsPreview.module.scss | 2 +- .../AddBankDetails/index.scss | 2 -- .../MembersComponent/index.scss | 10 ++++---- src/pages/billing/Billing.module.scss | 4 ++-- .../ChatComponent/ChatComponent.module.scss | 4 ++-- .../MessageReply/MessageReply.module.scss | 7 +++--- .../CommonCard/CommonCard.module.scss | 4 ++-- .../CommonManagement.module.scss | 7 +++--- .../PopoverButton/PopoverButton.module.scss | 6 ++--- .../PopoverItem/PopoverItem.module.scss | 8 +++---- .../components/PopoverItem/PopoverItem.tsx | 2 +- .../PopoverPanel/PopoverPanel.module.scss | 2 +- .../PermissionSelection.module.scss | 8 +++---- .../components/FeedCard/FeedCard.module.scss | 2 +- .../FeedCardContent.module.scss | 4 ++-- .../FeedCardHeader/FeedCardHeader.module.scss | 5 ++-- .../FeedItemBaseContent.module.scss | 2 +- .../CreationForm/CreationForm.module.scss | 1 + .../ProjectCreation.module.scss | 1 + .../DirectMessageModal.module.scss | 2 +- .../SearchInput/SearchInput.module.scss | 6 ++--- .../FeedItemBaseContent.module.scss | 4 ++-- .../PlusButton/PlusButton.module.scss | 4 ++-- .../InboxFilterButton.module.scss | 2 +- .../components/Settings/Settings.module.scss | 1 + .../BackgroundNotification/index.scss | 16 ++++--------- src/shared/components/DeleteModal/index.scss | 1 - src/shared/components/Dropdown/index.scss | 16 ++++++------- .../components/ElementDropdown/index.scss | 2 +- .../components/Form/Checkbox/index.scss | 2 +- src/shared/components/Form/Input/index.scss | 12 +++++----- .../Modal/components/ClosePrompt/index.scss | 4 ++-- src/shared/components/Modal/index.scss | 1 + .../components/ReportModal/ReportModal.tsx | 5 +++- src/shared/components/ReportModal/index.scss | 13 ++++------- src/shared/components/SocialLinks/index.scss | 1 - .../components/Header/Header.module.scss | 1 + .../ui-kit/TextEditor/TextEditor.module.scss | 3 +-- .../components/Header/Header.module.scss | 2 +- .../components/Header/Header.module.scss | 2 +- .../components/Trigger/Trigger.module.scss | 8 +++---- src/shared/utils/getTheme.ts | 23 ++++++++----------- 49 files changed, 115 insertions(+), 124 deletions(-) diff --git a/src/constants.scss b/src/constants.scss index 2afb37a95a..c4704d992c 100644 --- a/src/constants.scss +++ b/src/constants.scss @@ -119,7 +119,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 +143,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/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/MyAccount/components/Billing/AddingCard/index.scss b/src/pages/MyAccount/components/Billing/AddingCard/index.scss index ba8ff2152c..2f13d3cb4d 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,6 +30,7 @@ font-size: $xsmall; text-align: center; white-space: pre-line; + color: var(--primary-text); } .billing-adding-card__content__button { 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..2a2f91289b 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; diff --git a/src/pages/MyAccount/components/Profile/components/UserDetails/UserDetails.module.scss b/src/pages/MyAccount/components/Profile/components/UserDetails/UserDetails.module.scss index 9af7df8f38..ea31cb856c 100644 --- a/src/pages/MyAccount/components/Profile/components/UserDetails/UserDetails.module.scss +++ b/src/pages/MyAccount/components/Profile/components/UserDetails/UserDetails.module.scss @@ -10,7 +10,7 @@ flex-direction: column; align-items: center; text-align: center; - color: $secondary-blue; + color: var(--primary-text); } .form { @@ -153,8 +153,6 @@ .textFieldLabelWrapper { @include body-sm-regular; - - color: $c-gray-80; } .textFieldInput { diff --git a/src/pages/MyAccount/components/Profile/components/UserDetails/components/UserDetailsPreview/UserDetailsPreview.module.scss b/src/pages/MyAccount/components/Profile/components/UserDetails/components/UserDetailsPreview/UserDetailsPreview.module.scss index 6daf9b9e98..dca23a5828 100644 --- a/src/pages/MyAccount/components/Profile/components/UserDetails/components/UserDetailsPreview/UserDetailsPreview.module.scss +++ b/src/pages/MyAccount/components/Profile/components/UserDetails/components/UserDetailsPreview/UserDetailsPreview.module.scss @@ -16,7 +16,7 @@ .name { @include h6; - + color: var(--primary-text); margin: 0 0 0.25rem; text-align: left; } 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/MembersComponent/index.scss b/src/pages/OldCommon/components/CommonDetailContainer/MembersComponent/index.scss index a76e3d3505..e5bbf6a424 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 { @@ -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/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 d1b7f368d9..e9bc2fe9d8 100644 --- a/src/pages/common/components/ChatComponent/ChatComponent.module.scss +++ b/src/pages/common/components/ChatComponent/ChatComponent.module.scss @@ -68,7 +68,7 @@ line-height: 1.5rem; border-radius: 1.25rem; background-color: var(--secondary-background); - border: 0.0625rem solid $c-neutrals-200; + border: 0.0625rem solid var(--gentle-stroke); outline: none; resize: none; font-size: 0.875rem; @@ -106,7 +106,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/MessageReply/MessageReply.module.scss b/src/pages/common/components/ChatComponent/components/MessageReply/MessageReply.module.scss index bea30b1c7b..5a2a74f296 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 { @@ -67,4 +67,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 e84cb37ed6..089bf6bd9a 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,12 +23,11 @@ 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; 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..8787b2c5e2 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; @@ -67,7 +67,7 @@ .pendingStatus { font-size: $small; line-height: 1.25rem; - color: $light-gray-2; + color: var(--primary-text); margin: 0; } diff --git a/src/pages/common/components/CommonMemberInfo/components/PopoverItem/PopoverItem.tsx b/src/pages/common/components/CommonMemberInfo/components/PopoverItem/PopoverItem.tsx index 0bc159aee1..b7c0c5cea1 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 ( @@ -158,6 +160,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..c440ff1bdc 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,9 @@ 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); } .report-modal__button-container { @@ -54,8 +55,6 @@ } .report-modal__button-container__cancel { - background-color: $light-gray-1; - color: $light-gray-2; margin-right: 0.75rem; } @@ -64,12 +63,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/SocialLinks/index.scss b/src/shared/components/SocialLinks/index.scss index 7ec52fac10..6eeb2901e2 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%; diff --git a/src/shared/layouts/MultipleSpacesLayout/components/Header/Header.module.scss b/src/shared/layouts/MultipleSpacesLayout/components/Header/Header.module.scss index 6461d9be01..fb37129fb9 100644 --- a/src/shared/layouts/MultipleSpacesLayout/components/Header/Header.module.scss +++ b/src/shared/layouts/MultipleSpacesLayout/components/Header/Header.module.scss @@ -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/ui-kit/TextEditor/TextEditor.module.scss b/src/shared/ui-kit/TextEditor/TextEditor.module.scss index bc7b69ad1e..cfd9b110e2 100644 --- a/src/shared/ui-kit/TextEditor/TextEditor.module.scss +++ b/src/shared/ui-kit/TextEditor/TextEditor.module.scss @@ -6,14 +6,13 @@ } .editorWrapper { - --text-editor-border: 0.0625rem solid #{$c-neutrals-100}; + --text-editor-border: 0.0625rem solid var(--gentle-stroke); --text-editor-elements-margin: 0.5rem; --text-editor-elements-indent: 1.5rem; --text-editor-elements-fs: #{$xsmall}; display: flex; flex-direction: column; - //background-color: $c-shades-white; } .editorWrapperReadOnly { --text-editor-border: 0; diff --git a/src/shared/ui-kit/TextEditor/components/Header/Header.module.scss b/src/shared/ui-kit/TextEditor/components/Header/Header.module.scss index 5013915bd2..3f9cb35cd3 100644 --- a/src/shared/ui-kit/TextEditor/components/Header/Header.module.scss +++ b/src/shared/ui-kit/TextEditor/components/Header/Header.module.scss @@ -6,7 +6,7 @@ justify-content: space-between; font-size: $xsmall; line-height: 120%; - color: $c-neutrals-600; + color: var(--primary-text); } .optionalHint { diff --git a/src/shared/ui-kit/UploadFiles/components/Header/Header.module.scss b/src/shared/ui-kit/UploadFiles/components/Header/Header.module.scss index 5013915bd2..3f9cb35cd3 100644 --- a/src/shared/ui-kit/UploadFiles/components/Header/Header.module.scss +++ b/src/shared/ui-kit/UploadFiles/components/Header/Header.module.scss @@ -6,7 +6,7 @@ justify-content: space-between; font-size: $xsmall; line-height: 120%; - color: $c-neutrals-600; + color: var(--primary-text); } .optionalHint { diff --git a/src/shared/ui-kit/UploadFiles/components/Trigger/Trigger.module.scss b/src/shared/ui-kit/UploadFiles/components/Trigger/Trigger.module.scss index 0e53876b57..840d469c38 100644 --- a/src/shared/ui-kit/UploadFiles/components/Trigger/Trigger.module.scss +++ b/src/shared/ui-kit/UploadFiles/components/Trigger/Trigger.module.scss @@ -1,9 +1,9 @@ @import "../../../../../constants"; .container { - --upload-trigger-color: $c-pink-light; - --upload-trigger-border-color: #{$c-neutrals-100}; - --upload-trigger-border: 0.0625rem solid var(--upload-trigger-border-color); + --upload-trigger-color: var(--primary-text); + --upload-trigger-border-color: var(--gentle-stroke); + --upload-trigger-border: 0.0625rem solid var(--gentle-stroke); position: relative; width: 6.25rem; @@ -14,7 +14,7 @@ justify-content: center; align-items: center; color: var(--upload-trigger-color); - background-color: $c-shades-white; + background-color: var(--primary-background); border: var(--upload-trigger-border); cursor: pointer; transition: color 0.2s, border-color 0.2s; diff --git a/src/shared/utils/getTheme.ts b/src/shared/utils/getTheme.ts index 79652e5c44..c3166cf646 100644 --- a/src/shared/utils/getTheme.ts +++ b/src/shared/utils/getTheme.ts @@ -1,19 +1,14 @@ -//import { StorageKey } from "@/shared/constants"; +import { StorageKey } from "../constants"; import { Theme } from "../constants/theme"; export const getTheme = () => { - /** - * Light mode is the default until we have a complete color scheme for dark mode. - */ - return Theme.Light; + const theme = localStorage.getItem(StorageKey.Theme) as Theme | null; + if (theme && Object.values(Theme).includes(theme)) { + return theme; + } - // const theme = localStorage.getItem(StorageKey.Theme) as Theme | null; - // if (theme && Object.values(Theme).includes(theme)) { - // return theme; - // } - - // const isDarkThemePreferred = window.matchMedia( - // `(prefers-color-scheme: ${Theme.Dark})`, - // ); - // return isDarkThemePreferred ? Theme.Dark : Theme.Light; + const isDarkThemePreferred = window.matchMedia( + `(prefers-color-scheme: ${Theme.Dark})`, + ); + return isDarkThemePreferred ? Theme.Dark : Theme.Light; }; From e54a0877515bd7388c104057a0ecda511301ca08 Mon Sep 17 00:00:00 2001 From: Roie Natan Date: Fri, 10 Nov 2023 16:02:04 -0500 Subject: [PATCH 07/21] version 2 --- .../Billing/components/Header/Header.module.scss | 1 - .../MyAccount/components/Profile/Profile.tsx | 15 +++++++++++++++ .../components/MenuButton/MenuButton.module.scss | 1 - .../ChatContent/ChatContent.module.scss | 3 ++- .../ProjectCreation/ProjectCreation.module.scss | 3 ++- .../FeedItemPreviewModal.module.scss | 3 +-- .../Settings/components/Header/Header.module.scss | 1 - .../EditMessageInput/EditMessageInput.module.scss | 4 ++-- src/shared/components/DeletePrompt/index.scss | 9 +++++---- .../components/LayoutTabs/LayoutTabs.module.scss | 6 +++--- src/shared/ui-kit/Button/Button.module.scss | 5 ++--- .../TopNavigationWithBlocks.module.scss | 2 +- 12 files changed, 33 insertions(+), 20 deletions(-) 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/Profile/Profile.tsx b/src/pages/MyAccount/components/Profile/Profile.tsx index d0ffbcafb6..bbcd656758 100644 --- a/src/pages/MyAccount/components/Profile/Profile.tsx +++ b/src/pages/MyAccount/components/Profile/Profile.tsx @@ -3,9 +3,13 @@ import { useDispatch, useSelector } from "react-redux"; import { logOut } from "@/pages/Auth/store/actions"; import { selectUser } from "@/pages/Auth/store/selectors"; import { ButtonIcon, Loader } from "@/shared/components"; +import { Theme } 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 { changeTheme } from "@/shared/store/actions"; +import { selectTheme } from "@/shared/store/selectors"; import { Button, ButtonVariant } from "@/shared/ui-kit"; import { Header, MenuButton, UserDetails, UserDetailsRef } from "./components"; import styles from "./Profile.module.scss"; @@ -23,6 +27,7 @@ const Profile: FC = (props) => { const [isSubmitting, setIsSubmitting] = useState(false); const user = useSelector(selectUser()); const isMobileView = useIsTabletView(); + const theme = useSelector(selectTheme); const handleEditingChange = (isEditing: boolean) => { setIsEditing(isEditing); @@ -49,6 +54,10 @@ const Profile: FC = (props) => { userDetailsRef.current?.submit(); }; + const handleThemeToggle = () => { + dispatch(changeTheme(theme === Theme.Dark ? Theme.Light : Theme.Dark)); + }; + const handleLogout = () => { dispatch(logOut()); }; @@ -116,6 +125,12 @@ const Profile: FC = (props) => { text="Billing" to={getBillingPagePath()} /> + } + /> Date: Mon, 13 Nov 2023 09:57:04 -0500 Subject: [PATCH 08/21] version 3 --- .../ChatComponent/ChatComponent.module.scss | 1 + .../ChatContent/ChatContent.module.scss | 2 +- .../Separator/Separator.module.scss | 2 +- .../components/PopoverItem/PopoverItem.tsx | 2 +- .../FeedCardTags/FeedCardTags.module.scss | 2 +- .../JoinProjectModal/JoinProjectModal.tsx | 4 +--- .../CommonCreation/CommonCreation.module.scss | 3 ++- .../FeedItemPreviewModal.tsx | 8 +------ .../ProfileContent/ProfileContent.tsx | 2 +- .../SplitView/SplitView.module.scss | 4 ++-- .../NewStreamButton.module.scss | 2 +- .../components/DeleteModal/DeleteModal.tsx | 9 ++++---- src/shared/components/DeleteModal/index.scss | 23 ------------------- src/shared/components/HideModal/HideModal.tsx | 4 +--- src/shared/components/Modal/Modal.tsx | 23 +++---------------- .../components/ReportModal/ReportModal.tsx | 4 +--- src/shared/components/ReportModal/index.scss | 1 + .../components/ShareModal/ShareModal.tsx | 4 +--- src/shared/icons/copy.icon.tsx | 6 +++-- src/shared/icons/reply.icon.tsx | 4 +++- src/shared/interfaces/ModalProps.tsx | 8 ------- .../DesktopCommonDropdown.module.scss | 2 +- .../components/Projects/Projects.module.scss | 7 +++--- .../MultipleSpacesLayout.module.scss | 2 +- .../TreeItemTrigger.module.scss | 2 +- .../ContextMenuItem.module.scss | 2 +- .../ImageGalleryModal/ImageGalleryModal.scss | 2 +- src/styles/theme.scss | 4 ++-- src/styles/typography.scss | 6 ++--- 29 files changed, 45 insertions(+), 100 deletions(-) diff --git a/src/pages/common/components/ChatComponent/ChatComponent.module.scss b/src/pages/common/components/ChatComponent/ChatComponent.module.scss index e9bc2fe9d8..4657b93d0e 100644 --- a/src/pages/common/components/ChatComponent/ChatComponent.module.scss +++ b/src/pages/common/components/ChatComponent/ChatComponent.module.scss @@ -97,6 +97,7 @@ margin-bottom: 0.8rem; margin-right: 0.5rem; height: 1.5rem; + color: var(--primary-text); } .sendIcon { 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 8a75f8bf67..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; 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/CommonMemberInfo/components/PopoverItem/PopoverItem.tsx b/src/pages/common/components/CommonMemberInfo/components/PopoverItem/PopoverItem.tsx index b7c0c5cea1..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 ( @@ -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 5e71e466ea..3123b7c0b0 100644 --- a/src/shared/components/DeleteModal/index.scss +++ b/src/shared/components/DeleteModal/index.scss @@ -41,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/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/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/ReportModal/ReportModal.tsx b/src/shared/components/ReportModal/ReportModal.tsx index 8329d46d43..31eb26f722 100644 --- a/src/shared/components/ReportModal/ReportModal.tsx +++ b/src/shared/components/ReportModal/ReportModal.tsx @@ -9,7 +9,7 @@ import { useDispatch } from "react-redux"; import { createReport } from "@/pages/OldCommon/store/actions"; import { subscribeToMessageRefresh } from "@/pages/OldCommon/store/saga"; import { Loader } from "@/shared/components"; -import { Colors, EntityTypes } from "@/shared/constants"; +import { EntityTypes } from "@/shared/constants"; import { useNotification } from "@/shared/hooks"; import { Discussion, @@ -133,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", diff --git a/src/shared/components/ReportModal/index.scss b/src/shared/components/ReportModal/index.scss index c440ff1bdc..16e6bba7c2 100644 --- a/src/shared/components/ReportModal/index.scss +++ b/src/shared/components/ReportModal/index.scss @@ -39,6 +39,7 @@ border: 0.0625rem var(--gentle-stroke) solid; height: 100%; background-color: var(--secondary-background); + color: var(--primary-text); } .report-modal__button-container { 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/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 ( 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/components/SidenavContent/components/CommonDropdown/components/DesktopCommonDropdown/DesktopCommonDropdown.module.scss b/src/shared/layouts/CommonSidenavLayout/components/SidenavContent/components/CommonDropdown/components/DesktopCommonDropdown/DesktopCommonDropdown.module.scss index c76395b388..db0c2f572b 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 { 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 f7e472eeaa..ebe6f1d296 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,7 +13,7 @@ border-radius: 0; &:hover { - --bg-color: var(--hover-fill); + --bg-color: #{var(--hover-fill)}; } @include tablet { @@ -21,10 +21,9 @@ } } .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/MultipleSpacesLayout/MultipleSpacesLayout.module.scss b/src/shared/layouts/MultipleSpacesLayout/MultipleSpacesLayout.module.scss index 92c2ff176e..36efb446ea 100644 --- a/src/shared/layouts/MultipleSpacesLayout/MultipleSpacesLayout.module.scss +++ b/src/shared/layouts/MultipleSpacesLayout/MultipleSpacesLayout.module.scss @@ -48,7 +48,7 @@ } .sidenavContentWrapper { - border-right: 0.25rem solid $c-light-gray-2; + border-right: 0.25rem solid var(--gentle-stroke); @include tablet { border: 0; 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 bf5f53e5c4..e2a2fc3d6a 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 @@ -69,7 +69,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/ui-kit/ContextMenu/components/ContextMenuItem/ContextMenuItem.module.scss b/src/shared/ui-kit/ContextMenu/components/ContextMenuItem/ContextMenuItem.module.scss index 42d02b9bd0..04fa447c13 100644 --- a/src/shared/ui-kit/ContextMenu/components/ContextMenuItem/ContextMenuItem.module.scss +++ b/src/shared/ui-kit/ContextMenu/components/ContextMenuItem/ContextMenuItem.module.scss @@ -3,7 +3,7 @@ .item { --item-color: var(--primary-text); --item-bg-color: var(--primary-background); - --item-border: 0.0625rem solid #{$c-neutrals-100}; + --item-border: 0.0625rem solid var(--gentle-stroke); margin: 0; padding: 1.125rem 1.5rem; diff --git a/src/shared/ui-kit/ImageGallery/components/ImageGalleryModal/ImageGalleryModal.scss b/src/shared/ui-kit/ImageGallery/components/ImageGalleryModal/ImageGalleryModal.scss index 57ea1745ca..95e9670098 100644 --- a/src/shared/ui-kit/ImageGallery/components/ImageGalleryModal/ImageGalleryModal.scss +++ b/src/shared/ui-kit/ImageGallery/components/ImageGalleryModal/ImageGalleryModal.scss @@ -41,7 +41,7 @@ position: absolute; bottom: 2.125rem; z-index: 2; - color: $black; + color: var(--primary-text); &:disabled { color: $gray; diff --git a/src/styles/theme.scss b/src/styles/theme.scss index abc23dcb82..c233d102af 100644 --- a/src/styles/theme.scss +++ b/src/styles/theme.scss @@ -15,9 +15,9 @@ --secondary-background: #2e3452; --hover-fill: #131b23; --primary-text: #ffffff; - --gentle-stroke: #525876; + --gentle-stroke: #2e3452; --warning: #ff603e; --primary-fill: #c32ea3; --secondary-fill: #a75a93; - --drop-shadow: rgba(248, 245, 245, 0.153); + --drop-shadow: rgba(0, 0, 0, 0.15259); } diff --git a/src/styles/typography.scss b/src/styles/typography.scss index 74a1321b9a..90a7fc4ab4 100644 --- a/src/styles/typography.scss +++ b/src/styles/typography.scss @@ -5,7 +5,7 @@ font-weight: normal; font-size: 1.125rem; line-height: 1.25rem; - color: $c-gray-90; + color: var(--primary-text); text-align: center; } @@ -14,7 +14,7 @@ font-weight: 500; font-size: 1rem; line-height: 1.5rem; - color: $c-gray-100; + color: var(--primary-text); text-align: center; } @@ -23,6 +23,6 @@ font-weight: normal; font-size: 0.875rem; line-height: 1.25rem; - color: $c-gray-50; + color: var(--primary-text); text-align: center; } From 784fbf57aa5266ead4e745a4601ac0256358c2bc Mon Sep 17 00:00:00 2001 From: Roie Natan Date: Mon, 13 Nov 2023 17:30:50 -0500 Subject: [PATCH 09/21] version 4 --- .../Billing/AddingCard/AddingCard.tsx | 8 ++---- .../components/Billing/AddingCard/index.scss | 5 ---- .../BankAccountInfo/BankAccountInfo.tsx | 12 +++------ .../Billing/BankAccountInfo/index.scss | 25 +++---------------- .../components/Profile/Profile.module.scss | 4 +++ .../MyAccount/components/Profile/Profile.tsx | 2 +- .../UserDetails/UserDetails.module.scss | 2 +- .../AddBankDetails/AddBankDetails.tsx | 6 ++--- .../FileUploadButton/index.scss | 6 ++--- .../Configuration/index.scss | 4 +-- .../CreateProposalModal/StageName/index.scss | 2 +- .../CreateProposalModal/index.scss | 1 - .../LeaveCommonModal/MainStep/index.scss | 4 +-- .../CommonManagement.module.scss | 2 +- .../PopoverItem/PopoverItem.module.scss | 1 + .../CommonParent/CommonParent.module.scss | 2 +- .../AddProjectButton.module.scss | 9 ++++--- .../components/Project/Project.module.scss | 1 + .../CommonTabs/CommonTabs.module.scss | 6 ++--- .../CommonTopNavigation.module.scss | 1 + .../ModalTriggerButton.module.scss | 4 +-- .../ProposalFeedVotingInfo.module.scss | 4 +-- .../UserVoteInfo/UserVoteInfo.module.scss | 4 +-- .../components/Voters/Voters.module.scss | 2 +- .../VoterItem/VoterItem.module.scss | 2 +- .../VoterList/VoterList.module.scss | 2 +- .../UnsavedChangesPrompt.tsx | 2 +- .../Chat/ChatMessage/ChatMessage.module.scss | 4 +-- src/shared/components/DatePicker/index.scss | 8 +++--- .../components/ClosePrompt/ClosePrompt.tsx | 2 +- .../UserInfoPopup/UserInfoPopup.module.scss | 1 - .../BreadcrumbsItem.module.scss | 2 +- .../BreadcrumbsMenu.module.scss | 1 + .../NavigationItem/NavigationItem.module.scss | 2 +- src/shared/ui-kit/Button/Button.module.scss | 1 - .../ui-kit/MenuButton/MenuButton.module.scss | 8 +++++- src/shared/ui-kit/MenuButton/MenuButton.tsx | 4 +-- .../components/Trigger/Trigger.module.scss | 2 +- 38 files changed, 70 insertions(+), 88 deletions(-) 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 2f13d3cb4d..7a3f3fed03 100644 --- a/src/pages/MyAccount/components/Billing/AddingCard/index.scss +++ b/src/pages/MyAccount/components/Billing/AddingCard/index.scss @@ -32,8 +32,3 @@ white-space: pre-line; color: var(--primary-text); } - -.billing-adding-card__content__button { - color: $purple; - border-radius: 0.5rem; -} 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/Profile/Profile.module.scss b/src/pages/MyAccount/components/Profile/Profile.module.scss index 2a2f91289b..c915c28ba4 100644 --- a/src/pages/MyAccount/components/Profile/Profile.module.scss +++ b/src/pages/MyAccount/components/Profile/Profile.module.scss @@ -67,6 +67,10 @@ border-bottom: 0.0625rem solid $c-gray-20; } +.themeMenuButton { + color: var(--primary-text); +} + .logoutMenuButton { color: $c-pink-mention; } diff --git a/src/pages/MyAccount/components/Profile/Profile.tsx b/src/pages/MyAccount/components/Profile/Profile.tsx index bbcd656758..575520ddc2 100644 --- a/src/pages/MyAccount/components/Profile/Profile.tsx +++ b/src/pages/MyAccount/components/Profile/Profile.tsx @@ -126,7 +126,7 @@ const Profile: FC = (props) => { to={getBillingPagePath()} /> } diff --git a/src/pages/MyAccount/components/Profile/components/UserDetails/UserDetails.module.scss b/src/pages/MyAccount/components/Profile/components/UserDetails/UserDetails.module.scss index ea31cb856c..f624e06c42 100644 --- a/src/pages/MyAccount/components/Profile/components/UserDetails/UserDetails.module.scss +++ b/src/pages/MyAccount/components/Profile/components/UserDetails/UserDetails.module.scss @@ -100,7 +100,6 @@ align-items: center; justify-content: center; background-color: $c-pink-mention; - border: 0.125rem solid $white; border-radius: 50%; cursor: pointer; } @@ -112,6 +111,7 @@ margin-top: 0.625rem; font-weight: 500; + background-color: transparent; } .editAvatarImage { diff --git a/src/pages/OldCommon/components/CommonDetailContainer/AddProposalComponent/AddBankDetails/AddBankDetails.tsx b/src/pages/OldCommon/components/CommonDetailContainer/AddProposalComponent/AddBankDetails/AddBankDetails.tsx index 6ff2127cb1..44d2ebd2b6 100644 --- a/src/pages/OldCommon/components/CommonDetailContainer/AddProposalComponent/AddBankDetails/AddBankDetails.tsx +++ b/src/pages/OldCommon/components/CommonDetailContainer/AddProposalComponent/AddBankDetails/AddBankDetails.tsx @@ -12,8 +12,6 @@ import { isRequestError } from "@/services/Api"; import { BANKS_OPTIONS } from "@/shared/assets/banks"; import { countryList } from "@/shared/assets/countries"; import { - Button, - ButtonVariant, DatePicker, DropdownOption, FilePreview, @@ -33,6 +31,7 @@ import { } from "@/shared/interfaces/api/payMe"; import { BankAccountDetails, DateFormat, User } from "@/shared/models"; import { Gender, GENDER_OPTIONS } from "@/shared/models/Gender"; +import { Button, ButtonVariant } from "@/shared/ui-kit"; import { formatDate } from "@/shared/utils"; import { getFileNameForUploading, @@ -593,6 +592,7 @@ export const AddBankDetails = (props: IProps) => { 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/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/common/components/CommonManagement/CommonManagement.module.scss b/src/pages/common/components/CommonManagement/CommonManagement.module.scss index 089bf6bd9a..cdbc80039b 100644 --- a/src/pages/common/components/CommonManagement/CommonManagement.module.scss +++ b/src/pages/common/components/CommonManagement/CommonManagement.module.scss @@ -32,7 +32,7 @@ transition: background-color 0.2s; &:hover { - background-color: $c-pink-light; + background-color: var(--hover-fill); } } 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 8787b2c5e2..86e989b01d 100644 --- a/src/pages/common/components/CommonMemberInfo/components/PopoverItem/PopoverItem.module.scss +++ b/src/pages/common/components/CommonMemberInfo/components/PopoverItem/PopoverItem.module.scss @@ -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/CommonTabPanels/components/AboutTab/components/CommonParent/CommonParent.module.scss b/src/pages/common/components/CommonTabPanels/components/AboutTab/components/CommonParent/CommonParent.module.scss index 09a3662e89..cd1b476867 100644 --- a/src/pages/common/components/CommonTabPanels/components/AboutTab/components/CommonParent/CommonParent.module.scss +++ b/src/pages/common/components/CommonTabPanels/components/AboutTab/components/CommonParent/CommonParent.module.scss @@ -47,7 +47,7 @@ margin-top: 0.5rem; font-weight: 600; font-size: $xsmall; - color: $c-primary-400; + color: var(--primary-fill); text-decoration: none; &:hover { diff --git a/src/pages/common/components/CommonTabPanels/components/AboutTab/components/CommonProjects/components/AddProjectButton/AddProjectButton.module.scss b/src/pages/common/components/CommonTabPanels/components/AboutTab/components/CommonProjects/components/AddProjectButton/AddProjectButton.module.scss index 916b80a19f..d80087ee18 100644 --- a/src/pages/common/components/CommonTabPanels/components/AboutTab/components/CommonProjects/components/AddProjectButton/AddProjectButton.module.scss +++ b/src/pages/common/components/CommonTabPanels/components/AboutTab/components/CommonProjects/components/AddProjectButton/AddProjectButton.module.scss @@ -36,9 +36,9 @@ display: flex; justify-content: center; align-items: center; - color: var(--main-color); - background-color: $c-primary-100; - border: 0.0625rem solid var(--main-color); + color: var(--primary-fill); + background-color: var(--secondary-background); + border: 0.0625rem solid var(--primary-fill); border-radius: 50%; box-sizing: border-box; } @@ -55,11 +55,12 @@ font-family: PoppinsSans, sans-serif; font-weight: bold; font-size: $small; - color: var(--main-color); + color: var(--primary-fill); text-decoration: var(--text-decoration); } .tooltipContent { max-width: 20rem; z-index: 3; + background-color: var(--secondary-background); } diff --git a/src/pages/common/components/CommonTabPanels/components/AboutTab/components/CommonProjects/components/Project/Project.module.scss b/src/pages/common/components/CommonTabPanels/components/AboutTab/components/CommonProjects/components/Project/Project.module.scss index 0f1f5bb76b..f20994e1aa 100644 --- a/src/pages/common/components/CommonTabPanels/components/AboutTab/components/CommonProjects/components/Project/Project.module.scss +++ b/src/pages/common/components/CommonTabPanels/components/AboutTab/components/CommonProjects/components/Project/Project.module.scss @@ -43,4 +43,5 @@ .tooltipContent { max-width: 20rem; z-index: 3; + background-color: var(--primary-background); } diff --git a/src/pages/common/components/CommonTabs/CommonTabs.module.scss b/src/pages/common/components/CommonTabs/CommonTabs.module.scss index 4c76966364..c9bb04e591 100644 --- a/src/pages/common/components/CommonTabs/CommonTabs.module.scss +++ b/src/pages/common/components/CommonTabs/CommonTabs.module.scss @@ -15,8 +15,8 @@ padding: 0 0 var(--bottom-tabs-pb); display: grid; grid-template-columns: repeat(var(--items-amount, 5), 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); } .tab { @@ -25,7 +25,7 @@ --tab-fw: 600; --tab-fs: #{$small}; --tab-inactive-color: #{$c-neutrals-300}; - --tab-inactive-hover-color: #{$c-neutrals-600}; + --tab-inactive-hover-color: #{var(--primary-text)}; --tab-active-color: #{$c-neutrals-600}; @include tablet { diff --git a/src/pages/common/components/CommonTopNavigation/CommonTopNavigation.module.scss b/src/pages/common/components/CommonTopNavigation/CommonTopNavigation.module.scss index 17a81362d7..4b64911eef 100644 --- a/src/pages/common/components/CommonTopNavigation/CommonTopNavigation.module.scss +++ b/src/pages/common/components/CommonTopNavigation/CommonTopNavigation.module.scss @@ -2,6 +2,7 @@ .container { display: none; + background-color: var(--secondary-background); @include tablet { z-index: 2; diff --git a/src/pages/common/components/ProposalFeedCard/components/ModalTriggerButton/ModalTriggerButton.module.scss b/src/pages/common/components/ProposalFeedCard/components/ModalTriggerButton/ModalTriggerButton.module.scss index 8ca098b29c..70b91c5c69 100644 --- a/src/pages/common/components/ProposalFeedCard/components/ModalTriggerButton/ModalTriggerButton.module.scss +++ b/src/pages/common/components/ProposalFeedCard/components/ModalTriggerButton/ModalTriggerButton.module.scss @@ -10,7 +10,7 @@ text-align: center; line-height: 100%; letter-spacing: 0.01em; - background-color: $c-neutrals-100; + background-color: var(--secondary-background); border: 0; border-radius: 0.25rem; overflow: hidden; @@ -21,7 +21,7 @@ box-sizing: border-box; &:hover { - background-color: $c-neutrals-200; + background-color: var(--hover-fill); } } diff --git a/src/pages/common/components/ProposalFeedCard/components/ProposalFeedVotingInfo/ProposalFeedVotingInfo.module.scss b/src/pages/common/components/ProposalFeedCard/components/ProposalFeedVotingInfo/ProposalFeedVotingInfo.module.scss index c7cf214ea1..59a1f7654a 100644 --- a/src/pages/common/components/ProposalFeedCard/components/ProposalFeedVotingInfo/ProposalFeedVotingInfo.module.scss +++ b/src/pages/common/components/ProposalFeedCard/components/ProposalFeedVotingInfo/ProposalFeedVotingInfo.module.scss @@ -17,8 +17,8 @@ $two-columns-grid-gap: 1rem 0.5rem; display: grid; grid-template-columns: repeat(var(--columns-amount, 4), auto); grid-gap: var(--columns-gap); - background-color: $c-shades-white; - border: 0.0625rem solid $c-neutrals-100; + background-color: var(--primary-background); + border: 0.0625rem solid var(--gentle-stroke); box-sizing: border-box; } .containerCol4 { diff --git a/src/pages/common/components/ProposalFeedCard/components/UserVoteInfo/UserVoteInfo.module.scss b/src/pages/common/components/ProposalFeedCard/components/UserVoteInfo/UserVoteInfo.module.scss index 847ccc8bb9..11202b96f4 100644 --- a/src/pages/common/components/ProposalFeedCard/components/UserVoteInfo/UserVoteInfo.module.scss +++ b/src/pages/common/components/ProposalFeedCard/components/UserVoteInfo/UserVoteInfo.module.scss @@ -8,8 +8,8 @@ align-items: center; font-weight: bold; font-size: $small; - color: $c-neutrals-600; - background-color: $c-neutrals-100; + color: var(--primary-text); + background-color: var(--secondary-background); border-radius: 0.25rem; box-sizing: border-box; } diff --git a/src/pages/common/components/ProposalFeedCard/components/Voters/Voters.module.scss b/src/pages/common/components/ProposalFeedCard/components/Voters/Voters.module.scss index cdf44bf8fa..1ce5537047 100644 --- a/src/pages/common/components/ProposalFeedCard/components/Voters/Voters.module.scss +++ b/src/pages/common/components/ProposalFeedCard/components/Voters/Voters.module.scss @@ -7,6 +7,6 @@ max-height: 22.75rem; display: flex; justify-content: center; - background-color: $c-shades-white; + background-color: var(--primary-background); overflow-y: auto; } diff --git a/src/pages/common/components/ProposalFeedCard/components/Voters/components/VoterItem/VoterItem.module.scss b/src/pages/common/components/ProposalFeedCard/components/Voters/components/VoterItem/VoterItem.module.scss index 3b20b565f1..0acaedada6 100644 --- a/src/pages/common/components/ProposalFeedCard/components/Voters/components/VoterItem/VoterItem.module.scss +++ b/src/pages/common/components/ProposalFeedCard/components/Voters/components/VoterItem/VoterItem.module.scss @@ -5,7 +5,7 @@ display: flex; justify-content: space-between; align-items: center; - background-color: $c-shades-white; + background-color: var(--primary-background); } .content { diff --git a/src/pages/common/components/ProposalFeedCard/components/Voters/components/VoterList/VoterList.module.scss b/src/pages/common/components/ProposalFeedCard/components/Voters/components/VoterList/VoterList.module.scss index 15c241ced5..5f24dd46eb 100644 --- a/src/pages/common/components/ProposalFeedCard/components/Voters/components/VoterList/VoterList.module.scss +++ b/src/pages/common/components/ProposalFeedCard/components/Voters/components/VoterList/VoterList.module.scss @@ -10,7 +10,7 @@ } .voterItem { - border-bottom: 0.0625rem solid $c-neutrals-200; + border-bottom: 0.0625rem solid var(--gentle-stroke); &:last-child { border-bottom: 0; diff --git a/src/pages/commonCreation/components/ProjectCreation/components/UnsavedChangesPrompt/UnsavedChangesPrompt.tsx b/src/pages/commonCreation/components/ProjectCreation/components/UnsavedChangesPrompt/UnsavedChangesPrompt.tsx index 7d85e3c7ff..df91c01079 100644 --- a/src/pages/commonCreation/components/ProjectCreation/components/UnsavedChangesPrompt/UnsavedChangesPrompt.tsx +++ b/src/pages/commonCreation/components/ProjectCreation/components/UnsavedChangesPrompt/UnsavedChangesPrompt.tsx @@ -48,7 +48,7 @@ const UnsavedChangesPrompt: FC = (props) => { diff --git a/src/shared/components/Chat/ChatMessage/ChatMessage.module.scss b/src/shared/components/Chat/ChatMessage/ChatMessage.module.scss index 8c2e4c50ad..b89aaac182 100644 --- a/src/shared/components/Chat/ChatMessage/ChatMessage.module.scss +++ b/src/shared/components/Chat/ChatMessage/ChatMessage.module.scss @@ -192,7 +192,7 @@ } .replyMessageNameCurrentUser { - color: $c-neutrals-600; + color: $black; } .replyMessageNameWithImage { @@ -213,7 +213,7 @@ } .replyMessageContentCurrentUser { - color: $c-neutrals-600; + color: $black; } .replyMessageContentWithImage { 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/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/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/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..48e9e3ee0c 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 @@ -6,6 +6,7 @@ width: 16.25rem; max-height: 23.625rem; overflow-y: auto; + background-color: var((--primary-background)); } .contextMenuItem { 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/ui-kit/Button/Button.module.scss b/src/shared/ui-kit/Button/Button.module.scss index 031ba018b7..1f07420e3f 100644 --- a/src/shared/ui-kit/Button/Button.module.scss +++ b/src/shared/ui-kit/Button/Button.module.scss @@ -226,7 +226,6 @@ .buttonOutlineDarkPinkVariant { --btn-color: #{$c-pink-next-dark}; - --btn-bg-color: var(--primary-background); --btn-border-color: #{$c-pink-next-dark}; --btn-border: 0.0625rem solid var(--btn-border-color); diff --git a/src/shared/ui-kit/MenuButton/MenuButton.module.scss b/src/shared/ui-kit/MenuButton/MenuButton.module.scss index 4150411fe4..6f52a48477 100644 --- a/src/shared/ui-kit/MenuButton/MenuButton.module.scss +++ b/src/shared/ui-kit/MenuButton/MenuButton.module.scss @@ -1,7 +1,13 @@ @import "../../../constants.scss"; +.buttonIcon { + &:hover { + background-color: var(--hover-fill); + } +} + .icon { width: 1.5rem; height: 1.5rem; - color: $c-gray-800; + color: var(--primary-text); } diff --git a/src/shared/ui-kit/MenuButton/MenuButton.tsx b/src/shared/ui-kit/MenuButton/MenuButton.tsx index 5fe9623398..ef27f69c39 100644 --- a/src/shared/ui-kit/MenuButton/MenuButton.tsx +++ b/src/shared/ui-kit/MenuButton/MenuButton.tsx @@ -14,10 +14,10 @@ const MenuButton: ForwardRefRenderFunction< HTMLButtonElement, MenuButtonProps > = (props, ref) => { - const { onClick, variant = ButtonVariant.PrimaryGray } = props; + const { onClick } = props; return ( - + ); diff --git a/src/shared/ui-kit/UploadFiles/components/Trigger/Trigger.module.scss b/src/shared/ui-kit/UploadFiles/components/Trigger/Trigger.module.scss index 840d469c38..9352709f09 100644 --- a/src/shared/ui-kit/UploadFiles/components/Trigger/Trigger.module.scss +++ b/src/shared/ui-kit/UploadFiles/components/Trigger/Trigger.module.scss @@ -22,7 +22,7 @@ box-sizing: border-box; &:hover { - --upload-trigger-color: var(--hover-fill); + --upload-trigger-color: var(--primary-text); --upload-trigger-border-color: #{$c-primary-200}; } From d544491a3039e14adaf13fd8cc398da321faaa87 Mon Sep 17 00:00:00 2001 From: Roie Natan Date: Mon, 13 Nov 2023 17:51:34 -0500 Subject: [PATCH 10/21] updated colors for LoadingBreadcrumbsItem --- .../LoadingBreadcrumbsItem.tsx | 44 ++++++++++++------- 1 file changed, 27 insertions(+), 17 deletions(-) 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; From 12c24b1eb73405e33da1c8bf268b161c51efbce4 Mon Sep 17 00:00:00 2001 From: Roie Natan Date: Wed, 15 Nov 2023 12:49:29 -0500 Subject: [PATCH 11/21] version 5 --- public/assets/images/floppy-disk.svg | 25 ++++++++++++------- .../Billing/MobileBilling/index.scss | 2 +- .../MembersComponent/index.scss | 2 +- .../MessageReply/MessageReply.module.scss | 3 ++- .../components/AboutTab/AboutTab.module.scss | 7 ------ .../components/AboutTab/AboutTab.tsx | 4 --- .../MemberDropdown/MemberDropdown.module.scss | 2 +- .../FeedCardTags/FeedCardTags.module.scss | 7 +++++- .../components/FeedCardTags/FeedCardTags.tsx | 7 +++++- .../FollowFeedItemButton.module.scss | 3 ++- src/services/PayMeService.ts | 2 +- .../Chat/ChatMessage/ChatMessage.module.scss | 10 ++++---- src/shared/components/SocialLinks/index.scss | 2 +- src/shared/components/Tabs/Tab/index.scss | 8 +++--- .../components/Editor/Editor.module.scss | 1 + .../components/EmojiPicker/EmojiPicker.tsx | 10 +++++++- .../MentionDropdown.module.scss | 11 ++++---- src/styles/theme.scss | 6 +++-- 18 files changed, 66 insertions(+), 46 deletions(-) diff --git a/public/assets/images/floppy-disk.svg b/public/assets/images/floppy-disk.svg index 35104ff896..e763eb4915 100644 --- a/public/assets/images/floppy-disk.svg +++ b/public/assets/images/floppy-disk.svg @@ -1,10 +1,17 @@ - - - - - - - - - + + + + + + + + + + + + + + + + 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/OldCommon/components/CommonDetailContainer/MembersComponent/index.scss b/src/pages/OldCommon/components/CommonDetailContainer/MembersComponent/index.scss index e5bbf6a424..ffb837617b 100644 --- a/src/pages/OldCommon/components/CommonDetailContainer/MembersComponent/index.scss +++ b/src/pages/OldCommon/components/CommonDetailContainer/MembersComponent/index.scss @@ -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; } 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 5a2a74f296..a73cb951fe 100644 --- a/src/pages/common/components/ChatComponent/components/MessageReply/MessageReply.module.scss +++ b/src/pages/common/components/ChatComponent/components/MessageReply/MessageReply.module.scss @@ -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; } diff --git a/src/pages/common/components/CommonTabPanels/components/AboutTab/AboutTab.module.scss b/src/pages/common/components/CommonTabPanels/components/AboutTab/AboutTab.module.scss index 5d4eae9b9a..a2e7864d7c 100644 --- a/src/pages/common/components/CommonTabPanels/components/AboutTab/AboutTab.module.scss +++ b/src/pages/common/components/CommonTabPanels/components/AboutTab/AboutTab.module.scss @@ -68,13 +68,6 @@ } } -.separator { - width: 100%; - height: 0.0625rem; - margin: 0.875rem 0 1.75rem; - background-color: $c-neutrals-200; -} - .commonProjectsWrapper { @include tablet { padding-left: 2.5rem; diff --git a/src/pages/common/components/CommonTabPanels/components/AboutTab/AboutTab.tsx b/src/pages/common/components/CommonTabPanels/components/AboutTab/AboutTab.tsx index 434b6d0bca..b501a27e19 100644 --- a/src/pages/common/components/CommonTabPanels/components/AboutTab/AboutTab.tsx +++ b/src/pages/common/components/CommonTabPanels/components/AboutTab/AboutTab.tsx @@ -79,7 +79,6 @@ const AboutTab: FC = (props) => { const renderMobileColumn = () => (
    -
    {subCommons.length > 0 && ( <> = (props) => { circles={governance.circles} styles={{ projectsWrapper: styles.commonProjectsWrapper }} /> -
    )} -
    {rules.length > 0 && } -
    = (props) => { )} {hasUnseenMention &&
    @
    } {isFollowing && ( - + )} {isNewTagVisible && (
    = (props) => { const [isOpen, setIsOpen] = useState(false); const wrapperRef = useRef(null); const { isOutside, setOutsideValue } = useOutsideClick(wrapperRef); + const theme = useSelector(selectTheme); useEffect(() => { if (isOutside) { @@ -67,7 +71,11 @@ const EmojiPicker: FC = (props) => { }, )} > - +
    )}
    diff --git a/src/shared/ui-kit/TextEditor/components/MentionDropdown/MentionDropdown.module.scss b/src/shared/ui-kit/TextEditor/components/MentionDropdown/MentionDropdown.module.scss index a0437499b6..7c910722aa 100644 --- a/src/shared/ui-kit/TextEditor/components/MentionDropdown/MentionDropdown.module.scss +++ b/src/shared/ui-kit/TextEditor/components/MentionDropdown/MentionDropdown.module.scss @@ -6,9 +6,10 @@ left: 2.875rem; width: 20.125rem; max-height: 22.75rem; - background: $white; + background: var(--primary-background); + color: var(--primary-text); border-radius: 0.25rem; - box-shadow: 0 0.0625rem 0.3125rem rgba(0, 0, 0, 0.2); + box-shadow: 0 0.0625rem 0.3125rem var(--drop-shadow); padding: 0; margin: 0; overflow-y: auto; @@ -21,15 +22,15 @@ align-items: center; width: 100%; box-sizing: border-box; - border-bottom: 0.0625rem solid $c-neutrals-200; + border-bottom: 0.0625rem solid var(--gentle-stroke); &:hover { cursor: pointer; - background-color: $c-pink-hover-feed-cards; + background-color: var(--hover-fill); } &:focus { - background-color: $c-pink-hover-feed-cards; + background-color: var(--hover-fill); outline: none; } } diff --git a/src/styles/theme.scss b/src/styles/theme.scss index c233d102af..d9d4de8558 100644 --- a/src/styles/theme.scss +++ b/src/styles/theme.scss @@ -3,10 +3,11 @@ --secondary-background: #f8f8f5; --hover-fill: #fff9fd; --primary-text: #001a36; + --secondary-text: #a75a93; --gentle-stroke: #f4f5f5; --warning: #ff603e; --primary-fill: #c32ea3; - --secondary-fill: #a75a93; + --secondary-fill: #f3d4eb; --drop-shadow: rgba(0, 0, 0, 0.15259); } @@ -15,9 +16,10 @@ --secondary-background: #2e3452; --hover-fill: #131b23; --primary-text: #ffffff; + --secondary-text: #a75a93; --gentle-stroke: #2e3452; --warning: #ff603e; --primary-fill: #c32ea3; - --secondary-fill: #a75a93; + --secondary-fill: #743b65; --drop-shadow: rgba(0, 0, 0, 0.15259); } From 6d486eb3644234b8f3d09e26bf2cd48f0cb5033d Mon Sep 17 00:00:00 2001 From: Roie Natan Date: Wed, 15 Nov 2023 17:05:32 -0500 Subject: [PATCH 12/21] version 6 --- .../ChatFilePreview.module.scss | 7 +++--- .../ProposalTypeSelect.module.scss | 1 - .../ProposalTypeSelect/ProposalTypeSelect.tsx | 6 ++++- .../ProposalTypeSelect/selectorStyles.ts | 25 ++++++++++++++++--- 4 files changed, 30 insertions(+), 9 deletions(-) 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/CommonTabPanels/components/FeedTab/components/NewProposalCreation/components/ProposalTypeSelect/ProposalTypeSelect.module.scss b/src/pages/common/components/CommonTabPanels/components/FeedTab/components/NewProposalCreation/components/ProposalTypeSelect/ProposalTypeSelect.module.scss index b6f67dc803..9c2c782def 100644 --- a/src/pages/common/components/CommonTabPanels/components/FeedTab/components/NewProposalCreation/components/ProposalTypeSelect/ProposalTypeSelect.module.scss +++ b/src/pages/common/components/CommonTabPanels/components/FeedTab/components/NewProposalCreation/components/ProposalTypeSelect/ProposalTypeSelect.module.scss @@ -15,5 +15,4 @@ transform: rotate(90deg); width: 1rem; height: 1rem; - color: $c-neutrals-600; } diff --git a/src/pages/common/components/CommonTabPanels/components/FeedTab/components/NewProposalCreation/components/ProposalTypeSelect/ProposalTypeSelect.tsx b/src/pages/common/components/CommonTabPanels/components/FeedTab/components/NewProposalCreation/components/ProposalTypeSelect/ProposalTypeSelect.tsx index 123d9d8eda..6fde46032f 100644 --- a/src/pages/common/components/CommonTabPanels/components/FeedTab/components/NewProposalCreation/components/ProposalTypeSelect/ProposalTypeSelect.tsx +++ b/src/pages/common/components/CommonTabPanels/components/FeedTab/components/NewProposalCreation/components/ProposalTypeSelect/ProposalTypeSelect.tsx @@ -1,9 +1,12 @@ import React from "react"; +import { useSelector } from "react-redux"; import Select, { components, DropdownIndicatorProps } from "react-select"; import { useFormikContext } from "formik"; import { ProposalsTypes } from "@/shared/constants"; +import { Theme } from "@/shared/constants"; import { RightArrowThinIcon } from "@/shared/icons"; import { NewProposalCreationFormValues } from "@/shared/interfaces"; +import { selectTheme } from "@/shared/store/selectors"; import { selectorStyles } from "./selectorStyles"; import styles from "./ProposalTypeSelect.module.scss"; @@ -39,6 +42,7 @@ const ProposalTypeSelect = ({ commonBalance }: ProposalTypeSelectProps) => { const { values, setFieldValue, handleBlur, touched, errors } = useFormikContext(); const hasError = Boolean(touched.proposalType && errors.proposalType); + const theme = useSelector(selectTheme); return (
    @@ -52,7 +56,7 @@ const ProposalTypeSelect = ({ commonBalance }: ProposalTypeSelectProps) => { }} onBlur={handleBlur("proposalType")} hideSelectedOptions={false} - styles={selectorStyles(hasError)} + styles={selectorStyles(hasError, theme === Theme.Dark)} components={{ DropdownIndicator, }} diff --git a/src/pages/common/components/CommonTabPanels/components/FeedTab/components/NewProposalCreation/components/ProposalTypeSelect/selectorStyles.ts b/src/pages/common/components/CommonTabPanels/components/FeedTab/components/NewProposalCreation/components/ProposalTypeSelect/selectorStyles.ts index 30e329920e..743357a4f1 100644 --- a/src/pages/common/components/CommonTabPanels/components/FeedTab/components/NewProposalCreation/components/ProposalTypeSelect/selectorStyles.ts +++ b/src/pages/common/components/CommonTabPanels/components/FeedTab/components/NewProposalCreation/components/ProposalTypeSelect/selectorStyles.ts @@ -1,16 +1,33 @@ -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 ? "#2e3452" : "#f8f8f5", + }), control: (provided) => ({ ...provided, height: "3rem", ...(hasError && { borderColor: Colors.error }), + backgroundColor: isDarkMode ? "#2e3452" : "#f8f8f5", + color: isDarkMode ? "#ffffff" : "#001a36", + border: "none", + }), + option: (provided) => ({ + ...provided, + backgroundColor: isDarkMode ? "#2e3452" : "#f8f8f5", + color: isDarkMode ? "#ffffff" : "#001a36", }), indicatorSeparator: () => ({ display: "none" }), indicatorsContainer: (provided) => ({ ...provided, - color: `${Colors.black} !important`, + color: isDarkMode ? "#ffffff" : "#001a36", + }), + singleValue: (provided) => ({ + ...provided, + backgroundColor: isDarkMode ? "#2e3452" : "#f8f8f5", + color: isDarkMode ? "#ffffff" : "#001a36", }), -}) \ No newline at end of file +}); From ad764fca3a1e97ca235f6b6f229c31fb7520067c Mon Sep 17 00:00:00 2001 From: Roie Natan Date: Thu, 16 Nov 2023 10:10:58 -0500 Subject: [PATCH 13/21] version 7 --- .../components/LoginContainer/Connect/index.scss | 1 - .../LoginContainer/PhoneAuth/PhoneAuth.tsx | 7 ++++--- .../LoginContainer/PhoneAuth/index.scss | 13 ++++++------- .../LoginContainer/Verification/Verification.tsx | 15 +++++---------- .../LoginContainer/Verification/index.scss | 7 ------- .../Billing/PaymentInformation/index.scss | 4 ++-- .../MemberDropdown/AssignCircleModal.tsx | 4 ++-- .../MemberDropdown/MemberDropdown.module.scss | 7 ------- .../components/MemberDropdown/MemberDropdown.tsx | 2 -- .../UserVoteInfo/UserVoteInfo.module.scss | 9 --------- .../components/UserVoteInfo/UserVoteInfo.tsx | 8 +------- src/shared/components/Dropdown/index.scss | 4 ++-- .../Form/PhoneInput/CustomSelect/index.scss | 1 + src/shared/components/Form/PhoneInput/index.scss | 6 +++--- src/shared/components/MenuButton/index.scss | 6 +++--- src/shared/components/PaymentMethod/index.scss | 2 +- .../DesktopCommonDropdown.module.scss | 2 +- .../NavigationItem/NavigationItem.module.scss | 2 +- .../TreeItemTrigger/TreeItemTrigger.module.scss | 4 ++-- .../components/MenuItem/MenuItem.module.scss | 4 ++-- .../UnauthenticatedContent.tsx | 2 +- src/shared/ui-kit/Button/Button.module.scss | 2 +- .../ContextMenuItem/ContextMenuItem.module.scss | 4 ++-- .../components/MenuItem/MenuItem.module.scss | 4 ++-- .../ui-kit/MenuButton/MenuButton.module.scss | 2 +- .../components/MenuItem/MenuItem.module.scss | 4 ++-- .../MentionDropdown/MentionDropdown.module.scss | 6 +++--- src/styles/theme.scss | 4 ++++ 28 files changed, 52 insertions(+), 84 deletions(-) delete mode 100644 src/pages/common/components/CommonTabPanels/components/MembersTab/components/MemberDropdown/MemberDropdown.module.scss 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/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/common/components/CommonTabPanels/components/MembersTab/components/MemberDropdown/AssignCircleModal.tsx b/src/pages/common/components/CommonTabPanels/components/MembersTab/components/MemberDropdown/AssignCircleModal.tsx index 6717fb1d73..b53598ee80 100644 --- a/src/pages/common/components/CommonTabPanels/components/MembersTab/components/MemberDropdown/AssignCircleModal.tsx +++ b/src/pages/common/components/CommonTabPanels/components/MembersTab/components/MemberDropdown/AssignCircleModal.tsx @@ -72,14 +72,14 @@ export default function AssignCircleModal({
    +

    + 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/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/useLightThemeOnly.tsx b/src/shared/hooks/useLightThemeOnly.tsx new file mode 100644 index 0000000000..17bd46e1d3 --- /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 { changeTheme } from "../store/actions"; +import { selectTheme } from "../store/selectors"; + +const useLightThemeOnly = () => { + const dispatch = useDispatch(); + const theme = useSelector(selectTheme); + + useEffect(() => { + if (theme === Theme.Dark) { + dispatch(changeTheme(Theme.Light)); + } + }, [theme, dispatch, changeTheme]); +}; + +export default useLightThemeOnly; 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/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/UserInfo/components/MenuItems/MenuItems.tsx b/src/shared/layouts/SidenavLayout/components/SidenavContent/components/UserInfo/components/MenuItems/MenuItems.tsx index 172b36e18d..84282efa58 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, useSelector } from "react-redux"; +import { useLocation } from "react-router"; import classNames from "classnames"; import { Menu } from "@headlessui/react"; import { logOut } from "@/pages/Auth/store/actions"; @@ -32,12 +33,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 theme = useSelector(selectTheme); + const { pathname } = useLocation(); + const isV04 = pathname.includes("-v04"); + + const toggleTheme = { + key: "theme", + type: ItemType.Button, + text: "Light/Dark mode", + icon: , + onClick: () => { + dispatch(changeTheme(theme === Theme.Dark ? Theme.Light : Theme.Dark)); + }, + }; const items: Item[] = [ { @@ -58,15 +75,7 @@ const MenuItems: FC = (props) => { icon: , to: getBillingPagePath(), }, - { - key: "theme", - type: ItemType.Button, - text: "Light/Dark mode", - icon: , - onClick: () => { - dispatch(changeTheme(theme === Theme.Dark ? Theme.Light : Theme.Dark)); - }, - }, + ...insertIf(!isV04, toggleTheme), { key: "log-out", type: ItemType.Button, diff --git a/src/shared/ui-kit/TextEditor/components/Element/components/Link/Link.module.scss b/src/shared/ui-kit/TextEditor/components/Element/components/Link/Link.module.scss index 5a9ce8608a..54b9200185 100644 --- a/src/shared/ui-kit/TextEditor/components/Element/components/Link/Link.module.scss +++ b/src/shared/ui-kit/TextEditor/components/Element/components/Link/Link.module.scss @@ -1,5 +1,5 @@ @import "../../../../../../../constants"; .link { - color: var(--secondary-text); + color: var(--primary-fill); } diff --git a/src/styles/theme.scss b/src/styles/theme.scss index 8087b8b817..318d7342bd 100644 --- a/src/styles/theme.scss +++ b/src/styles/theme.scss @@ -10,6 +10,7 @@ --primary-fill: #c32ea3; --secondary-fill: #f3d4eb; --tertiary-fill: #ffffff; + --quaternary-fill: #d5d5e4; --drop-shadow: rgba(0, 0, 0, 0.15259); } @@ -25,5 +26,6 @@ --primary-fill: #c32ea3; --secondary-fill: #743b65; --tertiary-fill: #131b23; + --quaternary-fill: #525876; --drop-shadow: rgba(0, 0, 0, 0.15259); } From 8e3b50c9852eff5b135a6f4ff17432b6c83d6a51 Mon Sep 17 00:00:00 2001 From: Roie Natan Date: Tue, 21 Nov 2023 08:29:05 -0500 Subject: [PATCH 20/21] code review update --- src/shared/hooks/useLightThemeOnly.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/shared/hooks/useLightThemeOnly.tsx b/src/shared/hooks/useLightThemeOnly.tsx index 17bd46e1d3..3cfe7961ae 100644 --- a/src/shared/hooks/useLightThemeOnly.tsx +++ b/src/shared/hooks/useLightThemeOnly.tsx @@ -12,7 +12,7 @@ const useLightThemeOnly = () => { if (theme === Theme.Dark) { dispatch(changeTheme(Theme.Light)); } - }, [theme, dispatch, changeTheme]); + }, [theme, dispatch]); }; export default useLightThemeOnly; From 19874d99876bd34e27f442771be5300a72d44986 Mon Sep 17 00:00:00 2001 From: Roie Natan Date: Tue, 21 Nov 2023 22:56:36 -0500 Subject: [PATCH 21/21] changeTheme --> toggleTheme with optional Theme parameter --- .../MyAccount/components/Profile/Profile.tsx | 8 +++----- src/shared/hooks/useLightThemeOnly.tsx | 4 ++-- .../components/MenuItems/MenuItems.tsx | 13 +++++-------- src/shared/store/actions.tsx | 4 ++-- src/shared/store/reducer.tsx | 15 ++++++++++++--- src/shared/ui-kit/Theme/Theme.tsx | 18 ------------------ src/shared/ui-kit/Theme/index.ts | 1 - 7 files changed, 24 insertions(+), 39 deletions(-) delete mode 100644 src/shared/ui-kit/Theme/Theme.tsx delete mode 100644 src/shared/ui-kit/Theme/index.ts diff --git a/src/pages/MyAccount/components/Profile/Profile.tsx b/src/pages/MyAccount/components/Profile/Profile.tsx index 60a3a5bcfd..bdb93399ac 100644 --- a/src/pages/MyAccount/components/Profile/Profile.tsx +++ b/src/pages/MyAccount/components/Profile/Profile.tsx @@ -4,13 +4,12 @@ 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, Theme } from "@/shared/constants"; +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 { changeTheme } from "@/shared/store/actions"; -import { selectTheme } from "@/shared/store/selectors"; +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"; @@ -28,7 +27,6 @@ const Profile: FC = (props) => { const [isSubmitting, setIsSubmitting] = useState(false); const user = useSelector(selectUser()); const isMobileView = useIsTabletView(); - const theme = useSelector(selectTheme); const { pathname } = useLocation(); const isV04 = matchPath(ROUTE_PATHS.V04_PROFILE, pathname); @@ -58,7 +56,7 @@ const Profile: FC = (props) => { }; const handleThemeToggle = () => { - dispatch(changeTheme(theme === Theme.Dark ? Theme.Light : Theme.Dark)); + dispatch(toggleTheme(null)); }; const handleLogout = () => { diff --git a/src/shared/hooks/useLightThemeOnly.tsx b/src/shared/hooks/useLightThemeOnly.tsx index 3cfe7961ae..780db2158e 100644 --- a/src/shared/hooks/useLightThemeOnly.tsx +++ b/src/shared/hooks/useLightThemeOnly.tsx @@ -1,7 +1,7 @@ import { useEffect } from "react"; import { useDispatch, useSelector } from "react-redux"; import { Theme } from "../constants"; -import { changeTheme } from "../store/actions"; +import { toggleTheme } from "../store/actions"; import { selectTheme } from "../store/selectors"; const useLightThemeOnly = () => { @@ -10,7 +10,7 @@ const useLightThemeOnly = () => { useEffect(() => { if (theme === Theme.Dark) { - dispatch(changeTheme(Theme.Light)); + dispatch(toggleTheme(Theme.Light)); } }, [theme, dispatch]); }; 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 84282efa58..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,10 +1,9 @@ import React, { FC } from "react"; -import { useDispatch, useSelector } from "react-redux"; +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"; -import { Theme } from "@/shared/constants"; import { useRoutesContext } from "@/shared/contexts"; import { Avatar3Icon, @@ -13,8 +12,7 @@ import { SettingsIcon, } from "@/shared/icons"; import ThemeIcon from "@/shared/icons/theme.icon"; -import { changeTheme } from "@/shared/store/actions"; -import { selectTheme } from "@/shared/store/selectors"; +import { toggleTheme } from "@/shared/store/actions"; import { MenuItem } from "./components"; import { Item, ItemType } from "./types"; import styles from "./MenuItems.module.scss"; @@ -42,17 +40,16 @@ const MenuItems: FC = (props) => { const dispatch = useDispatch(); const { getProfilePagePath, getBillingPagePath, getSettingsPagePath } = useRoutesContext(); - const theme = useSelector(selectTheme); const { pathname } = useLocation(); const isV04 = pathname.includes("-v04"); - const toggleTheme = { + const toggleThemeMenuItem = { key: "theme", type: ItemType.Button, text: "Light/Dark mode", icon: , onClick: () => { - dispatch(changeTheme(theme === Theme.Dark ? Theme.Light : Theme.Dark)); + dispatch(toggleTheme(null)); }, }; @@ -75,7 +72,7 @@ const MenuItems: FC = (props) => { icon: , to: getBillingPagePath(), }, - ...insertIf(!isV04, toggleTheme), + ...insertIf(!isV04, toggleThemeMenuItem), { key: "log-out", type: ItemType.Button, diff --git a/src/shared/store/actions.tsx b/src/shared/store/actions.tsx index 1b86b817f0..91f2829445 100644 --- a/src/shared/store/actions.tsx +++ b/src/shared/store/actions.tsx @@ -49,6 +49,6 @@ export const changeLanguage = createStandardAction( SharedActionTypes.CHANGE_LANGUAGE, )(); -export const changeTheme = createStandardAction( +export const toggleTheme = createStandardAction( SharedActionTypes.CHANGE_THEME, -)(); +)(); diff --git a/src/shared/store/reducer.tsx b/src/shared/store/reducer.tsx index 5d9ad3fa85..3fe361ccda 100644 --- a/src/shared/store/reducer.tsx +++ b/src/shared/store/reducer.tsx @@ -1,6 +1,11 @@ import produce from "immer"; import { ActionType, createReducer } from "typesafe-actions"; -import { Language, ScreenSize, SMALL_SCREEN_BREAKPOINT } from "../constants"; +import { + Language, + ScreenSize, + SMALL_SCREEN_BREAKPOINT, + Theme, +} from "../constants"; import { SharedStateType } from "../interfaces"; import { getTheme } from "../utils/getTheme"; import * as actions from "./actions"; @@ -106,9 +111,13 @@ const reducer = createReducer(initialState) nextState.isRtlLanguage = nextState.language === Language.Hebrew; }), ) - .handleAction(actions.changeTheme, (state, action) => + .handleAction(actions.toggleTheme, (state, action) => produce(state, (nextState) => { - nextState.theme = action.payload; + if (action.payload) { + nextState.theme = action.payload; + } else { + nextState.theme = state.theme === Theme.Dark ? Theme.Light : Theme.Dark; + } }), ); diff --git a/src/shared/ui-kit/Theme/Theme.tsx b/src/shared/ui-kit/Theme/Theme.tsx deleted file mode 100644 index 11c750b010..0000000000 --- a/src/shared/ui-kit/Theme/Theme.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from "react"; -import { useDispatch, useSelector } from "react-redux"; -import { changeTheme } from "@/shared/store/actions"; -import { selectTheme } from "@/shared/store/selectors"; -import { Theme as Themes } from "../../constants/theme"; - -const Theme = () => { - const dispatch = useDispatch(); - const theme = useSelector(selectTheme); - - const handleChange = () => { - dispatch(changeTheme(theme === Themes.Dark ? Themes.Light : Themes.Dark)); - }; - - return
    Light/Dark mode
    ; -}; - -export default Theme; diff --git a/src/shared/ui-kit/Theme/index.ts b/src/shared/ui-kit/Theme/index.ts deleted file mode 100644 index e8710ebc1b..0000000000 --- a/src/shared/ui-kit/Theme/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as Theme } from "./Theme";