From d2a637f8d69452b749b5908fdb03a33300b4705e Mon Sep 17 00:00:00 2001
From: Fluffy <michal-gdula@protonmail.com>
Date: Mon, 20 May 2024 12:15:32 +0100
Subject: [PATCH] Booking form Move loader style to its own scss file to make
 it re-usable

---
 front/public/assets/SeatingTemporary.png      | Bin 0 -> 11509 bytes
 .../src/components/AnnouncementBanner.svelte  |  46 +-
 front/src/pages/About.svelte                  |  23 +-
 front/src/pages/Booking.svelte                | 470 ++++++++++--------
 front/src/pages/Checkout.svelte               |   3 +-
 front/src/pages/Item.svelte                   |  66 +--
 front/src/styles/_loading_box.scss            |  43 ++
 front/src/styles/main.scss                    |   1 +
 8 files changed, 320 insertions(+), 332 deletions(-)
 create mode 100644 front/public/assets/SeatingTemporary.png
 create mode 100644 front/src/styles/_loading_box.scss

diff --git a/front/public/assets/SeatingTemporary.png b/front/public/assets/SeatingTemporary.png
new file mode 100644
index 0000000000000000000000000000000000000000..aaccce831177c63bea11c64a508a90f1d3e1dc71
GIT binary patch
literal 11509
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

literal 0
HcmV?d00001

