From 81ff909dca9daa89c24f821ece77c159fc645234 Mon Sep 17 00:00:00 2001
From: Rotimi Best <best@classroomio.com>
Date: Sun, 20 Aug 2023 20:52:52 +0100
Subject: [PATCH] More themeing improvements

---
 .../Course/components/Ceritficate/Design.svelte           | 2 ++
 .../Course/components/Navigation/NavExpandable.svelte     | 2 +-
 .../components/Course/components/Navigation/index.svelte  | 2 +-
 src/lib/components/LMS/SideBar.svelte                     | 6 +++---
 src/lib/components/LMS/components/AllLearning.svelte      | 4 +++-
 src/lib/components/LMS/components/Completed.svelte        | 4 +++-
 src/lib/components/LMS/components/InProgress.svelte       | 4 +++-
 src/lib/components/LMS/components/Learning.svelte         | 2 +-
 src/lib/components/LMS/components/Student.svelte          | 8 ++------
 src/lib/components/Navigation/lms.svelte                  | 2 +-
 src/lib/components/Org/SideBar.svelte                     | 4 ++--
 src/lib/utils/services/org/index.js                       | 1 +
 src/routes/+layout.svelte                                 | 1 +
 src/routes/lms/+page.svelte                               | 2 +-
 14 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/src/lib/components/Course/components/Ceritficate/Design.svelte b/src/lib/components/Course/components/Ceritficate/Design.svelte
index b9069cd2..b86d2059 100644
--- a/src/lib/components/Course/components/Ceritficate/Design.svelte
+++ b/src/lib/components/Course/components/Ceritficate/Design.svelte
@@ -3,6 +3,7 @@
   import { goto } from '$app/navigation';
   import { updateCourse } from '$lib/utils/services/courses';
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
+  import { VARIANTS } from '$lib/components/PrimaryButton/constants';
   import TextArea from '$lib/components/Form/TextArea.svelte';
   import Professional from './certificates/Professional.svelte';
   import Plain from './certificates/Plain.svelte';
@@ -68,6 +69,7 @@
           </p>
           <PrimaryButton
             label="Go to Settings"
+            variant={VARIANTS.OUTLINED}
             className="rounded-md mt-3"
             onClick={() => goto(`org/${$currentOrg.siteName}/settings`)}
           />
diff --git a/src/lib/components/Course/components/Navigation/NavExpandable.svelte b/src/lib/components/Course/components/Navigation/NavExpandable.svelte
index fafc1751..dc571bdb 100644
--- a/src/lib/components/Course/components/Navigation/NavExpandable.svelte
+++ b/src/lib/components/Course/components/Navigation/NavExpandable.svelte
@@ -24,7 +24,7 @@
 
 <div class="">
   <button
-    class="item relative flex items-center py-3 px-4 ml-2 mb-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700 {isGroupActive &&
+    class="item relative flex items-center py-3 px-4 ml-2 mb-1 rounded hover:opacity-80 dark:hover:bg-gray-700 {isGroupActive &&
       NavClasses.active} w-[95%]"
     tabindex="0"
     on:click={onClick}
diff --git a/src/lib/components/Course/components/Navigation/index.svelte b/src/lib/components/Course/components/Navigation/index.svelte
index 43f08fbe..775b9aff 100644
--- a/src/lib/components/Course/components/Navigation/index.svelte
+++ b/src/lib/components/Course/components/Navigation/index.svelte
@@ -197,7 +197,7 @@
                     aria-disabled={!item.is_unlocked}
                   >
                     <div
-                      class="flex items-center py-3 px-4 rounded hover:bg-gray-200 dark:hover:bg-gray-800 w-full {(
+                      class="flex items-center py-3 px-4 rounded hover:opacity-80 w-full {(
                         path || $page.url.pathname
                       ).includes(item.id) && NavClasses.active}"
                     >
