diff --git a/IceCubesApp/App/Tabs/Settings/SettingsTab.swift b/IceCubesApp/App/Tabs/Settings/SettingsTab.swift index b8d0c969..a632a0c1 100644 --- a/IceCubesApp/App/Tabs/Settings/SettingsTab.swift +++ b/IceCubesApp/App/Tabs/Settings/SettingsTab.swift @@ -15,6 +15,7 @@ struct SettingsTabs: View { @StateObject private var routeurPath = RouterPath() @State private var addAccountSheetPresented = false + @State private var isThemeSelectorPresented = false var body: some View { NavigationStack { @@ -65,11 +66,7 @@ struct SettingsTabs: View { private var themeSection: some View { Section("Theme") { - Picker("Theme", selection: $theme.selectedSet) { - ForEach(Theme.allColorSet, id: \.name.rawValue) { set in - Text(set.name.rawValue).tag(set.name) - } - } + themeSelectorButton ColorPicker("Tint color", selection: $theme.tintColor) ColorPicker("Background color", selection: $theme.primaryBackgroundColor) ColorPicker("Secondary Background color", selection: $theme.secondaryBackgroundColor) @@ -126,6 +123,20 @@ struct SettingsTabs: View { } } + private var themeSelectorButton: some View { + NavigationLink(destination: ThemePreviewView()) { + Button { + isThemeSelectorPresented.toggle() + } label: { + HStack { + Text("Theme") + Spacer() + Text(theme.selectedSet.rawValue) + } + } + } + } + private var signOutButton: some View { Button { appAccountsManager.delete(account: appAccountsManager.currentAccount) diff --git a/Packages/DesignSystem/Sources/DesignSystem/ColorSet.swift b/Packages/DesignSystem/Sources/DesignSystem/ColorSet.swift index 62e324fd..09e2076e 100644 --- a/Packages/DesignSystem/Sources/DesignSystem/ColorSet.swift +++ b/Packages/DesignSystem/Sources/DesignSystem/ColorSet.swift @@ -49,7 +49,7 @@ public struct DesertDark: ColorSet { public var tintColor: Color = Color(hex: 0xdf915e) public var primaryBackgroundColor: Color = Color(hex: 0x433744) public var secondaryBackgroundColor: Color = Color(hex:0x654868) - public var labelColor: Color = .black + public var labelColor: Color = .white public init() {} } @@ -71,7 +71,7 @@ public struct NemesisDark: ColorSet { public var tintColor: Color = Color(hex: 0x17a2f2) public var primaryBackgroundColor: Color = Color(hex: 0x000000) public var secondaryBackgroundColor: Color = Color(hex:0x151e2b) - public var labelColor: Color = .black + public var labelColor: Color = .white public init() {} } diff --git a/Packages/DesignSystem/Sources/DesignSystem/Views/ThemePreviewView.swift b/Packages/DesignSystem/Sources/DesignSystem/Views/ThemePreviewView.swift new file mode 100644 index 00000000..58073128 --- /dev/null +++ b/Packages/DesignSystem/Sources/DesignSystem/Views/ThemePreviewView.swift @@ -0,0 +1,98 @@ +import SwiftUI +import Combine + +public struct ThemePreviewView: View { + private let gutterSpace: Double = 8 + @EnvironmentObject private var theme: Theme + @Environment(\.dismiss) var dismiss + + public init() {} + + public var body: some View { + ScrollView { + HStack (spacing: gutterSpace) { + ThemeBoxView(color: IceCubeDark()) + ThemeBoxView(color: IceCubeLight()) + } + HStack (spacing: gutterSpace) { + ThemeBoxView(color: DesertDark()) + ThemeBoxView(color: DesertLight()) + } + HStack (spacing: gutterSpace) { + ThemeBoxView(color: NemesisDark()) + ThemeBoxView(color: NemesisLight()) + } + } + .padding(4) + .frame(maxHeight: .infinity) + .background(theme.primaryBackgroundColor) + .navigationTitle("Theme Selector") + } +} + +struct ThemeBoxView: View { + + @EnvironmentObject var theme: Theme + private let gutterSpace = 8.0 + @State private var isSelected = false + + var color: ColorSet + + var body: some View { + ZStack(alignment: .topTrailing) { + Rectangle() + .foregroundColor(.white) + .frame(maxWidth: .infinity, maxHeight: .infinity) + .cornerRadius(4) + .shadow(radius: 2, x: 2, y: 4) + + VStack (spacing: gutterSpace) { + Text(color.name.rawValue) + .foregroundColor(color.tintColor) + .font(.system(size: 20)) + .fontWeight(.bold) + + Text("Toots preview") + .foregroundColor(color.labelColor) + .frame(maxWidth: .infinity) + .padding() + .background(color.primaryBackgroundColor) + + Text("#icecube, #techhub") + .foregroundColor(color.tintColor) + if isSelected { + HStack { + Spacer() + Image(systemName: "checkmark.seal.fill") + .resizable() + .frame(width: 20, height: 20) + .foregroundColor(.green) + } + } else { + HStack { + Spacer() + Circle() + .strokeBorder(color.tintColor, lineWidth: 1) + .background(Circle().fill(color.primaryBackgroundColor)) + .frame(width: 20, height: 20) + } + } + } + .frame(maxWidth: .infinity) + .padding() + .background(color.secondaryBackgroundColor) + .font(.system(size: 15)) + .cornerRadius(4) + } + .onAppear { + isSelected = theme.selectedSet.rawValue == color.name.rawValue + } + .onChange(of: theme.selectedSet) { newValue in + isSelected = newValue.rawValue == color.name.rawValue + } + .onTapGesture { + theme.selectedSet = color.name + } + } +} +