From fb6c728ae7e72f2dba69898534ab9f9455bcbb2b Mon Sep 17 00:00:00 2001
From: Chris Sexton <3216719+chrissexton@users.noreply.github.com>
Date: Wed, 28 Feb 2024 09:39:38 -0500
Subject: [PATCH] web: convert admin and secrets to foundation

---
 bot/web/index.templ              | 46 ++++++++++++--------------
 bot/web/index_templ.go           | 55 ++++++++++++++++++++------------
 bot/web/web.go                   |  4 +++
 plugins/admin/admin.templ        | 27 +++++++++-------
 plugins/admin/admin_templ.go     | 20 ++++++------
 plugins/secrets/secrets.templ    | 34 +++++++++++++-------
 plugins/secrets/secrets_templ.go |  8 ++---
 7 files changed, 111 insertions(+), 83 deletions(-)

diff --git a/bot/web/index.templ b/bot/web/index.templ
index cc1a606..2b7d336 100644
--- a/bot/web/index.templ
+++ b/bot/web/index.templ
@@ -2,8 +2,7 @@ package web
 
 templ (w *Web) Header(title string) {
     <head>
-        <!-- Load required Bootstrap and BootstrapVue CSS -->
-        <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
+        <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/foundation-sites@6.8.1/dist/css/foundation.min.css" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <meta charset="UTF-8" />
         if title != "" {
@@ -15,13 +14,14 @@ templ (w *Web) Header(title string) {
 }
 
 templ (w *Web) Footer() {
-    <script src="//unpkg.com/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="//unpkg.com/htmx.org@1.9.10" integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC" crossorigin="anonymous"></script>
+    <script src="//cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
+    <script src="//cdn.jsdelivr.net/npm/foundation-sites@6.8.1/dist/js/foundation.min.js"></script>
 }
 
 templ (w *Web) Index(title string, contents templ.Component) {
-    <!DOCTYPE html />
-    <html lang="en">
+    <!DOCTYPE html>
+    <html lang="en" class="no-js">
     @w.Header(title)
     <body>
 
@@ -37,25 +37,21 @@ templ (w *Web) Index(title string, contents templ.Component) {
 }
 
 templ (w *Web) Nav(currentPage string) {
-    <nav class="navbar navbar-expand-lg bg-body-tertiary">
-        <div class="container-fluid">
-            <a class="navbar-brand" href="/">catbase</a>
-            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
-                <span class="navbar-toggler-icon"></span>
-            </button>
-            <div class="collapse navbar-collapse" id="navbarNav">
-                <ul class="navbar-nav">
-                    for _, item := range w.GetWebNavigation() {
-                        <li class="nav-item">
-                            if currentPage == item.Name {
-                                <a class="nav-link active" aria-current="page" href={ templ.URL(item.URL) }>{ item.Name }</a>
-                            } else {
-                                <a class="nav-link" href={ templ.URL(item.URL) }>{ item.Name }</a>
-                            }
-                        </li>
-                    }
-                </ul>
-            </div>
+
+    <div class="top-bar">
+        <div class="top-bar-left">
+            <ul class="menu">
+                <li class="menu-text">{ w.botName() }</li>
+                for _, item := range w.GetWebNavigation() {
+                    <li>
+                        if currentPage == item.Name {
+                            <a class="is-active" aria-current="page" href={ templ.URL(item.URL) }>{ item.Name }</a>
+                        } else {
+                            <a href={ templ.URL(item.URL) }>{ item.Name }</a>
+                        }
+                    </li>
+                }
+            </ul>
         </div>
-    </nav>
+    </div>
 }
diff --git a/bot/web/index_templ.go b/bot/web/index_templ.go
index 1354ff7..f5d096a 100644
--- a/bot/web/index_templ.go
+++ b/bot/web/index_templ.go
@@ -23,7 +23,7 @@ func (w *Web) Header(title string) templ.Component {
 			templ_7745c5c3_Var1 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<head><!-- Load required Bootstrap and BootstrapVue CSS --><link type=\"text/css\" rel=\"stylesheet\" href=\"//unpkg.com/bootstrap/dist/css/bootstrap.min.css\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"><meta charset=\"UTF-8\">")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<head><link rel=\"stylesheet\" href=\"//cdn.jsdelivr.net/npm/foundation-sites@6.8.1/dist/css/foundation.min.css\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"><meta charset=\"UTF-8\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -35,7 +35,7 @@ func (w *Web) Header(title string) templ.Component {
 			var templ_7745c5c3_Var2 string
 			templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(title)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `bot/web/index.templ`, Line: 9, Col: 36}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `bot/web/index.templ`, Line: 8, Col: 36}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
 			if templ_7745c5c3_Err != nil {
@@ -75,7 +75,7 @@ func (w *Web) Footer() templ.Component {
 			templ_7745c5c3_Var3 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<script src=\"//unpkg.com/bootstrap/dist/js/bootstrap.bundle.min.js\"></script><script src=\"//unpkg.com/htmx.org@1.9.10\" integrity=\"sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC\" crossorigin=\"anonymous\"></script>")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<script src=\"//unpkg.com/htmx.org@1.9.10\" integrity=\"sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC\" crossorigin=\"anonymous\"></script><script src=\"//cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js\"></script><script src=\"//cdn.jsdelivr.net/npm/foundation-sites@6.8.1/dist/js/foundation.min.js\"></script>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -99,7 +99,7 @@ func (w *Web) Index(title string, contents templ.Component) templ.Component {
 			templ_7745c5c3_Var4 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!doctype html /><html lang=\"en\">")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!doctype html><html lang=\"en\" class=\"no-js\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -149,22 +149,35 @@ func (w *Web) Nav(currentPage string) templ.Component {
 			templ_7745c5c3_Var5 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<nav class=\"navbar navbar-expand-lg bg-body-tertiary\"><div class=\"container-fluid\"><a class=\"navbar-brand\" href=\"/\">catbase</a> <button class=\"navbar-toggler\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarNav\" aria-controls=\"navbarNav\" aria-expanded=\"false\" aria-label=\"Toggle navigation\"><span class=\"navbar-toggler-icon\"></span></button><div class=\"collapse navbar-collapse\" id=\"navbarNav\"><ul class=\"navbar-nav\">")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"top-bar\"><div class=\"top-bar-left\"><ul class=\"menu\"><li class=\"menu-text\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var6 string
