From d12e63a55e7e1a849e5e74647da42cf7b84a2aa6 Mon Sep 17 00:00:00 2001
From: tunny17 <best@classroomio.com>
Date: Thu, 10 Aug 2023 12:22:30 +0000
Subject: [PATCH] CLASSROOMIO-T-84: Redesign of Lesson Tab

CLASSROOMIO-T-84: Unresolved Fix

CLASSROOMIO-T-84: Quick fix

CLASSROOMIO-T-84: Unresolved Fix

Merge branch 'main' into CLASSROOMIO-T-84

CLASSROOMIO-T-84: Redesign of Lesson Tab

CLASSROOMIO-T-84: Tabs Testing


Co-authored-by: Tunji Adeyemi <tunji@digdippa.com>
Co-authored-by: tunny17 <tvnji17@gmail.com>


Merge-request: CLASSROOMIO-MR-39
Merged-by: Best Admin <best@digdippa.com>
---
 .../components/Lesson/Materials/constants.js  | 17 +++--
 .../components/Lesson/Materials/index.svelte  | 66 +++++++++----------
 src/lib/components/Navigation/app.svelte      |  2 +-
 src/lib/components/Tabs/index.svelte          | 31 +++++----
 4 files changed, 63 insertions(+), 53 deletions(-)

diff --git a/src/lib/components/Course/components/Lesson/Materials/constants.js b/src/lib/components/Course/components/Lesson/Materials/constants.js
index bb3199fe..da4f283e 100644
--- a/src/lib/components/Course/components/Lesson/Materials/constants.js
+++ b/src/lib/components/Course/components/Lesson/Materials/constants.js
@@ -1,17 +1,22 @@
+import { Video, Notebook, PresentationFile } from 'carbon-icons-svelte';
+
 export const tabs = [
   {
-    label: 'Slide',
+    label: 'Note',
+    icon: Notebook,
     value: 1,
-    badgeValue: 0,
+    badgeValue: 0
   },
   {
-    label: 'Note',
+    label: 'Slide',
+    icon: PresentationFile,
     value: 2,
-    badgeValue: 0,
+    badgeValue: 0
   },
   {
     label: 'Video',
+    icon: Video,
     value: 3,
-    badgeValue: 0,
-  },
+    badgeValue: 0
+  }
 ];
diff --git a/src/lib/components/Course/components/Lesson/Materials/index.svelte b/src/lib/components/Course/components/Lesson/Materials/index.svelte
index f94e8dfe..21f0a142 100644
--- a/src/lib/components/Course/components/Lesson/Materials/index.svelte
+++ b/src/lib/components/Course/components/Lesson/Materials/index.svelte
@@ -139,39 +139,6 @@
 <Tabs {tabs} {currentTab} {onChange}>
   <slot:fragment slot="content">
     <TabContent value={tabs[0].value} index={currentTab}>
