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

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