Move BigIcon into Compound and add a new TitleAndIcon component. (#4866)

* Move BigIcon into Compound.

* Replace the old server selection image asset with the \.host icon.

* Add a new TitleAndIcon component to Compound.

* Add the ability to override TitleAndIcon's padding.

ElementX/Sources/Screens/Authentication/LoginScreen/View/LoginScreen.swift

@@ -6,6 +6,7 @@
 // Please see LICENSE files in the repository root for full details.
 //
 
+import Compound
 import SwiftUI
 
 struct LoginScreen: View {

ElementX/Sources/Screens/Authentication/ServerSelectionScreen/View/ServerSelectionScreen.swift

@@ -6,6 +6,7 @@
 // Please see LICENSE files in the repository root for full details.
 //
 
+import Compound
 import SwiftUI
 
 struct ServerSelectionScreen: View {
@@ -32,8 +33,7 @@ struct ServerSelectionScreen: View {
     /// The title, message and icon at the top of the screen.
     var header: some View {
         VStack(spacing: 8) {
-            Image(asset: Asset.Images.serverSelectionIcon)
-                .bigIcon(insets: 19)
+            BigIcon(icon: \.host)
                 .padding(.bottom, 8)
             
             Text(L10n.screenChangeServerTitle)

ElementX/Sources/Screens/LinkNewDeviceScreen/View/LinkNewDeviceScreen.swift

@@ -12,7 +12,7 @@ struct LinkNewDeviceScreen: View {
     @Bindable var context: LinkNewDeviceScreenViewModel.Context
     
     var body: some View {
-        FullscreenDialog(topPadding: 24) {
+        FullscreenDialog(topPadding: 0) {
             mainContent
         } bottomContent: {
             buttons
@@ -28,33 +28,15 @@ struct LinkNewDeviceScreen: View {
     var mainContent: some View {
         switch context.viewState.mode {
         case .loading, .readyToLink:
-            VStack(spacing: 16) {
-                BigIcon(icon: \.computer, style: .default)
-                
-                Text(L10n.screenLinkNewDeviceRootTitle)
-                    .font(.compound.headingMDBold)
-                    .foregroundColor(.compound.textPrimary)
-                    .multilineTextAlignment(.center)
-            }
-            .padding(.horizontal, 8)
+            TitleAndIcon(title: L10n.screenLinkNewDeviceRootTitle,
+                         icon: \.computer,
+                         iconStyle: .default)
+                .padding(.horizontal, -16) // Remove the FullscreenDialog's default padding in this state.
         case .notSupported:
-            VStack(spacing: 16) {
-                BigIcon(icon: \.errorSolid, style: .alertSolid)
-                
-                VStack(spacing: 8) {
-                    Text(L10n.screenLinkNewDeviceErrorNotSupportedTitle)
-                        .font(.compound.headingMDBold)
-                        .foregroundColor(.compound.textPrimary)
-                        .multilineTextAlignment(.center)
-                    
-                    Text(L10n.screenLinkNewDeviceErrorNotSupportedSubtitle)
-                        .font(.compound.bodyMD)
-                        .foregroundColor(.compound.textSecondary)
-                        .multilineTextAlignment(.center)
-                }
-            }
-            .padding(.horizontal, 24)
-            .padding(.bottom, 40)
+            TitleAndIcon(title: L10n.screenLinkNewDeviceErrorNotSupportedTitle,
+                         subtitle: L10n.screenLinkNewDeviceErrorNotSupportedSubtitle,
+                         icon: \.errorSolid,
+                         iconStyle: .alertSolid)
         }
     }
     

ElementX/Sources/Screens/Onboarding/NotificationPermissionsScreen/View/NotificationPermissionsScreen.swift

@@ -6,6 +6,7 @@
 // Please see LICENSE files in the repository root for full details.
 //
 
+import Compound
 import SwiftUI
 
 /// A prompt that asks the user whether they would like to enable Analytics or not.