Feat/profile account polish #16

Merged
stringadmin merged 4 commits from feat/profile-account-polish into master 2026-06-05 06:58:37 +00:00
2 changed files with 163 additions and 7 deletions
Showing only changes of commit 6d68ab02bb - Show all commits
+7 -7
View File
@@ -774,25 +774,25 @@ function ProfilePage({
{tasks.length}
</button>
</div>
<div className="profile-page__upload-card profile-page__upload-card--meta">
<div className="profile-page__account-summary">
{accountPanel === "credits" ? (
<>
<span className="profile-page__meta-item">
<span className="profile-page__account-summary-main">
<small></small>
<strong>{displayName}</strong>
</span>
<span className="profile-page__meta-item">
<span className="profile-page__account-summary-metric">
<small></small>
<strong>{(usage.balanceCents / 100).toFixed(2)}</strong>
</span>
</>
) : (
<>
<span className="profile-page__meta-item">
<small></small>
<strong>{tasks.length}</strong>
<span className="profile-page__account-summary-main">
<small></small>
<strong>{tasks.length} </strong>
</span>
<span className="profile-page__meta-item">
<span className="profile-page__account-summary-metric">
<small></small>
<strong>{completedTasks.length}</strong>
</span>
+156
View File
@@ -7017,6 +7017,75 @@
white-space: nowrap;
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-summary {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 10px;
align-items: stretch;
min-width: 0;
padding: 10px;
border: 1px solid rgba(255, 255, 255, 0.055);
border-radius: 11px;
background:
linear-gradient(135deg, rgba(var(--accent-rgb), 0.055), transparent 62%),
rgba(255, 255, 255, 0.022);
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-summary-main,
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-summary-metric {
display: grid;
min-width: 0;
align-content: center;
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-summary-main {
gap: 3px;
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-summary-metric {
min-width: 86px;
justify-items: end;
padding-left: 10px;
border-left: 1px solid rgba(255, 255, 255, 0.06);
text-align: right;
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-summary small {
overflow: hidden;
color: rgba(225, 235, 231, 0.52);
font-size: 10px;
font-weight: 800;
line-height: 1.2;
text-overflow: ellipsis;
white-space: nowrap;
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-summary strong {
overflow: hidden;
color: var(--fg);
font-size: 16px;
font-weight: 850;
line-height: 1.25;
text-overflow: ellipsis;
white-space: nowrap;
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-summary-metric strong {
color: var(--accent);
font-variant-numeric: tabular-nums;
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-summary em {
overflow: hidden;
color: rgba(225, 235, 231, 0.42);
font-size: 10px;
font-style: normal;
font-weight: 650;
line-height: 1.35;
text-overflow: ellipsis;
white-space: nowrap;
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-card .profile-page__upload-card--meta {
grid-template-columns: 1fr;
gap: 8px;
@@ -7526,6 +7595,93 @@
}
}
/* Profile center: align with the ecommerce generator's flatter dark-green tone. */
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard {
background: var(--bg-base);
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__banner {
background: var(--bg-panel);
box-shadow: none;
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__banner.has-image {
background-color: var(--bg-panel);
background-blend-mode: luminosity;
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__banner-overlay {
background:
linear-gradient(180deg, rgba(13, 15, 15, 0.7), rgba(13, 15, 15, 0.88)),
linear-gradient(90deg, rgba(13, 15, 15, 0.62), rgba(13, 15, 15, 0.28) 44%, rgba(13, 15, 15, 0.68));
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__sidebar,
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-card,
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__main-tabs,
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__section,
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__list-card,
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__review-item,
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__empty-state,
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__upload-card {
border-color: var(--border-weak);
background: var(--bg-panel);
box-shadow: none;
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__main-tabs,
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-card .profile-page__list-tabs {
background: var(--bg-inset);
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__main-tabs button,
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-card .profile-page__list-tabs button {
border: 1px solid transparent;
background: transparent;
color: var(--fg-soft);
box-shadow: none;
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__main-tabs button.is-active,
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-card .profile-page__list-tabs button.is-active {
border-color: rgba(var(--accent-rgb), 0.42);
background: rgba(var(--accent-rgb), 0.12);
color: var(--accent);
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__bio-display,
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__bio,
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__count,
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-summary,
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-card .profile-page__meta-item {
border-color: rgba(255, 255, 255, 0.065);
background: rgba(255, 255, 255, 0.024);
box-shadow: none;
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__list-card-preview,
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__list-card-preview:not(.has-media) {
border-color: rgba(255, 255, 255, 0.065);
background: rgba(255, 255, 255, 0.024);
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__list-card-placeholder {
border-color: rgba(var(--accent-rgb), 0.2);
background: rgba(var(--accent-rgb), 0.08);
color: var(--accent);
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-badge {
background: rgba(8, 14, 12, 0.78);
box-shadow: none;
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__share-btn,
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__avatar,
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__avatar-ring .profile-page__avatar {
box-shadow: none;
}
/* Ecommerce generation page: keep its carousel and composer independent from
the community carousel rules that share class names. */
.web-shell[data-ui-theme="dark-green"] .ecommerce-landing-page {