kutesir/Kisani
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases Wiki Activity

fix: render ugreen_logo correctly using template mode on green bg

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
Robin Kutesa
2026-05-16 18:59:36 +03:00
parent a40ec86362
commit b46fc20975
3 changed files with 57 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
Features/Backup/BackupView.swift
View File

@@ -81,11 +81,17 @@ struct BackupView: View {
private var logoChip: some View { private var logoChip: some View {
HStack(spacing: 6) { HStack(spacing: 6) {
Image("ugreen_logo") ZStack {
.resizable() RoundedRectangle(cornerRadius: 6, style: .continuous)
.scaledToFit() .fill(Color(red: 0.12, green: 0.64, blue: 0.38))
.frame(width: 22, height: 22) .frame(width: 22, height: 22)
.clipShape(RoundedRectangle(cornerRadius: 5, style: .continuous)) Image("ugreen_logo")
.resizable()
.renderingMode(.template)
.scaledToFit()
.frame(width: 15, height: 15)
.foregroundStyle(.white)
}
Text("kisani.") Text("kisani.")
.font(.system(size: 13, weight: .medium, design: .monospaced)) .font(.system(size: 13, weight: .medium, design: .monospaced))
.foregroundStyle(AppTheme.inkSecondary) .foregroundStyle(AppTheme.inkSecondary)

39
Features/Connect/ConnectView.swift
View File

@@ -15,27 +15,34 @@ struct ConnectView: View {
VStack(spacing: 0) { VStack(spacing: 0) {
// Header // Header
VStack(spacing: 20) { VStack(spacing: 12) {
// App icon // "kisani." wordmark
Image("nas_logo_clean") Text("kisani.")
.resizable() .font(.system(size: 13, weight: .medium, design: .monospaced))
.scaledToFit() .foregroundStyle(AppTheme.inkTertiary)
.frame(width: 52, height: 52) .kerning(1.2)
.clipShape(RoundedRectangle(cornerRadius: 13, style: .continuous))
.shadow(color: .black.opacity(0.08), radius: 14, x: 0, y: 4)
.padding(.top, 44) .padding(.top, 44)
// Title // UGREEN logo mark
VStack(spacing: 6) { ZStack {
Text("Kisani") RoundedRectangle(cornerRadius: 18, style: .continuous)
.font(.system(size: 26, weight: .semibold)) .fill(Color(red: 0.12, green: 0.64, blue: 0.38))
.foregroundStyle(AppTheme.ink) .frame(width: 72, height: 72)
// UGreen NAS compatibility badge Image("ugreen_logo")
UGreenCompatibilityBadge() .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) .padding(.horizontal, AppTheme.hPad)
// Protocol picker // Protocol picker

46
Features/Login/LoginView.swift
View File

@@ -14,20 +14,25 @@ struct LoginView: View {
VStack(spacing: 0) { VStack(spacing: 0) {
Spacer() Spacer()
// ── Brand + logo ────────────────────────── // ── Brand stack ────────────────────────────
VStack(spacing: 20) { VStack(spacing: 16) {
brandMark // "kisani." wordmark
Text("kisani.")
.font(.system(size: 13, weight: .medium, design: .monospaced))
.foregroundStyle(AppTheme.inkTertiary)
.kerning(1.2)
.opacity(appeared ? 1 : 0) .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) .animation(.spring(response: 0.44, dampingFraction: 0.82).delay(0.06), value: appeared)
logoView // UGREEN logo mark
nasLogoView
.scaleEffect(appeared ? 1 : 0.88) .scaleEffect(appeared ? 1 : 0.88)
.opacity(appeared ? 1 : 0) .opacity(appeared ? 1 : 0)
.animation(.spring(response: 0.48, dampingFraction: 0.74).delay(0.12), value: appeared) .animation(.spring(response: 0.48, dampingFraction: 0.74).delay(0.12), value: appeared)
} }
Spacer().frame(height: 32) Spacer().frame(height: 28)
// ── Session context ─────────────────────── // ── Session context ───────────────────────
if let conn = connection { if let conn = connection {
@@ -104,29 +109,24 @@ struct LoginView: View {
} }
} }
// MARK: — Brand mark // MARK: — NAS logo
private var brandMark: some View { private var nasLogoView: 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 {
ZStack { ZStack {
RoundedRectangle(cornerRadius: 24, style: .continuous) // UGREEN brand green background
.stroke(AppTheme.inkQuaternary, lineWidth: 0.5) RoundedRectangle(cornerRadius: 22, style: .continuous)
.frame(width: 92, height: 92) .fill(Color(red: 0.12, green: 0.64, blue: 0.38))
.frame(width: 90, height: 90)
// Logo rendered white on green
Image("ugreen_logo") Image("ugreen_logo")
.resizable() .resizable()
.renderingMode(.template)
.scaledToFit() .scaledToFit()
.frame(width: 90, height: 90) .frame(width: 64, height: 64)
.clipShape(RoundedRectangle(cornerRadius: 22, style: .continuous)) .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)
} }
} }