CLASSROOMIO-T-45: Add logo and name to logo

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

Merge-request: CLASSROOMIO-MR-11
Merged-by: Digdippa Team <[email protected]>

src/components/Navigation/index.svelte

@@ -1,11 +1,13 @@
 <script>
   import { goto } from '@sapper/app';
-  import { user, profile } from '../../utils/store/user';
+  import { user } from '../../utils/store/user';
   import PrimaryButton from '../PrimaryButton/index.svelte';
   import { VARIANTS } from '../PrimaryButton/constants';
 
   export let segment;
   export let disableLogin;
+  export let logo = '/logo-192.png';
+  export let orgName = 'ClassroomIO';
 
   let navClass = '';
 
@@ -17,10 +19,10 @@
 >
   <ul class="flex w-full items-center">
     <div class="logo">
-      <a href="/" title="Go to ClassroomIO Home" id="logo" data-hveid="8">
+      <a href="/" title={`Go to ${orgName} Home`} id="logo" data-hveid="8">
         <img
-          src="/logo-192.png"
+          src={logo}
-          alt="ClassroomIO logo"
+          alt={`${orgName} logo`}
           class="rounded h-10 w-10 inline-block mx-auto"
           data-atf="1"
         />

src/components/Org/LandingPage/index.svelte

@@ -13,6 +13,7 @@
   import { courses, courseMetaDeta } from '../../Courses/store';
   import { getCourseBySiteName } from '../../../utils/services/org';
   import { appStore } from '../../../utils/store/app';
+  import { currentOrg } from '../../../utils/store/org';
 
   export let segment;
 
@@ -30,7 +31,11 @@
 </script>
 
 <main>
-  <Navigation {segment} />
+  <Navigation
+    {segment}
+    logo={$currentOrg.avatar_url}
+    orgName={$currentOrg.name}
+  />
 
   <!-- Header Section -->
   <header class="banner w-full flex items-center justify-center p-">
@@ -95,18 +100,18 @@
       <div class="logo">
         <a
           href="/"
-          title="Go to ClassroomIO Home"
+          title={`Go to ${$currentOrg.name} Home`}
           id="logo"
           data-hveid="8"
           class="flex items-center"
         >
           <img
-            src="/logo-192.png"
+            src={`${$currentOrg.avatar_url}`}
-            alt="ClassroomIO logo"
+            alt={`${$currentOrg.name} logo`}
             class="rounded h-10 w-10 inline-block mx-auto"
             data-atf="1"
           />
-          <h3 class="text-black ml-3">Classroomio</h3>
+          <h3 class="text-black ml-3">{$currentOrg.name}</h3>
         </a>
       </div>
 

src/utils/services/org/index.js

@@ -1,3 +1,4 @@
+import get from 'lodash/get';
 import { supabase } from '../../functions/supabase';
 import { orgs, currentOrg, orgAudience, orgTeam } from '../../store/org';
 import { ROLE, ROLE_LABEL } from '../../constants/roles';
@@ -141,5 +142,7 @@ export async function getCourseBySiteName(siteName) {
     return [];
   }
 
+  currentOrg.set(get(data, '[0].group.organization'));
+
   return data;
 }