From 0cfddf51b0329b78f3ae857493d95d59ad967cca Mon Sep 17 00:00:00 2001
From: Ka-wai Wong <Kawai.Wong@Microsoft.com>
Date: Wed, 6 Feb 2019 09:57:10 -0800
Subject: [PATCH 1/3] Address font size, font weight, and margin issues from
 design review

---
 src/devpanel/components/App.css               |   2 +-
 .../components/CaptureCycle/CaptureCycle.css  |  26 +-
 .../components/CaptureCycle/CaptureCycle.js   |  36 +-
 .../__snapshots__/CaptureCycle.test.js.snap   | 366 +++++++++---------
 .../CaptureCycleSection.css                   |   8 +-
 .../ComponentTiming/ComponentTiming.css       |  14 +-
 .../ComponentTiming/ComponentTiming.js        |   6 +-
 .../ComponentTiming.test.js.snap              |  18 +-
 src/devpanel/components/Footer/Footer.css     |  12 +-
 src/devpanel/components/Footer/Footer.js      |   4 +-
 src/devpanel/components/Footer/GithubMark.js  |   2 +-
 .../Footer/__snapshots__/Footer.test.js.snap  |  24 +-
 .../__snapshots__/GithubMark.test.js.snap     |   2 +-
 src/devpanel/components/Header/Header.css     |   5 +-
 src/devpanel/components/Header/Logo.css       |   2 +-
 .../components/HelpDialog/HelpDialog.css      |   2 +-
 src/devpanel/components/Main/Main.css         |  13 +-
 src/devpanel/components/Main/Main.js          |  12 +-
 src/devpanel/components/Main/MainLoading.css  |   2 +-
 .../Main/__snapshots__/Main.test.js.snap      | 124 +++---
 src/devpanel/index.css                        |   3 +-
 21 files changed, 319 insertions(+), 364 deletions(-)

diff --git a/src/devpanel/components/App.css b/src/devpanel/components/App.css
index 8d50c16..084db27 100644
--- a/src/devpanel/components/App.css
+++ b/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;
   }
diff --git a/src/devpanel/components/CaptureCycle/CaptureCycle.css b/src/devpanel/components/CaptureCycle/CaptureCycle.css
index c3e3b3f..eb3b11d 100644
--- a/src/devpanel/components/CaptureCycle/CaptureCycle.css
+++ b/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;
   }
 }
diff --git a/src/devpanel/components/CaptureCycle/CaptureCycle.js b/src/devpanel/components/CaptureCycle/CaptureCycle.js
index f59e0b1..b5cb835 100644
--- a/src/devpanel/components/CaptureCycle/CaptureCycle.js
+++ b/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>
   );
 };
diff --git a/src/devpanel/components/CaptureCycle/__snapshots__/CaptureCycle.test.js.snap b/src/devpanel/components/CaptureCycle/__snapshots__/CaptureCycle.test.js.snap
index 1babe28..a193d20 100644
--- a/src/devpanel/components/CaptureCycle/__snapshots__/CaptureCycle.test.js.snap
+++ b/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>
 `;
diff --git a/src/devpanel/components/CaptureCycleSection/CaptureCycleSection.css b/src/devpanel/components/CaptureCycleSection/CaptureCycleSection.css
index d8774ef..2d6826a 100644
--- a/src/devpanel/components/CaptureCycleSection/CaptureCycleSection.css
+++ b/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;
diff --git a/src/devpanel/components/ComponentTiming/ComponentTiming.css b/src/devpanel/components/ComponentTiming/ComponentTiming.css
index c2da4ef..53f594c 100644
--- a/src/devpanel/components/ComponentTiming/ComponentTiming.css
+++ b/src/devpanel/components/ComponentTiming/ComponentTiming.css
@@ -13,24 +13,22 @@
 
   .component-timing--detail {
     display: flex;
-    margin: 12px;
+    font-size: 15px;
+    font-weight: 500;
+    margin: 16px;
   }
 
   .component-timing--name {
-    font-size: 14px;
+    font-size: 15px;
     font-weight: 500;
     line-height: 18px;
-    margin: 12px;
+    margin: 16px;
     overflow: hidden;
     text-overflow: ellipsis;
   }
-
-  .component-timing--statistic {
-    font-weight: 700;
-  }
 }
 
-@media only screen and (min-width: 540px) {
+@media only screen and (min-width: 640px) {
   .component-timing--card {
     margin-bottom: 8px;
     margin-right: 2px;
diff --git a/src/devpanel/components/ComponentTiming/ComponentTiming.js b/src/devpanel/components/ComponentTiming/ComponentTiming.js
index bf8d87f..d9390a5 100644
--- a/src/devpanel/components/ComponentTiming/ComponentTiming.js
+++ b/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'>Load time:</span> {props.loadTime.toFixed(1)} ms</p>}
   </li>
 );
 
diff --git a/src/devpanel/components/ComponentTiming/__snapshots__/ComponentTiming.test.js.snap b/src/devpanel/components/ComponentTiming/__snapshots__/ComponentTiming.test.js.snap
index 4c50b90..3a78973 100644
--- a/src/devpanel/components/ComponentTiming/__snapshots__/ComponentTiming.test.js.snap
+++ b/src/devpanel/components/ComponentTiming/__snapshots__/ComponentTiming.test.js.snap
@@ -17,12 +17,9 @@ exports[`ComponentTiming.js should render the componentTiming 1`] = `
     >
       Load time:
     </span>
