display tweaks and approval page timing

src/ui/Nav.svelte

@@ -7,7 +7,7 @@
 <nav class="fixed top-0 grid grid-cols-2 w-full p-2">
     <div>
         <Link target="Home">
-            <button class="btn btn-squre btn-ghost align-middle">
+            <button class="btn btn-square btn-ghost align-middle">
                 <Icon name="home" class="w-8 h-8 stroke-2" />
             </button>
         </Link>
@@ -15,7 +15,7 @@
 
     <div class="justify-self-end">
         <Link target="Settings">
-            <button class="align-middle btn btn-square btn-ghost">
+            <button class="btn btn-square btn-ghost align-middle ">
                 <Icon name="cog-8-tooth" class="w-8 h-8 stroke-2" />
             </button>
         </Link>

src/ui/settings/NumericSetting.svelte

@@ -42,7 +42,7 @@
 </script>
 
 
-<Setting {title} {error}>
+<Setting {title}>
     <div slot="input">
         {#if unit}
             <span class="mr-2">{unit}:</span>

src/ui/settings/Setting.svelte

@@ -3,7 +3,6 @@
     import ErrorAlert from '../ErrorAlert.svelte';
 
     export let title;
-    export let error = null;
 </script>
 
 

src/ui/settings/ToggleSetting.svelte

@@ -10,7 +10,7 @@
 </script>
 
 
-<Setting title="Start minimized">
+<Setting {title}>
     <input 
         slot="input" 
         type="checkbox" 

src/views/Home.svelte

@@ -20,7 +20,7 @@
 
 <Nav />
 
-<div class="flex flex-col h-screen justify-center items-center space-y-4">
+<div class="flex flex-col h-screen items-center justify-center p-4 space-y-4">
     {#await invoke('get_session_status') then status}
         {#if status === 'locked'}
             <img src="/static/padlock-closed.svg" alt="A locked padlock" class="w-32" />

src/views/Settings.svelte

@@ -17,7 +17,7 @@
 <Nav />
 
 {#await invoke('get_config') then config}
-    <div class="mx-auto mt-3 max-w-md">
+    <div class="max-w-md mx-auto mt-1.5 p-4">
         <h2 class="text-2xl font-bold text-center">Settings</h2>
 
         <ToggleSetting title="Start minimized" bind:value={$appState.config.start_minimized} on:update={save}>
@@ -34,6 +34,13 @@
             </svelte:fragment>
         </NumericSetting>
 
+        <NumericSetting title="Listen port" bind:value={$appState.config.listen_port} min=1 on:update={save}>
+            <svelte:fragment slot="description">
+                Listen for credentials requests on this port. 
+                (Should be used with <code>$AWS_CONTAINER_CREDENTIALS_FULL_URI</code>)
+            </svelte:fragment>
+        </NumericSetting>
+
         <Setting title="Update credentials">
             <Link slot="input" target="EnterCredentials">
                 <button class="btn btn-sm btn-primary">Update</button>

src/views/ShowApproved.svelte

@@ -13,6 +13,10 @@
     let success = false;
     let error = null;
 
+    let drawDuration = $appState.config.rehide_ms >= 750 ? 500 : 0;
+    let fadeDuration = drawDuration * 0.6;
+    let fadeDelay = drawDuration * 0.4;
+
     async function respond() {
         let response = {
             id: $appState.currentRequest.id,
@@ -23,22 +27,21 @@
             await invoke('respond', {response});
             success = true;
             $appState.currentRequest = null;
-            window.setTimeout(() => navigate('Home'), 1000);
+
+            window.setTimeout(
+                () => navigate('Home'),
+                // Extra 50ms so the window can finish disappearing before the screen changes
+                Math.min(5000, $appState.config.rehide_ms + 50),
+            );
         }
         catch (e) {
             error = e;
         }
 
     }
-
     onMount(respond);
 </script>
 
-<style>
-    :global(body) {
-        overflow: hidden;
-    }
-</style>
 
 {#if error}
     <div class="flex flex-col h-screen items-center justify-center m-auto max-w-lg">
@@ -56,11 +59,11 @@
 {:else if success}
     <div class="flex flex-col h-screen items-center justify-center max-w-max m-auto">
         <svg xmlns="http://www.w3.org/2000/svg" class="w-36 h-36" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor">
-          <path in:draw="{{duration: 500}}" stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+          <path in:draw="{{duration: drawDuration}}" stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
         </svg>
 
 
-        <div in:fade="{{delay: 200, duration: 300}}" class="text-2xl font-bold">Approved!</div>
+        <div in:fade="{{duration: fadeDuration, delay: fadeDelay}}" class="text-2xl font-bold">Approved!</div>
     </div>
 {/if}