From e45952bf61325e66367e1f7030ee3db839408c26 Mon Sep 17 00:00:00 2001 From: Roie Natan Date: Mon, 6 Nov 2023 17:36:05 -0500 Subject: [PATCH] . --- .../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; }