Merge pull request #19 from kawwong/comparison-timing

Adjust timing styling to be aligned left

src/devpanel/components/ComponentTiming/ComponentTiming.css

@@ -1,19 +1,41 @@
 @media only screen {
   .component-timing--card {
-    background-color: var(--microsoft-blue);
+    align-items: center;
+    background-color: var(--microsoft-blue-lighter);
     border-radius: 4px;
-    color: var(--microsoft-white);
+    display: flex;
+    justify-content: space-between;
     margin-bottom: 8px;
-    padding: 0 8px;
     text-align: center;
     width: 100%;
   }
+
+  .component-timing--detail {
+    display: flex;
+    margin: 0 8px;
+  }
+
+  .component-timing--name {
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 18px;
+    margin-left: 8px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .component-timing--statistic {
+    font-weight: 700;
+  }
 }
 
 @media only screen and (min-width: 540px) {
   .component-timing--card {
-    margin-bottom: 16px;
+    margin-bottom: 8px;
     margin-right: 2px;
-    max-width: 200px;
+  }
+
+  .component-timing--statistic {
+    margin-left: 4px;
   }
 }

src/devpanel/components/ComponentTiming/ComponentTiming.js

@@ -5,8 +5,13 @@ import './ComponentTiming.css';
 
 const ComponentTiming = (props) => (
   props != null && (props.name != null || props.loadTime != null) && <li className='component-timing--card'>
-    {props.name != null && <h3>{props.name}</h3>}
-    {props.loadTime != null && <p>Time to load: {props.loadTime} ms</p>}
+    {props.name != null && <h3 className='component-timing--name'>{props.name}</h3>}
+    {props.loadTime != null &&
+      <p className='component-timing--detail'>
+        <span className='mobile-hidden'>Load time:</span>
+        <span className='component-timing--statistic'>{props.loadTime}</span>
+        ms
+      </p>}
   </li>
 );
 

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

@@ -4,13 +4,25 @@ exports[`ComponentTiming.js should render the componentTiming 1`] = `
 <li
   className="component-timing--card"
 >
-  <h3>
+  <h3
+    className="component-timing--name"
+  >
     ComponentName
   </h3>
-  <p>
-    Time to load: 
-    14.2
-     ms
+  <p
+    className="component-timing--detail"
+  >
+    <span
+      className="mobile-hidden"
+    >
+      Load time:
+    </span>
+    <span
+      className="component-timing--statistic"
+    >
+      14.2
+    </span>
+    ms
   </p>
 </li>
 `;
@@ -19,10 +31,20 @@ exports[`ComponentTiming.js should render the componentTiming with only a loadTi
 <li
   className="component-timing--card"
 >
-  <p>
-    Time to load: 
-    14.2
-     ms
+  <p
+    className="component-timing--detail"
+  >
+    <span
+      className="mobile-hidden"
+    >
+      Load time:
+    </span>
+    <span
+      className="component-timing--statistic"
+    >
+      14.2
+    </span>
+    ms
   </p>
 </li>
 `;
@@ -31,7 +53,9 @@ exports[`ComponentTiming.js should render the componentTiming with only a name 1
 <li
   className="component-timing--card"
 >
-  <h3>
+  <h3
+    className="component-timing--name"
+  >
     ComponentName
   </h3>
 </li>

src/devpanel/index.css

@@ -6,6 +6,7 @@
   --microsoft-gray-lightest: #e6e6e6;
   --microsoft-white: #fff;
   --microsoft-blue: #0078d7;
+  --microsoft-blue-lighter: #99d1ff;
   --microsoft-orange: #d83b01;
 
   background-color: var(--microsoft-gray-lightest);