diff --git a/src/lib/components/LMS/SideBar.svelte b/src/lib/components/LMS/SideBar.svelte
index b877ec69..2066a82c 100644
--- a/src/lib/components/LMS/SideBar.svelte
+++ b/src/lib/components/LMS/SideBar.svelte
@@ -68,7 +68,7 @@
         {#each sideLinks as item (item.name)}
           <a href={item.link} class="text-black">
             <li
-              class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 dark:hover:bg-gray-500 {isActive(
+              class="flex items-center py-3 px-4 mb-2 rounded hover:opacity-80 {isActive(
                 $page.url.pathname,
                 `${item.link}`
               ) && NavClasses.active}"
@@ -77,7 +77,7 @@
                 this={item.icon}
                 color={isActive($page.url.pathname, `${item.link}`) ? 'black' : 'gray'}
                 size={24}
-                class="carbon-icon text-white"
+                class="carbon-icon "
               />
               <p class="dark:text-white ml-2">{item.name}</p>
             </li>
@@ -95,7 +95,7 @@
       </a>
       <a href="/lms/settings" class="text-black">
         <li
-          class="flex items-center py-3 px-4 mb-2 rounded {isActive(
+          class="flex items-center py-3 px-4 mb-2 rounded hover:opacity-80 {isActive(
             $page.url.pathname,
             `/lms/settings`
           ) && NavClasses.active}"
diff --git a/src/lib/components/LMS/components/AllLearning.svelte b/src/lib/components/LMS/components/AllLearning.svelte
index 5057a0f0..e849684f 100644
--- a/src/lib/components/LMS/components/AllLearning.svelte
+++ b/src/lib/components/LMS/components/AllLearning.svelte
@@ -38,7 +38,9 @@
                 {#if data.inProgress}
                   <div class="flex items-center gap-2">
                     <div class=" relative bg-[#EAEAEA] w-full h-1">
-                      <div class={`absolute top-0 left-0 bg-[#0233BD] h-full ${data.progress} ]`} />
+                      <div
+                        class={`absolute top-0 left-0 bg-primary-700 h-full ${data.progress} ]`}
+                      />
                     </div>
                     <p class="text-xs text-[#656565] dark:text-white">{data.progressRate}%</p>
                   </div>
diff --git a/src/lib/components/LMS/components/Completed.svelte b/src/lib/components/LMS/components/Completed.svelte
index e503b8da..0da8ae87 100644
--- a/src/lib/components/LMS/components/Completed.svelte
+++ b/src/lib/components/LMS/components/Completed.svelte
@@ -41,7 +41,9 @@
                 {#if data.inProgress}
                   <div class="flex items-center gap-2">
                     <div class=" relative bg-[#EAEAEA] w-full h-1">
-                      <div class={`absolute top-0 left-0 bg-[#0233BD] h-full ${data.progress} ]`} />
+                      <div
+                        class={`absolute top-0 left-0 bg-primary-700 h-full ${data.progress} ]`}
+                      />
                     </div>
                     <p class="text-xs text-[#656565] dark:text-white">{data.progressRate}%</p>
                   </div>
diff --git a/src/lib/components/LMS/components/InProgress.svelte b/src/lib/components/LMS/components/InProgress.svelte
index 7078d84d..9d2c53d6 100644
--- a/src/lib/components/LMS/components/InProgress.svelte
+++ b/src/lib/components/LMS/components/InProgress.svelte
@@ -38,7 +38,9 @@
                 {#if data.inProgress}
                   <div class="flex items-center gap-2">
                     <div class=" relative bg-[#EAEAEA] w-full h-1">
-                      <div class={`absolute top-0 left-0 bg-[#0233BD] h-full ${data.progress} ]`} />
+                      <div
+                        class={`absolute top-0 left-0 bg-primary-700 h-full ${data.progress} ]`}
+                      />
                     </div>
                     <p class="text-xs text-[#656565] dark:text-white">{data.progressRate}%</p>
                   </div>
diff --git a/src/lib/components/LMS/components/Learning.svelte b/src/lib/components/LMS/components/Learning.svelte
index 9b43e791..41d02980 100644
--- a/src/lib/components/LMS/components/Learning.svelte
+++ b/src/lib/components/LMS/components/Learning.svelte
@@ -37,7 +37,7 @@
               />
             </span>
             <div class="relative bg-[#EAEAEA] w-full h-1">
-              <div class={`absolute top-0 left-0 bg-[#0233BD] h-full ${data.progress} ]`} />
+              <div class={`absolute top-0 left-0 bg-primary-700 h-full ${data.progress} ]`} />
             </div>
           </div>
         {/each}
diff --git a/src/lib/components/LMS/components/Student.svelte b/src/lib/components/LMS/components/Student.svelte
index 4d39269c..ea177067 100644
--- a/src/lib/components/LMS/components/Student.svelte
+++ b/src/lib/components/LMS/components/Student.svelte
@@ -61,15 +61,11 @@
             <p class="text-lg font-semibold text-[#262626] dark:text-white">
               The essence of design collaboration
             </p>
-            <a href="#" class="text-sm font-normal text-[#0233BD] dark:text-white"
+            <a href="#" class="text-sm font-normal text-primary-700 dark:text-white"
               >Figma Introduction</a
             >
           </span>
-          <PrimaryButton
-            label="Join Call"
-            variant={VARIANTS.OUTLINED}
-            className="bg-transparent outline-1 outline-[#0233BD] text-[#0233BD] rounded-md hover:bg-[blue]"
-          />
+          <PrimaryButton label="Join Call" variant={VARIANTS.OUTLINED} className="" />
         </div>
       </span>
     {:else}
diff --git a/src/lib/components/Navigation/lms.svelte b/src/lib/components/Navigation/lms.svelte
index 32f472a6..bedfc52d 100644
--- a/src/lib/components/Navigation/lms.svelte
+++ b/src/lib/components/Navigation/lms.svelte
@@ -21,7 +21,7 @@
   }
 </script>
 
-<nav class="{navClass} flex w-full p-2 md:px-6 bg-primary-600">
+<nav class="{navClass} flex w-full p-2 md:px-6 bg-primary-700">
   <ul class="flex w-full items-center">
     <div class="">
       <a href={$page.url.pathname} title="Go to ClassroomIO Home" id="logo" class="text-lg">
diff --git a/src/lib/components/Org/SideBar.svelte b/src/lib/components/Org/SideBar.svelte
index 0816f221..43fd230c 100644
--- a/src/lib/components/Org/SideBar.svelte
+++ b/src/lib/components/Org/SideBar.svelte
@@ -77,7 +77,7 @@
         {#each menuItems as menuItem}
           <a href="{$currentOrgPath}{menuItem.path}" class="text-black no-underline">
             <li
-              class="flex items-center py-3 px-4 mb-2 rounded hover:bg-primary-200 dark:hover:bg-gray-700 {isActive(
+              class="flex items-center py-3 px-4 mb-2 rounded hover:opacity-80 {isActive(
                 $page.url.pathname,
                 `${$currentOrgPath}${menuItem.path}`
               ) && NavClasses.active}"
@@ -114,7 +114,7 @@
       </a>
       <a href="{$currentOrgPath}/settings" class="text-black no-underline">
         <li
-          class="flex items-center py-3 px-4 mb-2 rounded {isActive(
+          class="flex items-center py-3 px-4 mb-2 rounded hover:opacity-80 {isActive(
             $page.url.pathname,
             `${$currentOrgPath}/settings`
           ) && NavClasses.active}"
