Refactor HelpPanel styling

src/sidebar/components/help-panel.js

@@ -99,15 +99,15 @@ function HelpPanel({ auth, session }) {
       panelName={uiConstants.PANEL_HELP}
       onActiveChanged={onActiveChanged}
     >
-      <div className="help-panel__content">
-        <div className="help-panel__subtitle">
+      <div className="help-panel__content u-vertical-rhythm">
+        <div className="u-layout-row--align-middle">
           <h3 className="help-panel__sub-panel-title">
             {subPanelTitles[activeSubPanel]}
           </h3>
-          <div className="help-panel__navigation">
+          <div>
             {activeSubPanel === 'versionInfo' && (
               <button
-                className="help-panel__sub-panel-link"
+                className="help-panel__sub-panel-navigation-button"
                 onClick={e => openSubPanel(e, 'tutorial')}
                 aria-label="Show tutorial panel"
               >
@@ -120,15 +120,12 @@ function HelpPanel({ auth, session }) {
             )}
             {activeSubPanel === 'tutorial' && (
               <button
-                className="help-panel__sub-panel-link"
+                className="help-panel__sub-panel-navigation-button"
                 onClick={e => openSubPanel(e, 'versionInfo')}
                 aria-label="Show version information panel"
               >
                 About this version
-                <SvgIcon
-                  name="arrow-right"
-                  className="help-panel__sub-panel-link-icon"
-                />
+                <SvgIcon name="arrow-right" />
               </button>
             )}
           </div>

src/sidebar/components/test/help-panel-test.js

@@ -58,14 +58,16 @@ describe('HelpPanel', function () {
 
     it('should show navigation link to versionInfo sub-panel', () => {
       const wrapper = createComponent();
-      const link = wrapper.find('.help-panel__sub-panel-link');
+      const link = wrapper.find('.help-panel__sub-panel-navigation-button');
 
       assert.equal(link.text(), 'About this version');
     });
 
     it('should switch to versionInfo sub-panel when footer link clicked', () => {
       const wrapper = createComponent();
-      wrapper.find('.help-panel__sub-panel-link').simulate('click');
+      wrapper
+        .find('.help-panel__sub-panel-navigation-button')
+        .simulate('click');
 
       assert.equal(
         wrapper.find('.help-panel__sub-panel-title').text(),
@@ -83,9 +85,11 @@ describe('HelpPanel', function () {
   context('when viewing versionInfo sub-panel', () => {
     it('should show navigation link back to tutorial sub-panel', () => {
       const wrapper = createComponent();
-      wrapper.find('.help-panel__sub-panel-link').simulate('click');
+      wrapper
+        .find('.help-panel__sub-panel-navigation-button')
+        .simulate('click');
 
-      const link = wrapper.find('.help-panel__sub-panel-link');
+      const link = wrapper.find('.help-panel__sub-panel-navigation-button');
 
       assert.isTrue(wrapper.find('VersionInfo').exists());
       assert.isFalse(wrapper.find('Tutorial').exists());
@@ -96,9 +100,11 @@ describe('HelpPanel', function () {
       const wrapper = createComponent();
 
       // Click to get to version-info sub-panel...
-      wrapper.find('.help-panel__sub-panel-link').simulate('click');
+      wrapper
+        .find('.help-panel__sub-panel-navigation-button')
+        .simulate('click');
 
-      const link = wrapper.find('.help-panel__sub-panel-link');
+      const link = wrapper.find('.help-panel__sub-panel-navigation-button');
       // Click again to get back to tutorial sub-panel
       link.simulate('click');
 

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

 @use "../../mixins/buttons";
 @use "../../mixins/layout";
+@use "../../mixins/molecules";
 @use "../../mixins/utils";
 @use "../../variables" as var;
 
 .help-panel {
-  &__content {
-    @include layout.vertical_rhythm;
-  }
-
-  &__subtitle {
-    @include layout.row($justify: right, $align: center);
-  }
-
   &__sub-panel-title {
     @include utils.font--large;
     flex-grow: 1;
@@ -20,7 +13,6 @@
   &__subcontent {
     @include utils.border-top;
     @include utils.border-bottom;
-    padding: 0.5em 0;
 
     a {
       text-decoration: underline;
@@ -31,40 +23,11 @@
     @include utils.icon--xsmall;
   }
 
-  &__sub-panel-link {
-    @include buttons.reset-native-btn-styles;
-    @include layout.row($align: center);
-    margin-left: auto;
-    color: var.$color-brand;
-
-    &-icon {
-      margin-left: 2px;
-      width: 12px;
-      height: 12px;
-    }
+  &__sub-panel-navigation-button {
+    @include buttons.button--navigation;
   }
 
   &-tabs {
-    @include layout.row($align: center);
-
-    &__tab {
-      @include utils.font--large;
-      @include utils.border-right;
-      flex: 1 1;
-      text-align: center;
-      color: var.$color-text-light;
-
-      &:last-of-type {
-        border-right: none;
-      }
-    }
-
-    &__link {
-      color: var.$color-text-light;
-    }
-
-    &__icon {
-      @include utils.icon--xsmall;
-    }
+    @include molecules.panel-tabs;
   }
 }