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

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;