CLASSROOMIO-T-41: Implement dark/light mode switch

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

Merge-request: CLASSROOMIO-MR-8
Merged-by: Digdippa Team <digdippa@gmail.com>

src/components/Org/Settings/Domains.svelte

@@ -9,6 +9,7 @@
   import { supabase } from '../../../utils/functions/supabase';
   import { snackbarStore } from '../../Snackbar/store';
   import { SNACKBAR_SEVERITY } from '../../Snackbar/constants';
+  import SectionTitle from '../SectionTitle.svelte';
 
   let siteName;
   let errors = '';
@@ -56,7 +57,7 @@
   <Row class="py-7 border border-t-0 border-l-0 border-r-0 border-gray-300">
     <Column sm={2} md={2} lg={4} class="text-lg"><strong>Add</strong></Column>
     <Column sm={2} md={6} lg={8}>
-      <p class="text-md text-gray-500 mb-5">
+      <p class="text-md text-gray-500 dark:text-gray-200 mb-5">
         Add your team mates or collaborators to your organization. Start working
         together
       </p>
@@ -86,11 +87,11 @@
 
   <Row class="py-7 border border-t-0 border-l-0 border-r-0 border-gray-300">
     <Column sm={2} md={2} lg={4} class="text-lg"
-      ><strong>Custom domain</strong></Column
+      ><SectionTitle>Custom domain</SectionTitle></Column
     >
     <Column sm={2} md={6} lg={8}>
       <div class="flex items-center">
-        <p class="mr-3">Add your own domain name</p>
+        <p class="dark:text-white mr-3">Add your own domain name</p>
         <ComingSoon />
       </div>
     </Column>

src/components/Org/Settings/OrgSettings.svelte

@@ -9,6 +9,7 @@
   import { snackbarStore } from '../../Snackbar/store';
   import { SNACKBAR_SEVERITY } from '../../Snackbar/constants';
   import { currentOrg } from '../../../utils/store/org';
+  import SectionTitle from '../SectionTitle.svelte';
 
   let avatar;
   let loading = false;
@@ -79,7 +80,9 @@
 
 <Grid class="border rounded border-gray-200 w-full mt-5">
   <Row class="py-7 border border-t-0 border-l-0 border-r-0 border-gray-300">
-    <Column sm={2} md={2} lg={4}><strong>Organization Profile</strong></Column>
+    <Column sm={2} md={2} lg={4}
+      ><SectionTitle>Organization Profile</SectionTitle></Column
+    >
     <Column sm={2} md={6} lg={8}>
       <TextField
         label="Organization Name"
@@ -102,16 +105,18 @@
     </Column>
   </Row>
   <!-- <Row class="py-7 border border-t-0 border-l-0 border-r-0 border-gray-300">
-    <Column sm={2} md={2} lg={4}><strong>Theme</strong></Column>
+    <Column sm={2} md={2} lg={4}><SectionTitle>Theme</SectionTitle></Column>
     <Column sm={2} md={6} lg={8}>
-      <h4>Set your brand</h4>
+      <h4 class="dark:text-white">Set your brand</h4>
     </Column>
   </Row> -->
   <Row class="py-7 border border-t-0 border-l-0 border-r-0 border-gray-300">
-    <Column sm={2} md={2} lg={4}><strong>Custom Domain</strong></Column>
+    <Column sm={2} md={2} lg={4}
+      ><SectionTitle>Custom Domain</SectionTitle></Column
+    >
     <Column sm={2} md={6} lg={8}>
-      <h4>Customise your Domain</h4>
-      <p class="text-sm text-gray-500">
+      <h4 class="dark:text-white">Customise your Domain</h4>
+      <p class="text-sm text-gray-500 dark:text-gray-200">
         Create a custom URL so your audience can get to your organization easily
       </p>
       <PrimaryButton
@@ -123,10 +128,10 @@
     </Column>
   </Row>
   <Row class="py-7 border border-t-0 border-l-0 border-r-0 border-gray-300">
