From a939e52f541443c25fee2473eccfb6ce81221c3c Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Wed, 12 Jan 2022 19:48:32 -0800
Subject: [PATCH] improvements to about

---
 src/renderer/style.less            | 17 ++++++
 src/renderer/views/pages/about.ejs | 87 ++++++++++++++++++++++--------
 2 files changed, 82 insertions(+), 22 deletions(-)

diff --git a/src/renderer/style.less b/src/renderer/style.less
index 9f29b0df..3f0b1163 100644
--- a/src/renderer/style.less
+++ b/src/renderer/style.less
@@ -1840,6 +1840,23 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
 /* Cider */
 
 .about-page {
+  .teamBtn {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    font-size: 14px;
+    padding: 6px 16px;
+    margin: 4px;
+
+    >img {
+      width: 30px;
+      margin: 0px 16px 0px 0px;
+      pointer-events: none;
+      border-radius: 100%;
+      box-shadow: var(--mediaItemShadow);
+      image-rendering: -webkit-optimize-contrast;
+    }
+  }
   .sponsorBtn {
     display: inline-flex;
     justify-content: center;
diff --git a/src/renderer/views/pages/about.ejs b/src/renderer/views/pages/about.ejs
index 62914e49..98b0768d 100644
--- a/src/renderer/views/pages/about.ejs
+++ b/src/renderer/views/pages/about.ejs
@@ -10,6 +10,11 @@
                                                                                   rel="noopener" data-dt-link-to-exclude="">Apple Inc.</a>
                     All Rights
                     Reserved.</p>
+                <hr>
+                <h3>Sponsor this project</h3>
+                <button onclick="window.open('https://ko-fi.com/cryptofyre')" class="md-btn sponsorBtn"><img src="./assets/ko_fi.svg"/>Ko-fi</button>
+                <button onclick="window.open('https://opencollective.com/ciderapp')" class="md-btn sponsorBtn"><img src="./assets/open_collective.svg"/>Open Collective</button>
+
             </div>
             <div class="col">
                 <div class="row">
@@ -25,37 +30,75 @@
                 <div class="row">
                     <div class="col">
                         <h3>Cider Team</h3>
-                        <ul>
-                            <li><a href="https://github.com/cryptofyre" target="_blank">cryptofyre - Developer</a></li>
-                            <li><a href="https://github.com/coredev-uk" target="_blank">Core - Developer</a></li>
-                            <li><a href="https://github.com/child-duckling" target="_blank">Quacksire - Developer</a></li>
-                            <li><a href="https://github.com/booploops" target="_blank">booploops - Developer</a></li>
-                            <li><a href="https://github.com/vapormusic" target="_blank">vapormusic - Developer</a></li>
-                            <li><a href="https://twitter.com/MoonyVoid" target="_blank">Void - Social Communications Team</a></li>
-                            <li><a href="https://twitter.com/noah_grose" target="_blank">NoseySG - Social Communications Team</a></li>
-                        </ul>
+                        <button class="md-btn teamBtn" @click="window.open(member.link)" v-for="member in team">
+                            <img :src="member.avatar"/>
+                            <div class="row" style="width:100%;">
+                                <div class="col" style="text-align: left">
+                                    {{ member.name }}
+                                </div>
+                                <div class="col-auto">
+                                    <b>{{ member.role }}</b>
+                                </div>
+                            </div>
+                        </button>
                     </div>
                 </div>
             </div>
         </div>
-        <hr>
-        <div class="row">
-            <div class="col">
-                <h3>Sponsor this project</h3>
-                <button onclick="window.open('https://ko-fi.com/cryptofyre')" class="md-btn sponsorBtn"><img src="./assets/ko_fi.svg"/>Ko-fi</button>
-                <button onclick="window.open('https://opencollective.com/ciderapp')" class="md-btn sponsorBtn"><img src="./assets/open_collective.svg"/>Open Collective</button>
-                </div>
-            </div>
-        </div>
-
-
-
-
     </div>
 </script>
 <script>
     Vue.component('about-page', {
         template: '#about-page',
+        data: function () {
+            return {
+                window: window,
+                team: [
+                    {
+                        name: 'cryptofyre',
+                        link: 'https://github.com/cryptofyre',
+                        role: 'Developer',
+                        avatar: 'https://avatars.githubusercontent.com/u/33162551?v=4'
+                    },
+                    {
+                        name: 'Core',
+                        link: 'https://github.com/coredev-uk',
+                        role: 'Developer',
+                        avatar: 'https://avatars.githubusercontent.com/u/64542347?v=4'
+                    },
+                    {
+                        name: 'Quacksire',
+                        link: 'https://github.com/quacksire',
+                        role: 'Developer',
+                        avatar: 'https://avatars.githubusercontent.com/u/19170969?v=4'
+                    },
+                    {
+                        name: 'booploops',
+                        link: 'https://github.com/booploops',
+                        role: 'Developer',
+                        avatar: 'https://avatars.githubusercontent.com/u/49113086?v=4'
+                    },
+                    {
+                        name: 'vapormusic',
+                        link: 'https://github.com/vapormusic',
+                        role: 'Developer',
+                        avatar: 'https://avatars.githubusercontent.com/u/27716185?v=4'
+                    },
+                    {
+                        name: 'Void',
+                        link: 'https://twitter.com/MoonyVoid',
+                        role: 'Social Team',
+                        avatar: 'https://pbs.twimg.com/profile_images/1226463559472816129/8LScNYED_400x400.jpg'
+                    },
+                    {
+                        name: 'NoseySG',
+                        link: 'https://twitter.com/noah_grose',
+                        role: 'Social Team',
+                        avatar: 'https://pbs.twimg.com/profile_images/1422541289837535239/qg-aaoP9_400x400.jpg'
+                    }
+                ]
+            }
+        },
         methods: {
 
         }