Add classes, styling to SVGIcon elements and help icon in top bar

hypothesis · Jun 11, 2019 · d2a8e58 · d2a8e58
1 parent b62662e
commit d2a8e58
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 7 deletions.
diff --git a/src/sidebar/components/svg-icon.js b/src/sidebar/components/svg-icon.js
@@ -41,7 +41,9 @@ function SvgIcon({ name, className = '' }) {
     markup,
   ]);
 
-  return <span dangerouslySetInnerHTML={markup} ref={element} />;
+  return (
+    <span className="svg-icon" dangerouslySetInnerHTML={markup} ref={element} />
+  );
 }
 
 SvgIcon.propTypes = {

diff --git a/src/sidebar/templates/top-bar.html b/src/sidebar/templates/top-bar.html
@@ -15,7 +15,7 @@
        ng-click="vm.onShowHelpPanel()"
        title="Help"
        aria-label="Help">
-       <svg-icon name="'help'"></svg-icon>
+       <svg-icon name="'help'" class-name="'top-bar__help-icon'"></svg-icon>
     </button>
     <login-control
       class="login-control"
@@ -59,7 +59,7 @@
        ng-click="vm.onShowHelpPanel()"
        title="Help"
        aria-label="Help">
-       <svg-icon name="'help'"></svg-icon>
+       <svg-icon name="'help'"  class-name="'top-bar__help-icon'"></svg-icon>
     </button>
     <login-control
       class="login-control"

diff --git a/src/styles/sidebar/components/svg-icon.scss b/src/styles/sidebar/components/svg-icon.scss
@@ -0,0 +1,4 @@
+/* Make the wrapper element's size match the contained `svg` element  */
+.svg-icon {
+  display: flex;
+}
diff --git a/src/styles/sidebar/components/top-bar.scss b/src/styles/sidebar/components/top-bar.scss
@@ -14,7 +14,7 @@
 
   // Force top-bar onto a new compositor layer so that it does not judder when
   // the window is scrolled.
-  transform: translate3d(0,0,0);
+  transform: translate3d(0, 0, 0);
 }
 
 .top-bar--theme-clean {
@@ -93,6 +93,12 @@
   user-select: none;
 }
 
+/* FIXME: Temporary fix to make 'help' icon align with other top-bar icons */
+.top-bar__help-icon {
+  width: 15px;
+  height: 15px;
+}
+
 .top-bar__apply-icon {
   display: inline-block;
   line-height: 12px;

diff --git a/src/styles/sidebar/sidebar.scss b/src/styles/sidebar/sidebar.scss
@@ -43,6 +43,7 @@ $base-line-height: 20px;
 @import './components/share-link';
 @import './components/sidebar-tutorial';
 @import './components/simple-search';
+@import './components/svg-icon';
 @import './components/spinner';
 @import './components/tags-input';
 @import './components/thread-list';
@@ -51,7 +52,8 @@ $base-line-height: 20px;
 
 // Top-level styles
 // ----------------
-html, body {
+html,
+body {
   height: 100%;
 }
 
@@ -105,7 +107,7 @@ hypothesis-app {
   border-radius: 2px;
   font-family: $sans-font-family;
   font-weight: 300;
-  margin-bottom: .72em;
+  margin-bottom: 0.72em;
   padding: 1em;
   position: relative;
   background-color: $body-background;
@@ -114,7 +116,9 @@ hypothesis-app {
     border: 1px none $gray-lighter;
     border-bottom-style: solid;
     padding: 0 0 1.1em;
-    li a { padding-bottom: .231em }
+    li a {
+      padding-bottom: 0.231em;
+    }
   }
 
   .close {