From 43ff266bda853a1f3e0f413eebea8fc4b86d3780 Mon Sep 17 00:00:00 2001 From: Roie Natan Date: Thu, 16 Nov 2023 12:24:53 -0500 Subject: [PATCH] version 8 --- public/assets/images/floppy-disk.svg | 32 +++++++++---------- src/constants.scss | 1 + src/index.scss | 24 +++++++++++++- .../AddRecipient/AddRecipient.module.scss | 15 +++++---- .../ProposalTypeSelect/selectorStyles.ts | 13 ++++++-- src/shared/components/ButtonIcon/index.scss | 1 + .../Form/RadioButtonGroup/index.scss | 1 - .../PlaceholderTreeItem.module.scss | 4 +++ .../PlaceholderTreeItem.tsx | 1 + src/shared/ui-kit/Loader/Loader.module.scss | 2 +- .../components/Editor/Editor.module.scss | 2 +- .../Element/components/Link/Link.module.scss | 2 +- 12 files changed, 67 insertions(+), 31 deletions(-) diff --git a/public/assets/images/floppy-disk.svg b/public/assets/images/floppy-disk.svg index e763eb4915..52f688e4c4 100644 --- a/public/assets/images/floppy-disk.svg +++ b/public/assets/images/floppy-disk.svg @@ -1,17 +1,17 @@ - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + diff --git a/src/constants.scss b/src/constants.scss index c4704d992c..c3c7782250 100644 --- a/src/constants.scss +++ b/src/constants.scss @@ -107,6 +107,7 @@ $sticky-info-shadow: rgba(0, 0, 0, 0.02); $carousel-overlay-shadow: rgba(0, 26, 54, 0.4); $shadow-1: rgba(79, 92, 105, 0.1); $date-picker-arrow-color: #aeaeae; +$transparent: rgba(255, 255, 255, 0); /* colors v2 */ $c-primary-100: #f4f6ff; diff --git a/src/index.scss b/src/index.scss index 7591f51410..f6433e629c 100644 --- a/src/index.scss +++ b/src/index.scss @@ -31,15 +31,37 @@ font-display: swap; } +html { + background-color: var(--primary-background); +} + :root { --page-extra-pr: 0px; } +// Remove Arrows/Spinners from input type number +/* Chrome, Safari, Edge, Opera */ +input::-webkit-outer-spin-button, +input::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} + +/* Firefox */ +input[type="number"] { + -moz-appearance: textfield; +} + +// Disable highlight when Touch/Press for inputs +input:focus { + outline: $transparent; +} + body { --safe-area-inset-bottom: 0; // Disable highlight when Touch/Press - -webkit-tap-highlight-color: rgba(255, 255, 255, 0); + -webkit-tap-highlight-color: $transparent; margin: 0; font-family: PoppinsSans, sans-serif; -webkit-font-smoothing: antialiased; diff --git a/src/pages/common/components/CommonTabPanels/components/FeedTab/components/NewProposalCreation/components/AddRecipient/AddRecipient.module.scss b/src/pages/common/components/CommonTabPanels/components/FeedTab/components/NewProposalCreation/components/AddRecipient/AddRecipient.module.scss index ae543d6327..5a8b05175d 100644 --- a/src/pages/common/components/CommonTabPanels/components/FeedTab/components/NewProposalCreation/components/AddRecipient/AddRecipient.module.scss +++ b/src/pages/common/components/CommonTabPanels/components/FeedTab/components/NewProposalCreation/components/AddRecipient/AddRecipient.module.scss @@ -4,7 +4,7 @@ padding: 1.25rem 0.625rem; display: flex; align-items: center; - background-color: $c-light-gray; + background-color: var(--secondary-background); margin-top: 2.5rem; } @@ -14,13 +14,13 @@ } .tableHead { - border-bottom: 1px solid $c-neutrals-200; + border-bottom: 1px solid var(--gentle-stroke); padding: 0 1rem; } .tableBody { padding: 0 1rem; - background-color: $white; + background-color: var(--tertiary-fill); width: 100%; } @@ -31,6 +31,7 @@ font-size: $xsmall; font-weight: 400; padding-right: 1rem; + color: var(--primary-text); } .tableHeader:first-child { @@ -41,14 +42,14 @@ .tableCell { padding-top: 0.5rem; padding-bottom: 0.375rem; - border-top: 0.0625rem solid $c-neutrals-200; - border-bottom: 0.0625rem solid $c-neutrals-200; + border-top: 0.0625rem solid var(--gentle-stroke); + border-bottom: 0.0625rem solid var(--gentle-stroke); } .tableCell:first-child { padding-left: 0.5625rem; width: 1.125rem; - border-left: 0.0625rem solid $c-neutrals-200; + border-left: 0.0625rem solid var(--gentle-stroke); } .goalCell { @@ -60,7 +61,7 @@ } .tableCell:last-child { - border-right: 0.0625rem solid $c-neutrals-200; + border-right: 0.0625rem solid var(--gentle-stroke); } .editIcon { 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 743357a4f1..6368f12022 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 @@ -5,7 +5,7 @@ export const selectorStyles = (hasError: boolean, isDarkMode: boolean) => ({ menuPortal: (provided) => ({ ...provided, zIndex: 10000 }), menuList: (provided) => ({ ...provided, - backgroundColor: isDarkMode ? "#2e3452" : "#f8f8f5", + backgroundColor: isDarkMode ? "#131b23" : "#ffffff", }), control: (provided) => ({ ...provided, @@ -13,12 +13,19 @@ export const selectorStyles = (hasError: boolean, isDarkMode: boolean) => ({ ...(hasError && { borderColor: Colors.error }), backgroundColor: isDarkMode ? "#2e3452" : "#f8f8f5", color: isDarkMode ? "#ffffff" : "#001a36", - border: "none", + borderColor: "rgba(255, 255, 255, 0)", + boxShadow: "rgba(255, 255, 255, 0)", + "&:hover": { + boxShadow: "rgba(255, 255, 255, 0)", + }, }), option: (provided) => ({ ...provided, - backgroundColor: isDarkMode ? "#2e3452" : "#f8f8f5", + backgroundColor: isDarkMode ? "#131b23" : "#ffffff", color: isDarkMode ? "#ffffff" : "#001a36", + "&:hover": { + backgroundColor: isDarkMode ? "#2e3452" : "#fff9fd", + }, }), indicatorSeparator: () => ({ display: "none" }), indicatorsContainer: (provided) => ({ diff --git a/src/shared/components/ButtonIcon/index.scss b/src/shared/components/ButtonIcon/index.scss index 45b6b254e7..4004218657 100644 --- a/src/shared/components/ButtonIcon/index.scss +++ b/src/shared/components/ButtonIcon/index.scss @@ -8,6 +8,7 @@ padding: 0; background: transparent; border: 0; + color: var(--primary-text); &:hover { cursor: pointer; diff --git a/src/shared/components/Form/RadioButtonGroup/index.scss b/src/shared/components/Form/RadioButtonGroup/index.scss index 8e197fa432..72af3f6673 100644 --- a/src/shared/components/Form/RadioButtonGroup/index.scss +++ b/src/shared/components/Form/RadioButtonGroup/index.scss @@ -6,7 +6,6 @@ font-family: PoppinsSans, sans-serif; font-weight: normal; font-size: $xsmall; - color: $secondary-blue; margin-bottom: 1rem; .custom-radio-button-group__label { diff --git a/src/shared/layouts/SidenavLayout/components/SidenavContent/components/ProjectsTree/components/PlaceholderTreeItem/PlaceholderTreeItem.module.scss b/src/shared/layouts/SidenavLayout/components/SidenavContent/components/ProjectsTree/components/PlaceholderTreeItem/PlaceholderTreeItem.module.scss index 36c21583b0..e86213f395 100644 --- a/src/shared/layouts/SidenavLayout/components/SidenavContent/components/ProjectsTree/components/PlaceholderTreeItem/PlaceholderTreeItem.module.scss +++ b/src/shared/layouts/SidenavLayout/components/SidenavContent/components/ProjectsTree/components/PlaceholderTreeItem/PlaceholderTreeItem.module.scss @@ -15,3 +15,7 @@ margin-right: var(--item-image-mr); color: var(--item-text-color); } + +.text { + color: $c-pink-primary; +} diff --git a/src/shared/layouts/SidenavLayout/components/SidenavContent/components/ProjectsTree/components/PlaceholderTreeItem/PlaceholderTreeItem.tsx b/src/shared/layouts/SidenavLayout/components/SidenavContent/components/ProjectsTree/components/PlaceholderTreeItem/PlaceholderTreeItem.tsx index fe6882c9c8..ef13e973d0 100644 --- a/src/shared/layouts/SidenavLayout/components/SidenavContent/components/ProjectsTree/components/PlaceholderTreeItem/PlaceholderTreeItem.tsx +++ b/src/shared/layouts/SidenavLayout/components/SidenavContent/components/ProjectsTree/components/PlaceholderTreeItem/PlaceholderTreeItem.tsx @@ -79,6 +79,7 @@ const PlaceholderTreeItem: FC = (props) => { className={classNames( treeItemTriggerStyles.name, treeItemTriggerStylesFromContext?.name, + styles.text, )} title={name} > diff --git a/src/shared/ui-kit/Loader/Loader.module.scss b/src/shared/ui-kit/Loader/Loader.module.scss index f732355ba4..2129d49978 100644 --- a/src/shared/ui-kit/Loader/Loader.module.scss +++ b/src/shared/ui-kit/Loader/Loader.module.scss @@ -24,6 +24,6 @@ display: flex; justify-content: center; align-items: center; - background-color: $c-shades-white; + background-color: var(--secondary-background); border-radius: 1rem; } 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 9d929b7fef..8db942f5ce 100644 --- a/src/shared/ui-kit/TextEditor/components/Editor/Editor.module.scss +++ b/src/shared/ui-kit/TextEditor/components/Editor/Editor.module.scss @@ -21,7 +21,7 @@ } &:focus { - border-color: $c-pink-active-feed-cards; + outline: $transparent; } } 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 fbbe48f53e..5a9ce8608a 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: $c-primary-500; + color: var(--secondary-text); }