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/Screens/RoomScreen/View/Style/TimelineItemBubbledStylerView.swift

@@ -25,8 +25,6 @@ struct TimelineItemBubbledStylerView<Content: View>: View {
     
     let timelineItem: EventBasedTimelineItemProtocol
     @ViewBuilder let content: () -> Content
-
-    @ScaledMetric private var senderNameVerticalPadding = 3
     
     @State private var showItemActionMenu = false
 
@@ -85,7 +83,7 @@ struct TimelineItemBubbledStylerView<Content: View>: View {
                     .font(.compound.bodySMSemibold)
                     .foregroundColor(.compound.avatarColor(for: timelineItem.sender.id).foreground)
                     .lineLimit(1)
-                    .padding(.vertical, senderNameVerticalPadding)
+                    .scaledPadding(.vertical, 3)
             }
             // sender info are read inside the `TimelineAccessibilityModifier`
             .accessibilityHidden(true)

ElementX/Sources/Screens/RoomScreen/View/Supplementary/TimelineReactionsView.swift

@@ -191,13 +191,11 @@ struct TimelineReactionButton: View {
 }
 
 struct TimelineReactionAddMoreButtonLabel: View {
-    @ScaledMetric private var addMoreButtonIconSize = 16
-    
     var body: some View {
         TimelineReactionButtonLabel {
             Image(asset: Asset.Images.addReaction)
                 .resizable()
-                .frame(width: addMoreButtonIconSize, height: addMoreButtonIconSize)
+                .scaledFrame(size: 16)
                 .padding(.vertical, 8)
                 .padding(.horizontal, 12)
                 .foregroundColor(.compound.iconSecondary)

ElementX/Sources/Screens/RoomScreen/View/Timeline/PollRoomTimelineView.swift

@@ -20,8 +20,6 @@ struct PollRoomTimelineView: View {
     let timelineItem: PollRoomTimelineItem
     @Environment(\.timelineStyle) var timelineStyle
     @EnvironmentObject private var context: RoomScreenViewModel.Context
-    @ScaledMetric private var summaryPadding = 32
-    @ScaledMetric private var iconSize = 22
 
     private let feedbackGenerator = UIImpactFeedbackGenerator(style: .heavy)
 
@@ -53,7 +51,7 @@ struct PollRoomTimelineView: View {
 
             Image(asset.name)
                 .resizable()
-                .frame(width: iconSize, height: iconSize)
+                .scaledFrame(size: 22)
                 .accessibilityHidden(true)
 
             Text(poll.question)
@@ -83,7 +81,7 @@ struct PollRoomTimelineView: View {
         if let summaryText = poll.summaryText {
             Text(summaryText)
                 .font(.compound.bodySM)
-                .padding(.leading, showVotes ? 0 : summaryPadding)
+                .scaledPadding(.leading, showVotes ? 0 : 32)
                 .foregroundColor(.compound.textSecondary)
                 .frame(maxWidth: .infinity, alignment: showVotes ? .trailing : .leading)
         }

ElementX/Sources/Screens/RoomScreen/View/TimelineItemMenu.swift

@@ -136,7 +136,6 @@ extension RoomTimelineItemProtocol {
 public struct TimelineItemMenu: View {
     @EnvironmentObject private var context: RoomScreenViewModel.Context
     @Environment(\.dismiss) private var dismiss
-    @ScaledMetric private var addMoreButtonIconSize = 24
     
     let item: EventBasedTimelineItemProtocol
     let actions: TimelineItemMenuActions
@@ -228,7 +227,7 @@ public struct TimelineItemMenu: View {
             } label: {
                 Image(asset: Asset.Images.addReaction)
                     .resizable()
-                    .frame(width: addMoreButtonIconSize, height: addMoreButtonIconSize)
+                    .scaledFrame(size: 24)
                     .frame(maxHeight: .infinity, alignment: .center)
                     .foregroundColor(.compound.iconSecondary)
                     .padding(10)

ElementX/Sources/Screens/RoomScreen/View/TimelineSenderAvatarView.swift

@@ -19,8 +19,7 @@ import SwiftUI
 
 struct TimelineSenderAvatarView: View {
     @EnvironmentObject private var context: RoomScreenViewModel.Context
-    @ScaledMetric private var avatarSize = AvatarSize.user(on: .timeline).value
-    
+
     let timelineItem: EventBasedTimelineItemProtocol
         
     var body: some View {