From 6177c33d4f82c19e7cc6d06195448483d0731af9 Mon Sep 17 00:00:00 2001
From: Rotimi Best <best@classroomio.com>
Date: Thu, 24 Aug 2023 09:12:10 +0100
Subject: [PATCH] More theming improvements

---
 src/app.postcss                         | 150 ++++++++++++++++++++++++
 src/lib/components/AuthUI/index.svelte  |   4 +-
 src/lib/components/Avatar/index.svelte  |   2 +-
 src/lib/components/PageNav/index.svelte |  12 +-
 4 files changed, 164 insertions(+), 4 deletions(-)

diff --git a/src/app.postcss b/src/app.postcss
index e9aa82b3..a6599a33 100644
--- a/src/app.postcss
+++ b/src/app.postcss
@@ -104,6 +104,9 @@ code {
 .theme-rose .text-primary-50 {
   color: #fff1f2;
 }
+.theme-rose .border-primary-50 {
+  border-color: #fff1f2;
+}
 
 .theme-rose .bg-primary-100 {
   background-color: #ffe4e7;
@@ -111,6 +114,9 @@ code {
 .theme-rose .text-primary-100 {
   color: #ffe4e7;
 }
+.theme-rose .border-primary-100 {
+  border-color: #ffe4e7;
+}
 
 .theme-rose .bg-primary-200 {
   background-color: #fecdd4;
@@ -118,6 +124,9 @@ code {
 .theme-rose .text-primary-200 {
   color: #fecdd4;
 }
+.theme-rose .border-primary-200 {
+  border-color: #fecdd4;
+}
 
 .theme-rose .bg-primary-300 {
   background-color: #fda4b2;
@@ -125,6 +134,9 @@ code {
 .theme-rose .text-primary-300 {
   color: #fda4b2;
 }
+.theme-rose .border-primary-300 {
+  border-color: #fda4b2;
+}
 
 .theme-rose .bg-primary-400 {
   background-color: #fb7189;
@@ -132,6 +144,9 @@ code {
 .theme-rose .text-primary-400 {
   color: #fb7189;
 }
+.theme-rose .border-primary-400 {
+  border-color: #fb7189;
+}
 
 .theme-rose .bg-primary-500 {
   background-color: #f43f63;
@@ -139,6 +154,9 @@ code {
 .theme-rose .text-primary-500 {
   color: #f43f63;
 }
+.theme-rose .border-primary-500 {
+  border-color: #f43f63;
+}
 
 .theme-rose .bg-primary-600 {
   background-color: #e21d4e;
@@ -146,6 +164,9 @@ code {
 .theme-rose .text-primary-600 {
   color: #e21d4e;
 }
+.theme-rose .border-primary-600 {
+  border-color: #e21d4e;
+}
 
 .theme-rose .bg-primary-700 {
   background-color: #be1241;
@@ -153,6 +174,9 @@ code {
 .theme-rose .text-primary-700 {
   color: #be1241;
 }
+.theme-rose .border-primary-700 {
+  border-color: #be1241;
+}
 
 .theme-rose .bg-primary-800 {
   background-color: #9f123d;
@@ -160,6 +184,9 @@ code {
 .theme-rose .text-primary-800 {
   color: #9f123d;
 }
+.theme-rose .border-primary-800 {
+  border-color: #9f123d;
+}
 
 .theme-rose .bg-primary-900 {
   background-color: #88133a;
@@ -167,6 +194,9 @@ code {
 .theme-rose .text-primary-900 {
   color: #88133a;
 }
+.theme-rose .border-primary-900 {
+  border-color: #88133a;
+}
 
 /**
   Blue Theme
@@ -177,6 +207,9 @@ code {
 .text-primary-50 {
   color: #eff6ff;
 }
+.border-primary-50 {
+  border-color: #eff6ff;
+}
 
 .bg-primary-100 {
   background-color: #dbeafe;
@@ -184,6 +217,9 @@ code {
 .text-primary-100 {
   color: #dbeafe;
 }
+.border-primary-100 {
+  border-color: #dbeafe;
+}
 
 .bg-primary-200 {
   background-color: #bfdafe;
@@ -191,6 +227,9 @@ code {
 .text-primary-200 {
   color: #bfdafe;
 }
+.border-primary-200 {
+  border-color: #bfdafe;
+}
 
 .bg-primary-300 {
   background-color: #92c4fe;
@@ -198,6 +237,9 @@ code {
 .text-primary-300 {
   color: #92c4fe;
 }
+.border-primary-300 {
+  border-color: #92c4fe;
+}
 
 .bg-primary-400 {
   background-color: #5fa3fb;
@@ -205,6 +247,9 @@ code {
 .text-primary-400 {
   color: #5fa3fb;
 }
+.border-primary-400 {
+  border-color: #5fa3fb;
+}
 
 .bg-primary-500 {
   background-color: #3a7ff7;
@@ -212,6 +257,9 @@ code {
 .text-primary-500 {
   color: #3a7ff7;
 }
+.border-primary-500 {
+  border-color: #3a7ff7;
+}
 
 .bg-primary-600 {
   background-color: #2460ec;
@@ -219,6 +267,9 @@ code {
 .text-primary-600 {
   color: #2460ec;
 }
+.border-primary-600 {
+  border-color: #2460ec;
+}
 
 .bg-primary-700 {
   background-color: #1d4ee2;
@@ -226,6 +277,9 @@ code {
 .text-primary-700 {
   color: #1d4ee2;
 }
+.border-primary-700 {
+  border-color: #1d4ee2;
+}
 
 .bg-primary-800 {
   background-color: #1d3eb0;
@@ -233,6 +287,9 @@ code {
 .text-primary-800 {
   color: #1d3eb0;
 }
+.border-primary-800 {
+  border-color: #1d3eb0;
+}
 
 .bg-primary-900 {
   background-color: #1d398b;
@@ -240,6 +297,9 @@ code {
 .text-primary-900 {
   color: #1d398b;
 }
+.border-primary-900 {
+  border-color: #1d398b;
+}
 
 /**
   Green Theme
@@ -250,6 +310,9 @@ code {
 .theme-green .text-primary-50 {
   color: #effef0;
 }
+.theme-green .border-primary-50 {
+  border-color: #effef0;
+}
 
 .theme-green .bg-primary-100 {
   background-color: #d9ffdc;
@@ -257,6 +320,9 @@ code {
 .theme-green .text-primary-100 {
   color: #d9ffdc;
 }
+.theme-green .border-primary-100 {
+  border-color: #d9ffdc;
+}
 
 .theme-green .bg-primary-200 {
   background-color: #b6fcbc;
@@ -264,6 +330,9 @@ code {
 .theme-green .text-primary-200 {
   color: #b6fcbc;
 }
+.theme-green .border-primary-200 {
+  border-color: #b6fcbc;
+}
 
 .theme-green .bg-primary-300 {
   background-color: #7df88a;
@@ -271,6 +340,9 @@ code {
 .theme-green .text-primary-300 {
   color: #7df88a;
 }
+.theme-green .border-primary-300 {
+  border-color: #7df88a;
+}
 
 .theme-green .bg-primary-400 {
   background-color: #3deb51;
@@ -278,6 +350,9 @@ code {
 .theme-green .text-primary-400 {
   color: #3deb51;
 }
+.theme-green .border-primary-400 {
+  border-color: #3deb51;
+}
 
 .theme-green .bg-primary-500 {
   background-color: #12bf26;
@@ -285,6 +360,9 @@ code {
 .theme-green .text-primary-500 {
   color: #12bf26;
 }
+.theme-green .border-primary-500 {
+  border-color: #12bf26;
+}
 
 .theme-green .bg-primary-600 {
   background-color: #0aaf1d;
@@ -292,6 +370,9 @@ code {
 .theme-green .text-primary-600 {
   color: #0aaf1d;
 }
+.theme-green .border-primary-600 {
+  border-color: #0aaf1d;
+}
 
 .theme-green .bg-primary-700 {
   background-color: #0c891b;
@@ -299,6 +380,9 @@ code {
 .theme-green .text-primary-700 {
   color: #0c891b;
 }
+.theme-green .border-primary-700 {
+  border-color: #0c891b;
+}
 
 .theme-green .bg-primary-800 {
   background-color: #0f6c1b;
@@ -306,6 +390,9 @@ code {
 .theme-green .text-primary-800 {
   color: #0f6c1b;
 }
+.theme-green .border-primary-800 {
+  border-color: #0f6c1b;
+}
 
 .theme-green .bg-primary-900 {
   background-color: #0f581a;
@@ -313,6 +400,9 @@ code {
 .theme-green .text-primary-900 {
   color: #0f581a;
 }
+.theme-green .border-primary-900 {
+  border-color: #0f581a;
+}
 
 /**
   Orange Theme
@@ -323,6 +413,9 @@ code {
 .theme-orange .text-primary-50 {
   color: #fff8ec;
 }
+.theme-orange .border-primary-50 {
+  border-color: #fff8ec;
+}
 
 .theme-orange .bg-primary-100 {
   background-color: #fff0d3;
@@ -330,6 +423,9 @@ code {
 .theme-orange .text-primary-100 {
   color: #fff0d3;
 }
+.theme-orange .border-primary-100 {
+  border-color: #fff0d3;
+}
 
 .theme-orange .bg-primary-200 {
   background-color: #ffdca5;
@@ -337,6 +433,9 @@ code {
 .theme-orange .text-primary-200 {
   color: #ffdca5;
 }
+.theme-orange .border-primary-200 {
+  border-color: #ffdca5;
+}
 
 .theme-orange .bg-primary-300 {
   background-color: #ffc26d;
@@ -344,6 +443,9 @@ code {
 .theme-orange .text-primary-300 {
   color: #ffc26d;
 }
+.theme-orange .border-primary-300 {
+  border-color: #ffc26d;
+}
 
 .theme-orange .bg-primary-400 {
   background-color: #ff9d32;
@@ -351,6 +453,9 @@ code {
 .theme-orange .text-primary-400 {
   color: #ff9d32;
 }
+.theme-orange .border-primary-400 {
+  border-color: #ff9d32;
+}
 
 .theme-orange .bg-primary-500 {
   background-color: #ff7f0a;
@@ -358,6 +463,9 @@ code {
 .theme-orange .text-primary-500 {
   color: #ff7f0a;
 }
+.theme-orange .border-primary-500 {
+  border-color: #ff7f0a;
+}
 
 .theme-orange .bg-primary-600 {
   background-color: #ff6600;
@@ -365,6 +473,9 @@ code {
 .theme-orange .text-primary-600 {
   color: #ff6600;
 }
+.theme-orange .border-primary-600 {
+  border-color: #ff6600;
+}
 
 .theme-orange .bg-primary-700 {
   background-color: #cc4902;
@@ -372,6 +483,9 @@ code {
 .theme-orange .text-primary-700 {
   color: #cc4902;
 }
+.theme-orange .border-primary-700 {
+  border-color: #cc4902;
+}
 
 .theme-orange .bg-primary-800 {
   background-color: #a1390b;
@@ -379,6 +493,9 @@ code {
 .theme-orange .text-primary-800 {
   color: #a1390b;
 }
+.theme-orange .border-primary-800 {
+  border-color: #a1390b;
+}
 
 .theme-orange .bg-primary-900 {
   background-color: #82310c;
@@ -386,6 +503,9 @@ code {
 .theme-orange .text-primary-900 {
   color: #82310c;
 }
+.theme-orange .border-primary-900 {
+  border-color: #82310c;
+}
 
 /**
   Violet Theme
@@ -396,6 +516,9 @@ code {
 .theme-violet .text-primary-50 {
   color: #fff2fe;
 }
+.theme-violet .border-primary-50 {
+  border-color: #fff2fe;
+}
 
 .theme-violet .bg-primary-100 {
   background-color: #ffe3fe;
@@ -403,6 +526,9 @@ code {
 .theme-violet .text-primary-100 {
   color: #ffe3fe;
 }
+.theme-violet .border-primary-100 {
+  border-color: #ffe3fe;
+}
 
 .theme-violet .bg-primary-200 {
   background-color: #ffc6fe;
@@ -410,6 +536,9 @@ code {
 .theme-violet .text-primary-200 {
   color: #ffc6fe;
 }
+.theme-violet .border-primary-200 {
+  border-color: #ffc6fe;
+}
 
 .theme-violet .bg-primary-300 {
   background-color: #ff99f7;
@@ -417,6 +546,9 @@ code {
 .theme-violet .text-primary-300 {
   color: #ff99f7;
 }
+.theme-violet .border-primary-300 {
+  border-color: #ff99f7;
+}
 
 .theme-violet .bg-primary-400 {
   background-color: #ff5df2;
@@ -424,6 +556,9 @@ code {
 .theme-violet .text-primary-400 {
   color: #ff5df2;
 }
+.theme-violet .border-primary-400 {
+  border-color: #ff5df2;
+}
 
 .theme-violet .bg-primary-500 {
   background-color: #ff21f5;
@@ -431,6 +566,9 @@ code {
 .theme-violet .text-primary-500 {
   color: #ff21f5;
 }
+.theme-violet .border-primary-500 {
+  border-color: #ff21f5;
+}
 
 .theme-violet .bg-primary-600 {
   background-color: #fb00ff;
@@ -438,6 +576,9 @@ code {
 .theme-violet .text-primary-600 {
   color: #fb00ff;
 }
+.theme-violet .border-primary-600 {
+  border-color: #fb00ff;
+}
 
 .theme-violet .bg-primary-700 {
   background-color: #cf00ce;
@@ -445,6 +586,9 @@ code {
 .theme-violet .text-primary-700 {
   color: #cf00ce;
 }
+.theme-violet .border-primary-700 {
+  border-color: #cf00ce;
+}
 
 .theme-violet .bg-primary-800 {
   background-color: #a900a6;
@@ -452,6 +596,9 @@ code {
 .theme-violet .text-primary-800 {
   color: #a900a6;
 }
+.theme-violet .border-primary-800 {
+  border-color: #a900a6;
+}
 
 .theme-violet .bg-primary-900 {
   background-color: #890684;
@@ -459,3 +606,6 @@ code {
 .theme-violet .text-primary-900 {
   color: #890684;
 }
+.theme-violet .border-primary-900 {
+  border-color: #890684;
+}
diff --git a/src/lib/components/AuthUI/index.svelte b/src/lib/components/AuthUI/index.svelte
index 8b13ffb7..86198e6e 100644
--- a/src/lib/components/AuthUI/index.svelte
+++ b/src/lib/components/AuthUI/index.svelte
@@ -36,7 +36,7 @@
   <div class="container border border-gray bg-white dark:bg-gray-800">
     <div class="flex items-center flex-col p-2 lg:px-8 lg:py-3">
       {#if !showOnlyContent || showLogo}
-        <div class="flex items-center justify-center w-full pt-2">
+        <div class="flex flex-col items-center justify-center w-full pt-2">
           <Avatar
             src={$currentOrg.avatar_url ? $currentOrg.avatar_url : '/logo-192.png'}
             name={$currentOrg.name ? $currentOrg.name : 'ClassroomIO'}
@@ -45,7 +45,7 @@
             height="h-10"
             className="mr-2"
           />
-          <h4 class="dark:text-white text-xl">
+          <h4 class="dark:text-white text-xl mt-0">
             {$currentOrg.name ? $currentOrg.name : 'ClassroomIO'}
           </h4>
         </div>
diff --git a/src/lib/components/Avatar/index.svelte b/src/lib/components/Avatar/index.svelte
index 7ba647c9..fbe7330d 100644
--- a/src/lib/components/Avatar/index.svelte
+++ b/src/lib/components/Avatar/index.svelte
@@ -7,4 +7,4 @@
   export let height = 'h-10';
 </script>
 
-<img alt={name} {src} class="{className} {width} {height} {shape} bg-primary-100" />
+<img alt={name} {src} class="{className} {width} {height} {shape}" />
diff --git a/src/lib/components/PageNav/index.svelte b/src/lib/components/PageNav/index.svelte
index 2611f93a..24b75665 100644
--- a/src/lib/components/PageNav/index.svelte
+++ b/src/lib/components/PageNav/index.svelte
@@ -63,12 +63,22 @@
   {#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 pb-2 text-sm flex items-center relative {item.isActive
+            ? 'text-primary-700'
+            : 'dark:bg-gray-500 dark:text-white'}"
+          href={item.href}
+        >
           {item.label}
 
           {#if typeof item.badgeValue === 'number'}
             <Chip value={item.badgeValue} className="ml-1 bg-gray-300 dark:text-black" />
           {/if}
+          <span
+            class="absolute bottom-0 left-0 h-1 bg-primary-700 transition-all ease-in-out duration-500 {item.isActive
+              ? 'w-full'
+              : 'w-0'}"
+          />
         </a>
       {/each}
       {#if addButtonHref}