From 4433d7cc192309b3ac05e95040a78396866a8616 Mon Sep 17 00:00:00 2001
From: Fluffy-Bean <michal-gdula@protonmail.com>
Date: Thu, 25 Apr 2024 19:48:12 +0100
Subject: [PATCH] Improve touchtarget for DropDown Improve FourOhFour page

---
 front/src/components/DropDown.svelte |  29 ++--
 front/src/pages/Page404.svelte       |  18 +-
 front/src/pages/PageContact.svelte   |  26 ++-
 front/src/pages/PageMenu.svelte      | 244 +++++++++++++--------------
 front/src/routes.js                  |   2 +-
 front/src/styles/_reset.scss         |   9 +
 6 files changed, 162 insertions(+), 166 deletions(-)

diff --git a/front/src/components/DropDown.svelte b/front/src/components/DropDown.svelte
index 4cb677d..bd390c1 100644
--- a/front/src/components/DropDown.svelte
+++ b/front/src/components/DropDown.svelte
@@ -12,24 +12,24 @@
             <CaretDown />
         </button>
     </div>
-    {#if open }
-        <div class="dropdown-content">
-            <slot></slot>
-        </div>
-    {/if}
+    <div class="dropdown-content">
+        <slot></slot>
+    </div>
 </div>
 
 <style lang="scss">
     @import "%/styles/vars";
 
     .dropdown {
-        //padding: $spacing-normal;
         border-bottom: 1px solid transparent;
 
-        //background-color: $color-light;
         color: $color-on-light;
 
         .dropdown-header {
+            padding: $spacing-normal;
+
+            position: relative;
+
             display: flex;
             flex-direction: row;
             justify-content: space-between;
@@ -41,8 +41,14 @@
             }
 
             button {
-                height: 25px;
-                width: 30px;
+                padding: 0;
+
+                height: 100%;
+                width: 60px;
+
+                position: absolute;
+                top: 0;
+                right: 0;
 
                 display: flex;
                 justify-content: center;
@@ -64,14 +70,13 @@
         }
 
         .dropdown-content {
-            //padding-top: $spacing-small;
+            padding: 0 $spacing-normal $spacing-normal;
             display: none;
         }
 
         &.open {
             .dropdown-header {
-                padding-bottom: $spacing-small;
-                //border-bottom: 1px solid rgba($color-dark, 0.1);
+                //padding: $spacing-normal $spacing-normal $spacing-small;
 
                 button {
                     transform: rotate(-180deg);
diff --git a/front/src/pages/Page404.svelte b/front/src/pages/Page404.svelte
index a212b34..a1c8584 100644
--- a/front/src/pages/Page404.svelte
+++ b/front/src/pages/Page404.svelte
@@ -1,12 +1,12 @@
 <script>
-    import { link } from 'svelte-spa-router';
+    import { SmileySad } from "phosphor-svelte";
 
     export let params = {};
 </script>
 
 <div>
-    <h1>404</h1>
-    <p>Could not find resource you've searched for. <a href="/" use:link>Go Back</a></p>
+    <h1>You're lost!&nbsp;<SmileySad weight="fill" /></h1>
+    <p>Error 404</p>
 </div>
 
 <style lang="scss">
@@ -21,18 +21,14 @@
         flex-direction: column;
     }
     h1 {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
         font-size: 50px;
         text-align: center;
     }
     p {
         text-align: center;
     }
-    a {
-        text-decoration: none;
-        color: $color-primary;
-
-        &:hover {
-            text-decoration: underline;
-        }
-    }
 </style>
\ No newline at end of file
diff --git a/front/src/pages/PageContact.svelte b/front/src/pages/PageContact.svelte
index fc62c2b..93b8011 100644
--- a/front/src/pages/PageContact.svelte
+++ b/front/src/pages/PageContact.svelte
@@ -9,24 +9,18 @@
         <h2>Commonly Asked Questions</h2>
     </div>
     <hr>
-    <div class="section">
-        <DropDown name="Can I refund my order?">
-            <p>If you ordered online, if we haven't started making your food yet, a refund is possible.</p>
-            <p>If you reserved a table, you can refund upto 1 hour before your time.</p>
-        </DropDown>
-    </div>
+    <DropDown name="Can I refund my order?">
+        <p>If you ordered online, if we haven't started making your food yet, a refund is possible.</p>
+        <p>If you reserved a table, you can refund upto 1 hour before your time.</p>
+    </DropDown>
     <hr>
-    <div class="section">
-        <DropDown name="Where can I find my past orders!">
-            <p>Email....</p>
-        </DropDown>
-    </div>
+    <DropDown name="Where can I find my past orders!">
+        <p>Email....</p>
+    </DropDown>
     <hr>
-    <div class="section">
-        <DropDown name="Deez nuts">
-            <p>Gottem</p>
-        </DropDown>
-    </div>
+    <DropDown name="Deez nuts">
+        <p>Gottem</p>
+    </DropDown>
 </div>
 
 <div class="spacer"></div>
diff --git a/front/src/pages/PageMenu.svelte b/front/src/pages/PageMenu.svelte
index 578f0f7..246d544 100644
--- a/front/src/pages/PageMenu.svelte
+++ b/front/src/pages/PageMenu.svelte
@@ -14,135 +14,127 @@
             <button><ArrowClockwise /></button>
         </div>
         <hr>
-        <div class="section">
-            <DropDown name="Meal Prefrences" open={true}>
-                <ul>
-                    <li>
-                        <label>
-                            <input type="checkbox">
-                            Vegan
-                        </label>
-                    </li>
-                    <li>
-                        <label>
-                            <input type="checkbox">
-                            Vegetarian
-                        </label>
-                    </li>
-                    <li>
-                        <label>
-                            <input type="checkbox">
-                            Pescatarian
-                        </label>
-                    </li>
-                </ul>
-            </DropDown>
-        </div>
+        <DropDown name="Meal Prefrences" open={true}>
+            <ul>
+                <li>
+                    <label>
+                        <input type="checkbox">
+                        Vegan
+                    </label>
+                </li>
+                <li>
+                    <label>
+                        <input type="checkbox">
+                        Vegetarian
+                    </label>
+                </li>
+                <li>
+                    <label>
+                        <input type="checkbox">
+                        Pescatarian
+                    </label>
+                </li>
+            </ul>
+        </DropDown>
         <hr>
-        <div class="section">
-            <DropDown name="Allergies" open={true}>
-                <ul>
-                    <li>
-                        <label>
-                            <input type="checkbox">
-                            Deez Nut
-                        </label>
-                    </li>
-                    <li>
-                        <label>
-                            <input type="checkbox">
-                            Sea
-                        </label>
-                    </li>
-                    <li>
-                        <label>
-                            <input type="checkbox">
-                            Dairy
-                        </label>
-                    </li>
-                    <li>
-                        <label>
-                            <input type="checkbox">
-                            Gluten
-                        </label>
-                    </li>
-                </ul>
-            </DropDown>
-        </div>
+        <DropDown name="Allergies" open={true}>
+            <ul>
+                <li>
+                    <label>
+                        <input type="checkbox">
+                        Deez Nut
+                    </label>
+                </li>
+                <li>
+                    <label>
+                        <input type="checkbox">
+                        Sea
+                    </label>
+                </li>
+                <li>
+                    <label>
+                        <input type="checkbox">
+                        Dairy
+                    </label>
+                </li>
+                <li>
+                    <label>
+                        <input type="checkbox">
+                        Gluten
+                    </label>
+                </li>
+            </ul>
+        </DropDown>
         <hr>
-        <div class="section">
-            <DropDown name="Meal Types" open={true}>
-                <ul>
-                    <li>
-                        <label>
-                            <input type="checkbox">
-                            Breakfast
-                        </label>
-                    </li>
-                    <li>
-                        <label>
-                            <input type="checkbox">
-                            Main
-                        </label>
-                    </li>
-                    <li>
-                        <label>
-                            <input type="checkbox">
-                            Dinner
-                        </label>
-                    </li>
-                    <li>
-                        <label>
-                            <input type="checkbox">
-                            Alcoholic Drinks
-                        </label>
-                    </li>
-                    <li>
-                        <label>
-                            <input type="checkbox">
-                            Non-Alcoholic Drinks
-                        </label>
-                    </li>
-                    <li>
-                        <label>
-                            <input type="checkbox">
-                            Sides
-                        </label>
-                    </li>
-                    <li>
-                        <label>
-                            <input type="checkbox">
-                            Sweet
-                        </label>
-                    </li>
-                </ul>
-            </DropDown>
-        </div>
+        <DropDown name="Meal Types" open={true}>
+            <ul>
+                <li>
+                    <label>
+                        <input type="checkbox">
+                        Breakfast
+                    </label>
+                </li>
+                <li>
+                    <label>
+                        <input type="checkbox">
+                        Main
+                    </label>
+                </li>
+                <li>
+                    <label>
+                        <input type="checkbox">
+                        Dinner
+                    </label>
+                </li>
+                <li>
+                    <label>
+                        <input type="checkbox">
+                        Alcoholic Drinks
+                    </label>
+                </li>
+                <li>
+                    <label>
+                        <input type="checkbox">
+                        Non-Alcoholic Drinks
+                    </label>
+                </li>
+                <li>
+                    <label>
+                        <input type="checkbox">
+                        Sides
+                    </label>
+                </li>
+                <li>
+                    <label>
+                        <input type="checkbox">
+                        Sweet
+                    </label>
+                </li>
+            </ul>
+        </DropDown>
         <hr>
-        <div class="section">
-            <DropDown name="Other">
-                <ul>
-                    <li>
-                        <label>
-                            <input type="checkbox">
-                            Hide Seasonal
-                        </label>
-                    </li>
-                    <li>
-                        <label>
-                            <input type="checkbox">
-                            Hide Unavailable
-                        </label>
-                    </li>
-                    <li>
-                        <label>
-                            <input type="checkbox">
-                            Hog
-                        </label>
-                    </li>
-                </ul>
-            </DropDown>
-        </div>
+        <DropDown name="Other">
+            <ul>
+                <li>
+                    <label>
+                        <input type="checkbox">
+                        Hide Seasonal
+                    </label>
+                </li>
+                <li>
+                    <label>
+                        <input type="checkbox">
+                        Hide Unavailable
+                    </label>
+                </li>
+                <li>
+                    <label>
+                        <input type="checkbox">
+                        Hog
+                    </label>
+                </li>
+            </ul>
+        </DropDown>
     </div>
 
     <div id="menu-list">
diff --git a/front/src/routes.js b/front/src/routes.js
index 71fb028..e0ce799 100644
--- a/front/src/routes.js
+++ b/front/src/routes.js
@@ -42,7 +42,7 @@ const routes = {
     '*': wrap({
         component: Page404,
         conditions: [],
-        userData: { showNavBar: false, fullWidth: false, },
+        userData: { showNavBar: true, fullWidth: false, },
     })
 }
 
diff --git a/front/src/styles/_reset.scss b/front/src/styles/_reset.scss
index ca0d33e..07a5b52 100644
--- a/front/src/styles/_reset.scss
+++ b/front/src/styles/_reset.scss
@@ -51,6 +51,15 @@ h6 {
 p {
     font-size: $font-size-p;
     font-weight: $font-weight-normal;
+
+    a {
+        text-decoration: none;
+        color: $color-primary;
+
+        &:hover {
+            text-decoration: underline;
+        }
+    }
 }
 small {
     font-size: $font-size-small;