Removed picker and replaced with themepreview view for selecting theme (#24)

* Removed picker and replaced with themepreview view for selecting theme

* Used navigation stack instead of sheet for theme selector view.

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) {
+      themeSelectorButton
-        ForEach(Theme.allColorSet, id: \.name.rawValue) { set in
-          Text(set.name.rawValue).tag(set.name)
-        }
-      }
       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)

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

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
+    }
+  }
+}
+