From e28cfabbcc4fe52469ff36cb40669a434fa1000e Mon Sep 17 00:00:00 2001
From: Bastard Operator <bofh@nogafam.es>
Date: Sun, 10 Jan 2021 01:26:29 +0100
Subject: [PATCH] Change div to button on Meet actions cuz bugs on mobile

---
 src/routes/_layout.html    | 10 +++++-----
 src/scss/themes/ozark.scss | 23 ++++++++++++-----------
 2 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/src/routes/_layout.html b/src/routes/_layout.html
index 1792391c..32b2c3f3 100644
--- a/src/routes/_layout.html
+++ b/src/routes/_layout.html
@@ -18,19 +18,19 @@
     <div id="account-actions">
       <div class="container">
         <div class="item">
-          <div class="btn-do reload" onclick="window.location.reload(true)"><SvgIcon href="#fa-refresh"/></div>
+          <button class="btn-do reload" onclick="window.location.reload(true)"><SvgIcon href="#fa-refresh"/></button>
         </div>
         <div class="item">
-          <div class="btn-do nope" onclick="window.fediloveUI.onAccountNope()"><SvgIcon href="#fa-close"/></div>
+          <button class="btn-do nope" onclick="window.fediloveUI.onAccountNope()"><SvgIcon href="#fa-close"/></button>
         </div>
         <div class="item">
-          <div class="btn-do maybe" onclick="window.fediloveUI.onAccountMaybe()"><SvgIcon href="#fa-question"/></div>
+          <button class="btn-do maybe" onclick="window.fediloveUI.onAccountMaybe()"><SvgIcon href="#fa-question"/></button>
         </div>
         <div class="item">
-          <div class="btn-do match" onclick="window.fediloveUI.onAccountMatch()"><SvgIcon href="#fa-heart"/></div>
+          <button class="btn-do match" onclick="window.fediloveUI.onAccountMatch()"><SvgIcon href="#fa-heart"/></button>
         </div>
         <div class="item">
-          <div class="btn-do report" onclick="window.fediloveApi.reportViewingAccount()"><SvgIcon href="#fa-warning"/></div>
+          <button class="btn-do report" onclick="window.fediloveApi.reportViewingAccount()"><SvgIcon href="#fa-warning"/></button>
         </div>
       </div>
     </div>
diff --git a/src/scss/themes/ozark.scss b/src/scss/themes/ozark.scss
index cd3f6bc3..6a5a2fd2 100644
--- a/src/scss/themes/ozark.scss
+++ b/src/scss/themes/ozark.scss
@@ -152,7 +152,7 @@ body.meet, body.account {
   overflow: hidden;
 
   div#sapper, div.virtual-list, main.infinite-scroll-page {
-    background: #000 !important;
+    background: #222 !important;
   }
 
   div#meet-navigation {
@@ -214,15 +214,16 @@ body.meet, body.account {
             display: flex;
             width: 100%;
 
-            div.btn-do {
+            button.btn-do {
               background: #fff;
               border-radius: 50%;
-              border: 3px solid #fbfbfb;
-              box-shadow: 0px 0px 1em #c1c1c1;
+              border: 3px solid #fbfbfb !important;
+              box-shadow: 0px 0px .6em #c1c1c1;
               width: 4em;
               height: 4em;
               display: flex;
               margin: auto;
+              padding: 0;
               cursor: pointer;
               svg {
                 width: 2em;
@@ -231,14 +232,14 @@ body.meet, body.account {
                 position: relative;
               }
             }
-            div.btn-do.nope > svg {
+            button.btn-do.nope > svg {
               fill: red;
               top: -1px;
             }
-            div.btn-do.match > svg {
+            button.btn-do.match > svg {
               fill: #01bb30;
             }
-            div.btn-do.maybe {
+            button.btn-do.maybe {
               width: 3.2em !important;
               height: 3.2em !important;
               svg {
@@ -246,7 +247,7 @@ body.meet, body.account {
                 left: -1px;
               }
             }
-            div.btn-do.reload {
+            button.btn-do.reload {
               position: relative;
               left: -1px;
               width: 2.8em !important;
@@ -257,7 +258,7 @@ body.meet, body.account {
                 fill: #515151;
               }
             }
-            div.btn-do.report {
+            button.btn-do.report {
               position: relative;
               left: 1px;
               width: 2.8em !important;
@@ -270,8 +271,8 @@ body.meet, body.account {
                 fill: #dbb72a;
               }
             }
-            div.btn-do:focus, div.btn-do:active {
-              background: #ccc !important;
+            button.btn-do:focus, button.btn-do:active {
+              background-image: linear-gradient(white, #9b9b9b) !important;
             }
 
           }