From e2e68ab1fb5fa08b357017cc58dd9da829ebccc7 Mon Sep 17 00:00:00 2001
From: Fluffy-Bean <michal-gdula@protonmail.com>
Date: Mon, 29 Apr 2024 19:19:28 +0100
Subject: [PATCH] Nicer error page for Item page

---
 front/src/pages/Page404.svelte  |  2 +-
 front/src/pages/Page500.svelte  |  2 +-
 front/src/pages/PageItem.svelte | 41 ++++++++++++++++++++++++---------
 front/src/styles/vars.scss      |  1 +
 4 files changed, 33 insertions(+), 13 deletions(-)

diff --git a/front/src/pages/Page404.svelte b/front/src/pages/Page404.svelte
index 8603b36..6eabb96 100644
--- a/front/src/pages/Page404.svelte
+++ b/front/src/pages/Page404.svelte
@@ -23,7 +23,7 @@
         justify-content: center;
         align-items: center;
 
-        font-size: 50px;
+        font-size: $font-size-very-fucking-big;
         text-align: center;
     }
     p {
diff --git a/front/src/pages/Page500.svelte b/front/src/pages/Page500.svelte
index 1990f3b..7a753f6 100644
--- a/front/src/pages/Page500.svelte
+++ b/front/src/pages/Page500.svelte
@@ -23,7 +23,7 @@
         justify-content: center;
         align-items: center;
 
-        font-size: 50px;
+        font-size: $font-size-very-fucking-big;
         text-align: center;
     }
     p {
diff --git a/front/src/pages/PageItem.svelte b/front/src/pages/PageItem.svelte
index 21e32b3..0f8863a 100644
--- a/front/src/pages/PageItem.svelte
+++ b/front/src/pages/PageItem.svelte
@@ -1,5 +1,6 @@
 <script>
     import { replace } from "svelte-spa-router";
+    import { SmileySad } from "phosphor-svelte";
 
     import MenuList from "%/components/MenuList.svelte";
     import LoadingBar from "%/components/LoadingBar.svelte";
@@ -65,8 +66,10 @@
             </div>
         </div>
     {:catch error}
-        <p>Server fucking died...</p>
-        <p>{error}</p>
+        <div id="error">
+            <h1>Server fucking died...&nbsp;<SmileySad weight="fill" /></h1>
+            <p>Error: {error.message}</p>
+        </div>
     {/await}
 </div>
 
@@ -160,7 +163,8 @@
     }
 
     .other {
-        margin: 0 auto;
+        margin-left: auto;
+        margin-right: auto;
         max-width: $sizing-default-width;
     }
 
@@ -168,6 +172,29 @@
         position: relative;
     }
 
+    #error {
+        margin-left: auto;
+        margin-right: auto;
+        padding: $spacing-large;
+
+        max-width: $sizing-default-width;
+
+        display: flex;
+        flex-direction: column;
+
+        > h1 {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            font-size: $font-size-very-fucking-big;
+            text-align: center;
+        }
+        > p {
+            text-align: center;
+        }
+    }
+
     .loading {
         position: relative;
 
@@ -208,14 +235,6 @@
         }
     }
 
-    @media only screen and (max-width: 670px) {
-        .announcement-banner-loading {
-            margin: -$spacing-small;
-            margin-bottom: 0;
-            height: 250px;
-        }
-    }
-
     @keyframes loading{
         0%{
             background-position: -500px 0
diff --git a/front/src/styles/vars.scss b/front/src/styles/vars.scss
index 5991895..d56b3ab 100644
--- a/front/src/styles/vars.scss
+++ b/front/src/styles/vars.scss
@@ -35,6 +35,7 @@ $spacing-large: 32px;
 // FONT
 $font-family: 'Erode', serif;
 
+$font-size-very-fucking-big: 50px;
 $font-size-h1: 32.44px;
 $font-size-h2: 28.83px;
 $font-size-h3: 25.63px;