Add icon mixins

src/styles/mixins/buttons.scss

@@ -43,8 +43,7 @@
 
   // Icon
   svg {
-    width: 16px;
-    height: 16px;
+    @include utils.icon--medium;
   }
 
   &:hover {

src/styles/mixins/utils.scss

@@ -17,5 +17,32 @@
 }
 
 @mixin border-left {
-  border-left: 1px var.$border-width var.$color-border;
+  border-left: var.$border-width solid var.$color-border;
+}
+
+@mixin icon--xsmall {
+  width: var.$icon-size--xsmall;
+  height: var.$icon-size--xsmall;
+}
+
+// TODO: This may be only applicable to mobile devices, and maybe should be
+// conflated into icon--xsmall
+@mixin icon--small {
+  width: var.$icon-size--small;
+  height: var.$icon-size--small;
+}
+
+@mixin icon--medium {
+  width: var.$icon-size--medium;
+  height: var.$icon-size--medium;
+}
+
+@mixin icon--large {
+  width: var.$icon-size--large;
+  height: var.$icon-size--large;
+}
+
+@mixin icon--inline {
+  width: 1em;
+  height: 1em;
 }

src/styles/sidebar/components/annotation-header.scss

 @use "../../mixins/buttons";
 @use "../../mixins/forms";
 @use "../../mixins/layout";
+@use "../../mixins/utils";
 @use "../../variables" as var;
 
 .annotation-header {
@@ -12,8 +13,7 @@
   }
 
   &__icon {
-    width: 10px;
-    height: 10px;
+    @include utils.icon--xsmall;
     color: var.$color-text;
   }
 
@@ -44,10 +44,7 @@
   }
 
   &__highlight-icon {
-    color: var.$grey-5;
-    width: 12px;
-    height: 12px;
-    /* bring down the baseline a little */
-    margin-bottom: -1px;
+    @include utils.icon--xsmall;
+    color: var.$color-text;
   }
 }

src/styles/sidebar/components/annotation-license.scss

@@ -13,8 +13,8 @@
   }
 
   &__icon {
-    width: 12px;
-    height: 12px;
+    @include utils.icon--xsmall;
+    // Need a tiny space between license icons
     margin-right: 1px;
   }
 

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

@@ -2,6 +2,7 @@
 @use '../../mixins/layout';
 @use '../../mixins/links';
 @use '../../mixins/panel';
+@use "../../mixins/utils";
 @use "../../variables" as var;
 
 .annotation-share-control {
@@ -47,7 +48,6 @@
   }
 
   .share-links__icon {
-    width: 18px;
-    height: 18px;
+    @include utils.icon--medium;
   }
 }

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

 @use "../../variables" as var;
 @use "../../mixins/layout";
+@use "../../mixins/utils";
 
 .annotation-share-info {
   @include layout.row($align: baseline);
@@ -11,9 +12,8 @@
   }
 
   &__icon {
+    @include utils.icon--xsmall;
     // This margin is currently needed because the icon is within an `a` element
     margin-right: 5px;
-    width: 10px;
-    height: 10px;
   }
 }

src/styles/sidebar/components/group-list.scss

 @use "../../variables" as var;
+@use "../../mixins/utils";
 
 .group-list__content {
   min-width: 250px;
@@ -17,8 +18,7 @@
 }
 
 .group-list__menu-icon {
-  width: 15px;
-  height: 15px;
+  @include utils.icon--medium;
   margin-right: 4px;
 
   // A minor adjustment to make the default icon (the Hypothesis logo) align

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

@@ -22,8 +22,7 @@
   }
 
   &__icon {
-    width: 12px;
-    height: 12px;
+    @include utils.icon--xsmall;
   }
 
   &__footer {
@@ -67,8 +66,7 @@
     }
 
     &__icon {
-      width: 12px;
-      height: 12px;
+      @include utils.icon--xsmall;
     }
   }
 }

src/styles/sidebar/components/markdown-editor.scss

@@ -39,8 +39,7 @@
   }
 
   &-icon {
-    width: 10px;
-    height: 10px;
+    @include utils.icon--xsmall;
   }
 }
 
@@ -87,8 +86,7 @@
     min-height: var.$touch-target-size;
 
     &-icon {
-      width: 12px;
-      height: 12px;
+      @include utils.icon--small;
     }
   }
 }

src/styles/sidebar/components/menu-item.scss

@@ -78,17 +78,16 @@ a.menu-item:hover {
   }
 }
 .menu-item__icon {
+  @include utils.icon--medium;
   color: inherit;
   display: inline-block;
   margin-right: 4px;
   position: relative;
-  height: 15px;
-  width: 15px;
-
   &-container {
     margin-right: 10px;
-    width: 15px;
-    height: 15px;
+    // TODO Not using icon mixins for now until reviewing this entire pattern
+    width: 16px;
+    height: 16px;
   }
 }
 
@@ -135,6 +134,7 @@ a.menu-item:hover {
   }
 
   &-icon {
+    // TODO not an icon in the general sense of the term; rename class?
     width: 12px;
     height: 12px;
   }

src/styles/sidebar/components/menu.scss

@@ -36,8 +36,7 @@
   height: 100%;
 }
 .menu__toggle-icon {
-  width: 10px;
-  height: 10px;
+  @include utils.icon--xsmall;
 }
 
 // Triangular indicator next to the toggle button indicating that there is

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

 @use "../../variables" as var;
 @use "../../mixins/buttons";
 @use "../../mixins/links";
+@use "../../mixins/utils";
 
 .share-annotations-panel {
   color: var.$color-text-light;
@@ -31,8 +32,7 @@
     @include links.footer-links;
 
     &__icon {
-      width: 24px;
-      height: 24px;
+      @include utils.icon--large;
     }
   }
 }

src/styles/sidebar/components/share-links.scss

 @use '../../mixins/links';
+@use "../../mixins/utils";
 
 .share-links {
   @include links.footer-links;
 
   &__icon {
-    width: 24px;
-    height: 24px;
+    @include utils.icon--large;
   }
 }

src/styles/sidebar/components/thread.scss

@@ -49,6 +49,7 @@
     background-color: var.$white;
 
     svg {
+      // This is not an icon and as such does not use a mixin
       width: 12px;
       height: 12px;
       color: var.$grey-4;

src/styles/sidebar/components/top-bar.scss

@@ -85,6 +85,11 @@
   @include layout.sidebar-content;
   @include layout.row(right, center);
 
+  // FIXME: This odd font size rule is because the spinner uses a `1em` dimension
+  // and we want to assure it displays at the same dimensions as the other icons
+  // in this top bar
+  font-size: var.$icon-size--medium;
+
   // the edges of the top-bar's contents should be aligned
   // with the edges of annotation cards displayed below
   $h-padding: 9px;

src/styles/sidebar/components/tutorial.scss

 @use "../../variables" as var;
+@use "../../mixins/utils";
 
 .tutorial {
   &__list {
@@ -11,8 +12,7 @@
   }
 
   &__icon {
-    width: 12px;
-    height: 12px;
+    @include utils.icon--inline;
     margin-right: 1px;
     margin-bottom: -1px; // Pull the icon a little toward the baseline
     color: var.$grey-5;

src/styles/variables.scss

@@ -107,6 +107,11 @@ $popup-menu-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
 $color-border: $grey-3;
 $border-width: 1px;
 
+$icon-size--xsmall: 10px;
+$icon-size--small: 12px;
+$icon-size--medium: 16px;
+$icon-size--large: 24px;
+
 // Mixins
 // ------