Improve contrast and tighten crowded page headers
Darken secondary text on white surfaces, keep long labels readable, and move the OAuth browser picker and quota actions onto existing rows instead of separate lines.
This commit is contained in:
lzt404 committed
1 parent
cadfe4f5f5
commit
247c39f388
5 files changed
+163
-58
No files matched your search
@@ -499,7 +499,7 @@ export function OAuthLoginPage() {
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="page management-page">
|
||||
<section className="page management-page oauth-login-page">
|
||||
<header className="management-header">
|
||||
<label className="oauth-browser-picker">
|
||||
<span>{t('oauth.browser.label')}</span>
|
||||
@@ -517,7 +517,6 @@ export function OAuthLoginPage() {
|
||||
))}
|
||||
<option value={NO_AUTO_OPEN_BROWSER_ID}>{t('oauth.browser.noAutoOpen')}</option>
|
||||
</select>
|
||||
<small>{t('oauth.browser.remembered')}</small>
|
||||
</label>
|
||||
</header>
|
||||
|
||||
|
||||
+21
-5
@@ -143,8 +143,9 @@ export function QuotaPage() {
|
||||
return (
|
||||
<section className="page management-page quota-page">
|
||||
{confirmationDialog}
|
||||
<header className="management-header">
|
||||
<div className="management-heading-actions">
|
||||
{error ? <MessageNotice message={error} /> : null}
|
||||
{loading || grouped.length === 0 ? (
|
||||
<div className="management-heading-actions quota-empty-actions">
|
||||
<span className="muted-summary">{t(files.length === 1 ? 'quota.queryableCredentials.one' : 'quota.queryableCredentials.other', { count: files.length })}</span>
|
||||
<button type="button" className="secondary-button compact-button" onClick={() => void loadFiles()} disabled={loading || refreshing || querying}>
|
||||
<RefreshCw size={16} />{t('quota.readList')}
|
||||
@@ -153,8 +154,7 @@ export function QuotaPage() {
|
||||
<RefreshCw size={16} className={refreshing ? 'spin' : ''} />{t('quota.refreshAll')}
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
{error ? <MessageNotice message={error} /> : null}
|
||||
) : null}
|
||||
{loading ? (
|
||||
<div className="management-loading"><LoaderCircle size={20} className="spin" />{t('quota.loadingFiles')}</div>
|
||||
) : grouped.length === 0 ? (
|
||||
@@ -163,7 +163,23 @@ export function QuotaPage() {
|
||||
<div className="quota-group-list">
|
||||
{grouped.map(([provider, items]) => (
|
||||
<section className="quota-provider-group" key={provider}>
|
||||
<div className="quota-group-heading"><div><img src={providerMeta[provider].icon} alt="" className={provider === 'devin' ? 'provider-logo devin-logo' : 'provider-logo'} /><h2>{providerMeta[provider].label}</h2></div><span>{t(items.length === 1 ? 'quota.credentials.one' : 'quota.credentials.other', { count: items.length })}</span></div>
|
||||
<div className="quota-group-heading">
|
||||
<div><img src={providerMeta[provider].icon} alt="" className={provider === 'devin' ? 'provider-logo devin-logo' : 'provider-logo'} /><h2>{providerMeta[provider].label}</h2></div>
|
||||
<div className="quota-group-actions">
|
||||
<span>{t(items.length === 1 ? 'quota.credentials.one' : 'quota.credentials.other', { count: items.length })}</span>
|
||||
{provider === grouped[0]?.[0] ? (
|
||||
<>
|
||||
<span className="muted-summary">{t(files.length === 1 ? 'quota.queryableCredentials.one' : 'quota.queryableCredentials.other', { count: files.length })}</span>
|
||||
<button type="button" className="secondary-button compact-button" onClick={() => void loadFiles()} disabled={loading || refreshing || querying}>
|
||||
<RefreshCw size={16} />{t('quota.readList')}
|
||||
</button>
|
||||
<button type="button" className="secondary-button compact-button" onClick={() => void refreshAll()} disabled={refreshing || loading || querying || files.length === 0}>
|
||||
<RefreshCw size={16} className={refreshing ? 'spin' : ''} />{t('quota.refreshAll')}
|
||||
</button>
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
<div className="real-quota-grid">{items.map(({ file, quota }) => <QuotaCard key={quotaKey(file)} file={file} quota={quota} onRefresh={() => void refreshOne(file)} onReset={provider === 'codex' ? () => void resetCodexQuota(file, quota) : undefined} />)}</div>
|
||||
</section>
|
||||
))}
|
||||
|
||||
+65
-32
@@ -123,12 +123,12 @@
|
||||
--bg-card: #ffffff;
|
||||
--bg-error-light: #fff1ee;
|
||||
--text-primary: #0f172a;
|
||||
--text-secondary: #475569;
|
||||
--text-tertiary: #64748b;
|
||||
--text-quaternary: #94a3b8;
|
||||
--text-secondary: #1e293b;
|
||||
--text-tertiary: #334155;
|
||||
--text-quaternary: #475569;
|
||||
--text-muted: var(--text-tertiary);
|
||||
--text-placeholder: var(--text-quaternary);
|
||||
--text-disabled: #7d877f;
|
||||
--text-disabled: #64748b;
|
||||
--border-color: #e2e8f0;
|
||||
--border-secondary: #f1f5f9;
|
||||
--border-primary: #cbd5e1;
|
||||
@@ -554,6 +554,7 @@ textarea:focus-visible {
|
||||
.nav-section {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
align-content: start;
|
||||
}
|
||||
|
||||
.nav-section button {
|
||||
@@ -634,7 +635,7 @@ textarea:focus-visible {
|
||||
|
||||
.nav-section button:disabled svg,
|
||||
.nav-section button.locked svg {
|
||||
color: var(--theme-aaa49b);
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.nav-section button.active {
|
||||
@@ -652,7 +653,7 @@ textarea:focus-visible {
|
||||
.sidebar-bottom {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
margin-top: auto;
|
||||
margin-top: 18px;
|
||||
padding-top: 18px;
|
||||
border-top: 1px solid var(--theme-e3e1db);
|
||||
}
|
||||
@@ -1496,7 +1497,7 @@ textarea:focus-visible {
|
||||
|
||||
.app-release-notes-markdown > .release-notes-category {
|
||||
grid-column: 1;
|
||||
max-width: 160px;
|
||||
max-width: 220px;
|
||||
padding: 3px 9px;
|
||||
border-radius: 5px;
|
||||
background: var(--theme-faf9f5);
|
||||
@@ -3666,18 +3667,28 @@ textarea:focus-visible {
|
||||
}
|
||||
|
||||
.oauth-browser-picker {
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(180px, 240px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: end;
|
||||
gap: 5px 10px;
|
||||
color: var(--theme-7a746c);
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--font-size-label);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.oauth-browser-picker span {
|
||||
flex: none;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
text-overflow: clip;
|
||||
text-transform: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.oauth-browser-picker select {
|
||||
width: 100%;
|
||||
width: 240px;
|
||||
flex: none;
|
||||
height: 38px;
|
||||
padding: 0 34px 0 11px;
|
||||
border: 1px solid var(--theme-d5d2cb);
|
||||
@@ -3686,12 +3697,6 @@ textarea:focus-visible {
|
||||
color: var(--theme-2d2a26);
|
||||
}
|
||||
|
||||
.oauth-browser-picker small {
|
||||
grid-column: 1 / -1;
|
||||
font-size: var(--font-size-caption);
|
||||
font-weight: var(--font-weight-regular);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.oauth-card {
|
||||
display: grid;
|
||||
@@ -5991,7 +5996,7 @@ textarea:focus-visible {
|
||||
}
|
||||
|
||||
.thinking-alias-route svg {
|
||||
color: var(--theme-aaa49b);
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.thinking-effort-badge {
|
||||
@@ -7487,7 +7492,7 @@ textarea:focus-visible {
|
||||
|
||||
.agent-model-trigger:hover:not(:disabled),
|
||||
.agent-model-picker.open .agent-model-trigger {
|
||||
border-color: var(--theme-aaa49b);
|
||||
border-color: var(--text-tertiary);
|
||||
background: var(--theme-fffdf8);
|
||||
}
|
||||
|
||||
@@ -9024,7 +9029,7 @@ textarea:focus-visible {
|
||||
|
||||
.usage-category-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
}
|
||||
@@ -9060,9 +9065,8 @@ textarea:focus-visible {
|
||||
color: var(--theme-2d2a26);
|
||||
font-size: var(--font-size-meta);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow-wrap: anywhere;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.usage-category-meta {
|
||||
@@ -9714,8 +9718,8 @@ body.table-col-resizing * {
|
||||
.usage-result-cell > small {
|
||||
display: block;
|
||||
margin-top: 2px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow-wrap: anywhere;
|
||||
white-space: normal;
|
||||
color: var(--theme-8a847c);
|
||||
font-size: var(--font-size-caption);
|
||||
}
|
||||
@@ -10318,6 +10322,24 @@ body.table-col-resizing * {
|
||||
font-size: var(--font-size-label);
|
||||
}
|
||||
|
||||
.quota-group-actions {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.quota-group-actions > span,
|
||||
.quota-empty-actions {
|
||||
color: var(--theme-7a746c);
|
||||
}
|
||||
|
||||
.quota-empty-actions {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.quota-group-heading > div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -11031,10 +11053,22 @@ body.table-col-resizing * {
|
||||
}
|
||||
|
||||
.provider-category-panel {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.provider-category-panel button {
|
||||
height: auto;
|
||||
min-height: 48px;
|
||||
padding-block: 8px;
|
||||
}
|
||||
|
||||
.provider-category-panel span {
|
||||
white-space: normal;
|
||||
overflow: visible;
|
||||
text-overflow: clip;
|
||||
}
|
||||
|
||||
.provider-resource-panel {
|
||||
height: 520px;
|
||||
}
|
||||
@@ -11603,13 +11637,12 @@ body.table-col-resizing * {
|
||||
|
||||
.oauth-browser-picker {
|
||||
width: 100%;
|
||||
grid-template-columns: 1fr;
|
||||
justify-content: stretch;
|
||||
}
|
||||
|
||||
.oauth-browser-picker small {
|
||||
grid-column: 1;
|
||||
text-align: left;
|
||||
.oauth-browser-picker select {
|
||||
flex: 1;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.oauth-card-body,
|
||||
|
||||
@@ -2930,10 +2930,22 @@
|
||||
}
|
||||
|
||||
.provider-category-panel {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.provider-category-panel button {
|
||||
height: auto;
|
||||
min-height: 48px;
|
||||
padding-block: 8px;
|
||||
}
|
||||
|
||||
.provider-category-panel span {
|
||||
white-space: normal;
|
||||
overflow: visible;
|
||||
text-overflow: clip;
|
||||
}
|
||||
|
||||
.provider-resource-panel {
|
||||
height: 520px;
|
||||
}
|
||||
|
||||
@@ -15,9 +15,9 @@
|
||||
--border-primary: #cbd5e1;
|
||||
--border-hover: #94a3b8;
|
||||
--text-primary: #0f172a;
|
||||
--text-secondary: #475569;
|
||||
--text-tertiary: #64748b;
|
||||
--text-quaternary: #94a3b8;
|
||||
--text-secondary: #1e293b;
|
||||
--text-tertiary: #334155;
|
||||
--text-quaternary: #475569;
|
||||
--theme-faf9f5: #ffffff;
|
||||
--theme-faf8f4: #ffffff;
|
||||
--theme-faf8f2: #ffffff;
|
||||
@@ -32,9 +32,9 @@
|
||||
--theme-e3e1db: #e2e8f0;
|
||||
--theme-d5d2cb: #cbd5e1;
|
||||
--theme-c7c2b8: #94a3b8;
|
||||
--theme-7a746c: #64748b;
|
||||
--theme-5f5a53: #64748b;
|
||||
--theme-4f4a43: #475569;
|
||||
--theme-7a746c: var(--text-tertiary);
|
||||
--theme-5f5a53: var(--text-secondary);
|
||||
--theme-4f4a43: var(--text-secondary);
|
||||
--theme-433f39: #334155;
|
||||
--theme-39352f: #334155;
|
||||
--theme-342f2a: #1e293b;
|
||||
@@ -160,6 +160,12 @@ body, html, #root {
|
||||
}
|
||||
}
|
||||
|
||||
@container workspace (max-width: 1080px) {
|
||||
.home-quick-actions {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
/* Home Page Runtime Control & Detail Grid */
|
||||
.control-panel .panel-detail-grid {
|
||||
display: flex;
|
||||
@@ -246,15 +252,16 @@ body, html, #root {
|
||||
/* Home Quick Actions Grid */
|
||||
.home-quick-actions {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 14px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.home-quick-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-items: flex-start;
|
||||
gap: 14px;
|
||||
min-height: 92px;
|
||||
padding: 16px 18px;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 12px;
|
||||
@@ -301,12 +308,8 @@ body, html, #root {
|
||||
color: var(--text-tertiary);
|
||||
font-size: 12px;
|
||||
line-height: 1.45;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
white-space: normal;
|
||||
word-break: break-word;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
/* 6. Tabs & Segmented Controls (Unified Modern Style) */
|
||||
@@ -398,6 +401,48 @@ body, html, #root {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.oauth-management-page:has(.oauth-login-page) {
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
column-gap: 16px;
|
||||
}
|
||||
|
||||
.oauth-subpage-panel:has(.oauth-login-page),
|
||||
.oauth-login-page {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.oauth-login-page > .management-header {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
min-height: 0;
|
||||
margin: 0;
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
.oauth-login-page > .oauth-grid {
|
||||
grid-column: 1 / -1;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
@container workspace (max-width: 760px) {
|
||||
.oauth-management-page:has(.oauth-login-page) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.oauth-login-page > .management-header {
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
justify-self: stretch;
|
||||
}
|
||||
|
||||
.oauth-login-page > .oauth-grid {
|
||||
grid-row: 3;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.oauth-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
|
||||
@@ -501,7 +546,7 @@ body, html, #root {
|
||||
.usage-records-page .usage-collector-state span,
|
||||
.usage-records-page .usage-filter-label,
|
||||
.usage-records-page .usage-section-heading span {
|
||||
color: #6e6e73;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.usage-records-page .usage-trend-panel,
|
||||
@@ -597,7 +642,7 @@ body, html, #root {
|
||||
}
|
||||
|
||||
.usage-stat-card-label {
|
||||
color: #6e6e73;
|
||||
color: var(--text-secondary);
|
||||
font-size: 12px;
|
||||
font-weight: 590;
|
||||
letter-spacing: -0.01em;
|
||||
@@ -632,7 +677,7 @@ body, html, #root {
|
||||
flex-wrap: wrap;
|
||||
gap: 5px;
|
||||
overflow: visible;
|
||||
color: #6e6e73;
|
||||
color: var(--text-secondary);
|
||||
white-space: normal;
|
||||
-webkit-line-clamp: unset;
|
||||
-webkit-box-orient: unset;
|
||||
@@ -671,7 +716,7 @@ body, html, #root {
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
color: #6e6e73;
|
||||
color: var(--text-secondary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@@ -960,7 +1005,7 @@ body, html, #root {
|
||||
|
||||
:root[data-theme='dark'] .usage-stat-card-label,
|
||||
:root[data-theme='dark'] .usage-stat-chip.tone-note {
|
||||
color: #98989d;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
:root[data-theme='dark'] .usage-stat-chip {
|
||||
|
||||
Reference in new issue
Block a user