Merge pull request #2339 from daostack/cw-2267-dark-mode-fixes

Add Darkmode (with colors modulation) #2267
daostack · Nov 27, 2023 · 5a0d784 · 5a0d784
2 parents 27a892b + 771e42a
commit 5a0d784
Show file tree

Hide file tree

Showing 20 changed files with 224 additions and 142 deletions.
diff --git a/public/assets/images/human-pyramid-transparent.svg b/public/assets/images/human-pyramid-transparent.svg
diff --git a/public/icons/social-login/apple.svg b/public/icons/social-login/apple.svg
diff --git a/public/icons/social-login/google.svg b/public/icons/social-login/google.svg
diff --git a/public/icons/social-login/phone.svg b/public/icons/social-login/phone.svg
diff --git a/src/pages/Landing/components/JoinWaitlistModal/JoinWaitlistModal.module.scss b/src/pages/Landing/components/JoinWaitlistModal/JoinWaitlistModal.module.scss
@@ -2,9 +2,7 @@
 
 .modal {
   max-width: 37rem;
-  background-color: $light-gray-12;
-  box-shadow: 0rem 0.25rem 1rem rgba(0, 0, 0, 0.15259);
-  border: 0.063rem solid $light-gray-3;
+  box-shadow: 0rem 0.25rem 1rem var(--drop-shadow);
 }
 
 .title {

diff --git a/src/pages/Landing/components/LandingContainer/CommonInfoSection/index.scss b/src/pages/Landing/components/LandingContainer/CommonInfoSection/index.scss
@@ -8,6 +8,7 @@ $vertical-view-breakpoint: 790px;
   display: flex;
   justify-content: center;
   align-items: center;
+  background-color: $white;
 
   @include viewport-breakpoint($vertical-view-breakpoint) {
     padding: 3rem 1.25rem;

diff --git a/src/pages/Landing/components/LandingContainer/VideoSection/index.scss b/src/pages/Landing/components/LandingContainer/VideoSection/index.scss
@@ -19,7 +19,6 @@ $viewport-breakpoint: 1000px;
   display: flex;
   justify-content: center;
   align-items: center;
-  opacity: 0.8;
 }
 
 .landing-video-section__video {

diff --git a/src/pages/Login/components/LoginContainer/Connect/index.scss b/src/pages/Login/components/LoginContainer/Connect/index.scss
@@ -107,6 +107,7 @@
   .connect-wrapper__terms-of-use {
     font-weight: 600;
     text-decoration: underline;
+    color: var(--primary-fill);
   }
 
   @include big-phone {

diff --git a/src/pages/Login/components/LoginContainer/LoginHelpButtons/index.scss b/src/pages/Login/components/LoginContainer/LoginHelpButtons/index.scss
@@ -6,13 +6,13 @@
   width: 100%;
   margin: 0;
   padding: 0;
-  color: $secondary-blue;
+  color: var(--primary-text);
   text-align: left;
   list-style-type: none;
   box-sizing: border-box;
 
   .login-help-buttons__item {
-    border-bottom: 1px solid $light-gray-1;
+    border-bottom: 1px solid var(--gentle-stroke);
 
     &:last-child {
       border-bottom: 0;

diff --git a/src/shared/components/Header/LanguageDropdown/LanguageDropdown.tsx b/src/shared/components/Header/LanguageDropdown/LanguageDropdown.tsx
@@ -41,6 +41,7 @@ const LanguageDropdown: FC<LanguageDropdownProps> = (props) => {
         menuButton: "language-dropdown__menu-button",
         menuItem: "language-dropdown__menu-item",
         value: "language-dropdown__value",
+        menu: "language-dropdown__menu",
       }}
     />
   );

diff --git a/src/shared/components/Header/LanguageDropdown/index.scss b/src/shared/components/Header/LanguageDropdown/index.scss
@@ -4,25 +4,38 @@
 .language-dropdown__menu-button {
   background-color: transparent;
   border: 0;
+  background-color: $white;
+  color: $black;
 
   @include big-phone {
     height: 4.125rem;
     justify-content: center;
   }
 }
 
+.language-dropdown__menu {
+  border-color: $c-gray-5;
+}
+
 .language-dropdown__item--rtl {
   text-align: right;
   direction: rtl;
 }
 
 .language-dropdown__menu-item {
+  background-color: $white;
+  color: $black;
+  &:hover {
+    background-color: $c-pink-hover-feed-cards;
+  }
   @include big-phone {
     text-align: center;
   }
 }
 
 .language-dropdown__value {
+  background-color: $white;
+  color: $black;
   @include big-phone {
     flex: unset;
     font-size: $moderate;

diff --git a/src/shared/components/ReportModal/index.scss b/src/shared/components/ReportModal/index.scss
@@ -59,10 +59,6 @@
   margin-right: 0.75rem;
 }
 
-.report-modal__button-container__cancel:hover {
-  background-color: $light-gray-3;
-}
-
 .report-modal__button-container__send {
   margin-left: 0.75rem;
 }

diff --git a/src/shared/components/SocialLoginButton/SocialLoginButton.tsx b/src/shared/components/SocialLoginButton/SocialLoginButton.tsx
@@ -1,7 +1,10 @@
 import React, { FC } from "react";
 import classNames from "classnames";
-import { ButtonIcon } from "../ButtonIcon";
+import AppleIcon from "@/shared/icons/auth/apple.icon";
+import GoogleIcon from "@/shared/icons/auth/google.icon";
+import PhoneIcon from "@/shared/icons/auth/phone.icon";
 import { AuthProvider } from "../../constants";
+import { ButtonIcon } from "../ButtonIcon";
 import "./index.scss";
 
 interface SocialLoginButtonProps {
@@ -24,11 +27,9 @@ const SocialLoginButton: FC<SocialLoginButtonProps> = ({
       className={classNames("social-login-button", className)}
       onClick={handleClick}
     >
-      <img
-        className="social-login-button__img"
-        src={`/icons/social-login/${provider}.svg`}
-        alt={`Sign in using ${provider}`}
-      />
+      {provider === AuthProvider.Apple && <AppleIcon />}
+      {provider === AuthProvider.Google && <GoogleIcon />}
+      {provider === AuthProvider.Phone && <PhoneIcon />}
     </ButtonIcon>
   );
 };

diff --git a/src/shared/components/SocialLoginButton/index.scss b/src/shared/components/SocialLoginButton/index.scss
@@ -4,12 +4,13 @@
   width: 3.5rem;
   height: 3.5rem;
   border-radius: 50%;
-  background-color: #fff;
-  box-shadow: 0 6.8px 25.4px 0 $black-gray-3;
+  background-color: var(--secondary-background);
+  box-shadow: 0 6.8px 25.4px 0 var(--drop-shadow);
   transition: all 0.2s;
+  color: var(--primary-text);
 
   &:hover {
-    background-color: $light-gray-1;
+    background-color: var(--hover-fill);
     cursor: pointer;
   }
 

diff --git a/src/shared/icons/auth/apple.icon.tsx b/src/shared/icons/auth/apple.icon.tsx
@@ -0,0 +1,24 @@
+import React, { FC } from "react";
+
+const AppleIcon: FC = () => {
+  const color = "currentColor";
+
+  return (
+    <svg
+      width="41"
+      height="41"
+      viewBox="0 0 41 41"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M22.515 11.262a5.04 5.04 0 0 1-2.011.372c-.133-.002-.183-.037-.19-.177-.109-1.318.244-2.524.88-3.66 1.086-1.94 2.738-3.137 4.885-3.664.183-.046.372-.07.572-.096.088-.012.178-.023.27-.037l.012.252c.006.122.011.238.014.353.046 2.38-1.492 5.49-4.432 6.657zm11.128 17.271.102-.296c-2.599-1.293-4.184-3.285-4.381-6.23-.196-2.944 1.148-5.118 3.509-6.764a3.764 3.764 0 0 0-.062-.091l-.01-.013c-.935-1.313-2.175-2.215-3.698-2.725a8.245 8.245 0 0 0-3.312-.415c-.756.06-1.482.272-2.195.532-.695.258-1.39.522-2.082.787-.626.24-1.249.24-1.874.004-.68-.254-1.357-.51-2.033-.77-1.285-.494-2.596-.624-3.944-.306-2.24.524-3.943 1.796-5.15 3.737-.962 1.545-1.38 3.26-1.487 5.06-.09 1.5.058 2.982.367 4.45.717 3.417 2.201 6.466 4.413 9.164.467.568.967 1.104 1.561 1.544.48.355.996.63 1.586.74.676.127 1.34.04 1.98-.174.385-.13.762-.284 1.138-.439.163-.067.327-.134.491-.199 1.503-.594 3.023-.667 4.551-.112.305.111.604.24.903.367.163.07.326.14.49.206.64.26 1.305.387 1.998.364.923-.032 1.72-.386 2.413-.973.35-.295.69-.613.981-.965 1.51-1.805 2.754-3.775 3.573-5.994.061-.163.117-.328.172-.489z"
+        fill={color}
+      />
+    </svg>
+  );
+};
+
+export default AppleIcon;
diff --git a/src/shared/icons/auth/google.icon.tsx b/src/shared/icons/auth/google.icon.tsx
@@ -0,0 +1,42 @@
+import React, { FC } from "react";
+
+const GoogleIcon: FC = () => {
+  //const color = "currentColor";
+
+  return (
+    <svg
+      width="41"
+      height="41"
+      viewBox="0 0 41 41"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M34.89 21.597c0-1.082-.097-2.122-.277-3.12H20.25v5.9h8.207c-.353 1.905-1.428 3.52-3.043 4.602v3.826h4.929c2.883-2.654 4.547-6.564 4.547-11.208z"
+        fill="#4285F4"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M20.25 36.5c4.117 0 7.57-1.366 10.093-3.695l-4.929-3.826c-1.365.915-3.112 1.456-5.164 1.456-3.972 0-7.334-2.683-8.533-6.287H6.622v3.95C9.132 33.084 14.29 36.5 20.25 36.5z"
+        fill="#34A853"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M11.717 24.148a9.167 9.167 0 0 1-.478-2.898c0-1.005.173-1.983.478-2.898v-3.95H6.622A15.244 15.244 0 0 0 5 21.25c0 2.46.59 4.79 1.622 6.849l5.095-3.951z"
+        fill="#FBBC05"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M20.25 12.065c2.239 0 4.25.77 5.83 2.28l4.374-4.373C27.813 7.512 24.36 6 20.25 6 14.289 6 9.131 9.417 6.622 14.401l5.095 3.951c1.2-3.604 4.561-6.287 8.533-6.287z"
+        fill="#EA4335"
+      />
+    </svg>
+  );
+};
+
+export default GoogleIcon;
diff --git a/src/shared/icons/auth/phone.icon.tsx b/src/shared/icons/auth/phone.icon.tsx
@@ -0,0 +1,19 @@
+import React, { FC } from "react";
+
+const PhoneIcon: FC = () => {
+  const color = "currentColor";
+
+  return (
+    <svg
+      fill={color}
+      width="41px"
+      height="41px"
+      viewBox="0 0 32 32"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M11.748 5.773S11.418 5 10.914 5c-.496 0-.754.229-.926.387S6.938 7.91 6.938 7.91s-.837.731-.773 2.106c.054 1.375.323 3.332 1.719 6.058 1.386 2.72 4.855 6.876 7.047 8.337 0 0 2.031 1.558 3.921 2.191.549.173 1.647.398 1.903.398.26 0 .719 0 1.246-.385.536-.389 3.543-2.807 3.543-2.807s.736-.665-.119-1.438c-.859-.773-3.467-2.492-4.025-2.944-.559-.459-1.355-.257-1.699.054-.343.313-.956.828-1.031.893-.112.086-.419.365-.763.226-.438-.173-2.234-1.148-3.899-3.426-1.655-2.276-1.837-3.02-2.084-3.824a.56.56 0 0 1 .225-.657c.248-.172 1.161-.933 1.161-.933s.591-.583.344-1.27-1.906-4.716-1.906-4.716z" />
+    </svg>
+  );
+};
+
+export default PhoneIcon;
diff --git a/...ponents/CommonDropdown/components/DesktopCommonDropdown/DesktopCommonDropdown.module.scss b/...ponents/CommonDropdown/components/DesktopCommonDropdown/DesktopCommonDropdown.module.scss
@@ -23,10 +23,6 @@
   font-family: PoppinsSans, sans-serif;
 }
 
-.changeLabelActive {
-  color: $c-neutrals-100;
-}
-
 .menuItems {
   width: 15.625rem;
   max-height: 23rem;

diff --git a/...tent/components/CommonDropdown/components/DesktopCommonDropdown/DesktopCommonDropdown.tsx b/...tent/components/CommonDropdown/components/DesktopCommonDropdown/DesktopCommonDropdown.tsx
@@ -62,13 +62,7 @@ const DesktopCommonDropdown: FC<DesktopCommonDropdownProps> = (props) => {
   const triggerEl = (
     <ButtonIcon onClick={onClick}>
       {isMobileView ? (
-        <span
-          className={classNames(styles.changeLabel, {
-            [styles.changeLabelActive]: isActive,
-          })}
-        >
-          Change
-        </span>
+        <span className={styles.changeLabel}>Change</span>
       ) : (
         <Menu2Icon
           className={classNames(styles.icon, {

diff --git a/src/shared/ui-kit/Button/Button.module.scss b/src/shared/ui-kit/Button/Button.module.scss
@@ -138,7 +138,7 @@
   }
 
   &.buttonDisabled {
-    --btn-bg-color: #{$c-shades-neutrals-30};
+    --btn-bg-color: #{var(--quaternary-fill)};
   }
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -138,7 +138,7 @@ @@
       }
       &.buttonDisabled {
-        --btn-bg-color: #{$c-shades-neutrals-30};
+        --btn-bg-color: #{var(--quaternary-fill)};
       }
     }
@@ Expand Down @@