From 8ef3f5d3a80f0cc78390189975b8a7f83ec95674 Mon Sep 17 00:00:00 2001 From: Vesa Luusua Date: Thu, 1 Jun 2017 17:28:00 +0300 Subject: [PATCH 1/5] Fix tests other components too (Avatar is used in several places). --- .../TopbarDesktop/__snapshots__/TopbarDesktop.test.js.snap | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/TopbarDesktop/__snapshots__/TopbarDesktop.test.js.snap b/src/components/TopbarDesktop/__snapshots__/TopbarDesktop.test.js.snap index 5d742707..47a0c362 100644 --- a/src/components/TopbarDesktop/__snapshots__/TopbarDesktop.test.js.snap +++ b/src/components/TopbarDesktop/__snapshots__/TopbarDesktop.test.js.snap @@ -55,7 +55,6 @@ exports[`TopbarDesktop data matches snapshot 1`] = ` className="" title=""> - From 597c57cdd4854f03c07180e817df83d3f65a673d Mon Sep 17 00:00:00 2001 From: Vesa Luusua Date: Thu, 1 Jun 2017 20:09:45 +0300 Subject: [PATCH 2/5] CloseIcon --- src/components/CloseIcon/CloseIcon.css | 5 ++++ src/components/CloseIcon/CloseIcon.js | 38 ++++++++++++++++++++++++++ src/components/index.js | 2 ++ 3 files changed, 45 insertions(+) create mode 100644 src/components/CloseIcon/CloseIcon.css create mode 100644 src/components/CloseIcon/CloseIcon.js diff --git a/src/components/CloseIcon/CloseIcon.css b/src/components/CloseIcon/CloseIcon.css new file mode 100644 index 00000000..e4c9f474 --- /dev/null +++ b/src/components/CloseIcon/CloseIcon.css @@ -0,0 +1,5 @@ +@import '../../marketplace.css'; + +.root { + stroke: var(--matterColor); +} diff --git a/src/components/CloseIcon/CloseIcon.js b/src/components/CloseIcon/CloseIcon.js new file mode 100644 index 00000000..ea0dc44d --- /dev/null +++ b/src/components/CloseIcon/CloseIcon.js @@ -0,0 +1,38 @@ +import React, { PropTypes } from 'react'; +import classNames from 'classnames'; + +import css from './CloseIcon.css'; + +const CloseIcon = props => { + const { className, rootClassName } = props; + const classes = classNames(rootClassName || css.root, className); + + return ( + + + + + + + ); +}; + +const { string } = PropTypes; + +CloseIcon.defaultProps = { + className: null, + rootClassName: null, +}; + +CloseIcon.propTypes = { + className: string, + rootClassName: string, +}; + +export default CloseIcon; diff --git a/src/components/index.js b/src/components/index.js index 667aa366..ae6c69cc 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -4,6 +4,7 @@ import Avatar from './Avatar/Avatar'; import BirthdayInput from './BirthdayInput/BirthdayInput'; import BookingInfo from './BookingInfo/BookingInfo'; import Button, { FlatButton, InlineButton } from './Button/Button'; +import CloseIcon from './CloseIcon/CloseIcon'; import CurrencyInput from './CurrencyInput/CurrencyInput'; import DateInput from './DateInput/DateInput'; import Discussion from './Discussion/Discussion'; @@ -53,6 +54,7 @@ export { BirthdayInput, BookingInfo, Button, + CloseIcon, CurrencyInput, DateInput, Discussion, From 6497d0c54a6836c3db3733c8b178b183cf71bbad Mon Sep 17 00:00:00 2001 From: Vesa Luusua Date: Thu, 1 Jun 2017 20:11:03 +0300 Subject: [PATCH 3/5] Adding new font for Close modal button --- public/index.html | 8 ++++++++ .../StyleguidePage/Typography.example.js | 15 +++++++++++++++ src/marketplace.css | 9 +++++++++ 3 files changed, 32 insertions(+) diff --git a/public/index.html b/public/index.html index ac2f466a..4bba74f5 100644 --- a/public/index.html +++ b/public/index.html @@ -40,6 +40,14 @@ font-style: normal; } + @font-face { + font-family: 'sofiapro'; + src: url('https://assets-sharetribecom.sharetribe.com/webfonts/sofiapro/sofiapro-bold-webfont.woff2') format('woff2'), + url('https://assets-sharetribecom.sharetribe.com/webfonts/sofiapro/sofiapro-bold-webfont.woff') format('woff'); + font-weight: 700; + font-style: normal; + } + diff --git a/src/containers/StyleguidePage/Typography.example.js b/src/containers/StyleguidePage/Typography.example.js index a459cbb4..70a6319a 100644 --- a/src/containers/StyleguidePage/Typography.example.js +++ b/src/containers/StyleguidePage/Typography.example.js @@ -67,6 +67,12 @@ const Fonts = () => { line-height: 18px; padding: 2px 0 4px 0;`; + const tinyBoldFontStyling = `Styles affecting size: + font-weight: 700; + font-size: 13px; + line-height: 18px; + padding: 2px 0 4px 0;`; + const fontsContainerClasses = classNames(css.fontsContainer, css.baselines); return ( @@ -132,6 +138,15 @@ const Fonts = () => { description="Very small print." styling={tinyFontStyling} /> + ( +

+ Tiny bold mobile text (.tinyBoldFont): CLOSE +

+ )} + description="Very small bold print used next to close icon." + styling={tinyBoldFontStyling} + /> ); diff --git a/src/marketplace.css b/src/marketplace.css index 1d256b2d..355ef57b 100644 --- a/src/marketplace.css +++ b/src/marketplace.css @@ -159,6 +159,15 @@ pre, /* TODO Desktop styles needs to be extracted */ } +.tinyBoldFont { + font-family: "sofiapro", Helvetica, Arial, sans-serif; + font-weight: 700; + font-size: 13px; + line-height: 18px; + padding: 2px 0 4px 0; /* 2px + 4px = 6px */ + letter-spacing: 1.5px; +} + /* This font is specific to Avatar component only */ .smallAvatarFont { font-family: "sofiapro", Helvetica, Arial, sans-serif; From 2e1bcdee6c9a1fd83b287a85f2bb74e555ebdd06 Mon Sep 17 00:00:00 2001 From: Vesa Luusua Date: Thu, 1 Jun 2017 20:13:40 +0300 Subject: [PATCH 4/5] Adding CloseIcon to Modal and updating code --- src/components/Modal/Modal.css | 22 +++++++++++++++------- src/components/Modal/Modal.js | 10 +++++----- src/translations/en.json | 1 + 3 files changed, 21 insertions(+), 12 deletions(-) diff --git a/src/components/Modal/Modal.css b/src/components/Modal/Modal.css index 43464985..e0abd2a7 100644 --- a/src/components/Modal/Modal.css +++ b/src/components/Modal/Modal.css @@ -1,3 +1,5 @@ +@import '../../marketplace.css'; + /* Content is visible as modal layer */ .isOpen { display: flex; @@ -8,7 +10,7 @@ bottom: 0; width: 100%; z-index: 100; - background-color: white; + background-color: var(--matterColorLight); margin: 0 auto; } @@ -33,31 +35,37 @@ } .title { - margin: 1rem; + margin: 24px; flex-grow: 1; } .close { + display: flex; + align-items: baseline; width: auto; - height: 3em; background-color: transparent; - padding: 1em; - color: #999; + padding: 24px; + color: var(--matterColor); border: 0; + composes: tinyBoldFont from '../../marketplace.css'; &:enabled:hover { background-color: transparent; - color: #666; + color: var(--matterColorDark); } &:enabled:active { background-color: transparent; - color: #000; + color: var(--matterColorDark); } &:disabled { background-color: transparent; } } +.closeIcon { + margin-left: 12px; +} + .content { flex-grow: 1; display: flex; diff --git a/src/components/Modal/Modal.js b/src/components/Modal/Modal.js index f15af325..cb5ab5d1 100644 --- a/src/components/Modal/Modal.js +++ b/src/components/Modal/Modal.js @@ -10,10 +10,9 @@ */ import React, { Component, PropTypes } from 'react'; import classNames from 'classnames'; -import { intlShape, injectIntl } from 'react-intl'; -import { Button } from '../../components'; +import { FormattedMessage, intlShape, injectIntl } from 'react-intl'; +import { Button, CloseIcon } from '../../components'; -import closeIcon from './images/closeIcon.svg'; import css from './Modal.css'; export class ModalComponent extends Component { @@ -53,8 +52,9 @@ export class ModalComponent extends Component { const closeModalMessage = intl.formatMessage({ id: 'Modal.closeModal' }); const modalTitle = title ?

{title}

: null; const closeBtn = ( - ); diff --git a/src/translations/en.json b/src/translations/en.json index ff8f82a8..591aa539 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -77,6 +77,7 @@ "LoginForm.logIn": "Log in", "LoginForm.passwordLabel": "Password", "LoginForm.passwordRequired": "required", + "Modal.close": "CLOSE", "Modal.closeModal": "Close modal", "OrderDetailsPanel.orderAcceptedStatus": "{providerName} accepted the booking.", "OrderDetailsPanel.orderAcceptedTitle": "You have booked {title}.", From 5d5d3d6e7e408b3d79cd88dcd9e36b6419cfa234 Mon Sep 17 00:00:00 2001 From: Vesa Luusua Date: Thu, 1 Jun 2017 20:16:10 +0300 Subject: [PATCH 5/5] 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}?" }