Tweak UI borders radii layout and studio theming

src/lib/components/navbar.svelte

@@ -120,7 +120,7 @@
     beforeNavigate(() => (showAccountMenu = false));
 </script>
 
-<Navbar.Base>
+<Navbar.Base --border-width-s="none">
     <div slot="left" class="left">
         <div class="only-mobile-tablet">
             <button
@@ -149,7 +149,7 @@
             </div>
         {/if}
     </div>
-    <div slot="right" class="only-desktop">
+    <div slot="right" class="only-desktop" style:--border-width-s="1px">
         <div class="right">
             <Layout.Stack gap="l" direction="row" alignItems="center">
                 {#if isCloud && currentOrg?.showUpgrade}

src/lib/components/sidebar.svelte

@@ -119,6 +119,7 @@
     class="sidebar"
     class:only-mobile-tablet={!project}
     class:no-transitions={$noWidthTransition}
+    style:--border-width-s="0"
     style:--overlay-on-neutral={$app.themeInUse === 'dark'
         ? 'var(--neutral-750)'
         : 'var(--neutral-100)'}>

src/lib/layout/shell.svelte

@@ -20,6 +20,7 @@
     import { getSidebarState, isInDatabasesRoute, updateSidebarState } from '$lib/helpers/sidebar';
     import { isTabletViewport } from '$lib/stores/viewport';
     import { ProfileMode, resolvedProfile } from '$lib/profiles/index.svelte';
+    import { app } from '$lib/stores/app';
 
     export let showHeader = true;
     export let showFooter = true;
@@ -154,7 +155,8 @@
             .getInitials({
                 name: $user?.name,
                 width: 80,
-                height: 80
+                height: 80,
+                background: $app.themeInUse === 'dark' ? 'E4E4E7' : '6C6C71'
             })
             .toString(),
 
@@ -254,13 +256,20 @@
         width: 100%;
 
         margin-block-start: 48px;
-
+        border-radius: 16px;
+        border: 1px solid var(--border-neutral);
+        overflow: scroll;
+        height: calc(100vh - 60px);
+        max-width: calc(100vw - 76px);
+        margin-top: 48px;
+        margin-right: 10px;
+        margin-left: 64px;
         @media (min-width: 1024px) {
             width: 100%;
             padding-left: 190px;
 
             &.icons-content {
-                padding-left: 54px;
+                padding-left: 0px;
             }
         }
     }
@@ -276,7 +285,7 @@
     }
 
     .main-content {
-        min-height: calc(100vh - 48px);
+        min-height: calc(100vh - 62px);
     }
 
     .no-header {

src/lib/studio/studio-widget.ts

@@ -59,6 +59,11 @@ function ensureBaseStyles(node: HTMLElement) {
     node.style.position = 'fixed';
     node.style.height = `calc(100vh - ${BLOCK_START_BASE_OFFSET}px)`;
     node.style.maxHeight = `calc(100vh - ${BLOCK_START_BASE_OFFSET}px)`;
+    node.style.borderRadius = '16px';
+    node.style.border = '1px solid var(--border-neutral)';
+    node.style.padding = '0';
+    node.style.overflow = 'hidden';
+
     if (!node.style.display) {
         node.style.display = 'none';
     }
@@ -190,12 +195,11 @@ function updatePosition() {
 
     const rect = anchorElement.getBoundingClientRect();
     const { offsetX, offsetY } = currentOptions;
-    const left = rect.left + offsetX;
+    const left = rect.left + offsetX + 10;
     const top = BLOCK_START_BASE_OFFSET + offsetY;
 
-    component.style.width = `${rect.width}px`;
-    component.style.height = `calc(100vh - ${BLOCK_START_BASE_OFFSET}px)`;
-    component.style.paddingInlineStart = `${INLINE_START_BASE_OFFSET}px`;
+    component.style.width = `${rect.width - 20}px`;
+    component.style.height = `calc(100vh - ${BLOCK_START_BASE_OFFSET + 10}px)`;
     component.style.left = `${left}px`;
     component.style.top = `${top}px`;
 }
@@ -285,7 +289,7 @@ export async function initImagine(
                 {
                     AI_SERVICE_ENDPOINT: PUBLIC_AI_SERVICE_BASE_URL,
                     APPWRITE_ENDPOINT: PUBLIC_APPWRITE_ENDPOINT,
-                    APPWRITE_SITES_BASE_URL: ''
+                    APPWRITE_SITES_BASE_URL: 'https://stage.appwrite.network'
                 },
                 {
                     initialTheme: get(app).themeInUse,

src/routes/+layout.svelte

@@ -33,7 +33,7 @@
                 if (resolvedProfile.id === ProfileMode.STUDIO) return ThemeDarkStudio;
                 return isCloud ? ThemeDarkCloud : ThemeDark;
             case 'light':
-                if (resolvedProfile.id === ProfileMode.CONSOLE) return ThemeLightStudio;
+                if (resolvedProfile.id === ProfileMode.STUDIO) return ThemeLightStudio;
                 return isCloud ? ThemeLightCloud : ThemeLight;
         }
     }

src/themes/index.ts

@@ -7,4 +7,5 @@ import lightStudio from './light-studio.json';
 
 export const ThemeDarkStudio = { ...ThemeDarkCloud, ...darkStudio };
 export const ThemeLightStudio = { ...ThemeLightCloud, ...lightStudio };
+console.log(ThemeLightStudio);
 export { ThemeDark, ThemeLight, ThemeDarkCloud, ThemeLightCloud };

src/themes/light-studio.json

@@ -1,4 +1,5 @@
 {
+    "p-body-bg-color": "var(--neutral-0)",
     "bgcolor-accent": "var(--neutral-1000)",
     "bgcolor-accent-secondary": "var(--neutral-900)",
     "bgcolor-accent-tertiary": "var(--neutral-850)"