+		templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(w.botName())
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `bot/web/index.templ`, Line: 43, Col: 51}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</li>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		for _, item := range w.GetWebNavigation() {
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<li class=\"nav-item\">")
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<li>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			if currentPage == item.Name {
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<a class=\"nav-link active\" aria-current=\"page\" href=\"")
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<a class=\"is-active\" aria-current=\"page\" href=\"")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				var templ_7745c5c3_Var6 templ.SafeURL = templ.URL(item.URL)
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(string(templ_7745c5c3_Var6)))
+				var templ_7745c5c3_Var7 templ.SafeURL = templ.URL(item.URL)
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(string(templ_7745c5c3_Var7)))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
@@ -172,12 +185,12 @@ func (w *Web) Nav(currentPage string) templ.Component {
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				var templ_7745c5c3_Var7 string
-				templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(item.Name)
+				var templ_7745c5c3_Var8 string
+				templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(item.Name)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `bot/web/index.templ`, Line: 50, Col: 119}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `bot/web/index.templ`, Line: 47, Col: 109}
 				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
@@ -186,12 +199,12 @@ func (w *Web) Nav(currentPage string) templ.Component {
 					return templ_7745c5c3_Err
 				}
 			} else {
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<a class=\"nav-link\" href=\"")
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<a href=\"")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				var templ_7745c5c3_Var8 templ.SafeURL = templ.URL(item.URL)
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(string(templ_7745c5c3_Var8)))
+				var templ_7745c5c3_Var9 templ.SafeURL = templ.URL(item.URL)
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(string(templ_7745c5c3_Var9)))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
@@ -199,12 +212,12 @@ func (w *Web) Nav(currentPage string) templ.Component {
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				var templ_7745c5c3_Var9 string
-				templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(item.Name)
+				var templ_7745c5c3_Var10 string
+				templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(item.Name)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `bot/web/index.templ`, Line: 52, Col: 92}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `bot/web/index.templ`, Line: 49, Col: 71}
 				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
