Iterate and improve design and UX on help/tutorial panel

- Tighten panel subheader and sub-panel navigation links
- Make vertical and horizontal rhythm consistent

src/sidebar/components/help-panel.js

@@ -97,41 +97,49 @@ function HelpPanel({ auth, session }) {
 
   return (
     <SidebarPanel
-      title="Need some help?"
+      title="Help"
       panelName={uiConstants.PANEL_HELP}
       onActiveChanged={onActiveChanged}
     >
-      <h3 className="help-panel__sub-panel-title">
-        {subPanelTitles[activeSubPanel]}
-      </h3>
-      <div className="help-panel__content">
-        {activeSubPanel === 'tutorial' && <Tutorial />}
-        {activeSubPanel === 'versionInfo' && (
-          <VersionInfo versionData={versionData} />
-        )}
+      <div className="u-layout-row">
+        <h3 className="help-panel__sub-panel-title">
+          {subPanelTitles[activeSubPanel]}
+        </h3>
         <div className="help-panel__footer">
           {activeSubPanel === 'versionInfo' && (
             <a
               href="#"
-              className="help-panel__sub-panel-link help-panel__sub-panel-link--left"
+              className="help-panel__sub-panel-link"
               onClick={e => openSubPanel(e, 'tutorial')}
             >
-              <SvgIcon name="arrow-left" className="help-panel__icon" />
               <div>Getting started</div>
+              <SvgIcon
+                name="arrow-right"
+                className="help-panel__sub-panel-link-icon"
+              />
             </a>
           )}
           {activeSubPanel === 'tutorial' && (
             <a
               href="#"
-              className="help-panel__sub-panel-link help-panel__sub-panel-link--right"
+              className="help-panel__sub-panel-link"
               onClick={e => openSubPanel(e, 'versionInfo')}
             >
               <div>About this version</div>
-              <SvgIcon name="arrow-right" className="help-panel__icon" />
+              <SvgIcon
+                name="arrow-right"
+                className="help-panel__sub-panel-link-icon"
+              />
             </a>
           )}
         </div>
       </div>
+      <div className="help-panel__content">
+        {activeSubPanel === 'tutorial' && <Tutorial />}
+        {activeSubPanel === 'versionInfo' && (
+          <VersionInfo versionData={versionData} />
+        )}
+      </div>
       <div className="help-panel-tabs">
         <HelpPanelTab
           linkText="Help topics"

src/styles/sidebar/components/help-panel.scss

 .help-panel {
   &__sub-panel-title {
     margin: 0;
-    padding: 0.5em;
-    text-align: center;
+    padding: 0.5em 0;
     font-size: 1.25em;
-    font-weight: 600;
+    font-weight: 500;
   }
 
   &__content {
@@ -22,6 +21,7 @@
 
   &__footer {
     padding: 0.5em 0;
+    margin-left: auto;
     display: flex;
     align-items: center;
   }
@@ -29,14 +29,11 @@
   &__sub-panel-link {
     display: flex;
     align-items: center;
+    margin-left: auto;
     color: $brand;
 
-    &--right {
-      margin-left: auto;
-    }
-
     &-icon {
-      margin: 5px;
+      margin-left: 2px;
       width: 12px;
       height: 12px;
     }

src/styles/sidebar/components/tutorial.scss

 .tutorial {
   &__list {
-    margin-top: 1em;
+    margin-top: 0em;
     padding-left: 2em;
   }