Merge pull request #2261 from daostack/staging

Sprint 30

package.json

@@ -62,6 +62,7 @@
     "react-split-pane": "^0.1.92",
     "react-use": "^17.4.0",
     "react-virtualized": "^9.22.3",
+    "react-zoom-pan-pinch": "^3.2.0",
     "redux": "^4.0.4",
     "redux-saga": "^1.1.3",
     "reselect": "^4.0.0",

src/constants.scss

@@ -149,6 +149,7 @@ $c-gray-30: #b7bcd2;
 $c-gray-40: #8d91a9;
 $c-gray-50: #7a819c;
 $c-gray-60: #6b718e;
+$c-gray-80: #2e3452;
 $c-gray-90: #1f2535;
 $c-gray-100: #131b23;
 $c-gray-800: #27292c;

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/Billing/Billing.module.scss

@@ -0,0 +1,14 @@
+@import "../../../../constants";
+@import "../../../../styles/sizes";
+
+.container {
+  width: 100%;
+}
+
+.header {
+  margin-bottom: 2.25rem;
+
+  @include tablet {
+    margin-bottom: 0;
+  }
+}

src/pages/MyAccount/components/Billing/Billing.tsx

@@ -1,20 +1,22 @@
 import React, { useEffect, useState, FC } from "react";
-import { useDispatch, useSelector } from "react-redux";
+import { useDispatch } from "react-redux";
 import { getBankDetails, loadUserCards } from "@/pages/OldCommon/store/actions";
-import { ScreenSize } from "@/shared/constants";
 import {
   usePaymentMethodChange,
   useUserContributions,
 } from "@/shared/hooks/useCases";
+import { useIsTabletView } from "@/shared/hooks/viewport";
 import { BankAccountDetails, Payment, Subscription } from "@/shared/models";
-import { getScreenSize } from "@/shared/store/selectors";
 import { DesktopBilling } from "./DesktopBilling";
 import { MobileBilling } from "./MobileBilling";
+import { Header } from "./components";
 import { BankAccountState, BillingProps, CardsState } from "./types";
