CLASSROOMIO-T-97: Course UI improvement 😁😁😁

src/lib/components/Chip/Text.svelte

@@ -10,7 +10,7 @@
     'bg-'
   )
     ? ''
-    : 'bg-gray-200'} {shape} text-center"
+    : 'bg-gray-200 dark:text-black'} {shape} text-center"
 >
   {value}
 </p>

src/lib/components/Course/components/Navigation/NavExpandable.svelte

@@ -1,18 +1,26 @@
 <script>
   import CaretSortDownIcon from 'carbon-icons-svelte/lib/CaretSortDown.svelte';
+  import ChevronDownIcon from 'carbon-icons-svelte/lib/ChevronDown.svelte';
+  import ChevronUpIcon from 'carbon-icons-svelte/lib/ChevronUp.svelte';
+  import IconButton from '$lib/components/IconButton/index.svelte';
+  import NavIcons from './NavIcons.svelte';
 
   export let handleClick = () => {};
   export let label = '';
   export let isGroupActive = false;
+  export let isExpanded = true;
+  export let total = 0;
   // export let subMenuItems = [];
 
-  let isExpanded = true;
-  let activeClass = 'bg-gray-200 dark:bg-gray-700';
+  let activeClass = 'bg-gray-200 dark:bg-gray-500';
 
   function onClick() {
-    // isExpanded = !isExpanded;
     handleClick();
   }
+
+  function toggleIsExpanded() {
+    isExpanded = !isExpanded;
+  }
 </script>
 
 <div class="">
@@ -22,7 +30,22 @@
     tabindex="0"
     on:click={onClick}
   >
