Start on Footer Design

Clean up some pages
Make style a bit less similar to BurgerKing... oops...
dab.jpg

front/src/App.svelte

@@ -3,6 +3,7 @@
     import { replace } from 'svelte-spa-router';
     import routes from '%/routes.js';
     import NavigationBar from "%/pages/components/NavigationBar.svelte";
+    import FooterBar from "%/pages/components/FooterBar.svelte";
 
     let oldLocation = undefined;
     let showNavBar = false;
@@ -37,6 +38,4 @@
         on:conditionsFailed={conditionFailure}
     />
 </main>
-<footer>
-    <p>TastyBites is a fake restaurant</p>
-</footer>
+<FooterBar />

front/src/pages/Page404.svelte

@@ -4,5 +4,31 @@
     export let params = {};
 </script>
 
-<h1>404</h1>
-<p>Could not find resource you've searched for. <a href="/" use:link>Go Back</a></p>
+<div>
+    <h1>404</h1>
+    <p>Could not find resource you've searched for. <a href="/" use:link>Go Back</a></p>
+</div>
+
+<style>
+    div {
+        padding: 16px;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+    }
+    h1 {
+        text-align: center;
+    }
+    p {
+        text-align: center;
+    }
+    a {
+        text-decoration: none;
+        color: #6A9343;
+
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+</style>

front/src/pages/PageIndex.svelte

@@ -1,38 +1,93 @@
 <script>
     import { link } from 'svelte-spa-router';
+    import { ArrowUpRight } from "phosphor-svelte";
     import AnnouncementBanner from "%/pages/components/AnnouncementBanner.svelte";
     import MenuList from "%/pages/components/MenuList.svelte";
 
     const items = [
-        {name: "Breakfast", price: 69.99},
-        {name: "Dinner", price: 21},
-        {name: "Brick", price: 0},
-        {name: "Toast", price: 4382749832743},
-        {name: "water", price: 1},
-        {name: "half eaten mouldy bread", price: -9999},
+        {
+            name: "Breakfast",
+            price: 69.99,
+            labels: ["vegan", "spicy",],
+        },
+        {
+            name: "Dinner",
+            price: 21,
+            labels: ["vegan", "fish", "nut", "spicy",],
+        },
+        {
+            name: "Brick",
+            price: 0,
+            labels: ["spicy",],
+        },
+        {
+            name: "Toast",
+            price: 4382749832743,
+        },
+        {
+            name: "water",
+            price: 1,
+            labels: ["fish"],
+        },
+        {
+            name: "half eaten mouldy bread",
+            price: -9999,
+            labels: ["nut"],
+        },
+        {
+            name: "GwaGwa",
+            price: "Priceless",
+            labels: ["nut"],
+            image: "/dab.jpg",
+        }
     ];
 </script>
 
-<AnnouncementBanner />
-<a href="/annoucements" use:link style="float: right">Learn More</a>
+<div>
+    <AnnouncementBanner />
+    <a href="/annoucements" use:link style="float: right">Learn More <ArrowUpRight /></a>
+    <div class="spacer"></div>
 
-<div class="spacer"></div>
+    <h2>Popular Today</h2>
+    <MenuList {items} />
+    <a href="/menu" use:link style="float: right">See All <ArrowUpRight /></a>
+    <div class="spacer"></div>
 
-<h2>Menu</h2>
-<MenuList {items} />
-<a href="/menu" use:link style="float: right">See All</a>
-
-<div class="spacer"></div>
-
-<h2>About Us</h2>
-<p>Want to know the story of the restaurant?</p>
-<a href="/about" use:link style="float: right">Continue reading</a>
+    <h2>About Us</h2>
+    <p>Want to know the story of the restaurant?</p>
+    <a href="/about" use:link style="float: right">Continue reading <ArrowUpRight /></a>
+</div>
 
 <style lang="scss">
     h2 {
         margin-bottom: 16px;
     }
+
     .spacer {
         height: 100px;
     }
+
+    a {
+        margin-top: 8px;
+
+        padding-left: 10px;
+        padding-right: 10px;
+
+        height: 30px;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        text-decoration: none;
+
+        border-radius: 9999px;
+        background-color: transparent;
+        color: #33251a;
+
+        &:hover {
+            background-color: #fffbf4;
+            color: #33251a;
+        }
+    }
 </style>

front/src/pages/PageMenu.svelte

@@ -0,0 +1,86 @@
+<script>
+    import MenuList from "%/pages/components/MenuList.svelte";
+
+    const items = [
+        {
+            name: "Breakfast",
+            price: 69.99,
+            labels: ["vegan", "spicy",],
+        },
+        {
+            name: "Dinner",
+            price: 21,
+            labels: ["vegan", "fish", "nut", "spicy",],
+        },
+        {
+            name: "Brick",
+            price: 0,
+            labels: ["spicy",],
+        },
+        {
+            name: "Toast",
+            price: 4382749832743,
+        },
+        {
+            name: "water",
+            price: 1,
+            labels: ["fish"],
+        },
+        {
+            name: "half eaten mouldy bread",
+            price: -9999,
+            labels: ["nut"],
+        },
+        {
+            name: "GwaGwa",
+            price: "Priceless",
+            labels: ["nut"],
+            image: "/dab.jpg",
+        }
+    ];
+</script>
+
+<h2>Menu</h2>
+<MenuList {items} />
+<div class="spacer"></div>
+
+<h2>Menu</h2>
+<MenuList {items} />
+<div class="spacer"></div>
+
+<h2>Menu</h2>
+<MenuList {items} />
+
+<style lang="scss">
+    h2 {
+        margin-bottom: 16px;
+    }
+
+    .spacer {
+        height: 100px;
+    }
+
+    a {
+        margin-top: 8px;
+
+        padding-left: 10px;
+        padding-right: 10px;
+
+        height: 30px;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        text-decoration: none;
+
+        border-radius: 9999px;
+        background-color: transparent;
+        color: #33251a;
+
+        &:hover {
+            background-color: #fffbf4;
+            color: #33251a;
+        }
+    }
+</style>

front/src/pages/components/AnnouncementBanner.svelte

@@ -1,7 +1,9 @@
 <script>
     import LoadingBar from "%/pages/components/LoadingBar.svelte";
+    import LoadingImage from '/BannerLoading.svg';
 </script>
 
 <div class="announcement-banner">
     <LoadingBar bottom={true} />
+    <img src={LoadingImage} alt="">
 </div>

front/src/pages/components/FooterBar.svelte

@@ -0,0 +1,83 @@
+<script>
+    import { TwitterLogo, FacebookLogo, InstagramLogo, TiktokLogo } from "phosphor-svelte"
+</script>
+
+<footer>
+    <div class="footer-section">
+        <p>TastyBites is not a real restaurant</p>
+        <p>gwagwa</p>
+    </div>
+    <div class="footer-section">
+        <h4>Find us on:</h4>
+        <ul>
+            <li><a href="www.twitter.com"><TwitterLogo weight="fill"/></a></li>
+            <li><a href="www.twitter.com"><FacebookLogo weight="fill"/></a></li>
+            <li><a href="www.twitter.com"><InstagramLogo weight="fill"/></a></li>
+            <li><a href="www.twitter.com"><TiktokLogo weight="fill"/></a></li>
+        </ul>
+    </div>
+</footer>
+
+<style lang="scss">
+    footer {
+        padding: 16px;
+
+        position: relative;
+
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        justify-content: center;
+
+        border-top: 2px solid #6A9343;
+        background-color: #443023;
+        color: #e1dcd3;
+
+        overflow: hidden;
+    }
+
+    .footer-section {
+        padding: 16px;
+
+        min-width: 200px;
+        width: 100%;
+        max-width: 500px;
+
+        > ul {
+            padding: 0;
+
+            display: flex;
+            flex-direction: row;
+
+            > li {
+                margin: 0 16px 0 0;
+                list-style: none;
+
+                > a {
+                    height: 40px;
+                    width: 40px;
+
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+
+                    text-decoration: none;
+                    font-size: 16px;
+
+                    border-radius: 99999px;
+                    background-color: transparent;
+                    color: #e1dcd3;
+
+                    &:hover {
+                        background-color: #fffbf4;
+                        color: #33251a;
+                    }
+                }
+            }
+        }
+
+        > h4 {
+            margin-bottom: 10px;
+        }
+    }
+</style>

front/src/pages/components/MenuItem.svelte

@@ -1,21 +1,21 @@
 <script>
     import { link } from 'svelte-spa-router';
-    import { Acorn, Fish, Leaf, Flame } from "phosphor-svelte"
+    import {Acorn, Fish, Leaf, Flame, ArrowUpRight } from "phosphor-svelte"
     import LoadingImage from '/MenuItemLoadingAlt.svg';
 
     export let id;
-    export let labels = [
-        "vegan",
-        "fish",
-        "nut",
-        "spicy",
-    ]
     export let name;
     export let price;
+    export let image;
+    export let labels = []
 </script>
 
 <div class="menu-item">
-    <img src={LoadingImage} alt="" class="menu-item-image">
+    {#if !image}
+        <img src={LoadingImage} alt="" class="menu-item-image">
+    {:else}
+        <img src={image} alt="" class="menu-item-image">
+    {/if}
 
     <div class="menu-item-header">
         <ul>
@@ -34,7 +34,7 @@
                 {/if}
             {/each}
         </ul>
-        <a href="/item/{id}" use:link>View</a>
+        <a href="/item/{id}" use:link>View <ArrowUpRight /></a>
     </div>
 
     <ul class="menu-item-detail">
@@ -42,3 +42,4 @@
         <li>£{price}</li>
     </ul>
 </div>
+

front/src/pages/components/MenuList.svelte

@@ -6,7 +6,15 @@
 
 <ul>
     {#each items as item}
-        <li><MenuItem name={item.name} price={item.price} id={item.name} /></li>
+        <li>
+            <MenuItem
+                id={item.name}
+                name={item.name}
+                price={item.price}
+                image={item.image}
+                labels={item.labels}
+            />
+        </li>
     {/each}
 </ul>
 

front/src/routes.js

@@ -9,6 +9,12 @@ const routes = {
         conditions: [],
         userData: { showNavBar: true },
     }),
+    "/menu": wrap({
+        asyncComponent: () => import("%/pages/PageMenu.svelte"),
+        loadingComponent: PageLoading,
+        conditions: [],
+        userData: { showNavBar: true },
+    }),
     "/contact": wrap({
         asyncComponent: () => import("%/pages/PageContact.svelte"),
         loadingComponent: PageLoading,
@@ -22,7 +28,7 @@ const routes = {
         userData: { showNavBar: true },
     }),
     "/cart": wrap({
-        asyncComponent: () => import("%/pages/PageShoppingCart.svelte"),
+        asyncComponent: () => import("%/pages/PageCart.svelte"),
         loadingComponent: PageLoading,
         conditions: [],
         userData: { showNavBar: true },

front/src/styles/_navigation_bar.scss

@@ -13,8 +13,10 @@ nav {
     justify-content: center;
     align-items: center;
 
+    border-bottom: 2px solid $color-primary;
     background-color: $color-dark;
     color: $color-light;
+
     z-index: 9999999;
 
     ul {