+import styles from "./Billing.module.scss";
 import "./index.scss";
 
 const Billing: FC = () => {
   const dispatch = useDispatch();
+  const isMobileView = useIsTabletView();
   const [cardsState, setCardsState] = useState<CardsState>({
     loading: false,
     fetched: false,
@@ -28,8 +30,6 @@ const Billing: FC = () => {
   const [activeContribution, setActiveContribution] = useState<
     Payment | Subscription | null
   >(null);
-  const screenSize = useSelector(getScreenSize());
-  const isMobileView = screenSize === ScreenSize.Mobile;
   const {
     changePaymentMethodState,
     onPaymentMethodChange,
@@ -138,13 +138,11 @@ const Billing: FC = () => {
   };
 
   return (
-    <div className="route-content my-account-billing">
-      {(!isMobileView || !activeContribution) && (
-        <header className="my-account-billing__header">
-          <h2 className="route-title">Billing</h2>
-        </header>
-      )}
-      <Component {...billingProps} />
+    <div className={styles.container}>
+      <div className="route-content my-account-billing">
+        <Header className={styles.header} isMobileVersion={isMobileView} />
+        <Component {...billingProps} />
+      </div>
     </div>
   );
 };

src/pages/MyAccount/components/Billing/MobileBilling/index.scss

@@ -1,7 +1,7 @@
 @import "../../../../../constants";
 
 .my-account-mobile-billing {
-  --content-ph: var(--container-pl, #{$content-padding-mobile});
+  --content-ph: 1rem;
 
   flex: 1;
   display: flex;
@@ -19,13 +19,13 @@
 
 .my-account-mobile-billing__tabs-wrapper {
   padding: 0 var(--content-ph);
-  margin: 0 calc(var(--content-ph) * -1);
   white-space: nowrap;
   border-bottom: 1px solid $light-gray-1;
 }
 
 .my-account-mobile-billing__tab-panels {
   height: 100%;
+  padding: 0 var(--content-ph);
 }
 
 .my-account-mobile-billing__tab-panel {

src/pages/MyAccount/components/Billing/components/Header/Header.module.scss

@@ -0,0 +1,37 @@
+@import "../../../../../../constants";
+
+.desktopContainer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.desktopTitle {
+  margin: 0;
+  font-family: Lexend, sans-serif;
+  font-weight: normal;
+  font-size: 2.25rem;
+  line-height: 3rem;
+}
+
+.topNavigationWithBlocks {
+  z-index: 10;
+}
+
+.backIcon {
+  flex-shrink: 0;
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+.mobileTitle {
+  margin: 0;
+  font-family: PoppinsSans, sans-serif;
+  font-weight: 500;
+  font-size: 1rem;
+  text-align: center;
+  color: $c-gray-100;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}

src/pages/MyAccount/components/Billing/components/Header/Header.tsx

@@ -0,0 +1,54 @@
+import React, { FC } from "react";
+import { useHistory } from "react-router-dom";
+import classNames from "classnames";
+import { useRoutesContext } from "@/shared/contexts";
+import { useGoBack } from "@/shared/hooks";
+import { LongLeftArrowIcon } from "@/shared/icons";
+import {
+  TopNavigationBackButton,
+  TopNavigationWithBlocks,
+} from "@/shared/ui-kit";
+import styles from "./Header.module.scss";
+
+interface HeaderProps {
+  className?: string;
+  isMobileVersion?: boolean;
+}
+
+const Header: FC<HeaderProps> = (props) => {
+  const { className, isMobileVersion = false } = props;
+  const history = useHistory();
+  const { canGoBack, goBack } = useGoBack();
+  const { getProfilePagePath } = useRoutesContext();
+
+  if (!isMobileVersion) {
+    return (
+      <header className={classNames(styles.desktopContainer, className)}>
+        <h1 className={styles.desktopTitle}>Billing</h1>
+      </header>
+    );
+  }
+
+  const handleBackButtonClick = () => {
+    if (canGoBack) {
+      goBack();
+    } else {
+      history.push(getProfilePagePath());
+    }
+  };
+
+  return (
+    <TopNavigationWithBlocks
+      className={styles.topNavigationWithBlocks}
+      leftElement={
+        <TopNavigationBackButton
+          iconEl={<LongLeftArrowIcon className={styles.backIcon} />}
+          onClick={handleBackButtonClick}
+        />
+      }
+      centralElement={<h2 className={styles.mobileTitle}>Billing</h2>}
+    />
+  );
+};
+
+export default Header;

src/pages/MyAccount/components/Billing/components/Header/index.ts

@@ -0,0 +1 @@
+export { default as Header } from "./Header";

src/pages/MyAccount/components/Billing/components/index.ts

@@ -0,0 +1 @@
+export * from "./Header";

src/pages/MyAccount/components/Billing/index.scss

@@ -2,15 +2,17 @@
 @import "../../../../styles/sizes";
 
 .my-account-billing {
+  max-width: 36.25rem;
   width: 100%;
+  margin: 0 auto;
+  padding-top: 3.375rem;
+  display: flex;
+  flex-direction: column;
   font-family: PoppinsSans, sans-serif;
   color: $secondary-blue;
-  overflow: hidden;
 
-  @include big-phone {
-    display: flex;
-    flex-direction: column;
-    overflow: initial;
+  @include tablet {
+    padding-top: 0;
   }
 
   .my-account-billing__header {

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

@@ -1,11 +1,23 @@
 @import "../../../../constants";
+@import "../../../../styles/mixins";
 @import "../../../../styles/sizes";
 
 .container {
   position: relative;
   width: 100%;
 }
 
+.content {
+  max-width: 36.25rem;
+  width: 100%;
+  margin: 0 auto;
+  padding-top: 3.375rem;
+
+  @include tablet {
+    padding-top: 0;
+  }
+}
+
 .header {
   margin-bottom: 2.25rem;
 
@@ -37,6 +49,14 @@
   }
 }
 
+.userDetails {
+  margin-bottom: 2.25rem;
+
+  @include tablet {
+    margin-bottom: 0;
+  }
+}
+
 .menuButtonsWrapper {
   border-top: 0.0625rem solid $c-gray-20;
 }
@@ -48,3 +68,18 @@
 .logoutMenuButton {
   color: $c-pink-mention;
 }
+
+.buttonsWrapper {
+  @include flex-list-with-gap(1rem);
+
+  @include tablet {
+    width: 100%;
+    margin: 1.5rem 0 0;
+    flex-direction: column-reverse;
+    box-sizing: border-box;
+
+    & > * {
+      margin: 0 0 1rem;
+    }
+  }
+}