From af76b7cdb1e89fce94ad6d8784f62c57c09cd57f Mon Sep 17 00:00:00 2001
From: Danil Kovtonyuk <danx.kov@gmail.com>
Date: Wed, 5 Feb 2020 23:31:37 +1000
Subject: [PATCH] add icons

---
 assets/img/icons/anonymous.svg |  1 +
 assets/img/icons/git.svg       |  1 +
 assets/img/icons/tw.svg        |  1 +
 assets/styles/app.scss         | 29 +++++++++++++++++++++++++++--
 pages/index.vue                | 34 ++++++++++++++++++++++++++++++----
 5 files changed, 60 insertions(+), 6 deletions(-)
 create mode 100644 assets/img/icons/anonymous.svg
 create mode 100644 assets/img/icons/git.svg
 create mode 100644 assets/img/icons/tw.svg

diff --git a/assets/img/icons/anonymous.svg b/assets/img/icons/anonymous.svg
new file mode 100644
index 0000000..e3af707
--- /dev/null
+++ b/assets/img/icons/anonymous.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><path d="M 25 2 C 15.058594 2 7 4.6875 7 8 C 7 8 7 16.082031 7 25 C 7 30.082031 12.417969 44.082031 25 47 C 37.582031 44.082031 43 30.082031 43 25 C 43 16.082031 43 8 43 8 C 43 4.6875 34.941406 2 25 2 Z M 17 11 C 20.4375 11 22.195313 14.074219 22.5625 14.4375 C 23.148438 15.023438 23.148438 15.976563 22.5625 16.558594 C 21.976563 17.144531 21.023438 17.144531 20.441406 16.558594 C 20.027344 16.148438 18.6875 13 16 13 C 14.613281 13 12.953125 13.640625 11 15 C 12.855469 11.878906 15.003906 11 17 11 Z M 20 18.5 C 19.082031 19.40625 17.640625 20 16 20 C 14.359375 20 12.917969 19.40625 12 18.5 C 12.917969 17.59375 14.359375 17 16 17 C 17.640625 17 19.082031 17.59375 20 18.5 Z M 27 43 L 25 45 L 23 43 L 23 38 L 27 38 Z M 34 34 L 27 34 L 25 32 L 23 34 L 16 34 L 11 26 L 17 31 L 21 31 L 24 28 L 26 28 L 29 31 L 33 31 L 39 26 Z M 30 18.5 C 30.917969 17.59375 32.359375 17 34 17 C 35.640625 17 37.082031 17.59375 38 18.5 C 37.082031 19.40625 35.640625 20 34 20 C 32.359375 20 30.917969 19.40625 30 18.5 Z M 34 13 C 31.3125 13 29.972656 16.148438 29.5625 16.5625 C 28.976563 17.148438 28.023438 17.148438 27.441406 16.5625 C 26.855469 15.976563 26.855469 15.023438 27.441406 14.441406 C 27.804688 14.074219 29.5625 11 33 11 C 34.996094 11 37.144531 11.878906 39 15 C 37.046875 13.640625 35.386719 13 34 13 Z" fill="#94FEBF"/></svg>
diff --git a/assets/img/icons/git.svg b/assets/img/icons/git.svg
new file mode 100644
index 0000000..9d358c3
--- /dev/null
+++ b/assets/img/icons/git.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="17"><path fill="#94FEBF" fill-rule="evenodd" d="M8.999 0C4.03 0 0 3.902 0 8.716c0 3.85 2.578 7.116 6.156 8.269.45.081.614-.188.614-.42 0-.207-.008-.755-.012-1.482-2.503.526-3.032-1.169-3.032-1.169-.408-1.007-.999-1.274-.999-1.274-.818-.541.061-.53.061-.53.903.062 1.378.898 1.378.898.803 1.332 2.107.948 2.62.724.081-.563.314-.947.572-1.165-1.999-.22-4.1-.968-4.1-4.307 0-.952.351-1.73.927-2.34-.093-.22-.402-1.106.088-2.305 0 0 .756-.235 2.475.893a8.827 8.827 0 0 1 4.507.001c1.717-1.128 2.472-.893 2.472-.893.491 1.2.182 2.085.09 2.305.577.61.925 1.388.925 2.34 0 3.348-2.104 4.084-4.108 4.3.322.269.61.801.61 1.614 0 1.165-.011 2.105-.011 2.39 0 .234.162.505.619.419C15.424 15.83 18 12.565 18 8.716 18 3.902 13.97 0 8.999 0z"/></svg>
diff --git a/assets/img/icons/tw.svg b/assets/img/icons/tw.svg
new file mode 100644
index 0000000..93dcd2d
--- /dev/null
+++ b/assets/img/icons/tw.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="15"><path fill="#94FEBF" fill-rule="evenodd" d="M18 1.776a7.518 7.518 0 0 1-2.126.597A3.743 3.743 0 0 0 17.497.282a7.269 7.269 0 0 1-2.34.916A3.653 3.653 0 0 0 12.462 0c-2.043 0-3.688 1.701-3.688 3.786 0 .3.025.588.085.863C5.791 4.495 3.077 2.987 1.253.69a3.89 3.89 0 0 0-.505 1.913c0 1.311.658 2.473 1.639 3.145A3.569 3.569 0 0 1 .72 5.282v.042c0 1.839 1.279 3.367 2.957 3.719a3.611 3.611 0 0 1-.968.124c-.236 0-.475-.014-.699-.064.479 1.499 1.835 2.6 3.448 2.636a7.29 7.29 0 0 1-4.575 1.614c-.302 0-.593-.013-.883-.051A10.203 10.203 0 0 0 5.661 15c6.79 0 10.503-5.769 10.503-10.77 0-.167-.006-.329-.014-.489A7.466 7.466 0 0 0 18 1.776z"/></svg>
diff --git a/assets/styles/app.scss b/assets/styles/app.scss
index abb63d6..dd4c136 100644
--- a/assets/styles/app.scss
+++ b/assets/styles/app.scss
@@ -81,8 +81,8 @@
 
   &.is-icon {
     padding:0;
-    width: 20px;
-    height: 20px;
+    width: 18px;
+    height: 18px;
     background-color: transparent;
     border: none;
 
@@ -168,6 +168,8 @@
 
     .buttons {
       flex-grow: 1;
+      flex-direction: column;
+      justify-content: center;
     }
 
     .button.is-fullwidth + .button.is-fullwidth {
@@ -260,6 +262,17 @@
       }
     }
 