-    <span class="dark:text-white font-bold">{label}</span>
+    <NavIcons name={label} />
+    <span class="dark:text-white font-bold text-md">{label}</span>
+    {#if total}
+      <span class="ml-1">({total})</span>
+    {/if}
+    <span class="grow" />
+
+    {#if label === 'Lessons'}
+      <IconButton size="small" stopPropagation={true} onClick={toggleIsExpanded}>
+        {#if isExpanded}
+          <ChevronUpIcon class="carbon-icon dark:text-white" />
+        {:else}
+          <ChevronDownIcon class="carbon-icon dark:text-white" />
+        {/if}
+      </IconButton>
+    {/if}
   </button>
   {#if isExpanded}
     <div class="flex flex-col">

src/lib/components/Course/components/Navigation/NavIcons.svelte

@@ -0,0 +1,30 @@
+<script>
+  import TableOfContents from 'carbon-icons-svelte/lib/TableOfContents.svelte'; // overview
+  import Result from 'carbon-icons-svelte/lib/Result.svelte';
+  import Workspace from 'carbon-icons-svelte/lib/Workspace.svelte';
+  import ListChecked from 'carbon-icons-svelte/lib/ListChecked.svelte';
+  import Group from 'carbon-icons-svelte/lib/Group.svelte';
+  import ApplicationWeb from 'carbon-icons-svelte/lib/ApplicationWeb.svelte';
+  import Badge from 'carbon-icons-svelte/lib/Badge.svelte';
+  import IbmWatsonKnowledgeCatalog from 'carbon-icons-svelte/lib/IbmWatsonKnowledgeCatalog.svelte';
+
+  export let name = '';
+</script>
+
+{#if name === 'Overview'}
+  <TableOfContents size={20} class="carbon-icon dark:text-white mr-2" />
+{:else if name === 'Lessons'}
+  <IbmWatsonKnowledgeCatalog size={20} class="carbon-icon dark:text-white mr-2" />
+{:else if name === 'Attendance'}
+  <ListChecked size={20} class="carbon-icon dark:text-white mr-2" />
+{:else if name === 'Submissions'}
+  <Workspace size={20} class="carbon-icon dark:text-white mr-2" />
+{:else if name === 'Marks'}
+  <Result size={20} class="carbon-icon dark:text-white mr-2" />
+{:else if name === 'People'}
+  <Group size={20} class="carbon-icon dark:text-white mr-2" />
+{:else if name === 'Landing Page'}
+  <ApplicationWeb size={20} class="carbon-icon dark:text-white mr-2" />
+{:else if name === 'Certificates'}
+  <Badge size={20} class="carbon-icon dark:text-white mr-2" />
+{/if}

src/lib/components/Course/components/Navigation/index.svelte

@@ -5,21 +5,21 @@
   import hotkeys from 'hotkeys-js';
   import { browser } from '$app/environment';
   import LockedIcon from 'carbon-icons-svelte/lib/Locked.svelte';
-  import HomeIcon from 'carbon-icons-svelte/lib/Home.svelte';
+  // import ArrowLeftIcon from 'carbon-icons-svelte/lib/ArrowLeft.svelte';
   import CheckmarkFilled from 'carbon-icons-svelte/lib/CheckmarkFilled.svelte';
-  import SettingsIcon from 'carbon-icons-svelte/lib/Settings.svelte';
+  // import SettingsIcon from 'carbon-icons-svelte/lib/Settings.svelte';
   import ChevronLeftIcon from 'carbon-icons-svelte/lib/ChevronLeft.svelte';
   import ChevronRightIcon from 'carbon-icons-svelte/lib/ChevronRight.svelte';
   import NavExpandable from './NavExpandable.svelte';
   import PageNav from '$lib/components/PageNav/index.svelte';
   import IconButton from '$lib/components/IconButton/index.svelte';
-  import Avatar from '$lib/components/Avatar/index.svelte';
+  // import Avatar from '$lib/components/Avatar/index.svelte';
   import { getNavItemRoute, getLessonsRoute, getLectureNo } from '$lib/components/Course/function';
 
   import TextChip from '$lib/components/Chip/Text.svelte';
-  import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
+  // import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
   import Settings from '../Settings/index.svelte';
-  import { settingsDialog } from '../Settings/store';
+  // import { settingsDialog } from '../Settings/store';
   import { lessons } from '../Lesson/store/lessons';
   import { course } from '$lib/components/Course/store';
   import { updateCourse } from '$lib/utils/services/courses';
@@ -30,8 +30,10 @@
   // export let lessonId;
   export let path;
   export let isStudent = null;
+
   let show = null;
-  let activeClass = 'bg-gray-200 dark:bg-gray-700';
+  let activeClass = 'bg-gray-200 dark:bg-gray-500';
+  let isLessonActive = false;
 
   function handleMainGroupClick(href) {
     return () => {
@@ -85,6 +87,8 @@
     }
   }
 
+  $: isLessonActive = $page.url.pathname.includes('/lessons');
+
   $: {
     navItems = [
       {
@@ -148,9 +152,17 @@
 <div class="root z-10 {!show && 'hide'} {$isMobile ? 'fixed shadow-xl' : 'sticky'}">
   {#if show}
     <div class="relative h-full dark:bg-gray-700">
-      <PageNav bind:title={$course.title} paddingClass="pl-2">
+      <!-- <PageNav title="Back to courses" paddingClass="pl-2" titleSize="text-md">
         <slot:fragment slot="image">
           <Avatar src={$course.logo} />
+          <IconButton
+            value="toggle"
+            onClick={() => goto(`${$currentOrgPath}/courses`)}
+            size="small"
+            contained={true}
+          >
+            <ArrowLeftIcon size={20} class="carbon-icon dark:text-white" />
+          </IconButton>
         </slot:fragment>
         <slot:fragment slot="widget">
           <RoleBasedSecurity allowedRoles={[1, 2]}>
@@ -159,19 +171,22 @@
             </IconButton>
           </RoleBasedSecurity>
         </slot:fragment>
-      </PageNav>
-      <div class="h-[82%] overflow-y-auto">
+      </PageNav> -->
+      <div class="h-[90%] mt-5 overflow-y-auto">
         {#each navItems as navItem}
           {#if !navItem.show || (typeof navItem.show === 'function' && navItem.show())}
             <NavExpandable
               label={navItem.label}
               handleClick={handleMainGroupClick(navItem.to)}
               isGroupActive={(path || $page.url.pathname) === navItem.to}
+              isExpanded={isLessonActive}
+              total={navItem.isLecture ? ($lessons || []).length : 0}
             >
               {#if navItem.isLecture}
                 {#each $lessons as item, index}
                   <a
-                    class="pl-3 font-bold w-[95%] text-sm mb-1 {isStudent && !item.is_unlocked
+                    class="pl-7 w-[95%] text-[0.80rem] mb-1 text-black dark:text-white {isStudent &&
+                    !item.is_unlocked
                       ? 'cursor-not-allowed'
                       : ''}"
                     href={isStudent && !item.is_unlocked
@@ -191,17 +206,17 @@
                     >
                       <TextChip
                         value={getLectureNo(index + 1)}
-                        className="bg-blue-200 text-xs mr-2"
+                        className="bg-blue-200 dark:text-black text-xs mr-2"
                         size="sm"
                         shape="rounded-full"
                       />
                       <span>{item.title}</span>
                       {#if !item.is_unlocked}
-                        <span class="text-md ml-2">
+                        <span class="text-md ml-2" title="This lesson is locked.">
                           <LockedIcon class="carbon-icon dark:text-white" />
                         </span>
                       {:else if item.is_complete}
-                        <span class="ml-2">
+                        <span class="ml-2" title="You have completed this lesson">
                           <CheckmarkFilled class="carbon-icon dark:text-white" />
                         </span>
                       {/if}
@@ -213,19 +228,6 @@
           {/if}
         {/each}
       </div>
-
-      <div class="w-full h-[50px] p-3 absolute bottom-2 flex items-center justify-between">
-        <IconButton
-          value="toggle"
-          onClick={() => goto(`${$currentOrgPath}/courses`)}
-          buttonClassName="mx-3"
-        >
-          <HomeIcon size={32} class="carbon-icon dark:text-white" />
-        </IconButton>
-        <a class="block mx-3" href={`/profile/${$profile.id}`}>
-          <Avatar src={$profile.avatar_url} name={$profile.username} />
-        </a>
-      </div>
     </div>
   {/if}
   <div class="toggler rounded-full shadow-lg absolute bottom-0">
@@ -253,7 +255,7 @@
 
 <style lang="scss">
   .root {
-    height: 100vh;
+    height: calc(100vh - 44px);
     display: flex;
     flex-direction: column;
     min-width: 360px;

src/lib/components/CourseLandingPage/index.svelte

@@ -28,14 +28,14 @@
   export let courseData: Course = {
     id: '',
     title: '',
-    description: '',
+    description: ''
   };
   const ratingsImg = [
     '/images/rating-1.svg',
     '/images/rating-2.svg',
     '/images/rating-3.svg',
     '/images/rating-4.svg',
-    '/images/rating-5.svg',
+    '/images/rating-5.svg'
   ];
 
   let lessons: Array<Lesson> = [];
@@ -94,10 +94,7 @@
   $: initPlyr(player, video);
   $: {
     reviews = get(courseData, 'metadata.reviews') || [];
-    totalRatings = reviews?.reduce(
-      (acc = 0, review) => acc + (review?.rating || 0),
-      0
-    );
+    totalRatings = reviews?.reduce((acc = 0, review) => acc + (review?.rating || 0), 0);
     averageRating = totalRatings / reviews?.length;
   }
 </script>
@@ -109,9 +106,7 @@
 <div class="w-full bg-white dark:bg-gray-800 flex flex-col items-center">
   <!-- Header Section -->
   <header id="header" class="banner w-full flex items-center justify-center p-">
-    <div
-      class="md:w-5/6 w-full flex items-center justify-between flex-col-reverse md:flex-row"
-    >
+    <div class="md:w-5/6 w-full flex items-center justify-between flex-col-reverse md:flex-row">
       <!-- Course Description -->
       <div class="md:w-2/5 w-11/12 py-10">
         <h1 class="dark:text-white text-5xl text-white my-4 font-bold">
@@ -124,10 +119,7 @@
         <p class="dark:text-white author my-3 text-sm">
           {get(courseData, 'metadata.instructor.name', '')}
         </p>
-        <PrimaryButton
-          label="Start Course"
-          className="px-6 py-5 mt-6 sm:w-fit"
-        />
+        <PrimaryButton label="Start Course" className="px-6 py-5 mt-6 sm:w-fit" />
       </div>
 
       <!-- Banner Image getEmbedId(videoUrl) -->
@@ -184,7 +176,7 @@
             <a
               href="{$page.url.pathname}{navItem.key}"
               class="{navItem.key === activeNav &&
-                'active text-blue-700'} rounded-lg px-2 mr-6 text-slate-700 font-normal hover:bg-slate-100 hover:text-slate-900"
+                'active text-blue-700'} rounded-lg px-2 mr-6 text-slate-700 font-normal hover:bg-slate-100 hover:text-slate-900 dark:text-white"
             >
               {navItem.label}
             </a>
@@ -219,13 +211,10 @@
         <section class="border-b border-gray-300 mt-8 pb-10">
           <h3 class="text-2xl font-bold mt-0">Certificate</h3>
           <p class="dark:text-white text-sm font-light mb-3">
-            When you complete all of the courses in the program, you'll earn a
-            Certificate to share with your professional network.
+            When you complete all of the courses in the program, you'll earn a Certificate to share
+            with your professional network.
           </p>
-          <img
-            src="/images/certificate-template.svg"
-            alt="certificate template"
-          />
+          <img src="/images/certificate-template.svg" alt="certificate template" />
         </section>
 
         <!-- Sections - Lessons -->
@@ -238,14 +227,9 @@
             </p>
           </div>
           {#each lessons as lesson, index}
-            <div
-              class="w-full flex md:items-center justify-between mb-6 flex-col md:flex-row"
-            >
+            <div class="w-full flex md:items-center justify-between mb-6 flex-col md:flex-row">
               <div class="flex items-center mb-3">
-                <Chip
-                  value={getLectureNo(index + 1, '0')}
-                  className="bg-blue-100 text-blue-700"
-                />
+                <Chip value={getLectureNo(index + 1, '0')} className="bg-blue-100 text-blue-700" />
                 <p class="dark:text-white ml-2 text-sm font-light">
                   {lesson.title}
                 </p>
@@ -296,11 +280,7 @@
                   <div class="flex flex-row item-start w-2/4 my-2">
                     <!-- image container -->
                     {#if review.avatar_url}
-                      <Avatar
-                        src={review.avatar_url}
-                        name="Avatar"
-                        className="mt-1"
-                      />
+                      <Avatar src={review.avatar_url} name="Avatar" className="mt-1" />
                     {/if}
 
                     <!-- profile content -->
@@ -309,18 +289,12 @@
                       <!-- ratings -->
                       <div class="flex flex-row items-center">
                         {#if review.rating}
-                          <img
-                            src={ratingsImg[review.rating - 1]}
-                            class="w-24 mr-4 mt-1"
-                            alt=""
-                          />
+                          <img src={ratingsImg[review.rating - 1]} class="w-24 mr-4 mt-1" alt="" />
                         {/if}
                       </div>
                       <div
                         class="read-more-content mb-2"
-                        style="max-height: {expandDescription[id]
-                          ? 'none'
-                          : '50px'}"
+                        style="max-height: {expandDescription[id] ? 'none' : '50px'}"
                       >
                         <p class="text-sm my-2 leading-5 text-gray-600">
                           {review.description}
@@ -329,15 +303,13 @@
                       {#if !expandDescription[id] && review.description.split(' ').length > 9}
                         <button
                           class="underline text-blue-700 mt-2 font-normal"
-                          on:click={() => toggleDescription(id)}
-                          >See More</button
+                          on:click={() => toggleDescription(id)}>See More</button
                         >
                       {/if}
                       {#if expandDescription[id]}
                         <button
                           class="underline text-blue-700 mt-2 font-normal"
-                          on:click={() => toggleDescription(id)}
-                          >See Less</button
+                          on:click={() => toggleDescription(id)}>See Less</button
                         >
                       {/if}
                     </div>
@@ -378,11 +350,7 @@
                     <div class="flex flex-row item-start w-full my-2">
                       <!-- image container -->
                       {#if review.avatar_url}
-                        <Avatar
-                          src={review.avatar_url}
-                          name={review.name}
-                          className="mt-1"
-                        />
+                        <Avatar src={review.avatar_url} name={review.name} className="mt-1" />
                       {/if}
 
                       <!-- profile content -->
@@ -390,20 +358,14 @@
                         <p class="mb-0.5 font-medium">{review.name}</p>
                         <!-- ratings -->
                         <div class="flex flex-row">
-                          <img
-                            src="/images/rating-full.svg"
-                            alt=""
-                            class="mr-2"
-                          />
+                          <img src="/images/rating-full.svg" alt="" class="mr-2" />
                           <p class="text-xs text-gray-600">
                             {dayjs(review.created_at).fromNow(true)} ago
                           </p>
                         </div>
                         <div
                           class="read-more-content mb-2"
-                          style="max-height: {expandDescription[id]
-                            ? 'none'
-                            : '50px'}"
+                          style="max-height: {expandDescription[id] ? 'none' : '50px'}"
                         >
                           <p class="text-sm my-2 leading-5 text-gray-600">
                             {review.description}
@@ -436,9 +398,7 @@
               </p>
               <p class="dark:text-white text-md font-light flex items-center">
                 <PlayFilled size={16} class="text-blue-700" />
-                <span class="ml-1"
-                  >{get(instructor, 'courseNo', '')} courses</span
-                >
+                <span class="ml-1">{get(instructor, 'courseNo', '')} courses</span>
               </p>
             </div>
           </div>

src/lib/components/EditContent/index.svelte

@@ -45,7 +45,7 @@
         bind:this={textareaRef}
         {placeholder}
         style="height: {textAreaHeight}"
-        class="border border-gray rounded-md p-2"
+        class="border border-gray rounded-md p-2 dark:bg-gray-500"
         on:change={onInputChange}
       />
     {:else}

src/lib/components/Expandable/index.svelte

@@ -21,9 +21,8 @@
 </script>
 
 <div {id} class="w-full bg-white dark:bg-gray-800 {rootClass}">
-  <div
+  <button
     class="w-full relative flex items-center justify-between {!disableContainerPadding && 'p-5'}"
-    role="button"
     tabindex="0"
     on:click={handleClick}
   >
@@ -41,7 +40,7 @@
     {:else}
       <ChevronDownIcon size={24} class="carbon-icon dark:text-white" />
     {/if}
-  </div>
+  </button>
   {#if isExpanded}
     <div class="flex flex-col p-5">
       <slot />

src/lib/components/Form/TextArea.svelte

@@ -38,7 +38,7 @@
     {placeholder}
     bind:value
     required={isRequired}
-    class="form-textarea border-l-0 border-r-0 border-t-0 border-b-2 border-gray-200 focus:border-l-0 focus:border-r-0 rounded-t-md focus:border-t-0 focus:border-b-2 focus:border-blue-600 mt-1 block w-full
+    class="form-textarea dark:bg-gray-500 border-l-0 border-r-0 border-t-0 border-b-2 border-gray-200 focus:border-l-0 focus:border-r-0 rounded-t-md focus:border-t-0 focus:border-b-2 focus:border-blue-600 mt-1 block w-full
     {bgColor} {!!errorMessage ? 'border-red-500' : 'border-gray-300'}"
     on:change={onChange}
   />

src/lib/components/Form/TextField.svelte

@@ -11,7 +11,7 @@
   export let className = '';
   export let inputClassName = '';
   export let labelClassName = '';
-  export let bgColor = 'bg-gray-50 focus:bg-blue-50 dark:bg-white';
+  export let bgColor = 'bg-gray-100 focus:bg-blue-50 dark:bg-white';
   export let type = 'text';
   export let isPassword = false;
   export let autoFocus = false;

src/lib/components/IconButton/index.svelte

@@ -1,6 +1,7 @@
 <script>
   import ToolTip from '../ToolTip/index.svelte';
   export let onClick = () => {};
+  export let stopPropagation = false;
   export let disabled = false;
   export let selected = false;
   export let buttonClassName = '';
@@ -12,10 +13,13 @@
   export let toolTipProps = {
     title: '',
     hotkeys: [],
-    direction: '',
+    direction: ''
   };
 
-  function handleClick() {
+  function handleClick(e) {
+    if (stopPropagation) {
+      e.stopPropagation();
+    }
     onClick(value);
   }
 </script>
@@ -26,8 +30,7 @@
   direction={toolTipProps.direction}
 >
   <button
-    class="root {color} {selected && 'active'} {size} {contained &&
-      'contained'} {buttonClassName}"
+    class="root {color} {selected && 'active'} {size} {contained && 'contained'} {buttonClassName}"
     {disabled}
     {type}
     on:click={handleClick}

src/lib/components/MarkdownEditor/index.svelte

@@ -30,7 +30,7 @@
       <textarea
         bind:value
         {placeholder}
-        class="border border-gray rounded-md p-2"
+        class="border border-gray rounded-md p-2 dark:bg-gray-500"
       />
     {:else}
       <article class="m-auto preview prose prose-sm sm:prose p-2">

src/lib/components/Navigation/app.svelte

@@ -7,9 +7,12 @@
 
   import IconButton from '$lib/components/IconButton/index.svelte';
   import { appStore } from '$lib/utils/store/app';
+  import { currentOrgPath } from '$lib/utils/store/org';
   import { toggleBodyByTheme } from '$lib/utils/functions/app';
 
+  export let title = '';
   export let navClass = '';
+  export let isCoursePage = false;
 
   function toggleTheme() {
     $appStore.isDark = !$appStore.isDark;
@@ -20,13 +23,26 @@
       localStorage.setItem('theme', $appStore.isDark ? 'dark' : '');
     }
   }
+
+  function getPathName(_isCoursePage) {
+    if (!_isCoursePage) {
+      return $currentOrgPath;
+    }
+
+    return `${$currentOrgPath}/courses`;
+  }
 </script>
 
 <nav class="{navClass} flex w-full p-2 md:px-6 bg-blue-600">
   <ul class="flex w-full items-center">
     <div class="">
-      <a href={$page.url.pathname} title="Go to ClassroomIO Home" id="logo" class="text-lg">
-        ClassroomIO
+      <a
+        href={getPathName(isCoursePage)}
+        title="Go to {isCoursePage ? 'Courses' : 'ClassroomIO Home'}"
+        id="logo"
+        class="text-lg"
+      >
+        {isCoursePage ? title : 'ClassroomIO'}
       </a>
     </div>
 

src/lib/components/Navigation/index.svelte

@@ -63,8 +63,8 @@
           <div class="flex">
             <PrimaryButton
               label="Login"
-              variant={VARIANTS.NONE}
-              className="py-3 px-6 mx-2 app-background-color"
+              variant={VARIANTS.OUTLINED}
+              className="mx-2"
               onClick={() => {
                 console.log('clicked login');
                 goto('/login' + redirect);
@@ -73,7 +73,7 @@
             <PrimaryButton
               label="Sign Up"
               variant={VARIANTS.CONTAINED}
-              className="py-3 px-6 mx-2"
+              className="mx-2"
               onClick={() => {
                 console.log('clicked signup');
                 goto('/signup' + redirect);

src/lib/components/Org/Settings/Profile.svelte

@@ -26,23 +26,19 @@
 
       const updates = {
         fullname: $profile.fullname,
-        username: $profile.username,
+        username: $profile.username
       };
 
       if (avatar) {
         const filename = `user/${$profile.username + Date.now()}.webp`;
 
-        const { data } = await supabase.storage
-          .from('avatars')
-          .upload(filename, avatar, {
-            cacheControl: '3600',
-            upsert: false,
-          });
+        const { data } = await supabase.storage.from('avatars').upload(filename, avatar, {
+          cacheControl: '3600',
+          upsert: false
+        });
 
         if (data && data.Key) {
-          const { publicURL } = supabase.storage
-            .from('avatars')
-            .getPublicUrl(filename);
+          const { publicURL } = supabase.storage.from('avatars').getPublicUrl(filename);
 
           updates.avatar_url = publicURL;
           $profile.avatar_url = publicURL;
@@ -50,14 +46,11 @@
         avatar = undefined;
       }
 
-      let { error } = await supabase
-        .from('profile')
-        .update(updates)
-        .match({ id: $profile.id });
+      let { error } = await supabase.from('profile').update(updates).match({ id: $profile.id });
 
       profile.update((_profile) => ({
         ..._profile,
-        ...updates,
+        ...updates
       }));
       $snackbarStore.open = true;
       $snackbarStore.message = 'Update successful';
@@ -85,11 +78,7 @@
       <SectionTitle>Profile Picture</SectionTitle>
     </Column>
     <Column sm={2} md={6} lg={8}>
-      <UploadImage
-        bind:avatar
-        src={$profile.avatar_url}
-        widthHeight="w-24 h-24"
-      />
+      <UploadImage bind:avatar src={$profile.avatar_url} widthHeight="w-24 h-24" />
     </Column>
   </Row>
   <Row class="py-7 border-bottom-c">
@@ -97,36 +86,19 @@
       <SectionTitle>Personal Information</SectionTitle>
     </Column>
     <Column sm={2} md={6} lg={8}>
-      <TextField
-        label="Full Name"
-        bind:value={$profile.fullname}
-        className="w-60 mb-4"
-      />
-      <TextField
-        label="Username"
-        bind:value={$profile.username}
-        className="w-60 mb-4"
-      />
-      <TextField
-        label="Email"
-        bind:value={$profile.email}
-        className="w-60 mb-4"
-      />
+      <TextField label="Full Name" bind:value={$profile.fullname} className="w-60 mb-4" />
+      <TextField label="Username" bind:value={$profile.username} className="w-60 mb-4" />
+      <TextField label="Email" bind:value={$profile.email} className="w-60 mb-4" />
     </Column>
   </Row>
   <Row class="m-5 w-full flex items-center justify-center">
     <PrimaryButton
       label="Update Profile"
-      className="px-6 py-3 mr-5"
+      className="mr-5"
       isLoading={loading}
       isDisabled={loading}
       onClick={handleUpdate}
     />
-    <PrimaryButton
-      className="px-6 py-3"
-      variant={VARIANTS.CONTAINED_DANGER}
-      label="Log out"
-      onClick={logout}
-    />
+    <PrimaryButton variant={VARIANTS.CONTAINED_DANGER} label="Log out" onClick={logout} />
   </Row>
 </Grid>

src/lib/components/PageNav/index.svelte

@@ -2,6 +2,7 @@
   import NewButton from '../PrimaryContainedButton/index.svelte';
   import TextField from '../Form/TextField.svelte';
   import Chip from '../Chip/index.svelte';
+
   export let title = '';
   export let overidableStyle = '';
   export let navItems = [];
@@ -15,8 +16,7 @@
   let dynamicRootClass = '';
   let enterEditTitleMode = false;
 
-  $: dynamicRootClass =
-    Array.isArray(navItems) && navItems.length > 4 ? 'bring-down' : '';
+  $: dynamicRootClass = Array.isArray(navItems) && navItems.length > 4 ? 'bring-down' : '';
 </script>
 
 <div
@@ -27,13 +27,13 @@
   {#if !!title}
     {#if isTitleEditable}
       {#if !enterEditTitleMode}
-        <h4
-          class="title editable-title hover:bg-gray-100 dark:bg-gray-700 px-3 rounded-md overflow-ellipsis"
-          on:click={() => (enterEditTitleMode = true)}
-          on:keydown={() => (enterEditTitleMode = true)}
-        >
-          {title}
-        </h4>
+        <button class="w-full" on:click={() => (enterEditTitleMode = true)}>
+          <h4
+            class="editable-title hover:bg-gray-100 dark:bg-gray-700 px-3 rounded-md overflow-ellipsis"
+          >
+            {title}
+          </h4>
+        </button>
       {:else}
         <TextField
           bind:value={title}
@@ -48,23 +48,26 @@
         />
       {/if}
     {:else}
-      <div class="flex items-center" {title}>
+      <div class="flex items-center w-full" {title}>
         <slot name="image" />
-        <h4 class="dark:text-white title">{title}</h4>
+        <h4
+          class="{$$slots.image
+            ? 'ml-2'
+            : ''} dark:text-white whitespace-nowrap truncate text-lg font-semibold"
+        >
+          {title}
+        </h4>
       </div>
     {/if}
   {/if}
   {#if Array.isArray(navItems) && navItems.length}
     <div class="flex justify-evenly items-center">
       {#each navItems as item}
-        <a
-          class="mr-5 text-sm flex items-center {item.isActive && 'active'}"
-          href={item.href}
-        >
+        <a class="mr-5 text-sm flex items-center {item.isActive && 'active'}" href={item.href}>
           {item.label}
 
           {#if typeof item.badgeValue === 'number'}
-            <Chip value={item.badgeValue} className="ml-1 bg-gray-300" />
+            <Chip value={item.badgeValue} className="ml-1 bg-gray-300 dark:text-black" />
           {/if}
         </a>
       {/each}
@@ -88,23 +91,6 @@
     top: 0;
   }
 
-  .title {
-    font-size: 18px;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-    width: 250px;
-    margin-left: 5px;
-  }
-
-  h4 {
-    font-size: 16px;
-    font-weight: 900;
-    word-break: break-word;
-    overflow-wrap: break-word;
-    margin: 0;
-  }
-
   .active {
     position: relative;
     display: inline-block;

src/lib/components/PrimaryButton/constants.js

@@ -7,15 +7,14 @@ export const VARIANTS = {
   OUTLINED: 'OUTLINED',
   NONE: 'NONE',
   TEXT: 'TEXT',
-  TEXT_DANGER: 'TEXT_DANGER',
+  TEXT_DANGER: 'TEXT_DANGER'
 };
 
 export const VARIANTS_CLASS = {
-  [VARIANTS.CONTAINED]: 'border-none bg-blue-700 hover:bg-blue-900 text-white',
+  [VARIANTS.CONTAINED]: 'border-none bg-blue-700 hover:bg-blue-900 text-white font-bold',
   [VARIANTS.CONTAINED_WHITE]:
     'border-none hover:border-black-300 hover:bg-blue-700 dark:hover:bg-blue-900 text-black hover:text-white bg-white',
-  [VARIANTS.CONTAINED_INFO]:
-    'border-none bg-gray-400 hover:bg-gray-600 text-white',
+  [VARIANTS.CONTAINED_INFO]: 'border-none bg-gray-400 hover:bg-gray-600 text-white',
   [VARIANTS.CONTAINED_SUCCESS]: 'bg-green-700 hover:bg-green-900 text-white',
   [VARIANTS.CONTAINED_DANGER]: 'bg-red-700 hover:bg-red-900 text-white',
   [VARIANTS.OUTLINED]:
@@ -24,5 +23,5 @@ export const VARIANTS_CLASS = {
     'border-none hover:border-black-300 hover:bg-gray-200 dark:hover:bg-gray-500 text-black',
   [VARIANTS.TEXT]: 'text-black hover:underline',
   [VARIANTS.TEXT_DANGER]:
-    'text-red-500 hover:border border-t-0 border-l-0 border-r-0 border-red-300',
+    'text-red-500 hover:border border-t-0 border-l-0 border-r-0 border-red-300'
 };

src/lib/components/PrimaryButton/index.svelte

@@ -21,8 +21,8 @@
     : 'cursor-pointer'} flex items-center h-auto {VARIANTS_CLASS[
     isLoading ? VARIANTS.OUTLINED : variant
   ]} {!disablePadding &&
-    'py-3 px-5'} rounded-none {className} w-fit justify-center sm:w-auto {isLoading &&
-    'py-3 border-blue-700'} {variant !== VARIANTS.TEXT &&
+    'py-2 px-6'} rounded-md {className} w-fit justify-center sm:w-auto {isLoading &&
+    'py-2 border-blue-700'} {variant !== VARIANTS.TEXT &&
     'hover:shadow-xl'} transition delay-150 duration-300 ease-in-out {variant !==
   VARIANTS.CONTAINED_WHITE
     ? 'dark:text-white'

src/lib/components/Tabs/index.svelte

@@ -17,7 +17,7 @@
       >
         {tab.label}
         {#if typeof tab.badgeValue === 'number'}
-          <Chip value={tab.badgeValue} className="ml-1 bg-gray-300" />
+          <Chip value={tab.badgeValue} className="ml-1 bg-gray-300 dark:text-black" />
         {/if}
 
         {#if currentTab === tab.value}

src/lib/components/UploadImage/index.svelte

@@ -38,14 +38,14 @@
     {/if}
   </div>
 
-  <p
+  <button
     class="width-fit text-blue-700 flex items-center cursor-pointer text-sm mt-3"
     on:click={() => {
       fileinput.click();
     }}
   >
     <Camera size={20} /> <span class="ml-2">Upload Image</span>
-  </p>
+  </button>
   {#if errorMessage}
     <p class="text-sm text-red-500">{errorMessage}</p>
   {/if}