Appwrite/console
1
0
Fork 0
mirror of https://github.com/appwrite/console.git synced 2026-06-06 19:27:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Upgrade pink-icons-svelte and pink-svelte; adjust UI layout

Browse Source 
- Update pink-icons-svelte and pink-svelte to 5b26bb8 - Update pnpm
lockfile refs to new pink versions - Remove IconCommand and swap in
IconTemplate in the sidebar - Change shell layout overflow from scroll
to hidden - Add button theming for light/dark in studio.css - Make
viewStudio layout fixed and width offset
This commit is contained in:
Torsten Dittmann
2025-11-18 20:12:20 +04:00
parent 6adb5172b4
commit 159a5bcbf7
6 changed files with 209 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+2 -2
View File
@@ -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@c255e7b",
"@appwrite.io/pink-icons-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@5b26bb8",
"@appwrite.io/pink-legacy": "^1.0.3",
"@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@c255e7b",
"@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@5b26bb8",
"@faker-js/faker": "^9.9.0",
"@popperjs/core": "^2.11.8",
"@sentry/sveltekit": "^8.55.0",
pnpm-lock.yaml
Generated
+10 -10
View File
@@ -18,14 +18,14 @@ importers:
specifier: 0.25.0
version: 0.25.0
'@appwrite.io/pink-icons-svelte':
specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@c255e7b
version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@c255e7b(svelte@5.43.6)
specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@5b26bb8
version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@5b26bb8(svelte@5.43.6)
'@appwrite.io/pink-legacy':
specifier: ^1.0.3
version: 1.0.3
'@appwrite.io/pink-svelte':
specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@c255e7b
version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@c255e7b(svelte@5.43.6)
specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@5b26bb8
version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@5b26bb8(svelte@5.43.6)
'@faker-js/faker':
specifier: ^9.9.0
version: 9.9.0
@@ -281,8 +281,8 @@ packages:
peerDependencies:
svelte: ^4.0.0
'@appwrite.io/pink-icons-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@c255e7b':
resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@c255e7b}
'@appwrite.io/pink-icons-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@5b26bb8':
resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@5b26bb8}
version: 2.0.0-RC.1
peerDependencies:
svelte: ^4.0.0
@@ -296,8 +296,8 @@ packages:
'@appwrite.io/pink-legacy@1.0.3':
resolution: {integrity: sha512-GGde5fmPhs+s6/3aFeMPc/kKADG/gTFkYQSy6oBN8pK0y0XNCLrZZgBv+EBbdhwdtqVEWXa0X85Mv9w7jcIlwQ==}
'@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@c255e7b':
resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@c255e7b}
'@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@5b26bb8':
resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@5b26bb8}
version: 2.0.0-RC.2
peerDependencies:
svelte: ^4.0.0
@@ -3654,7 +3654,7 @@ snapshots:
dependencies:
svelte: 5.43.6
'@appwrite.io/pink-icons-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@c255e7b(svelte@5.43.6)':
'@appwrite.io/pink-icons-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@5b26bb8(svelte@5.43.6)':
dependencies:
svelte: 5.43.6
@@ -3667,7 +3667,7 @@ snapshots:
'@appwrite.io/pink-icons': 1.0.0
the-new-css-reset: 1.11.3
'@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@c255e7b(svelte@5.43.6)':
'@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@5b26bb8(svelte@5.43.6)':
dependencies:
'@appwrite.io/pink-icons-svelte': 2.0.0-RC.1(svelte@5.43.6)
'@floating-ui/dom': 1.6.13
src/lib/components/sidebar.svelte
+3 -3
View File
@@ -19,13 +19,13 @@
IconChartBar,
IconChatBubble,
IconCog,
IconCommand,
IconDatabase,
IconFolder,
IconGlobeAlt,
IconLightningBolt,
IconSearch,
IconUserGroup
IconUserGroup,
IconTemplate
} from '@appwrite.io/pink-icons-svelte';
import { toggleCommandCenter } from '$lib/commandCenter/commandCenter.svelte';
import { feedback } from '$lib/stores/feedback';
@@ -188,7 +188,7 @@
sideBarIsOpen = false;
}}
><span class="link-icon"
><Icon icon={IconCommand} size="s" />
><Icon icon={IconTemplate} size="s" />
</span><span
class:no-text={state === 'icons'}
class:has-text={state === 'open'}
src/lib/layout/shell.svelte
+1 -1
View File
@@ -257,7 +257,7 @@
margin-block-start: 48px;
border-radius: 16px;
border: 1px solid var(--border-neutral);
overflow: scroll;
overflow: hidden;
height: calc(100vh - 60px);
max-width: calc(100vw - 76px);
margin-top: 48px;
src/lib/profiles/css/studio.css
+190
View File
@@ -1,6 +1,196 @@
body {
background: var(--bgcolor-neutral-primary);
}
a.primary,
button.primary {
--border-width-s: 0px;
background:
linear-gradient(
180deg,
rgba(255, 255, 255, 0.08) 0%,
rgba(0, 0, 0, 0) 40.87%,
#2d2d31 100%
),
#2d2d31 !important;
--button-box-shadow:
0 3px 0 0 rgba(255, 255, 255, 0.16) inset, 0 -2px 0 0 #000 inset, 0 1px 0 0 #000 inset,
0 1px 1px 0 rgba(0, 0, 0, 0.12), 0 2px 5px 0 rgba(0, 0, 0, 0.16);
}
a.primary:hover,
button.primary:hover {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%),
linear-gradient(
180deg,
rgba(255, 255, 255, 0.04) 0%,
rgba(0, 0, 0, 0) 40.87%,
#2d2d31 100%
),
#2d2d31 !important;
--button-box-shadow:
0 3px 0 0 rgba(255, 255, 255, 0.16) inset, 0 -2px 0 0 #000 inset, 0 1px 0 0 #000 inset,
0 1px 1px 0 rgba(0, 0, 0, 0.12), 0 2px 5px 0 rgba(0, 0, 0, 0.12);
}
a.primary:active:not(:disabled),
button.primary:active:not(:disabled) {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(0, 0, 0, 0) 40.87%, #000 100%),
#2d2d31 !important;
box-shadow:
0 4px 4px 0 rgba(0, 0, 0, 0.02) inset,
0 -3px 4px 0 rgba(255, 255, 255, 0.16) inset,
0 1px 1px 0 rgba(0, 0, 0, 0.12);
}
.theme-dark a.primary,
.theme-dark button.primary {
background:
linear-gradient(
180deg,
rgba(255, 255, 255, 0) 0%,
rgba(0, 0, 0, 0) 40.87%,
rgba(0, 0, 0, 0.08) 100%
),
#f4f4f7 !important;
--button-box-shadow:
0 -2px 0 0 rgba(0, 0, 0, 0.12) inset, 0 1px 0 0 rgba(237, 237, 240, 0.8) inset,
0 3px 0 0 rgba(255, 255, 255, 1) inset, 0 1px 1px 0 rgba(0, 0, 0, 0.2),
0 2px 5px 0 rgba(0, 0, 0, 0.24);
}
.theme-dark a.primary:hover,
.theme-dark button.primary:hover {
background:
linear-gradient(0deg, rgba(255, 255, 255, 0) -16.18%, rgba(255, 255, 255, 0.7) 100%),
linear-gradient(
180deg,
rgba(255, 255, 255, 0) 0%,
rgba(0, 0, 0, 0) 40.87%,
rgba(0, 0, 0, 0.08) 100%
),
#f4f4f7 !important;
--button-box-shadow:
0 -2px 0 0 rgba(0, 0, 0, 0.16) inset, 0 1px 0 0 rgba(237, 237, 240, 0.8) inset,
0 3px 0 0 rgba(255, 255, 255, 1) inset, 0 1px 1px 0 rgba(0, 0, 0, 0.16),
0 2px 5px 0 rgba(0, 0, 0, 0.2);
}
.theme-dark a.primary:active:not(:disabled),
.theme-dark button.primary:active:not(:disabled) {
background:
linear-gradient(
180deg,
rgba(0, 0, 0, 0.12) 0%,
rgba(0, 0, 0, 0.06) 40.87%,
rgba(0, 0, 0, 0.18) 100%
),
#f4f4f7 !important;
--button-box-shadow:
0 1px 4px 4px rgba(0, 0, 0, 0.08), 0 3px 0 0 rgba(255, 255, 255, 0.16) inset,
0 -2px 0 0 rgba(0, 0, 0, 0.16) inset, 0 1px 0 0 rgba(250, 250, 251, 0.8) inset,
0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 2px 5px 0 rgba(0, 0, 0, 0.24);
}
a.secondary,
button.secondary {
--border-width-s: 0px;
background:
linear-gradient(
180deg,
rgba(255, 255, 255, 0) 0%,
rgba(0, 0, 0, 0) 40.87%,
rgba(0, 0, 0, 0.08) 100%
),
#f4f4f7 !important;
--button-box-shadow:
0 -2px 0 0 rgba(0, 0, 0, 0.04) inset, 0 1px 0 0 rgba(237, 237, 240, 0.8) inset,
0 3px 0 0 rgba(255, 255, 255, 0.5) inset, 0 1px 1px 0 rgba(0, 0, 0, 0.12),
0 2px 5px 0 rgba(0, 0, 0, 0.12);
}
a.secondary:hover,
button.secondary:hover {
background:
linear-gradient(0deg, rgba(255, 255, 255, 0) -16.18%, rgba(255, 255, 255, 0.4) 100%),
linear-gradient(
180deg,
rgba(255, 255, 255, 0) 0%,
rgba(0, 0, 0, 0) 40.87%,
rgba(0, 0, 0, 0.08) 100%
),
#f4f4f7 !important;
--button-box-shadow:
0 -2px 0 0 rgba(0, 0, 0, 0.04) inset, 0 1px 0 0 rgba(237, 237, 240, 0.8) inset,
0 3px 0 0 rgba(255, 255, 255, 0.5) inset, 0 1px 1px 0 rgba(0, 0, 0, 0.09),
0 2px 5px 0 rgba(0, 0, 0, 0.1);
}
a.secondary:active:not(:disabled),
button.secondary:active:not(:disabled) {
background:
linear-gradient(
180deg,
rgba(255, 255, 255, 0) 0%,
rgba(0, 0, 0, 0) 40.87%,
rgba(0, 0, 0, 0.08) 100%
),
#f4f4f7 !important;
--button-box-shadow:
0 1px 4px 4px rgba(0, 0, 0, 0.01), 0 3px 0 0 rgba(255, 255, 255, 0.02) inset,
0 -2px 0 0 rgba(0, 0, 0, 0.02) inset, 0 1px 0 0 rgba(250, 250, 251, 0.5) inset,
0 1px 1px 0 rgba(0, 0, 0, 0.06), 0 2px 5px 0 rgba(0, 0, 0, 0.06);
}
.theme-dark a.secondary,
.theme-dark button.secondary {
background:
linear-gradient(
180deg,
rgba(255, 255, 255, 0.08) 0%,
rgba(0, 0, 0, 0) 40.87%,
#2d2d31 100%
),
#2d2d31 !important;
--button-color: oklch(0.985 0 0);
--button-box-shadow:
0 3px 0 0 rgba(255, 255, 255, 0.1) inset, 0 -2px 0 0 #000 inset, 0 1px 0 0 #000 inset,
0 1px 1px 0 rgba(0, 0, 0, 0.12), 0 2px 5px 0 rgba(0, 0, 0, 0.16);
}
.theme-dark a.secondary:hover,
.theme-dark button.secondary:hover {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%),
linear-gradient(
180deg,
rgba(255, 255, 255, 0.04) 0%,
rgba(0, 0, 0, 0) 40.87%,
#2d2d31 100%
),
#2d2d31 !important;
--button-box-shadow:
0 3px 0 0 rgba(255, 255, 255, 0.1) inset, 0 -2px 0 0 #000 inset, 0 1px 0 0 #000 inset,
0 1px 1px 0 rgba(0, 0, 0, 0.12), 0 2px 5px 0 rgba(0, 0, 0, 0.12);
--button-color: oklch(0.985 0 0);
}
.theme-dark a.secondary:active:not(:disabled),
.theme-dark button.secondary:active:not(:disabled) {
background:
linear-gradient(
180deg,
rgba(255, 255, 255, 0.02) 0%,
rgba(0, 0, 0, 0) 40.87%,
rgba(0, 0, 0, 0.08) 100%
),
#2d2d31 !important;
--button-box-shadow:
0 3px 0 0 rgba(255, 255, 255, 0.1) inset, 0 -2px 0 0 #000 inset, 0 1px 0 0 #000 inset,
0 1px 1px 0 rgba(0, 0, 0, 0.12), 0 2px 5px 0 rgba(0, 0, 0, 0.16);
}
button.danger {
--button-color: var(--neutral-0);
}
src/routes/(console)/organization-[organization]/viewStudio.svelte
+3 -2
View File
@@ -37,8 +37,9 @@
<style>
.studio-page {
position: relative;
width: 100%;
position: fixed;
width: calc(100vw - 20px);
left: 10px;
height: calc(100vh - 48px);
overflow: scroll;
background: var(--bgcolor-neutral-primary);