-    <span
-      className="component-timing--statistic"
-    >
-      14.2
-    </span>
-    ms
+     
+    14.2
+     ms
   </p>
 </li>
 `;
@@ -39,12 +36,9 @@ exports[`ComponentTiming.js should render the componentTiming with only a loadTi
     >
       Load time:
     </span>
-    <span
-      className="component-timing--statistic"
-    >
-      14.2
-    </span>
-    ms
+     
+    14.2
+     ms
   </p>
 </li>
 `;
diff --git a/src/devpanel/components/Footer/Footer.css b/src/devpanel/components/Footer/Footer.css
index 0a4ba83..f346b06 100644
--- a/src/devpanel/components/Footer/Footer.css
+++ b/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;
diff --git a/src/devpanel/components/Footer/Footer.js b/src/devpanel/components/Footer/Footer.js
index 0ae6774..c6236bd 100644
--- a/src/devpanel/components/Footer/Footer.js
+++ b/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'>
diff --git a/src/devpanel/components/Footer/GithubMark.js b/src/devpanel/components/Footer/GithubMark.js
index 9280def..46ccaea 100644
--- a/src/devpanel/components/Footer/GithubMark.js
+++ b/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}
diff --git a/src/devpanel/components/Footer/__snapshots__/Footer.test.js.snap b/src/devpanel/components/Footer/__snapshots__/Footer.test.js.snap
index 6f03ace..73994d7 100644
--- a/src/devpanel/components/Footer/__snapshots__/Footer.test.js.snap
+++ b/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"
           >
diff --git a/src/devpanel/components/Footer/__snapshots__/GithubMark.test.js.snap b/src/devpanel/components/Footer/__snapshots__/GithubMark.test.js.snap
index 7e6d45c..ef22b0e 100644
--- a/src/devpanel/components/Footer/__snapshots__/GithubMark.test.js.snap
+++ b/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
diff --git a/src/devpanel/components/Header/Header.css b/src/devpanel/components/Header/Header.css
index 81ae7dc..c616196 100644
--- a/src/devpanel/components/Header/Header.css
+++ b/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;
   }
diff --git a/src/devpanel/components/Header/Logo.css b/src/devpanel/components/Header/Logo.css
index bc058e0..a8ca194 100644
--- a/src/devpanel/components/Header/Logo.css
+++ b/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;
   }
diff --git a/src/devpanel/components/HelpDialog/HelpDialog.css b/src/devpanel/components/HelpDialog/HelpDialog.css
index 3a17cbe..13a014b 100644
--- a/src/devpanel/components/HelpDialog/HelpDialog.css
+++ b/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;
diff --git a/src/devpanel/components/Main/Main.css b/src/devpanel/components/Main/Main.css
index 8e5c3b8..57107da 100644
--- a/src/devpanel/components/Main/Main.css
+++ b/src/devpanel/components/Main/Main.css
@@ -5,7 +5,9 @@
   }
 
   .main--header {
-    margin: 16px;
+    font-size: 16px;
+    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;
   }
diff --git a/src/devpanel/components/Main/Main.js b/src/devpanel/components/Main/Main.js
index 7c103af..34c0e39 100644
--- a/src/devpanel/components/Main/Main.js
+++ b/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>;
   }
 };
 
diff --git a/src/devpanel/components/Main/MainLoading.css b/src/devpanel/components/Main/MainLoading.css
index a9960ff..f9ce395 100644
--- a/src/devpanel/components/Main/MainLoading.css
+++ b/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%;
diff --git a/src/devpanel/components/Main/__snapshots__/Main.test.js.snap b/src/devpanel/components/Main/__snapshots__/Main.test.js.snap
index 7420d23..2e0efeb 100644
--- a/src/devpanel/components/Main/__snapshots__/Main.test.js.snap
+++ b/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>
 `;
