CLASSROOMIO-T-47: Created the not found page

CLASSROOMIO-T-47: Fixed the dark mode and then made it responsive

CLASSROOMIO-T-47:Fixed the dark mode and then made it responsive

CLASSROOMIO-T-47:fixed the dark mode and also made the it vertically aligned on mobile

CLASSROOMIO-T-47: Update nav for lms only

CLASSROOMIO-T-47: Reorder file

CLASSROOMIO-T-47:fixed the prettier config and resaved

CLASSROOMIO-T-47:Created the not found page


Co-authored-by: Ifeanyi Nwosu <[email protected]>
Co-authored-by: Rotimi Best <[email protected]>
Co-authored-by: emmanuel <[email protected]>


Merge-request: CLASSROOMIO-MR-18
Merged-by: Best Admin <[email protected]>

package.json

@@ -95,4 +95,4 @@
     "linux": {},
     "mac": {}
   }
-}
+}

src/components/Navigation/index.svelte

@@ -1,6 +1,7 @@
 <script>
   import { goto, stores } from '@sapper/app';
   import { user } from '../../utils/store/user';
+  import { appStore } from '../../utils/store/app';
   import { isCoursePage } from '../../utils/functions/app';
   import PrimaryButton from '../PrimaryButton/index.svelte';
   import { VARIANTS } from '../PrimaryButton/constants';
@@ -86,7 +87,9 @@
     <span class="flex-grow" />
 
     {#if $user.isLoggedIn}
-      <li><a class="block" href="/lms"> Go to LMS </a></li>
+      {#if $appStore.isStudentDomain}
+        <li><a class="block" href="/lms"> Go to LMS </a></li>
+      {/if}
     {:else}
       <li>
         {#if !disableLogin}

src/routes/404.svelte

@@ -1,6 +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={$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=" 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
+      />
+      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>