polish(design-v2): settings reorder + section cards + cog + yellow active
CI / test (push) Has been cancelled
CI / test (push) Has been cancelled
User-reported gaps: - Settings section order: Account top, Theme middle, Design bottom, Install at end (was Install/Design/Theme/Account) - Settings sections wrapped in glass cards with backdrop blur so they read against the harbor backdrop (was flat text) - Desktop settings now 2-column grid; section cards pack in pairs - FrameCard cog button: was white-opaque, now dark glass with light icon so it sits cleanly on the v2 dark photo backdrop - Orientation picker active state: yellow border + yellow diagram tint (was theme primary which clashed with the dusks aesthetic) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -126,6 +126,32 @@
|
||||
font-size: var(--text-xl);
|
||||
}
|
||||
|
||||
// FrameCard settings cog: was white (95% opacity) — replace with dark glass + light icon
|
||||
.frame-card__settings-btn {
|
||||
background: rgba(8, 18, 30, 0.55) !important;
|
||||
color: var(--color-text) !important;
|
||||
border: 1px solid var(--color-border) !important;
|
||||
box-shadow: 0 4px 12px -4px rgba(0,0,0,0.5) !important;
|
||||
}
|
||||
.frame-card__settings-btn:hover {
|
||||
background: rgba(8, 18, 30, 0.75) !important;
|
||||
}
|
||||
|
||||
// Orientation picker: active border in YELLOW (was theme primary)
|
||||
.orientation-opt--active {
|
||||
border-color: var(--brand-yellow) !important;
|
||||
background: color-mix(in srgb, var(--brand-yellow) 12%, var(--color-surface)) !important;
|
||||
}
|
||||
.orientation-opt {
|
||||
background: var(--color-surface);
|
||||
border-color: var(--color-border);
|
||||
color: var(--color-text);
|
||||
}
|
||||
.orientation-opt__label { color: var(--color-text); }
|
||||
.orientation-opt__sub { color: var(--color-text-muted); }
|
||||
.orientation-opt__diagram { color: var(--color-text-muted); }
|
||||
.orientation-opt--active .orientation-opt__diagram { color: var(--brand-yellow); }
|
||||
|
||||
.home-view__empty-title { font-family: var(--font-display-v2); }
|
||||
.library__add-btn { background: var(--color-primary); color: var(--color-primary-fg); }
|
||||
|
||||
@@ -150,6 +176,35 @@
|
||||
&__row-value,
|
||||
&__action-link { color: var(--color-text); }
|
||||
&__logout { color: var(--color-destructive); }
|
||||
|
||||
// Each section gets a glass card background so it reads against the harbor
|
||||
&__section {
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-5);
|
||||
backdrop-filter: saturate(160%) blur(20px);
|
||||
-webkit-backdrop-filter: saturate(160%) blur(20px);
|
||||
box-shadow:
|
||||
0 1px 0 color-mix(in srgb, var(--color-text) 8%, transparent) inset,
|
||||
0 16px 32px -12px rgba(0,0,0,0.5);
|
||||
// override the v1 margin-bottom which collapses between cards
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
}
|
||||
|
||||
// Desktop: 2-column settings layout — first 4 sections in pairs,
|
||||
// each section is a column-flex auto. Sections naturally pack in pairs.
|
||||
@media (min-width: 960px) {
|
||||
.settings {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||||
gap: var(--space-5);
|
||||
align-items: start;
|
||||
|
||||
&__title { grid-column: 1 / -1; }
|
||||
&__section { margin-bottom: 0; }
|
||||
}
|
||||
}
|
||||
|
||||
.design-toggle__opt {
|
||||
|
||||
@@ -2,57 +2,16 @@
|
||||
<main class="settings">
|
||||
<h1 class="settings__title">Settings</h1>
|
||||
|
||||
<section v-if="!isStandalone" class="settings__section">
|
||||
<h2 class="settings__section-title">Install app</h2>
|
||||
<p class="settings__hint">
|
||||
Pin WeVisto to your home screen so it opens like a native app.
|
||||
</p>
|
||||
<button
|
||||
v-if="canPromptInstall"
|
||||
type="button"
|
||||
class="settings__install"
|
||||
@click="onNativeInstall"
|
||||
>
|
||||
Install WeVisto
|
||||
</button>
|
||||
<button
|
||||
v-else
|
||||
type="button"
|
||||
class="settings__install"
|
||||
@click="showIosInstructions = true"
|
||||
>
|
||||
Add to Home Screen
|
||||
</button>
|
||||
</section>
|
||||
|
||||
<section class="settings__section">
|
||||
<h2 class="settings__section-title">Design (beta)</h2>
|
||||
<p class="settings__hint">
|
||||
Try the new atmospheric look. Your theme picks below still apply —
|
||||
v2 just renders them as dusks over a Camogli harbor backdrop.
|
||||
</p>
|
||||
<div class="design-toggle" role="radiogroup" aria-label="Design version">
|
||||
<button
|
||||
type="button"
|
||||
role="radio"
|
||||
:aria-checked="currentDesign === 'v1'"
|
||||
:class="['design-toggle__opt', { 'design-toggle__opt--active': currentDesign === 'v1' }]"
|
||||
@click="selectDesign('v1')"
|
||||
>
|
||||
<span class="design-toggle__label">Original</span>
|
||||
<span class="design-toggle__sub">cream & terracotta</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
role="radio"
|
||||
:aria-checked="currentDesign === 'v2'"
|
||||
:class="['design-toggle__opt', { 'design-toggle__opt--active': currentDesign === 'v2' }]"
|
||||
@click="selectDesign('v2')"
|
||||
>
|
||||
<span class="design-toggle__label">Atmospheric</span>
|
||||
<span class="design-toggle__sub">harbor dusks · beta</span>
|
||||
</button>
|
||||
<h2 class="settings__section-title">Account</h2>
|
||||
<div class="settings__row">
|
||||
<span class="settings__row-label">Signed in as</span>
|
||||
<span class="settings__row-value">{{ auth.user?.email }}</span>
|
||||
</div>
|
||||
<button type="button" class="settings__action-link" @click="passwordModalOpen = true">
|
||||
Change password
|
||||
</button>
|
||||
<a href="/logout" class="settings__logout">Sign out</a>
|
||||
</section>
|
||||
|
||||
<section class="settings__section">
|
||||
@@ -80,15 +39,56 @@
|
||||
</section>
|
||||
|
||||
<section class="settings__section">
|
||||
<h2 class="settings__section-title">Account</h2>
|
||||
<div class="settings__row">
|
||||
<span class="settings__row-label">Signed in as</span>
|
||||
<span class="settings__row-value">{{ auth.user?.email }}</span>
|
||||
<h2 class="settings__section-title">Design (beta)</h2>
|
||||
<p class="settings__hint">
|
||||
Try the new atmospheric look. Your theme picks above still apply —
|
||||
v2 just renders them as dusks over a Camogli harbor backdrop.
|
||||
</p>
|
||||
<div class="design-toggle" role="radiogroup" aria-label="Design version">
|
||||
<button
|
||||
type="button"
|
||||
role="radio"
|
||||
:aria-checked="currentDesign === 'v1'"
|
||||
:class="['design-toggle__opt', { 'design-toggle__opt--active': currentDesign === 'v1' }]"
|
||||
@click="selectDesign('v1')"
|
||||
>
|
||||
<span class="design-toggle__label">Original</span>
|
||||
<span class="design-toggle__sub">cream & terracotta</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
role="radio"
|
||||
:aria-checked="currentDesign === 'v2'"
|
||||
:class="['design-toggle__opt', { 'design-toggle__opt--active': currentDesign === 'v2' }]"
|
||||
@click="selectDesign('v2')"
|
||||
>
|
||||
<span class="design-toggle__label">Atmospheric</span>
|
||||
<span class="design-toggle__sub">harbor dusks · beta</span>
|
||||
</button>
|
||||
</div>
|
||||
<button type="button" class="settings__action-link" @click="passwordModalOpen = true">
|
||||
Change password
|
||||
</section>
|
||||
|
||||
<section v-if="!isStandalone" class="settings__section">
|
||||
<h2 class="settings__section-title">Install app</h2>
|
||||
<p class="settings__hint">
|
||||
Pin WeVisto to your home screen so it opens like a native app.
|
||||
</p>
|
||||
<button
|
||||
v-if="canPromptInstall"
|
||||
type="button"
|
||||
class="settings__install"
|
||||
@click="onNativeInstall"
|
||||
>
|
||||
Install WeVisto
|
||||
</button>
|
||||
<button
|
||||
v-else
|
||||
type="button"
|
||||
class="settings__install"
|
||||
@click="showIosInstructions = true"
|
||||
>
|
||||
Add to Home Screen
|
||||
</button>
|
||||
<a href="/logout" class="settings__logout">Sign out</a>
|
||||
</section>
|
||||
|
||||
<div
|
||||
|
||||
Reference in New Issue
Block a user