CLASSROOMIO-T-50: Welcome modal for Educators

CLASSROOMIO-T-50: Dashboard styles Update

CLASSROOMIO-T-50: Store Update

CLASSROOMIO-T-50: Undo Changes in Files

CLASSROOMIO-T-50: Welcome Modal File Update

Merge branch 'main' into CLASSROOMIO-T-50

CLASSROOMIO-T-50: Text color update

Merge branch 'CLASSROOMIO-T-50' of https://gitlab.com/thenextgreat/classroomio into CLASSROOMIO-T-50

CLASSROOMIO-T-50: Modal Update & Banner Update

Merge branch 'CLASSROOMIO-T-50'

CLASSROOMIO-T-50: Welcome Modal Update

CLASSROOMIO-T-50: Modal Update & Banner Update

CLASSROOMIO-T-50: Added the modal

CLASSROOMIO-T-50:
- Created the modal component
- Imported it in the dashboard route


Co-authored-by: Tunji Adeyemi <[email protected]>


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

src/components/WelcomeModal/WelcomeModal.svelte

@@ -0,0 +1,23 @@
+<script>
+    import Modal from '../Modal/index.svelte'
+    import { writable } from 'svelte/store';
+    import { onMount, onDestroy } from 'svelte';
+    import { welcomeModalStore } from './store';
+
+    const closeModal  = () => {
+        $welcomeModalStore.open = false;
+    }
+
+</script>
+
+<Modal
+    onClose={closeModal}
+    bind:open={$welcomeModalStore.open}
+    width="w-9/12"
+    modalHeading="Welcome"
+>
+    <p class="text-black text-sm md:text-base lg:text-lg">
+        We at <a href="https://app.classroomio.com/" class="text-blue-700 no-underline hover:no-underline">ClassroomIO</a> are a small team with a large mission to empower educators with great technology to help them train the future generation. Education is the most powerful gift you can give anyone, and it makes so much sense to give you all the tools you need to give more people this GIFT. <span class="text-blue-700">Thank you for choosing us;</span> we deeply appreciate it and are at your service.
+    </p>
+    <img src="/images/welcome-modal-banner.png" alt="A welcome banner" class="w-full my-6">
+</Modal>

src/components/WelcomeModal/store.js

@@ -0,0 +1,5 @@
+import {writable} from 'svelte/store';
+
+export const welcomeModalStore = writable({
+    open: false
+});

src/routes/dashboard.svelte

@@ -130,6 +130,7 @@
 
   // Every time the date changes
   $: selectedDateLessonData = getDataOfSelectedDate($store?.selected);
+
 </script>
 
 <svelte:head>

src/routes/onboarding.svelte

@@ -16,6 +16,7 @@
   import { onboardingValidation } from '../utils/functions/validator';
   import { supabase } from '../utils/functions/supabase';
   import { blockedSubdomain } from '../utils/constants/app';
+  import { welcomeModalStore } from '../components/WelcomeModal/store';
 
   interface OnboardingField {
     fullname?: string;
@@ -187,6 +188,7 @@
 
       console.log('data', data);
       console.log('error', error);
+      $welcomeModalStore.open = true;
       return goto(`/org/${fields.siteName}`);
     }
 

src/routes/org/[slug]/index.svelte

@@ -12,7 +12,6 @@
   import { goto } from '@sapper/app';
   import PrimaryButton from '../../../components/PrimaryButton/index.svelte';
   import Avatar from '../../../components/Avatar/index.svelte';
-  import { onMount } from 'svelte';
   import { InlineCalendar, Datepicker } from 'svelte-calendar';
   import CheckmarkFilled20 from 'carbon-icons-svelte/lib/CheckmarkFilled20';
   import {
@@ -26,6 +25,8 @@
     UserLessonDataType,
     LessonsByMonthIndexType,
   } from '../../../utils/types';
+  import WelcomeModal from '../../../components/WelcomeModal/WelcomeModal.svelte';
+  import { onMount } from 'svelte';
 
   export let orgName: string;
 
@@ -191,9 +192,9 @@
   }
 
   onMount(() => {
-    // Remove default shouldEnlargeDay=true when using <DatePicker /> on mobile
+    // Remove default shouldEnlargeDay=true when <DatePicker /> on mobile
     if ($store && $store.shouldEnlargeDay) {
-      $store.shouldEnlargeDay = false;
+      $store.shouldEnlargeDay = false
     }
   });
 
@@ -208,6 +209,8 @@
   <title>Dashboard - ClassroomIO</title>
 </svelte:head>
 
+<WelcomeModal />
+
 <div class="py-10 px-5 w-full max-w-7xl mx-auto">
   <div class="flex items-center justify-between mb-10">
     <h1 class="dark:text-white text-3xl font-bold">Dashboard</h1>
@@ -396,4 +399,4 @@
       font-size: 30px;
     }
   }
-</style>
+</style>