From acf89f3fa56da97ba6ca39a7f6a00acb5608b541 Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Fri, 23 Aug 2024 18:35:27 -0400
Subject: [PATCH] Style clean up

---
 src/lib/element_access_type.svelte | 23 ++++++++++++++++-------
 src/routes/+page.svelte            |  4 ++--
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/lib/element_access_type.svelte b/src/lib/element_access_type.svelte
index fd1ed9b3..1062b54a 100644
--- a/src/lib/element_access_type.svelte
+++ b/src/lib/element_access_type.svelte
@@ -174,7 +174,7 @@ function dispatch_edit_mode_changed() {
 </script>
 
 
-<section id="AE-Quick-Access-Type" class="ae_access_type bg-surface-100 text-surface-800 transition duration-300 delay-150 hover:delay-1000 hover:ease-out hover:transition-all hidden-print flex flex-col items-end gap-1">
+<section id="AE-Quick-Access-Type" class="ae_access_type bg-surface-100 text-surface-800 transition duration-300 delay-150 hover:delay-1000 hover:ease-out transition-all hover:transition-all hidden-print flex flex-col items-end gap-1">
 
 
     <!-- Show list of authorized sessions and presentations for a user -->
@@ -200,7 +200,7 @@ function dispatch_edit_mode_changed() {
                     $ae_loc.edit_mode = false;
                     dispatch_edit_mode_changed();
                 }}
-                class="btn btn-sm variant-soft-success"
+                class="btn btn-sm variant-ghost-success hover:variant-filled-success"
                 >
                 <span class="fas fa-toggle-on mx-1"></span>
                 Edit Mode On
@@ -211,7 +211,7 @@ function dispatch_edit_mode_changed() {
                     $ae_loc.edit_mode = true;
                     dispatch_edit_mode_changed();
                 }}
-                class="btn btn-sm variant-soft-warning"
+                class="btn btn-sm variant-ghost-warning hover:variant-filled-warning"
                 >
                 <span class="fas fa-toggle-off mx-1"></span>
                 Edit Mode?
@@ -247,17 +247,17 @@ function dispatch_edit_mode_changed() {
         {/if}
 
         <button
-            class="btn btn-sm variant-soft-warning access_type_lock_btn hover:transition-all"
+            class="btn btn-sm variant-ghost-success hover:variant-filled-success access_type_lock_btn transition-all hover:transition-all"
             on:click={() => {
                 handle_clear_access();
             }}
             title="Access mode is currently enabled/unlocked. Click to exit and lock."
             >
-            <span class="fas fa-lock mx-1"></span> Lock
+            <span class="fas fa-lock mx-1"></span> Lock?
         </button>
     {:else}
         <button
-            class="btn btn-sm variant-soft-success access_type_unlock_btn hover:transition-all"
+            class="btn btn-sm variant-glass-success hover:variant-filled-warning access_type_unlock_btn transition-all hover:transition-all"
             on:click={async () => {
                 show_passcode_input = !show_passcode_input;
                 await tick();
@@ -266,7 +266,8 @@ function dispatch_edit_mode_changed() {
             }}
             title="Anonymous public access is currently set. Access mode is disabled/locked."
             >
-            <span class="fas fa-lock"></span>
+            <span class="fas fa-lock mx-1 lock_icon"></span>
+            <span class="fas fa-unlock mx-1 unlock_icon hidden"></span>
             <span class="unlock_text">Unlock?</span>
         </button>
 
@@ -345,6 +346,14 @@ function dispatch_edit_mode_changed() {
 } */
 /* END: Svelte Access Type component  */
 
+.access_type_unlock_btn:hover .lock_icon {
+    display: none;
+}
+
+.access_type_unlock_btn:hover .unlock_icon {
+    display: initial;
+}
+
 .access_type_unlock_btn .unlock_text {
     display: none;
 }
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 64ad81b8..d6e95cdb 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -59,7 +59,7 @@ onMount(() => {
 
 <div data-sveltekit-preload-data="false" class="">
 <button
-	class="btn btn-sm m-1 variant-soft text-error-300 hover:text-error-800"
+	class="btn btn-sm m-1 variant-glass-surface hover:variant-outline-warning text-error-300 hover:text-error-800"
 	title="Reload and clear the page cache"
 	on:click={() => {
 		window.location.reload(true);
@@ -69,7 +69,7 @@ onMount(() => {
 	Reload and Clear Cache
 </button>
 <button
-	class="btn btn-sm m-1 variant-soft text-error-300 hover:text-error-800"
+	class="btn btn-sm m-1 variant-glass-surface hover:variant-outline-warning text-error-300 hover:text-error-800"
 	title="Clear the browser storage for this page"
 	on:click={() => {
 		localStorage.clear();