display verified badge for verified publishers

brave · Oct 25, 2016 · 3d7f3dc · 3d7f3dc
1 parent f37459c
commit 3d7f3dc
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 2 deletions.
diff --git a/js/about/preferences.js b/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
       },
       {

diff --git a/less/about/preferences.less b/less/about/preferences.less
@@ -777,6 +777,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;
       }