From cf27f64b67226d7cec1d8cd458c47ee0a2228814 Mon Sep 17 00:00:00 2001
From: emmanuel <ifeanyi@digdippa.com>
Date: Tue, 18 Jul 2023 07:10:58 +0100
Subject: [PATCH] CLASSROOMIO-T-47:fixed the dark mode and also made the it
 vertically aligned on mobile

---
 src/routes/404.svelte | 58 ++++++++++++++++++++++++++-----------------
 1 file changed, 35 insertions(+), 23 deletions(-)

diff --git a/src/routes/404.svelte b/src/routes/404.svelte
index b1f4e24a..c213718f 100644
--- a/src/routes/404.svelte
+++ b/src/routes/404.svelte
@@ -1,42 +1,54 @@
 <script>
   import { stores, goto } from '@sapper/app';
-  const { page } = stores();
+  import { appStore } from '../utils/store/app';
   import PrimaryButton from '../components/PrimaryButton/index.svelte';
+  const { page } = stores();
   const src = './bg-404.png';
 
   $: console.log('route', $page);
 </script>
 
 <div
-  style="background-image:url({src});
-background-size:contain"
-  class="error flex items-center justify-center w-screen overflow-hidden"
+  style={$appStore.isDark ? `background-image:url(${src})` : ''}
+  class={`error bg-gray-200 bg-no-repeat bg-cover flex items-center justify-center w-screen gap-20`}
 >
-  <div
-    class="error flex items-center justify-center gap-20 bg-gray-200 dark:bg-transparent"
-  >
-    <div class=" dark:text-white gap-3 w-2/5">
-      <p class="text-3xl dark:text-white font-semibold mb-5">
-        Oops😕,where did the page go?
-      </p>
-      <p class="text-base text-gray-600 dark:text-white mb-5">
-        We're sorry, but something went wrong and we can't show you the page
-        you're looking for. In the meantime, here's a joke to make you laugh:<br
-        />
-        What do you call a fish with no eyes? Fsh!
-      </p>
-      <PrimaryButton
-        label="Go to Home"
-        className="rounded-md"
-        onClick={() => goto('/')}
+  <div class=" dark:text-white gap-3 w-4/5 lg:w-2/5">
+    <p class="text-3xl dark:text-white font-semibold mb-5">
+      Oops😕,where did the page go?
+    </p>
+    <p class="text-base text-gray-600 dark:text-white mb-5">
+      We're sorry, but something went wrong and we can't show you the page
+      you're looking for. In the meantime, here's a joke to make you laugh:<br
       />
-    </div>
-    <img src="/classroom-404.png" alt="classroomio_error_image" />
+      What do you call a fish with no eyes? Fsh!
+    </p>
+    <PrimaryButton
+      label="Go to Home"
+      className="rounded-md"
+      onClick={() => goto('/')}
+    />
   </div>
+
+  <img
+    src="/classroom-404.png"
+    alt="classroomio_error_image"
+    class="errorImg"
+  />
 </div>
 
 <style>
   .error {
     height: calc(100vh - 57px);
   }
+
+  @media (max-width: 920px) {
+    .error {
+      flex-direction: column-reverse;
+      gap: 20px;
+    }
+    .errorImg {
+      width: 160px;
+      height: 160px;
+    }
+  }
 </style>