Merge pull request #37 from kawwong/help-dialog

Design Review - Help Dialog Styling

src/devpanel/components/App.css

@@ -13,6 +13,7 @@
     flex-direction: column;
     height: 100%;
     justify-content: center;
+    position: relative;
     width: 100%;
   }
 
@@ -39,6 +40,5 @@
 @media only screen and (min-width: 1084px) {
   .modal {
     max-width: 1024px;
-    width: 80%;
   }
 }

src/devpanel/components/HelpDialog/HelpDialog.css

@@ -7,15 +7,23 @@
     width: 100%;
   }
 
+  .help-dialog--cancel {
+    background: none;
+    border: none;
+    font-size: 20px;
+    margin: 8px;
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+
   .help-dialog--close {
     background-color: var(--color-blue);
     border: none;
-    border-radius: 4px;
+    border-radius: 2px;
     color: var(--color-white);
     font-size: 14px;
-    font-weight: 600;
+    padding: 12px 36px;
-    padding: 10px 0;
-    width: 100%;
   }
 
   .help-dialog--close:active,
@@ -29,6 +37,7 @@
     align-content: center;
     display: flex;
     justify-content: center;
+    min-width: 320px;
     padding: 16px;
     width: 100%;
   }
@@ -38,35 +47,32 @@
     display: flex;
     flex-direction: column;
     justify-content: center;
-    width: calc(100% - 16px);
+    margin: 0 28px;
+    width: 100%;
   }
 
   .help-dialog--heading {
+    font-weight: 600;
     text-align: center;
   }
 
-  .help-dialog--vocab-item {
+  .help-dialog--item {
     line-height: 18px;
     margin-bottom: 20px;
     font-size: 14px;
   }
 
+  .help-dialog--learn-more {
+    color: var(--color-blue);
+  }
+
   .help-dialog--vocab-title {
-    font-weight: 500;
+    font-weight: 600;
   }
 }
 
 @media only screen and (min-width: 640px) {
   .help-dialog--action {
-    flex-direction: row;
+    align-items: flex-end;
-    margin: 16px 0 8px;
-  }
-
-  .help-dialog--content {
-    max-width: 800px;
-  }
-
-  .help-dialog--learn-more {
-    margin: 0 8px 0 0;
   }
 }

src/devpanel/components/HelpDialog/HelpDialog.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import { func } from 'prop-types';
 
 import './HelpDialog.css';
