From 31b5b99598b1d2792880c19740b733019a016956 Mon Sep 17 00:00:00 2001
From: Michael Fix <mrfix84@gmail.com>
Date: Wed, 25 Sep 2019 14:15:09 -0700
Subject: [PATCH] Kbd elements in about (#871)

* WIP

* improve /about with keyboard shortcuts

* clean up about styles
---
 components/ExportMenu.js  |  2 +-
 components/style/Reset.js | 16 ++++++++++++
 pages/about.js            | 51 ++++++++++++++++++++++++++++++---------
 3 files changed, 56 insertions(+), 13 deletions(-)

diff --git a/components/ExportMenu.js b/components/ExportMenu.js
index 988dbaa..101705e 100644
--- a/components/ExportMenu.js
+++ b/components/ExportMenu.js
@@ -141,7 +141,7 @@ function ExportMenu({
             </div>
           </div>
           <div className="save-container">
-            <span>Export as</span>
+            <span>Export</span>
             <div>
               {!disablePNG && (
                 <Button
diff --git a/components/style/Reset.js b/components/style/Reset.js
index ad5e281..871e3a5 100644
--- a/components/style/Reset.js
+++ b/components/style/Reset.js
@@ -174,6 +174,22 @@ export default () => (
         color: #121212;
       }
 
+      kbd {
+        display: inline-block;
+        padding: 3px 5px; /* padding: 2px 4px; */
+        font-size: 9px;
+        font-weight: 700;
+        line-height: 1.2;
+        color: ${COLORS.DARK_GRAY};
+        vertical-align: middle;
+        background-color: #fafbfc; /* ${COLORS.SECONDARY}; */
+        border: 1px solid #c6cbd1;
+        border-bottom-color: #959da5;
+        border-radius: 3px;
+        box-shadow: inset 0 -1px 0 #959da5;
+        white-space: nowrap;
+      }
+
       .link {
         color: #fff;
         text-decoration: none;
diff --git a/pages/about.js b/pages/about.js
index d69931c..56e23a8 100644
--- a/pages/about.js
+++ b/pages/about.js
@@ -21,13 +21,12 @@ export default () => (
         <h2>Who uses it?</h2>
         <p>
           Carbon is used by thousands of developers daily, including experts at:
-          <div className="mt2">
-            <img
-              width="508px"
-              src="/static/svg/open-source-companies-2.svg"
-              alt="Companies that trust Carbon: Google, Airbnb, GitHub, Coinbase, and Microsoft"
-            />
-          </div>
+          <img
+            className="mt2"
+            width="508px"
+            src="/static/svg/open-source-companies-2.svg"
+            alt="Companies that trust Carbon: Google, Airbnb, GitHub, Coinbase, and Microsoft"
+          />
         </p>
       </div>
       <div className="mb4">
@@ -79,6 +78,25 @@ export default () => (
           </a>
           ) below the image.
         </p>
+        <h4 className="mb0 mt4" id="shortcuts">
+          Keyboard Shortcuts
+        </h4>
+        <table className="mt2 mb3">
+          <tbody>
+            <tr>
+              <td>Open settings menu</td>
+              <td>
+                <kbd>⌘-/</kbd>
+              </td>
+            </tr>
+            <tr>
+              <td>Export as PNG</td>
+              <td>
+                <kbd>⌘-Shift-E</kbd>
+              </td>
+            </tr>
+          </tbody>
+        </table>
       </div>
       <div>
         <h2>I want to make this better.</h2>
@@ -93,28 +111,37 @@ export default () => (
       {`
         .about {
           font-size: 16px;
+          max-width: 632px;
         }
+
         h2 {
           font-weight: bold;
           font-size: 32px;
         }
+        h4 {
+          font-weight: bold;
+        }
 
         p,
         li {
           color: #fff;
         }
 
+        ul {
+          list-style-position: inside;
+          list-style-type: circle;
+        }
+
         span {
           color: #fff;
         }
 
-        ul {
-          list-style-position: inside;
-          list-style-type: circle;
+        td {
+          padding: 0.25rem 0;
         }
 
-        .about {
-          max-width: 632px;
+        kbd {
+          margin-left: var(--x3);
         }
       `}
     </style>