CLASSROOMIO-T-127: Theming configuration

CLASSROOMIO-T-127: Add 4 themes configurations into the app

Clean up


Co-authored-by: Rotimi Best <rotimiibitoyeemma@gmail.com>


Merge-request: CLASSROOMIO-MR-51
Merged-by: Best Admin <best@digdippa.com>

src/routes/+error.svelte

@@ -24,12 +24,12 @@
       Something unexpected occured.
     </h2>
     <p class="dark:text-white w-full text-base font-normal my-6 text-gray-600">
-      Don't worry, your learning is safe. It isn't your fault, it is ours. We
-      have gotten the error notification and will push a fix ASAP. In the
-      meantime, take a short break and come back a bit later.
+      Don't worry, your learning is safe. It isn't your fault, it is ours. We have gotten the error
+      notification and will push a fix ASAP. In the meantime, take a short break and come back a bit
+      later.
     </p>
     <a
-      class="bg-blue-700 hover:bg-blue-900 hover:no-underline transition-all py-3 px-9 rounded-xl text-white mt-3"
+      class="bg-primary-700 hover:bg-primary-900 hover:no-underline transition-all py-3 px-9 rounded-xl text-white mt-3"
       href="mailto:support@classroomio.com">Contact Us</a
     >
   </div>

src/routes/+layout.server.js

@@ -1,8 +1,9 @@
 // import { redirect } from '@sveltejs/kit';
 import { blockedSubdomain } from '$lib/utils/constants/app';
+import { getCurrentOrg } from '$lib/utils/services/org';
 
 /** @type {import('./$types').LayoutServerLoad} */
-export const load = ({ url, cookies }) => {
+export const load = async ({ url, cookies }) => {
   // if (url.hostname === 'classroomio.com') {
   //   throw redirect(301, 'https://about.classroomio.com');
   // }
@@ -10,7 +11,8 @@ export const load = ({ url, cookies }) => {
   let response = {
     orgSiteName: '',
     isOrgSite: false,
-    skipAuth: false
+    skipAuth: false,
+    org: {}
   };
 
   const debugOrgLandingPage = cookies.get('debugOrgLandingPage');
@@ -26,6 +28,7 @@ export const load = ({ url, cookies }) => {
 
     response.isOrgSite = debugMode || answer;
     response.orgSiteName = debugMode ? 'codingdojo' : subdomain;
+    response.org = await getCurrentOrg(response.orgSiteName, true);
   } else if (subdomain === 'play' || debugPlay === 'true') {
     response.skipAuth = true;
   }

src/routes/+layout.svelte

@@ -34,7 +34,6 @@
   import { toggleBodyByTheme } from '$lib/utils/functions/app';
   import { appStore } from '$lib/utils/store/app';
   import { currentOrg } from '$lib/utils/store/org';
-  import { blockedSubdomain } from '$lib/utils/constants/app';
 
   import '../app.postcss';
 
@@ -48,6 +47,10 @@
     setTimeout(() => set(currentPreloading), 250);
   });
 
+  function setTheme(theme) {
+    document.body.className = document.body.className.concat(' ', theme);
+  }
+
   function setupSentry() {
     if (!dev) {
       Sentry.init({
@@ -173,6 +176,8 @@
           // By default redirect to first organization
           goto(`/org/${orgRes.currentOrg.siteName}`);
         }
+
+        setTheme(orgRes.currentOrg.theme);
       }
     }
   }
@@ -237,9 +242,11 @@
     }
 
     if (data.isOrgSite) {
+      console.log('data', data);
       $appStore.orgSiteName = data.orgSiteName;
       $appStore.isOrgSite = data.isOrgSite;
-      getCurrentOrg(data.orgSiteName);
+
+      currentOrg.set(data.org);
     }
 
     return () => {
@@ -357,7 +364,9 @@
     width: 100%;
   }
 
