Mobile topbar fixes

src/components/Modal/Modal.css

@@ -27,27 +27,28 @@
   overflow: hidden;
 }
 
-/* Header section for Modal */
-.header {
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-end;
-}
-
-.title {
-  margin: 24px;
-  flex-grow: 1;
-}
-
 .close {
+  /* Position inside modal */
+  position: absolute;
+  top: 0;
+  right: 0;
+
+  /* Safari didn't know how to baseline-align svg icon and text */
   display: flex;
-  align-items: baseline;
+  align-items: flex-start;
   width: auto;
-  background-color: transparent;
+
+  /* Sizing (touch area) */
   padding: 24px;
-  color: var(--matterColor);
   border: 0;
+
+  /* Colors */
+  background-color: transparent;
+  color: var(--matterColor);
+
+  /* Font */
   composes: h6Font from '../../marketplace.css';
+  cursor: pointer;
 
   &:enabled:hover {
     background-color: transparent;
@@ -63,7 +64,9 @@
 }
 
 .closeIcon {
+  display: inline-block;
   margin-left: 12px;
+  margin-top: 2px;
 }
 
 .content {

src/components/Modal/Modal.js

@@ -46,24 +46,14 @@ export class ModalComponent extends Component {
       intl,
       isClosedClassName,
       isOpen,
-      title,
     } = this.props;
 
     const closeModalMessage = intl.formatMessage({ id: 'Modal.closeModal' });
-    const modalTitle = title ? <h2 className={css.title}>{title}</h2> : null;
-    const closeBtn = (
-      <Button onClick={this.handleClose} rootClassName={css.close} title={closeModalMessage}>
-        <span><FormattedMessage id="Modal.close" /></span>
-        <CloseIcon rootClassName={css.closeIcon} />
-      </Button>
-    );
-
-    // Header
-    const header = isOpen
-      ? <div className={css.header}>
-          {modalTitle}
-          {closeBtn}
-        </div>
+    const closeBtn = isOpen
+      ? <Button onClick={this.handleClose} rootClassName={css.close} title={closeModalMessage}>
+          <span><FormattedMessage id="Modal.close" /></span>
+          <CloseIcon rootClassName={css.closeIcon} />
+        </Button>
       : null;
 
     // Modal uses given styles to wrap child components.
@@ -74,7 +64,7 @@ export class ModalComponent extends Component {
     const classes = classNames(modalClass, className);
     return (
       <div className={classes}>
-        {header}
+        {closeBtn}
         <div className={css.content}>
           {children}
         </div>
@@ -89,7 +79,6 @@ ModalComponent.defaultProps = {
   isClosedClassName: css.isClosed,
   isOpen: false,
   onClose: null,
-  title: null,
 };
 
 const { bool, func, node, string } = PropTypes;
@@ -101,7 +90,6 @@ ModalComponent.propTypes = {
   isClosedClassName: string,
   isOpen: bool,
   onClose: func.isRequired,
-  title: string,
 
   // eslint-disable-next-line react/no-unused-prop-types
   togglePageClassNames: func.isRequired,

src/components/TopbarMobileMenu/TopbarMobileMenu.css

@@ -4,7 +4,7 @@
   display: flex;
   flex-direction: column;
   height: 100vh;
-  padding: 24px;
+  padding: 0 24px;
 }
 
 .content {
@@ -12,16 +12,21 @@
   flex-shrink: 0;
   display: flex;
   flex-direction: column;
-  margin: 24px 0;
+  align-items: flex-start;
+
+  /* Position content */
+  margin-top: 24px;
 }
 
 .footer {
   flex-basis: 66px;
   flex-shrink: 0;
+  margin-bottom: 24px;
 }
 
 .avatar {
   flex-shrink: 0;
+  margin-top: 72px;
   width: 120px;
   height: 120px;
   border-radius: 50%;
@@ -44,16 +49,21 @@
 }
 
 .logoutButton {
+  /* Position component */
+  margin: 6px 0;
+
+  /* Logout font is smaller and gray since the action is not recommended. */
   composes: h3Font from '../../marketplace.css';
-  text-align: left;
   color: var(--matterColorAnti);
-  margin-top: 6px;
 }
 
 .inbox {
+  margin-top: auto;
+  margin-bottom: 24px;
+
+  /* Font */
   composes: h1Font from '../../marketplace.css';
   color: var(--marketplaceColor);
-  margin-top: auto;
 }
 
 /* TODO createNewListingLink camouflages as a button. */

src/containers/Topbar/MenuIcon.js

@@ -11,14 +11,14 @@ const MenuIcon = props => {
     <svg
       className={classes}
       width="18"
-      height="12"
-      viewBox="0 0 18 12"
+      height="18"
+      viewBox="0 0 18 18"
       xmlns="http://www.w3.org/2000/svg"
     >
       <g fillRule="evenodd">
-        <rect width="18" height="2" rx="1" />
-        <rect y="5" width="18" height="2" rx="1" />
-        <rect y="10" width="18" height="2" rx="1" />
+        <rect y="2" width="18" height="2" rx="1" />
+        <rect y="7" width="18" height="2" rx="1" />
+        <rect y="12" width="18" height="2" rx="1" />
       </g>
     </svg>
   );

src/containers/Topbar/Topbar.css

@@ -15,7 +15,6 @@
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  padding: 0 12px;
 
   /* fill */
   background-color: var(--matterColorLight);
@@ -29,7 +28,9 @@
 }
 
 .home {
-  padding: 18px;
+  /* Home icon's height is 25px. Touch area is created with padding (covers Topbar height) */
+  display: flex;
+  padding: 17.5px 24px;
 }
 
 .logoutButton {
@@ -37,11 +38,35 @@
 }
 
 /* Child component's size (and positioning) should be given here */
-.hamburgerMenu,
+.menu,
 .searchMenu {
   display: flex;
-  align-items: center;
-  width: 44px;
+  width: 66px;
+  padding: 12px 24px;
+  border-width: 0px;
+  background-color: transparent;
+
+  /* Font */
+  composes: h5Font from '../../marketplace.css';
+  color: var(--matterColor);
+
+  /* Hovers */
+  &:enabled {
+    cursor: pointer;
+  }
+  &:enabled:hover,
+  &:enabled:active {
+    background-color: transparent;
+  }
+  &:disabled {
+    background-color: transparent;
+    cursor: auto;
+  }
+}
+
+.menuIcon,
+.searchMenuIcon {
+  margin: 9px 0;
 }
 
 .desktop {

src/containers/Topbar/Topbar.js

@@ -4,7 +4,7 @@ import { connect } from 'react-redux';
 import { FormattedMessage, intlShape, injectIntl } from 'react-intl';
 import { pickBy } from 'lodash';
 import { logout, authenticationInProgress } from '../../ducks/Auth.duck';
-import { FlatButton, Modal, NamedLink, TopbarDesktop, TopbarMobileMenu } from '../../components';
+import { Button, Modal, NamedLink, TopbarDesktop, TopbarMobileMenu } from '../../components';
 import { TopbarSearchForm } from '../../containers';
 import { withFlattenedRoutes } from '../../util/contextHelpers';
 import { parse, stringify } from '../../util/urlHelpers';
@@ -124,15 +124,15 @@ class TopbarComponent extends Component {
     return (
       <div className={css.root}>
         <div className={css.container}>
-          <FlatButton className={css.hamburgerMenu} onClick={this.handleMobileMenuOpen}>
-            <MenuIcon title={intl.formatMessage({ id: 'Topbar.menuIcon' })} />
-          </FlatButton>
+          <Button rootClassName={css.menu} onClick={this.handleMobileMenuOpen}>
+            <MenuIcon className={css.menuIcon} title={intl.formatMessage({ id: 'Topbar.menuIcon' })} />
+          </Button>
           <NamedLink className={css.home} name="LandingPage">
             <LogoIcon title={intl.formatMessage({ id: 'Topbar.logoIcon' })} />
           </NamedLink>
-          <FlatButton className={css.searchMenu} onClick={this.handleMobileSearchOpen}>
-            <SearchIcon title={intl.formatMessage({ id: 'Topbar.searchIcon' })} />
-          </FlatButton>
+          <Button rootClassName={css.searchMenu} onClick={this.handleMobileSearchOpen}>
+            <SearchIcon className={css.searchMenuIcon} title={intl.formatMessage({ id: 'Topbar.searchIcon' })} />
+          </Button>
         </div>
         <div className={css.desktop}>
           <TopbarDesktop
@@ -147,6 +147,7 @@ class TopbarComponent extends Component {
           />
         </div>
         <Modal
+          id="TopbarMobileMenu"
           isOpen={isMobileMenuOpen}
           onClose={this.handleMobileMenuClose}
           togglePageClassNames={togglePageClassNames}
@@ -154,6 +155,7 @@ class TopbarComponent extends Component {
           {authInProgress ? null : mobileMenu}
         </Modal>
         <Modal
+          id="TopbarMobileSearch"
           isOpen={isMobileSearchOpen}
           onClose={this.handleMobileSearchClose}
           togglePageClassNames={togglePageClassNames}