#181: Update verification modal.

element-hq · Sep 15, 2022 · 385e30f · 385e30f
1 parent e5eba32
commit 385e30f
Show file tree

Hide file tree

Showing 8 changed files with 157 additions and 119 deletions.
diff --git a/DesignKit/Sources/Buttons/ElementActionButtonStyle.swift b/DesignKit/Sources/Buttons/ElementActionButtonStyle.swift
@@ -34,12 +34,14 @@ public struct ElementActionButtonStyle: ButtonStyle {
     public var size: ElementControlSize
     public var color: Color
 
-    private var verticalPadding: CGFloat { size == .xLarge ? 12 : 4 }
+    private var cornerRadius: CGFloat { size == .xLarge ? 14 : 8 }
+    private var verticalPadding: CGFloat { size == .xLarge ? 14 : 4 }
     private var maxWidth: CGFloat? { size == .xLarge ? .infinity : nil }
 
     private var fontColor: Color {
         // Always white unless disabled with a dark theme.
-        .white.opacity(colorScheme == .dark && !isEnabled ? 0.3 : 1.0)
+        Color.element.systemPrimaryBackground
+            .opacity(colorScheme == .dark && !isEnabled ? 0.3 : 1.0)
     }
 
     public init(size: ElementControlSize = .regular, color: Color = .element.accent) {
@@ -53,9 +55,9 @@ public struct ElementActionButtonStyle: ButtonStyle {
             .padding(.vertical, verticalPadding)
             .frame(maxWidth: maxWidth)
             .foregroundColor(fontColor)
-            .font(.element.body)
+            .font(.element.bodyBold)
             .background(color.opacity(backgroundOpacity(when: configuration.isPressed)))
-            .cornerRadius(8.0)
+            .cornerRadius(cornerRadius)
     }
 
     private func backgroundOpacity(when isPressed: Bool) -> CGFloat {

diff --git a/ElementX/Resources/Localizations/en.lproj/Untranslated.strings b/ElementX/Resources/Localizations/en.lproj/Untranslated.strings
@@ -3,6 +3,7 @@
 
 "action_confirm" = "Confirm";
 "action_next" = "Next";
+"action_match" = "Match";
 
 "screenshot_detected_title" = "You took a screenshot";
 "screenshot_detected_message" = "Would you like to submit a bug report?";
@@ -17,6 +18,8 @@
 
 "session_verification_banner_title" = "Help keep your messages secure";
 "session_verification_banner_message" = "Looks like you’re using a new device. Verify its you.";
+"session_verification_screen_emojis_title" = "Lets check if these";
+"session_verification_screen_emojis_message" = "Open Element on one of your other sessions to compare.";
 
 // MARK: - Authentication
 

diff --git a/ElementX/Sources/Generated/Strings+Untranslated.swift b/ElementX/Sources/Generated/Strings+Untranslated.swift
@@ -12,6 +12,8 @@ import Foundation
 extension ElementL10n {
   /// Confirm
   public static let actionConfirm = ElementL10n.tr("Untranslated", "action_confirm")
+  /// Match
+  public static let actionMatch = ElementL10n.tr("Untranslated", "action_match")
   /// Next
   public static let actionNext = ElementL10n.tr("Untranslated", "action_next")
   /// Forgot password
@@ -54,6 +56,10 @@ extension ElementL10n {
   public static let sessionVerificationBannerMessage = ElementL10n.tr("Untranslated", "session_verification_banner_message")
   /// Help keep your messages secure
   public static let sessionVerificationBannerTitle = ElementL10n.tr("Untranslated", "session_verification_banner_title")
+  /// Open Element on one of your other sessions to compare.
+  public static let sessionVerificationScreenEmojisMessage = ElementL10n.tr("Untranslated", "session_verification_screen_emojis_message")
+  /// Lets check if these
+  public static let sessionVerificationScreenEmojisTitle = ElementL10n.tr("Untranslated", "session_verification_screen_emojis_title")
   /// Timeline Style
   public static let settingsTimelineStyle = ElementL10n.tr("Untranslated", "settings_timeline_style")
   /// Untranslated

diff --git a/ElementX/Sources/Screens/HomeScreen/View/HomeScreen.swift b/ElementX/Sources/Screens/HomeScreen/View/HomeScreen.swift
@@ -111,7 +111,7 @@ struct HomeScreen: View {
                     .foregroundColor(.element.systemPrimaryLabel)
                 Text(ElementL10n.sessionVerificationBannerMessage)
                     .font(.element.footnote)
-                    .foregroundColor(.element.systemSecondaryLabel.opacity(0.6))
+                    .foregroundColor(.element.systemSecondaryLabel)
             }
 
             HStack(spacing: 16) {

diff --git a/ElementX/Sources/Screens/SessionVerification/SessionVerificationModels.swift b/ElementX/Sources/Screens/SessionVerification/SessionVerificationModels.swift
@@ -27,12 +27,34 @@ enum SessionVerificationViewModelAction {
 struct SessionVerificationViewState: BindableState {
     var verificationState: SessionVerificationStateMachine.State = .initial
 
-    var shouldDisableDismissButton: Bool {
-        verificationState != .verified
+    var title: String? {
+        switch verificationState {
+        case .showingChallenge:
+            return ElementL10n.sessionVerificationScreenEmojisTitle
+        default:
+            return nil
+        }
     }
 
-    var shouldDisableCancelButton: Bool {
-        verificationState == .verified
+    var message: String {
+        switch verificationState {
+        case .initial:
+            return ElementL10n.verificationOpenOtherToVerify
+        case .requestingVerification:
+            return ElementL10n.verificationRequestWaiting
+        case .acceptingChallenge:
+            return ElementL10n.verificationRequestWaiting
+        case .decliningChallenge:
+            return ElementL10n.verificationRequestWaiting
+        case .cancelling:
+            return ElementL10n.verificationRequestWaiting
+        case .showingChallenge:
+            return ElementL10n.sessionVerificationScreenEmojisMessage
+        case .verified:
+            return ElementL10n.verificationConclusionOkSelfNotice
+        case .cancelled:
+            return ElementL10n.verificationCancelled
+        }
     }
 }
 
@@ -41,6 +63,5 @@ enum SessionVerificationViewAction {
     case restart
     case accept
     case decline
-    case dismiss
-    case cancel
+    case close
 }
diff --git a/ElementX/Sources/Screens/SessionVerification/SessionVerificationViewModel.swift b/ElementX/Sources/Screens/SessionVerification/SessionVerificationViewModel.swift
@@ -74,9 +74,7 @@ class SessionVerificationViewModel: SessionVerificationViewModelType, SessionVer
             stateMachine.processEvent(.requestVerification)
         case .restart:
             stateMachine.processEvent(.restart)
-        case .dismiss:
-            callback?(.finished)
-        case .cancel:
+        case .close:
             guard stateMachine.state == .initial ||
                 stateMachine.state == .verified ||
                 stateMachine.state == .cancelled else {