-    <Column sm={2} md={2} lg={4}><strong>Team</strong></Column>
+    <Column sm={2} md={2} lg={4}><SectionTitle>Team</SectionTitle></Column>
     <Column sm={2} md={6} lg={8}>
-      <h4>Set up your website</h4>
-      <p class="text-sm text-gray-500">
+      <h4 class="dark:text-white">Set up your website</h4>
+      <p class="text-sm text-gray-500 dark:text-gray-200">
         Add team mates to your organization so you can both collaborate on
         projects.
       </p>

src/components/Org/Settings/Profile.svelte

@@ -2,6 +2,7 @@
   import { goto } from '@sapper/app';
   import { Grid, Row, Column } from 'carbon-components-svelte';
   import TextField from '../../Form/TextField.svelte';
+  import SectionTitle from '../SectionTitle.svelte';
   import PrimaryButton from '../../PrimaryButton/index.svelte';
   import { VARIANTS } from '../../PrimaryButton/constants';
   import UploadImage from '../../UploadImage/index.svelte';
@@ -82,7 +83,9 @@
 
 <Grid class="border rounded border-gray-200 w-full mt-5">
   <Row class="py-7 border border-t-0 border-l-0 border-r-0 border-gray-300">
-    <Column sm={2} md={2} lg={4}><strong>Profile Picture</strong></Column>
+    <Column sm={2} md={2} lg={4}>
+      <SectionTitle>Profile Picture</SectionTitle>
+    </Column>
     <Column sm={2} md={6} lg={8}>
       <UploadImage
         bind:avatar
@@ -92,7 +95,9 @@
     </Column>
   </Row>
   <Row class="py-7 border border-t-0 border-l-0 border-r-0 border-gray-300">
-    <Column sm={2} md={2} lg={4}><strong>Personal Information</strong></Column>
+    <Column sm={2} md={2} lg={4}>
+      <SectionTitle>Personal Information</SectionTitle>
+    </Column>
     <Column sm={2} md={6} lg={8}>
       <TextField
         label="Full Name"

src/components/Org/Settings/TeamMembers.svelte

@@ -20,6 +20,7 @@
   import { getOrgTeam } from '../../../utils/services/org';
   import { profile } from '../../../utils/store/user';
   import { supabase } from '../../../utils/functions/supabase';
+  import SectionTitle from '../SectionTitle.svelte';
 
   let emailsStr = '';
   let errorMessage = '';
@@ -128,9 +129,11 @@
 
 <Grid class="border rounded border-gray-200 w-full mt-5">
   <Row class="py-7 border border-t-0 border-l-0 border-r-0 border-gray-300">
-    <Column sm={2} md={2} lg={4} class="text-lg"><strong>Add</strong></Column>
+    <Column sm={2} md={2} lg={4} class="text-lg"
+      ><SectionTitle>Add</SectionTitle></Column
+    >
     <Column sm={2} md={6} lg={8}>
-      <p class="text-md text-gray-500 mb-5">
+      <p class="text-md text-gray-500 dark:text-gray-200 mb-5">
         Add your team mates or collaborators to your organization. Start working
         together
       </p>
@@ -161,7 +164,7 @@
 
   <Row class="py-7 border border-t-0 border-l-0 border-r-0 border-gray-300">
     <Column sm={2} md={2} lg={4} class="text-lg"
-      ><strong>Members</strong></Column
+      ><SectionTitle>Members</SectionTitle></Column
     >
     <Column sm={2} md={6} lg={8}>
       {#if isFetching}
@@ -170,7 +173,7 @@
         {#each $orgTeam as teamMember}
           <div class="flex justify-between items-center mb-5">
             <div class="flex">
-              <p class="text-sm text-gray-500 mr-3">
+              <p class="text-sm text-gray-500 dark:text-gray-200 mr-3">
                 {teamMember.email}
               </p>
               <TextChip