Updating content of Mobile menu modal

src/components/Button/Button.css

@@ -75,7 +75,6 @@
 
 .inlineButton {
   display: inline-block;
-  padding: 0;
 
   /* fill colors should be in sync with marketplace color palette */
   background-color: transparent;

src/components/TopbarDesktop/__snapshots__/TopbarDesktop.test.js.snap

@@ -55,6 +55,7 @@ exports[`TopbarDesktop data matches snapshot 1`] = `
         className=""
         title="">
         <span>
+          
         </span>
       </div>
     </button>

src/components/TopbarMobileMenu/TopbarMobileMenu.css

@@ -4,24 +4,24 @@
   display: flex;
   flex-direction: column;
   height: 100vh;
-  padding: 1rem;
-}
-
-.user {
-  display: flex;
-  flex-direction: row;
-  flex-basis: 80px;
+  padding: 24px;
 }
 
 .content {
   flex-grow: 1;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  margin: 24px 0;
 }
 
 .footer {
-  flex-basis: 80px;
+  flex-basis: 66px;
+  flex-shrink: 0;
 }
 
 .avatar {
+  flex-shrink: 0;
   width: 120px;
   height: 120px;
   border-radius: 50%;
@@ -39,26 +39,71 @@
   composes: h2Font from '../../marketplace.css';
 }
 
+.greeting {
+  composes: h2Font from '../../marketplace.css';
+}
+
+.logoutButton {
+  composes: h4Font from '../../marketplace.css';
+  text-align: left;
+  color: var(--matterColorAnti);
+  margin-top: 6px;
+}
+.inbox {
+  composes: h2Font from '../../marketplace.css';
+  color: var(--marketplaceColor);
+  margin-top: auto;
+}
+
+/* TODO createNewListingLink camouflages as a button. */
 .createNewListingLink {
-  font-size: 14px;
+  display: block;
+  padding: 21px;
+  background-color: var(--marketplaceColor);
+  border-width: 0;
+  border-radius: var(--borderRadius);
+
+  /* Font */
+  composes: buttonFont from '../../marketplace.css';
+  color: var(--matterColorLight);
+  text-align: center;
+
+  /* Dimensions */
+  width: 100%;
+
+  /* Hovers */
+
+  &:enabled {
+    cursor: pointer;
+  }
+  &:enabled:hover {
+    background-color: var(--marketplaceColorDark);
+    text-decoration: none;
+  }
+  &:enabled:active {
+    background-color: var(--marketplaceColorLight);
+  }
+  &:disabled {
+    background-color: var(--matterColorAnti);
+    cursor: auto;
+  }
 }
 
-.userInfo {
-  display: flex;
-  flex-direction: column;
+.authenticationGreeting {
+  composes: h2Font from '../../marketplace.css';
+  margin-bottom: 24px;
 }
-
 .authenticationLinks {
-  display: flex;
-  flex-direction: row;
-  margin-bottom: 1rem;
-  font-size: 20px;
+  white-space: nowrap;
 }
 
 .signupLink {
-  margin-right: 1rem;
   text-decoration: none;
+  white-space: nowrap;
+  color: var(--marketplaceColor);
 }
 .loginLink {
   text-decoration: none;
+  white-space: nowrap;
+  color: var(--marketplaceColor);
 }

src/components/TopbarMobileMenu/TopbarMobileMenu.js

@@ -12,18 +12,35 @@ const TopbarMobileMenu = props => {
   const { isAuthenticated, currentUserHasListings, firstName, lastName, onLogout } = props;
 
   if (!isAuthenticated) {
+    const signup = (
+      <NamedLink name="SignupPage" className={css.signupLink}>
+        <FormattedMessage id="TopbarMobileMenu.signupLink" />
+      </NamedLink>
+    );
+
+    const login = (
+      <NamedLink name="LoginPage" className={css.loginLink}>
+        <FormattedMessage id="TopbarMobileMenu.loginLink" />
+      </NamedLink>
+    );
+
+    const signupOrLogin = (
+      <span className={css.authenticationLinks}>
+        <FormattedMessage id="TopbarMobileMenu.signupOrLogin" values={{ signup, login }} />
+      </span>
+    );
     return (
       <div className={css.root}>
-        <div className={css.authenticationLinks}>
-          <NamedLink name="SignupPage" className={css.signupLink}>
-            <FormattedMessage id="TopbarMobileMenu.signupLink" />
-          </NamedLink>
-          <NamedLink name="LoginPage" className={css.loginLink}>
-            <FormattedMessage id="TopbarMobileMenu.loginLink" />
-          </NamedLink>
+        <div className={css.content}>
+          <div className={css.authenticationGreeting}>
+            <FormattedMessage
+              id="TopbarMobileMenu.unauthorizedGreeting"
+              values={{ lineBreak: <br />, signupOrLogin }}
+            />
+          </div>
         </div>
-        <div className={css.createNewListingLink}>
-          <NamedLink name="NewListingPage">
+        <div className={css.footer}>
+          <NamedLink className={css.createNewListingLink} name="NewListingPage">
             <FormattedMessage id="TopbarMobileMenu.newListingLink" />
           </NamedLink>
         </div>
@@ -32,29 +49,31 @@ const TopbarMobileMenu = props => {
   }
 
   const inboxLink = (
-    <NamedLink name="InboxPage" params={{ tab: currentUserHasListings ? 'sales' : 'orders' }}>
+    <NamedLink
+      className={css.inbox}
+      name="InboxPage"
+      params={{ tab: currentUserHasListings ? 'sales' : 'orders' }}
+    >
       <FormattedMessage id="TopbarMobileMenu.inboxLink" />
     </NamedLink>
   );
 
   return (
     <div className={css.root}>
-      <div className={css.user}>
-        <Avatar rootClassName={css.avatar} firstName={firstName} lastName={lastName} />
-        <div className={css.userInfo}>
-          <span>{name}</span>
-          <NamedLink className={css.createNewListingLink} name="NewListingPage">
-            <FormattedMessage id="TopbarMobileMenu.newListingLink" />
-          </NamedLink>
-        </div>
-      </div>
+      <Avatar rootClassName={css.avatar} firstName={firstName} lastName={lastName} />
       <div className={css.content}>
-        {inboxLink}
-      </div>
-      <div className={css.footer}>
+        <span className={css.greeting}>
+          <FormattedMessage id="TopbarMobileMenu.greeting" values={{ firstName }} />
+        </span>
         <InlineButton className={css.logoutButton} onClick={onLogout}>
           <FormattedMessage id="TopbarMobileMenu.logoutLink" />
         </InlineButton>
+        {inboxLink}
+      </div>
+      <div className={css.footer}>
+        <NamedLink className={css.createNewListingLink} name="NewListingPage">
+          <FormattedMessage id="TopbarMobileMenu.newListingLink" />
+        </NamedLink>
       </div>
     </div>
   );

src/marketplace.css

@@ -27,12 +27,14 @@
   --boxShadowPopup: 0 8px 16px 0 rgba(0, 0, 0, 0.3);
   --boxShadowPopupLight: 0 3px 6px 0 rgba(0, 0, 0, 0.3);
 
-
   /* z-index base levels */
   /* small popups on UI should use z-indexes above 50 */
   --zIndexPopup: 50;
   /* modals and UI overlays should use z-indexes above 100 */
   --zIndexModal: 100;
+
+  /* Border radius */
+  --borderRadius: 2px;
 }
 
 /* FONTS */
@@ -168,6 +170,17 @@ pre,
   letter-spacing: 1.5px;
 }
 
+.buttonFont {
+  font-family: "sofiapro", Helvetica, Arial, sans-serif;
+  font-weight: 600;
+  font-size: 18px;
+  line-height: 24px;
+  padding: 2.5px 0 3.5px 0; /* 2.5px + 3.5px = 6px */
+  letter-spacing: -0.3px;
+
+  /* TODO Desktop styles needs to be extracted */
+}
+
 /* This font is specific to Avatar component only */
 .smallAvatarFont {
   font-family: "sofiapro", Helvetica, Arial, sans-serif;

src/translations/en.json

@@ -191,9 +191,12 @@
   "TopbarDesktop.logout": "Log out",
   "TopbarDesktop.logo": "Logo",
   "TopbarDesktop.signup": "Sign up",
+  "TopbarMobileMenu.greeting": "Hello {firstName}",
   "TopbarMobileMenu.inboxLink": "Inbox",
   "TopbarMobileMenu.loginLink": "Log in",
   "TopbarMobileMenu.logoutLink": "Log out",
   "TopbarMobileMenu.newListingLink": "+ Add your sauna",
-  "TopbarMobileMenu.signupLink": "Sign up"
+  "TopbarMobileMenu.signupLink": "Sign up",
+  "TopbarMobileMenu.signupOrLogin": "{signup} or {login}",
+  "TopbarMobileMenu.unauthorizedGreeting": "Hello there,{lineBreak}would you like to {signupOrLogin}?"
 }