Merge pull request #33 from kawwong/design-review-font-size

Design Review - Typography Adjustment

src/devpanel/components/App.css

@@ -30,7 +30,7 @@
   }
 }
 
-@media only screen and (min-width: 540px) {
+@media only screen and (min-width: 640px) {
   .modal {
     height: auto;
   }

src/devpanel/components/CaptureCycle/CaptureCycle.css

@@ -1,24 +1,28 @@
 @media only screen {
   .capture-cycle--card {
     background-color: var(--color-white);
-    border-radius: 4px;
-    margin: 0 16px 12px;
+    border-radius: 3px;
+    -webkit-box-shadow: var(--box-shadow);
+    -moz-box-shadow: var(--box-shadow);
+    box-shadow: var(--box-shadow);
+    margin: 8px 16px;
+    overflow: auto;
+  }
+
+  .capture-cycle--header {
+    font-size: 17px;
+    font-weight: 400;
+    margin: 16px;
+    text-align: center;
   }
 
   .capture-cycle--statistic {
     font-weight: 500;
   }
-
-  .capture-cycle--timestamp {
-    font-weight: 400;
-    margin: 0;
-    padding: 8px 16px;
-    text-align: center;
-  }
 }
 
-@media only screen and (min-width: 540px) {
-  .capture-cycle--timestamp {
+@media only screen and (min-width: 640px) {
+  .capture-cycle--header {
     text-align: start;
   }
 }

src/devpanel/components/CaptureCycle/CaptureCycle.js

@@ -5,7 +5,7 @@ import './CaptureCycle.css';
 import CaptureCycleSection from '../CaptureCycleSection/CaptureCycleSection';
 
 const CaptureCycle = (props) => {
-  const captureCycleHeader = <h2 className='capture-cycle--timestamp'>
+  const captureCycleHeader = <h2 className='capture-cycle--header'>
     {props.routeUrl == null ? 'Capture Cycle' : props.routeUrl}
     {props.timestamp != null && <span> at {props.timestamp}:</span>}
   </h2>;
@@ -19,23 +19,25 @@ const CaptureCycle = (props) => {
 
   return (
     props != null && (shouldRenderInsideViewportComponents || shouldRenderOutsideViewportComponents) &&
-    <section className='capture-cycle--card'>
+    <section>
       {captureCycleHeader}
-      {shouldRenderInsideViewportComponents &&
-        <CaptureCycleSection
-          captureCycleIndex={props.captureCycleIndex}
-          components={props.insideViewportComponents}
-          heading={insideViewportHeading}
-          subheading={insideViewportSubheading}
-        />
-      }
-      {shouldRenderOutsideViewportComponents &&
-        <CaptureCycleSection
-          captureCycleIndex={props.captureCycleIndex}
-          components={props.outsideViewportComponents}
-          heading={outsideViewportHeading}
-        />
-      }
+      <div className='capture-cycle--card'>
+        {shouldRenderInsideViewportComponents &&
+          <CaptureCycleSection
+            captureCycleIndex={props.captureCycleIndex}
+            components={props.insideViewportComponents}
+            heading={insideViewportHeading}
+            subheading={insideViewportSubheading}
+          />
+        }
+        {shouldRenderOutsideViewportComponents &&
+          <CaptureCycleSection
+            captureCycleIndex={props.captureCycleIndex}
+            components={props.outsideViewportComponents}
+            heading={outsideViewportHeading}
+          />
+        }
+      </div>
     </section>
   );
 };

src/devpanel/components/CaptureCycle/__snapshots__/CaptureCycle.test.js.snap

@@ -1,128 +1,134 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`CaptureCycle.js should render when there are both insideViewportComponents and outsideViewportComponents 1`] = `
-<section
-  className="capture-cycle--card"
->
+<section>
   <h2
-    className="capture-cycle--timestamp"
+    className="capture-cycle--header"
   >
     Capture Cycle
   </h2>
-  <CaptureCycleSection
-    components={
-      Array [
-        Object {
-          "componentLoadTime": 12.2,
-          "componentName": "componentName",
-        },
-      ]
-    }
-    heading="Inside Viewport"
-    subheading={false}
-  />
-  <CaptureCycleSection
-    components={
-      Array [
-        Object {
-          "componentLoadTime": 12.2,
-          "componentName": "componentName",
-        },
-      ]
-    }
-    heading="Outside Viewport"
-  />
+  <div
+    className="capture-cycle--card"
+  >
+    <CaptureCycleSection
+      components={
+        Array [
+          Object {
+            "componentLoadTime": 12.2,
+            "componentName": "componentName",
+          },
+        ]
+      }
+      heading="Inside Viewport"
+      subheading={false}
+    />
+    <CaptureCycleSection
+      components={
+        Array [
+          Object {
+            "componentLoadTime": 12.2,
+            "componentName": "componentName",
+          },
+        ]
+      }
+      heading="Outside Viewport"
+    />
+  </div>
 </section>
 `;
 
 exports[`CaptureCycle.js should render when there are only insideViewportComponents 1`] = `
-<section
-  className="capture-cycle--card"
->
+<section>
   <h2
-    className="capture-cycle--timestamp"
+    className="capture-cycle--header"
   >
     Capture Cycle
   </h2>
-  <CaptureCycleSection
-    components={
-      Array [
-        Object {
-          "componentLoadTime": 12.2,
-          "componentName": "componentName",
-        },
-      ]
-    }
-    heading="Inside Viewport"
-    subheading={false}
-  />
+  <div
+    className="capture-cycle--card"
+  >
+    <CaptureCycleSection
+      components={
+        Array [
+          Object {
+            "componentLoadTime": 12.2,
+            "componentName": "componentName",
+          },
+        ]
+      }
+      heading="Inside Viewport"
+      subheading={false}
+    />
+  </div>
 </section>
 `;
 
 exports[`CaptureCycle.js should render when there are only outsideViewportComponents 1`] = `
-<section
-  className="capture-cycle--card"
->
+<section>
   <h2
-    className="capture-cycle--timestamp"
+    className="capture-cycle--header"
   >
     Capture Cycle
   </h2>
-  <CaptureCycleSection
-    components={
-      Array [
-        Object {
-          "componentLoadTime": 12.2,
-          "componentName": "componentName",
-        },
-      ]
-    }
-    heading="Outside Viewport"
-  />
+  <div
+    className="capture-cycle--card"
+  >
+    <CaptureCycleSection
+      components={
+        Array [
+          Object {
+            "componentLoadTime": 12.2,
+            "componentName": "componentName",
+          },
+        ]
+      }
+      heading="Outside Viewport"
+    />
+  </div>
 </section>
 `;
 
 exports[`CaptureCycle.js should render with a routeUrl 1`] = `
-<section
-  className="capture-cycle--card"
->
+<section>
   <h2
-    className="capture-cycle--timestamp"
+    className="capture-cycle--header"
   >
     routeUrl
   </h2>
-  <CaptureCycleSection
-    components={
-      Array [
-        Object {
-          "componentLoadTime": 12.2,
-          "componentName": "componentName",
-        },
-      ]
-    }
-    heading="Inside Viewport"
-    subheading={false}
-  />
-  <CaptureCycleSection
-    components={
-      Array [
-        Object {
-          "componentLoadTime": 12.2,
-          "componentName": "componentName",
-        },
-      ]
-    }
-    heading="Outside Viewport"
-  />
+  <div
+    className="capture-cycle--card"
+  >
+    <CaptureCycleSection
+      components={
+        Array [
+          Object {
+            "componentLoadTime": 12.2,
+            "componentName": "componentName",
+          },
+        ]
+      }
+      heading="Inside Viewport"
+      subheading={false}
+    />
+    <CaptureCycleSection
+      components={
+        Array [
+          Object {
+            "componentLoadTime": 12.2,
+            "componentName": "componentName",
+          },
+        ]
+      }
+      heading="Outside Viewport"
+    />
+  </div>
 </section>
 `;
 
 exports[`CaptureCycle.js should render with a timestamp 1`] = `
-<section
-  className="capture-cycle--card"
->
+<section>
   <h2
-    className="capture-cycle--timestamp"
+    className="capture-cycle--header"
   >
     Capture Cycle
     <span>
@@ -131,83 +137,87 @@ exports[`CaptureCycle.js should render with a timestamp 1`] = `
       :
     </span>
   </h2>
-  <CaptureCycleSection
-    components={
-      Array [
-        Object {
-          "componentLoadTime": 12.2,
-          "componentName": "componentName",
-        },
-      ]
-    }
-    heading="Inside Viewport"
-    subheading={false}
-  />
-  <CaptureCycleSection
-    components={
-      Array [
-        Object {
-          "componentLoadTime": 12.2,
-          "componentName": "componentName",
-        },
-      ]
-    }
-    heading="Outside Viewport"
-  />
+  <div
+    className="capture-cycle--card"
+  >
+    <CaptureCycleSection
+      components={
+        Array [
+          Object {
+            "componentLoadTime": 12.2,
+            "componentName": "componentName",
+          },
+        ]
+      }
+      heading="Inside Viewport"
+      subheading={false}
+    />
+    <CaptureCycleSection
+      components={
+        Array [
+          Object {
+            "componentLoadTime": 12.2,
+            "componentName": "componentName",
+          },
+        ]
+      }
+      heading="Outside Viewport"
+    />
+  </div>
 </section>
 `;
 
 exports[`CaptureCycle.js should render with a viewportLoadTime 1`] = `
-<section
-  className="capture-cycle--card"
->
+<section>
   <h2
-    className="capture-cycle--timestamp"
+    className="capture-cycle--header"
   >
     Capture Cycle
   </h2>
-  <CaptureCycleSection
-    components={
-      Array [
-        Object {
-          "componentLoadTime": 12.2,
-          "componentName": "componentName",
-        },
-      ]
-    }
-    heading="Inside Viewport"
-    subheading={
-      <React.Fragment>
-        Viewport Load Time: 
-        <span
-          className="capture-cycle--statistic"
-        >
-          15.4
-        </span>
-        ms
-      </React.Fragment>
-    }
-  />
-  <CaptureCycleSection
-    components={
-      Array [
-        Object {
-          "componentLoadTime": 12.2,
-          "componentName": "componentName",
-        },
-      ]
-    }
-    heading="Outside Viewport"
-  />
+  <div
+    className="capture-cycle--card"
+  >
+    <CaptureCycleSection
+      components={
+        Array [
+          Object {
+            "componentLoadTime": 12.2,
+            "componentName": "componentName",
+          },
+        ]
+      }
+      heading="Inside Viewport"
+      subheading={
+        <React.Fragment>
+          Viewport Load Time: 
+          <span
+            className="capture-cycle--statistic"
+          >
+            15.4
+          </span>
+          ms
+        </React.Fragment>
+      }
+    />
+    <CaptureCycleSection
+      components={
+        Array [
+          Object {
+            "componentLoadTime": 12.2,
+            "componentName": "componentName",
+          },
+        ]
+      }
+      heading="Outside Viewport"
+    />
+  </div>
 </section>
 `;
 
 exports[`CaptureCycle.js should render with both a routeUrl and timestamp 1`] = `
-<section
-  className="capture-cycle--card"
->
+<section>
   <h2
-    className="capture-cycle--timestamp"
+    className="capture-cycle--header"
   >
     routeUrl
     <span>
@@ -216,28 +226,32 @@ exports[`CaptureCycle.js should render with both a routeUrl and timestamp 1`] =
       :
     </span>
   </h2>
-  <CaptureCycleSection
-    components={
-      Array [
-        Object {
-          "componentLoadTime": 12.2,
-          "componentName": "componentName",
-        },
-      ]
-    }
-    heading="Inside Viewport"
-    subheading={false}
-  />
-  <CaptureCycleSection
-    components={
-      Array [
-        Object {
-          "componentLoadTime": 12.2,
-          "componentName": "componentName",
-        },
-      ]
-    }
-    heading="Outside Viewport"
-  />
+  <div
+    className="capture-cycle--card"
+  >
+    <CaptureCycleSection
+      components={
+        Array [
+          Object {
+            "componentLoadTime": 12.2,
+            "componentName": "componentName",
+          },
+        ]
+      }
+      heading="Inside Viewport"
+      subheading={false}
+    />
+    <CaptureCycleSection
+      components={
+        Array [
+          Object {
+            "componentLoadTime": 12.2,
+            "componentName": "componentName",
+          },
+        ]
+      }
+      heading="Outside Viewport"
+    />
+  </div>
 </section>
 `;

src/devpanel/components/CaptureCycleSection/CaptureCycleSection.css

@@ -8,9 +8,9 @@
   }
 
   .capture-cycle--section-header {
-    font-size: 20px;
-    font-weight: 500;
-    margin: 12px 16px 0;
+    font-size: 17px;
+    font-weight: 600;
+    margin: 16px;
     text-align: center;
   }
 
@@ -22,7 +22,7 @@
   }
 }
 
-@media only screen and (min-width: 540px) {
+@media only screen and (min-width: 640px) {
   .capture-cycle--section-header,
   .capture-cycle--section-sub-header {
     text-align: left;

src/devpanel/components/ComponentTiming/ComponentTiming.css

@@ -13,24 +13,28 @@
 
   .component-timing--detail {
     display: flex;
-    margin: 12px;
+    font-size: 15px;
+    font-weight: 500;
+    margin: 16px;
+  }
+
+  .component-timing--label {
+    margin-right: 4px;
   }
 
   .component-timing--name {
-    font-size: 14px;
+    font-size: 15px;
     font-weight: 500;
     line-height: 18px;
-    margin: 12px;
+    margin: 16px;
     overflow: hidden;
+    text-align: left;
     text-overflow: ellipsis;
-  }
-
-  .component-timing--statistic {
-    font-weight: 700;
+    width: 50%;
   }
 }
 
-@media only screen and (min-width: 540px) {
+@media only screen and (min-width: 640px) {
   .component-timing--card {
     margin-bottom: 8px;
     margin-right: 2px;

src/devpanel/components/ComponentTiming/ComponentTiming.js

@@ -7,11 +7,7 @@ const ComponentTiming = (props) => (
   props != null && (props.name != null || props.loadTime != null) && <li className='component-timing--card'>
     {props.name != null && <h4 className='component-timing--name'>{props.name}</h4>}
     {props.loadTime != null &&
-      <p className='component-timing--detail'>
-        <span className='mobile-hidden'>Load time:</span>
-        <span className='component-timing--statistic'>{props.loadTime.toFixed(1)}</span>
-        ms
-      </p>}
+      <p className='component-timing--detail'><span className='mobile-hidden component-timing--label'>Load time:</span>{props.loadTime.toFixed(1)} ms</p>}
   </li>
 );
 

src/devpanel/components/ComponentTiming/__snapshots__/ComponentTiming.test.js.snap

@@ -13,16 +13,12 @@ exports[`ComponentTiming.js should render the componentTiming 1`] = `
     className="component-timing--detail"
   >
     <span
-      className="mobile-hidden"
+      className="mobile-hidden component-timing--label"
     >
       Load time:
     </span>
-    <span
-      className="component-timing--statistic"
-    >
-      14.2
-    </span>
-    ms
+    14.2
+     ms
   </p>
 </li>
 `;
@@ -35,16 +31,12 @@ exports[`ComponentTiming.js should render the componentTiming with only a loadTi
     className="component-timing--detail"
   >
     <span
-      className="mobile-hidden"
+      className="mobile-hidden component-timing--label"
     >
       Load time:
     </span>
-    <span
-      className="component-timing--statistic"
-    >
-      14.2
-    </span>
-    ms
+    14.2
+     ms
   </p>
 </li>
 `;

src/devpanel/components/Footer/Footer.css

@@ -7,10 +7,6 @@
     flex-direction: column;
   }
 
-  .github-information {
-    padding: 8px 0 4px;
-  }
-
   .github-information--link,
   .github-information--package {
     align-items: center;
@@ -31,6 +27,12 @@
     text-decoration: underline;
   }
 
+  .github-mark {
+    height: 28px;
+    margin: 8px 8px 8px 16px;
+    width: 28px;
+  }
+
   .package-information {
     display: block;
     margin-right: 8px;
@@ -69,7 +71,7 @@
   }
 }
 
-@media only screen and (min-width: 540px) {
+@media only screen and (min-width: 640px) {
   .footer--content {
     flex-direction: row;
     justify-content: space-between;

src/devpanel/components/Footer/Footer.js

@@ -7,7 +7,7 @@ import GithubMark from './GithubMark';
 const Footer = (props) => (
   <footer role='contentinfo'>
     <ul className='footer--content'>
-      <li className='github-information'>
+      <li>
         <a
           aria-label='Visit Mezzurite Dev Tools on GitHub'
           className='github-information--link'
@@ -15,7 +15,7 @@ const Footer = (props) => (
           target='_blank'
         >
           <GithubMark />
-          <span className='github-information--text'>Visit us on GitHub!<span className='tablet-hidden'> - The Mezzurite Development Team</span></span>
+          <span className='github-information--text'>Visit us on GitHub<span className='tablet-hidden'> - The Mezzurite Development Team</span></span>
         </a>
       </li>
       <li className='package-information'>

src/devpanel/components/Footer/GithubMark.js

@@ -2,7 +2,7 @@ import React from 'react';
 
 const GithubMark = props => (
   <svg
-    className='prefix__octicon prefix__octicon-mark-github'
+    className='prefix__octicon prefix__octicon-mark-github github-mark'
     viewBox='0 0 16 16'
     aria-hidden='true'
     {...props}

src/devpanel/components/Footer/__snapshots__/Footer.test.js.snap

@@ -7,9 +7,7 @@ exports[`Footer.js should render the footer 1`] = `
   <ul
     className="footer--content"
   >
-    <li
-      className="github-information"
-    >
+    <li>
       <a
         aria-label="Visit Mezzurite Dev Tools on GitHub"
         className="github-information--link"
@@ -20,7 +18,7 @@ exports[`Footer.js should render the footer 1`] = `
         <span
           className="github-information--text"
         >
-          Visit us on GitHub!
+          Visit us on GitHub
           <span
             className="tablet-hidden"
           >
@@ -85,9 +83,7 @@ exports[`Footer.js should render the footer with only a packageName 1`] = `
   <ul
     className="footer--content"
   >
-    <li
-      className="github-information"
-    >
+    <li>
       <a
         aria-label="Visit Mezzurite Dev Tools on GitHub"
         className="github-information--link"
@@ -98,7 +94,7 @@ exports[`Footer.js should render the footer with only a packageName 1`] = `
         <span
           className="github-information--text"
         >
-          Visit us on GitHub!
+          Visit us on GitHub
           <span
             className="tablet-hidden"
           >
@@ -148,9 +144,7 @@ exports[`Footer.js should render the footer with only a packageVersion 1`] = `
   <ul
     className="footer--content"
   >
-    <li
-      className="github-information"
-    >
+    <li>
       <a
         aria-label="Visit Mezzurite Dev Tools on GitHub"
         className="github-information--link"
@@ -161,7 +155,7 @@ exports[`Footer.js should render the footer with only a packageVersion 1`] = `
         <span
           className="github-information--text"
         >
-          Visit us on GitHub!
+          Visit us on GitHub
           <span
             className="tablet-hidden"
           >
@@ -204,9 +198,7 @@ exports[`Footer.js should render the footer without a packageName or packageVers
   <ul
     className="footer--content"
   >
-    <li
-      className="github-information"
-    >
+    <li>
       <a
         aria-label="Visit Mezzurite Dev Tools on GitHub"
         className="github-information--link"
@@ -217,7 +209,7 @@ exports[`Footer.js should render the footer without a packageName or packageVers
         <span
           className="github-information--text"
         >
-          Visit us on GitHub!
+          Visit us on GitHub
           <span
             className="tablet-hidden"
           >

src/devpanel/components/Footer/__snapshots__/GithubMark.test.js.snap

@@ -3,7 +3,7 @@
 exports[`GithubMark.js should render the Github logo 1`] = `
 <svg
   aria-hidden="true"
-  className="prefix__octicon prefix__octicon-mark-github"
+  className="prefix__octicon prefix__octicon-mark-github github-mark"
   viewBox="0 0 16 16"
 >
   <path

src/devpanel/components/Header/Header.css

@@ -8,13 +8,14 @@
   }
 
   .header--text {
-    font-size: 16px;
+    font-size: 17px;
+    font-weight: 500;
     margin: 0;
     padding: 0;
   }
 }
 
-@media only screen and (min-width: 540px) {
+@media only screen and (min-width: 640px) {
   .header {
     justify-content: start;
   }

src/devpanel/components/Header/Logo.css

@@ -11,7 +11,7 @@
   }
 }
 
-@media only screen and (min-width: 540px) {
+@media only screen and (min-width: 640px) {
   .logo {
     padding: 4px;
   }

src/devpanel/components/HelpDialog/HelpDialog.css

@@ -56,7 +56,7 @@
   }
 }
 
-@media only screen and (min-width: 540px) {
+@media only screen and (min-width: 640px) {
   .help-dialog--action {
     flex-direction: row;
     margin: 16px 0 8px;

src/devpanel/components/Main/Main.css

@@ -5,7 +5,9 @@
   }
 
   .main--header {
-    margin: 16px;
+    font-size: 17px;
+    font-weight: 400;
+    margin: 8px 16px;
     text-align: center;
   }
 
@@ -19,13 +21,6 @@
     margin: 0;
   }
 
-  .main--header-section {
-    align-items: center;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-  }
-
   .main--header-text {
     max-width: 80%;
     margin: 0;
@@ -33,7 +28,7 @@
   }
 }
 
-@media only screen and (min-width: 540px) {
+@media only screen and (min-width: 640px) {
   .main--header {
     text-align: start;
   }

src/devpanel/components/Main/Main.js

@@ -46,15 +46,9 @@ const renderHeader = (applicationLoadTime, loading, onHelpClick) => {
       </h2>;
     }
   } else {
-    return <div className='main--header-section'>
-      <h2 className='main--header'>
-        App<span className='mobile-hidden'>lication</span> Load Time: {applicationLoadTime.toFixed(1)}ms
-      </h2>
-      <button
-        className='main--header-help'
-        onClick={onHelpClick}
-      >Help</button>
-    </div>;
+    return <h2 className='main--header'>
+      App<span className='mobile-hidden'>lication</span> Load Time: {applicationLoadTime.toFixed(1)}ms
+    </h2>;
   }
 };
 

src/devpanel/components/Main/MainLoading.css

@@ -33,7 +33,7 @@
   }
 }
 
-@media only screen and (min-width: 540px) {
+@media only screen and (min-width: 640px) {
   .capture-cycle--skeleton-title {
     margin: 16px 16px 36px;
     max-width: 30%;

src/devpanel/components/Main/__snapshots__/Main.test.js.snap

@@ -28,28 +28,19 @@ exports[`Main.js should not error out when captureCycles contains a null element
 <main
   className="main"
 >
-  <div
-    className="main--header-section"
+  <h2
+    className="main--header"
   >
-    <h2
-      className="main--header"
+    App
+    <span
+      className="mobile-hidden"
     >
-      App
-      <span
-        className="mobile-hidden"
-      >
-        lication
-      </span>
-       Load Time: 
-      5.4
-      ms
-    </h2>
-    <button
-      className="main--header-help"
-    >
-      Help
-    </button>
-  </div>
+      lication
+    </span>
+     Load Time: 
+    5.4
+    ms
+  </h2>
 </main>
 `;
 
@@ -57,28 +48,19 @@ exports[`Main.js should render when captureCycles is an empty array 1`] = `
 <main
   className="main"
 >
-  <div
-    className="main--header-section"
+  <h2
+    className="main--header"
   >
-    <h2
-      className="main--header"
+    App
+    <span
+      className="mobile-hidden"
     >
-      App
-      <span
-        className="mobile-hidden"
-      >
-        lication
-      </span>
-       Load Time: 
-      5.4
-      ms
-    </h2>
-    <button
-      className="main--header-help"
-    >
-      Help
-    </button>
-  </div>
+      lication
+    </span>
+     Load Time: 
+    5.4
+    ms
+  </h2>
   <h3>
     No active capture cycles have completed.
   </h3>
@@ -138,28 +120,19 @@ exports[`Main.js should render without captureCycles and loading as false 1`] =
 <main
   className="main"
 >
-  <div
-    className="main--header-section"
+  <h2
+    className="main--header"
   >
-    <h2
-      className="main--header"
+    App
+    <span
+      className="mobile-hidden"
     >
-      App
-      <span
-        className="mobile-hidden"
-      >
-        lication
-      </span>
-       Load Time: 
-      5.4
-      ms
-    </h2>
-    <button
-      className="main--header-help"
-    >
-      Help
-    </button>
-  </div>
+      lication
+    </span>
+     Load Time: 
+    5.4
+    ms
+  </h2>
 </main>
 `;
 
@@ -167,28 +140,19 @@ exports[`Main.js should render without captureCycles and loading as true 1`] = `
 <main
   className="main"
 >
-  <div
-    className="main--header-section"
+  <h2
+    className="main--header"
   >
-    <h2
-      className="main--header"
+    App
+    <span
+      className="mobile-hidden"
     >
-      App
-      <span
-        className="mobile-hidden"
-      >
-        lication
-      </span>
-       Load Time: 
-      5.4
-      ms
-    </h2>
-    <button
-      className="main--header-help"
-    >
-      Help
-    </button>
-  </div>
+      lication
+    </span>
+     Load Time: 
+    5.4
+    ms
+  </h2>
   <MainLoading />
 </main>
 `;

src/devpanel/index.css

@@ -10,7 +10,6 @@
   --color-yellow: #f9bb10;
 
   background-color: var(--color-gray-lighter);
-  font-family: "Segoe UI", "SegoeUI", "Helvetica Neue", Helvetica, Arial, sans-serif;
   height: 100%;
 }
 
@@ -20,7 +19,7 @@
   }
 }
 
-@media only screen and (max-width: 768px) {
+@media only screen and (max-width: 1024px) {
   .tablet-hidden {
     display: none;
   }