-  :global(.dark svg.dark path) {
+  :global(.dark svg.dark path),
+  :global(.active-sidenav svg.dark path),
+  :global(.active-sidenav svg.carbon-icon path) {
     fill: #fff;
   }
 

src/routes/+page.svelte

@@ -62,7 +62,7 @@
   -->
   <div>
     <h3 class="dark:text-white text-4xl text-center">
-      Classroom<span class="text-blue-700">IO</span>
+      Classroom<span class="text-primary-700">IO</span>
     </h3>
     <p class="dark:text-white text-lg text-center">
       The operating system for classroooms of the future 🚀🚀🚀.
@@ -90,7 +90,7 @@
   <div class="flex flex-col md:flex-row">
     {#each areas as area, index}
       <div
-        class="box m-3 bg-white dark:bg-gray-800 rounded-md py-3 px-12 active shadow-xl border-2 hover:border-blue-700 {animate}"
+        class="box m-3 bg-white dark:bg-gray-800 rounded-md py-3 px-12 active shadow-xl border-2 hover:border-primary-700 {animate}"
       >
         <h3 class="dark:text-white text-3xl">
           {#if index === 0}

src/routes/courses/[id]/attendance/+page.svelte

@@ -162,11 +162,11 @@
   <section class="my-5 mx-9">
     <StructuredList class="m-0">
       <!-- Moved the lesson headers outside the students loop -->
-      <StructuredListHead class="bg-blue-100">
+      <StructuredListHead class="bg-primary-100">
         <StructuredListRow head class="mx-7">
-          <StructuredListCell head class="text-blue-600 py-3">Student</StructuredListCell>
+          <StructuredListCell head class="text-primary-600 py-3">Student</StructuredListCell>
           {#each $lessons as lesson, index}
-            <StructuredListCell head class="text-blue-600 py-3"
+            <StructuredListCell head class="text-primary-600 py-3"
               >Lesson 0{getLectureNo(index + 1)}</StructuredListCell
             >
           {/each}

src/routes/courses/[id]/lessons/+page.svelte

@@ -29,6 +29,7 @@
   import { course, setCourse, group } from '$lib/components/Course/store';
   import PageBody from '$lib/components/PageBody/index.svelte';
   import TextChip from '$lib/components/Chip/Text.svelte';
+  import Avatar from '$lib/components/Apps/components/Poll/components/Avatar.svelte';
 
   export let data;
   const { courseId } = data;
@@ -143,7 +144,7 @@
               value={getLessonOrder(lesson.id)}
               size="sm"
               shape="rounded-full"
-              className="bg-blue-200 text-blue-600 text-xs"
+              className="bg-primary-200 text-primary-600 text-xs"
             />
           </div>
 
@@ -186,12 +187,10 @@
                   <p class="dark:text-white ml-2 text-sm mb-3">No tutor added</p>
                 {:else}
                   <a href="." class="flex items-center hover:underline mb-2">
-                    <img
-                      alt="Placeholder"
-                      class="block rounded-full"
-                      width="24"
-                      height="20"
+                    <Avatar
+                      className="w-6 h-6"
                       src={lesson.profile.avatar_url}
+                      name="Avatar placeholder"
                     />
                     <p class="dark:text-white ml-2 text-sm">
                       {lesson.profile.fullname}
@@ -231,7 +230,7 @@
                   <div class="flex">
                     <Video size={20} class="carbon-icon text-gray-400 dark:text-white ml-0.5" />
                     <a
-                      class="text-sm ml-2 text-blue-600"
+                      class="text-sm ml-2 text-primary-600"
                       href={lesson.call_url || '#'}
                       target="_blank"
                     >

src/routes/courses/[id]/people/+page.svelte

@@ -158,13 +158,13 @@
         class="bg-slate-100 dark:bg-neutral-800 dark:border-2 dark:border-neutral-800"
       >
         <StructuredListRow head class="mx-7">
-          <StructuredListCell head class="text-blue-700 py-3 dark:text-white"
+          <StructuredListCell head class="text-primary-700 py-3 dark:text-white"
             >Name</StructuredListCell
           >
-          <StructuredListCell head class="text-blue-700 py-3 dark:text-white"
+          <StructuredListCell head class="text-primary-700 py-3 dark:text-white"
             >Role</StructuredListCell
           >
-          <StructuredListCell head class="text-blue-700 py-3 dark:text-white"
+          <StructuredListCell head class="text-primary-700 py-3 dark:text-white"
             >Action</StructuredListCell
           >
           <RoleBasedSecurity allowedRoles={[1, 2]}>
@@ -192,7 +192,7 @@
                       <p class="dark:text-white text-base font-normal">
                         {person.profile.fullname}
                       </p>
-                      <p class="text-xs text-blue-600">
+                      <p class="text-xs text-primary-600">
                         {getEmail(person)}
                       </p>
                     </div>
@@ -210,12 +210,12 @@
                 <div class="flex items-center w-2/4 absolute bottom-3">
                   <TextChip
                     value={person.email.substring(0, 2).toUpperCase()}
-                    className="bg-blue-200 text-black font-semibold text-xs mr-3"
+                    className="bg-primary-200 text-black font-semibold text-xs mr-3"
                     shape="rounded-full"
                   />
                   <a
                     href="mailto:{person.email}"
-                    class="text-md text-blue-600 mr-2 dark:text-white"
+                    class="text-md text-primary-600 mr-2 dark:text-white"
                   >
                     {person.email}
                   </a>

src/routes/courses/[id]/submissions/+page.svelte

@@ -286,7 +286,7 @@
                     </p>
                   </a>
                   <a
-                    class="text-blue-700 text-md font-bold"
+                    class="text-primary-700 text-md font-bold"
                     href="{$page.url.pathname}?submissionId={item.id}"
                   >
                     {item.exercise.title}

src/routes/dashboard/+page.svelte

@@ -138,7 +138,7 @@
         <div class="header w-full flex items-center">
           <Datepicker bind:store let:key let:send let:receive>
             <button
-              class="text-lg font-bold text-blue-700 p-3 hover:bg-gray-300 rounded-md"
+              class="text-lg font-bold text-primary-700 p-3 hover:bg-gray-300 rounded-md"
               in:receive|local={{ key }}
               out:send|local={{ key }}
               on:click={() => {
@@ -150,7 +150,7 @@
           </Datepicker>
         </div>
       {:else}
-        <div class="header text-lg font-bold text-blue-700 flex px-5 items-center">
+        <div class="header text-lg font-bold text-primary-700 flex px-5 items-center">
           {formatDate($store?.selected)}
         </div>
       {/if}
@@ -174,14 +174,14 @@
               {/if}
             </a>
             <p class="dark:text-white text-grey text-sm flex items-center">
-              <a class="underline text-blue-700 my-2" href="/courses/{lessonData.course_id}">
+              <a class="underline text-primary-700 my-2" href="/courses/{lessonData.course_id}">
                 {` ${lessonData.course_title}`}
               </a>
             </p>
           </div>
           {#if lessonData.is_unlocked}
             <a
-              class="join-call rounded-3xl bg-blue-600 text-white py-3 font-bold shadow-lg {!lessonData.call_url &&
+              class="join-call rounded-3xl bg-primary-600 text-white py-3 font-bold shadow-lg {!lessonData.call_url &&
                 'opacity-50 pointer-events-none cursor-not-allowed'}"
               href={!!lessonData.call_url ? lessonData.call_url : undefined}
               target="_blank"

src/routes/forgot/+page.svelte

@@ -27,12 +27,9 @@
 
     try {
       loading = true;
-      const { data, error } = await supabase.auth.resetPasswordForEmail(
-        fields.email,
-        {
-          redirectTo: window.location.origin + ROUTE.RESET,
-        }
-      );
+      const { data, error } = await supabase.auth.resetPasswordForEmail(fields.email, {
+        redirectTo: window.location.origin + ROUTE.RESET
+      });
       console.log('data', data);
       if (error) throw error;
 
@@ -55,10 +52,8 @@
       <EmailSentIcon />
       <h3 class="dark:text-white text-xl font-semibold my-3">Email Sent!</h3>
       <p class="dark:text-white text-md mb-6 text-center">
-        We have sent a confirmation email to <span class="text-blue-700"
-          >{fields.email}</span
-        >. Kindly check your inbox to reset password or spam to reset your
-        password.
+        We have sent a confirmation email to <span class="text-primary-700">{fields.email}</span>.
+        Kindly check your inbox to reset password or spam to reset your password.
       </p>
     </div>
 
@@ -72,12 +67,8 @@
     </div>
   {:else}
     <div class="mt-4 w-full">
-      <h3 class="dark:text-white text-xl font-semibold my-3">
-        Forgot Password
-      </h3>
-      <p class="dark:text-white text-sm mb-6">
-        We will send you a reset link to your email
-      </p>
+      <h3 class="dark:text-white text-xl font-semibold my-3">Forgot Password</h3>
+      <p class="dark:text-white text-sm mb-6">We will send you a reset link to your email</p>
       <TextField
         label="Your email"
         bind:value={fields.email}
@@ -105,7 +96,7 @@
       <PrimaryButton
         label="Cancel"
         type="button"
-        className="sm:w-full w-full text-blue-700"
+        className="sm:w-full w-full text-primary-700"
         variant={VARIANTS.NONE}
         onClick={() => goto(ROUTE.LOGIN)}
       />

src/routes/lms/+page.svelte

@@ -30,7 +30,7 @@
         <PrimaryButton
           label="Start learning"
           variant={VARIANTS.CONTAINED_WHITE}
-          className="bg-white text-blue-800"
+          className="bg-white text-primary-800"
           onClick={() => goto('/lms/mylearning')}
         />
       </span>

src/routes/lms/exercises/+page.svelte

@@ -214,7 +214,7 @@
                     </p>
                   </a>
                   <a
-                    class="text-blue-700 text-md font-bold"
+                    class="text-primary-700 text-md font-bold"
                     href="{$page.url.pathname}?submissionId={item.id}"
                   >
                     {item.exercise.title}

src/routes/login/+page.svelte

@@ -71,12 +71,12 @@
       <p class="text-sm text-red-500">{submitError}</p>
     {/if}
     <div class="w-full text-right">
-      <a class="text-md text-blue-700" href="/forgot"> Forgot password? </a>
+      <a class="text-md text-primary-700" href="/forgot"> Forgot password? </a>
     </div>
   </div>
 
   <div class="my-4 w-full flex justify-end items-center">
-    <!-- <a href="/login" class="text-blue-700 text-sm">Create an account</a> -->
+    <!-- <a href="/login" class="text-primary-700 text-sm">Create an account</a> -->
     <PrimaryButton
       label="Log In"
       type="submit"

src/routes/onboarding/+page.svelte

@@ -29,7 +29,7 @@
   let fields: OnboardingField = {
     fullname: '',
     orgName: '',
-    siteName: '',
+    siteName: ''
   };
   let errors: OnboardingField = {};
   let progress = 50;
@@ -40,39 +40,39 @@
   const educatorGoals: Goal[] = [
     {
       label: 'Sell courses online',
-      value: 'sell-online',
+      value: 'sell-online'
     },
     {
       label: 'Teach my current students online',
-      value: 'teach-online',
+      value: 'teach-online'
     },
     {
       label: 'On another platform, expanding here',
-      value: 'expanding-platform',
+      value: 'expanding-platform'
     },
     {
       label: 'Just here to explore',
-      value: 'explore',
-    },
+      value: 'explore'
+    }
   ];
 
   const sources = [
     {
       label: 'Articles',
-      value: 'articles',
+      value: 'articles'
     },
     {
       label: 'Search engine',
-      value: 'search-engine',
+      value: 'search-engine'
     },
     {
       label: 'Social media',
-      value: 'social-media',
+      value: 'social-media'
     },
     {
       label: 'Friends and family',
-      value: 'friends-family',
-    },
+      value: 'friends-family'
+    }
   ];
 
   async function setMetaData() {
@@ -121,7 +121,7 @@
         .from('organization')
         .insert({
           name: fields.orgName,
-          siteName: fields.siteName,
+          siteName: fields.siteName
         })
         .select();
       console.log('Create organisation', org);
@@ -139,7 +139,7 @@
           .insert({
             organization_id: orgData.id,
             profile_id: $profile.id,
-            role_id: 1,
+            role_id: 1
           })
           .select();
         console.log('Create organisation member', data);
@@ -150,10 +150,7 @@
             'Something went wrong while creating this organization. Please reload and try again';
 
           // Delete organization so it can be recreated.
-          await supabase
-            .from('organization')
-            .delete()
-            .match({ siteName: fields.siteName });
+          await supabase.from('organization').delete().match({ siteName: fields.siteName });
           loading = false;
           return;
         }
@@ -175,7 +172,7 @@
         .update({
           ...fields,
           orgName: undefined,
-          siteName: undefined,
+          siteName: undefined
         })
         .match({ id: $profile.id });
       loading = false;
@@ -205,13 +202,7 @@
       <!-- Header With Logo -->
       <div class="flex flex-col items-center">
         <div class="flex items-center w-full justify-center mb-4">
-          <img
-            src="/logo-192.png"
-            alt="ClassroomIO logo"
-            height="50"
-            width="50"
-            data-atf="1"
-          />
+          <img src="/logo-192.png" alt="ClassroomIO logo" height="50" width="50" data-atf="1" />
           <h4 class="dark:text-white text-xl">ClassroomIO</h4>
         </div>
 
@@ -273,21 +264,14 @@
           <div id="goal-question" class="flex items-center flex-col mb-6">
             <div class="w-10/12">
               <!-- Goal Question -->
-              <div
-                class="w-full flex items-start flex-col justify-between mb-10"
-              >
-                <label
-                  for="text-field"
-                  class="dark:text-white m-0 text-lg font-normal mb-3"
-                >
+              <div class="w-full flex items-start flex-col justify-between mb-10">
+                <label for="text-field" class="dark:text-white m-0 text-lg font-normal mb-3">
                   What brings you to ClassroomIO?
                 </label>
 
                 <!-- Loop through Goals -->
                 {#each educatorGoals as goal}
-                  <label
-                    class="dark:text-white w-full inline-flex items-center mb-1 font-light"
-                  >
+                  <label class="dark:text-white w-full inline-flex items-center mb-1 font-light">
                     <input
                       type="radio"
                       bind:group={fields.goal}
@@ -308,18 +292,13 @@
 
               <!-- Source Question -->
               <div class="w-full flex items-start flex-col justify-between">
-                <label
-                  for="text-field"
-                  class="dark:text-white m-0 text-lg font-normal mb-3"
-                >
+                <label for="text-field" class="dark:text-white m-0 text-lg font-normal mb-3">
                   How did you hear about us?
                 </label>
 
                 <!-- Loop through Goals -->
                 {#each sources as source}
-                  <label
-                    class="dark:text-white w-full inline-flex items-center mb-1 font-light"
-                  >
+                  <label class="dark:text-white w-full inline-flex items-center mb-1 font-light">
                     <input
                       type="radio"
                       bind:group={fields.source}
@@ -346,7 +325,7 @@
       <div class="flex justify-between items-center mt-8 w-full">
         <div class="w-24 h-2 bg-gray-300 relative">
           <span
-            class="progress absolute top-0 left-0 bg-blue-700 h-full"
+            class="progress absolute top-0 left-0 bg-primary-700 h-full"
             style="width: {progress}%;"
           />
         </div>
@@ -356,7 +335,7 @@
             <PrimaryButton
               label="Back"
               variant={VARIANTS.NONE}
-              className="py-3 px-6 mr-2 text-blue-700"
+              className="py-3 px-6 mr-2 text-primary-700"
               onClick={() => (step = step - 1)}
             />
           {/if}

src/routes/org/[slug]/+page.svelte

@@ -222,7 +222,7 @@
           <div class="header w-full flex items-center">
             <Datepicker bind:store let:key let:send let:receive>
               <button
-                class="text-lg font-bold text-blue-700 p-3 hover:bg-gray-300 rounded-md"
+                class="text-lg font-bold text-primary-700 p-3 hover:bg-gray-300 rounded-md"
                 in:receive|local={{ key }}
                 out:send|local={{ key }}
                 on:click={() => {
@@ -258,14 +258,14 @@
                 {/if}
               </a>
               <p class="dark:text-white text-grey text-sm flex items-center">
-                <a class="underline text-blue-700 my-2" href="/courses/{lessonData.course_id}">
+                <a class="underline text-primary-700 my-2" href="/courses/{lessonData.course_id}">
                   {` ${lessonData.course_title}`}
                 </a>
               </p>
             </div>
             {#if lessonData.is_unlocked}
               <a
-                class="join-call rounded-3xl bg-blue-600 text-white py-3 font-bold shadow-lg {!lessonData.call_url &&
+                class="join-call rounded-3xl bg-primary-600 text-white py-3 font-bold shadow-lg {!lessonData.call_url &&
                   'opacity-50 pointer-events-none cursor-not-allowed'}"
                 href={!!lessonData.call_url ? lessonData.call_url : undefined}
                 target="_blank"

src/routes/org/[slug]/quiz/[slug]/+page.svelte

@@ -351,7 +351,7 @@
         {#each allThemes as _theme}
           <div
             class="theme rounded-md w-full border cursor-pointer mb-5 relative {$quizStore.theme ===
-              _theme.id && 'border-blue-700'}"
+              _theme.id && 'border-primary-700'}"
           >
             {#if $quizStore.theme === _theme.id}
               <CheckmarkFilledIcon

src/routes/org/[slug]/settings/domains/+page.svelte

@@ -9,9 +9,8 @@
 
 <section class="w-full max-w-6xl mx-auto">
   <div class="py-10 px-5">
-    <a
-      class="text-gray-500 dark:text-white text-md"
-      href={`${$currentOrgPath}/settings`}>Back to Settings</a
+    <a class="text-gray-500 dark:text-white text-md" href={`${$currentOrgPath}/settings?tab=org`}
+      >Back to Settings</a
     >
     <div class="flex items-center justify-between mb-10">
       <h1 class="dark:text-white text-3xl font-bold">Custom domain</h1>

src/routes/org/[slug]/settings/teams/+page.svelte

@@ -9,9 +9,8 @@
 
 <section class="w-full max-w-6xl mx-auto">
   <div class="py-10 px-5">
-    <a
-      class="text-gray-500 dark:text-white text-md"
-      href={`${$currentOrgPath}/settings`}>Back to Settings</a
+    <a class="text-gray-500 dark:text-white text-md" href={`${$currentOrgPath}/settings?tab=org`}
+      >Back to Settings</a
     >
     <div class="flex items-center justify-between mb-10">
       <h1 class="dark:text-white text-3xl font-bold">Team members</h1>

src/routes/profile/[id]/+page.svelte

@@ -118,7 +118,7 @@
         src={currentProfile.avatar_url}
         height="260"
         width="260"
-        class="rounded-full bg-light-blue-100 mb-4"
+        class="rounded-full bg-primary-100 mb-4"
       /> -->
       <UploadImage bind:avatar src={currentProfile.avatar_url} widthHeight="w-60 h-60" />
 
@@ -163,7 +163,7 @@
 
         <div class="hidden my-3 py-3 px-4 border shadow-sm rounded-md">
           <h4 class="dark:text-white m-0 font-normal">
-            <a class="text-blue-700 font-bold" href="/courses"> CitiBim </a>
+            <a class="text-primary-700 font-bold" href="/courses"> CitiBim </a>
           </h4>
           <p class="dark:text-white text-gray-500">
             Lorem ipsum dolor sit amet consectetur adipisicing elit. Non aliquam tenetur magnam.
@@ -183,7 +183,7 @@
 
         <div class="hidden my-2 py-3 px-4 border shadow-sm rounded-md">
           <h4 class="dark:text-white m-0 font-normal">
-            <a class="text-blue-700 font-bold" href="/courses"> Climate Change Group </a>
+            <a class="text-primary-700 font-bold" href="/courses"> Climate Change Group </a>
           </h4>
           <p class="dark:text-white text-gray-500">
             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo quasi autem quo possimus
@@ -200,7 +200,7 @@
           </div>
         </div>
       </div>
-      <PrimaryButton variant={VARIANTS.CONTAINED_DANGER} label="Log out" onClick={logout} />
+      <PrimaryButton variant={VARIANTS.OUTLINED} label="Log out" onClick={logout} />
     </div>
     <!-- {:else if loading}
     <Box>