From f35f605b58e4c87bc55693d5ec90140604f14db7 Mon Sep 17 00:00:00 2001
From: FuelBoard Contributor <fuelboard@localhost>
Date: Wed, 14 Oct 2026 15:02:29 +0100
Subject: [PATCH] Onboarding welcome: the app icon stands on its own, with no
 circle behind it
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The first onboarding screen showed the app icon inside AnimatedOnboardingIcon's
soft circle — a 10% tinted disc with an 18% ring around it. The wrapper now takes
`showsHalo`, defaulting to true so the other five pages and BestValueIntroView keep
theirs unchanged; the welcome page passes false.

Verified with before/after installs on the simulator:
- the icon's artwork is pixel-identical and unmoved (centre 603,661, 95 pt);
- the halo is gone — the tile's non-background footprint falls from the 118 pt
  ring to exactly the 96 pt tile, and the ring pixels at r=59 pt lose their tint;
- page 1 differs only by the status-bar clock, so the other pages are untouched.

The copy below the icon tightens by ~11 pt: the page block is centred between two
spacers and the icon's container no longer contributes 22 pt of height. The page
dots and the Continue button do not move. The icon keeps its soft accent shadow.
---
 FuelBoard/OnboardingView.swift | 25 +++++++++++++++----------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/FuelBoard/OnboardingView.swift b/FuelBoard/OnboardingView.swift
index 8e51b43..314c782 100644
--- a/FuelBoard/OnboardingView.swift
+++ b/FuelBoard/OnboardingView.swift
@@ -98,7 +98,7 @@ struct OnboardingView: View {
     private var welcomePage: some View {
         VStack(spacing: 0) {
             Spacer()
-            AnimatedOnboardingIcon(tint: .accentColor) {
+            AnimatedOnboardingIcon(tint: .accentColor, showsHalo: false) {
                 // The app icon itself, with the standard iOS rounded-corner
                 // treatment (~22% of the size), so onboarding matches the
                 // Home Screen.
@@ -393,6 +393,9 @@ struct AnimatedOnboardingIcon<Content: View>: View {
 
     let tint: Color
     var motion: Motion = .gentle
+    /// The soft circle behind the glyph. The welcome page turns it off: it shows
+    /// the app icon itself and reads better with no container around it.
+    var showsHalo: Bool = true
     @ViewBuilder var content: Content
 
     @State private var settled = false
@@ -402,16 +405,18 @@ struct AnimatedOnboardingIcon<Content: View>: View {
 
     var body: some View {
         ZStack {
-            Circle()
-                .fill(tint.opacity(0.10))
-                .frame(width: 108, height: 108)
-                .scaleEffect(settled ? 1.0 : 0.94)
+            if showsHalo {
+                Circle()
+                    .fill(tint.opacity(0.10))
+                    .frame(width: 108, height: 108)
+                    .scaleEffect(settled ? 1.0 : 0.94)
 
-            Circle()
-                .stroke(tint.opacity(0.18), lineWidth: 1)
-                .frame(width: 118, height: 118)
-                .scaleEffect(settled ? 1.03 : 0.97)
-                .opacity(settled ? 1.0 : 0.55)
+                Circle()
+                    .stroke(tint.opacity(0.18), lineWidth: 1)
+                    .frame(width: 118, height: 118)
+                    .scaleEffect(settled ? 1.03 : 0.97)
+                    .opacity(settled ? 1.0 : 0.55)
+            }
 
             content
                 .scaleEffect(iconScale)