version 2

daostack · Nov 10, 2023 · e54a087 · e54a087
1 parent 2f42cd7
commit e54a087
Show file tree

Hide file tree

Showing 12 changed files with 33 additions and 20 deletions.
diff --git a/src/pages/MyAccount/components/Billing/components/Header/Header.module.scss b/src/pages/MyAccount/components/Billing/components/Header/Header.module.scss
@@ -30,7 +30,6 @@
   font-weight: 500;
   font-size: 1rem;
   text-align: center;
-  color: $c-gray-100;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;

diff --git a/src/pages/MyAccount/components/Profile/Profile.tsx b/src/pages/MyAccount/components/Profile/Profile.tsx
@@ -3,9 +3,13 @@ import { useDispatch, useSelector } from "react-redux";
 import { logOut } from "@/pages/Auth/store/actions";
 import { selectUser } from "@/pages/Auth/store/selectors";
 import { ButtonIcon, Loader } from "@/shared/components";
+import { Theme } from "@/shared/constants";
 import { useRoutesContext } from "@/shared/contexts";
 import { useIsTabletView } from "@/shared/hooks/viewport";
 import { Edit3Icon as EditIcon, LogoutIcon } from "@/shared/icons";
+import ThemeIcon from "@/shared/icons/theme.icon";
+import { changeTheme } from "@/shared/store/actions";
+import { selectTheme } from "@/shared/store/selectors";
 import { Button, ButtonVariant } from "@/shared/ui-kit";
 import { Header, MenuButton, UserDetails, UserDetailsRef } from "./components";
 import styles from "./Profile.module.scss";
