Add scaledFrame/scaledPadding APIs (#2079)

* Add scaled frame and padding modifiers

* Refactor AppLockScreen

* Refactor FormattingToolbar

* Refactor RoomAttachmentPicker

* Refactor ComposerToolbar

* Refactor VoiceMessageRecordingButton

* More refactors

* Refine ScaledPaddingModifier

* Cleanup

* Fix preview tests

* Fix preview test

* Use CompoundIcon for custom image

* Add .scaledFrame(size:) overload

* Set fallback style to .body

ElementX/Sources/Other/SwiftUI/Form Styles/FormButtonStyles.swift

@@ -125,14 +125,12 @@ struct FormButtonStyle: PrimitiveButtonStyle {
 struct FormActionButtonStyle: ButtonStyle {
     let title: String
     
-    @ScaledMetric private var menuIconSize = 54.0
-    
     func makeBody(configuration: Configuration) -> some View {
         VStack {
             configuration.label
                 .buttonStyle(.plain)
                 .foregroundColor(.compound.textPrimary)
-                .frame(width: menuIconSize, height: menuIconSize)
+                .scaledFrame(size: 54)
                 .background {
                     RoundedRectangle(cornerRadius: 16)
                         .fill(configuration.isPressed ? Color.compound.bgSubtlePrimary : .compound.bgCanvasDefaultLevel1)

ElementX/Sources/Other/SwiftUI/Form Styles/FormRowLabelStyle.swift

@@ -17,8 +17,6 @@
 import SwiftUI
 
 struct FormRowLabelStyle: LabelStyle {
-    @ScaledMetric private var menuIconSize = 30.0
-    
     var alignment = VerticalAlignment.firstTextBaseline
     var role: ButtonRole?
 
@@ -51,7 +49,7 @@ struct FormRowLabelStyle: LabelStyle {
             configuration.icon
                 .foregroundColor(iconForegroundColor)
                 .padding(4)
-                .frame(width: menuIconSize, height: menuIconSize)
+                .scaledFrame(size: 30)
                 .background(iconBackgroundColor)
                 .clipShape(RoundedRectangle(cornerRadius: 8))
             configuration.title

ElementX/Sources/Other/SwiftUI/Layout/ScaledFrameModifier.swift

@@ -0,0 +1,43 @@
+//
+// 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
+
+extension View {
+    func scaledFrame(size: CGFloat, alignment: Alignment = .center, relativeTo textStyle: Font.TextStyle = .body) -> some View {
+        scaledFrame(width: size, height: size, alignment: alignment, relativeTo: textStyle)
+    }
+    
+    func scaledFrame(width: CGFloat, height: CGFloat, alignment: Alignment = .center, relativeTo textStyle: Font.TextStyle = .body) -> some View {
+        modifier(ScaledFrameModifier(width: width, height: height, alignment: alignment, relativeTo: textStyle))
+    }
+}
+
+private struct ScaledFrameModifier: ViewModifier {
+    @ScaledMetric var width: CGFloat
+    @ScaledMetric var height: CGFloat
+    let alignment: Alignment
+    
+    init(width: CGFloat, height: CGFloat, alignment: Alignment, relativeTo textStyle: Font.TextStyle) {
+        _width = ScaledMetric(wrappedValue: width, relativeTo: textStyle)
+        _height = ScaledMetric(wrappedValue: height, relativeTo: textStyle)
+        self.alignment = alignment
+    }
+    
+    func body(content: Content) -> some View {
+        content.frame(width: width, height: height, alignment: alignment)
+    }
+}

ElementX/Sources/Other/SwiftUI/Layout/ScaledPaddingModifier.swift

@@ -0,0 +1,41 @@
+//
+// 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
+
+extension View {
+    func scaledPadding(_ length: CGFloat, relativeTo textStyle: Font.TextStyle = .body) -> some View {
+        scaledPadding(.all, length, relativeTo: textStyle)
+    }
+    
+    func scaledPadding(_ edges: Edge.Set, _ length: CGFloat, relativeTo textStyle: Font.TextStyle = .body) -> some View {
+        modifier(ScaledPaddingModifier(edges: edges, length: length, textStyle: textStyle))
+    }
+}
+
+private struct ScaledPaddingModifier: ViewModifier {
+    let edges: Edge.Set
+    @ScaledMetric var length: CGFloat
+    
+    init(edges: Edge.Set, length: CGFloat, textStyle: Font.TextStyle) {
+        self.edges = edges
+        _length = ScaledMetric(wrappedValue: length, relativeTo: textStyle)
+    }
+    
+    func body(content: Content) -> some View {
+        content.padding(edges, length)
+    }
+}