diff --git a/src/devpanel/index.css b/src/devpanel/index.css
index ffa7a4d..ba7be07 100644
--- a/src/devpanel/index.css
+++ b/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;
   }

From afc6e9f14291108c94e86eecd935e23ff526cbcd Mon Sep 17 00:00:00 2001
From: Ka-wai Wong <Kawai.Wong@Microsoft.com>
Date: Wed, 6 Feb 2019 11:53:15 -0800
Subject: [PATCH 2/3] Fix component timing label spacing

---
 src/devpanel/components/ComponentTiming/ComponentTiming.css | 6 ++++++
 src/devpanel/components/ComponentTiming/ComponentTiming.js  | 2 +-
 .../__snapshots__/ComponentTiming.test.js.snap              | 6 ++----
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/devpanel/components/ComponentTiming/ComponentTiming.css b/src/devpanel/components/ComponentTiming/ComponentTiming.css
index 53f594c..ac8fc1d 100644
--- a/src/devpanel/components/ComponentTiming/ComponentTiming.css
+++ b/src/devpanel/components/ComponentTiming/ComponentTiming.css
@@ -18,13 +18,19 @@
     margin: 16px;
   }
 
+  .component-timing--label {
+    margin-right: 4px;
+  }
+
   .component-timing--name {
     font-size: 15px;
     font-weight: 500;
     line-height: 18px;
     margin: 16px;
     overflow: hidden;
+    text-align: left;
     text-overflow: ellipsis;
+    width: 50%;
   }
 }
 
diff --git a/src/devpanel/components/ComponentTiming/ComponentTiming.js b/src/devpanel/components/ComponentTiming/ComponentTiming.js
index d9390a5..c533272 100644
--- a/src/devpanel/components/ComponentTiming/ComponentTiming.js
+++ b/src/devpanel/components/ComponentTiming/ComponentTiming.js
@@ -7,7 +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> {props.loadTime.toFixed(1)} ms</p>}
+      <p className='component-timing--detail'><span className='mobile-hidden component-timing--label'>Load time:</span>{props.loadTime.toFixed(1)} ms</p>}
   </li>
 );
 
diff --git a/src/devpanel/components/ComponentTiming/__snapshots__/ComponentTiming.test.js.snap b/src/devpanel/components/ComponentTiming/__snapshots__/ComponentTiming.test.js.snap
index 3a78973..b624524 100644
--- a/src/devpanel/components/ComponentTiming/__snapshots__/ComponentTiming.test.js.snap
+++ b/src/devpanel/components/ComponentTiming/__snapshots__/ComponentTiming.test.js.snap
@@ -13,11 +13,10 @@ 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>
-     
     14.2
      ms
   </p>
@@ -32,11 +31,10 @@ 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>
-     
     14.2
      ms
   </p>

From ee90e509bfec4a906b6b12f14589d428e64e4161 Mon Sep 17 00:00:00 2001
From: Ka-wai Wong <Kawai.Wong@Microsoft.com>
Date: Wed, 6 Feb 2019 11:56:25 -0800
Subject: [PATCH 3/3] Fix main header font size

---
 src/devpanel/components/Main/Main.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/devpanel/components/Main/Main.css b/src/devpanel/components/Main/Main.css
index 57107da..0a767f2 100644
--- a/src/devpanel/components/Main/Main.css
+++ b/src/devpanel/components/Main/Main.css
@@ -5,7 +5,7 @@
   }
 
   .main--header {
-    font-size: 16px;
+    font-size: 17px;
     font-weight: 400;
     margin: 8px 16px;
     text-align: center;