Merge pull request #2247 from daostack/dev

Sprint 30

src/pages/Landing/components/LandingContainer/VideoSection/VideoSection.tsx

@@ -1,7 +1,8 @@
 import React, { FC } from "react";
 import { useTranslation } from "react-i18next";
-import landingVideoPosterSrc from "@/shared/assets/images/landing-video-poster.jpeg";
+import landingVideoPosterSrc from "@/shared/assets/images/landing-video-poster.jpg";
 import landingVideoSrc from "@/shared/assets/videos/landing-video.mp4";
+import { useIsBigPhoneView } from "@/shared/hooks/viewport";
 import { Button, ButtonVariant } from "@/shared/ui-kit";
 import "./index.scss";
 
@@ -13,21 +14,24 @@ const VideoSection: FC<VideoSectionProps> = ({ onLaunchClick }) => {
   const { t } = useTranslation("translation", {
     keyPrefix: "landing",
   });
+  const isBigPhoneView = useIsBigPhoneView();
 
   return (
     <section className="landing-video-section">
       <div className="landing-video-section__video-wrapper">
-        <video
-          className="landing-video-section__video"
-          autoPlay
-          loop
-          muted
-          playsInline
-          poster={landingVideoPosterSrc}
-          preload="auto"
-        >
-          <source src={landingVideoSrc} type="video/mp4" />
-        </video>
+        {!isBigPhoneView && (
+          <video
+            className="landing-video-section__video"
+            autoPlay
+            loop
+            muted
+            playsInline
+            poster={landingVideoPosterSrc}
+            preload="auto"
+          >
+            <source src={landingVideoSrc} type="video/mp4" />
+          </video>
+        )}
       </div>
       <div className="landing-video-section__main-info">
         <h1 className="landing-video-section__main-info-title">

src/pages/Landing/components/LandingContainer/VideoSection/index.scss

@@ -6,6 +6,13 @@ $viewport-breakpoint: 1000px;
 
 .landing-video-section {
   position: relative;
+
+  @include big-phone {
+    background-image: url("/assets/images/landing-mobile-poster.jpg");
+    background-size: cover;
+    background-position: center;
+    height: 37.125rem;
+  }
 }
 
 .landing-video-section__video-wrapper {

src/pages/MyAccount/components/Profile/components/UserDetails/UserDetails.module.scss

@@ -83,15 +83,6 @@
   }
 }
 
-.editProfileButton {
-  --btn-h: 1.5rem;
-  --btn-pl: 0.25rem;
-  --btn-pr: 0.25rem;
-
-  margin-top: 0.25rem;
-  font-weight: 500;
-}
-
 .userPhoto {
   width: 6.25rem;
   height: 6.25rem;

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

@@ -289,23 +289,11 @@ const UserDetails: ForwardRefRenderFunction<
                   />
                 </div>
                 {!isEditing && (
-                  <>
-                    <UserDetailsPreview
-                      className={styles.userDetailsPreview}
-                      user={user}
-                      isMobileView={isMobileView}
-                    />
-                    {isMobileView && (
-                      <Button
-                        className={styles.editProfileButton}
-                        variant={ButtonVariant.LightPink}
-                        size={ButtonSize.Xsmall}
-                        onClick={onEdit}
-                      >
-                        Edit profile
-                      </Button>
-                    )}
-                  </>
+                  <UserDetailsPreview
+                    className={styles.userDetailsPreview}
+                    user={user}
+                    isMobileView={isMobileView}
+                  />
                 )}
               </div>
               {!isEditing && user.intro && (

src/pages/OldCommon/components/CommonDetailContainer/MembershipRequestModal/MembershipRequestIntroduce.tsx

@@ -1,11 +1,9 @@
 import React, { useCallback } from "react";
-import { useSelector } from "react-redux";
 import { Formik, FormikConfig } from "formik";
-import { Button } from "@/shared/components";
 import { Form, TextField, LinksArray } from "@/shared/components/Form/Formik";
-import { ScreenSize, MAX_LINK_TITLE_LENGTH } from "@/shared/constants";
+import { MAX_LINK_TITLE_LENGTH } from "@/shared/constants";
 import { CommonLink } from "@/shared/models";
-import { getScreenSize } from "@/shared/store/selectors";
+import { Button, ButtonVariant } from "@/shared/ui-kit";
 import { parseLinksForSubmission } from "@/shared/utils";
 import { IStageProps } from "./MembershipRequestModal";
 import { MembershipRequestStage } from "./constants";
@@ -25,8 +23,6 @@ const getInitialValues = (data: IStageProps["userData"]): FormValues => ({
 
 export default function MembershipRequestIntroduce(props: IStageProps) {
   const { userData, setUserData, governance } = props;
-  const screenSize = useSelector(getScreenSize());
-  const isMobileView = screenSize === ScreenSize.Mobile;
 
   const handleSubmit = useCallback<FormikConfig<FormValues>["onSubmit"]>(
     (values) => {
@@ -95,7 +91,7 @@ export default function MembershipRequestIntroduce(props: IStageProps) {
                 className="membership-request-introduce__submit-button"
                 type="submit"
                 disabled={!isValid}
-                shouldUseFullWidth={isMobileView}
+                variant={ButtonVariant.PrimaryPink}
               >
                 Continue
               </Button>

src/pages/OldCommon/components/CommonListContainer/CreateCommonModal/CreateCommonModal.tsx

@@ -284,6 +284,7 @@ export default function CreateCommonModal(props: CreateCommonModalProps) {
       image: createdCommonData.common.image,
       name: createdCommonData.common.name,
       directParent: createdCommonData.common.directParent,
+      rootCommonId: createdCommonData.common.rootCommonId,
       hasMembership: true,
       hasPermissionToAddProject,
       notificationsAmount: 0,

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

@@ -11,7 +11,7 @@ import { useDispatch, useSelector } from "react-redux";
 import { useDebounce, useMeasure } from "react-use";
 import classNames from "classnames";
 import isHotkey from "is-hotkey";
-import { delay, omit } from "lodash";
+import { debounce, delay, omit } from "lodash";
 import { v4 as uuidv4 } from "uuid";
 import { selectUser } from "@/pages/Auth/store/selectors";
 import { ChatService, DiscussionMessageService, FileService } from "@/services";
@@ -59,6 +59,7 @@ import {
   selectFilesPreview,
   FileInfo,
 } from "@/store/states";
+import { ChatContentContext, ChatContentData } from "../CommonContent/context";
 import {
   ChatContent,
   ChatContentRef,
@@ -181,6 +182,15 @@ export default function ChatComponent({
   const chatContentRef = useRef<ChatContentRef>(null);
   const chatWrapperId = useMemo(() => `chat-wrapper-${uuidv4()}`, []);
   const chatInputWrapperRef = useRef<HTMLDivElement>(null);
+  const chatContainerRef = useRef<HTMLDivElement>(null);
+  const [isScrolling, setScrolling] = useState(false);
+  const chatContentContextValue: ChatContentData = useMemo(
+    () => ({
+      isScrolling,
+      chatContentRect: chatContainerRef.current?.getBoundingClientRect(),
+    }),
+    [isScrolling],
+  );
 
   const [message, setMessage] = useState<TextEditorValue>(
     parseStringToTextEditorValue(),
@@ -591,6 +601,23 @@ export default function ChatComponent({
     };
   }, []);
 
+  useEffect(() => {
+    const deactivateScrollingFlag = debounce(() => {
+      setScrolling(false);
+    }, 300);
+
+    function handleScroll() {
+      setScrolling(true);
+      deactivateScrollingFlag();
+    }
+
+    chatContainerRef.current?.addEventListener("scroll", handleScroll);
+
+    return () => {
+      chatContainerRef.current?.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
+
   const renderChatInput = (): ReactNode => {
     const shouldHideChatInput = !isChatChannel && (!hasAccess || isHidden);
 
@@ -666,32 +693,35 @@ export default function ChatComponent({
           [styles.emptyChat]: !dateList.length,
         })}
         id={chatWrapperId}
+        ref={chatContainerRef}
       >
-        <ChatContent
-          ref={chatContentRef}
-          type={type}
-          commonMember={commonMember}
-          governanceCircles={governanceCircles}
-          chatWrapperId={chatWrapperId}
-          messages={messages}
-          dateList={dateList}
-          lastSeenItem={lastSeenItem}
-          hasPermissionToHide={hasPermissionToHide}
-          users={users}
-          discussionId={discussionId}
-          feedItemId={feedItemId}
-          isLoading={!discussion || isLoadingDiscussionMessages}
-          onMessageDelete={handleMessageDelete}
-          directParent={directParent}
-          onUserClick={onUserClick}
-          onFeedItemClick={onFeedItemClick}
-          onInternalLinkClick={onInternalLinkClick}
-          isEmpty={
-            discussionMessagesData.fetched &&
-            !discussionMessagesData.data?.length && // for non direct messages chats. not using messageCount because it includes the deleted messages as well.
-            Object.keys(discussionMessages).length === 0 // for direct messages chats
-          }
-        />
+        <ChatContentContext.Provider value={chatContentContextValue}>
+          <ChatContent
+            ref={chatContentRef}
+            type={type}
+            commonMember={commonMember}
+            governanceCircles={governanceCircles}
+            chatWrapperId={chatWrapperId}
+            messages={messages}
+            dateList={dateList}
+            lastSeenItem={lastSeenItem}
+            hasPermissionToHide={hasPermissionToHide}
+            users={users}
+            discussionId={discussionId}
+            feedItemId={feedItemId}
+            isLoading={!discussion || isLoadingDiscussionMessages}
+            onMessageDelete={handleMessageDelete}
+            directParent={directParent}
+            onUserClick={onUserClick}
+            onFeedItemClick={onFeedItemClick}
+            onInternalLinkClick={onInternalLinkClick}
+            isEmpty={
+              discussionMessagesData.fetched &&
+              !discussionMessagesData.data?.length && // for non direct messages chats. not using messageCount because it includes the deleted messages as well.
+              Object.keys(discussionMessages).length === 0 // for direct messages chats
+            }
+          />
+        </ChatContentContext.Provider>
       </div>
       <div className={styles.bottomChatContainer}>
         <MessageReply users={users} />

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

@@ -127,20 +127,6 @@ const ChatContent: ForwardRefRenderFunction<
     [chatWrapperId],
   );
 
-  const scrollMore = useCallback(
-    (toY: number) =>
-      setTimeout(
-        () =>
-          animateScroll.scrollMore(toY, {
-            containerId: chatWrapperId,
-            smooth: true,
-            delay: 0,
-          }),
-        0,
-      ),
-    [chatWrapperId],
-  );
-
   const dateListReverse = useMemo(() => [...dateList].reverse(), [dateList]);
 
   useEffect(() => {
@@ -241,17 +227,6 @@ const ChatContent: ForwardRefRenderFunction<
                   scrollToRepliedMessage={scrollToRepliedMessage}
                   highlighted={message.id === highlightedMessageId}
                   hasPermissionToHide={hasPermissionToHide}
-                  onMessageDropdownOpen={(isOpen, messageTopPosition = 0) => {
-                    const dropdownHeight = 240;
-                    const visibleDropdownHeight =
-                      window.innerHeight - messageTopPosition;
-                    const hasEnoughSpaceForMenu =
-                      visibleDropdownHeight >= dropdownHeight;
-
-                    if (isOpen && !hasEnoughSpaceForMenu) {
-                      scrollMore(dropdownHeight - visibleDropdownHeight + 20);
-                    }
-                  }}
                   users={users}
                   feedItemId={feedItemId}
                   commonMember={commonMember}

src/pages/common/components/CommonContent/context.ts

@@ -0,0 +1,13 @@
+import React, { useContext } from "react";
+
+export interface ChatContentData {
+  isScrolling: boolean;
+  chatContentRect?: DOMRect;
+}
+
+export const ChatContentContext = React.createContext<ChatContentData>({
+  isScrolling: false,
+});
+
+export const useChatContentContext = (): ChatContentData =>
+  useContext(ChatContentContext);

src/pages/common/components/CommonTabPanels/components/AboutTab/components/CommonEntranceInfo/components/CommonEntranceJoin/CommonEntranceJoin.module.scss

@@ -2,9 +2,9 @@
 @import "../../../../../../../../../../styles/sizes";
 
 .joinButton {
-  max-width: 8.5rem;
   margin-top: 1.75rem;
   padding: 0 0.875rem;
+  width: 100%;
 
   @include tablet {
     margin-top: 1.625rem;