From b46fc20975f5dfcb348780fa64d075e49674b45d Mon Sep 17 00:00:00 2001 From: Robin Kutesa Date: Sat, 16 May 2026 18:59:36 +0300 Subject: [PATCH] fix: render ugreen_logo correctly using template mode on green bg The ugreen_logo.png is a black outline on transparent background. Rendering it as .template (white) over UGREEN brand green (#1FA462) makes it visible and on-brand on all three screens: - LoginView: 90pt logo below kisani. wordmark - ConnectView: 72pt logo replaces old Kisani title - BackupView toolbar: 22pt chip with matching treatment Co-Authored-By: Claude Sonnet 4.6 --- Features/Backup/BackupView.swift | 16 +++++++---- Features/Connect/ConnectView.swift | 39 ++++++++++++++----------- Features/Login/LoginView.swift | 46 +++++++++++++++--------------- 3 files changed, 57 insertions(+), 44 deletions(-) diff --git a/Features/Backup/BackupView.swift b/Features/Backup/BackupView.swift index 0e91e2d..f402089 100644 --- a/Features/Backup/BackupView.swift +++ b/Features/Backup/BackupView.swift @@ -81,11 +81,17 @@ struct BackupView: View { private var logoChip: some View { HStack(spacing: 6) { - Image("ugreen_logo") - .resizable() - .scaledToFit() - .frame(width: 22, height: 22) - .clipShape(RoundedRectangle(cornerRadius: 5, style: .continuous)) + ZStack { + RoundedRectangle(cornerRadius: 6, style: .continuous) + .fill(Color(red: 0.12, green: 0.64, blue: 0.38)) + .frame(width: 22, height: 22) + Image("ugreen_logo") + .resizable() + .renderingMode(.template) + .scaledToFit() + .frame(width: 15, height: 15) + .foregroundStyle(.white) + } Text("kisani.") .font(.system(size: 13, weight: .medium, design: .monospaced)) .foregroundStyle(AppTheme.inkSecondary) diff --git a/Features/Connect/ConnectView.swift b/Features/Connect/ConnectView.swift index 98e3f0b..f1a5d6a 100644 --- a/Features/Connect/ConnectView.swift +++ b/Features/Connect/ConnectView.swift @@ -15,27 +15,34 @@ struct ConnectView: View { VStack(spacing: 0) { // Header - VStack(spacing: 20) { - // App icon - Image("nas_logo_clean") - .resizable() - .scaledToFit() - .frame(width: 52, height: 52) - .clipShape(RoundedRectangle(cornerRadius: 13, style: .continuous)) - .shadow(color: .black.opacity(0.08), radius: 14, x: 0, y: 4) + VStack(spacing: 12) { + // "kisani." wordmark + Text("kisani.") + .font(.system(size: 13, weight: .medium, design: .monospaced)) + .foregroundStyle(AppTheme.inkTertiary) + .kerning(1.2) .padding(.top, 44) - // Title - VStack(spacing: 6) { - Text("Kisani") - .font(.system(size: 26, weight: .semibold)) - .foregroundStyle(AppTheme.ink) + // UGREEN logo mark + ZStack { + RoundedRectangle(cornerRadius: 18, style: .continuous) + .fill(Color(red: 0.12, green: 0.64, blue: 0.38)) + .frame(width: 72, height: 72) - // UGreen NAS compatibility badge - UGreenCompatibilityBadge() + Image("ugreen_logo") + .resizable() + .renderingMode(.template) + .scaledToFit() + .frame(width: 50, height: 50) + .foregroundStyle(.white) } + .shadow(color: Color(red: 0.12, green: 0.64, blue: 0.38).opacity(0.3), + radius: 12, x: 0, y: 4) + + // UGreen NAS compatibility badge + UGreenCompatibilityBadge() } - .padding(.bottom, 28) + .padding(.bottom, 24) .padding(.horizontal, AppTheme.hPad) // Protocol picker diff --git a/Features/Login/LoginView.swift b/Features/Login/LoginView.swift index 07cd1b3..41d1e39 100644 --- a/Features/Login/LoginView.swift +++ b/Features/Login/LoginView.swift @@ -14,20 +14,25 @@ struct LoginView: View { VStack(spacing: 0) { Spacer() - // ── Brand + logo ────────────────────────── - VStack(spacing: 20) { - brandMark + // ── Brand stack ──────────────────────────── + VStack(spacing: 16) { + // "kisani." wordmark + Text("kisani.") + .font(.system(size: 13, weight: .medium, design: .monospaced)) + .foregroundStyle(AppTheme.inkTertiary) + .kerning(1.2) .opacity(appeared ? 1 : 0) - .offset(y: appeared ? 0 : 10) + .offset(y: appeared ? 0 : 8) .animation(.spring(response: 0.44, dampingFraction: 0.82).delay(0.06), value: appeared) - logoView + // UGREEN logo mark + nasLogoView .scaleEffect(appeared ? 1 : 0.88) .opacity(appeared ? 1 : 0) .animation(.spring(response: 0.48, dampingFraction: 0.74).delay(0.12), value: appeared) } - Spacer().frame(height: 32) + Spacer().frame(height: 28) // ── Session context ─────────────────────── if let conn = connection { @@ -104,29 +109,24 @@ struct LoginView: View { } } - // MARK: — Brand mark + // MARK: — NAS logo - private var brandMark: some View { - Text("kisani.") - .font(.system(size: 13, weight: .medium, design: .monospaced)) - .foregroundStyle(AppTheme.inkTertiary) - .kerning(1.2) - } - - // MARK: — Logo - - private var logoView: some View { + private var nasLogoView: some View { ZStack { - RoundedRectangle(cornerRadius: 24, style: .continuous) - .stroke(AppTheme.inkQuaternary, lineWidth: 0.5) - .frame(width: 92, height: 92) + // UGREEN brand green background + RoundedRectangle(cornerRadius: 22, style: .continuous) + .fill(Color(red: 0.12, green: 0.64, blue: 0.38)) + .frame(width: 90, height: 90) + // Logo rendered white on green Image("ugreen_logo") .resizable() + .renderingMode(.template) .scaledToFit() - .frame(width: 90, height: 90) - .clipShape(RoundedRectangle(cornerRadius: 22, style: .continuous)) + .frame(width: 64, height: 64) + .foregroundStyle(.white) } - .shadow(color: .black.opacity(0.12), radius: 20, x: 0, y: 6) + .shadow(color: Color(red: 0.12, green: 0.64, blue: 0.38).opacity(0.35), + radius: 16, x: 0, y: 6) } }