Refactor and extract panel pattern

src/sidebar/components/help-panel.js

@@ -99,51 +99,53 @@ function HelpPanel({ auth, session }) {
       panelName={uiConstants.PANEL_HELP}
       onActiveChanged={onActiveChanged}
     >
-      <div className="u-layout-row">
-        <h3 className="help-panel__sub-panel-title">
-          {subPanelTitles[activeSubPanel]}
-        </h3>
-        <div className="help-panel__footer">
+      <div className="help-panel__content">
+        <div className="help-panel__subtitle">
+          <h3 className="help-panel__sub-panel-title">
+            {subPanelTitles[activeSubPanel]}
+          </h3>
+          <div className="help-panel__navigation">
+            {activeSubPanel === 'versionInfo' && (
+              <button
+                className="help-panel__sub-panel-link"
+                onClick={e => openSubPanel(e, 'tutorial')}
+                aria-label="Show tutorial panel"
+              >
+                Getting started
+                <SvgIcon
+                  name="arrow-right"
+                  className="help-panel__sub-panel-link-icon"
+                />
+              </button>
+            )}
+            {activeSubPanel === 'tutorial' && (
+              <button
+                className="help-panel__sub-panel-link"
+                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"
+                />
+              </button>
+            )}
+          </div>
+        </div>
+        <div className="help-panel__subcontent">
+          {activeSubPanel === 'tutorial' && <Tutorial />}
           {activeSubPanel === 'versionInfo' && (
-            <button
-              className="help-panel__sub-panel-link"
-              onClick={e => openSubPanel(e, 'tutorial')}
-              aria-label="Show tutorial panel"
-            >
-              Getting started
-              <SvgIcon
-                name="arrow-right"
-                className="help-panel__sub-panel-link-icon"
-              />
-            </button>
-          )}
-          {activeSubPanel === 'tutorial' && (
-            <button
-              className="help-panel__sub-panel-link"
-              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"
-              />
-            </button>
+            <VersionInfo versionData={versionData} />
           )}
         </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"
-          url="https://web.hypothes.is/help/"
-        />
-        <HelpPanelTab linkText="New support ticket" url={supportTicketURL} />
+        <div className="help-panel-tabs">
+          <HelpPanelTab
+            linkText="Help topics"
+            url="https://web.hypothes.is/help/"
+          />
+          <HelpPanelTab linkText="New support ticket" url={supportTicketURL} />
+        </div>
       </div>
     </SidebarPanel>
   );

src/styles/mixins/molecules.scss

 @use "../variables" as var;
+@use "./buttons";
 @use "./layout";
 @use "./utils";
 
@@ -90,3 +91,80 @@
     );
   }
 }
+
+/**
+ * Base styles for a "panel"-like element, with appropriate
+ * padding, heading and close-button styles.
+ */
+@mixin panel {
+  @include card;
+
+  &__header {
+    @include layout.row($align: center);
+    @include utils.border-bottom;
+    padding-bottom: 1em;
+  }
+
+  &__header-icon {
+    margin-right: 0.5em;
+  }
+
+  &__title {
+    @include var.font-big;
+    color: var.$color-brand;
+    font-weight: 700;
+  }
+
+  &__button {
+    @include buttons.button--labeled;
+  }
+
+  &__button--primary {
+    @include buttons.button--primary;
+  }
+
+  &__actions {
+    @include layout.row(right);
+    @include layout.horizontal-rhythm(10px);
+  }
+}
+
+/**
+ * `panel` with tighter margins and padding, for use in more confined spaces
+ */
+@mixin panel--compact {
+  @include panel;
+  padding: 0.75em;
+
+  &__header {
+    padding: 0;
+    border-bottom: none;
+  }
+}
+
+/**
+ * Styled external-linked "tabs" with icons, intended for use in a panel
+ */
+@mixin panel-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;
+  }
+}

src/styles/mixins/panel.scss

-@use "../variables" as var;
-@use "./buttons";
-@use "./layout";
-@use "./utils";
-
-/**
- * Base styles for a "panel"-like element, with appropriate
- * padding, heading and close-button styles.
- */
-@mixin panel {
-  @include utils.border;
-  background-color: var.$color-background;
-  border-radius: 2px;
-
-  &__header {
-    @include layout.row($align: center);
-    @include utils.border-bottom;
-    padding: 1em 0;
-    margin: 0 1em;
-  }
-
-  &__header-icon {
-    margin-right: 0.5em;
-  }
-
-  &__title {
-    @include var.font-big;
-    color: var.$color-brand;
-    font-weight: 700;
-  }
-
-  &__content {
-    margin: 1em;
-    margin-top: 0;
-  }
-
-  &__button {
-    @include buttons.button--labeled;
-    margin-left: 1em;
-  }
-
-  &__button--primary {
-    @include buttons.button--primary;
-    margin-left: 1em;
-  }
-
-  &__actions {
-    display: flex;
-    justify-content: flex-end;
-  }
-}
-
-/**
- * `panel` with tighter margins and padding, for use in more confined spaces
- */
-@mixin panel--compact {
-  @include panel;
-
-  &__header {
-    padding: 0.75em 0;
-    margin: 0 0.75em;
-    border-bottom: none;
-  }
-
-  &__content {
-    margin: 0.75em;
-    margin-top: 0;
-  }
-}