@@ -8,42 +8,49 @@ const componentLoadTimeDescription = ` is the amount of time it takes to load a
 const viewportLoadTimeDescription = `  is the amount of time it takes to load the components visible in the current viewport.`;
 
 const HelpDialog = (props) => (
-  <div className='help-dialog--container'>
+  <Fragment>
-    <div className='help-dialog--content'>
+    <button className='help-dialog--cancel' onClick={props.onCloseClick}>
-      <h2 className='help-dialog--heading'>Understanding Mezzurite Metrics</h2>
+      <i className='ms-Icon ms-Icon--Cancel' title='Close' aria-label='Close' />
-      <ul className='help-dialog--vocab'>
+    </button>
-        <li className='help-dialog--vocab-item'>
+    <div className='help-dialog--container'>
-          <span className='help-dialog--vocab-title'>Application Load Time (ALT)</span>
+      <div className='help-dialog--content'>
-          {applicationLoadTimeDescription}
+        <h2 className='help-dialog--heading'>Understanding Mezzurite Metrics</h2>
-        </li>
+        <ul className='help-dialog--vocab'>
-        <li className='help-dialog--vocab-item'>
+          <li className='help-dialog--item'>
-          <span className='help-dialog--vocab-title'>Component Load Time (CLT)</span>
+            <span className='help-dialog--vocab-title'>Application Load Time (ALT)</span>
-          {componentLoadTimeDescription}
+            {applicationLoadTimeDescription}
-        </li>
+          </li>
-        <li className='help-dialog--vocab-item'>
+          <li className='help-dialog--item'>
-          <span className='help-dialog--vocab-title'>Viewport Load Time (VLT)</span>
+            <span className='help-dialog--vocab-title'>Component Load Time (CLT)</span>
-          {viewportLoadTimeDescription}
+            {componentLoadTimeDescription}
-        </li>
+          </li>
-      </ul>
+          <li className='help-dialog--item'>
-      <div className='help-dialog--action'>
+            <span className='help-dialog--vocab-title'>Viewport Load Time (VLT)</span>
-        <a
+            {viewportLoadTimeDescription}
-          aria-label='Learn more about Mezzurite'
+          </li>
-          className='help-dialog--learn-more'
+          <li className='help-dialog--item'>
-          href='https://github.com/Microsoft/Mezzurite#background'
+            <a
-          target='_blank'
+              aria-label='Learn more about Mezzurite'
-        >
+              className='help-dialog--learn-more'
-          Learn More
+              href='https://github.com/Microsoft/Mezzurite#background'
-        </a>
+              target='_blank'
-        <button
+            >
-          aria-label='Close'
+              Learn More
-          className='help-dialog--close'
+            </a>
-          onClick={props.onCloseClick}
+          </li>
-        >
+        </ul>
-          Close
+        <div className='help-dialog--action'>
-        </button>
+          <button
+            aria-label='Close'
+            className='help-dialog--close'
+            onClick={props.onCloseClick}
+          >
+            Close
+          </button>
+        </div>
       </div>
     </div>
-  </div>
+  </Fragment>
 );
 
 HelpDialog.propTypes = {

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

@@ -1,138 +1,169 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`HelpDialog.js should render with an onCloseClick function 1`] = `
-<div
+<React.Fragment>
-  className="help-dialog--container"
+  <button
->
+    className="help-dialog--cancel"
-  <div
+    onClick={[Function]}
-    className="help-dialog--content"
+  >
+    <i
+      aria-label="Close"
+      className="ms-Icon ms-Icon--Cancel"
+      title="Close"
+    />
+  </button>
+  <div
+    className="help-dialog--container"
   >
-    <h2
-      className="help-dialog--heading"
-    >
-      Understanding Mezzurite Metrics
-    </h2>
-    <ul
-      className="help-dialog--vocab"
-    >
-      <li
-        className="help-dialog--vocab-item"
-      >
-        <span
-          className="help-dialog--vocab-title"
-        >
-          Application Load Time (ALT)
-        </span>
-         is the amount of time it takes to load the SPA framework. This is calculated using the navigation start time and the application framework load time.
-      </li>
-      <li
-        className="help-dialog--vocab-item"
-      >
-        <span
-          className="help-dialog--vocab-title"
-        >
-          Component Load Time (CLT)
-        </span>
-         is the amount of time it takes to load a single component. This is calculated by using the framework's component life cycle.
-      </li>
-      <li
-        className="help-dialog--vocab-item"
-      >
-        <span
-          className="help-dialog--vocab-title"
-        >
-          Viewport Load Time (VLT)
-        </span>
-          is the amount of time it takes to load the components visible in the current viewport.
-      </li>
-    </ul>
     <div
-      className="help-dialog--action"
+      className="help-dialog--content"
     >
-      <a
+      <h2
-        aria-label="Learn more about Mezzurite"
+        className="help-dialog--heading"
-        className="help-dialog--learn-more"
-        href="https://github.com/Microsoft/Mezzurite#background"
-        target="_blank"
       >
-        Learn More
+        Understanding Mezzurite Metrics
-      </a>
+      </h2>
-      <button
+      <ul
-        aria-label="Close"
+        className="help-dialog--vocab"
-        className="help-dialog--close"
-        onClick={[Function]}
       >
-        Close
+        <li
-      </button>
+          className="help-dialog--item"
+        >
+          <span
+            className="help-dialog--vocab-title"
+          >
+            Application Load Time (ALT)
+          </span>
+           is the amount of time it takes to load the SPA framework. This is calculated using the navigation start time and the application framework load time.
+        </li>
+        <li
+          className="help-dialog--item"
+        >
+          <span
+            className="help-dialog--vocab-title"
+          >
+            Component Load Time (CLT)
+          </span>
+           is the amount of time it takes to load a single component. This is calculated by using the framework's component life cycle.
+        </li>
+        <li
+          className="help-dialog--item"
+        >
+          <span
+            className="help-dialog--vocab-title"
+          >
+            Viewport Load Time (VLT)
+          </span>
+            is the amount of time it takes to load the components visible in the current viewport.
+        </li>
+        <li
+          className="help-dialog--item"
+        >
+          <a
+            aria-label="Learn more about Mezzurite"
+            className="help-dialog--learn-more"
+            href="https://github.com/Microsoft/Mezzurite#background"
+            target="_blank"
+          >
+            Learn More
+          </a>
+        </li>
+      </ul>
+      <div
+        className="help-dialog--action"
+      >
+        <button
+          aria-label="Close"
+          className="help-dialog--close"
+          onClick={[Function]}
+        >
+          Close
+        </button>
+      </div>
     </div>
   </div>
