UX: Tweak the timestamp line in Twitter onebox (#13551)

Fixed alignment and made the color less intrusive to make the actual content pop out more.

app/assets/stylesheets/common/base/onebox.scss

@@ -637,6 +637,28 @@ aside.onebox.twitterstatus .onebox-body {
       }
     }
   }
+
+  .date {
+    display: flex;
+    line-height: $line-height-small;
+
+    .timestamp {
+      color: var(--primary-medium);
+    }
+  }
+
+  .like,
+  .retweet {
+    align-items: center;
+    color: var(--primary-medium);
+    display: flex;
+    margin-left: 0.75em;
+
+    svg {
+      fill: currentColor;
+      margin-right: 0.25em;
+    }
+  }
 }
 
 // Onebox - Imgur/Flickr - Album
@@ -780,18 +802,6 @@ aside.onebox.xkcd .onebox-body img {
   }
 }
 
-.onebox.twitterstatus {
-  .like,
-  .retweet {
-    color: var(--primary-med-or-secondary-med);
-    padding-left: 10px;
-    svg {
-      fill: currentColor;
-      vertical-align: middle;
-    }
-  }
-}
-
 // mobile specific style
 .mobile-view article.onebox-body {
   border-top: none;

lib/onebox/templates/twitterstatus.mustache

@@ -16,7 +16,7 @@
 </div>
 
 <div class="date">
-  <a href="{{link}}" target="_blank" rel="noopener">{{timestamp}}</a>
+  <a href="{{link}}" class="timestamp" target="_blank" rel="noopener">{{timestamp}}</a>
 
   {{#likes}}
     <span class="like">