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
|
||||
|
||||
File diff suppressed because one or more lines are too long
+1
-1
File diff suppressed because one or more lines are too long
+1
-1
File diff suppressed because one or more lines are too long
+1
-1
File diff suppressed because one or more lines are too long
+1
-1
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -17,9 +17,9 @@
|
||||
<meta name="mobile-web-app-capable" content="yes" />
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
|
||||
<meta name="apple-mobile-web-app-title" content="WeVisto" />
|
||||
<script type="module" crossorigin src="/build/assets/index-COGnbSsR.js"></script>
|
||||
<script type="module" crossorigin src="/build/assets/index-CToMjSpo.js"></script>
|
||||
<link rel="modulepreload" crossorigin href="/build/assets/_plugin-vue_export-helper-BNDVmFr7.js">
|
||||
<link rel="stylesheet" crossorigin href="/build/assets/index-Dg_j878j.css">
|
||||
<link rel="stylesheet" crossorigin href="/build/assets/index-DVLiEb9t.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
Reference in New Issue
Block a user