diff --git a/public/assets/images/human-pyramid-transparent.svg b/public/assets/images/human-pyramid-transparent.svg index 6db8c4dba0..4d59280317 100644 --- a/public/assets/images/human-pyramid-transparent.svg +++ b/public/assets/images/human-pyramid-transparent.svg @@ -1,100 +1,108 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/icons/social-login/apple.svg b/public/icons/social-login/apple.svg deleted file mode 100644 index b3b62e6bc7..0000000000 --- a/public/icons/social-login/apple.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/public/icons/social-login/google.svg b/public/icons/social-login/google.svg deleted file mode 100644 index 6e61a4ab28..0000000000 --- a/public/icons/social-login/google.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/public/icons/social-login/phone.svg b/public/icons/social-login/phone.svg deleted file mode 100644 index 4230846808..0000000000 --- a/public/icons/social-login/phone.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/pages/Landing/components/JoinWaitlistModal/JoinWaitlistModal.module.scss b/src/pages/Landing/components/JoinWaitlistModal/JoinWaitlistModal.module.scss index 1d61ec4be0..1369939dc4 100644 --- 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 index 0f9a1a9c88..cc848bbf50 100644 --- 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 index fead75a6ac..69050cc5cb 100644 --- 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 index f1da062659..13bdb399fd 100644 --- 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 index 32d7d17c6a..3fb755f8bd 100644 --- 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 index 807e13c97a..447d72147a 100644 --- a/src/shared/components/Header/LanguageDropdown/LanguageDropdown.tsx +++ b/src/shared/components/Header/LanguageDropdown/LanguageDropdown.tsx @@ -41,6 +41,7 @@ const LanguageDropdown: FC = (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 index 890b37fde0..41a3a81dcd 100644 --- a/src/shared/components/Header/LanguageDropdown/index.scss +++ b/src/shared/components/Header/LanguageDropdown/index.scss @@ -4,6 +4,8 @@ .language-dropdown__menu-button { background-color: transparent; border: 0; + background-color: $white; + color: $black; @include big-phone { height: 4.125rem; @@ -11,18 +13,29 @@ } } +.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 index 16e6bba7c2..cd007f5e0a 100644 --- 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 index d4428b8b30..fd35459575 100644 --- 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 = ({ className={classNames("social-login-button", className)} onClick={handleClick} > - {`Sign + {provider === AuthProvider.Apple && } + {provider === AuthProvider.Google && } + {provider === AuthProvider.Phone && } ); }; diff --git a/src/shared/components/SocialLoginButton/index.scss b/src/shared/components/SocialLoginButton/index.scss index 58abb0dc9c..f6e62cb122 100644 --- 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 new file mode 100644 index 0000000000..fff3aeb538 --- /dev/null +++ b/src/shared/icons/auth/apple.icon.tsx @@ -0,0 +1,24 @@ +import React, { FC } from "react"; + +const AppleIcon: FC = () => { + const color = "currentColor"; + + return ( + + + + ); +}; + +export default AppleIcon; diff --git a/src/shared/icons/auth/google.icon.tsx b/src/shared/icons/auth/google.icon.tsx new file mode 100644 index 0000000000..2fd35cb30c --- /dev/null +++ b/src/shared/icons/auth/google.icon.tsx @@ -0,0 +1,42 @@ +import React, { FC } from "react"; + +const GoogleIcon: FC = () => { + //const color = "currentColor"; + + return ( + + + + + + + ); +}; + +export default GoogleIcon; diff --git a/src/shared/icons/auth/phone.icon.tsx b/src/shared/icons/auth/phone.icon.tsx new file mode 100644 index 0000000000..16bb86d21e --- /dev/null +++ b/src/shared/icons/auth/phone.icon.tsx @@ -0,0 +1,19 @@ +import React, { FC } from "react"; + +const PhoneIcon: FC = () => { + const color = "currentColor"; + + return ( + + + + ); +}; + +export default PhoneIcon; diff --git a/src/shared/layouts/CommonSidenavLayout/components/SidenavContent/components/CommonDropdown/components/DesktopCommonDropdown/DesktopCommonDropdown.module.scss b/src/shared/layouts/CommonSidenavLayout/components/SidenavContent/components/CommonDropdown/components/DesktopCommonDropdown/DesktopCommonDropdown.module.scss index c5a8625856..789fa7099f 100644 --- a/src/shared/layouts/CommonSidenavLayout/components/SidenavContent/components/CommonDropdown/components/DesktopCommonDropdown/DesktopCommonDropdown.module.scss +++ b/src/shared/layouts/CommonSidenavLayout/components/SidenavContent/components/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/src/shared/layouts/CommonSidenavLayout/components/SidenavContent/components/CommonDropdown/components/DesktopCommonDropdown/DesktopCommonDropdown.tsx b/src/shared/layouts/CommonSidenavLayout/components/SidenavContent/components/CommonDropdown/components/DesktopCommonDropdown/DesktopCommonDropdown.tsx index 3c35975ae9..af92338041 100644 --- a/src/shared/layouts/CommonSidenavLayout/components/SidenavContent/components/CommonDropdown/components/DesktopCommonDropdown/DesktopCommonDropdown.tsx +++ b/src/shared/layouts/CommonSidenavLayout/components/SidenavContent/components/CommonDropdown/components/DesktopCommonDropdown/DesktopCommonDropdown.tsx @@ -62,13 +62,7 @@ const DesktopCommonDropdown: FC = (props) => { const triggerEl = ( {isMobileView ? ( - - Change - + Change ) : (