CLASSROOMIO-T-84: Redesign of Lesson Tab

src/lib/components/Course/components/Lesson/Materials/index.svelte

@@ -141,39 +141,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"
@@ -235,6 +202,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 && videoUrls.length}
         <PrimaryButton label="Add/Edit Video" onClick={openAddVideoModal} className="mb-2" />

src/lib/components/Tabs/index.svelte

@@ -1,26 +1,42 @@
 <script>
-  import Chip from '../Chip/index.svelte';
+  import { Video, Notebook, PresentationFile } from 'carbon-icons-svelte';
   export let tabs = [];
   export let currentTab;
   export let onChange;
 </script>
 
 <div class="w-full flex flex-col">
-  <div class="flex items-center">
+  <div class="flex items-center border-b-2 w-full">
     {#each tabs as tab}
       <button
         class="relative {currentTab === tab.value
-          ? 'text-blue-500 font-semibold dark:bg-gray-700'
+          ? 'text-blue-500 dark:bg-gray-700'
-          : 'dark:bg-gray-500'} focus:outline-none w-32 text-left p-3"
+          : '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 tab.value === 1}
+          <div class="grid grid-cols-3 gap-4 items-center">
+            <Notebook />
+            {tab.label}
+          </div>
+        {:else if tab.value === 2}
+          <div class="grid grid-cols-3 gap-4 items-center">
+            <PresentationFile />
+            {tab.label}
+          </div>
+        {:else}
+          <div class="grid grid-cols-3 gap-4 items-center">
+            <Video />
+            {tab.label}
+          </div>
+        {/if}
+        <!-- {tab.label} -->
         <!-- {#if typeof tab.badgeValue === 'number'}
           <Chip value={tab.badgeValue} className="ml-1 bg-gray-300 dark:text-black" />
         {/if} -->
 
         {#if currentTab === tab.value}
-          <span class="absolute w-2/4 bottom-0 left-0 h-1 bg-blue-500" />
+          <span class="absolute w-full bottom-0 left-0 h-1 bg-blue-500 rounded-md" />
         {/if}
       </button>
     {/each}