From f983c78d173322c080c7a8805fc8da436dc4e4d0 Mon Sep 17 00:00:00 2001
From: Samuel Mannehed <samuel@cendio.se>
Date: Wed, 14 Dec 2022 13:28:27 +0100
Subject: [PATCH] Make connect button a regular <button>

It is a button, let the HTML element reflect that. And instead of
having the outer div being clickable, lets only make the inner one
work like a button. Because of that, this commit renames the outer div
to "connect_box" instead of "connect_button".

Note that we remove the disabled :hover-effect for touch on this button.
It doesn't make much difference since this button is one of a kind.
---
 app/styles/base.css | 27 ++++++++++++---------------
 app/ui.js           |  3 ++-
 vnc.html            |  4 ++--
 3 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/app/styles/base.css b/app/styles/base.css
index 402454cb..b20ed2b3 100644
--- a/app/styles/base.css
+++ b/app/styles/base.css
@@ -725,12 +725,9 @@ html {
     font-size: calc(25vw - 30px);
   }
 }
-#noVNC_connect_button {
-  cursor: pointer;
+#noVNC_connect_box {
+  padding: 12px;
 
-  padding: 10px;
-
-  color: white;
   background-color: rgb(110, 132, 163);
   border-radius: 12px;
 
@@ -739,26 +736,26 @@ html {
 
   box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.5);
 }
-#noVNC_connect_button div {
-  margin: 2px;
+#noVNC_connect_box button {
+  width: 100%;
   padding: 5px 30px;
-  border: 1px solid rgb(83, 99, 122);
-  border-bottom-width: 2px;
+
+  cursor: pointer;
+
+  border-color: rgb(83, 99, 122);
   border-radius: 5px;
+
   background: linear-gradient(to top, rgb(110, 132, 163), rgb(99, 119, 147));
+  color: white;
 
   /* This avoids it jumping around when :active */
   vertical-align: middle;
 }
-#noVNC_connect_button div:active {
-  border-bottom-width: 1px;
-  margin-top: 3px;
-}
-:root:not(.noVNC_touch) #noVNC_connect_button div:hover {
+#noVNC_connect_box button:hover {
   background: linear-gradient(to top, rgb(110, 132, 163), rgb(105, 125, 155));
 }
 
-#noVNC_connect_button img {
+#noVNC_connect_box img {
   vertical-align: bottom;
   height: 1.3em;
 }
diff --git a/app/ui.js b/app/ui.js
index 92541206..3eb02cbc 100644
--- a/app/ui.js
+++ b/app/ui.js
@@ -319,7 +319,8 @@ const UI = {
     addConnectionControlHandlers() {
         document.getElementById("noVNC_disconnect_button")
             .addEventListener('click', UI.disconnect);
-        document.getElementById("noVNC_connect_button")
+        document.getElementById("noVNC_connect_box")
+            .getElementsByTagName('button')[0]
             .addEventListener('click', UI.connect);
         document.getElementById("noVNC_cancel_reconnect_button")
             .addEventListener('click', UI.cancelReconnect);
diff --git a/vnc.html b/vnc.html
index 0d1c7d1b..8fbe1eb2 100644
--- a/vnc.html
+++ b/vnc.html
@@ -274,9 +274,9 @@
     <div class="noVNC_center">
         <div id="noVNC_connect_dlg">
             <div class="noVNC_logo" translate="no"><span>no</span>VNC</div>
-            <div id="noVNC_connect_button"><div>
+            <div id="noVNC_connect_box"><button>
                 <img alt="" src="app/images/connect.svg"> Connect
-            </div></div>
+            </button></div>
         </div>
     </div>