+    .social-link {
+      display: flex;
+      align-items: center;
+
+      .icon {
+        margin-right: .75rem;
+        height: 18px;
+        width: 18px;
+      }
+    }
+
     th {
       font-weight: $weight-normal;
     }
@@ -322,6 +335,18 @@
     height: 48px;
     width: 48px;
   }
+
+  &-twitter {
+    background-image: url('../img/icons/tw.svg');
+  }
+
+  &-github {
+    background-image: url('../img/icons/git.svg');
+  }
+
+  &-anonymous {
+    background-image: url('../img/icons/anonymous.svg');
+  }
 }
 
 .table-search {
diff --git a/pages/index.vue b/pages/index.vue
index 8114c22..b96bc76 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -27,7 +27,18 @@
         </b-table-column>
 
         <b-table-column label="Account">
-          <a :href="`#${props.row.account}`" target="_blank">{{ props.row.account }}</a>
+          <a
+            v-if="props.row.account"
+            :href="`#${props.row.account}`"
+            class="social-link"
+            target="_blank"
+          >
+            <span :class="`icon-${props.row.socialType}`" class="icon"></span>
+            {{ props.row.account }}
+          </a>
+          <div v-else class="social-link">
+            <span :class="`icon-${props.row.socialType}`" class="icon"></span>
+          </div>
         </b-table-column>
 
         <b-table-column field="name" label="Name">
@@ -42,7 +53,7 @@
           <a :href="props.row.attestation" target="_blank">{{ props.row.account }}</a>
         </b-table-column>
 
-        <b-table-column label="Contribution">
+        <b-table-column :centered="true" label="Contribution">
           <a :href="props.row.contribution" class="button is-icon">
             <Link />
           </a>
@@ -106,6 +117,7 @@ export default {
       contributions: [
         {
           id: 1,
+          socialType: 'twitter',
           account: '@VitalikButerin',
           name: 'Vitalik Buterin',
           company: 'Ethereum',
@@ -114,6 +126,7 @@ export default {
         },
         {
           id: 2,
+          socialType: 'twitter',
           account: '@Chims1974',
           name: 'Rickey Kline',
           company: 'Big Wheel',
@@ -122,6 +135,7 @@ export default {
         },
         {
           id: 3,
+          socialType: 'github',
           account: '@Diguest',
           name: 'Ryan Obrien',
           company: 'Brilliant Home',
@@ -130,6 +144,16 @@ export default {
         },
         {
           id: 4,
+          socialType: 'anonymous',
+          account: '',
+          name: 'Anonymous',
+          company: '',
+          attestation: '',
+          contribution: '#'
+        },
+        {
+          id: 5,
+          socialType: 'github',
           account: '@Mathervenrat',
           name: 'William Hartwig',
           company: 'New World',
@@ -137,7 +161,8 @@ export default {
           contribution: '#'
         },
         {
-          id: 5,
+          id: 6,
+          socialType: 'twitter',
           account: '@Hichercy',
           name: 'Wayne Biggins',
           company: 'Balanced Fortune',
@@ -145,7 +170,8 @@ export default {
           contribution: '#'
         },
         {
-          id: 6,
+          id: 7,
+          socialType: 'anonymous',
           account: '',
           name: 'Anonymous',
           company: '',