Improve touchtarget for DropDown

Improve FourOhFour page

front/src/components/DropDown.svelte

@@ -12,24 +12,24 @@
             <CaretDown />
         </button>
     </div>
-    {#if open }
     <div class="dropdown-content">
         <slot></slot>
     </div>
-    {/if}
 </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);

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>

front/src/pages/PageContact.svelte

@@ -9,25 +9,19 @@
         <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>
     <hr>
-    <div class="section">
     <DropDown name="Where can I find my past orders!">
         <p>Email....</p>
     </DropDown>
-    </div>
     <hr>
-    <div class="section">
     <DropDown name="Deez nuts">
         <p>Gottem</p>
     </DropDown>
 </div>
-</div>
 
 <div class="spacer"></div>
 

front/src/pages/PageMenu.svelte

@@ -14,7 +14,6 @@
             <button><ArrowClockwise /></button>
         </div>
         <hr>
-        <div class="section">
         <DropDown name="Meal Prefrences" open={true}>
             <ul>
                 <li>
@@ -37,9 +36,7 @@
                 </li>
             </ul>
         </DropDown>
-        </div>
         <hr>
-        <div class="section">
         <DropDown name="Allergies" open={true}>
             <ul>
                 <li>
@@ -68,9 +65,7 @@
                 </li>
             </ul>
         </DropDown>
-        </div>
         <hr>
-        <div class="section">
         <DropDown name="Meal Types" open={true}>
             <ul>
                 <li>
@@ -117,9 +112,7 @@
                 </li>
             </ul>
         </DropDown>
-        </div>
         <hr>
-        <div class="section">
         <DropDown name="Other">
             <ul>
                 <li>
@@ -143,7 +136,6 @@
             </ul>
         </DropDown>
     </div>
-    </div>
 
     <div id="menu-list">
         <h2>Main Menu</h2>

front/src/routes.js

@@ -42,7 +42,7 @@ const routes = {
     '*': wrap({
         component: Page404,
         conditions: [],
-        userData: { showNavBar: false, fullWidth: false, },
+        userData: { showNavBar: true, fullWidth: false, },
     })
 }
 

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;