Add styling to BasketItem

Move footer style to its own file
Make the contact form a bit more intuitive
General cleanup

front/src/App.svelte

@@ -95,7 +95,6 @@
 <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>
@@ -107,69 +106,3 @@
         </ul>
     </div>
 </footer>
-
-<style lang="scss">
-    // ToDo: Move this SCSS to its own _footer.scss file
-    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/components/BasketItem.svelte

@@ -16,7 +16,7 @@
         <li class="basket-item-name">{item.data.name}</li>
         <li class="basket-item-controls">
             <button on:click={() => { Cart.addToCart(item.uuid, -1) }}>-</button>
-            <input type="number" bind:value={item.amount}>
+            <p>{item.amount}</p>
             <button on:click={() => { Cart.addToCart(item.uuid, 1) }}>+</button>
         </li>
         <li class="basket-item-price">£{item.data.price * item.amount} (£{item.data.price})</li>
@@ -65,6 +65,46 @@
     .basket-item-controls {
         display: flex;
         flex-direction: row;
+
+        > button {
+            width: 35px;
+            height: 35px;
+
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            font-family: $font-family;
+            font-size: $font-size-p;
+
+            border: 1px solid rgba($color-dark, 0.2);
+            border-radius: $border-radius-normal;
+            background-color: $color-light;
+            color: $color-on-light;
+
+            &:hover {
+                border: 1px solid rgba($color-dark, 0.4);
+            }
+            &:focus {
+                border: 1px solid rgba($color-primary, 0.9);
+                outline: 0 solid transparent;
+            }
+        }
+
+        > p {
+            width: 40px;
+            height: 35px;
+
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            font-family: $font-family;
+            font-size: $font-size-p;
+
+            border: 1px solid transparent;
+            color: $color-on-light;
+        }
     }
     .basket-item-price {
         font-size: $font-size-p;

front/src/lib/test-data.ts

@@ -44,13 +44,13 @@ const TestData: Item[] = [
         labels: [Labels.nut],
         detail: "Example",
     },
-    {
+    // {
-        uuid: "gwagwa",
+    //     uuid: "gwagwa",
-        name: "GwaGwa",
+    //     name: "GwaGwa",
-        price: 69,
+    //     price: 69,
-        labels: [Labels.nut],
+    //     labels: [Labels.nut],
-        image: "/dab.jpg",
+    //     image: "/dab.jpg",
-    },
+    // },
     {
         uuid: "hogmelon",
         name: "Hogermellon",

front/src/pages/PageContact.svelte

@@ -28,7 +28,17 @@
     }
 
     function onSubmit() {
+        nameValid = true;
+        emailValid = true;
+        messageValid = false;
+
         formMessage = postContactEmail(name, email, message);
+
+        formMessage.catch(() => {
+            validateName();
+            validateEmail();
+            validateMessage();
+        });
     }
 </script>
 

front/src/pages/PageItem.svelte

@@ -57,7 +57,7 @@
                 <p>{item.detail}</p>
             </div>
 
-            <button on:click={() => { Cart.addToCart(item.uuid, 1) }}>Add to Cart</button>
+            <button on:click={() => { Cart.addToCart(item.uuid, 1) }} id="add-to-cart">Add to Cart</button>
         </div>
     {:catch error}
         <div id="error">
@@ -156,6 +156,30 @@
         }
     }
 
+    #add-to-cart {
+        padding: 0 $spacing-normal;
+
+        height: 30px;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        text-shadow: 0 1px 0.5px rgba($color-dark, 0.3);;
+
+        border: 0 solid transparent;
+        border-radius: 9999px;
+        background-color: $color-primary;
+        color: $color-on-primary;
+
+        &:hover, &:focus {
+            border: 0 solid transparent;
+            background-color: $color-dark;
+            color: $color-on-dark;
+            outline: 0 solid transparent
+        }
+    }
+
     .other {
         margin-left: auto;
         margin-right: auto;

front/src/pages/PageMenu.svelte

@@ -133,12 +133,6 @@
                         Hide Unavailable
                     </label>
                 </li>
-                <li>
-                    <label>
-                        <input type="checkbox">
-                        Hog
-                    </label>
-                </li>
             </ul>
         </DropDown>
     </div>

front/src/styles/_footer.scss

@@ -0,0 +1,61 @@
+footer {
+    padding: $spacing-normal;
+
+    position: relative;
+
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+
+    border-top: 3px solid $color-primary;
+    background-color: $color-dark;
+    color: $color-on-dark;
+
+    overflow: hidden;
+}
+
+.footer-section {
+    padding: $spacing-normal;
+
+    min-width: 200px;
+    width: 100%;
+    max-width: 500px;
+
+    > ul {
+        padding: 0;
+
+        display: flex;
+        flex-direction: row;
+
+        > li {
+            margin: 0 $spacing-small 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: $border-radius-circle;
+                background-color: transparent;
+                color: $color-on-dark;
+
+                &:hover {
+                    background-color: $color-light;
+                    color: $color-on-light;
+                }
+            }
+        }
+    }
+
+    > h4 {
+        margin-bottom: $spacing-xsmall;
+    }
+}

front/src/styles/_navigation_bar.scss

@@ -13,11 +13,10 @@ nav {
     top: 0;
     left: 0;
 
-    border-bottom: 2px solid $color-primary;
+    border-bottom: 3px solid $color-primary;
     background-color: $color-dark;
     color: $color-light;
 
-    //transition: box-shadow 0.05s ease-in-out;
     z-index: 9999999;
 
     ul {

front/src/styles/main.scss

@@ -3,6 +3,7 @@
 @import "reset";
 @import "loading_bar";
 @import "navigation_bar";
+@import "footer";
 @import "announcement_banner";
 @import "container";
 @import "menu_item";