Improve Item page

Add 500 page and dedicated 404 page
Add fake cache to tester API
Adjust some styles for better readability and usability

front/src/components/AnnouncementBanner.svelte

@@ -6,9 +6,7 @@
 
 
 {#await announcement}
-    <div class="announcement-banner-loading">
-        <div />
-    </div>
+    <div class="announcement-banner-loading" />
 {:then announcement}
     <div class="announcement-banner">
         <img src={announcement.image} alt="">
@@ -35,12 +33,15 @@
 
         overflow: hidden;
 
-        > div {
+        &::after {
+            content: '';
+
             position: absolute;
             top: $padding;
             right: $padding;
             bottom: $padding;
             left: $padding;
+
             border-radius: calc($border-radius-large - $padding);
             background-color: rgba($color-background, 0.9);
         }

front/src/components/DropDown.svelte

@@ -36,7 +36,7 @@
             align-items: center;
 
             p {
-                font-size: $font-size-h5;
+                font-size: $font-size-h6;
                 font-weight: $font-weight-bold;
             }
 

front/src/components/MenuItem.svelte

@@ -4,23 +4,19 @@
     
     import LoadingImage from '/MenuItemLoadingAlt.svg';
 
-    export let id;
-    export let name;
-    export let price;
-    export let image;
-    export let labels = []
+    export let item = {};
 </script>
 
 <div class="menu-item">
-    {#if !image}
+    {#if !item.image}
         <img src={LoadingImage} alt="" class="menu-item-image">
     {:else}
-        <img src={image} alt="" class="menu-item-image">
+        <img src={item.image} alt="" class="menu-item-image">
     {/if}
 
     <div class="menu-item-header">
         <ul>
-            {#each labels as label}
+            {#each item.labels as label}
                 {#if label === "vegan"}
                     <li class="vegan"><Leaf weight="fill" /></li>
                 {/if}
@@ -38,12 +34,14 @@
                 {/if}
             {/each}
         </ul>
-        <a href="/item/{id}" use:link>View&nbsp;<ArrowUpRight /></a>
+        <a href="/item/{item.uuid}" use:link>
+            View&nbsp;<ArrowUpRight />
+        </a>
     </div>
 
     <ul class="menu-item-detail">
-        <li>{name}</li>
-        <li>£{price}</li>
+        <li>{item.name}</li>
+        <li>£{item.price}</li>
     </ul>
 </div>
 

front/src/components/MenuList.svelte

@@ -7,13 +7,7 @@
 <ul>
     {#each items as item}
         <li>
-            <MenuItem
-                id={item.name}
-                name={item.name}
-                price={item.price}
-                image={item.image}
-                labels={item.labels}
-            />
+            <MenuItem item={item} />
         </li>
     {/each}
 </ul>
@@ -31,4 +25,4 @@
     li {
         margin: 0;
     }
-</style>
+</style>