Adopt Compound for the settings and bug report screens. (#708)

* Use compound tokens for Settings and Bug Report.
2026-10-31 08:15:24 +00:00 · 2023-03-21 14:52:10 +00:00
parent 60214f3ccf
commit 8c89b06f3b
33 changed files with 152 additions and 180 deletions
@@ -25,9 +25,9 @@ public extension Color {
 }

 public struct ElementColors {
-    // MARK: - Compound
+    // MARK: - Legacy Compound
    
-    private let compound = CompoundColors()
+    private let compound = DesignTokens.CompoundColors()
    
    public var accent: Color { systemPrimaryLabel }
    public var alert: Color { compound.alert }
@@ -44,23 +44,6 @@ public struct ElementColors {
    
    public var contentAndAvatars: [Color] { compound.contentAndAvatars }
    
-    // MARK: - System
-    
-    public var systemPrimaryLabel: Color { .primary }
-    public var systemSecondaryLabel: Color { .secondary }
-    public var systemTertiaryLabel: Color { Color(.tertiaryLabel) }
-    public var systemQuaternaryLabel: Color { Color(.quaternaryLabel) }
-    
-    public var systemPrimaryBackground: Color { Color(.systemBackground) }
-    public var systemSecondaryBackground: Color { Color(.secondarySystemBackground) }
-    
-    public var systemGray: Color { Color(.systemGray) }
-    public var systemGray2: Color { Color(.systemGray2) }
-    public var systemGray3: Color { Color(.systemGray3) }
-    public var systemGray4: Color { Color(.systemGray4) }
-    public var systemGray5: Color { Color(.systemGray5) }
-    public var systemGray6: Color { Color(.systemGray6) }
-
    public func avatarBackground(for contentId: String) -> Color {
        let colorIndex = Int(contentId.hashCode % Int32(contentAndAvatars.count))
        return contentAndAvatars[colorIndex % contentAndAvatars.count]
@@ -68,17 +51,22 @@ public struct ElementColors {
    
    // MARK: - Temp
    
+    public var systemPrimaryLabel: Color { .primary }
+    public var systemPrimaryBackground: Color { Color(.systemBackground) }
+    public var systemGray4: Color { Color(.systemGray4) }
+    public var systemGray6: Color { Color(.systemGray6) }
+    
    public var bubblesYou: Color {
        Color(UIColor { collection in
            // Note: Light colour doesn't currently match Figma.
-            collection.userInterfaceStyle == .light ? .element.systemGray5 : UIColor(red: 0.16, green: 0.18, blue: 0.21, alpha: 1)
+            collection.userInterfaceStyle == .light ? .systemGray5 : UIColor(red: 0.16, green: 0.18, blue: 0.21, alpha: 1)
        })
    }
    
    public var bubblesNotYou: Color {
        Color(UIColor { collection in
            // Note: Light colour doesn't currently match Figma.
-            collection.userInterfaceStyle == .light ? .element.systemGray6 : .element.system
+            collection.userInterfaceStyle == .light ? .systemGray6 : .element.system
        })
    }
    
@@ -87,7 +75,6 @@ public struct ElementColors {
    /// This colour is a special case as it uses `system` in light mode and `background` in dark mode.
    public var formBackground: Color {
        Color(UIColor { collection in
-            // Note: Light colour doesn't currently match Figma.
            collection.userInterfaceStyle == .light ? .element.system : .element.background
        })
    }
@@ -97,7 +84,6 @@ public struct ElementColors {
    /// This colour is a special case as it uses `background` in light mode and `system` in dark mode.
    public var formRowBackground: Color {
        Color(UIColor { collection in
-            // Note: Light colour doesn't currently match Figma.
            collection.userInterfaceStyle == .light ? .element.background : .element.system
        })
    }
@@ -113,9 +99,9 @@ public extension UIColor {
@objcMembers public class ElementUIColors: NSObject {
    // MARK: - Compound
    
-    private let compound = CompoundUIColors()
+    private let compound = DesignTokens.CompoundUIColors()
    
-    public var accent: UIColor { systemPrimaryLabel }
+    public var accent: UIColor { .label }
    public var alert: UIColor { compound.alert }
    public var links: UIColor { compound.links }
    public var primaryContent: UIColor { compound.primaryContent }
@@ -127,23 +113,6 @@ public extension UIColor {
    public var background: UIColor { compound.background }
    
    public var contentAndAvatars: [UIColor] { compound.contentAndAvatars }
-    
-    // MARK: - System
-    
-    public var systemPrimaryLabel: UIColor { .label }
-    public var systemSecondaryLabel: UIColor { .secondaryLabel }
-    public var systemTertiaryLabel: UIColor { .tertiaryLabel }
-    public var systemQuaternaryLabel: UIColor { .quaternaryLabel }
-    
-    public var systemPrimaryBackground: UIColor { .systemBackground }
-    public var systemSecondaryBackground: UIColor { .secondarySystemBackground }
-    
-    public var systemGray: UIColor { .systemGray }
-    public var systemGray2: UIColor { .systemGray2 }
-    public var systemGray3: UIColor { .systemGray3 }
-    public var systemGray4: UIColor { .systemGray4 }
-    public var systemGray5: UIColor { .systemGray5 }
-    public var systemGray6: UIColor { .systemGray6 }

    public func avatarBackground(for contentId: String) -> UIColor {
        let colorIndex = Int(contentId.hashCode % Int32(contentAndAvatars.count))
@@ -9,6 +9,22 @@
        "version" : "1.6.0"
      }
    },
+    {
+      "identity" : "compound-design-tokens",
+      "kind" : "remoteSourceControl",
+      "location" : "https://github.com/vector-im/compound-design-tokens.git",
+      "state" : {
+        "revision" : "342145ff8044b58b967186b0efe34477e1f7c3ca"
+      }
+    },
+    {
+      "identity" : "compound-ios",
+      "kind" : "remoteSourceControl",
+      "location" : "https://github.com/vector-im/compound-ios",
+      "state" : {
+        "revision" : "0b1c62f9a9efac3d9ac06c51531392d55057a0eb"
+      }
+    },
    {
      "identity" : "devicekit",
      "kind" : "remoteSourceControl",
@@ -87,6 +87,7 @@

 // Bug report
 "bug_report_screen_title" = "Report a bug";
+"bug_report_screen_editor_placeholder" = "Describe the bug…";
 "bug_report_screen_description" = "Please describe the bug. What did you do? What did you expect to happen? What actually happened. Please go into as much detail as you can.";
 "bug_report_screen_include_logs" = "Send logs to help";
 "bug_report_screen_logs_description" = "To check things work as intended, logs will be sent with your message. These will be private. To just send your message, turn off this setting.";
@@ -22,6 +22,8 @@ extension ElementL10n {
  public static let bugReportScreenDescription = ElementL10n.tr("Untranslated", "bug_report_screen_description")
  /// Edit Screenshot
  public static let bugReportScreenEditScreenshot = ElementL10n.tr("Untranslated", "bug_report_screen_edit_screenshot")
+  /// Describe the bug…
+  public static let bugReportScreenEditorPlaceholder = ElementL10n.tr("Untranslated", "bug_report_screen_editor_placeholder")
  /// Send logs to help
  public static let bugReportScreenIncludeLogs = ElementL10n.tr("Untranslated", "bug_report_screen_include_logs")
  /// To check things work as intended, logs will be sent with your message. These will be private. To just send your message, turn off this setting.
@@ -14,28 +14,25 @@
 // limitations under the License.
 //

+import Compound
 import PhotosUI
 import SwiftUI

 struct BugReportScreen: View {
-    @Environment(\.horizontalSizeClass) private var horizontalSizeClass
-    
-    private var horizontalPadding: CGFloat {
-        horizontalSizeClass == .regular ? 50 : 16
-    }
-
    @State private var selectedScreenshot: PhotosPickerItem?
    
    @ObservedObject var context: BugReportViewModel.Context
    
    var body: some View {
-        ScrollView {
-            mainContent
-                .padding(.top, 50)
-                .padding(.horizontal, horizontalPadding)
+        Form {
+            textFieldSection
+            
+            attachScreenshotSection
+            
+            sendLogsSection
        }
        .scrollDismissesKeyboard(.immediately)
-        .background(Color.element.formBackground.ignoresSafeArea())
+        .compoundForm()
        .navigationTitle(ElementL10n.bugReportScreenTitle)
        .navigationBarTitleDisplayMode(.inline)
        .toolbar { toolbar }
@@ -51,77 +48,65 @@ struct BugReportScreen: View {
            }
        }
    }
-
-    /// The main content of the view to be shown in a scroll view.
-    var mainContent: some View {
-        VStack(alignment: .leading, spacing: 24) {
-            descriptionTextEditor
-            attachScreenshot
-            sendLogsToggle
+    
+    private var textFieldSection: some View {
+        Section {
+            TextField(ElementL10n.bugReportScreenEditorPlaceholder,
+                      text: $context.reportText,
+                      prompt: Text(ElementL10n.bugReportScreenEditorPlaceholder).compoundFormTextFieldPlaceholder(),
+                      axis: .vertical)
+                .lineLimit(4, reservesSpace: true)
+                .textFieldStyle(.compoundForm)
+                .accessibilityIdentifier(A11yIdentifiers.bugReportScreen.report)
+        } footer: {
+            Text(ElementL10n.bugReportScreenDescription)
+                .compoundFormSectionFooter()
        }
+        .compoundFormSection()
    }
    
-    private var descriptionTextEditor: some View {
-        FormTextEditor(text: $context.reportText,
-                       placeholder: ElementL10n.bugReportScreenDescription,
-                       editorAccessibilityIdentifier: A11yIdentifiers.bugReportScreen.report)
-    }
-    
-    @ViewBuilder
-    private var sendLogsToggle: some View {
-        VStack(spacing: 8) {
+    private var sendLogsSection: some View {
+        Section {
            Toggle(ElementL10n.bugReportScreenIncludeLogs, isOn: $context.sendingLogsEnabled)
-                .foregroundColor(.element.primaryContent)
-                .tint(Color.element.brand)
+                .toggleStyle(.compoundForm)
                .accessibilityIdentifier(A11yIdentifiers.bugReportScreen.sendLogs)
-                .padding(.horizontal, 16)
-                .padding(.vertical, 6.5)
-                .background {
-                    RoundedRectangle(cornerRadius: 14)
-                        .fill(Color.element.formRowBackground)
-                }
-            
+        } footer: {
            Text(ElementL10n.bugReportScreenLogsDescription)
-                .font(.element.caption1)
-                .foregroundColor(Color.element.secondaryContent)
-                .padding(.horizontal, -8)
+                .compoundFormSectionFooter()
        }
+        .compoundFormSection()
    }

    @ViewBuilder
-    private var attachScreenshot: some View {
-        VStack(alignment: .leading, spacing: 16) {
+    private var attachScreenshotSection: some View {
+        Section {
            PhotosPicker(selection: $selectedScreenshot,
                         matching: .screenshots,
                         photoLibrary: .shared()) {
-                HStack(spacing: 16) {
-                    Label(context.viewState.screenshot == nil ? ElementL10n.bugReportScreenAttachScreenshot : ElementL10n.bugReportScreenEditScreenshot, systemImage: "camera")
-                        .labelStyle(FormRowLabelStyle())
-                    Spacer()
-                }
+                Label(context.viewState.screenshot == nil ? ElementL10n.bugReportScreenAttachScreenshot : ElementL10n.bugReportScreenEditScreenshot, systemImage: "camera")
            }
-            .buttonStyle(FormButtonStyle())
-            .background(Color.element.formRowBackground)
-            .cornerRadius(14)
+            .buttonStyle(.compoundForm())
            .accessibilityIdentifier(A11yIdentifiers.bugReportScreen.attachScreenshot)
+        } footer: {
            if let screenshot = context.viewState.screenshot {
-                ZStack(alignment: .topTrailing) {
-                    Image(uiImage: screenshot)
-                        .resizable()
-                        .scaledToFit()
-                        .frame(width: 100)
-                        .cornerRadius(4)
-                        .accessibilityIdentifier(A11yIdentifiers.bugReportScreen.screenshot)
-                    Button { context.send(viewAction: .removeScreenshot) } label: {
-                        Image(Asset.Images.closeCircle.name)
+                Image(uiImage: screenshot)
+                    .resizable()
+                    .scaledToFit()
+                    .frame(width: 100)
+                    .cornerRadius(4)
+                    .accessibilityIdentifier(A11yIdentifiers.bugReportScreen.screenshot)
+                    .overlay(alignment: .topTrailing) {
+                        Button { context.send(viewAction: .removeScreenshot) } label: {
+                            Image(Asset.Images.closeCircle.name)
+                        }
+                        .offset(x: 10, y: -10)
+                        .accessibilityIdentifier(A11yIdentifiers.bugReportScreen.removeScreenshot)
                    }
-                    .offset(x: 10, y: -10)
-                    .accessibilityIdentifier(A11yIdentifiers.bugReportScreen.removeScreenshot)
-                }
-                .padding(.vertical, 16)
-                .padding(.horizontal, 16)
+                    .padding(.vertical, 16)
+                    .padding(.horizontal, 16)
            }
        }
+        .compoundFormSection()
    }
    
    @ToolbarContentBuilder
@@ -14,12 +14,11 @@
 // limitations under the License.
 //

+import Compound
 import SwiftUI

 struct SettingsScreen: View {
    @State private var showingLogoutConfirmation = false
-
-    @ScaledMetric private var avatarSize = AvatarSize.user(on: .settings).value
    
    @ObservedObject var context: SettingsScreenViewModel.Context
    
@@ -39,8 +38,7 @@ struct SettingsScreen: View {
            
            signOutSection
        }
-        .scrollContentBackground(.hidden)
-        .background(Color.element.formBackground.ignoresSafeArea())
+        .compoundForm()
        .navigationTitle(ElementL10n.settings)
        .navigationBarTitleDisplayMode(.inline)
        .toolbar {
@@ -56,7 +54,7 @@ struct SettingsScreen: View {

    private var userSection: some View {
        Section {
-            HStack(spacing: 13) {
+            HStack(spacing: 12) {
                LoadableAvatarImage(url: context.viewState.userAvatarURL,
                                    name: context.viewState.userDisplayName,
                                    contentID: context.viewState.userID,
@@ -64,18 +62,18 @@ struct SettingsScreen: View {
                                    imageProvider: context.imageProvider)
                    .accessibilityHidden(true)
                
-                VStack(alignment: .leading, spacing: 4) {
+                VStack(alignment: .leading, spacing: 2) {
                    Text(context.viewState.userDisplayName ?? "")
-                        .font(.element.title3)
-                        .foregroundColor(.element.primaryContent)
+                        .font(.compound.headingMD)
+                        .foregroundColor(.compound.textPrimary)
                    Text(context.viewState.userID)
-                        .font(.element.subheadline)
-                        .foregroundColor(.element.primaryContent)
+                        .font(.compound.bodySM)
+                        .foregroundColor(.compound.textSecondary)
                }
                .accessibilityElement(children: .combine)
            }
        }
-        .formSectionStyle()
+        .compoundFormSection()
    }
    
    private var sessionVerificationSection: some View {
@@ -83,9 +81,9 @@ struct SettingsScreen: View {
            Button { context.send(viewAction: .sessionVerification) } label: {
                Label(ElementL10n.settingsSessionVerification, systemImage: "checkmark.shield")
            }
-            .buttonStyle(FormButtonStyle())
+            .buttonStyle(.compoundForm())
        }
-        .formSectionStyle()
+        .compoundFormSection()
    }
    
    private var developerOptionsSection: some View {
@@ -93,10 +91,10 @@ struct SettingsScreen: View {
            Button { context.send(viewAction: .developerOptions) } label: {
                Label(ElementL10n.settingsDeveloperOptions, systemImage: "hammer.circle")
            }
-            .buttonStyle(FormButtonStyle(accessory: .navigationLink))
+            .buttonStyle(.compoundForm(accessory: .navigationLink))
            .accessibilityIdentifier("sessionVerificationButton")
        }
-        .formSectionStyle()
+        .compoundFormSection()
    }
    
    private var simplifiedSection: some View {
@@ -108,8 +106,8 @@ struct SettingsScreen: View {
                }
            } label: {
                Label(ElementL10n.settingsTimelineStyle, systemImage: "rectangle.grid.1x2")
-                    .labelStyle(FormRowLabelStyle())
            }
+            .labelStyle(.compoundFormRow())
            .accessibilityIdentifier("timelineStylePicker")
            .onChange(of: context.timelineStyle) { _ in
                context.send(viewAction: .changedTimelineStyle)
@@ -118,10 +116,10 @@ struct SettingsScreen: View {
            Button { context.send(viewAction: .reportBug) } label: {
                Label(ElementL10n.sendBugReport, systemImage: "questionmark.circle")
            }
-            .buttonStyle(FormButtonStyle(accessory: .navigationLink))
+            .buttonStyle(.compoundForm(accessory: .navigationLink))
            .accessibilityIdentifier("reportBugButton")
        }
-        .formSectionStyle()
+        .compoundFormSection()
    }
    
    private var signOutSection: some View {
@@ -129,7 +127,7 @@ struct SettingsScreen: View {
            Button { showingLogoutConfirmation = true } label: {
                Label(ElementL10n.actionSignOut, systemImage: "rectangle.portrait.and.arrow.right")
            }
-            .buttonStyle(FormButtonStyle())
+            .buttonStyle(.compoundForm())
            .accessibilityIdentifier("logoutButton")
            .alert(ElementL10n.actionSignOut, isPresented: $showingLogoutConfirmation) {
                Button(ElementL10n.actionSignOut,
@@ -141,19 +139,14 @@ struct SettingsScreen: View {
        } footer: {
            VStack {
                versionText
-                    .font(.element.caption1)
-                    .foregroundColor(.element.tertiaryContent)
                    .frame(maxWidth: .infinity)
                
-                if let deviceId = context.viewState.deviceID {
-                    Text(deviceId)
-                        .font(.element.caption1)
-                        .foregroundColor(.element.tertiaryContent)
-                }
+                context.viewState.deviceID.map(Text.init)
            }
+            .compoundFormSectionFooter()
            .padding(.top, 24)
        }
-        .formSectionStyle()
+        .compoundFormSection()
    }

    private var doneButton: some View {
@@ -127,6 +127,7 @@ targets:
    - target: NSE
    - package: MatrixRustSDK
    - package: DesignKit
+    - package: Compound
    - package: Algorithms
    - package: AnalyticsEvents
    - package: AppAuth
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:358aedfda97e567f398fc13908ba07135bd5d85c7b1000cc81ff3000b81d75d7
-size 115132
+oid sha256:c67bdab391e95ef065f074a300bac9c6bb6279e7cddbc58c9300cb067fa9e716
+size 115162
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:446e2ec1437988533e82ab70b91b57cabf1d3e43be62bdc39014325b2ebc2f26
-size 115963
+oid sha256:05566c0ba47079128b45e644969b5499a412a8eb2e5da9abc6ba1de742ac816c
+size 115270
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:e8872122c06b940ed87c5f191b5a13c61b9fe9e05aa0e16013d2e21932d3cf13
-size 168982
+oid sha256:71ae0023d08a5a02a47c725d26a103f3eaace978f0675c095fa714bb52d32478
+size 182410
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:844522141b319587c5179dc67202e97fdb9dba1e1fc8ce8358787b0dd38e63ce
-size 171543
+oid sha256:ca298db59b6d239a4995357addc9b15b321bf29cb3dc429aef57dcff61b160a2
+size 185714
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:95af9a204ad87a1aa1aa722623627395e81c8414023e28a67a40b92689e077aa
-size 121979
+oid sha256:8c265f3e09023a30882395c67b4512056b2d7a2d8b5562238e428e2380abf346
+size 120759
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:50f9b885cf0c41930c1137c1e6ffb0517d0eca6e6d67a32f6cca41be3896ed67
-size 109633
+oid sha256:49de14582fb7f808a05b3473a031484183441fca5f969a996395bd4c34b5fc46
+size 102630
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:316c358d1c29ba6543cef3fe17a496120f58fc8c1f67f44eedfe6cbb0c842cf7
-size 151665
+oid sha256:0e3634a16e87fd51d5cb8b55e7396691e4cabd9fa047f7fa19a02acbbdb9a7c2
+size 147542
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:3a620a0f0aa381737f5c290aedd2a49316c0280701d2fd44402b3eccef00c7c5
-size 154154
+oid sha256:667f974615cc883187b05beba38f805ad578873368826db2c3525ceaadcfa18a
+size 145083
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:5587816cfd6aeaf9d6e7eccf45174292c3f32d7ac7ea0a81553103c50aba079c
-size 167343
+oid sha256:521dc12c3d27c2d43b9db79929fffb38fb2ad227d276a9136ef69a24f2234fb8
+size 205573
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:4942a438cf706b6c69ba033c09d43b266940ecd1a39a155edb8e65cdd39939a6
-size 171248
+oid sha256:f5ec6a8697f774afda7b61e79edc652344c5a951a0b92ecc211efbc2bcd17335
+size 208770
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:2362b200a07dedfc74adcfcec55d20a8c6605b4bcc5ee3a726030c93d7a1728d
-size 158371
+oid sha256:f0a8445cba54afb2c2a00aa78bf33a4eaa94c8a89e61b3762b537030719741d8
+size 154495
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:61f029120bf78b803acd6634c016daad77a70d49803e0a628a2621a6a0d2fe9b
-size 133059
+oid sha256:ab44cba126e15c9ea55c4e8f00e8e7aeca95a8f8318ad9dbf82bd9206296d203
+size 124317
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:1f28e2dcc9e240a607968f6d701d4ca7e8770e49edd3a6ede7e6c7fbb27a62ab
-size 114594
+oid sha256:3f0c93473df0cec9e1d2fec5010a3c33d4eb46b69c4c40f6b51e524863b95c9a
+size 113844
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:8ba414a888dc1d6d28e5fb27a949493ab2a6dcc1e73216e6765bc5f4bd59bc45
-size 115342
+oid sha256:3d3a511a1c225751c5fe3bf6e296c12612e28efa7f101b533191fa862eace69a
+size 114029
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:e070d58f45db27aeb9fec478c5a1651fc03d6e6bf43abca1618093e06123e642
-size 168248
+oid sha256:c06fc3905aed23e28b0fc6ce7775fb1a7b8a5ccc3f3d3c242297ee206df18a26
+size 180922
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:44ad27e09e5b13ecb849a54fdfb38bd27c0a4869a9537178aa2c09ce343e0cd9
-size 170880
+oid sha256:ee83c9fc5576ad56be28a947c02763ab064e5460153d84ae3d7a5c2eb28e418e
+size 185147
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:c157347a9e3a790911d247451103146cbee0e341c798e1cc2d8b5938baaa806e
-size 121841
+oid sha256:d078925b6a20c8c81e42378d1e3b32ea11be6eff56f2461a40e7d8d18b476097
+size 120619
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:30ff9c1d2ba944923c4ffa52b258263b03c57243c226b6916220fb532ff56111
-size 110398
+oid sha256:13570c5df20909284b7184702f60fd49be43160ebf62dd05f4dd57560e067106
+size 102087
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:64769e5b69982d2d83e2bbdfffb83f1d73079f077c8ee1c5b68163fc659d53f4
-size 150686
+oid sha256:3b30298a0effc02d3c048f3a0f527813de46ac8ad70b9a31a722c2cf3cfb5806
+size 146803
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:be4d36138ecb1fdb0ce374d92827354851e53943e6a1bbdf62f4bf87ba755930
-size 153234
+oid sha256:6ed199f6c4b98bf600364b87010655c454a2dfeee9edc455e37988b60386e696
+size 146593
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:71f01217f1d90a9a181047d51e373fbdd5411efa51578c9dcd156c573da7646c
-size 166342
+oid sha256:9f6f93e59d8a9c24f59909c47146311c3196f96229d67c7642999c1810ed79f2
+size 204788
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:72b1f8b6fca4375729f62d47c5b903f07419449cbbcbe9f77318b6ef9195a4a6
-size 170255
+oid sha256:96f5584d56edf3087040cb95f858014c4a33314ee8cc90e2eec591eb6c05d987
+size 210112
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:3385b4006707085ccb922e443e5e84ee0b1ff4d9cee90fcaf8e369dcd37566b2
-size 158211
+oid sha256:dbf2815964fb44a96364f98b89d9b3d5d24ef29dc0910f5519145a5c288cb797
+size 152062
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:8298b57d94db8a9776db4051364722b82b04421bdfa920bccb0bbb2cb912fd2a
-size 133085
+oid sha256:17b7a7c648de5de3b1fe9bff7cd6d77b1d5202f985b2e7377e0a2f9e1a4249ef
+size 123926
@@ -0,0 +1 @@
+Adopt compound-ios on the Settings and Bug Report screens. 
@@ -46,6 +46,10 @@ packages:
    # path: ../matrix-rust-sdk
  DesignKit:
    path: DesignKit
+  Compound:
+    url: https://github.com/vector-im/compound-ios
+    revision: 0b1c62f9a9efac3d9ac06c51531392d55057a0eb
+    # path: ../compound-ios
  Algorithms:
    url: https://github.com/apple/swift-algorithms
    majorVersion: 1.0.0
				`@@ -0,0 +1 @@`
				`Adopt compound-ios on the Settings and Bug Report screens.`