src/styles/sidebar/components/annotation-share-control.scss

 @use '../../mixins/buttons';
 @use '../../mixins/layout';
-@use '../../mixins/panel';
+@use '../../mixins/molecules';
 @use "../../mixins/utils";
 @use "../../variables" as var;
 
@@ -9,7 +9,7 @@
 }
 
 .annotation-share-panel {
-  @include panel.panel--compact;
+  @include molecules.panel--compact;
   position: absolute;
   right: 5px;
   bottom: 32px;
@@ -38,12 +38,14 @@
   }
 
   &__arrow {
+    margin: 0;
     color: var.$grey-3;
     fill: white;
     transform: rotateX(180deg);
     position: absolute;
     z-index: 100;
     right: 0px;
+    bottom: -8px;
   }
 
   .share-links__icon {

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

@@ -4,17 +4,24 @@
 @use "../../variables" as var;
 
 .help-panel {
+  &__content {
+    @include layout.vertical_rhythm;
+  }
+
+  &__subtitle {
+    @include layout.row($justify: right, $align: center);
+  }
+
   &__sub-panel-title {
     @include var.font-big;
-    margin: 0;
-    padding: 0.5em 0;
+    flex-grow: 1;
     font-weight: 500;
   }
 
-  &__content {
+  &__subcontent {
     @include utils.border-top;
     @include utils.border-bottom;
-    padding: 0.5em;
+    padding: 0.5em 0;
 
     a {
       text-decoration: underline;
@@ -25,13 +32,6 @@
     @include utils.icon--xsmall;
   }
 
-  &__footer {
-    padding: 0.5em 0;
-    margin-left: auto;
-    display: flex;
-    align-items: center;
-  }
-
   &__sub-panel-link {
     @include buttons.reset-native-btn-styles;
     @include layout.row($align: center);
@@ -51,8 +51,7 @@
     &__tab {
       @include var.font-big;
       @include utils.border-right;
-      flex: 1 1 0px;
-      margin-top: 0.5em;
+      flex: 1 1;
       text-align: center;
       color: var.$color-text-light;
 

src/styles/sidebar/components/sidebar-content-error.scss

-@use "../../mixins/panel";
+@use "../../mixins/molecules";
 @use "../../variables" as var;
 
 .sidebar-content-error {
-  @include panel.panel;
+  @include molecules.panel;
   position: relative;
   margin-bottom: 0.75em;
 }

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

-@use "../../mixins/panel";
+@use "../../mixins/molecules";
 
 .sidebar-panel {
-  @include panel.panel;
+  @include molecules.panel;
   position: relative;
   margin-bottom: 0.75em;
 }

src/styles/sidebar/components/thread-card.scss

 @use "../../variables" as var;
+@use "../../mixins/layout";
+@use "../../mixins/molecules";
+@use "../../mixins/utils";
 
 .thread-card {
-  padding: 1em;
-  border-radius: 2px;
-  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.1);
+  @include molecules.card;
   cursor: pointer;
-  background-color: var.$white;
-
-  &.is-focused {
-    box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.15);
-  }
-
-  &--theme-clean {
-    // Give a little more space so that the border appears centered
-    // between cards
-    padding-bottom: 1.5em;
-    border-bottom: 1px solid var.$grey-2;
-    box-shadow: none;
-
-    &:hover {
-      box-shadow: none;
-    }
-  }
 }

src/styles/sidebar/components/toast-messages.scss

-@use "../../mixins/panel";
+@use "../../mixins/molecules";
 @use "../../mixins/layout";
 @use "../mixins/responsive";
 @use "../../variables" as var;
@@ -36,12 +36,10 @@
 }
 
 .toast-message {
-  @include panel.panel;
-  @include layout.row;
+  @include molecules.card-frame;
+  @include layout.row($align: center);
   position: relative;
   width: 100%;
-  box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.15);
-  border-radius: 2px;
   margin-bottom: 0.75em;
 
   &--success {

src/styles/sidebar/components/tutorial.scss

@@ -3,7 +3,6 @@
 
 .tutorial {
   &__list {
-    margin-top: 0em;
     padding-left: 2em;
   }