display verified badge for verified publishers

js/about/preferences.js

@@ -213,6 +213,13 @@ class LedgerTable extends ImmutableComponent {
     return `https?://${synopsis.get('site')}`
   }
 
+  getVerifiedIcon (synopsis) {
+    return <span className='verified fa-stack'>
+      <i className='fa fa-circle fa-stack-2x' />
+      <i className='fa fa-check fa-stack-1x' />
+    </span>
+  }
+
   enabledForSite (synopsis) {
     const hostSettings = this.props.siteSettings.get(this.getHostPattern(synopsis))
     if (hostSettings) {
@@ -239,9 +246,10 @@ class LedgerTable extends ImmutableComponent {
     if (!synopsis || !synopsis.get || !this.shouldShow(synopsis)) {
       return []
     }
-    const faviconURL = synopsis.get('faviconURL') || appConfig.defaultFavicon
+    const faviconURL = synopsis.get('faviconURL')
     const rank = synopsis.get('rank')
     const views = synopsis.get('views')
+    const verified = synopsis.get('verified')
     const duration = synopsis.get('duration')
     const publisherURL = synopsis.get('publisherURL')
     const percentage = synopsis.get('percentage')
@@ -251,7 +259,7 @@ class LedgerTable extends ImmutableComponent {
     return [
       rank,
       {
-        html: <a href={publisherURL} target='_blank'><img src={faviconURL} alt={site} /><span>{site}</span></a>,
+        html: <a href={publisherURL} target='_blank'>{verified ? this.getVerifiedIcon() : null}{faviconURL ? <img src={faviconURL} alt={site} /> : <span className='fa fa-file-o' />}<span>{site}</span></a>,
         value: site
       },
       {

less/about/preferences.less

@@ -760,6 +760,7 @@ div.nextPaymentSubmission {
       -webkit-font-smoothing: antialiased;
       text-align: left;
       vertical-align: top;
+      position: relative;
 
       a {
         vertical-align: middle;
@@ -777,6 +778,27 @@ div.nextPaymentSubmission {
         }
       }
 
+      .fa-file-o {
+        font-size: 15px;
+        margin-right: 6px;
+        text-align: center;
+        width: 24px;
+      }
+
+      .verified{
+        left: -10px;
+        position: absolute;
+        font-size: 10px;
+
+        .fa-circle {
+          color: #67B640;
+        }
+
+        .fa-check {
+          color: white;
+        }
+      }
+
       &.alignRight {
         text-align: right;
       }