@@ -23,6 +27,7 @@ const Profile: FC<ProfileProps> = (props) => {
   const [isSubmitting, setIsSubmitting] = useState(false);
   const user = useSelector(selectUser());
   const isMobileView = useIsTabletView();
+  const theme = useSelector(selectTheme);
 
   const handleEditingChange = (isEditing: boolean) => {
     setIsEditing(isEditing);
@@ -49,6 +54,10 @@ const Profile: FC<ProfileProps> = (props) => {
     userDetailsRef.current?.submit();
   };
 
+  const handleThemeToggle = () => {
+    dispatch(changeTheme(theme === Theme.Dark ? Theme.Light : Theme.Dark));
+  };
+
   const handleLogout = () => {
     dispatch(logOut());
   };
@@ -116,6 +125,12 @@ const Profile: FC<ProfileProps> = (props) => {
                   text="Billing"
                   to={getBillingPagePath()}
                 />
+                <MenuButton
+                  className={styles.menuButton}
+                  text="Light/Dark mode"
+                  onClick={handleThemeToggle}
+                  iconEl={<ThemeIcon />}
+                />
                 <MenuButton
                   className={`${styles.menuButton} ${styles.logoutMenuButton}`}
                   text="Logout"

diff --git a/src/pages/MyAccount/components/Profile/components/MenuButton/MenuButton.module.scss b/src/pages/MyAccount/components/Profile/components/MenuButton/MenuButton.module.scss
@@ -6,7 +6,6 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  color: $c-gray-100;
   overflow: hidden;
   text-decoration: none;
 

diff --git a/src/pages/common/components/ChatComponent/components/ChatContent/ChatContent.module.scss b/src/pages/common/components/ChatComponent/components/ChatContent/ChatContent.module.scss
@@ -30,7 +30,8 @@
   font-size: $xsmall;
   line-height: 143%;
   text-align: left;
-  background-color: $c-light-gray;
+  background-color: var(--secondary-background);
+  color: var(--primary-text);
   border-radius: 0.9375rem;
   box-sizing: border-box;
 }

diff --git a/src/pages/commonCreation/components/ProjectCreation/ProjectCreation.module.scss b/src/pages/commonCreation/components/ProjectCreation/ProjectCreation.module.scss
@@ -23,7 +23,7 @@
   display: flex;
   align-items: center;
   text-decoration: none;
-  color: $black;
+  color: var(--primary-text);
 
   &:hover {
     text-decoration: underline;
@@ -48,4 +48,5 @@
   margin: 0 0 2.25rem;
   font-size: $small;
   line-height: 125%;
+  color: var(--primary-text);
 }
diff --git a/...ed/components/FeedLayout/components/FeedItemPreviewModal/FeedItemPreviewModal.module.scss b/...ed/components/FeedLayout/components/FeedItemPreviewModal/FeedItemPreviewModal.module.scss
@@ -2,7 +2,7 @@
 
 .modal {
   border-radius: 0;
-  box-shadow: 0px -5px 4px rgba(0, 0, 0, 0.07);
+  box-shadow: 0px -5px 4px var(--drop-shadow);
 
   .modalWrapper {
     .modalHeader {
@@ -32,6 +32,5 @@
   margin: 0;
   font-weight: 500;
   font-size: $moderate-med-2;
-  color: $c-gray-100;
   word-break: break-word;
 }
diff --git a/src/pages/settings/components/Settings/components/Header/Header.module.scss b/src/pages/settings/components/Settings/components/Header/Header.module.scss
@@ -30,7 +30,6 @@
   font-weight: 500;
   font-size: 1rem;
   text-align: center;
-  color: $c-gray-100;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;

diff --git a/src/shared/components/Chat/EditMessageInput/EditMessageInput.module.scss b/src/shared/components/Chat/EditMessageInput/EditMessageInput.module.scss
@@ -9,9 +9,9 @@ $phone-breakpoint: 415px;
   flex-direction: column;
   box-sizing: border-box;
   border-radius: 0.875rem;
-  border: 0.0625rem $light-gray-2 solid;
+  border: 0.0625rem var(--gentle-stroke) solid;
   width: 85%;
-  background-color: $white;
+  background-color: var(--secondary-background);
   padding: 0.5rem 1rem;
 }
 

diff --git a/src/shared/components/DeletePrompt/index.scss b/src/shared/components/DeletePrompt/index.scss
@@ -9,9 +9,10 @@
   top: 50%;
   left: 50%;
   z-index: 11;
-  background-color: $white;
+  background-color: var(--primary-background);
   align-items: center;
-  box-shadow: $secondary-modal-shadow;
+  color: var(--primary-text);
+  box-shadow: 0 0.25rem 0.9375rem var(--drop-shadow);
   border-radius: 30px;
   padding: 45px;
 
@@ -26,8 +27,8 @@
       margin: 0 0.5rem;
 
       &.delete {
-        background-color: $red;
-        color: $white;
+        background-color: var(--warning);
+        color: var(--primary-text);
         margin-left: 1.5rem;
       }
     }

diff --git a/src/shared/layouts/CommonSidenavLayout/components/LayoutTabs/LayoutTabs.module.scss b/src/shared/layouts/CommonSidenavLayout/components/LayoutTabs/LayoutTabs.module.scss
@@ -7,8 +7,8 @@
   height: var(--layout-tabs-height, 4rem);
   display: none;
   grid-template-columns: repeat(var(--items-amount, 3), minmax(0, 1fr));
-  background-color: $c-shades-white;
-  border-top: 0.0625rem solid $c-neutrals-100;
+  background-color: var(--secondary-background);
+  border-top: 0.0625rem solid var(--gentle-stroke);
   white-space: nowrap;
 
   @include tablet {
@@ -22,7 +22,7 @@
   --tab-fw: 600;
   --tab-fs: #{$small};
   --tab-inactive-color: #{$c-neutrals-300};
-  --tab-inactive-hover-color: #{$c-pink-primary};
+  --tab-inactive-hover-color: var(--hover-fill);
   --tab-active-color: #{$c-pink-primary};
 
   @include tablet {

diff --git a/src/shared/ui-kit/Button/Button.module.scss b/src/shared/ui-kit/Button/Button.module.scss
@@ -33,7 +33,6 @@
   user-select: none;
   transition: all 0.2s;
   box-sizing: border-box;
-  color: var(--primary-text);
 
   &.buttonDisabled {
     cursor: not-allowed;
@@ -227,12 +226,12 @@
 
 .buttonOutlineDarkPinkVariant {
   --btn-color: #{$c-pink-next-dark};
-  --btn-bg-color: #{$c-shades-white};
+  --btn-bg-color: var(--primary-background);
   --btn-border-color: #{$c-pink-next-dark};
   --btn-border: 0.0625rem solid var(--btn-border-color);
 
   &:hover {
-    --btn-bg-color: #{$c-pink-hover-feed-cards};
+    --btn-bg-color: var(--hover-fill);
   }
 
   &:active {

diff --git a/...-kit/TopNavigation/components/TopNavigationWithBlocks/TopNavigationWithBlocks.module.scss b/...-kit/TopNavigation/components/TopNavigationWithBlocks/TopNavigationWithBlocks.module.scss
@@ -10,7 +10,7 @@
     justify-content: space-between;
     align-items: center;
     overflow: hidden;
-    background-color: $c-shades-white;
+    background-color: var(--secondary-background);
   }
 }