@@ -218,7 +231,7 @@ func (w *Web) Nav(currentPage string) templ.Component {
 				return templ_7745c5c3_Err
 			}
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</ul></div></div></nav>")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</ul></div></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/bot/web/web.go b/bot/web/web.go
index 3819f15..31f5f75 100644
--- a/bot/web/web.go
+++ b/bot/web/web.go
@@ -103,3 +103,7 @@ func New(config *config.Config) *Web {
 	w.setupHTTP()
 	return w
 }
+
+func (ws *Web) botName() string {
+	return ws.config.Get("nick", "catbase")
+}
diff --git a/plugins/admin/admin.templ b/plugins/admin/admin.templ
index 83157f1..2626243 100644
--- a/plugins/admin/admin.templ
+++ b/plugins/admin/admin.templ
@@ -3,28 +3,31 @@ package admin
 import "fmt"
 
 templ (a *AdminPlugin) page() {
-    <div class="container">
+    <div class="grid-container">
         <form>
-        <div class="row">
-            <div class="col">
+        <div class="grid-x grid-margin-x align-bottom">
+            <h2>App Pass</h2>
+        </div>
+        <div class="grid-x grid-margin-x align-bottom">
+            <div class="cell auto">
                 <label for="password">Password:
                     <input type="text" name="password"></input>
                 </label>
             </div>
-            <div class="col">
+            <div class="cell auto">
                 <label for="secret">Secret:
                     <input type="text" name="secret"></input>
                 </label>
             </div>
-            <div class="col">
-                <button hx-post="/apppass/api" hx-target="#data" class="btn btn-primary">List</button>
-                <button hx-put="/apppass/api" hx-target="#data" class="btn btn-secondary">New</button>
+            <div class="cell auto">
+                <button hx-post="/apppass/api" hx-target="#data" class="button">List</button>
+                <button hx-put="/apppass/api" hx-target="#data" class="submit success button">New</button>
             </div>
         </div>
         </form>
 
-        <div class="row">
-            <div id="data"></div>
+        <div class="grid-x">
+            <div class="cell" id="data"></div>
         </div>
     </div>
 }
