Add and apply additional utility classes

src/sidebar/components/annotation-document-info.js

@@ -15,8 +15,8 @@ export default function AnnotationDocumentInfo({ annotation }) {
   }
 
   return (
-    <div className="annotation-document-info">
-      <div className="annotation-document-info__title">
+    <div className="annotation-document-info u-layout-row u-horizontal-rhythm">
+      <div className="annotation-document-info__title u-color-text--muted">
         on &quot;
         {documentInfo.titleLink ? (
           <a href={documentInfo.titleLink}>{documentInfo.titleText}</a>
@@ -26,7 +26,7 @@ export default function AnnotationDocumentInfo({ annotation }) {
         &quot;
       </div>
       {documentInfo.domain && (
-        <div className="annotation-document-info__domain">
+        <div className="annotation-document-info__domain u-color-text--muted">
           ({documentInfo.domain})
         </div>
       )}

src/sidebar/components/annotation-header.js

@@ -80,7 +80,7 @@ export default function AnnotationHeader({
             )}
             <span className="annotation-header__timestamp-created">
               <Timestamp
-                className="annotation-header__timestamp-created-link"
+                className="annotation-header__timestamp-created-link u-color-text--muted"
                 href={annotationLink}
                 timestamp={annotation.created}
               />

src/sidebar/components/annotation-license.js

@@ -9,7 +9,7 @@ export default function AnnotationLicense() {
   return (
     <div className="annotation-license">
       <a
-        className="annotation-license__link"
+        className="annotation-license__link 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"

src/sidebar/components/annotation-share-control.js

@@ -101,7 +101,7 @@ function AnnotationShareControl({
             </div>
           </div>
           <div className="annotation-share-panel__content">
-            <div className="annotation-share-panel__input">
+            <div className="annotation-share-panel__input u-layout-row">
               <input
                 aria-label="Use this URL to share this annotation"
                 className="annotation-share-panel__form-input"

src/sidebar/components/annotation-share-info.js

@@ -26,7 +26,7 @@ function AnnotationShareInfo({ annotation }) {
   );
 
   return (
-    <div className="annotation-share-info">
+    <div className="annotation-share-info u-layout-row--align-baseline">
       {linkToGroup && (
         <a
           className="annotation-share-info__group"

src/sidebar/components/annotation.js

@@ -123,7 +123,7 @@ function Annotation({
       )}
 
       {isEditing && (
-        <div className="annotation__form-actions">
+        <div className="annotation__form-actions u-layout-row">
           <AnnotationPublishControl
             annotation={annotation}
             isDisabled={isEmpty}
@@ -135,7 +135,7 @@ function Annotation({
 
       {!isCollapsedReply && (
         <footer className="annotation__footer">
-          <div className="annotation__controls">
+          <div className="annotation__controls u-layout-row">
             {shouldShowReplyToggle && (
               <Button
                 className="annotation__reply-toggle"

src/sidebar/components/new-note-btn.js

@@ -27,7 +27,7 @@ function NewNoteButton({ annotationsService, settings }) {
   };
 
   return (
-    <div className="new-note-button">
+    <div className="u-layout-row--justify-right">
       <Button
         buttonText="New note"
         className="button--primary"

src/sidebar/components/share-annotations-panel.js

@@ -68,7 +68,7 @@ function ShareAnnotationsPanel({ analytics, toastMessenger }) {
               <p>Use this link to share these annotations with anyone:</p>
             )}
           </div>
-          <div className="share-annotations-panel__input">
+          <div className="u-layout-row">
             <input
               aria-label="Use this URL to share these annotations"
               className="share-annotations-panel__form-input"
@@ -97,11 +97,7 @@ function ShareAnnotationsPanel({ analytics, toastMessenger }) {
             )}{' '}
             <span>
               Private (
-              <SvgIcon
-                name="lock"
-                inline
-                className="share-annotations-panel__icon--inline"
-              />{' '}
+              <SvgIcon name="lock" inline className="u-icon--inline" />{' '}
               <em>Only Me</em>) annotations are only visible to you.
             </span>
           </p>

src/sidebar/components/top-bar.js

@@ -101,7 +101,7 @@ function TopBar({
       {!isSidebar && (
         <div className="top-bar__inner content">
           <StreamSearchInput />
-          <div className="top-bar__expander" />
+          <div className="u-stretch" />
           <Button
             className="top-bar__icon-button"
             icon="help"
@@ -116,7 +116,7 @@ function TopBar({
       {isSidebar && (
         <div className="top-bar__inner content">
           <GroupList className="GroupList" auth={auth} />
-          <div className="top-bar__expander" />
+          <div className="u-stretch" />
           {pendingUpdateCount > 0 && (
             <Button
               className="top-bar__icon-button top-bar__icon-button--refresh"

src/styles/util.scss

 @use "./mixins/a11y";
 @use "./mixins/layout";
+@use "./mixins/utils";
+@use './variables' as var;
 
-// Utility classes for layout
-.u-stretch {
-  flex-grow: 1;
-}
+// Utility classes
+// Use these classes on elements that don't require additional styling
 
+// Layout
+
+// Establish a flex container with a horizontal flow
 .u-layout-row {
   @include layout.row;
 }
 
+// Establish a row flex container that aligns its children to (vertical) center
 .u-layout-row--align-center,
 .u-layout-row--align-middle {
   @include layout.row($align: center);
 }
 
+// Establish a row flex container that aligns its children along the baseline
+.u-layout-row--align-baseline {
+  @include layout.row($align: baseline);
+}
+
+// Establish a row flex container justifies its children right
+.u-layout-row--justify-right {
+  @include layout.row($justify: right);
+}
+
+// Use this class to make an element in a flex container "stretchy" and grow
+// when there is extra space available.
+.u-stretch {
+  flex-grow: 1;
+}
+
+// Put equal, standard spacing between children horizontally
+.u-horizontal-rhythm {
+  @include layout.horizontal-rhythm;
+}
+
+// Put equal standard spacing between children vertically
 .u-vertical-rhythm {
   @include layout.vertical-rhythm;
 }
 
+// Icons
+
+// These utilities establish dimensions appropriate for icon elements
+
+// Use for inline icons to size according to text content
+.u-icon--inline {
+  @include utils.icon--inline;
+}
+
+.u-icon--large {
+  @include utils.icon--large;
+}
+
+// Misc
+
+// Make element content invisible except to assistive technology
 .u-screen-reader-only {
   @include a11y.screen-reader-only;
 }
+
+// Use on elements for a de-emphasized, muted text color
+.u-color-text--muted {
+  color: var.$color-text-light;
+}