diff --git a/src/lib/utils/services/org/index.js b/src/lib/utils/services/org/index.js
index ca708227..d31c694d 100644
--- a/src/lib/utils/services/org/index.js
+++ b/src/lib/utils/services/org/index.js
@@ -150,6 +150,7 @@ export async function getCourseBySiteName(siteName) {
     name: 'ClassroomIO',
     shortName: '',
     siteName: '',
+    theme: '',
     avatar_url: '/logo-192.png'
   });
   currentOrg.set(org);
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 74b4d322..319b4d90 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -247,6 +247,7 @@
       $appStore.isOrgSite = data.isOrgSite;
 
       currentOrg.set(data.org);
+      setTheme(data.org.theme);
     }
 
     return () => {
diff --git a/src/routes/lms/+page.svelte b/src/routes/lms/+page.svelte
index e9cd5df7..57cd61b0 100644
--- a/src/routes/lms/+page.svelte
+++ b/src/routes/lms/+page.svelte
@@ -20,7 +20,7 @@
   <div class="m-5">
     <h1 class="text-3xl font-semibold">Dashboard</h1>
     <div
-      class="w-full h-fit lg:h-[265px] flex md:items-center justify-between flex-col-reverse md:flex-row p-5 lg:p-10 rounded-md bg-[#042172] my-2"
+      class="w-full h-fit lg:h-[265px] flex md:items-center justify-between flex-col-reverse md:flex-row p-5 lg:p-10 rounded-md bg-primary-900 my-2"
     >
       <span>
         <p class="w-full md:w-[75%] lg:w-[80%] text-white text-xs lg:text-xl font-normal mb-5">