version 8

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;

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;

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 {

src/pages/common/components/CommonTabPanels/components/FeedTab/components/NewProposalCreation/components/ProposalTypeSelect/selectorStyles.ts

@@ -5,20 +5,27 @@ 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,
     height: "3rem",
     ...(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) => ({

src/shared/components/ButtonIcon/index.scss

@@ -8,6 +8,7 @@
   padding: 0;
   background: transparent;
   border: 0;
+  color: var(--primary-text);
 
   &:hover {
     cursor: pointer;

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 {

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;
+}

src/shared/layouts/SidenavLayout/components/SidenavContent/components/ProjectsTree/components/PlaceholderTreeItem/PlaceholderTreeItem.tsx

@@ -79,6 +79,7 @@ const PlaceholderTreeItem: FC<PlaceholderTreeItemProps> = (props) => {
         className={classNames(
           treeItemTriggerStyles.name,
           treeItemTriggerStylesFromContext?.name,
+          styles.text,
         )}
         title={name}
       >

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;
 }

src/shared/ui-kit/TextEditor/components/Editor/Editor.module.scss

@@ -21,7 +21,7 @@
   }
 
   &:focus {
-    border-color: $c-pink-active-feed-cards;
+    outline: $transparent;
   }
 }
 

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);
 }