-</div>
+</React.Fragment>
 `;
 
 exports[`HelpDialog.js should render without an onCloseClick function 1`] = `
-<div
+<React.Fragment>
-  className="help-dialog--container"
+  <button
->
+    className="help-dialog--cancel"
-  <div
+  >
-    className="help-dialog--content"
+    <i
+      aria-label="Close"
+      className="ms-Icon ms-Icon--Cancel"
+      title="Close"
+    />
+  </button>
+  <div
+    className="help-dialog--container"
   >
-    <h2
-      className="help-dialog--heading"
-    >
-      Understanding Mezzurite Metrics
-    </h2>
-    <ul
-      className="help-dialog--vocab"
-    >
-      <li
-        className="help-dialog--vocab-item"
-      >
-        <span
-          className="help-dialog--vocab-title"
-        >
-          Application Load Time (ALT)
-        </span>
-         is the amount of time it takes to load the SPA framework. This is calculated using the navigation start time and the application framework load time.
-      </li>
-      <li
-        className="help-dialog--vocab-item"
-      >
-        <span
-          className="help-dialog--vocab-title"
-        >
-          Component Load Time (CLT)
-        </span>
-         is the amount of time it takes to load a single component. This is calculated by using the framework's component life cycle.
-      </li>
-      <li
-        className="help-dialog--vocab-item"
-      >
-        <span
-          className="help-dialog--vocab-title"
-        >
-          Viewport Load Time (VLT)
-        </span>
-          is the amount of time it takes to load the components visible in the current viewport.
-      </li>
-    </ul>
     <div
-      className="help-dialog--action"
+      className="help-dialog--content"
     >
-      <a
+      <h2
-        aria-label="Learn more about Mezzurite"
+        className="help-dialog--heading"
-        className="help-dialog--learn-more"
-        href="https://github.com/Microsoft/Mezzurite#background"
-        target="_blank"
       >
-        Learn More
+        Understanding Mezzurite Metrics
-      </a>
+      </h2>
-      <button
+      <ul
-        aria-label="Close"
+        className="help-dialog--vocab"
-        className="help-dialog--close"
       >
-        Close
+        <li
-      </button>
+          className="help-dialog--item"
+        >
+          <span
+            className="help-dialog--vocab-title"
+          >
+            Application Load Time (ALT)
+          </span>
+           is the amount of time it takes to load the SPA framework. This is calculated using the navigation start time and the application framework load time.
+        </li>
+        <li
+          className="help-dialog--item"
+        >
+          <span
+            className="help-dialog--vocab-title"
+          >
+            Component Load Time (CLT)
+          </span>
+           is the amount of time it takes to load a single component. This is calculated by using the framework's component life cycle.
+        </li>
+        <li
+          className="help-dialog--item"
+        >
+          <span
+            className="help-dialog--vocab-title"
+          >
+            Viewport Load Time (VLT)
+          </span>
+            is the amount of time it takes to load the components visible in the current viewport.
+        </li>
+        <li
+          className="help-dialog--item"
+        >
+          <a
+            aria-label="Learn more about Mezzurite"
+            className="help-dialog--learn-more"
+            href="https://github.com/Microsoft/Mezzurite#background"
+            target="_blank"
+          >
+            Learn More
+          </a>
+        </li>
+      </ul>
+      <div
+        className="help-dialog--action"
+      >
+        <button
+          aria-label="Close"
+          className="help-dialog--close"
+        >
+          Close
+        </button>
+      </div>
     </div>
   </div>
-</div>
+</React.Fragment>
 `;