[Glitch] Display verified links in glitch flavor

Port front-end changes from f4d549d300 to glitch-soc

app/javascript/flavours/glitch/features/account/components/header.js

@@ -16,8 +16,18 @@ const messages = defineMessages({
   requested: { id: 'account.requested', defaultMessage: 'Awaiting approval. Click to cancel follow request' },
   unblock: { id: 'account.unblock', defaultMessage: 'Unblock @{name}' },
   edit_profile: { id: 'account.edit_profile', defaultMessage: 'Edit profile' },
+  link_verified_on: { id: 'account.link_verified_on', defaultMessage: 'Ownership of this link was checked on {date}' },
 });
 
+const dateFormatOptions = {
+  month: 'short',
+  day: 'numeric',
+  year: 'numeric',
+  hour12: false,
+  hour: '2-digit',
+  minute: '2-digit',
+};
+
 @injectIntl
 export default class Header extends ImmutablePureComponent {
 
@@ -122,7 +132,9 @@ export default class Header extends ImmutablePureComponent {
                 {fields.map((pair, i) => (
                   <dl key={i}>
                     <dt dangerouslySetInnerHTML={{ __html: pair.get('name_emojified') }} title={pair.get('name')} />
-                    <dd dangerouslySetInnerHTML={{ __html: pair.get('value_emojified') }} title={pair.get('value_plain')} />
+                    <dd className={pair.get('verified_at') && 'verified'} title={pair.get('value_plain')}>
+                      {pair.get('verified_at') && <span title={intl.formatMessage(messages.link_verified_on, { date: intl.formatDate(pair.get('verified_at'), dateFormatOptions) })}><i className='fa fa-check verified__mark' /></span>} <span dangerouslySetInnerHTML={{ __html: pair.get('value_emojified') }} />
+                    </dd>
                  </dl>
                 ))}
               </div>

app/javascript/flavours/glitch/styles/components/metadata.scss

@@ -4,17 +4,11 @@
   overflow: hidden;
   margin: 20px -10px -20px;
   border-bottom: 0;
-
+  border-top: 0;
-  a {
-    text-decoration: none;
-
-    &:hover{
-      text-decoration: underline;
-    }
-  }
 
   dl {
-    border-top: 1px solid lighten($ui-base-color, 8%);
+    border-top: 1px solid lighten($ui-base-color, 4%);
+    border-bottom: 0;
     display: flex;
   }
 
@@ -35,10 +29,6 @@
     width: 120px;
     flex: 0 0 auto;
     font-weight: 500;
-
-    a {
-      color: $primary-text-color;
-    }
   }
 
   dd {
@@ -46,8 +36,9 @@
     color: $primary-text-color;
     background: $ui-base-color;
 
-    a {
+    &.verified {
-      color: $highlight-text-color;
+      border: 1px solid rgba($valid-value-color, 0.5);
+      background: rgba($valid-value-color, 0.25);
     }
   }
 }