-      {#if mode === MODES.edit}
-        <TextField
-          label="Slide link"
-          bind:value={$lesson.materials.slide_url}
-          onChange={() => ($isLessonDirty = true)}
-        />
-      {:else if $lesson.materials.slide_url}
-        <iframe
-          title="Embeded Slides"
-          src={$lesson.materials.slide_url}
-          frameborder="0"
-          width="100%"
-          height="569"
-          class="iframe"
-          allowfullscreen="true"
-          mozallowfullscreen="true"
-          webkitallowfullscreen="true"
-        />
-      {:else}
-        <Box>
-          <div class="flex justify-between flex-col items-center w-96">
-            <img src="/images/empty-slide-icon.svg" alt="No Slide" class="my-2.5 mx-auto" />
-            <h2 class="text-xl my-1.5 font-normal">No slides yet</h2>
-            <p class="text-sm text-center text-slate-500">
-              Share your knowledge with the world by creating engaging slides. Add your slide's link
-              now.
-            </p>
-          </div>
-        </Box>
-      {/if}
-    </TabContent>
-
-    <TabContent value={tabs[1].value} index={currentTab}>
       {#if mode === MODES.edit}
         <EditContent
           writeLabel="Note"
@@ -233,6 +200,39 @@
       {/if}
     </TabContent>
 
+    <TabContent value={tabs[1].value} index={currentTab}>
+      {#if mode === MODES.edit}
+        <TextField
+          label="Slide link"
+          bind:value={$lesson.materials.slide_url}
+          onChange={() => ($isLessonDirty = true)}
+        />
+      {:else if $lesson.materials.slide_url}
+        <iframe
+          title="Embeded Slides"
+          src={$lesson.materials.slide_url}
+          frameborder="0"
+          width="100%"
+          height="569"
+          class="iframe"
+          allowfullscreen="true"
+          mozallowfullscreen="true"
+          webkitallowfullscreen="true"
+        />
+      {:else}
+        <Box>
+          <div class="flex justify-between flex-col items-center w-96">
+            <img src="/images/empty-slide-icon.svg" alt="No Slide" class="my-2.5 mx-auto" />
+            <h2 class="text-xl my-1.5 font-normal">No slides yet</h2>
+            <p class="text-sm text-center text-slate-500">
+              Share your knowledge with the world by creating engaging slides. Add your slide's link
+              now.
+            </p>
+          </div>
+        </Box>
+      {/if}
+    </TabContent>
+
     <TabContent value={tabs[2].value} index={currentTab}>
       {#if mode === MODES.edit && $lesson.materials.videos.length}
         <PrimaryButton label="Add/Edit Video(s)" onClick={openAddVideoModal} className="mb-2" />
diff --git a/src/lib/components/Navigation/app.svelte b/src/lib/components/Navigation/app.svelte
index fd0a5367..a6e2cfa6 100644
--- a/src/lib/components/Navigation/app.svelte
+++ b/src/lib/components/Navigation/app.svelte
@@ -36,7 +36,7 @@
   }
 </script>
 
-<nav class="{navClass} flex w-full p-2 md:px-6 bg-blue-600">
+<nav class="{navClass} flex w-full p-2 md:px-6 bg-blue-500">
   <ul class="flex w-full items-center">
     <div class="flex items-center text-white">
       {#if isCoursePage}
diff --git a/src/lib/components/Tabs/index.svelte b/src/lib/components/Tabs/index.svelte
index cf9c66b7..0a82923a 100644
--- a/src/lib/components/Tabs/index.svelte
+++ b/src/lib/components/Tabs/index.svelte
@@ -1,28 +1,33 @@
 <script>
-  import Chip from '../Chip/index.svelte';
   export let tabs = [];
   export let currentTab;
   export let onChange;
 </script>
 
 <div class="w-full flex flex-col">
-  <div class="flex items-center justify-center">
+  <div class="flex items-center border-b-2 w-full">
     {#each tabs as tab}
       <button
-        class="relative border-r-1 border-t-0 border-b-0 border-l-0 rounded-none {currentTab ===
-        tab.value
-          ? 'text-black font-bold bg-gray-100 dark:bg-gray-700'
-          : 'bg-gray-200 dark:bg-gray-500 text-gray'} focus:outline-none w-40 text-left p-3"
+        class="relative {currentTab === tab.value
+          ? 'text-blue-500 dark:bg-gray-700'
+          : 'dark:bg-gray-500 text-black'} font-semibold focus:outline-none w-16 text-left py-3 mr-10"
         on:click={onChange(tab.value)}
       >
-        {tab.label}
-        {#if typeof tab.badgeValue === 'number'}
-          <Chip value={tab.badgeValue} className="ml-1 bg-gray-300 dark:text-black" />
-        {/if}
+        <div class="grid grid-cols-3 gap-4 items-center">
+          <svelte:component this={tab.icon} />
+          {tab.label}
+        </div>
 
-        {#if currentTab === tab.value}
-          <span class="absolute w-full top-0 left-0 h-1 bg-blue-500" />
-        {/if}
+        <!-- {#if typeof tab.badgeValue === 'number'}
+          <Chip value={tab.badgeValue} className="ml-1 bg-gray-300 dark:text-black" />
+        {/if} -->
+
+        <span
+          class="absolute bottom-0 left-0 h-1 bg-blue-500 rounded-md transition-all ease-in-out duration-500 {currentTab ===
+          tab.value
+            ? 'w-full'
+            : 'w-0'}"
+        />
       </button>
     {/each}
   </div>