From b14d66cf3b72b9104d0bed7db60241b27c055081 Mon Sep 17 00:00:00 2001
From: Rotimi Best <best@classroomio.com>
Date: Mon, 7 Aug 2023 11:24:48 +0100
Subject: [PATCH] Improve UX of sidebar

---
 src/lib/components/Org/SideBar.svelte         |  4 +--
 .../components/OrgSelector/OrgSelector.svelte | 33 +++++++++++--------
 2 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/src/lib/components/Org/SideBar.svelte b/src/lib/components/Org/SideBar.svelte
index 9c73307e..489409b8 100644
--- a/src/lib/components/Org/SideBar.svelte
+++ b/src/lib/components/Org/SideBar.svelte
@@ -104,7 +104,7 @@
     <ul class="my-5 pb-5 px-4">
       <a href={$currentOrgPath} class="text-black no-underline">
         <li
-          class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 dark:hover:bg-gray-500"
+          class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 dark:hover:bg-gray-800"
         >
           <HelpIcon size={20} class="carbon-icon dark:text-white" />
           <p class="dark:text-white ml-2">Help</p>
@@ -112,7 +112,7 @@
       </a>
       <a href="{$currentOrgPath}/settings" class="text-black no-underline">
         <li
-          class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 dark:hover:bg-gray-500 {isActive(
+          class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 dark:hover:bg-gray-800 {isActive(
             $page.url.pathname,
             `${$currentOrgPath}/settings`
           ) && activeClass}"
diff --git a/src/lib/components/OrgSelector/OrgSelector.svelte b/src/lib/components/OrgSelector/OrgSelector.svelte
index adcf86c5..fa948c44 100644
--- a/src/lib/components/OrgSelector/OrgSelector.svelte
+++ b/src/lib/components/OrgSelector/OrgSelector.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Popover } from 'carbon-components-svelte';
+  import { Popover, SkeletonText } from 'carbon-components-svelte';
   import CaretSortIcon from 'carbon-icons-svelte/lib/CaretSort.svelte';
   import OrgSelectorItem from './OrgSelectorItem.svelte';
   import Modal from '../Modal/index.svelte';
@@ -26,18 +26,25 @@
 </script>
 
 <div class="mt-5 relative" data-outline>
-  <button
-    class="flex items-center cursor-pointer max-w-[219px]"
-    on:click={(e) => {
-      e.stopPropagation();
-      open = !open;
-    }}
-  >
-    <p class="dark:text-white text-lg font-bold whitespace-nowrap truncate">
-      {$currentOrg.name}
-    </p>
-    <CaretSortIcon size={16} class="ml-2" />
-  </button>
+  {#if $currentOrg.name}
+    <button
+      class="flex items-center cursor-pointer max-w-[219px]"
+      on:click={(e) => {
+        e.stopPropagation();
+        open = !open;
+      }}
+    >
+      <p class="dark:text-white text-lg font-bold whitespace-nowrap truncate">
+        {$currentOrg.name}
+      </p>
+      <CaretSortIcon size={16} class="ml-2" />
+    </button>
+  {:else}
+    <div class="w-[219px] h-[30px]">
+      <SkeletonText style="width: 100%; height: 100%;" />
+    </div>
+  {/if}
+
   <Popover bind:open closeOnOutsideClick align="bottom-left">
     <OrgSelectorItem
       size="sm"