version 9

src/pages/MyAccount/components/Profile/Profile.tsx

@@ -1,9 +1,10 @@
 import React, { FC, useRef, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
+import { matchPath, useLocation } from "react-router";
 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 { ROUTE_PATHS, Theme } from "@/shared/constants";
 import { useRoutesContext } from "@/shared/contexts";
 import { useIsTabletView } from "@/shared/hooks/viewport";
 import { Edit3Icon as EditIcon, LogoutIcon } from "@/shared/icons";
@@ -28,6 +29,8 @@ const Profile: FC<ProfileProps> = (props) => {
   const user = useSelector(selectUser());
   const isMobileView = useIsTabletView();
   const theme = useSelector(selectTheme);
+  const { pathname } = useLocation();
+  const isV04 = matchPath(ROUTE_PATHS.V04_PROFILE, pathname);
 
   const handleEditingChange = (isEditing: boolean) => {
     setIsEditing(isEditing);
@@ -125,12 +128,14 @@ const Profile: FC<ProfileProps> = (props) => {
                   text="Billing"
                   to={getBillingPagePath()}
                 />
-                <MenuButton
-                  className={`${styles.menuButton} ${styles.themeMenuButton}`}
-                  text="Light/Dark mode"
-                  onClick={handleThemeToggle}
-                  iconEl={<ThemeIcon />}
-                />
+                {!isV04 && (
+                  <MenuButton
+                    className={`${styles.menuButton} ${styles.themeMenuButton}`}
+                    text="Light/Dark mode"
+                    onClick={handleThemeToggle}
+                    iconEl={<ThemeIcon />}
+                  />
+                )}
                 <MenuButton
                   className={`${styles.menuButton} ${styles.logoutMenuButton}`}
                   text="Logout"

src/pages/OldCommon/containers/CommonDetailContainer/CommonDetailContainer.tsx

@@ -25,6 +25,7 @@ import {
   useModal,
   useQueryParams,
   useIntersectionObserver,
+  useLightThemeOnly,
 } from "@/shared/hooks";
 import { useCommon, useSubCommons } from "@/shared/hooks/useCases";
 import PurpleCheckIcon from "@/shared/icons/purpleCheck.icon";
@@ -150,6 +151,7 @@ export default function CommonDetail(props: CommonDetailProps = {}) {
     fetchSubCommons,
     addSubCommon,
   } = useSubCommons();
+  useLightThemeOnly();
 
   const [joinEffortRef, setJoinEffortRef] = useState<HTMLDivElement | null>(
     null,

src/pages/common/components/CommonTabPanels/components/AboutTab/components/CommonLinks/CommonLinks.module.scss

@@ -22,6 +22,7 @@
   display: flex;
   font-size: $small;
   text-decoration: none;
+  color: var(--primary-fill);
 
   &:hover {
     text-decoration: underline;

src/shared/components/Chat/ChatMessage/ChatMessage.module.scss

@@ -162,7 +162,8 @@
 .replyMessageContainer {
   display: flex;
   cursor: pointer;
-  background-color: $c-neutrals-200;
+  background-color: var(--quaternary-fill);
+  color: var(--primary-text);
   border-radius: 0.625rem;
   padding: 0.5rem 0 0.625rem;
   margin: 0.25rem;
@@ -186,7 +187,6 @@
 
 .replyMessageName {
   font-size: $xxsmall;
-  color: $black;
   font-weight: 600;
   line-height: 1.25rem;
   margin-bottom: 0.125rem;
@@ -206,7 +206,6 @@
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
-  color: $black;
   font-size: $xxsmall;
   margin-bottom: 0.4rem;
   line-height: 0.8rem;

src/shared/components/NotFound/NotFound.tsx

@@ -1,17 +1,24 @@
 import React from "react";
 import { useHistory } from "react-router-dom";
 import { ROUTE_PATHS } from "@/shared/constants";
-import Button from "../Button/Button";
+import { Button, ButtonVariant } from "@/shared/ui-kit";
 import "./index.scss";
 
 export default function NotFound() {
   const history = useHistory();
-  
+
   return (
     <div className="page-not-found">
       <img src="/assets/images/404.jpg" alt="404" />
-      <h3 className="page-not-found__message">Woops, the page you’re looking for isn’t there</h3>
-      <Button onClick={() => history.push(ROUTE_PATHS.HOME)}>Back to Home</Button>
+      <h3 className="page-not-found__message">
+        Woops, the page you’re looking for isn’t there
+      </h3>
+      <Button
+        onClick={() => history.push(ROUTE_PATHS.HOME)}
+        variant={ButtonVariant.PrimaryPink}
+      >
+        Back to Home
+      </Button>
     </div>
-  )
+  );
 }

src/shared/components/NotFound/index.scss

@@ -7,7 +7,7 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  color: $secondary-blue;
+  color: var(--primary-text);
 
   .page-not-found__message {
     margin: 0 0 0 1.5rem;

src/shared/hooks/index.tsx

@@ -27,3 +27,4 @@ export { useLanguage } from "./useLanguage";
 export { useIsMounted } from "./useIsMounted";
 export * from "./usePreventReload";
 export { default as useImageSizeCheck } from "./useImageSizeCheck";
+export { default as useLightThemeOnly } from "./useLightThemeOnly";

src/shared/hooks/useLightThemeOnly.tsx

@@ -0,0 +1,18 @@
+import { useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { Theme } from "../constants";
+import { changeTheme } from "../store/actions";
+import { selectTheme } from "../store/selectors";
+
+const useLightThemeOnly = () => {
+  const dispatch = useDispatch();
+  const theme = useSelector(selectTheme);
+
+  useEffect(() => {
+    if (theme === Theme.Dark) {
+      dispatch(changeTheme(Theme.Light));
+    }
+  }, [theme, dispatch, changeTheme]);
+};
+
+export default useLightThemeOnly;

src/shared/layouts/CommonSidenavLayout/CommonSidenavLayout.tsx

@@ -6,7 +6,7 @@ import {
   useLayoutRouteContext,
 } from "@/pages/App/router";
 import { RoutesV04Provider } from "@/shared/contexts";
-import { useLockedBody } from "@/shared/hooks";
+import { useLightThemeOnly, useLockedBody } from "@/shared/hooks";
 import { Sidenav } from "@/shared/ui-kit";
 import { checkSidenavVisibility } from "../SidenavLayout/utils";
 import { SidenavContent } from "./components";
@@ -18,6 +18,7 @@ const CommonSidenavLayout: FC = (props) => {
   const { routeOptions = {} } =
     useLayoutRouteContext<CommonSidenavLayoutRouteOptions>();
   const isSidenavVisible = checkSidenavVisibility(routeOptions.sidenav);
+  useLightThemeOnly();
   const { width } = useWindowSize();
   const { lockBodyScroll, unlockBodyScroll } = useLockedBody();
   const sidenavLeft = getSidenavLeft(width);

src/shared/layouts/SidenavLayout/SidenavLayout.tsx

@@ -5,7 +5,7 @@ import {
   useLayoutRouteContext,
 } from "@/pages/App/router";
 import { RoutesV03Provider } from "@/shared/contexts";
-import { useLockedBody } from "@/shared/hooks";
+import { useLightThemeOnly, useLockedBody } from "@/shared/hooks";
 import { Sidenav } from "@/shared/ui-kit";
 import { SidenavContent } from "./components";
 import { checkSidenavVisibility } from "./utils";
@@ -17,6 +17,7 @@ const SidenavLayout: FC = (props) => {
     useLayoutRouteContext<SidenavLayoutRouteOptions>();
   const isSidenavVisible = checkSidenavVisibility(routeOptions.sidenav);
   const { lockBodyScroll, unlockBodyScroll } = useLockedBody();
+  useLightThemeOnly();
 
   const handleSidenavOpenToggle = useCallback(
     (isOpen: boolean) => {

src/shared/layouts/SidenavLayout/components/SidenavContent/components/UserInfo/components/MenuItems/MenuItems.tsx

@@ -1,5 +1,6 @@
 import React, { FC } from "react";
 import { useDispatch, useSelector } from "react-redux";
+import { useLocation } from "react-router";
 import classNames from "classnames";
 import { Menu } from "@headlessui/react";
 import { logOut } from "@/pages/Auth/store/actions";
@@ -32,12 +33,28 @@ interface MenuItemsProps {
   styles?: MenuItemsStyles;
 }
 
+const insertIf = (condition: boolean, ...elements: any) => {
+  return condition ? elements : [];
+};
+
 const MenuItems: FC<MenuItemsProps> = (props) => {
   const { placement = MenuItemsPlacement.Bottom, styles: outerStyles } = props;
   const dispatch = useDispatch();
   const { getProfilePagePath, getBillingPagePath, getSettingsPagePath } =
     useRoutesContext();
   const theme = useSelector(selectTheme);
+  const { pathname } = useLocation();
+  const isV04 = pathname.includes("-v04");
+
+  const toggleTheme = {
+    key: "theme",
+    type: ItemType.Button,
+    text: "Light/Dark mode",
+    icon: <ThemeIcon />,
+    onClick: () => {
+      dispatch(changeTheme(theme === Theme.Dark ? Theme.Light : Theme.Dark));
+    },
+  };
 
   const items: Item[] = [
     {
@@ -58,15 +75,7 @@ const MenuItems: FC<MenuItemsProps> = (props) => {
       icon: <BillingIcon />,
       to: getBillingPagePath(),
     },
-    {
-      key: "theme",
-      type: ItemType.Button,
-      text: "Light/Dark mode",
-      icon: <ThemeIcon />,
-      onClick: () => {
-        dispatch(changeTheme(theme === Theme.Dark ? Theme.Light : Theme.Dark));
-      },
-    },
+    ...insertIf(!isV04, toggleTheme),
     {
       key: "log-out",
       type: ItemType.Button,

src/shared/ui-kit/TextEditor/components/Element/components/Link/Link.module.scss

@@ -1,5 +1,5 @@
 @import "../../../../../../../constants";
 
 .link {
-  color: var(--secondary-text);
+  color: var(--primary-fill);
 }

src/styles/theme.scss

@@ -10,6 +10,7 @@
   --primary-fill: #c32ea3;
   --secondary-fill: #f3d4eb;
   --tertiary-fill: #ffffff;
+  --quaternary-fill: #d5d5e4;
   --drop-shadow: rgba(0, 0, 0, 0.15259);
 }
 
@@ -25,5 +26,6 @@
   --primary-fill: #c32ea3;
   --secondary-fill: #743b65;
   --tertiary-fill: #131b23;
+  --quaternary-fill: #525876;
   --drop-shadow: rgba(0, 0, 0, 0.15259);
 }