Merge pull request #2606 from appwrite/feat-profiles-polishing

Author: TorstenDittmann

.github/workflows/dockerize-profiles.yml

@@ -50,4 +50,4 @@ jobs:
                   build-args: |
                       "PUBLIC_CONSOLE_MODE=cloud"
                       "PUBLIC_CONSOLE_PROFILE=studio"
-                      "PUBLIC_APPWRITE_MULTI_REGOIN=false"
+                      "PUBLIC_APPWRITE_MULTI_REGOIN=false"

package.json

@@ -24,9 +24,9 @@
         "@ai-sdk/svelte": "^1.1.24",
         "@appwrite.io/console": "https://pkg.vc/-/@appwrite/@appwrite.io/console@5ce6dc7",
         "@appwrite.io/pink-icons": "0.25.0",
-        "@appwrite.io/pink-icons-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@4472521",
+        "@appwrite.io/pink-icons-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@c255e7b",
         "@appwrite.io/pink-legacy": "^1.0.3",
-        "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@4472521",
+        "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@c255e7b",
         "@faker-js/faker": "^9.9.0",
         "@popperjs/core": "^2.11.8",
         "@sentry/sveltekit": "^8.55.0",

pnpm-lock.yaml

@@ -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/navbar.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/components/sidebar.svelte

@@ -9,7 +9,6 @@ export { default as Shell } from './shell.svelte';
 export { default as WizardWithSteps } from './wizardWithSteps.svelte';
 export { default as WizardStep } from './wizardStep.svelte';
 export { default as Breadcrumbs } from './breadcrumbs.svelte';
-export { default as Unauthenticated } from './unauthenticated.svelte';
 export { default as Usage, type UsagePeriods } from './usage.svelte';
 export { default as UsageMultiple } from './usageMultiple.svelte';
 export { default as Activity } from './activity.svelte';

src/lib/images/login/login-studio.png

@@ -19,6 +19,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';
     import { isFreePlan } from '$lib/helpers/billing';
 
     export let showHeader = 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/layout/index.ts

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { base } from '$app/paths';
+    import { resolve } from '$app/paths';
     import { AvatarInitials, Card } from '$lib/components';
     import AppwriteLogoDark from '$lib/images/appwrite-logo-dark.svg';
     import AppwriteLogoLight from '$lib/images/appwrite-logo-light.svg';
@@ -57,19 +57,19 @@
             class="logo u-flex u-gap-16"
             class:is-not-mobile={variation === 'default'}
             class:logo-variation={variation !== 'default'}>
-            <a href={base}>
+            <a href={resolve('/')}>
                 {#if $app.themeInUse === 'dark'}
                     <img
-                        src={AppwriteLogoDark}
+                        src={resolvedProfile.logo.src.dark}
                         width="160"
                         class="u-block u-only-dark"
-                        alt="{resolvedProfile.platform} Logo" />
+                        alt={resolvedProfile.logo.alt} />
                 {:else}
                     <img
-                        src={AppwriteLogoLight}
+                        src={resolvedProfile.logo.src.light}
                         width="160"
                         class="u-block u-only-light"
-                        alt="{resolvedProfile.platform} Logo" />
+                        alt={resolvedProfile.logo.alt} />
                 {/if}
             </a>
         </div>
@@ -169,7 +169,7 @@
             </div>
             <div
                 class="logo u-flex u-gap-16 u-margin-inline-auto is-only-mobile u-margin-block-start-32 mobile-logo">
-                <a href={base}>
+                <a href={resolve('/')}>
                     {#if $app.themeInUse === 'dark'}
                         <img
                             src={AppwriteLogoDark}