chore: cleanup appearance settings

revoltchat · Aug 5, 2024 · 55f224a · 55f224a
1 parent 82a6164
commit 55f224a
Showing 1 changed file with 51 additions and 27 deletions.
diff --git a/Revolt/Pages/Settings/AppearanceSettings.swift b/Revolt/Pages/Settings/AppearanceSettings.swift
@@ -20,7 +20,9 @@ struct ThemeColorPicker: View {
         ColorPicker(selection: Binding {
             color.color
         } set: { new in
-            color.set(with: new.resolve(in: environment))
+            withAnimation {
+                color.set(with: new.resolve(in: environment))
+            }
         }, label: {
             Text(title)
         })
@@ -33,59 +35,81 @@ struct AppearanceSettings: View {
     @EnvironmentObject var viewState: ViewState
 
     var body: some View {
-        VStack(alignment: .leading) {
-            HStack(spacing: 4) {
+        VStack {
+            HStack {
+                Spacer()
+
                 Button {
-                    viewState.theme = .light
+                    withAnimation {
+                        viewState.theme = .light
+                    }
                 } label: {
                     Text("Light")
                         .foregroundStyle(viewState.theme.accent.color)
                 }
-                .frame(maxWidth: .infinity)
+
+                Spacer()
 
                 Button {
-                    viewState.theme = .dark
+                    withAnimation {
+                        viewState.theme = .dark
+                    }
                 } label: {
                     Text("Dark")
                         .foregroundStyle(viewState.theme.accent.color)
                 }
-                .frame(maxWidth: .infinity)
+
+                Spacer()
 
                 Button {
-                    let _ = viewState.applySystemScheme(theme: colorScheme, followSystem: true)
+                    withAnimation {
+                        let _ = viewState.applySystemScheme(theme: colorScheme, followSystem: true)
+                    }
                 } label: {
                     Text("Auto")
                         .foregroundStyle(viewState.theme.accent.color)
                 }
-                .frame(maxWidth: .infinity)
+
+                Spacer()
             }
-            .frame(maxWidth: .infinity)
-
-            ThemeColorPicker(title: "Accent", color: $viewState.theme.accent)
-            ThemeColorPicker(title: "Background", color: $viewState.theme.background)
-            ThemeColorPicker(title: "Primary Background", color: $viewState.theme.background2)
-            ThemeColorPicker(title: "Secondary Background", color: $viewState.theme.background3)
-            ThemeColorPicker(title: "Tertiary Background", color: $viewState.theme.background4)
-            ThemeColorPicker(title: "Foreground", color: $viewState.theme.foreground)
-            ThemeColorPicker(title: "Secondary Foreground", color: $viewState.theme.foreground2)
-            ThemeColorPicker(title: "Tertiary Foreground", color: $viewState.theme.foreground3)
-            ThemeColorPicker(title: "Message Box", color: $viewState.theme.messageBox)
-            ThemeColorPicker(title: "Navigation Bar", color: $viewState.theme.topBar)
-            ThemeColorPicker(title: "Error", color: $viewState.theme.error)
-            ThemeColorPicker(title: "Mention", color: $viewState.theme.mention)
+            .padding([.horizontal, .top], 16)
 
-            Spacer()
+            List {
+                Section("Theme") {
+                    ThemeColorPicker(title: "Accent", color: $viewState.theme.accent)
+                    ThemeColorPicker(title: "Background", color: $viewState.theme.background)
+                    ThemeColorPicker(title: "Primary Background", color: $viewState.theme.background2)
+                    ThemeColorPicker(title: "Secondary Background", color: $viewState.theme.background3)
+                    ThemeColorPicker(title: "Tertiary Background", color: $viewState.theme.background4)
+                    ThemeColorPicker(title: "Foreground", color: $viewState.theme.foreground)
+                    ThemeColorPicker(title: "Secondary Foreground", color: $viewState.theme.foreground2)
+                    ThemeColorPicker(title: "Tertiary Foreground", color: $viewState.theme.foreground3)
+                    ThemeColorPicker(title: "Message Box", color: $viewState.theme.messageBox)
+                    ThemeColorPicker(title: "Navigation Bar", color: $viewState.theme.topBar)
+                    ThemeColorPicker(title: "Error", color: $viewState.theme.error)
+                    ThemeColorPicker(title: "Mention", color: $viewState.theme.mention)
+                }
+                .listRowBackground(viewState.theme.background2)
+                .animation(.easeInOut, value: viewState.theme)
+
+
+                Section("Messages") {
+                    Toggle("Compact Mode", isOn: Binding(get: { false }, set: {_ in }))
+                        .listRowBackground(viewState.theme.background2)
+                        .animation(.easeInOut, value: viewState.theme)
+                }
+
+            }
+            .scrollContentBackground(.hidden)
         }
         .toolbar {
             ToolbarItem(placement: .principal) {
                 Text("Appearance")
             }
         }
-        .toolbarBackground(viewState.theme.topBar, for: .automatic)
-        .padding(.horizontal, 16)
         .background(viewState.theme.background)
+        .toolbarBackground(viewState.theme.topBar, for: .automatic)
         .animation(.easeInOut, value: viewState.theme)
-        .frame(maxHeight: .infinity)
     }
 }