Merge branch 'staging'

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 {

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;

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 {

src/pages/Landing/containers/LandingContainer/LandingContainer.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { useSelector } from "react-redux";
 import classNames from "classnames";
 import { Language } from "@/shared/constants";
-import { useModal } from "@/shared/hooks";
+import { useLightThemeOnly, useModal } from "@/shared/hooks";
 import { selectLanguage } from "@/shared/store/selectors";
 import { JoinWaitlistModal } from "../../components/JoinWaitlistModal";
 import {
@@ -21,6 +21,7 @@ const LandingContainer = () => {
     onOpen: onWaitlistModalOpen,
     onClose: onWaitlistModalClose,
   } = useModal(false);
+  useLightThemeOnly();
 
   return (
     <div

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 {

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;

src/pages/common/components/ChatComponent/ChatComponent.tsx

@@ -174,6 +174,8 @@ export default function ChatComponent({
       singleEmojiText: styles.singleEmojiText,
       multipleEmojiText: styles.multipleEmojiText,
     },
+    onFeedItemClick,
+    onUserClick,
   });
   const {
     chatMessagesData,

src/pages/common/components/ChatComponent/hooks/useDiscussionChatAdapter.ts

@@ -6,8 +6,8 @@ import {
   useDiscussionMessagesById,
   useMarkFeedItemAsSeen,
 } from "@/shared/hooks/useCases";
-import { DirectParent, User } from "@/shared/models";
 import { TextStyles } from "@/shared/hooks/useCases/useDiscussionMessagesById";
+import { DirectParent, User } from "@/shared/models";
 
 interface Options {
   hasPermissionToHide: boolean;
@@ -28,8 +28,13 @@ interface Return {
 }
 
 export const useDiscussionChatAdapter = (options: Options): Return => {
-  const { hasPermissionToHide, textStyles, discussionId } = options;
-
+  const {
+    hasPermissionToHide,
+    textStyles,
+    discussionId,
+    onFeedItemClick,
+    onUserClick,
+  } = options;
   const user = useSelector(selectUser());
   const userId = user?.uid;
   const { data: commonMembers, fetchCommonMembers } = useCommonMembers();
@@ -44,7 +49,9 @@ export const useDiscussionChatAdapter = (options: Options): Return => {
     discussionId,
     hasPermissionToHide,
     users,
-    textStyles
+    textStyles,
+    onFeedItemClick,
+    onUserClick,
   });
   const { markFeedItemAsSeen } = useMarkFeedItemAsSeen();
 

src/pages/common/components/CommonTabPanels/components/FeedTab/components/NewProposalCreation/components/AddRecipient/AddRecipient.module.scss

@@ -22,6 +22,7 @@
   padding: 0 1rem;
   background-color: var(--tertiary-fill);
   width: 100%;
+  color: var(--primary-text);
 }
 
 .tableHeader {
@@ -82,8 +83,4 @@
 
 .clickableRow {
   cursor: pointer;
-
-  &:hover {
-    background-color: $c-primary-100;
-  }
 }

src/pages/commonFeed/CommonFeed.tsx

@@ -27,7 +27,11 @@ import {
 } from "@/shared/constants";
 import { useRoutesContext } from "@/shared/contexts";
 import { useAuthorizedModal, useQueryParams } from "@/shared/hooks";
-import { useCommonFeedItems, useUserCommonIds } from "@/shared/hooks/useCases";
+import {
+  useCommonFeedItems,
+  useLastVisitedCommon,
+  useUserCommonIds,
+} from "@/shared/hooks/useCases";
 import { useCommonPinnedFeedItems } from "@/shared/hooks/useCases/useCommonPinnedFeedItems";
 import { SidebarIcon } from "@/shared/icons";
 import {
@@ -47,7 +51,6 @@ import {
 import {
   cacheActions,
   commonActions,
-  commonLayoutActions,
   selectCommonAction,
   selectRecentStreamId,
   selectSharedFeedItem,
@@ -114,6 +117,7 @@ const CommonFeedComponent: FC<CommonFeedProps> = (props) => {
     fetched: isCommonDataFetched,
     fetchCommonData,
   } = useCommonData(userId);
+  const { updateLastVisitedCommon } = useLastVisitedCommon(userId);
   const parentCommonId = commonData?.common.directParent?.commonId;
   const anotherCommonId =
     userCommonIds[0] === commonId ? userCommonIds[1] : userCommonIds[0];
@@ -414,38 +418,28 @@ const CommonFeedComponent: FC<CommonFeedProps> = (props) => {
   }, [rootCommonMember?.id]);
 
   useEffect(() => {
-    return () => {
+    const updateLastVisited = () => {
       const common = stateRef.current?.data?.common;
-      const rootCommon = stateRef.current?.data?.rootCommon;
 
-      dispatch(
-        commonLayoutActions.setLastCommonFromFeed({
-          id: commonId,
-          data: common
-            ? {
-                name: common.name,
-                image: common.image,
-                isProject: checkIsProject(common),
-                memberCount: common.memberCount,
-                rootCommon: common.rootCommonId
-                  ? {
-                      id: common.rootCommonId,
-                      data: rootCommon
-                        ? {
-                            name: rootCommon.name,
-                            image: rootCommon.image,
-                            isProject: false,
-                            memberCount: rootCommon.memberCount,
-                          }
-                        : null,
-                    }
-                  : null,
-              }
-            : null,
-        }),
-      );
+      updateLastVisitedCommon({
+        id: commonId,
+        data: common
+          ? {
+              name: common.name,
+              image: common.image,
+              isProject: checkIsProject(common),
+              memberCount: common.memberCount,
+            }
+          : null,
+      });
     };
-  }, [commonId]);
+
+    updateLastVisited();
+
+    return () => {
+      updateLastVisited();
+    };
+  }, [updateLastVisitedCommon, commonId]);
 
   if (!isDataFetched) {
     const headerEl = renderLoadingHeader ? (

src/pages/commonFeed/CommonFeedPage.tsx

@@ -1,12 +1,13 @@
 import React, { FC, useEffect, useMemo } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { useParams } from "react-router-dom";
+import { selectUser } from "@/pages/Auth/store/selectors";
 import { InboxItemType } from "@/shared/constants";
 import { MainRoutesProvider } from "@/shared/contexts";
+import { useLastVisitedCommon } from "@/shared/hooks/useCases";
 import { MultipleSpacesLayoutPageContent } from "@/shared/layouts";
 import {
   multipleSpacesLayoutActions,
-  selectCommonLayoutLastCommonFromFeed,
   selectMultipleSpacesLayoutMainWidth,
 } from "@/store/states";
 import BaseCommonFeedPage, {
@@ -59,7 +60,9 @@ const CommonFeedPage: FC = () => {
   const { id: commonId } = useParams<CommonFeedPageRouterParams>();
   const dispatch = useDispatch();
   const layoutMainWidth = useSelector(selectMultipleSpacesLayoutMainWidth);
-  const lastCommonFromFeed = useSelector(selectCommonLayoutLastCommonFromFeed);
+  const user = useSelector(selectUser());
+  const userId = user?.uid;
+  const { lastVisitedCommon } = useLastVisitedCommon(userId);
   const onActiveItemDataChange = useActiveItemDataChange();
   const feedLayoutSettings = useMemo<FeedLayoutSettings>(
     () => ({
@@ -68,13 +71,13 @@ const CommonFeedPage: FC = () => {
     }),
     [layoutMainWidth],
   );
-  const lastCommonFromFeedData = lastCommonFromFeed?.data;
+  const lastCommonFromFeedData = lastVisitedCommon?.data;
 
   const renderLoadingHeader = lastCommonFromFeedData
     ? () => (
         <HeaderContentWrapper className={styles.headerContentWrapper}>
           <HeaderCommonContent
-            commonId={lastCommonFromFeed.id}
+            commonId={lastVisitedCommon.id}
             commonName={lastCommonFromFeedData.name}
             commonImage={lastCommonFromFeedData.image}
             isProject={lastCommonFromFeedData.isProject}
@@ -95,7 +98,7 @@ const CommonFeedPage: FC = () => {
 
   useEffect(() => {
     return () => {
-      dispatch(multipleSpacesLayoutActions.moveBreadcrumbsToPrevious());
+      dispatch(multipleSpacesLayoutActions.clearBreadcrumbs());
     };
   }, []);
 

src/pages/commonFeed/components/FeedLayout/FeedLayout.tsx

@@ -620,7 +620,13 @@ const FeedLayout: ForwardRefRenderFunction<FeedLayoutRef, FeedLayoutProps> = (
   }, [batchNumber]);
 
   useEffect(() => {
-    if (sharedFeedItemId && isTabletView && allFeedItems) {
+    if (
+      isTabletView &&
+      sharedFeedItemId &&
+      allFeedItems.length > 0 &&
+      allFeedItems.some((item) => item.itemId === sharedFeedItemId)
+    ) {
+      deleteQueryParam(QueryParamKey.Item, true);
       setActiveChatItem({ feedItemId: sharedFeedItemId });
     }
   }, [sharedFeedItemId, isTabletView, allFeedItems]);

src/pages/commonFeed/components/FeedLayout/components/FeedItemPreviewModal/FeedItemPreviewModal.tsx

@@ -4,6 +4,7 @@ import { useChatContext } from "@/pages/common/components/ChatComponent";
 import { Modal } from "@/shared/components";
 import { useIsTabletView } from "@/shared/hooks/viewport";
 import { ModalType, FeedLayoutItemChangeData } from "@/shared/interfaces";
+import { Breadcrumbs } from "@/shared/layouts/MultipleSpacesLayout/components/Header/components";
 import { Circles, CommonFeed } from "@/shared/models";
 import styles from "./FeedItemPreviewModal.module.scss";
 
@@ -72,6 +73,7 @@ const FeedItemPreviewModal: FC<FeedItemPreviewModalProps> = (props) => {
     >
       {selectedFeedItem && (
         <>
+          <Breadcrumbs itemsWithMenus={false} />
           {title && <h3 className={styles.itemTitle}>{title}</h3>}
           <FeedItem
             commonId={commonId}

src/services/User.ts

@@ -15,7 +15,6 @@ import {
   convertObjectDatesToFirestoreTimestamps,
   convertToTimestamp,
   firestoreDataConverter,
-  transformFirebaseDataList,
 } from "@/shared/utils";
 import firebase from "@/shared/utils/firebase";
 import * as cacheActions from "@/store/states/cache/actions";
@@ -51,31 +50,56 @@ class UserService {
     };
   };
 
-  public getUserById = async (userId: string): Promise<User | null> => {
-    const userSnapshot = await this.getUsersCollection()
+  public getUserById = async (
+    userId: string,
+    cached = false,
+  ): Promise<User | null> => {
+    const snapshot = await this.getUsersCollection()
       .where("uid", "==", userId)
-      .get();
+      .get({ source: cached ? "cache" : "default" });
+    const users = snapshot.docs.map((doc) => doc.data());
+    const user = users[0] || null;
+
+    if (cached && !user) {
+      return this.getUserById(userId);
+    }
 
-    return transformFirebaseDataList<User>(userSnapshot)[0] || null;
+    return user;
   };
 
   public getCachedUserById = async (userId: string): Promise<User | null> => {
-    const userState = store.getState().cache.userStates[userId];
+    try {
+      const userState = store.getState().cache.userStates[userId];
 
-    if (userState?.fetched) {
-      return userState.data;
-    }
-    if (userState?.loading) {
-      return await waitForUserToBeLoaded(userId);
-    }
+      if (userState?.fetched) {
+        return userState.data;
+      }
+      if (userState?.loading) {
+        return await waitForUserToBeLoaded(userId);
+      }
 
-    store.dispatch(
-      cacheActions.getUserStateById.request({
-        payload: { userId },
-      }),
-    );
+      store.dispatch(
+        cacheActions.getUserStateById.request({
+          payload: { userId },
+        }),
+      );
+
+      return await waitForUserToBeLoaded(userId);
+    } catch (err) {
+      const user = await this.getUserById(userId, true);
+      store.dispatch(
+        cacheActions.updateUserStateById({
+          userId,
+          state: {
+            loading: false,
+            fetched: true,
+            data: user,
+          },
+        }),
+      );
 
-    return await waitForUserToBeLoaded(userId);
+      return user;
+    }
   };
 
   public getCachedUsersById = async (userIds: string[]): Promise<User[]> =>