Merge branch 'dev' into CW-2196-pagination

daostack · Nov 22, 2023 · 3edeaa0 · 3edeaa0
2 parents ce29c2a + b7ce3c3
commit 3edeaa0
Show file tree

Hide file tree

Showing 229 changed files with 1,016 additions and 721 deletions.
diff --git a/package.json b/package.json
@@ -58,7 +58,7 @@
     "react-scripts": "^5.0.1",
     "react-scroll": "^1.8.7",
     "react-scrollbars-custom": "^4.1.1",
-    "react-select": "^5.4.0",
+    "react-select": "^5.8.0",
     "react-split-pane": "^0.1.92",
     "react-use": "^17.4.0",
     "react-virtualized": "^9.22.3",

diff --git a/public/assets/images/floppy-disk.svg b/public/assets/images/floppy-disk.svg
diff --git a/src/constants.scss b/src/constants.scss
@@ -107,6 +107,7 @@ $sticky-info-shadow: rgba(0, 0, 0, 0.02);
 $carousel-overlay-shadow: rgba(0, 26, 54, 0.4);
 $shadow-1: rgba(79, 92, 105, 0.1);
 $date-picker-arrow-color: #aeaeae;
+$transparent: rgba(255, 255, 255, 0);
 
 /* colors v2 */
 $c-primary-100: #f4f6ff;
@@ -119,7 +120,7 @@ $c-neutrals-100-hover: #e1e1e1;
 $c-neutrals-100-shadow: 4px 4px 0px #e2e2e2;
 $c-neutrals-200: #d5d5e4;
 $c-neutrals-300: #979bba;
-$c-neutrals-600: #001a36;
+$c-neutrals-600: var(--primary-text);
 $c-notification-100: #f9faff;
 $c-shades-white: #ffffff;
 $c-shades-black: #000000;
@@ -143,8 +144,8 @@ $c-pink-active-feed-cards-light: #fcf4ff;
 $c-pink-active-feed-cards: #a75a93;
 $c-pink-hover-feed-cards: #fff9fd;
 $c-gray-5: #f4f5f5;
-$c-gray-10: #eef0f4;
-$c-gray-20: #dcdee7;
+$c-gray-10: var(--gentle-stroke);
+$c-gray-20: var(--gentle-stroke);
 $c-gray-30: #b7bcd2;
 $c-gray-40: #8d91a9;
 $c-gray-50: #7a819c;

diff --git a/src/index.scss b/src/index.scss
@@ -31,15 +31,37 @@
   font-display: swap;
 }
 
+html {
+  background-color: var(--primary-background);
+}
+
 :root {
   --page-extra-pr: 0px;
 }
 
+// Remove Arrows/Spinners from input type number
+/* Chrome, Safari, Edge, Opera */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+input[type="number"] {
+  -moz-appearance: textfield;
+}
+
+// Disable highlight when Touch/Press for inputs
+input:focus {
+  outline: $transparent;
+}
+
 body {
   --safe-area-inset-bottom: 0;
 
   // Disable highlight when Touch/Press
-  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+  -webkit-tap-highlight-color: $transparent;
   margin: 0;
   font-family: PoppinsSans, sans-serif;
   -webkit-font-smoothing: antialiased;
@@ -230,10 +252,15 @@ code {
 }
 
 ::-webkit-scrollbar-thumb {
-  background-color: var(--medium-gray);
+  background-color: $c-gray-20;
   border-radius: 0.5rem;
   &:hover {
-    background-color: var(--strong-gray);
+    background-color: $c-gray-50;
     cursor: pointer;
   }
 }
+
+a:visited {
+  background-color: transparent;
+  text-decoration: none;
+}
diff --git a/src/pages/App/providers/NotificationProvider/Notification/index.scss b/src/pages/App/providers/NotificationProvider/Notification/index.scss
@@ -2,17 +2,19 @@
 @import "../../../../../styles/sizes";
 
 .notification-wrapper {
-  background-color: $purple;
+  background-color: var(--primary-background);
   padding: 0.5rem;
   margin: 0.5rem 0;
   display: flex;
   justify-content: space-between;
   border-radius: 0.25rem;
+  box-shadow: 0 0.25rem 0.9375rem var(--drop-shadow);
+  color: var(--primary-text);
 
   .dismiss-btn {
     background: none;
     border: none;
-    color: $white;
+    color: inherit;
     font-weight: bold;
     cursor: pointer;
     &:hover {

diff --git a/src/pages/Login/components/LoginContainer/Connect/index.scss b/src/pages/Login/components/LoginContainer/Connect/index.scss
@@ -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
@@ -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<PhoneAuthProps> = ({ authCode, onFinish, onError }) => {
       case PhoneAuthStep.PhoneInput: {
         const buttonEl = (
           <Button
-            className="phone-auth__submit-button"
+            //className="phone-auth__submit-button"
             onClick={onPhoneNumberSubmit}
             disabled={!phoneNumber || !isValidPhoneNumber(phoneNumber)}
-            shouldUseFullWidth
+            variant={ButtonVariant.PrimaryPink}
           >
             Send Code
           </Button>

diff --git 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;
+//   }
+// }