ui/sidebar: updates component and introduces new styles (e.g. colors, typograhy)

pkgs/webview-ui/app/src/components/Sidebar/SidebarHeader.tsx

@@ -1,18 +1,33 @@
-import {SidebarFlyout} from './SidebarFlyout'
+import {createSignal} from 'solid-js'
+
 import {Typography} from '@/src/components/Typography'
+import {SidebarFlyout} from './SidebarFlyout'
 
 interface SidebarHeader {
     clanName?: string
 }
 
 export const SidebarHeader = (props:SidebarHeader)=>{
-    const {clanName} = props
+    const {clanName} = props;
+
+    const [showFlyout, toggleFlyout] = createSignal(false)
+
+    function handleClick(){
+        toggleFlyout(!showFlyout())
+    }
     
     return <header class="sidebar__header">
-        <div class="sidebar__header__inner">
+        <div onClick={handleClick} class="sidebar__header__inner">
-            <div class="sidebar__profile">P</div>
+            <div class={`sidebar__profile ${showFlyout() ? 'sidebar__profile--flyout' : ''}`}>
+                <Typography classes='sidebar__title' tag='span' hierarchy='title' size='m' weight='bold' color='primary' inverted={!showFlyout()}>
+                    {clanName?.slice(0,1) || 'U'}
+                </Typography>    
+            </div>
             <Typography classes='sidebar__title' tag='h3' hierarchy='body' size='default' weight='medium' color='primary' inverted={true}>{clanName || 'Untitled'}</Typography>
         </div>
-        <SidebarFlyout/>
+        { showFlyout() &&
+            <SidebarFlyout/>
+        }
+        
     </header>
 }

pkgs/webview-ui/app/src/components/Sidebar/SidebarListItem.tsx

@@ -1,3 +1,5 @@
+import {Typography} from '@/src/components/Typography'
+
 interface SidebarListItem {
     title:string;
     delegateClick: () => void;
@@ -7,5 +9,6 @@ export const SidebarListItem = (props: SidebarListItem) =>{
     const {title} = props;
 
     return <li class="sidebar__list__item">
-        <span class="sidebar__list__content">{title}</span></li>
+            <Typography classes='sidebar__list__content' tag='span' hierarchy='body' size='default' weight='normal' color="primary" inverted={true}>{title}</Typography>              
+         </li>
 }

pkgs/webview-ui/app/src/components/Sidebar/css/sidebar-flyout.css

@@ -14,8 +14,7 @@
     height: inherit;
     
     padding: theme(padding.12) theme(padding.3) theme(padding.3);
-    background-color: rgba(var(--clr-bg-inv-4)/0.90);
+    background-color: rgba(var(--clr-bg-inv-4)/0.95);
-    border: 1px solid var(--clr-border-inv-4);
+    border: 1px solid rgb(var(--clr-border-inv-4));
-
     border-radius: theme(borderRadius.lg);
 }

pkgs/webview-ui/app/src/components/Sidebar/css/sidebar-header.css

@@ -1,15 +1,20 @@
 .sidebar__header {
     position: relative;
     padding: 1px 1px 0;
+    cursor: pointer;
     
 
     &:after {
         content: '';
         position: absolute;
+        top: 0;
+        left: 0;
 
         width: 100%;
         height: 100%;
         background: rgb(var(--clr-bg-inv-3));
+        
+        border-bottom: 1px solid var(--clr-border-inv-3);
         border-top-left-radius: theme(borderRadius.xl);
         border-top-right-radius: theme(borderRadius.xl);
     }

pkgs/webview-ui/app/src/components/Sidebar/css/sidebar-profile.css

@@ -8,4 +8,8 @@
 
     background: rgb(var(--clr-bg-inv-4));
     border-radius: 50%;
+}
+
+.sidebar__profile--flyout{
+    background: rgb(var(--clr-bg-def-2));
 }

pkgs/webview-ui/app/src/index.css

@@ -29,11 +29,11 @@
   --clr-bg-def-4: theme(colors.clan-secondary.200);
   --clr-bg-def-5: theme(colors.clan-secondary.300);
 
-  --clr-border-def-1: theme(colors.clan-primary.50);
+  --clr-border-def-1: theme(colors.clan-secondary.50);
-  --clr-border-def-2: theme(colors.clan-primary.100);
+  --clr-border-def-2: theme(colors.clan-secondary.100);
-  --clr-border-def-3: theme(colors.clan-primary.200);
+  --clr-border-def-3: theme(colors.clan-secondary.200);
-  --clr-border-def-4: theme(colors.clan-primary.300);
+  --clr-border-def-4: theme(colors.clan-secondary.300);
-  --clr-border-def-5: theme(colors.clan-primary.400);
+  --clr-border-def-5: theme(colors.clan-secondary.400);
 
   --clr-bg-inv-1: theme(colors.clan-primary.600);
   --clr-bg-inv-2: theme(colors.clan-primary.700);
@@ -41,10 +41,10 @@
   --clr-bg-inv-4: theme(colors.clan-primary.900);
   --clr-bg-inv-5: theme(colors.clan-primary.950);
 
-  --clr-border-inv-1: theme(colors.clan-primary.800);
+  --clr-border-inv-1: theme(colors.clan-secondary.800);
-  --clr-border-inv-2: theme(colors.clan-primary.900);
+  --clr-border-inv-2: theme(colors.clan-secondary.900);
-  --clr-border-inv-3: theme(colors.clan-primary.900);
+  --clr-border-inv-3: theme(colors.clan-secondary.900);
-  --clr-border-inv-4: theme(colors.clan-primary.950);
+  --clr-border-inv-4: theme(colors.clan-secondary.950);
   --clr-border-inv-5: theme(colors.black);
 
   --clr-bg-inv-acc-1: theme(colors.clan-secondary.500);