Add twitter social button for some developers in about page (#1232)

src/renderer/less/pages.less

@@ -1113,6 +1113,19 @@
       right: 28px;
     }
 
+    .social-btn {
+      border-radius: 100%;
+      background: transparent;
+      height: 17px;
+      border: 0px;
+      cursor: pointer;
+      z-index: 69;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding-left: 100px;
+    }
+
     .animated {
       width: 100%;
       height: 100%;

src/renderer/style.css

@@ -13893,6 +13893,18 @@ input[type=checkbox][switch]:checked:active::before {
   bottom: 82px;
   right: 28px;
 }
+.artist-page .artist-header .social-btn {
+  border-radius: 100%;
+  background: transparent;
+  height: 17px;
+  border: 0px;
+  cursor: pointer;
+  z-index: 69;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-left: 100px;
+}
 .artist-page .artist-header .animated {
   width: 100%;
   height: 100%;
@@ -16318,6 +16330,18 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   background: #eee;
   --url: url("./views/svg/more.svg");
 }
+.social-btn {
+  border-radius: 100%;
+  background: transparent;
+  height: 17px;
+  border: 0px;
+  cursor: pointer;
+  z-index: 69;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-left: 100px;
+}
 .about-page .teamBtn {
   display: flex;
   align-items: center;
@@ -17782,6 +17806,7 @@ body.no-gpu .lyric-line:hover::after {
 }
 .moreinfo-modal .modal-window .modal-content {
   height: max-content !important;
+  padding-block: 25px;
 }
 .equalizer-panel .modal-window {
   height: 330px;

src/renderer/style.less

@@ -1885,6 +1885,19 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   }
 }
 
+.social-btn {
+  border-radius: 100%;
+  background: transparent;
+  height: 17px;
+  border: 0px;
+  cursor: pointer;
+  z-index: 69;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-left: 100px;
+}
+
 .about-page {
   .teamBtn {
     display: flex;

src/renderer/views/pages/about.ejs

@@ -25,17 +25,22 @@
                 <div class="row">
                     <div class="col">
                         <h3>{{$root.getLz('term.ciderTeam')}}</h3>
-                        <button class="md-btn teamBtn" @click="window.open(member.link)" v-for="member in team">
+                        <div class="md-btn teamBtn" v-for="member in team">
                             <img :src="member.avatar"/>
                             <div class="row" style="width:100%;">
-                                <div class="col" style="text-align: left">
+                                <div class="col" @click="window.open(member.link)" style="text-align: left; cursor: pointer;">
                                     {{ member.name }}
                                 </div>
+                                <div class="col" style="text-align: right">
+                                    <button @click="window.open(member.twitter)" class="social-btn" v-if="member.twitter">
+                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="white" style=""><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"></path></svg>
+                                    </button>
+                                </div>
                                 <div class="col-auto">
                                     <b>{{ member.role }}</b>
                                 </div>
                             </div>
-                        </button>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -64,25 +69,29 @@
                         name: 'cryptofyre',
                         link: 'https://github.com/cryptofyre',
                         role: app.getLz('term.developer'),
-                        avatar: 'https://avatars.githubusercontent.com/u/33162551?v=4'
+                        avatar: 'https://avatars.githubusercontent.com/u/33162551?v=4',
+                        twitter: 'https://twitter.com/cryptofyre'
                     },
                     {
                         name: 'Core',
                         link: 'https://github.com/coredev-uk',
                         role: app.getLz('term.developer'),
-                        avatar: 'https://avatars.githubusercontent.com/u/64542347?v=4'
+                        avatar: 'https://avatars.githubusercontent.com/u/64542347?v=4',
+                        twitter: 'https://twitter.com/core_hdd'
                     },
                     {
                         name: 'Quacksire',
                         link: 'https://github.com/quacksire',
                         role: app.getLz('term.developer'),
-                        avatar: 'https://avatars.githubusercontent.com/u/19170969?v=4'
+                        avatar: 'https://avatars.githubusercontent.com/u/19170969?v=4',
+                        twitter: 'https://twitter.com/duckdoquack'
                     },
                     {
                         name: 'booploops',
                         link: 'https://github.com/booploops',
                         role: app.getLz('term.developer'),
-                        avatar: 'https://avatars.githubusercontent.com/u/49113086?v=4'
+                        avatar: 'https://avatars.githubusercontent.com/u/49113086?v=4',
+                        twitter: 'https://twitter.com/boopl00ps'
                     },
                     {
                         name: 'vapormusic',
@@ -100,7 +109,8 @@
                         name: 'Maikiwi',
                         link: 'https://github.com/maikirakiwi',
                         role: app.getLz('term.developer'),
-                        avatar: 'https://avatars.githubusercontent.com/u/74925636?v=4'
+                        avatar: 'https://avatars.githubusercontent.com/u/74925636?v=4',
+                        twitter: 'https://twitter.com/notmaikiwi'
                     },
                     {
                         name: 'yazninja',