ui/component/dateTime/view.jsx

@@ -104,11 +104,11 @@ class DateTime extends React.Component<Props, State> {
         return null;
       }
 
-      return <span title={moment(date).format(`MMMM Do, YYYY ${clockFormat}`)}>{DateTime.getTimeAgoStr(date)}</span>;
+      return <span className="date_time" title={moment(date).format(`MMMM Do, YYYY ${clockFormat}`)}>{DateTime.getTimeAgoStr(date)}</span>;
     }
 
     return (
-      <span>
+      <span className="date_time">
         {date && show === DateTime.SHOW_DATE && moment(date).format('MMMM Do, YYYY')}
         {date && show === DateTime.SHOW_TIME && moment(date).format(clockFormat)}
         {!date && '...'}

ui/component/fileViewCountInline/view.jsx

@@ -1,5 +1,6 @@
 // @flow
 import React from 'react';
+// import '../../scss/component/_view_count.scss';
 
 type Props = {
   uri: string,
@@ -21,7 +22,6 @@ export default function FileViewCountInline(props: Props) {
       notation: 'compact',
     });
   } catch (err) {
-    // No soup for you!
     formattedViewCount = Number(viewCount).toLocaleString();
   }
 
@@ -30,6 +30,7 @@ export default function FileViewCountInline(props: Props) {
   // clean up (only one place edit/remove).
   const isChannelPage = window.location.pathname.startsWith('/@');
 
+  // dont show if no view count, if it's a repost, a livestream or isn't a channel page
   if (!viewCount || (claim && claim.repost_url) || isLivestream || !isChannelPage) {
     // (1) Currently, makeSelectViewCountForUri doesn't differentiate between
     // un-fetched view-count vs zero view-count. But since it's probably not
@@ -37,6 +38,8 @@ export default function FileViewCountInline(props: Props) {
     // (2) No idea how to get the repost source's claim ID from the repost claim,
     // so hiding it for now.
     return null;
+  } else {
+    require('../../scss/component/_view_count.scss');
   }
 
   return (

ui/scss/component/_claim-list.scss

@@ -560,19 +560,9 @@
   color: var(--color-subtitle);
   padding: var(--spacing-s);
 
-  // accommodating for large view counts on channel overview
-  @media (min-width: $breakpoint-large) {
-    padding: var(--spacing-s) 4px;
-  }
-
   .channel-thumbnail {
     @include handleChannelGif(2.1rem);
     margin-right: var(--spacing-s);
-
-    // accommodating for large view counts on channel overview
-    @media (min-width: $breakpoint-large) {
-      margin-right: 4px;
-    }
   }
 }
 
@@ -615,19 +605,6 @@
   flex-wrap: wrap;
 }
 
-.view_count {
-  &::after {
-    content: '•';
-    margin: 0 4px;
-  }
-
-  @media (min-width: $breakpoint-large) {
-    &::after {
-      margin: 0 2.5px;
-    }
-  }
-}
-
 .claim-preview__file-property-overlay {
   position: absolute;
   bottom: var(--spacing-xxs);

ui/scss/component/_view_count.scss

@@ -0,0 +1,38 @@
+@import '../init/vars';
+
+.claim-tile__info {
+  // accommodating for large view counts on channel overview
+  @media (min-width: $breakpoint-large) {
+    padding: var(--spacing-s) 4px !important;
+  }
+
+  .date_time {
+    font-size: 11px;
+  }
+
+  .channel-thumbnail {
+    // accommodating for large view counts on channel overview
+    @media (min-width: $breakpoint-large) {
+      margin-right: 4px !important;
+    }
+  }
+}
+
+.view_count {
+  &::after {
+    content: '•';
+    margin: 0 4px;
+  }
+
+  font-size: 11px;
+
+  @media (min-width: $breakpoint-large) {
+    &::after {
+      margin: 0 2.5px;
+    }
+  }
+}
+
+.claim-tile__about {
+  font-size: 11px;
+}