mirror of
https://github.com/nexu-io/open-design.git
synced 2026-10-27 09:51:12 +01:00
style(web): slim NewProjectPanel form (title, fidelity, buttons, ds-picker)
The form inside the new white card felt overweight against the
compacted layout from the previous commits — fidelity cards were
~133px tall, the Create button + Open-folder secondary button both
had ~11px symmetric padding, the design-system trigger had a 32px
avatar in a 55px-tall row. Slim every element so the card reads as a
focused form, not a stack of beefy buttons.
Title:
- \`.newproj-title\` font \`14px / 600 → 13px / 550\`. Still
visibly the section heading but no longer competing with the
serif brand title above.
Fidelity:
- \`.fidelity-thumb { aspect-ratio: 12/7 → 16/7 }\`. The previous
aspect made cards taller than they needed to be in the narrow
sidebar column.
- \`.fidelity-card { gap: 8 → 6, padding: 10/10/12 → 8/8/10 }\`.
Combined with the thumb aspect change, card height drops from
~133px → ~102px (visually close to the Claude Design reference
while keeping the same content).
Primary / secondary buttons:
- \`.newproj-create\` padding \`11px (symmetric) → 8px 11px\`,
margin-top \`4 → 2\` — primary CTA no longer towers over the
fidelity cards above it.
- \`.newproj-import\` padding \`10px → 6px 10px\` — the secondary
"Import Claude Design ZIP" button feels like an alt option, not
a peer of Create.
Design system trigger:
- \`.ds-picker-trigger\` gap \`10 → 8\`, padding \`8/10 → 6/10\`.
- \`.ds-picker-title\` font \`13 → 12.5\` so name + subtitle stay
legible in the slimmer row without overflowing the column.
- \`.ds-avatar\` width/height \`32 → 26\`, border-radius \`6 → 5\`.
The thumbnail was the dominant element in the row; shrinking it
pulls the row height from ~55px → ~50px.
Footer disclaimer:
- \`.newproj-footer\` padding-top \`0 → 12px\`. The "Only you can
see your project by default." line was butting against the card
bottom; 12px of air separates the disclaimer (page-bg context)
from the card (panel-bg context) cleanly.
This commit is contained in:
+15
-15
@@ -3869,8 +3869,8 @@ code {
|
||||
}
|
||||
.newproj-title {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
font-weight: 550;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
@@ -4137,8 +4137,8 @@ code {
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
padding: 11px;
|
||||
margin-top: 4px;
|
||||
padding: 8px 11px;
|
||||
margin-top: 2px;
|
||||
font-size: 13px;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
@@ -4148,7 +4148,7 @@ code {
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
padding: 6px 10px;
|
||||
font-size: 12.5px;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
@@ -4183,7 +4183,7 @@ code {
|
||||
opacity: 0.7;
|
||||
}
|
||||
.newproj-footer {
|
||||
padding: 0 24px 16px;
|
||||
padding: 12px 24px 16px;
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
text-align: center;
|
||||
@@ -4201,8 +4201,8 @@ code {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 8px;
|
||||
padding: 10px 10px 12px;
|
||||
gap: 6px;
|
||||
padding: 8px 8px 10px;
|
||||
background: var(--bg-panel);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
@@ -4219,7 +4219,7 @@ code {
|
||||
.fidelity-thumb {
|
||||
display: block;
|
||||
width: 100%;
|
||||
aspect-ratio: 12 / 7;
|
||||
aspect-ratio: 16 / 7;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
background: var(--bg-subtle);
|
||||
@@ -4515,9 +4515,9 @@ code {
|
||||
.ds-picker-trigger {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
padding: 8px 10px;
|
||||
padding: 6px 10px;
|
||||
background: var(--bg-panel);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
@@ -4541,7 +4541,7 @@ code {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 13px;
|
||||
font-size: 12.5px;
|
||||
font-weight: 500;
|
||||
color: var(--text);
|
||||
overflow: hidden;
|
||||
@@ -4575,9 +4575,9 @@ code {
|
||||
.ds-avatar {
|
||||
position: relative;
|
||||
flex: none;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 6px;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg-panel);
|
||||
|
||||
Reference in New Issue
Block a user