From cdd4f65d799ca2eab8374aab8febca0c3c79f2c5 Mon Sep 17 00:00:00 2001
From: Rotimi Best <best@classroomio.com>
Date: Tue, 19 Dec 2023 21:07:08 +0300
Subject: [PATCH] chore: prioritize postcss colors + improve people responsive
 style

---
 apps/dashboard/src/app.postcss                | 302 +++++++++---------
 .../routes/courses/[id]/people/+page.svelte   |   2 +-
 2 files changed, 152 insertions(+), 152 deletions(-)

diff --git a/apps/dashboard/src/app.postcss b/apps/dashboard/src/app.postcss
index dc14774b..8c831e6a 100644
--- a/apps/dashboard/src/app.postcss
+++ b/apps/dashboard/src/app.postcss
@@ -94,7 +94,7 @@ h6 {
 .dark .prose strong,
 .dark .prose li::marker,
 .dark .prose p {
-  color: #fff;
+  color: #fff !important;
 }
 
 code {
@@ -143,513 +143,513 @@ code {
   Rose Theme
 */
 .theme-rose .bg-primary-50 {
-  background-color: #fff1f2;
+  background-color: #fff1f2 !important;
 }
 .theme-rose .text-primary-50 {
-  color: #fff1f2;
+  color: #fff1f2 !important;
 }
 .theme-rose .border-primary-50 {
-  border-color: #fff1f2;
+  border-color: #fff1f2 !important;
 }
 
 .theme-rose .bg-primary-100 {
-  background-color: #ffe4e7;
+  background-color: #ffe4e7 !important;
 }
 .theme-rose .text-primary-100 {
-  color: #ffe4e7;
+  color: #ffe4e7 !important;
 }
 .theme-rose .border-primary-100 {
-  border-color: #ffe4e7;
+  border-color: #ffe4e7 !important;
 }
 
 .theme-rose .bg-primary-200 {
-  background-color: #fecdd4;
+  background-color: #fecdd4 !important;
 }
 .theme-rose .text-primary-200 {
-  color: #fecdd4;
+  color: #fecdd4 !important;
 }
 .theme-rose .border-primary-200 {
-  border-color: #fecdd4;
+  border-color: #fecdd4 !important;
 }
 
 .theme-rose .bg-primary-300 {
-  background-color: #fda4b2;
+  background-color: #fda4b2 !important;
 }
 .theme-rose .text-primary-300 {
-  color: #fda4b2;
+  color: #fda4b2 !important;
 }
 .theme-rose .border-primary-300 {
-  border-color: #fda4b2;
+  border-color: #fda4b2 !important;
 }
 
 .theme-rose .bg-primary-400 {
-  background-color: #fb7189;
+  background-color: #fb7189 !important;
 }
 .theme-rose .text-primary-400 {
-  color: #fb7189;
+  color: #fb7189 !important;
 }
 .theme-rose .border-primary-400 {
-  border-color: #fb7189;
+  border-color: #fb7189 !important;
 }
 
 .theme-rose .bg-primary-500 {
-  background-color: #f43f63;
+  background-color: #f43f63 !important;
 }
 .theme-rose .text-primary-500 {
-  color: #f43f63;
+  color: #f43f63 !important;
 }
 .theme-rose .border-primary-500 {
-  border-color: #f43f63;
+  border-color: #f43f63 !important;
 }
 
 .theme-rose .bg-primary-600 {
-  background-color: #e21d4e;
+  background-color: #e21d4e !important;
 }
 .theme-rose .text-primary-600 {
-  color: #e21d4e;
+  color: #e21d4e !important;
 }
 .theme-rose .border-primary-600 {
-  border-color: #e21d4e;
+  border-color: #e21d4e !important;
 }
 
 .theme-rose .bg-primary-700 {
-  background-color: #be1241;
+  background-color: #be1241 !important;
 }
 .theme-rose .text-primary-700 {
-  color: #be1241;
+  color: #be1241 !important;
 }
 .theme-rose .border-primary-700 {
-  border-color: #be1241;
+  border-color: #be1241 !important;
 }
 
 .theme-rose .bg-primary-800 {
-  background-color: #9f123d;
+  background-color: #9f123d !important;
 }
 .theme-rose .text-primary-800 {
-  color: #9f123d;
+  color: #9f123d !important;
 }
 .theme-rose .border-primary-800 {
-  border-color: #9f123d;
+  border-color: #9f123d !important;
 }
 
 .theme-rose .bg-primary-900 {
-  background-color: #88133a;
+  background-color: #88133a !important;
 }
 .theme-rose .text-primary-900 {
-  color: #88133a;
+  color: #88133a !important;
 }
 .theme-rose .border-primary-900 {
-  border-color: #88133a;
+  border-color: #88133a !important;
 }
 
 /**
   Blue Theme
 */
 .bg-primary-50 {
-  background-color: #eff6ff;
+  background-color: #eff6ff !important;
 }
 .text-primary-50 {
-  color: #eff6ff;
+  color: #eff6ff !important;
 }
 .border-primary-50 {
-  border-color: #eff6ff;
+  border-color: #eff6ff !important;
 }
 
 .bg-primary-100 {
-  background-color: #dbeafe;
+  background-color: #dbeafe !important;
 }
 .text-primary-100 {
-  color: #dbeafe;
+  color: #dbeafe !important;
 }
 .border-primary-100 {
-  border-color: #dbeafe;
+  border-color: #dbeafe !important;
 }
 
 .bg-primary-200 {
-  background-color: #bfdafe;
+  background-color: #bfdafe !important;
 }
 .text-primary-200 {
-  color: #bfdafe;
+  color: #bfdafe !important;
 }
 .border-primary-200 {
-  border-color: #bfdafe;
+  border-color: #bfdafe !important;
 }
 
 .bg-primary-300 {
-  background-color: #92c4fe;
+  background-color: #92c4fe !important;
 }
 .text-primary-300 {
-  color: #92c4fe;
+  color: #92c4fe !important;
 }
 .border-primary-300 {
-  border-color: #92c4fe;
+  border-color: #92c4fe !important;
 }
 
 .bg-primary-400 {
-  background-color: #5fa3fb;
+  background-color: #5fa3fb !important;
 }
 .text-primary-400 {
-  color: #5fa3fb;
+  color: #5fa3fb !important;
 }
 .border-primary-400 {
-  border-color: #5fa3fb;
+  border-color: #5fa3fb !important;
 }
 
 .bg-primary-500 {
-  background-color: #3a7ff7;
+  background-color: #3a7ff7 !important;
 }
 .text-primary-500 {
-  color: #3a7ff7;
+  color: #3a7ff7 !important;
 }
 .border-primary-500 {
-  border-color: #3a7ff7;
+  border-color: #3a7ff7 !important;
 }
 
 .bg-primary-600 {
-  background-color: #2460ec;
+  background-color: #2460ec !important;
 }
 .text-primary-600 {
-  color: #2460ec;
+  color: #2460ec !important;
 }
 .border-primary-600 {
-  border-color: #2460ec;
+  border-color: #2460ec !important;
 }
 
 .bg-primary-700 {
-  background-color: #1d4ee2;
+  background-color: #1d4ee2 !important;
 }
 .text-primary-700 {
-  color: #1d4ee2;
+  color: #1d4ee2 !important;
 }
 .border-primary-700 {
-  border-color: #1d4ee2;
+  border-color: #1d4ee2 !important;
 }
 
 .bg-primary-800 {
-  background-color: #1d3eb0;
+  background-color: #1d3eb0 !important;
 }
 .text-primary-800 {
-  color: #1d3eb0;
+  color: #1d3eb0 !important;
 }
 .border-primary-800 {
-  border-color: #1d3eb0;
+  border-color: #1d3eb0 !important;
 }
 
 .bg-primary-900 {
-  background-color: #1d398b;
+  background-color: #1d398b !important;
 }
 .text-primary-900 {
-  color: #1d398b;
+  color: #1d398b !important;
 }
 .border-primary-900 {
-  border-color: #1d398b;
+  border-color: #1d398b !important;
 }
 
 /**
   Green Theme
 */
 .theme-green .bg-primary-50 {
-  background-color: #effef0;
+  background-color: #effef0 !important;
 }
 .theme-green .text-primary-50 {
-  color: #effef0;
+  color: #effef0 !important;
 }
 .theme-green .border-primary-50 {
-  border-color: #effef0;
+  border-color: #effef0 !important;
 }
 
 .theme-green .bg-primary-100 {
-  background-color: #d9ffdc;
+  background-color: #d9ffdc !important;
 }
 .theme-green .text-primary-100 {
-  color: #d9ffdc;
+  color: #d9ffdc !important;
 }
 .theme-green .border-primary-100 {
-  border-color: #d9ffdc;
+  border-color: #d9ffdc !important;
 }
 
 .theme-green .bg-primary-200 {
-  background-color: #b6fcbc;
+  background-color: #b6fcbc !important;
 }
 .theme-green .text-primary-200 {
-  color: #b6fcbc;
+  color: #b6fcbc !important;
 }
 .theme-green .border-primary-200 {
-  border-color: #b6fcbc;
+  border-color: #b6fcbc !important;
 }
 
 .theme-green .bg-primary-300 {
-  background-color: #7df88a;
+  background-color: #7df88a !important;
 }
 .theme-green .text-primary-300 {
-  color: #7df88a;
+  color: #7df88a !important;
 }
 .theme-green .border-primary-300 {
-  border-color: #7df88a;
+  border-color: #7df88a !important;
 }
 
 .theme-green .bg-primary-400 {
-  background-color: #3deb51;
+  background-color: #3deb51 !important;
 }
 .theme-green .text-primary-400 {
-  color: #3deb51;
+  color: #3deb51 !important;
 }
 .theme-green .border-primary-400 {
-  border-color: #3deb51;
+  border-color: #3deb51 !important;
 }
 
 .theme-green .bg-primary-500 {
-  background-color: #12bf26;
+  background-color: #12bf26 !important;
 }
 .theme-green .text-primary-500 {
-  color: #12bf26;
+  color: #12bf26 !important;
 }
 .theme-green .border-primary-500 {
-  border-color: #12bf26;
+  border-color: #12bf26 !important;
 }
 
 .theme-green .bg-primary-600 {
-  background-color: #0aaf1d;
+  background-color: #0aaf1d !important;
 }
 .theme-green .text-primary-600 {
-  color: #0aaf1d;
+  color: #0aaf1d !important;
 }
 .theme-green .border-primary-600 {
-  border-color: #0aaf1d;
+  border-color: #0aaf1d !important;
 }
 
 .theme-green .bg-primary-700 {
-  background-color: #0c891b;
+  background-color: #0c891b !important;
 }
 .theme-green .text-primary-700 {
-  color: #0c891b;
+  color: #0c891b !important;
 }
 .theme-green .border-primary-700 {
-  border-color: #0c891b;
+  border-color: #0c891b !important;
 }
 
 .theme-green .bg-primary-800 {
-  background-color: #0f6c1b;
+  background-color: #0f6c1b !important;
 }
 .theme-green .text-primary-800 {
-  color: #0f6c1b;
+  color: #0f6c1b !important;
 }
 .theme-green .border-primary-800 {
-  border-color: #0f6c1b;
+  border-color: #0f6c1b !important;
 }
 
 .theme-green .bg-primary-900 {
-  background-color: #0f581a;
+  background-color: #0f581a !important;
 }
 .theme-green .text-primary-900 {
-  color: #0f581a;
+  color: #0f581a !important;
 }
 .theme-green .border-primary-900 {
-  border-color: #0f581a;
+  border-color: #0f581a !important;
 }
 
 /**
   Orange Theme
 */
 .theme-orange .bg-primary-50 {
-  background-color: #fff8ec;
+  background-color: #fff8ec !important;
 }
 .theme-orange .text-primary-50 {
-  color: #fff8ec;
+  color: #fff8ec !important;
 }
 .theme-orange .border-primary-50 {
-  border-color: #fff8ec;
+  border-color: #fff8ec !important;
 }
 
 .theme-orange .bg-primary-100 {
-  background-color: #fff0d3;
+  background-color: #fff0d3 !important;
 }
 .theme-orange .text-primary-100 {
-  color: #fff0d3;
+  color: #fff0d3 !important;
 }
 .theme-orange .border-primary-100 {
-  border-color: #fff0d3;
+  border-color: #fff0d3 !important;
 }
 
 .theme-orange .bg-primary-200 {
-  background-color: #ffdca5;
+  background-color: #ffdca5 !important;
 }
 .theme-orange .text-primary-200 {
-  color: #ffdca5;
+  color: #ffdca5 !important;
 }
 .theme-orange .border-primary-200 {
-  border-color: #ffdca5;
+  border-color: #ffdca5 !important;
 }
 
 .theme-orange .bg-primary-300 {
-  background-color: #ffc26d;
+  background-color: #ffc26d !important;
 }
 .theme-orange .text-primary-300 {
-  color: #ffc26d;
+  color: #ffc26d !important;
 }
 .theme-orange .border-primary-300 {
-  border-color: #ffc26d;
+  border-color: #ffc26d !important;
 }
 
 .theme-orange .bg-primary-400 {
-  background-color: #ff9d32;
+  background-color: #ff9d32 !important;
 }
 .theme-orange .text-primary-400 {
-  color: #ff9d32;
+  color: #ff9d32 !important;
 }
 .theme-orange .border-primary-400 {
-  border-color: #ff9d32;
+  border-color: #ff9d32 !important;
 }
 
 .theme-orange .bg-primary-500 {
-  background-color: #ff7f0a;
+  background-color: #ff7f0a !important;
 }
 .theme-orange .text-primary-500 {
-  color: #ff7f0a;
+  color: #ff7f0a !important;
 }
 .theme-orange .border-primary-500 {
-  border-color: #ff7f0a;
+  border-color: #ff7f0a !important;
 }
 
 .theme-orange .bg-primary-600 {
-  background-color: #ff6600;
+  background-color: #ff6600 !important;
 }
 .theme-orange .text-primary-600 {
-  color: #ff6600;
+  color: #ff6600 !important;
 }
 .theme-orange .border-primary-600 {
-  border-color: #ff6600;
+  border-color: #ff6600 !important;
 }
 
 .theme-orange .bg-primary-700 {
-  background-color: #cc4902;
+  background-color: #cc4902 !important;
 }
 .theme-orange .text-primary-700 {
-  color: #cc4902;
+  color: #cc4902 !important;
 }
 .theme-orange .border-primary-700 {
-  border-color: #cc4902;
+  border-color: #cc4902 !important;
 }
 
 .theme-orange .bg-primary-800 {
-  background-color: #a1390b;
+  background-color: #a1390b !important;
 }
 .theme-orange .text-primary-800 {
-  color: #a1390b;
+  color: #a1390b !important;
 }
 .theme-orange .border-primary-800 {
-  border-color: #a1390b;
+  border-color: #a1390b !important;
 }
 
 .theme-orange .bg-primary-900 {
-  background-color: #82310c;
+  background-color: #82310c !important;
 }
 .theme-orange .text-primary-900 {
-  color: #82310c;
+  color: #82310c !important;
 }
 .theme-orange .border-primary-900 {
-  border-color: #82310c;
+  border-color: #82310c !important;
 }
 
 /**
   Violet Theme
 */
 .theme-violet .bg-primary-50 {
-  background-color: #fff2fe;
+  background-color: #fff2fe !important;
 }
 .theme-violet .text-primary-50 {
-  color: #fff2fe;
+  color: #fff2fe !important;
 }
 .theme-violet .border-primary-50 {
-  border-color: #fff2fe;
+  border-color: #fff2fe !important;
 }
 
 .theme-violet .bg-primary-100 {
-  background-color: #ffe3fe;
+  background-color: #ffe3fe !important;
 }
 .theme-violet .text-primary-100 {
-  color: #ffe3fe;
+  color: #ffe3fe !important;
 }
 .theme-violet .border-primary-100 {
-  border-color: #ffe3fe;
+  border-color: #ffe3fe !important;
 }
 
 .theme-violet .bg-primary-200 {
-  background-color: #ffc6fe;
+  background-color: #ffc6fe !important;
 }
 .theme-violet .text-primary-200 {
-  color: #ffc6fe;
+  color: #ffc6fe !important;
 }
 .theme-violet .border-primary-200 {
-  border-color: #ffc6fe;
+  border-color: #ffc6fe !important;
 }
 
 .theme-violet .bg-primary-300 {
-  background-color: #ff99f7;
+  background-color: #ff99f7 !important;
 }
 .theme-violet .text-primary-300 {
-  color: #ff99f7;
+  color: #ff99f7 !important;
 }
 .theme-violet .border-primary-300 {
-  border-color: #ff99f7;
+  border-color: #ff99f7 !important;
 }
 
 .theme-violet .bg-primary-400 {
-  background-color: #ff5df2;
+  background-color: #ff5df2 !important;
 }
 .theme-violet .text-primary-400 {
-  color: #ff5df2;
+  color: #ff5df2 !important;
 }
 .theme-violet .border-primary-400 {
-  border-color: #ff5df2;
+  border-color: #ff5df2 !important;
 }
 
 .theme-violet .bg-primary-500 {
-  background-color: #ff21f5;
+  background-color: #ff21f5 !important;
 }
 .theme-violet .text-primary-500 {
-  color: #ff21f5;
+  color: #ff21f5 !important;
 }
 .theme-violet .border-primary-500 {
-  border-color: #ff21f5;
+  border-color: #ff21f5 !important;
 }
 
 .theme-violet .bg-primary-600 {
-  background-color: #fb00ff;
+  background-color: #fb00ff !important;
 }
 .theme-violet .text-primary-600 {
-  color: #fb00ff;
+  color: #fb00ff !important;
 }
 .theme-violet .border-primary-600 {
-  border-color: #fb00ff;
+  border-color: #fb00ff !important;
 }
 
 .theme-violet .bg-primary-700 {
-  background-color: #cf00ce;
+  background-color: #cf00ce !important;
 }
 .theme-violet .text-primary-700 {
-  color: #cf00ce;
+  color: #cf00ce !important;
 }
 .theme-violet .border-primary-700 {
-  border-color: #cf00ce;
+  border-color: #cf00ce !important;
 }
 
 .theme-violet .bg-primary-800 {
-  background-color: #a900a6;
+  background-color: #a900a6 !important;
 }
 .theme-violet .text-primary-800 {
-  color: #a900a6;
+  color: #a900a6 !important;
 }
 .theme-violet .border-primary-800 {
-  border-color: #a900a6;
+  border-color: #a900a6 !important;
 }
 
 .theme-violet .bg-primary-900 {
-  background-color: #890684;
+  background-color: #890684 !important;
 }
 .theme-violet .text-primary-900 {
-  color: #890684;
+  color: #890684 !important;
 }
 .theme-violet .border-primary-900 {
-  border-color: #890684;
+  border-color: #890684 !important;
 }
diff --git a/apps/dashboard/src/routes/courses/[id]/people/+page.svelte b/apps/dashboard/src/routes/courses/[id]/people/+page.svelte
index 431404ff..12560254 100644
--- a/apps/dashboard/src/routes/courses/[id]/people/+page.svelte
+++ b/apps/dashboard/src/routes/courses/[id]/people/+page.svelte
@@ -248,7 +248,7 @@
               <!-- third column -->
               <StructuredListCell class="p-0 w-1/4">
                 <RoleBasedSecurity allowedRoles={[1, 2]}>
-                  <div class="hidden lg:flex lg:justify-between lg:items-center w-20">
+                  <div class="hidden sm:flex sm:justify-between sm:items-center w-20">
                     {#if person.profile_id !== $profile.id}
                       <IconButton
                         onClick={() => {