From e43a67464cf9045a4b2a4a85eeeb3611fa6a0134 Mon Sep 17 00:00:00 2001
From: RD WebDesign <github@rdwebdesign.com.br>
Date: Mon, 16 Oct 2023 01:39:45 -0300
Subject: [PATCH] Design changes on the API page

- apply the same color to every button and add hover effect;
- change header and fotter background;
- use display:flex on header and footer to better fit items;
- separate theme buttons from style buttons (on the footer);
- keeping visible outline to help navigation for visual impaired users;
---
 src/api/docs/content/index.css  | 53 +++++++++++++++++++++++++++++----
 src/api/docs/content/index.html | 32 +++++++++++---------
 2 files changed, 65 insertions(+), 20 deletions(-)

diff --git a/src/api/docs/content/index.css b/src/api/docs/content/index.css
index 76e3c1aa..24a4e207 100644
--- a/src/api/docs/content/index.css
+++ b/src/api/docs/content/index.css
@@ -1,16 +1,13 @@
 
 .btn {
-  width: 90px;
-  height: 32px;
-  padding:2px;
+  padding: 6px 12px;
   font-size:13px;
-  background-color: #47AFE8;
+  background-color: var(--primary-color);
   color: #fff;
   border: none;
   margin: 0 2px;
   border-radius: 2px;
   cursor:pointer;
-  outline:none;
 }
 .btn.large {
   width: 120px;
@@ -29,4 +26,48 @@
 }
 .btn.red {
   background-color: #ff4500;
-}
\ No newline at end of file
+}
+
+.btn:hover {
+  background: #fff;
+  color: var(--primary-color);
+}
+
+.logo-slot {
+  padding: 10px 0 10px 16px;
+  width: 50px;
+}
+
+.header-slot {
+  margin: 0 15px 0 0;
+  width: 100%;
+  display: flex;
+  gap: 6px 32px;
+  flex-wrap: wrap;
+  justify-content: start;
+}
+.header-title {
+  font-weight: 700;
+  font-size: 32px;
+  line-height: 1;
+}
+
+.password-controls {
+  display: flex;
+  align-items: stretch;
+}
+
+.footer-slot {
+  margin:0;
+  padding:16px;
+  display: flex;
+  gap: 16px 36px;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  color:#fff;
+  text-align:center;
+  background-color:#222;
+}
+.footer-slot > div {
+  flex: 0 0 auto;
+}
diff --git a/src/api/docs/content/index.html b/src/api/docs/content/index.html
index 73a2512d..9eefd339 100644
--- a/src/api/docs/content/index.html
+++ b/src/api/docs/content/index.html
@@ -36,27 +36,31 @@
           schema-style = "tree"
           render-style = "view"
           primary-color = "#2d87e2"
-          header-color = "#2d87e2"
+          header-color = "#222"
           api-key-name = "sid"
           api-key-location = "header"
           api-key-value = "-"
           show-method-in-nav-bar="as-colored-block"
           allow-search = "false">
-            <img slot="logo" style="padding-left: 10px;" src="images/logo.svg" width="40px" />
-            <div slot='header' style="font-weight:700; font-size:32px">
-              <div>Pi-hole API Documentation</div>
-              <div>
-                <input id='loginpw' type='password' size="4">
-                <button class='btn' id='loginbtn' onclick='loginout()'>Login</button>
-              </div>
+            <img slot="logo" class="logo-slot" src="images/logo.svg">
+            <div slot="header" class="header-slot">
+                <div class="header-title">Pi-hole API Documentation</div>
+                <div class="password-controls">
+                    <input id="loginpw" type="password" placeholder="password">
+                    <button class="btn" id="loginbtn" onclick="loginout()">Login</button>
+                </div>
             </div>
             <!-- content at the bottom -->
-            <div slot="footer" style="margin:0; padding:16px 36px; background-color:#2d87e2; color:#fff; text-align:center;">
-                <button class='btn' onclick="document.getElementById('thedoc').setAttribute('theme', 'dark')" >Dark Theme</button>
-                <button class='btn' onclick="document.getElementById('thedoc').setAttribute('theme', 'light')" >Light Theme</button>
-                <button class='btn large' onclick="setStyle('view')" >Default</button>
-                <button class='btn large' onclick="setStyle('read')" >Reader</button>
-                <button class='btn large' onclick="setStyle('focused')" >Focused reader</button>
+            <div slot="footer" class="footer-slot">
+                <div>
+                    <button onclick="document.getElementById('thedoc').setAttribute('theme', 'dark')" class="btn">Dark Theme</button>
+                    <button onclick="document.getElementById('thedoc').setAttribute('theme', 'light')" class="btn">Light Theme</button>
+                </div>
+                <div>
+                    <button onclick="setStyle('view')" class="btn">Default</button>
+                    <button onclick="setStyle('read')" class="btn">Reader</button>
+                    <button onclick="setStyle('focused')" class="btn">Focused reader</button>
+                </div>
             </div>
         </rapi-doc>
     </body>