mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-14 21:01:08 +02:00
feat(workbench): match AppPagePicker design to module pages
- Bump PickerOverlay border-radius from 0.375rem to 1.25rem to match PageShell — picker now visually aligns with the page cards next to it - Replace colored dots in AppPagePicker with monochrome app icons (uses each app's icon component from the registry, currentColor) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
f7de9fdf2d
commit
f7835471f4
2 changed files with 21 additions and 12 deletions
|
|
@ -75,13 +75,14 @@
|
|||
min-height: 60vh;
|
||||
max-height: 80vh;
|
||||
background: hsl(var(--color-card));
|
||||
border-radius: 0.375rem;
|
||||
border-radius: 1.25rem;
|
||||
box-shadow:
|
||||
0 2px 8px rgba(0, 0, 0, 0.08),
|
||||
0 0 0 1px rgba(0, 0, 0, 0.04);
|
||||
0 2px 8px hsl(0 0% 0% / 0.08),
|
||||
0 0 0 1px hsl(var(--color-border));
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
animation: slideIn 0.25s ease-out;
|
||||
overflow: hidden;
|
||||
}
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
|
|
|
|||
|
|
@ -78,7 +78,12 @@
|
|||
{/snippet}
|
||||
{#snippet item(app)}
|
||||
<button class="picker-option" onclick={() => onSelect(app.id)}>
|
||||
<div class="app-dot" style="background-color: {app.color}"></div>
|
||||
<div class="app-icon-wrap">
|
||||
{#if app.icon}
|
||||
{@const Icon = app.icon}
|
||||
<Icon size={18} />
|
||||
{/if}
|
||||
</div>
|
||||
<span class="app-name">{appName(app.id, app.name)}</span>
|
||||
</button>
|
||||
{/snippet}
|
||||
|
|
@ -111,18 +116,21 @@
|
|||
color: hsl(var(--color-muted-foreground));
|
||||
}
|
||||
|
||||
:global(.picker .app-dot) {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 9999px;
|
||||
:global(.picker .app-icon-wrap) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
flex-shrink: 0;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
}
|
||||
:global(.picker .picker-option:hover .app-icon-wrap) {
|
||||
color: hsl(var(--color-foreground));
|
||||
}
|
||||
:global(.picker .app-name) {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: #374151;
|
||||
}
|
||||
:global(.dark .picker .app-name) {
|
||||
color: #f3f4f6;
|
||||
color: hsl(var(--color-foreground));
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue