From 555b6929e40f4b343ea4914cfcaddd071b93c4e4 Mon Sep 17 00:00:00 2001
From: James Read <contact@jread.com>
Date: Tue, 5 Mar 2024 14:53:50 +0000
Subject: [PATCH] feature: Rounded buttons... because apparently they look
 modern?! (#239)

* feature: Rounded buttons... because apparently they look modern?!

* bugfix: Logo in readme
---
 webui.dev/index.html         |  3 +--
 webui.dev/js/ActionButton.js |  2 ++
 webui.dev/style.css          | 11 +----------
 3 files changed, 4 insertions(+), 12 deletions(-)

diff --git a/webui.dev/index.html b/webui.dev/index.html
index db6c90b..f35f244 100644
--- a/webui.dev/index.html
+++ b/webui.dev/index.html
@@ -153,8 +153,7 @@
 				<span class = "title">Untitled Button</span>
 			</button>
 
-			<div class = "action-button-footer">
-			</div>
+			<div class = "action-button-footer" hidden></div>
 		</template>
 
 		<template id = "tplLogRow">
diff --git a/webui.dev/js/ActionButton.js b/webui.dev/js/ActionButton.js
index 393017c..fad6ca9 100644
--- a/webui.dev/js/ActionButton.js
+++ b/webui.dev/js/ActionButton.js
@@ -129,6 +129,8 @@ class ActionButton extends ExecutionFeedbackButton {
     if (this.popupOnStart === 'execution-button') {
       const btnExecution = document.createElement('execution-button')
       btnExecution.constructFromJson(executionTrackingId)
+      this.querySelector('.action-button-footer').hidden = false
+      this.querySelector('.action-button-footer').style.display = 'flex'
       this.querySelector('.action-button-footer').prepend(btnExecution)
 
       return
diff --git a/webui.dev/style.css b/webui.dev/style.css
index 210e3b2..7b60860 100644
--- a/webui.dev/style.css
+++ b/webui.dev/style.css
@@ -252,6 +252,7 @@ action-button button {
   flex-grow: 1;
   width: 100%;
   z-index: 2;
+  border-radius: .7em;
 }
 
 action-button details {
@@ -271,14 +272,8 @@ action-button details summary div span:first-child {
 }
 
 .action-button-footer {
-  display: flex;
   text-align: left;
   font-size: smaller;
-  background-color: #efefef;
-  border-top: 0;
-  border-left: 1px solid #666;
-  border-right: 1px solid #666;
-  border-bottom: 1px solid #666;
   overflow: auto;
 }
 
@@ -544,10 +539,6 @@ div.toolbar * {
     color: white;
   }
 
-  .action-button-footer {
-    background-color: #111;
-  }
-
   button:disabled {
     background-color: black;
   }