1 files changed, 19 insertions, 13 deletions

diff --git a/fe/src/lib/PreferencesForm.svelte b/fe/src/lib/PreferencesForm.svelte
index 781866c..95e04c1 100644
--- a/fe/src/lib/PreferencesForm.svelte
+++ b/fe/src/lib/PreferencesForm.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
-import { preferences } from '../stores/auth';
-import type { Size, Preference } from '../types';
-   export let open: boolean = true; 
+    import { preferences } from '../stores/auth';
+    import type { Size, Preference } from '../types';
+    import { createEventDispatcher } from 'svelte';
+   export let open: boolean; 
 
     let preference: Preference = {
         color: "#00FF00",
@@ -10,29 +11,29 @@ import type { Size, Preference } from '../types';
             unit: 'oz'
         }
     }
+
+    const dispatch = createEventDispatcher();
     
     preferences.subscribe((value) => {
         preference = value;
     });
 
     function onPreferencesSave(): void {
-        preferences.set(preferences);
+        preferences.set(preference);
+        dispatch('close')
     }
+
 </script>
-<dialog {open}>
+<dialog {open} on:submit|preventDefault={onPreferencesSave}>
     <h2>User Preferences</h2>
     <form method="dialog">
         <div class="form input group">
-            <label>Color</label>
-            <input type="color" bind:value={preference.color}/>
+            <label for="color">Color</label>
+            <input id="color" name="color" type="color" bind:value={preference.color}/>
         </div>
         <div class="form input group">
-            <label>Bottle Size</label>
-            <select bind:value={preference.size.size}>
-                {#each [8,16,24,32,40,48] as size}
-                    <option>{ size }</option>
-                {/each}
-            </select>
+            <label for="size">Bottle Size</label>
+            <input id="size" name="size" type="number" min="8" max="48" step="8" bind:value={preference.size.size}/>
         </div>
         <button type="submit">Save</button>
     </form>
@@ -42,4 +43,9 @@ dialog {
     background: white;
     color: black;
 }
+
+input[type="color"] {
+   width: 100%;
+   height: 100%;
+}
 </style>