Adjust styling on document metadata

Make sure document titles that are not linked don't look like links.

src/sidebar/components/Annotation/AnnotationDocumentInfo.js

@@ -17,17 +17,13 @@ import propTypes from 'prop-types';
  */
 export default function AnnotationDocumentInfo({ domain, link, title }) {
   return (
-    <div className="AnnotationDocumentInfo u-layout-row u-horizontal-rhythm">
-      <div className="AnnotationDocumentInfo__title u-color-text--muted">
+    <div className="u-layout-row u-horizontal-rhythm">
+      <div className="u-color-text--muted">
         on &quot;
         {link ? <a href={link}>{title}</a> : <span>{title}</span>}
         &quot;
       </div>
-      {domain && (
-        <div className="AnnotationDocumentInfo__domain u-color-text--muted">
-          ({domain})
-        </div>
-      )}
+      {domain && <span className="u-color-text--muted">({domain})</span>}
     </div>
   );
 }

src/sidebar/components/Annotation/AnnotationTimestamps.js

@@ -80,13 +80,16 @@ export default function AnnotationTimestamps({
   return (
     <div className="AnnotationTimestamps">
       {withEditedTimestamp && (
-        <span className="AnnotationTimestamps__edited" title={updated.absolute}>
+        <span
+          className="AnnotationTimestamps__timestamp AnnotationTimestamps__edited"
+          title={updated.absolute}
+        >
           ({editedString}){' '}
         </span>
       )}
       {annotationUrl ? (
         <a
-          className="AnnotationTimestamps__created"
+          className="AnnotationTimestamps__timestamp AnnotationTimestamps__timestamp--linked"
           target="_blank"
           rel="noopener noreferrer"
           title={created.absolute}
@@ -96,7 +99,7 @@ export default function AnnotationTimestamps({
         </a>
       ) : (
         <span
-          className="AnnotationTimestamps__created"
+          className="AnnotationTimestamps__timestamp AnnotationTimestamps__created"
           title={created.absolute}
         >
           {created.relative}

src/sidebar/components/Annotation/test/AnnotationDocumentInfo-test.js

@@ -18,23 +18,21 @@ describe('AnnotationDocumentInfo', () => {
 
   it('should render the document title', () => {
     const wrapper = createAnnotationDocumentInfo();
-    const info = wrapper.find('.AnnotationDocumentInfo__title');
 
-    assert.equal(info.text(), 'on "Turtles"');
+    assert.include(wrapper.text(), '"Turtles"');
   });
 
   it('should render a link if available', () => {
     const wrapper = createAnnotationDocumentInfo();
-    const link = wrapper.find('.AnnotationDocumentInfo__title a');
+    const link = wrapper.find('a');
 
     assert.equal(link.prop('href'), 'http://www.baz');
   });
 
   it('should render domain if available', () => {
     const wrapper = createAnnotationDocumentInfo();
-    const domain = wrapper.find('.AnnotationDocumentInfo__domain');
 
-    assert.equal(domain.text(), '(www.foo.bar)');
+    assert.include(wrapper.text(), '(www.foo.bar)');
   });
 
   it(

src/sidebar/components/Annotation/test/AnnotationTimestamps-test.js

@@ -46,7 +46,7 @@ describe('AnnotationTimestamps', () => {
   it('renders a linked created timestamp if annotation has a link', () => {
     const wrapper = createComponent();
 
-    const link = wrapper.find('a.AnnotationTimestamps__created');
+    const link = wrapper.find('a');
     assert.equal(link.prop('href'), 'http://www.example.com');
     assert.equal(link.prop('title'), 'absolute date');
     assert.equal(link.text(), 'fuzzy string');
@@ -55,7 +55,7 @@ describe('AnnotationTimestamps', () => {
   it('renders an unlinked created timestamp if annotation does not have a link', () => {
     const wrapper = createComponent({ annotationUrl: '' });
 
-    const link = wrapper.find('a.AnnotationTimestamps__created');
+    const link = wrapper.find('a');
     const span = wrapper.find('span.AnnotationTimestamps__created');
     assert.isFalse(link.exists());
     assert.isTrue(span.exists());

src/styles/sidebar/components/AnnotationTimestamps.scss

@@ -2,16 +2,19 @@
 @use "../../mixins/utils";
 
 .AnnotationTimestamps {
-  &__edited {
-    @include utils.font--small;
-    font-style: italic;
+  &__timestamp {
     color: var.$color-text--light;
-  }
 
-  &__created {
-    color: var.$color-text--light;
+    &--linked {
       &:hover {
+        color: var.$color-text--light;
         text-decoration: underline;
       }
     }
+  }
+
+  &__edited {
+    @include utils.font--small;
+    font-style: italic;
+  }
 }