football2801/pictureFrame-webApp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(design): single source of truth — wevisto-design.css
CI / test (push) Has been cancelled
Details

Browse Source 
v2 tokens were duplicated: in design-v2.scss for the SPA, inlined in
login.html.twig for Twig. Two places to keep in sync.

Now: one shared /public/css/wevisto-design.css loaded by every Twig
standalone template AND linked from the SPA index.html. It contains:
- Brand constants (yellow / navy / fonts)
- v2 tokens with per-theme dusk overrides
- v2 base body bg + editorial typography defaults
- v2 overrides for the .card / .btn / .field-error / .logo-badge
  patterns used across all Twig templates

The SPA's design-v2.scss now holds only SPA-specific composition:
side rail at desktop, frame card, theme swatch harbor preview,
settings polish. No token duplication.

Result: changing a v2 color in one file flows to every surface in both
worlds. Adding v2 to another Twig template only requires the existing
shared CSS link (already wired up to all 11 standalone templates).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Matt Edholm
2026-05-15 15:24:45 -04:00
parent 0e4d78471b
commit 0489028486
22 changed files with 206 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/index.html
+1
View File
@@ -11,6 +11,7 @@
<link rel="manifest" href="/build/manifest.webmanifest" />
<link rel="apple-touch-icon" sizes="180x180" href="/build/icons/apple-touch-icon.png?v=20260515-vviewfinder" />
<link rel="stylesheet" href="/css/wevisto-design.css">
<meta name="theme-color" content="#fdf6ee" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />
frontend/src/styles/design-v2.scss
+20 -118
View File
@@ -1,103 +1,25 @@
// ─── Design v2 — atmospheric dusks ──────────────────────────────────────
// Opt-in overlay activated via [data-design="v2"] on <html>. Matches the
// approved mockups at _design/atmospheric-redesign/ — solid navy ground,
// harbor photo used selectively as content (theme swatches, frame heroes,
// login splash), editorial typography (Marcellus + Cormorant Garamond),
// left side rail at desktop.
// Editorial fonts — loaded for v2 only
@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400&family=DM+Mono:wght@400;500&display=swap');
// ─── Design v2 — SPA-specific component styles ──────────────────────────
// Tokens (CSS vars), font imports, base body bg, and Twig-template overrides
// live in /public/css/wevisto-design.css — loaded by both Twig and the SPA so
// changing a v2 color flows everywhere.
//
// This file holds only the SPA-specific compositions: side rail, frame card,
// library/settings inner styling, theme swatches.
[data-design="v2"] {
// ── Brand constants (survive every dusk) ──────────────────────────
--brand-yellow: #f0d000;
// ── Typography ────────────────────────────────────────────────────
--font-display: 'Marcellus', Georgia, serif;
--font-accent: 'Cormorant Garamond', Georgia, serif;
--font-mono: 'DM Mono', ui-monospace, monospace;
// Body stays Nunito (warmer + better-readable at small sizes than serif)
// ── Default dusk = warm-craft → "amber dusk" ──────────────────────
--color-bg: #1a0d05;
--color-surface: #2a1810;
--color-surface-2: #3a241a;
--color-border: rgba(230, 180, 130, 0.20);
--color-text: #faecd0;
--color-text-muted: #c8a880;
--color-primary: #e89048;
--color-primary-fg: #1a0d05;
--color-secondary: #3a241a;
--color-secondary-fg:#faecd0;
--color-destructive: #e08070;
--color-destructive-fg: #ffffff;
--color-focus-ring: var(--brand-yellow);
&[data-theme="ocean-dusk"] {
--color-bg: #06121f; --color-surface: #0e2030; --color-surface-2: #142a40;
--color-border: rgba(180,210,235,0.20);
--color-text: #f4eed8; --color-text-muted: #b8c8d8;
--color-primary: #4e9fc8; --color-primary-fg: #06121f;
--color-secondary: #142a40;
}
&[data-theme="sage-cream"] {
--color-bg: #081208; --color-surface: #142418; --color-surface-2: #1c3022;
--color-border: rgba(180,220,180,0.18);
--color-text: #ecf3e0; --color-text-muted: #a8c0a0;
--color-primary: #88c068; --color-primary-fg: #081208;
--color-secondary: #1c3022;
}
&[data-theme="playful-pop"] {
--color-bg: #1a060f; --color-surface: #281020; --color-surface-2: #381a30;
--color-border: rgba(230,180,200,0.20);
--color-text: #f8e8ec; --color-text-muted: #d0a0b8;
--color-primary: #d878a0; --color-primary-fg: #1a060f;
--color-secondary: #381a30;
}
&[data-theme="dusty-mauve"] {
--color-bg: #100618; --color-surface: #1c1028; --color-surface-2: #281a3a;
--color-border: rgba(210,190,230,0.18);
--color-text: #f0e8f8; --color-text-muted: #c0b0d0;
--color-primary: #b890d8; --color-primary-fg: #100618;
--color-secondary: #281a3a;
}
&[data-theme="honey-slate"] {
--color-bg: #18120a; --color-surface: #281e10; --color-surface-2: #3a2c1a;
--color-border: rgba(232,200,130,0.22);
--color-text: #faf0d8; --color-text-muted: #d0b888;
--color-primary: #e8c050; --color-primary-fg: #18120a;
--color-secondary: #3a2c1a;
}
// ── Body: SOLID navy with subtle vignette — no full-page harbor ────
body {
background:
radial-gradient(ellipse 90% 70% at 50% 30%, color-mix(in srgb, var(--color-surface) 60%, transparent) 0%, transparent 70%),
var(--color-bg);
color: var(--color-text);
}
// ── Editorial display type — page titles, frame names, section labels ──
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; letter-spacing: 0.005em; }
// ── TopNav restyled (mobile/tablet stays horizontal; desktop becomes
// a left side rail per the mockup) ───────────────────────────────
// ── TopNav restyled at desktop into a left side rail ───────────────
.top-nav {
background: color-mix(in srgb, var(--color-bg) 95%, transparent);
border-bottom-color: var(--color-border);
&__wordmark { color: var(--color-text); font-family: var(--font-display); font-weight: 400; }
&__wordmark { color: var(--color-text); font-family: var(--font-display-v2); font-weight: 400; }
&__tab {
color: var(--color-text-muted);
&:hover { background: var(--color-surface); color: var(--color-text); }
&--active {
background: var(--color-surface);
color: var(--brand-yellow);
}
&--active { background: var(--color-surface); color: var(--brand-yellow); }
}
}
@media (min-width: 960px) {
// Reshape the existing .top-nav into a fixed left rail
.top-nav {
position: fixed;
top: 0; left: 0; bottom: 0;
@@ -140,18 +62,16 @@
}
}
// Shift main content right of the rail
body { padding-left: 240px; }
}
// ── Bottom nav (mobile/tablet only) ─────────────────────────────────
.bottom-nav {
background: color-mix(in srgb, var(--color-bg) 95%, transparent);
border-top-color: var(--color-border);
.bottom-nav__tab--active { color: var(--brand-yellow); }
}
// ── Glass cards — solid-ish at v2 (mockup uses near-solid panels) ──
// ── Glass cards everywhere v1 uses --color-surface ─────────────────
.frame-card,
.home-view__empty-card,
.library__tile,
@@ -162,41 +82,27 @@
0 1px 0 color-mix(in srgb, var(--color-text) 8%, transparent) inset,
0 24px 48px -16px rgba(0,0,0,0.6);
}
// ── Frame card hero — keep solid navy area (the user's photo goes here
// when device is online; placeholder when offline) ────────────────
.frame-card__hero {
background: var(--color-surface-2);
}
// ── Frame card name uses editorial serif ───────────────────────────
.frame-card__hero { background: var(--color-surface-2); }
.frame-card__name {
font-family: var(--font-display);
font-family: var(--font-display-v2);
font-weight: 400;
font-size: var(--text-xl);
}
// ── Home view editorial polish ─────────────────────────────────────
.home-view {
&__empty-title { font-family: var(--font-display); }
}
.home-view__empty-title { font-family: var(--font-display-v2); }
.library__add-btn { background: var(--color-primary); color: var(--color-primary-fg); }
// ── Library editorial polish ───────────────────────────────────────
.library {
&__add-btn { background: var(--color-primary); color: var(--color-primary-fg); }
}
// ── Settings: page title in display serif ──────────────────────────
// ── Settings polish ────────────────────────────────────────────────
.settings {
&__title { font-family: var(--font-display); font-weight: 400; letter-spacing: 0.005em; }
&__title { font-family: var(--font-display-v2); font-weight: 400; letter-spacing: 0.005em; }
&__section-title {
font-family: var(--font-mono);
font-family: var(--font-mono-v2);
font-size: 11px;
letter-spacing: 0.28em;
color: var(--color-text-muted);
}
&__hint {
font-family: var(--font-accent);
font-family: var(--font-accent-v2);
font-style: italic;
color: var(--color-text-muted);
}
@@ -209,7 +115,6 @@
&__logout { color: var(--color-destructive); }
}
// ── Design toggle in Settings ──────────────────────────────────────
.design-toggle__opt {
background: var(--color-surface);
border-color: var(--color-border);
@@ -218,8 +123,7 @@
}
.design-toggle__sub { color: var(--color-text-muted); }
// ── Theme swatches — each previews ITS OWN dusk with the harbor tint
// inside the preview area (matches the mockup) ───────────────────
// ── Theme swatches preview their dusk via the harbor.jpg ───────────
.theme-swatch {
border-color: var(--color-border);
background: var(--color-surface);
@@ -228,7 +132,6 @@
&--active { border-color: var(--brand-yellow); }
&__label { color: var(--color-text); }
// Harbor-tinted preview inside each swatch
&__preview {
background-image: url('/build/assets/harbor.jpg');
background-size: cover;
@@ -248,7 +151,6 @@
.theme-swatch[aria-label*="Playful" i] .theme-swatch__preview::after { background: rgba(56, 16, 38, 0.55); }
.theme-swatch[aria-label*="Dusty" i] .theme-swatch__preview::after { background: rgba(40, 18, 56, 0.55); }
.theme-swatch[aria-label*="Honey" i] .theme-swatch__preview::after { background: rgba(48, 36, 14, 0.55); }
// Hide the v1 swatch bars/dot — the harbor preview replaces them
.theme-swatch__bar,
.theme-swatch__dot { display: none; }
}
public/build/assets/HomeView-BdnsVCHs.js → public/build/assets/HomeView-1dV6aZoT.js
+1 -1
View File
File diff suppressed because one or more lines are too long
public/build/assets/LibraryView-OjFlx-EW.js → public/build/assets/LibraryView-kBPPm3XX.js
+1 -1
View File
File diff suppressed because one or more lines are too long
public/build/assets/SettingsView-GwhXr6vA.js → public/build/assets/SettingsView-B2X-fSQS.js
+1 -1
View File
File diff suppressed because one or more lines are too long
public/build/assets/UploadView-Df71C3ex.js → public/build/assets/UploadView-U5yfon0u.js
+1 -1
View File
File diff suppressed because one or more lines are too long
public/build/assets/index-m9rEzKBq.css
+1
View File
File diff suppressed because one or more lines are too long
public/build/assets/index-Dd9roAkB.js → public/build/assets/index-mIDwNQXq.js
+2 -2
View File
File diff suppressed because one or more lines are too long
public/build/assets/index-v9hz6BhD.css
-1
View File
File diff suppressed because one or more lines are too long
public/build/index.html
+3 -2
View File
@@ -11,14 +11,15 @@
<link rel="manifest" href="/build/manifest.webmanifest" />
<link rel="apple-touch-icon" sizes="180x180" href="/build/icons/apple-touch-icon.png?v=20260515-vviewfinder" />
<link rel="stylesheet" href="/css/wevisto-design.css">
<meta name="theme-color" content="#fdf6ee" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<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-Dd9roAkB.js"></script>
<script type="module" crossorigin src="/build/assets/index-mIDwNQXq.js"></script>
<link rel="modulepreload" crossorigin href="/build/assets/_plugin-vue_export-helper-BNDVmFr7.js">
<link rel="stylesheet" crossorigin href="/build/assets/index-v9hz6BhD.css">
<link rel="stylesheet" crossorigin href="/build/assets/index-m9rEzKBq.css">
</head>
<body>
<div id="app"></div>
public/css/wevisto-design.css
+164
View File
@@ -0,0 +1,164 @@
/* ─── WeVisto · shared design tokens + base v2 overrides ────────────────
* Single source of truth for design tokens across Twig + Vue SPA.
* Loaded by every standalone Twig template AND by the SPA's main bundle.
* SPA-specific component styling lives in frontend/src/styles/design-v2.scss.
* ───────────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400&family=DM+Mono:wght@400;500&display=swap');
/* ─── Brand constants — never change with theme/design ──────────────── */
:root {
--brand-yellow: #f0d000;
--brand-yellow-soft: #c4a700;
--brand-navy: #0e2740;
/* v2 font stack — applied via [data-design="v2"] selectors below */
--font-display-v2: 'Marcellus', Georgia, serif;
--font-accent-v2: 'Cormorant Garamond', Georgia, serif;
--font-mono-v2: 'DM Mono', ui-monospace, monospace;
}
/* ─── v2 tokens — per-theme overrides ────────────────────────────────
* Each theme keeps its existing enum value; v2 just maps it to a "dusk".
* Twig templates and SPA components both read these via var(--color-*).
*/
[data-design="v2"] {
/* Default = warm-craft → "amber dusk" */
--color-bg: #1a0d05;
--color-surface: #2a1810;
--color-surface-2: #3a241a;
--color-border: rgba(230, 180, 130, 0.22);
--color-text: #faecd0;
--color-text-muted: #c8a880;
--color-primary: #e89048;
--color-primary-fg: #1a0d05;
--color-secondary: #3a241a;
--color-secondary-fg:#faecd0;
--color-destructive: #e08070;
--color-destructive-fg: #ffffff;
--color-focus-ring: var(--brand-yellow);
}
[data-design="v2"][data-theme="ocean-dusk"],
[data-design="v2"]:not([data-theme]) {
/* ocean-dusk is the default for unauthenticated visitors (login/register) */
--color-bg: #06121f;
--color-surface: #0e2030;
--color-surface-2: #142a40;
--color-border: rgba(180,210,235,0.22);
--color-text: #f4eed8;
--color-text-muted: #b8c8d8;
--color-primary: #4e9fc8;
--color-primary-fg: #06121f;
--color-secondary: #142a40;
}
[data-design="v2"][data-theme="warm-craft"] {
--color-bg: #1a0d05; --color-surface: #2a1810; --color-surface-2: #3a241a;
--color-border: rgba(230,180,130,0.22);
--color-text: #faecd0; --color-text-muted: #c8a880;
--color-primary: #e89048; --color-primary-fg: #1a0d05;
--color-secondary: #3a241a;
}
[data-design="v2"][data-theme="sage-cream"] {
--color-bg: #081208; --color-surface: #142418; --color-surface-2: #1c3022;
--color-border: rgba(180,220,180,0.20);
--color-text: #ecf3e0; --color-text-muted: #a8c0a0;
--color-primary: #88c068; --color-primary-fg: #081208;
--color-secondary: #1c3022;
}
[data-design="v2"][data-theme="playful-pop"] {
--color-bg: #1a060f; --color-surface: #281020; --color-surface-2: #381a30;
--color-border: rgba(230,180,200,0.20);
--color-text: #f8e8ec; --color-text-muted: #d0a0b8;
--color-primary: #d878a0; --color-primary-fg: #1a060f;
--color-secondary: #381a30;
}
[data-design="v2"][data-theme="dusty-mauve"] {
--color-bg: #100618; --color-surface: #1c1028; --color-surface-2: #281a3a;
--color-border: rgba(210,190,230,0.20);
--color-text: #f0e8f8; --color-text-muted: #c0b0d0;
--color-primary: #b890d8; --color-primary-fg: #100618;
--color-secondary: #281a3a;
}
[data-design="v2"][data-theme="honey-slate"] {
--color-bg: #18120a; --color-surface: #281e10; --color-surface-2: #3a2c1a;
--color-border: rgba(232,200,130,0.22);
--color-text: #faf0d8; --color-text-muted: #d0b888;
--color-primary: #e8c050; --color-primary-fg: #18120a;
--color-secondary: #3a2c1a;
}
/* ─── v2 base body — solid navy with subtle gradient, no full-page photo
* Applies to BOTH Twig pages and the SPA. Component styles live elsewhere.
*/
[data-design="v2"] body {
background:
radial-gradient(ellipse 90% 70% at 50% 30%,
color-mix(in srgb, var(--color-surface-2) 80%, transparent) 0%,
transparent 70%),
var(--color-bg);
color: var(--color-text);
}
/* ─── v2 typography defaults — h1/h2/h3 become editorial display ──── */
[data-design="v2"] h1,
[data-design="v2"] h2,
[data-design="v2"] h3 {
font-family: var(--font-display-v2);
font-weight: 400;
letter-spacing: 0.005em;
color: var(--color-text);
}
/* ─── v2 base overrides for the standalone Twig template patterns
* Every Twig template uses .card / .btn / .field-error / .logo-badge.
* These rules give them dusk styling automatically.
*/
[data-design="v2"] .card {
background: var(--color-surface);
border: 1px solid var(--color-border);
box-shadow: 0 24px 48px -16px rgba(0,0,0,0.6);
color: var(--color-text);
}
[data-design="v2"] .card label {
color: var(--color-text-muted);
font-family: var(--font-mono-v2);
font-size: 0.7rem;
letter-spacing: 0.18em;
text-transform: uppercase;
}
[data-design="v2"] .card input[type="email"],
[data-design="v2"] .card input[type="password"],
[data-design="v2"] .card input[type="text"] {
background: rgba(0,0,0,0.3);
border-color: var(--color-border);
color: var(--color-text);
}
[data-design="v2"] .card input:focus {
border-color: var(--brand-yellow);
}
[data-design="v2"] .btn {
background: var(--color-primary);
color: var(--color-primary-fg);
font-weight: 700;
}
[data-design="v2"] .field-error { color: var(--color-destructive); }
[data-design="v2"] .register-link {
color: var(--color-text-muted);
font-family: var(--font-accent-v2);
font-style: italic;
}
[data-design="v2"] .register-link a {
color: var(--brand-yellow);
font-style: normal;
font-family: inherit;
}
[data-design="v2"] .logo-badge {
border-color: var(--color-border);
box-shadow: 0 6px 18px -4px rgba(0,0,0,0.5);
}
templates/base.html.twig
+1
View File
@@ -7,6 +7,7 @@
<link rel="icon" type="image/png" sizes="32x32" href="/build/icons/favicon-32.png?v=20260515-vviewfinder">
<link rel="icon" type="image/png" sizes="16x16" href="/build/icons/favicon-16.png?v=20260515-vviewfinder">
<link rel="apple-touch-icon" sizes="180x180" href="/build/icons/apple-touch-icon.png?v=20260515-vviewfinder">
<link rel="stylesheet" href="/css/wevisto-design.css">
{% block stylesheets %}
{% endblock %}
templates/help/index.html.twig
+1
View File
@@ -7,6 +7,7 @@
<link rel="icon" type="image/png" sizes="32x32" href="/build/icons/favicon-32.png?v=20260515-vviewfinder">
<link rel="icon" type="image/png" sizes="16x16" href="/build/icons/favicon-16.png?v=20260515-vviewfinder">
<link rel="apple-touch-icon" sizes="180x180" href="/build/icons/apple-touch-icon.png?v=20260515-vviewfinder">
<link rel="stylesheet" href="/css/wevisto-design.css">
<title>Setup help — WeVisto</title>
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
templates/security/login.html.twig
+1 -41
View File
@@ -7,6 +7,7 @@
<link rel="icon" type="image/png" sizes="32x32" href="/build/icons/favicon-32.png?v=20260515-vviewfinder">
<link rel="icon" type="image/png" sizes="16x16" href="/build/icons/favicon-16.png?v=20260515-vviewfinder">
<link rel="apple-touch-icon" sizes="180x180" href="/build/icons/apple-touch-icon.png?v=20260515-vviewfinder">
<link rel="stylesheet" href="/css/wevisto-design.css">
<title>Sign in — WeVisto</title>
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
@@ -72,47 +73,6 @@
.register-link a { color: #c97c3a; text-decoration: none; font-weight: 600; }
.logo-badge { display: block; width: 88px; height: 88px; margin: 0 auto 1.25rem; border-radius: 14px; overflow: hidden; border: 1px solid #e8d9c4; box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.logo-badge img { display: block; width: 100%; height: 100%; }
/* ── v2 (atmospheric dusks) overrides ── */
@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Cormorant+Garamond:ital@0;1&display=swap');
[data-design="v2"] body {
background: radial-gradient(ellipse 90% 70% at 50% 30%, #142a40 0%, transparent 70%), #06121f;
color: #f4eed8;
}
[data-design="v2"] .card {
background: #0e2030;
border: 1px solid rgba(180,210,235,0.20);
box-shadow: 0 24px 48px -16px rgba(0,0,0,0.6);
}
[data-design="v2"] h1 {
font-family: 'Marcellus', Georgia, serif;
font-weight: 400;
color: #f4eed8;
}
[data-design="v2"] label {
color: #b8c8d8;
font-size: 0.7rem;
letter-spacing: 0.18em;
text-transform: uppercase;
}
[data-design="v2"] input[type="email"],
[data-design="v2"] input[type="password"] {
background: rgba(0,0,0,0.3);
border-color: rgba(180,210,235,0.20);
color: #f4eed8;
}
[data-design="v2"] input:focus { border-color: #f0d000; }
[data-design="v2"] .btn {
background: #4e9fc8;
color: #06121f;
}
[data-design="v2"] .field-error { color: #e08070; }
[data-design="v2"] .register-link { color: #b8c8d8; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; }
[data-design="v2"] .register-link a { color: #f0d000; font-style: normal; }
[data-design="v2"] .logo-badge {
border-color: rgba(180,210,235,0.20);
box-shadow: 0 6px 18px -4px rgba(0,0,0,0.5);
}
</style>
</head>
<body>
templates/security/register.html.twig
+1
View File
@@ -7,6 +7,7 @@
<link rel="icon" type="image/png" sizes="32x32" href="/build/icons/favicon-32.png?v=20260515-vviewfinder">
<link rel="icon" type="image/png" sizes="16x16" href="/build/icons/favicon-16.png?v=20260515-vviewfinder">
<link rel="apple-touch-icon" sizes="180x180" href="/build/icons/apple-touch-icon.png?v=20260515-vviewfinder">
<link rel="stylesheet" href="/css/wevisto-design.css">
<title>Create account — WeVisto</title>
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
templates/setup/configure.html.twig
+1
View File
@@ -7,6 +7,7 @@
<link rel="icon" type="image/png" sizes="32x32" href="/build/icons/favicon-32.png?v=20260515-vviewfinder">
<link rel="icon" type="image/png" sizes="16x16" href="/build/icons/favicon-16.png?v=20260515-vviewfinder">
<link rel="apple-touch-icon" sizes="180x180" href="/build/icons/apple-touch-icon.png?v=20260515-vviewfinder">
<link rel="stylesheet" href="/css/wevisto-design.css">
<title>Name your frame — WeVisto</title>
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
templates/setup/index.html.twig
+1
View File
@@ -7,6 +7,7 @@
<link rel="icon" type="image/png" sizes="32x32" href="/build/icons/favicon-32.png?v=20260515-vviewfinder">
<link rel="icon" type="image/png" sizes="16x16" href="/build/icons/favicon-16.png?v=20260515-vviewfinder">
<link rel="apple-touch-icon" sizes="180x180" href="/build/icons/apple-touch-icon.png?v=20260515-vviewfinder">
<link rel="stylesheet" href="/css/wevisto-design.css">
<title>Set up your frame — WeVisto</title>
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
templates/token/approve.html.twig
+1
View File
@@ -7,6 +7,7 @@
<link rel="icon" type="image/png" sizes="32x32" href="/build/icons/favicon-32.png?v=20260515-vviewfinder">
<link rel="icon" type="image/png" sizes="16x16" href="/build/icons/favicon-16.png?v=20260515-vviewfinder">
<link rel="apple-touch-icon" sizes="180x180" href="/build/icons/apple-touch-icon.png?v=20260515-vviewfinder">
<link rel="stylesheet" href="/css/wevisto-design.css">
<title>Add photo to your frame — WeVisto</title>
<style>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
templates/token/approved.html.twig
+1
View File
@@ -7,6 +7,7 @@
<link rel="icon" type="image/png" sizes="32x32" href="/build/icons/favicon-32.png?v=20260515-vviewfinder">
<link rel="icon" type="image/png" sizes="16x16" href="/build/icons/favicon-16.png?v=20260515-vviewfinder">
<link rel="apple-touch-icon" sizes="180x180" href="/build/icons/apple-touch-icon.png?v=20260515-vviewfinder">
<link rel="stylesheet" href="/css/wevisto-design.css">
<title>Photo added — WeVisto</title>
<style>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
templates/token/decline.html.twig
+1
View File
@@ -7,6 +7,7 @@
<link rel="icon" type="image/png" sizes="32x32" href="/build/icons/favicon-32.png?v=20260515-vviewfinder">
<link rel="icon" type="image/png" sizes="16x16" href="/build/icons/favicon-16.png?v=20260515-vviewfinder">
<link rel="apple-touch-icon" sizes="180x180" href="/build/icons/apple-touch-icon.png?v=20260515-vviewfinder">
<link rel="stylesheet" href="/css/wevisto-design.css">
<title>Decline photo — WeVisto</title>
<style>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
templates/token/declined.html.twig
+1
View File
@@ -7,6 +7,7 @@
<link rel="icon" type="image/png" sizes="32x32" href="/build/icons/favicon-32.png?v=20260515-vviewfinder">
<link rel="icon" type="image/png" sizes="16x16" href="/build/icons/favicon-16.png?v=20260515-vviewfinder">
<link rel="apple-touch-icon" sizes="180x180" href="/build/icons/apple-touch-icon.png?v=20260515-vviewfinder">
<link rel="stylesheet" href="/css/wevisto-design.css">
<title>Photo declined — WeVisto</title>
<style>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
templates/token/invalid.html.twig
+1
View File
@@ -7,6 +7,7 @@
<link rel="icon" type="image/png" sizes="32x32" href="/build/icons/favicon-32.png?v=20260515-vviewfinder">
<link rel="icon" type="image/png" sizes="16x16" href="/build/icons/favicon-16.png?v=20260515-vviewfinder">
<link rel="apple-touch-icon" sizes="180x180" href="/build/icons/apple-touch-icon.png?v=20260515-vviewfinder">
<link rel="stylesheet" href="/css/wevisto-design.css">
<title>Link invalid — WeVisto</title>
<style>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}