Extract style patterns from AnnotationLicense

src/sidebar/components/annotation-license.js

@@ -9,25 +9,17 @@ export default function AnnotationLicense() {
   return (
     <div className="annotation-license">
       <a
-        className="annotation-license__link u-layout-row u-color-text--muted"
+        className="u-layout-row u-color-text--muted"
         href="http://creativecommons.org/publicdomain/zero/1.0/"
         title="View more information about the Creative Commons Public Domain dedication"
         target="_blank"
         rel="noopener noreferrer"
       >
-        <SvgIcon
-          name="cc-std"
-          inline={true}
-          className="annotation-license__icon"
-        />
-        <SvgIcon
-          name="cc-zero"
-          inline={true}
-          className="annotation-license__icon"
-        />
-        <span className="annotation-license__details">
+        <div className="annotation-license__icons">
+          <SvgIcon name="cc-std" inline={true} className="u-icon--xsmall" />
+          <SvgIcon name="cc-zero" inline={true} className="u-icon--xsmall" />
+        </div>
         Annotations can be freely reused by anyone for any purpose.
-        </span>
       </a>
     </div>
   );

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

@@ -5,16 +5,15 @@
 .annotation-license {
   @include utils.font--small;
   @include utils.border-top;
+  // Space between border and text content
   padding-top: var.$layout-margin--small;
 
-  &__icon {
-    @include utils.icon--xsmall;
-    // Need a tiny space between license icons
-    margin-right: 1px;
-  }
-
-  &__details {
-    // TODO: Horizontal rhythm
-    margin-left: 0.25em;
+  // Container with two icons (representing CC licenses)
+  // with a very small amount of spacing between them
+  &__icons {
+    @include layout.row;
+    @include layout.horizontal-rhythm(1px);
+    // Add space before text
+    margin-right: var.$layout-margin--xsmall;
   }
 }

src/styles/util.scss

@@ -54,6 +54,10 @@
   @include utils.icon--inline;
 }
 
+.u-icon--xsmall {
+  @include utils.icon--xsmall;
+}
+
 .u-icon--large {
   @include utils.icon--large;
 }