@@ -43,7 +46,8 @@ templ (a *AdminPlugin) entries(items []PassEntry) {
                 for _, entry := range items {
                     <li>
                         <button href="#"
-                            class="btn btn-danger"
+                            class="button alert tiny"
+                            style="vertical-align: baseline"
                             hx-delete="/apppass/api"
                             hx-confirm={ fmt.Sprintf("Are you sure you want to delete %d?", entry.ID) }
                             hx-target="#data"
@@ -62,7 +66,8 @@ templ renderError(err error) {
 
 templ vars(items []configEntry) {
         <div class="container">
-            <table class="table-responsive table-striped">
+            <h2>Variables</h2>
+            <table class="hover striped">
                 <thead>
                 <tr>
                     <th>Key</th>
diff --git a/plugins/admin/admin_templ.go b/plugins/admin/admin_templ.go
index fd1e50a..c4de530 100644
--- a/plugins/admin/admin_templ.go
+++ b/plugins/admin/admin_templ.go
@@ -25,7 +25,7 @@ func (a *AdminPlugin) page() templ.Component {
 			templ_7745c5c3_Var1 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"container\"><form><div class=\"row\"><div class=\"col\"><label for=\"password\">Password: <input type=\"text\" name=\"password\"></label></div><div class=\"col\"><label for=\"secret\">Secret: <input type=\"text\" name=\"secret\"></label></div><div class=\"col\"><button hx-post=\"/apppass/api\" hx-target=\"#data\" class=\"btn btn-primary\">List</button> <button hx-put=\"/apppass/api\" hx-target=\"#data\" class=\"btn btn-secondary\">New</button></div></div></form><div class=\"row\"><div id=\"data\"></div></div></div>")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"grid-container\"><form><div class=\"grid-x grid-margin-x align-bottom\"><h2>App Pass</h2></div><div class=\"grid-x grid-margin-x align-bottom\"><div class=\"cell auto\"><label for=\"password\">Password: <input type=\"text\" name=\"password\"></label></div><div class=\"cell auto\"><label for=\"secret\">Secret: <input type=\"text\" name=\"secret\"></label></div><div class=\"cell auto\"><button hx-post=\"/apppass/api\" hx-target=\"#data\" class=\"button\">List</button> <button hx-put=\"/apppass/api\" hx-target=\"#data\" class=\"submit success button\">New</button></div></div></form><div class=\"grid-x\"><div class=\"cell\" id=\"data\"></div></div></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -56,7 +56,7 @@ func (a *AdminPlugin) showPassword(entry PassEntry) templ.Component {
 		var templ_7745c5c3_Var3 string
 		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%d", entry.ID))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `plugins/admin/admin.templ`, Line: 32, Col: 59}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `plugins/admin/admin.templ`, Line: 35, Col: 59}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
 		if templ_7745c5c3_Err != nil {
@@ -69,7 +69,7 @@ func (a *AdminPlugin) showPassword(entry PassEntry) templ.Component {
 		var templ_7745c5c3_Var4 string
 		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(entry.Secret)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `plugins/admin/admin.templ`, Line: 33, Col: 50}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `plugins/admin/admin.templ`, Line: 36, Col: 50}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
 		if templ_7745c5c3_Err != nil {
@@ -82,7 +82,7 @@ func (a *AdminPlugin) showPassword(entry PassEntry) templ.Component {
 		var templ_7745c5c3_Var5 string
 		templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(entry.Pass)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `plugins/admin/admin.templ`, Line: 33, Col: 65}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `plugins/admin/admin.templ`, Line: 36, Col: 65}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
 		if templ_7745c5c3_Err != nil {
@@ -127,7 +127,7 @@ func (a *AdminPlugin) entries(items []PassEntry) templ.Component {
 			return templ_7745c5c3_Err
 		}
 		for _, entry := range items {
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<li><button href=\"#\" class=\"btn btn-danger\" hx-delete=\"/apppass/api\" hx-confirm=\"")
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<li><button href=\"#\" class=\"button alert tiny\" style=\"vertical-align: baseline\" hx-delete=\"/apppass/api\" hx-confirm=\"")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -150,7 +150,7 @@ func (a *AdminPlugin) entries(items []PassEntry) templ.Component {
 			var templ_7745c5c3_Var7 string
 			templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%d", entry.ID))
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `plugins/admin/admin.templ`, Line: 51, Col: 57}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `plugins/admin/admin.templ`, Line: 55, Col: 57}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
 			if templ_7745c5c3_Err != nil {
@@ -192,7 +192,7 @@ func renderError(err error) templ.Component {
 		var templ_7745c5c3_Var9 string
 		templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(err.Error())
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `plugins/admin/admin.templ`, Line: 59, Col: 22}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `plugins/admin/admin.templ`, Line: 63, Col: 22}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
 		if templ_7745c5c3_Err != nil {
@@ -222,7 +222,7 @@ func vars(items []configEntry) templ.Component {
 			templ_7745c5c3_Var10 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"container\"><table class=\"table-responsive table-striped\"><thead><tr><th>Key</th><th>Value</th></tr></thead> <tbody>")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"container\"><h2>Variables</h2><table class=\"hover striped\"><thead><tr><th>Key</th><th>Value</th></tr></thead> <tbody>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -234,7 +234,7 @@ func vars(items []configEntry) templ.Component {
 			var templ_7745c5c3_Var11 string
 			templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(item.Key)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `plugins/admin/admin.templ`, Line: 74, Col: 38}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `plugins/admin/admin.templ`, Line: 79, Col: 38}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
 			if templ_7745c5c3_Err != nil {
@@ -247,7 +247,7 @@ func vars(items []configEntry) templ.Component {
 			var templ_7745c5c3_Var12 string
 			templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(item.Value)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `plugins/admin/admin.templ`, Line: 74, Col: 61}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `plugins/admin/admin.templ`, Line: 79, Col: 61}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
 			if templ_7745c5c3_Err != nil {
diff --git a/plugins/secrets/secrets.templ b/plugins/secrets/secrets.templ
index 356d043..b687c2d 100644
--- a/plugins/secrets/secrets.templ
+++ b/plugins/secrets/secrets.templ
@@ -3,21 +3,30 @@ package secrets
 import "fmt"
 
 templ (s *SecretsPlugin) index() {
-    <div class="container">
+    <div class="grid-container">
             <form hx-post="/secrets/add" hx-target="#data">
-                <div class="row">
-                    <div class="col-3">
-                        <input placeholder="Key..." name="key" />
+                <div class="grid-x">
+                    <h2>Secrets</h2>
+                </div>
+                <div class="grid-x">
+                    <div class="cell auto">
+                        <div class="input-group">
+                            <span class="input-group-label">Key</span>
+                            <input class="input-group-field" placeholder="Key..." name="key" />
+                        </div>
                     </div>
-                    <div class="col-3">
-                        <input placeholder="Value..." name="value" />
-                    </div>
-                    <div class="col-3">
-                        <button class="btn btn-primary" type="submit">Add Secret</button>
+                    <div class="cell auto">
+                        <div class="input-group">
+                            <span class="input-group-label">Value</span>
+                            <input class="input-group-field" placeholder="Value..." name="value" />
+                            <div class="input-group-button">
+                                <button class="button primary" type="submit">Add Secret</button>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </form>
-            <div class="row" style="padding-top: 2em;">
+            <div class="grid-x grid-margin-x">
                 <div id="data">
                     @s.keysList()
                 </div>
@@ -26,11 +35,12 @@ templ (s *SecretsPlugin) index() {
 }
 
 templ (s *SecretsPlugin) keysList() {
-    <ul>
+    <ul class="no-bullet">
         for _, key := range s.keys() {
             <li>
             <button
-                class="btn btn-danger"
+                class="button tiny alert middle"
+                style="vertical-align: baseline"
                 hx-delete="/secrets/remove"
                 hx-confirm={ fmt.Sprintf("Are you sure you want to delete %s?", key) }
                 hx-target="#data"
diff --git a/plugins/secrets/secrets_templ.go b/plugins/secrets/secrets_templ.go
index a33eca5..e378c80 100644
--- a/plugins/secrets/secrets_templ.go
+++ b/plugins/secrets/secrets_templ.go
@@ -25,7 +25,7 @@ func (s *SecretsPlugin) index() templ.Component {
 			templ_7745c5c3_Var1 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"container\"><form hx-post=\"/secrets/add\" hx-target=\"#data\"><div class=\"row\"><div class=\"col-3\"><input placeholder=\"Key...\" name=\"key\"></div><div class=\"col-3\"><input placeholder=\"Value...\" name=\"value\"></div><div class=\"col-3\"><button class=\"btn btn-primary\" type=\"submit\">Add Secret</button></div></div></form><div class=\"row\" style=\"padding-top: 2em;\"><div id=\"data\">")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"grid-container\"><form hx-post=\"/secrets/add\" hx-target=\"#data\"><div class=\"grid-x\"><h2>Secrets</h2></div><div class=\"grid-x\"><div class=\"cell auto\"><div class=\"input-group\"><span class=\"input-group-label\">Key</span> <input class=\"input-group-field\" placeholder=\"Key...\" name=\"key\"></div></div><div class=\"cell auto\"><div class=\"input-group\"><span class=\"input-group-label\">Value</span> <input class=\"input-group-field\" placeholder=\"Value...\" name=\"value\"><div class=\"input-group-button\"><button class=\"button primary\" type=\"submit\">Add Secret</button></div></div></div></div></form><div class=\"grid-x grid-margin-x\"><div id=\"data\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -57,12 +57,12 @@ func (s *SecretsPlugin) keysList() templ.Component {
 			templ_7745c5c3_Var2 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<ul>")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<ul class=\"no-bullet\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		for _, key := range s.keys() {
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<li><button class=\"btn btn-danger\" hx-delete=\"/secrets/remove\" hx-confirm=\"")
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<li><button class=\"button tiny alert middle\" style=\"vertical-align: baseline\" hx-delete=\"/secrets/remove\" hx-confirm=\"")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -85,7 +85,7 @@ func (s *SecretsPlugin) keysList() templ.Component {
 			var templ_7745c5c3_Var3 string
 			templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(key)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `plugins/secrets/secrets.templ`, Line: 38, Col: 17}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `plugins/secrets/secrets.templ`, Line: 48, Col: 17}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
 			if templ_7745c5c3_Err != nil {