From 05baf14256a4640e15cda63cc2ac576f44482775 Mon Sep 17 00:00:00 2001
From: Samuel Mannehed <samuel@cendio.se>
Date: Thu, 15 Dec 2022 10:41:00 +0100
Subject: [PATCH] Remove outer div from noVNC_connect_button

Instead of having an outer "box", we can use an outline on the button
itself to create this "platform". Since the outline isn't part of the
size of the element, it will appear wider than before, when compared to
the logo. To counteract that we remove the left and right padding from
the logo to make the entire noVNC_connect_dlg more narrow.

We also had to slightly adjust the :active style since we don't want the
entire "platform" to move when the button is clicked.
---
 app/styles/base.css | 22 ++++++++++------------
 app/ui.js           |  3 +--
 vnc.html            |  4 ++--
 3 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/app/styles/base.css b/app/styles/base.css
index d47ad1f3..1c184151 100644
--- a/app/styles/base.css
+++ b/app/styles/base.css
@@ -714,7 +714,7 @@ html {
 }
 #noVNC_connect_dlg .noVNC_logo {
   transition: 0.5s ease-in-out;
-  padding: 10px;
+  padding: 10px 0;
   margin-bottom: 10px;
 
   font-size: 80px;
@@ -730,25 +730,20 @@ html {
     font-size: calc(25vw - 30px);
   }
 }
-#noVNC_connect_box {
-  padding: 12px;
-
-  background-color: rgb(110, 132, 163);
-  border-radius: 12px;
-
+#noVNC_connect_button {
   text-align: center;
   font-size: 20px;
 
-  box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.5);
-}
-#noVNC_connect_box button {
   width: 100%;
   padding: 5px 30px;
+  margin-top: 12px;
 
   cursor: pointer;
 
   border-color: rgb(83, 99, 122);
   border-radius: 5px;
+  outline: 12px solid rgb(110, 132, 163);
+  box-shadow: 6px 6px 0px 12px rgba(0, 0, 0, 0.5);
 
   background: linear-gradient(to top, rgb(110, 132, 163), rgb(99, 119, 147));
   color: white;
@@ -756,11 +751,14 @@ html {
   /* This avoids it jumping around when :active */
   vertical-align: middle;
 }
-#noVNC_connect_box button:hover {
+#noVNC_connect_button:hover {
   background: linear-gradient(to top, rgb(110, 132, 163), rgb(105, 125, 155));
 }
+#noVNC_connect_button:active {
+  border-top-width: 2px;
+}
 
-#noVNC_connect_box img {
+#noVNC_connect_button img {
   vertical-align: bottom;
   height: 1.3em;
 }
diff --git a/app/ui.js b/app/ui.js
index ec508e3f..ff0f1760 100644
--- a/app/ui.js
+++ b/app/ui.js
@@ -318,8 +318,7 @@ const UI = {
     addConnectionControlHandlers() {
         document.getElementById("noVNC_disconnect_button")
             .addEventListener('click', UI.disconnect);
-        document.getElementById("noVNC_connect_box")
-            .getElementsByTagName('button')[0]
+        document.getElementById("noVNC_connect_button")
             .addEventListener('click', UI.connect);
         document.getElementById("noVNC_cancel_reconnect_button")
             .addEventListener('click', UI.cancelReconnect);
diff --git a/vnc.html b/vnc.html
index 8fbe1eb2..2458b437 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_box"><button>
+            <button id="noVNC_connect_button">
                 <img alt="" src="app/images/connect.svg"> Connect
-            </button></div>
+            </button>
         </div>
     </div>