Improved icons on account actions

bin/svgs.js

@@ -2,6 +2,9 @@ module.exports = [
   { id: 'pinafore-logo', src: 'src/static/sailboat.svg', inline: true },
   { id: 'fa-bell', src: 'src/thirdparty/font-awesome-svg-png/white/svg/bell.svg', inline: true },
   { id: 'fa-asterisk', src: 'src/thirdparty/font-awesome-svg-png/white/svg/asterisk.svg', inline: true },
+  { id: 'fa-close', src: 'src/thirdparty/font-awesome-svg-png/white/svg/close.svg', inline: true },
+  { id: 'fa-question', src: 'src/thirdparty/font-awesome-svg-png/white/svg/question.svg', inline: true },
+  { id: 'fa-heart', src: 'src/thirdparty/font-awesome-svg-png/white/svg/heart.svg', inline: true },
   { id: 'fa-users', src: 'src/thirdparty/font-awesome-svg-png/white/svg/users.svg', inline: true },
   { id: 'fa-globe', src: 'src/thirdparty/font-awesome-svg-png/white/svg/globe.svg' },
   { id: 'fa-gear', src: 'src/thirdparty/font-awesome-svg-png/white/svg/gear.svg', inline: true },

src/routes/_layout.html

@@ -18,19 +18,13 @@
     <div id="account-actions">
       <div class="container">
         <div class="item">
-          <div class="btn-do">
+          <div class="btn-do nope" onclick="window.fediloveUI.onAccountNope()"><SvgIcon href="#fa-close"/></div>
-            <button>NOPE</button>
-          </div>
         </div>
         <div class="item">
-          <div class="btn-do">
+          <div class="btn-do match" onclick="window.fediloveUI.onAccountMatch()"><SvgIcon href="#fa-heart"/></div>
-            <button>MAYBE</button>
-          </div>
         </div>
         <div class="item">
-          <div class="btn-do">
+          <div class="btn-do maybe" onclick="window.fediloveUI.onAccountMaybe()"><SvgIcon href="#fa-question"/></div>
-            <button>YES!</button>
-          </div>
         </div>
       </div>
     </div>
@@ -86,7 +80,8 @@
     components: {
       Nav: './_components/Nav.html',
       InformationalFooter: './_components/InformationalFooter.html',
-      IconButton: './_components/IconButton.html'
+      IconButton: './_components/IconButton.html',
+      SvgIcon: './_components/SvgIcon.html'
     },
     oncreate () {
       if (process.browser && process.env.NODE_ENV !== 'production') {

src/scss/themes/ozark.scss

@@ -206,21 +206,54 @@ body.meet, body.account {
         z-index: 2;
 
         div.container {
-          background: red;
           display: flex;
           max-width: 50em;
           margin: auto;
-        }
 
-        div.item {
+          div.item {
-          display: flex;
+            display: flex;
-          width: 100%;
+            width: 100%;
+
+            div.btn-do {
+              background: #fff;
+              border-radius: 50%;
+              border: 3px solid #fbfbfb;
+              box-shadow: 0px 0px 1em #c1c1c1;
+              width: 4.5em;
+              height: 4.5em;
+              display: flex;
+              margin: auto;
+              cursor: pointer;
+              svg {
+                width: 2.4em;
+                height: 2.4em;
+                margin: auto;
+                position: relative;
+              }
+            }
+            div.btn-do.nope > svg {
+              fill: red;
+              top: -1px;
+            }
+            div.btn-do.match {
+              width: 4.2em !important;
+              height: 4.2em !important;
+              svg { fill: #01bb30; }
+            }
+            div.btn-do.maybe > svg {
+              fill: #048eb9;
+              width: 3em;
+              height: 3em;
+              left: -1px;
+            }
+            div.btn-do:focus, div.btn-do:active {
+              background: #ccc !important;
+            }
 
-          div.btn-do {
-            margin: auto;
-            /*button { width: 0; height: 0; }*/
           }
+
         }
+
       }
 
       div#prev, div#next {

static/fedilove-no-react.js

@@ -218,7 +218,10 @@ var fediloveUI = {
         $('div#chat-party-global > div#name > a > span').html(name);
         $('div#chat-party-global > div#name > span').text(acct);
         if (accid != 0) $('div#chat-party-global > div#name > a').attr('href', `/accounts/${accid}`);
-    }
+    },
+    onAccountNope: function() {},
+    onAccountMatch: function() {},
+    onAccountMaybe: function() {}
 };
 
 // objects to access from React code
@@ -537,7 +540,7 @@ function fedilove_customization() {
                     if ($(selector)[0] !== undefined)
                         $(selector)[0].src = window.fediloveData.currentAccount.header;
                 }
-            }, 300);
+            }, 100);
         };
         const _this = setInterval(function() {
 
@@ -571,6 +574,7 @@ function fedilove_customization() {
                 clearInterval(_this);
             }
             countmax++;
+
         }, 200);
     }
     else if (window.location.pathname == '/federated')