vrr/CodeNomad
2
0
Fork 0
mirror of https://github.com/NeuralNomadsAI/CodeNomad.git synced 2026-07-10 00:14:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

fix(ui): remove settings rounded corners

Browse source 
Make the Settings screen use square corners across panels, cards, and embedded controls.
This commit is contained in:
Shantur Rathore 2026-03-11 10:55:51 +00:00
parent 627ff2d42b
commit 51f8eff3f7
1 changed files with 32 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

42
packages/ui/src/styles/components/settings-screen.css
View file

@ -11,9 +11,31 @@
grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
overflow: hidden;
border: 1px solid var(--border-base);
border-radius: 0;
box-shadow: 0 32px 96px color-mix(in oklab, var(--overlay-scrim) 55%, transparent);
}
/* Settings UI uses square corners (no radius). */
.modal-surface.settings-screen-shell .selector-trigger,
.modal-surface.settings-screen-shell .selector-popover,
.modal-surface.settings-screen-shell .selector-option,
.modal-surface.settings-screen-shell .selector-button,
.modal-surface.settings-screen-shell .selector-input,
.modal-surface.settings-screen-shell .selector-search-input,
.modal-surface.settings-screen-shell .remote-close,
.modal-surface.settings-screen-shell .remote-section,
.modal-surface.settings-screen-shell .remote-refresh,
.modal-surface.settings-screen-shell .remote-toggle,
.modal-surface.settings-screen-shell .remote-toggle-switch,
.modal-surface.settings-screen-shell .remote-toggle-thumb,
.modal-surface.settings-screen-shell .remote-address,
.modal-surface.settings-screen-shell .remote-pill,
.modal-surface.settings-screen-shell .remote-qr,
.modal-surface.settings-screen-shell .remote-card,
.modal-surface.settings-screen-shell .remote-error {
border-radius: 0;
}
.settings-screen-nav {
display: flex;
flex-direction: column;
@ -41,7 +63,7 @@
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: 0.875rem;
border-radius: 0;
background: color-mix(in oklab, var(--accent-primary) 16%, var(--surface-base));
color: var(--accent-primary);
}
@ -75,7 +97,7 @@
gap: 0.75rem;
width: 100%;
padding: 0.75rem 0.875rem;
border-radius: 0.875rem;
border-radius: 0;
border: 1px solid transparent;
background: transparent;
color: var(--text-secondary);
@ -179,7 +201,7 @@
.settings-card {
padding: 1.25rem;
border: 1px solid var(--border-base);
border-radius: 1rem;
border-radius: 0;
background: color-mix(in oklab, var(--surface-base) 86%, var(--surface-secondary) 14%);
}
@ -235,7 +257,7 @@
.settings-card-message {
padding: 1rem;
border: 1px dashed var(--border-base);
border-radius: 0.625rem;
border-radius: 0;
color: var(--text-muted);
font-size: var(--font-size-sm);
}
@ -243,7 +265,7 @@
.settings-card-content {
padding: 1rem;
border: 1px solid var(--border-base);
border-radius: 0.625rem;
border-radius: 0;
background: var(--surface-base);
}
@ -276,7 +298,7 @@
align-items: center;
gap: 0.375rem;
padding: 0.5rem 0.875rem;
border-radius: 999px;
border-radius: 0;
border: 1px solid var(--border-base);
background: var(--surface-secondary);
color: var(--text-primary);
@ -300,7 +322,7 @@
padding: 0.75rem;
border: 1px solid var(--border-critical, #e65c5c);
background: color-mix(in srgb, var(--border-critical, #e65c5c) 10%, transparent);
border-radius: 0.625rem;
border-radius: 0;
color: var(--text-primary);
font-size: var(--font-size-sm);
}
@ -309,7 +331,7 @@
display: inline-flex;
align-items: center;
padding: 0.375rem 0.6rem;
border-radius: 999px;
border-radius: 0;
background: color-mix(in oklab, var(--surface-secondary) 75%, var(--surface-base));
color: var(--text-secondary);
font-size: var(--font-size-xs);
@ -334,7 +356,7 @@
gap: 0.875rem;
width: 100%;
padding: 0.95rem;
border-radius: 1rem;
border-radius: 0;
border: 1px solid var(--border-base);
background: var(--surface-base);
color: var(--text-primary);
@ -367,7 +389,7 @@
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: 0.9rem;
border-radius: 0;
background: color-mix(in oklab, var(--surface-secondary) 76%, var(--surface-base));
color: var(--accent-primary);
flex-shrink: 0;