Mobile css updates.

components/common/MobileMenu.js

@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import Link from './Link';
 import Button from './Button';
 import XMark from 'assets/xmark.svg';
@@ -5,9 +6,9 @@ import styles from './MobileMenu.module.css';
 
 export default function MobileMenu({ items = [], onClose }) {
   return (
-    <div className={styles.menu}>
+    <div className={classNames(styles.menu, 'container')}>
       <div className={styles.header}>
-        <Button className={styles.button} icon={<XMark />} onClick={onClose} />
+        <Button icon={<XMark />} onClick={onClose} />
       </div>
       <div className={styles.items}>
         {items.map(({ label, value }) => (

components/common/MobileMenu.module.css

@@ -32,13 +32,10 @@
   margin-top: 60px;
 }
 
-.button {
-  margin-right: 15px;
-}
-
 .header {
   display: flex;
   justify-content: flex-end;
   align-items: center;
   height: 100px;
+  padding: 0 30px;
 }

components/layout/Header.module.css

@@ -41,6 +41,7 @@
   .header .buttons {
     flex: 1;
   }
+
   .links {
     order: 2;
     margin: 20px 0;
@@ -50,7 +51,7 @@
 
 @media only screen and (max-width: 768px) {
   .header {
-    padding: 0 15px;
+    padding: 0 30px;
   }
 
   .buttons,

components/layout/Layout.js

@@ -14,9 +14,7 @@ export default function Layout({ title, children, header = true, footer = true }
       </Head>
 
       {header && <Header />}
-      <main className="container" dir={dir}>
-        {children}
-      </main>
+      <main>{children}</main>
       {footer && <Footer />}
       <div id="__modals" dir={dir} />
     </>

components/metrics/WebsiteHeader.js

@@ -32,11 +32,11 @@ export default function WebsiteHeader({ websiteId, title, domain, showLink = fal
 
   return (
     <PageHeader className="row">
-      <div className={classNames(styles.title, 'col-12 col-lg-4')}>{header}</div>
-      <div className={classNames(styles.active, 'col-6 col-lg-4')}>
+      <div className={classNames(styles.title, 'col-10 col-lg-4 order-1 order-lg-1')}>{header}</div>
+      <div className={classNames(styles.active, 'col-12 col-lg-4 order-3 order-lg-2')}>
         <ActiveUsers websiteId={websiteId} />
       </div>
-      <div className="col-6 col-lg-4">
+      <div className="col-2 col-lg-4 order-2 order-lg-3">
         <ButtonLayout align="right">
           <RefreshButton websiteId={websiteId} />
           {showLink && (

components/metrics/WebsiteHeader.module.css

@@ -25,4 +25,8 @@
   .active {
     justify-content: flex-start;
   }
+
+  a.link {
+    display: none;
+  }
 }

components/settings/UserButton.js

@@ -4,7 +4,6 @@ import { useRouter } from 'next/router';
 import MenuButton from 'components/common/MenuButton';
 import Icon from 'components/common/Icon';
 import User from 'assets/user.svg';
-import Chevron from 'assets/chevron-down.svg';
 import styles from './UserButton.module.css';
 import { removeItem } from 'lib/web';
 import { AUTH_TOKEN } from 'lib/constants';
@@ -42,10 +41,10 @@ export default function UserButton() {
   return (
     <MenuButton
       icon={<Icon icon={<User />} size="large" />}
-      value={<Icon icon={<Chevron />} size="small" />}
       buttonVariant="light"
       options={menuOptions}
       onSelect={handleSelect}
+      hideLabel
     />
   );
 }