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 {
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)

39
Features/Connect/ConnectView.swift
View File

@@ -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

46
Features/Login/LoginView.swift
View File

@@ -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)
}
}