Merge pull request #2206 from daostack/feature/CW-2194-profile

Complete the profile page changes #2194

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/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;
+    }
+  }
+}

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

@@ -2,19 +2,13 @@ import React, { FC, useRef, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { logOut } from "@/pages/Auth/store/actions";
 import { selectUser } from "@/pages/Auth/store/selectors";
-import {
-  UserDetails,
-  UserDetailsRef,
-} from "@/pages/Login/components/LoginContainer/UserDetails";
 import { ButtonIcon, Loader } from "@/shared/components";
 import { useRoutesContext } from "@/shared/contexts";
 import { useIsTabletView } from "@/shared/hooks/viewport";
-import { LogoutIcon } from "@/shared/icons";
-import EditIcon from "@/shared/icons/edit.icon";
+import { Edit3Icon as EditIcon, LogoutIcon } from "@/shared/icons";
 import { Button, ButtonVariant } from "@/shared/ui-kit";
-import { Header, MenuButton } from "./components";
+import { Header, MenuButton, UserDetails, UserDetailsRef } from "./components";
 import styles from "./Profile.module.scss";
-import "./index.scss";
 
 interface ProfileProps {
   onEditingChange?: (isEditing: boolean) => void;
@@ -60,7 +54,7 @@ const Profile: FC<ProfileProps> = (props) => {
   };
 
   const buttonsWrapperEl = (
-    <div className="profile-wrapper__buttons-wrapper">
+    <div className={styles.buttonsWrapper}>
       <Button
         variant={ButtonVariant.OutlineDarkPink}
         onClick={handleCancelClick}
@@ -73,7 +67,7 @@ const Profile: FC<ProfileProps> = (props) => {
         onClick={handleSubmit}
         disabled={isSubmitting}
       >
-        Save
+        {isMobileView ? "Save changes" : "Save"}
       </Button>
     </div>
   );
@@ -86,7 +80,7 @@ const Profile: FC<ProfileProps> = (props) => {
   return (
     <div className={styles.container}>
       {!isMobileView && !isEditing && editButtonEl}
-      <div className="profile-wrapper">
+      <div className={styles.content}>
         <Header
           className={styles.header}
           isEditing={isEditing}
@@ -99,23 +93,14 @@ const Profile: FC<ProfileProps> = (props) => {
             <div className={styles.formWrapper}>
               <UserDetails
                 ref={userDetailsRef}
-                className="profile-wrapper__user-details"
+                className={styles.userDetails}
                 user={user}
-                showAuthProvider={false}
-                customSaveButton
                 isCountryDropdownFixed={false}
                 isEditing={isEditing}
+                isMobileView={isMobileView}
+                onEdit={handleEditClick}
                 onLoading={setIsSubmitting}
                 onSubmitting={handleSubmittingChange}
-                styles={{
-                  avatarWrapper: "profile-wrapper__avatar-wrapper",
-                  avatar: "profile-wrapper__avatar",
-                  userAvatar: "profile-wrapper__user-avatar",
-                  editAvatar: "profile-wrapper__edit-avatar",
-                  fieldContainer: "profile-wrapper__field-container",
-                  introInputWrapper:
-                    "profile-wrapper__form-intro-input-wrapper",
-                }}
               />
               {isEditing && buttonsWrapperEl}
             </div>