App polish part 3 (#1135)

- Add an animation to long press on messages.
- Make emojis bigger on the reactions picker screen.
- Remove quote menu action.
- Fix emoji picker handle overlapping focused search field.
- Update launch, splash and onboarding screens.
- Use elevation tokens in Forms.
- Move the cancel button on the Start Chat flow.

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

@@ -49,8 +49,8 @@ struct FormRowAccessory: View {
         switch kind {
         case .navigationLink:
             Image(systemName: "chevron.forward")
-                .font(.compound.bodyMD.bold())
-                .foregroundColor(.compound.iconQuaternary)
+                .font(.compound.bodyMDSemibold)
+                .foregroundColor(.compound.iconTertiaryAlpha)
         case .progressView:
             ProgressView()
         case .singleSelection(let isSelected):
@@ -111,9 +111,9 @@ struct FormButtonStyle: PrimitiveButtonStyle {
         private func backgroundColor(for configuration: Configuration) -> Color {
             switch accessory?.kind {
             case .none, .navigationLink, .progressView:
-                return configuration.isPressed ? .compound.bgSubtlePrimary : .element.formRowBackground
+                return configuration.isPressed ? .compound.bgSubtlePrimary : .compound.bgCanvasDefaultLevel1
             default:
-                return .element.formRowBackground
+                return .compound.bgCanvasDefaultLevel1
             }
         }
     }
@@ -133,7 +133,7 @@ struct FormActionButtonStyle: ButtonStyle {
                 .frame(width: menuIconSize, height: menuIconSize)
                 .background {
                     RoundedRectangle(cornerRadius: 16)
-                        .fill(configuration.isPressed ? Color.compound.bgSubtlePrimary : .element.formRowBackground)
+                        .fill(configuration.isPressed ? Color.compound.bgSubtlePrimary : .compound.bgCanvasDefaultLevel1)
                 }
             
             Text(title)
@@ -165,7 +165,7 @@ struct FormButtonStyles_Previews: PreviewProvider {
                 ShareLink(item: "test")
                     .buttonStyle(FormButtonStyle())
             }
-            .formSectionStyle()
+            .compoundFormSection()
             
             Section("Single selection") {
                 Button { } label: {
@@ -189,7 +189,7 @@ struct FormButtonStyles_Previews: PreviewProvider {
                 }
                 .buttonStyle(FormButtonStyle(accessory: .singleSelection(isSelected: false)))
             }
-            .formSectionStyle()
+            .compoundFormSection()
             
             Section("Multiple selection") {
                 Button { } label: {
@@ -213,7 +213,7 @@ struct FormButtonStyles_Previews: PreviewProvider {
                 }
                 .buttonStyle(FormButtonStyle(accessory: .multipleSelection(isSelected: false)))
             }
-            .formSectionStyle()
+            .compoundFormSection()
 
             Section {
                 Button(role: .destructive) { } label: {
@@ -221,7 +221,7 @@ struct FormButtonStyles_Previews: PreviewProvider {
                 }
                 .buttonStyle(FormButtonStyle())
             }
-            .formSectionStyle()
+            .compoundFormSection()
         }
     }
 }

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

@@ -32,9 +32,9 @@ struct FormRowLabelStyle: LabelStyle {
 
     private var iconBackgroundColor: Color {
         if role == .destructive {
-            return .compound.textCriticalPrimary.opacity(0.1)
+            return .compound._bgCriticalSubtleAlpha
         } else {
-            return .element.formBackground
+            return .compound._bgSubtleSecondaryAlpha
         }
     }
 
@@ -42,7 +42,7 @@ struct FormRowLabelStyle: LabelStyle {
         if role == .destructive {
             return .compound.textCriticalPrimary
         } else {
-            return .compound.iconSecondary
+            return .compound.iconTertiaryAlpha
         }
     }
 

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

@@ -1,38 +0,0 @@
-//
-// 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
-
-extension View {
-    /// Applies a standard style to forms.
-    func elementFormStyle() -> some View {
-        scrollContentBackground(.hidden)
-            .background(Color.element.formBackground.ignoresSafeArea())
-    }
-    
-    /// Applies a standard style for form header text.
-    func formSectionHeader() -> some View {
-        foregroundColor(.compound.textSecondary)
-            .font(.compound.bodyXS)
-    }
-    
-    /// Applies a standard style for form sections.
-    func formSectionStyle() -> some View {
-        listRowSeparator(.hidden)
-            .listRowInsets(FormRow.insets)
-            .listRowBackground(Color.element.formRowBackground)
-    }
-}