Lots of work on the new global app menu.

src/lib/ae_stores.ts

@@ -149,7 +149,7 @@ export let ae_app_local_data_struct: key_val = {
         show_element__header: false,
         show_element__footer: false,
         show_element__menu: false,
-        show_element__menu_btn: false,
+        show_element__menu_btn: true,
 
         show_element__access_type: true,
         show_element__cfg: true,

src/lib/element_access_type.svelte

@@ -20,19 +20,21 @@ import { events_loc } from '$lib/ae_events_stores';
 interface Props {
     log_lvl?: number;
     // data?: any;
+    show_passcode_input: boolean;
     hidden: null|boolean;
 }
 
 let {
     log_lvl = 0,
     // data = null,
+    show_passcode_input = false,
     hidden = true,
     }: Props = $props();
 
 
 let entered_passcode: null|string = $state(null);
 // let entered_passcode: null|string = '';
-let show_passcode_input: boolean = $state(false);
+// let show_passcode_input: boolean = $state(false);
 // let show_passcode_input: boolean = false;
 
 // let trigger: null|string|boolean = null;
@@ -219,17 +221,26 @@ function handle_clear_access() {
     class="
         ae_access_type
         hidden-print
-        bg-surface-100 text-surface-800
+        bg-red-100 text-gray-900
         duration-300 delay-150 hover:delay-1000 hover:ease-out
         transition-all hover:transition-all
         flex flex-col flex-wrap gap-1
         items-end justify-center
-        max-w-64
-
+        w-72 max-w-72
+        p-1 my-1
+        border-2 border-gray-200
         "
     class:hidden={hidden}
     >
 
+    <header
+        class:hidden={!$ae_sess.show__sign_in_out__fields}
+        class="ae_header w-64 "
+        >
+        <h2 class="text-sm text-center font-semibold">
+            Passcode
+        </h2>
+    </header>
 
     <!-- Show list of authorized sessions and presentations for a user -->
     <!-- {#if $ae_loc.access_type == 'administrator'}
@@ -363,7 +374,7 @@ function handle_clear_access() {
             onclick={() => {
                 handle_clear_access();
             }}
-            class="btn btn-sm variant-ghost-success hover:variant-filled-success access_type_lock_btn transition-all"
+            class="btn btn-sm variant-outline-surface hover:variant-ghost-warning transition-all"
             title="Access mode is currently enabled/unlocked. Click to exit and lock."
             >
             <span class="fas fa-lock mx-1"></span> Lock?

src/lib/element_app_cfg.svelte

@@ -96,15 +96,26 @@ function handle_clear_storage(item: null|string) {
     class="
         ae_app_cfg
         hidden-print
-        bg-surface-100 text-surface-800
+        bg-red-100 text-gray-900
         transition hover:transition-all
         flex flex-col flex-wrap gap-1
         items-center justify-center
-        max-w-72
-
+        w-72 max-w-72
+        p-1 my-1
+        border-2 border-gray-200
         "
     >
 
+    <header
+        class:hidden={!$ae_loc.app_cfg.show_element__cfg_detail}
+        class="ae_header w-64 "
+        >
+        <h2 class="text-sm text-center font-semibold">
+            Config
+        </h2>
+    </header>
+
+
 <div
     class="ae_cfg_content text-xs space-y-4 my-4"
     class:hidden={!$ae_loc.app_cfg.show_element__cfg_detail}

src/lib/element_sign_in_out.svelte

@@ -251,18 +251,19 @@ async function handle_change_password() {
     class="
         ae_sign_in_out
         hidden-print
-        bg-surface-100 text-surface-800
+        bg-red-100 text-gray-900
         transition-all duration-300 delay-150 hover:delay-1000 hover:ease-out hover:transition-all
         flex flex-col flex-wrap gap-1
-        items-center justify-center
-        max-w-64
-
+        items-end justify-center
+        w-72 max-w-72
+        p-1 my-1
+        border-2 border-gray-200
         "
     class:hidden={hidden}
     >
     <button
         type="button"
-        class="btn btn-sm variant-outline-surface hover:variant-filled-surface *:hover:inline"
+        class="btn btn-sm variant-outline-surface hover:variant-ghost-warning *:hover:inline w-full"
         title="Sign In"
         onclick={() => {
             $ae_sess.show__sign_in_out__fields = !$ae_sess.show__sign_in_out__fields; // Toggle the visibility of the sign-in form
@@ -295,9 +296,9 @@ async function handle_change_password() {
 
     <header
         class:hidden={!$ae_sess.show__sign_in_out__fields}
-        class="ae_header"
+        class="ae_header w-full "
         >
-        <h2 class="text-sm">
+        <h2 class="text-sm text-center font-semibold">
             {#if $ae_loc?.person_id && $ae_loc?.user_id}
                 <!-- <button
                     type="button"
@@ -325,7 +326,7 @@ async function handle_change_password() {
 
     <span
         class:hidden={!$ae_sess.show__sign_in_out__fields}
-        class="flex flex-col gap-1 transition-all"
+        class="flex flex-col gap-1 transition-all w-full"
         >
     {#if !$ae_loc?.person_id && !$ae_loc?.user_id}
 
@@ -333,9 +334,8 @@ async function handle_change_password() {
     <form
         class="
             ae_sign_in_form
-            flex flex-col gap-1 items-center justify-center
+            flex flex-col gap-1 items-end justify-center
             p-1 my-1
-            border-2 border-gray-200
             "
         onsubmit={async (e) => {
             e.preventDefault();
@@ -358,7 +358,7 @@ async function handle_change_password() {
             >
         <button
             type="submit"
-            class="btn btn-sm variant-filled-secondary"
+            class="btn btn-sm variant-ghost-secondary hover:variant-filled-secondary"
             title="Look up user by email and send sign in email"
             >
             <!-- <User class="mx-1" /> -->
@@ -372,9 +372,8 @@ async function handle_change_password() {
     <form
         class="
             ae_sign_in_form
-            flex flex-col gap-1 items-center
+            flex flex-col gap-1 items-end
             p-1 my-1
-            border-2 border-gray-200
             "
         onsubmit={async (e) => {
             e.preventDefault();
@@ -590,7 +589,7 @@ async function handle_change_password() {
 
         <button
             type="submit"
-            class="btn btn-sm variant-filled-secondary"
+            class="btn btn-sm variant-ghost-secondary hover:variant-filled-secondary"
             title="Sign in with username and password"
             >
             <!-- <LogIn class="mx-1" /> -->
@@ -606,7 +605,7 @@ async function handle_change_password() {
 
     {:else}
 
-    <div class="flex flex-col gap-1 items-center justify-center">
+    <div class="flex flex-col gap-1 items-end justify-center">
         <span class="text-sm text-gray-500">
             {$ae_loc?.user.username ?? '-- not set --'}
         </span>
@@ -615,7 +614,7 @@ async function handle_change_password() {
         {#if $ae_loc.edit_mode}
             <button
                 type="button"
-                class="btn btn-sm variant-filled-warning"
+                class="btn btn-sm variant-ghost-warning hover:variant-filled-warning"
                 title="Change Password"
                 onclick={() => {
                     $ae_sess.show__modal_change_password = true;
@@ -631,7 +630,7 @@ async function handle_change_password() {
         <!-- Display sign out option if the user is signed in -->
         <button
             type="button"
-            class="btn btn-sm variant-filled-warning"
+            class="btn btn-sm variant-ghost-warning hover:variant-filled-warning"
             title="Sign Out"
             onclick={async () => {
                 if (confirm('Are you sure you want to sign out?')) {