From 5d5d3d6e7e408b3d79cd88dcd9e36b6419cfa234 Mon Sep 17 00:00:00 2001 From: Vesa Luusua Date: Thu, 1 Jun 2017 20:16:10 +0300 Subject: [PATCH] Updating content of Mobile menu modal --- src/components/Button/Button.css | 1 - .../__snapshots__/TopbarDesktop.test.js.snap | 1 + .../TopbarMobileMenu/TopbarMobileMenu.css | 81 ++++++++++++++----- .../TopbarMobileMenu/TopbarMobileMenu.js | 63 ++++++++++----- src/marketplace.css | 15 +++- src/translations/en.json | 5 +- 6 files changed, 123 insertions(+), 43 deletions(-) diff --git a/src/components/Button/Button.css b/src/components/Button/Button.css index 9a1900cf..892a8283 100644 --- a/src/components/Button/Button.css +++ b/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; diff --git a/src/components/TopbarDesktop/__snapshots__/TopbarDesktop.test.js.snap b/src/components/TopbarDesktop/__snapshots__/TopbarDesktop.test.js.snap index 47a0c362..5d742707 100644 --- a/src/components/TopbarDesktop/__snapshots__/TopbarDesktop.test.js.snap +++ b/src/components/TopbarDesktop/__snapshots__/TopbarDesktop.test.js.snap @@ -55,6 +55,7 @@ exports[`TopbarDesktop data matches snapshot 1`] = ` className="" title=""> + diff --git a/src/components/TopbarMobileMenu/TopbarMobileMenu.css b/src/components/TopbarMobileMenu/TopbarMobileMenu.css index 31019dc0..e36ba77c 100644 --- a/src/components/TopbarMobileMenu/TopbarMobileMenu.css +++ b/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); } diff --git a/src/components/TopbarMobileMenu/TopbarMobileMenu.js b/src/components/TopbarMobileMenu/TopbarMobileMenu.js index 5be2bb63..f6ef1b51 100644 --- a/src/components/TopbarMobileMenu/TopbarMobileMenu.js +++ b/src/components/TopbarMobileMenu/TopbarMobileMenu.js @@ -12,18 +12,35 @@ const TopbarMobileMenu = props => { const { isAuthenticated, currentUserHasListings, firstName, lastName, onLogout } = props; if (!isAuthenticated) { + const signup = ( + + + + ); + + const login = ( + + + + ); + + const signupOrLogin = ( + + + + ); return (
-
- - - - - - +
+
+ , signupOrLogin }} + /> +
-
- +
+
@@ -32,29 +49,31 @@ const TopbarMobileMenu = props => { } const inboxLink = ( - + ); return (
-
- -
- {name} - - - -
-
+
- {inboxLink} -
-
+ + + + {inboxLink} +
+
+ + +
); diff --git a/src/marketplace.css b/src/marketplace.css index 355ef57b..03b8aee4 100644 --- a/src/marketplace.css +++ b/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; diff --git a/src/translations/en.json b/src/translations/en.json index 591aa539..c57c98ee 100644 --- a/src/translations/en.json +++ b/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}?" }