diff --git a/front/src/components/AnnouncementBanner.svelte b/front/src/components/AnnouncementBanner.svelte
index 7afb817..8e4f053 100644
--- a/front/src/components/AnnouncementBanner.svelte
+++ b/front/src/components/AnnouncementBanner.svelte
@@ -6,7 +6,7 @@
 
 
 {#await announcement}
-    <div class="announcement-banner-loading" />
+    <div class="loading-box" />
 {:then announcement}
     <div class="announcement-banner">
         <img src={announcement.image} alt="">
@@ -20,55 +20,15 @@
 
     $padding: 1px;
 
-    .announcement-banner-loading {
+    .loading-box {
         height: 400px;
-
-        position: relative;
-
-        border-radius: $border-radius-large;
-
-        background: linear-gradient(
-                        to right,
-                        rgba($color-dark, 0) 8%,
-                        rgba($color-dark, 0.3) 38%,
-                        rgba($color-dark, 0) 54%
-        ) no-repeat;
-        background-size: 1500px 100%;
-        animation: loading 1s infinite linear;
-
-        overflow: hidden;
-
-        &::after {
-            content: '';
-
-            position: absolute;
-            top: $padding;
-            right: $padding;
-            bottom: $padding;
-            left: $padding;
-
-            border-radius: calc($border-radius-large - $padding);
-            background-color: darken($color-background, 10%);
-            background-image: url("/assets/Noise.png");
-
-            opacity: 0.9;
-        }
     }
 
     @media only screen and (max-width: 670px) {
-        .announcement-banner-loading {
+        .loading-box {
             margin: -$spacing-small;
             margin-bottom: 0;
             height: 250px;
         }
     }
-
-    @keyframes loading{
-        0%{
-            background-position: -750px 0
-        }
-        100%{
-            background-position: 750px 0
-        }
-    }
 </style>
\ No newline at end of file
diff --git a/front/src/pages/About.svelte b/front/src/pages/About.svelte
index 1315859..75f1eb6 100644
--- a/front/src/pages/About.svelte
+++ b/front/src/pages/About.svelte
@@ -18,31 +18,10 @@
 
 <div class="spacer" />
 
-<ImageWithText image={Dab} toRight={true}>
-    <div class="padding">
-        <h2>The hard times</h2>
-        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. At deserunt est quos dicta ipsa! Soluta laudantium dolore temporibus nisi aspernatur expedita vel, unde natus a nulla rerum officiis optio neque.</p>
-        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. At deserunt est quos dicta ipsa! Soluta laudantium dolore temporibus nisi aspernatur expedita vel, unde natus a nulla rerum officiis optio neque.</p>
-    </div>
-</ImageWithText>
-
-<div class="spacer" />
-
-<ImageWithText image={Hog}>
-    <div class="padding">
-        <h2>Whats next</h2>
-        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. At deserunt est quos dicta ipsa! Soluta laudantium dolore temporibus nisi aspernatur expedita vel, unde natus a nulla rerum officiis optio neque.</p>
-        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. At deserunt est quos dicta ipsa! Soluta laudantium dolore temporibus nisi aspernatur expedita vel, unde natus a nulla rerum officiis optio neque.</p>
-    </div>
-</ImageWithText>
-
-<div class="spacer" />
-
 <ImageWithText image={Beetle} toRight={true}>
     <div class="padding">
         <h2>Our Chef</h2>
-        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. At deserunt est quos dicta ipsa! Soluta laudantium dolore temporibus nisi aspernatur expedita vel, unde natus a nulla rerum officiis optio neque.</p>
-        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. At deserunt est quos dicta ipsa! Soluta laudantium dolore temporibus nisi aspernatur expedita vel, unde natus a nulla rerum officiis optio neque.</p>
+        <p>He sucks at his job</p>
     </div>
 </ImageWithText>
 
diff --git a/front/src/pages/Booking.svelte b/front/src/pages/Booking.svelte
index 3258be7..194df16 100644
--- a/front/src/pages/Booking.svelte
+++ b/front/src/pages/Booking.svelte
@@ -1,26 +1,9 @@
 <script lang="ts">
-    import { link, push, querystring } from 'svelte-spa-router';
-    import { SealWarning, CaretDown, ArrowRight, ArrowLeft } from "phosphor-svelte";
+    import {SealWarning, CaretDown, ArrowRight} from "phosphor-svelte";
 
     import { expandOnTyping } from "../lib/utils";
     import Calendar from "../components/Calendar.svelte";
 
-    let progress = 1;
-    querystring.subscribe((params) => {
-        const url = new URLSearchParams(params);
-        const parsed = parseInt(url.get("progress"));
-
-        progress = 1;
-
-        if (url.has("progress") && !isNaN(parsed)) {
-            progress = parsed;
-        }
-        if ([1, 2, 3].indexOf(progress) === -1) {
-            progress = 1;
-            push("/booking?progress=1");
-        }
-    })
-
     const specialRequestsMax = 300;
     const today = new Date();
 
@@ -29,6 +12,7 @@
     let telephone = "";
     let date: Date;
     let timeSlot = "slot1";
+    let tableSlot = "table1";
     let specialRequests = "";
 
     let nameValid = true;
@@ -41,225 +25,214 @@
     function validateEmail() { emailValid = email.length > 1}
     function validateTelephone() { telephoneValid = telephone.length == 11}
     function validateDate() { dateValid = date > today;}
-    function validateSpecialRequests() { specialRequestsValid = specialRequests.length < 301 }
+    function validateSpecialRequests() { specialRequestsValid = specialRequests.length <= 300 }
 
     function onSubmit(event) {}
 </script>
 
 <h1>Table booking</h1>
 
-<div id="booking-progress">
-    <a href="/booking?progress={progress - 1}" use:link><ArrowLeft /></a>
-    <div
-            class="progress"
-            class:progress-1={progress === 1}
-            class:progress-2={progress === 2}
-            class:progress-3={progress === 3}
-    />
-    <a href="/booking?progress={progress + 1}" use:link><ArrowRight /></a>
-</div>
-
-<div class="spacer" />
-
-{#if progress === 1}
-    <div class="form-element">
-        <p class="form-label">Booking Date</p>
-        <Calendar
-                bind:selectedDate={date}
-                on:selected={validateDate}
-                notBefore={today}
-        />
-        <span class="form-notice error">
-            {#if !dateValid}
-                Must chose date that's tomorrow or later
-            {/if}
-        </span>
-    </div>
-
-    <div class="spacer half" />
-
-    <!-- ToDo: Don't give a fake error for the weekend slots, just for testing  || !dateValid -->
-    {#if date && (date.getDay() === 6 || date.getDay() === 0)}
-        <p class="form-message error"><SealWarning weight="fill" />&nbsp;Time slots not available for this date</p>
-    {:else}
+<div id="booking">
+    <div id="form">
+        <h2>Date and Time</h2>
+        <p>When do you wanna come see us?</p>
+        <div class="spacer half" />
         <div class="form-element">
-            <label class="form-label" for="time-slot">Time Slot</label>
+            <p class="form-label">Booking Date</p>
+            <Calendar
+                    bind:selectedDate={date}
+                    on:selected={validateDate}
+                    notBefore={today}
+            />
+            <span class="form-notice error">
+                    {#if !dateValid}
+                        Must chose date that's tomorrow or later
+                    {/if}
+                </span>
+        </div>
+
+        <div class="spacer half" />
+
+        <!-- ToDo: Don't give a fake error for the weekend slots, just for testing  || !dateValid -->
+        {#if date && (date.getDay() === 6 || date.getDay() === 0)}
+            <p class="form-message error"><SealWarning weight="fill" />&nbsp;Time slots not available for this date</p>
+        {:else}
+            <div class="form-element">
+                <label class="form-label" for="time-slot">Time Slot</label>
+                <div class="select-container">
+                    <select
+                            bind:value={timeSlot}
+                            class="form-input"
+                            id="time-slot"
+                            name="time-slot"
+                    >
+                        <option value="slot0">8am to 10am</option>
+                        <option value="slot1">10am to 12am</option>
+                        <option value="slot2" disabled>12am to 2pm</option>
+                        <option value="slot3">2pm to 4pm</option>
+                        <option value="slot4">4pm to 6pm</option>
+                        <option value="slot5">6pm to 8pm</option>
+                        <option value="slot6">8pm to 10pm</option>
+                    </select>
+                    <div class="select-arrow">
+                        <CaretDown />
+                    </div>
+                </div>
+            </div>
+        {/if}
+
+        <div class="spacer" />
+        <hr>
+        <div class="spacer" />
+
+        <h2>Seating</h2>
+        <p>Where would you like to be seating?</p>
+        <div class="spacer half" />
+        <div class="seating-image">
+            <img src="/assets/SeatingTemporary.png" alt="Birds-eye view of the available seating at the restaurant" />
+        </div>
+        <div class="spacer half" />
+        <div class="form-element">
+            <label class="form-label" for="table-slot">Seat Choice</label>
             <div class="select-container">
                 <select
-                        bind:value={timeSlot}
+                        bind:value={tableSlot}
                         class="form-input"
-                        id="time-slot"
-                        name="time-slot"
+                        id="table-slot"
+                        name="table-slot"
                 >
-                    <option value="slot0">8am to 10am</option>
-                    <option value="slot1">10am to 12am</option>
-                    <option value="slot2" disabled>12am to 2pm</option>
-                    <option value="slot3">2pm to 4pm</option>
-                    <option value="slot4">4pm to 6pm</option>
-                    <option value="slot5">6pm to 8pm</option>
-                    <option value="slot6">8pm to 10pm</option>
+                    <option value="table1">Table 1</option>
+                    <option value="table2">Table 2</option>
+                    <option value="table3">Table 3</option>
                 </select>
                 <div class="select-arrow">
                     <CaretDown />
                 </div>
             </div>
         </div>
-    {/if}
-{:else if progress === 2}
-    <div class="form-element">
-        <label class="form-label" for="message">Message</label>
-        <textarea
-                bind:value={specialRequests}
-                on:input={validateSpecialRequests}
-                on:blur={validateSpecialRequests}
-                use:expandOnTyping
-                rows="1"
-                cols="50"
-                id="message"
-                name="message"
-                class="form-input"
-        />
-        <span class="form-notice" class:error={!specialRequestsValid}>
-            ({specialRequests.length}/{specialRequestsMax})
-        </span>
-    </div>
-{:else if progress === 3}
-    <div class="form-element">
-        <label class="form-label" for="name">Full Name</label>
-        <input
-                bind:value={name}
-                on:blur={validateName}
-                on:input={validateName}
-                type="text"
-                id="name"
-                name="name"
-                class="form-input"
-        />
-        <span class="form-notice error">
-            {#if !nameValid}
-                Enter a name
-            {/if}
-        </span>
-    </div>
 
-    <div class="spacer half" />
+        <div class="spacer" />
+        <hr>
+        <div class="spacer" />
 
-    <div class="form-element">
-        <label class="form-label" for="email">Email</label>
-        <input
-                bind:value={email}
-                on:blur={validateEmail}
-                on:input={validateEmail}
-                type="text"
-                id="email"
-                name="email"
-                class="form-input"
-        />
-        <span class="form-notice error">
-            {#if !emailValid}
-                Email not valid
-            {/if}
-        </span>
+        <h2>Special requests</h2>
+        <p>Wanna make sure we're accessible to your disabilities? Let us know where what todo!</p>
+        <div class="spacer half" />
+        <div class="form-element">
+            <label class="form-label" for="message">Message</label>
+            <textarea
+                    bind:value={specialRequests}
+                    on:input={validateSpecialRequests}
+                    on:blur={validateSpecialRequests}
+                    use:expandOnTyping
+                    rows="1"
+                    cols="50"
+                    id="message"
+                    name="message"
+                    class="form-input"
+            />
+            <span class="form-notice" class:error={!specialRequestsValid}>
+                    ({specialRequests.length}/{specialRequestsMax})
+                </span>
+        </div>
+
+        <div class="spacer" />
+        <hr>
+        <div class="spacer" />
+
+        <h2>Who are you</h2>
+        <p>Just so we can keep you updated on your reservation</p>
+        <div class="spacer half" />
+        <div class="form-element">
+            <label class="form-label" for="name">Full Name</label>
+            <input
+                    bind:value={name}
+                    on:blur={validateName}
+                    on:input={validateName}
+                    type="text"
+                    id="name"
+                    name="name"
+                    class="form-input"
+            />
+            <span class="form-notice error">
+                    {#if !nameValid}
+                        Enter a name
+                    {/if}
+                </span>
+        </div>
+
+        <div class="spacer half" />
+
+        <div class="form-element">
+            <label class="form-label" for="email">Email</label>
+            <input
+                    bind:value={email}
+                    on:blur={validateEmail}
+                    on:input={validateEmail}
+                    type="text"
+                    id="email"
+                    name="email"
+                    class="form-input"
+            />
+            <span class="form-notice error">
+                    {#if !emailValid}
+                        Email not valid
+                    {/if}
+                </span>
+        </div>
+
+        <div class="spacer half" />
+
+        <div class="form-element">
+            <label class="form-label" for="telephone">Telephone</label>
+            <input
+                    bind:value={telephone}
+                    on:blur={validateTelephone}
+                    on:input={validateTelephone}
+                    type="text"
+                    id="telephone"
+                    name="telephone"
+                    class="form-input"
+            />
+            <span class="form-notice error">
+                    {#if !telephoneValid}
+                        Telephone number not valid
+                    {/if}
+                </span>
+        </div>
     </div>
-
-    <div class="spacer half" />
-
-    <div class="form-element">
-        <label class="form-label" for="telephone">Telephone</label>
-        <input
-                bind:value={telephone}
-                on:blur={validateTelephone}
-                on:input={validateTelephone}
-                type="text"
-                id="telephone"
-                name="telephone"
-                class="form-input"
-        />
-        <span class="form-notice error">
-            {#if !telephoneValid}
-                Telephone number not valid
-            {/if}
-        </span>
+    <div class="spacer" />
+    <div id="booking-confirmation">
+        <div class="container">
+            <div class="header">
+                <h2>Booking Confirmation</h2>
+            </div>
+            <hr>
+            <div class="section">
+                <p>
+                    I want to stay at table {tableSlot || "Table 1"}, on {date || "a pleasant day"}, {timeSlot || "during the day"}.
+                    <br><br>
+                    I request "{specialRequests || "a nice stay"}".
+                    <br><br>
+                    If I need to be contacted, my name is {name || "Unknown"},
+                    email {email || "Missing"} or alternatively call me on {telephone || "nothing"}.
+                </p>
+            </div>
+        </div>
+        <div class="spacer half" />
+        <div class="container">
+            <div class="section">
+                <p>By pressing "Book Table" you agree to our terms of service</p>
+                <div class="spacer half" />
+                <button id="book-button" form="form">Book&nbsp;Table&nbsp;<ArrowRight /></button>
+            </div>
+        </div>
     </div>
-{/if}
+</div>
 
 <style lang="scss">
     @import "../styles/vars";
 
-    #booking-progress {
-        display: flex;
-        flex-direction: row;
-        justify-content: flex-start;
-        align-items: center;
-
-        > a {
-            padding: 0 $spacing-small;
-
-            width: 35px;
-            height: 35px;
-
-            display: flex;
-            justify-content: center;
-            align-items: center;
-
-            font-size: $font-size-p;
-
-            border: 0 solid transparent;
-            border-radius: $border-radius-circle;
-            background-color: $color-light;
-            color: $color-on-light;
-
-            &:hover {
-                background-color: $color-dark;
-                color: $color-on-dark;
-            }
-            &:focus-visible {
-                background-color: $color-dark;
-                color: $color-on-dark;
-                outline: 0 solid transparent;
-            }
-        }
-
-        .progress {
-            margin: 0 $spacing-normal;
-
-            width: 100%;
-            height: 5px;
-
-            position: relative;
-
-            border-radius: $border-radius-circle;
-            background-color: $color-light;
-
-            overflow: hidden;
-
-            &::after {
-                content: '';
-
-                position: absolute;
-                top: 0;
-                left: 0;
-
-                width: 0;
-                height: 100%;
-
-                background-color: $color-dark;
-
-                transition: width 0.5s cubic-bezier(.19,1,.22,1);
-            }
-
-            &.progress-1::after {
-                width: 33%;
-            }
-            &.progress-2::after {
-                width: 66%;
-            }
-            &.progress-3::after {
-                width: 100%;
-            }
-        }
-    }
-
     #name, #email {
         width: 300px;
         max-width: calc(100vw - calc(2 * $spacing-normal));
@@ -306,4 +279,77 @@
             }
         }
     }
+
+    .container {
+        overflow: hidden;
+    }
+
+    .seating-image {
+        max-width: 550px;
+        border-radius: $border-radius-large;
+        overflow: hidden;
+
+        > img {
+            width: 100%;
+            height: auto;
+            display: block;
+        }
+    }
+
+    #book-button {
+        padding: 0 $spacing-normal;
+
+        width: 100%;
+        height: 35px;
+
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-end;
+        align-items: center;
+
+        font-size: $font-size-p;
+        text-decoration: none;
+
+        border-radius: $border-radius-large;
+        border: 0 solid transparent;
+        background-color: $color-primary;
+        color: $color-on-primary;
+
+        &:hover {
+            background-color: $color-dark;
+            color: $color-on-dark;
+        }
+    }
+
+    #booking {
+        display: flex;
+        flex-direction: row;
+        justify-content: normal;
+        align-items: flex-start;
+    }
+
+    #form {
+        width: 100%;
+        position: relative;
+    }
+
+    #booking-confirmation {
+        min-width: calc(400px - $spacing-normal);
+        width: 100%;
+        max-width: calc(400px - $spacing-normal);
+
+        position: sticky;
+        top: calc($sizing-navigation-height + $spacing-normal);
+    }
+
+    @media only screen and (max-width: 900px) {
+        #booking {
+            flex-direction: column;
+        }
+
+        #booking-confirmation {
+            max-width: unset;
+            position: unset;
+        }
+    }
 </style>
\ No newline at end of file
diff --git a/front/src/pages/Checkout.svelte b/front/src/pages/Checkout.svelte
index d24d7f1..24614c7 100644
--- a/front/src/pages/Checkout.svelte
+++ b/front/src/pages/Checkout.svelte
@@ -434,7 +434,8 @@
     }
 
     .table {
-        //border-radius: $border-radius-normal;
+        margin: 0 $spacing-normal;
+        border-radius: $border-radius-normal;
         border: 1px solid rgba($color-dark, 0.2);
         background-color: $color-light;
 
diff --git a/front/src/pages/Item.svelte b/front/src/pages/Item.svelte
index 5c3513b..3e1fc97 100644
--- a/front/src/pages/Item.svelte
+++ b/front/src/pages/Item.svelte
@@ -54,23 +54,23 @@
     {#await item}
         <div id="images">
             <div class="img-main">
-                <div class="loading image" />
+                <div class="loading-box image" />
             </div>
             <ul class="img-alts">
-                <li><div class="loading image-small" /></li>
-                <li><div class="loading image-small" /></li>
-                <li><div class="loading image-small" /></li>
-                <li><div class="loading image-small" /></li>
-                <li><div class="loading image-small" /></li>
+                <li><div class="loading-box image-small" /></li>
+                <li><div class="loading-box image-small" /></li>
+                <li><div class="loading-box image-small" /></li>
+                <li><div class="loading-box image-small" /></li>
+                <li><div class="loading-box image-small" /></li>
             </ul>
         </div>
 
         <div class="spacer half" />
 
         <div id="info">
-            <div class="loading title" />
-            <div class="loading price" />
-            <div class="loading description" />
+            <div class="loading-box title" />
+            <div class="loading-box price" />
+            <div class="loading-box description" />
         </div>
     {:then item}
         <div id="images">
@@ -174,8 +174,6 @@
 <style lang="scss">
     @import "../styles/vars";
 
-    $padding: 1px;
-
     .notice {
         margin-right: auto;
         margin-bottom: $spacing-large;
@@ -257,7 +255,7 @@
                 background-color: rgba($color-dark, 0.1);
             }
 
-            > .loading.image {
+            > .loading-box.image {
                 width: 100%;
                 height: 100%;
             }
@@ -278,7 +276,7 @@
             > li {
                 list-style: none;
 
-                > .loading.image-small {
+                > .loading-box.image-small {
                     margin-right: $spacing-small;
                     width: 100px;
                     height: 100px;
@@ -504,38 +502,7 @@
         }
     }
 
-    .loading {
-        position: relative;
-
-        border-radius: $border-radius-large;
-
-        background: linear-gradient(
-                        to right,
-                        rgba($color-dark, 0) 8%,
-                        rgba($color-dark, 0.3) 38%,
-                        rgba($color-dark, 0) 54%
-                    ) no-repeat;
-        background-size: 1000px 100%;
-        animation: loading 1s infinite linear;
-
-        overflow: hidden;
-
-        &::after {
-            content: '';
-
-            position: absolute;
-            top: $padding;
-            right: $padding;
-            bottom: $padding;
-            left: $padding;
-
-            border-radius: calc($border-radius-large - $padding);
-            background-color: darken($color-background, 10%);
-            background-image: url("/assets/Noise.png");
-
-            opacity: 0.9;
-        }
-
+    .loading-box {
         &.title {
             margin-bottom: $spacing-small;
             height: calc($font-size-h1 + 10px);
@@ -551,13 +518,4 @@
             width: 100%;
         }
     }
-
-    @keyframes loading{
-        0%{
-            background-position: -600px 0
-        }
-        100%{
-            background-position: 600px 0
-        }
-    }
 </style>
\ No newline at end of file
diff --git a/front/src/styles/_loading_box.scss b/front/src/styles/_loading_box.scss
new file mode 100644
index 0000000..cccb540
--- /dev/null
+++ b/front/src/styles/_loading_box.scss
@@ -0,0 +1,43 @@
+$loading-box-padding: 1px;
+
+.loading-box {
+    position: relative;
+
+    border-radius: $border-radius-large;
+
+    background: linear-gradient(
+        to right,
+        rgba($color-dark, 0) 8%,
+        rgba($color-dark, 0.3) 38%,
+        rgba($color-dark, 0) 54%
+    ) no-repeat;
+    background-size: 1500px 100%;
+    animation: loading-box-glow 1s infinite linear;
+
+    overflow: hidden;
+
+    &::after {
+        content: '';
+
+        position: absolute;
+        top: $loading-box-padding;
+        right: $loading-box-padding;
+        bottom: $loading-box-padding;
+        left: $loading-box-padding;
+
+        border-radius: calc($border-radius-large - $loading-box-padding);
+        background-color: darken($color-background, 10%);
+        background-image: url("/assets/Noise.png");
+
+        opacity: 0.9;
+    }
+}
+
+@keyframes loading-box-glow {
+    0%{
+        background-position: -750px 0
+    }
+    100%{
+        background-position: 750px 0
+    }
+}
\ No newline at end of file
diff --git a/front/src/styles/main.scss b/front/src/styles/main.scss
index b7750ed..ea901d9 100644
--- a/front/src/styles/main.scss
+++ b/front/src/styles/main.scss
@@ -2,6 +2,7 @@
 
 @import "reset";
 @import "loading_bar";
+@import "loading_box";
 @import "navigation_bar";
 @import "footer";
 @import "announcement_banner";