Design review for first public TestFlight (#492)

* 430 - Design review for first public TestFlight

ElementX/Sources/Other/AvatarSize.swift

@@ -56,7 +56,7 @@ enum UserAvatarSizeOnScreen {
         case .settings:
             return 60
         case .roomDetails:
-            return 32
+            return 44
         }
     }
 }
@@ -73,7 +73,7 @@ enum RoomAvatarSizeOnScreen {
         case .home:
             return 44
         case .details:
-            return 100
+            return 70
         }
     }
 }

ElementX/Sources/Other/SwiftUI/Views/FormSectionHeaderStyle.swift

@@ -0,0 +1,33 @@
+//
+// Copyright 2022 New Vector Ltd
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+import SwiftUI
+
+/// Style for section header
+struct FormSectionHeaderStyle: ViewModifier {
+    func body(content: Content) -> some View {
+        content
+            .foregroundColor(.element.secondaryContent)
+            .font(.element.footnoteBold)
+    }
+}
+
+extension View {
+    /// Applies the `FormSectionHeaderStyle` modifier to the view
+    func formSectionHeader() -> some View {
+        modifier(FormSectionHeaderStyle())
+    }
+}

ElementX/Sources/Other/SwiftUI/Views/SettingsActionButton.swift

@@ -0,0 +1,47 @@
+//
+// Copyright 2023 New Vector Ltd
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+import SwiftUI
+
+/// Small squared action button for settings screens
+struct SettingsActionButton: View {
+    // MARK: Public
+    
+    let title: String
+    let image: Image
+    let action: () -> Void
+    
+    // MARK: Private
+    
+    @ScaledMetric private var menuIconSize = 54.0
+
+    // MARK: Views
+    
+    var body: some View {
+        Button(action: action) {
+            VStack {
+                image
+                    .renderingMode(.template)
+                    .foregroundColor(.element.primaryContent)
+                    .frame(width: menuIconSize, height: menuIconSize)
+                    .background(RoundedRectangle(cornerRadius: 16).fill(Color.element.background))
+                Text(title)
+                    .foregroundColor(.element.secondaryContent)
+                    .font(.element.subheadline)
+            }
+        }
+    }
+}

ElementX/Sources/Other/SwiftUI/Views/SettingsDefaultRow.swift

@@ -0,0 +1,58 @@
+//
+// Copyright 2023 New Vector Ltd
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+import SwiftUI
+
+/// Default row that can be reused for settings screens
+struct SettingsDefaultRow: View {
+    // MARK: Public
+    
+    let title: String
+    let image: Image
+    let action: () -> Void
+    
+    // MARK: Private
+    
+    @ScaledMetric private var menuIconSize = 30.0
+    private let listRowInsets = EdgeInsets(top: 8, leading: 16, bottom: 8, trailing: 16)
+
+    // MARK: Views
+    
+    var body: some View {
+        Button(action: action) {
+            HStack(spacing: 16) {
+                image
+                    .foregroundColor(.element.systemGray)
+                    .padding(4)
+                    .background(Color.element.systemGray6)
+                    .clipShape(RoundedRectangle(cornerRadius: 8))
+                    .frame(width: menuIconSize, height: menuIconSize)
+                
+                Text(title)
+                    .font(.element.body)
+                    .foregroundColor(.element.primaryContent)
+                
+                Spacer()
+                
+                Image(systemName: "chevron.forward")
+                    .foregroundColor(.element.tertiaryContent)
+            }
+        }
+        .listRowInsets(listRowInsets)
+        .listRowSeparator(.hidden)
+        .foregroundColor(.element.primaryContent)
+    }
+}