Merge pull request #1194 from Automattic/charlie/magic-link-ui

Magic Links: UI Updates Mk1
Automattic · Jul 24, 2024 · 7294414 · 7294414
2 parents cfbf7c1 + a670f8e
commit 7294414
Show file tree

Hide file tree

Showing 6 changed files with 90 additions and 83 deletions.
diff --git a/Simplenote/AuthViewController+Swift.swift b/Simplenote/AuthViewController+Swift.swift
@@ -20,16 +20,23 @@ extension AuthViewController {
         // Secondary Action
         secondaryActionButton.contentTintColor = .simplenoteBrandColor
 
-        // Toggle Signup: Tip
-        switchTipField.textColor = .simplenoteTertiaryTextColor
-
-        // Toggle Signup: Action
-        switchActionButton.contentTintColor = .simplenoteBrandColor
-
         // WordPress SSO
-        wordPressSSOButton.image = NSImage(named: .wordPressLogo)?.tinted(with: .simplenoteBrandColor)
         wordPressSSOButton.title = Localization.dotcomSSOAction
-        wordPressSSOButton.contentTintColor = .simplenoteTertiaryTextColor
+        wordPressSSOButton.contentTintColor = .white
+        wordPressSSOContainerView.wantsLayer = true
+        wordPressSSOContainerView.layer?.backgroundColor = NSColor.simplenoteWPBlue50Color.cgColor
+        wordPressSSOContainerView.layer?.cornerRadius = 5
+
+        setupActionsSeparatorView()
+    }
+
+    private func setupActionsSeparatorView() {
+        leadingSeparatorView.wantsLayer = true
+        leadingSeparatorView.layer?.backgroundColor = NSColor.lightGray.cgColor
+        trailingSeparatorView.wantsLayer = true
+        trailingSeparatorView.layer?.backgroundColor = NSColor.lightGray.cgColor
+
+        separatorLabel.textColor = .lightGray
     }
 }
 
@@ -67,8 +74,6 @@ extension AuthViewController {
     func refreshButtonTitles() {
         actionButton.title          = mode.primaryActionText
         secondaryActionButton.title = mode.secondaryActionText?.uppercased() ?? ""
-        switchTipField.stringValue  = mode.switchActionTip.uppercased()
-        switchActionButton.title    = mode.switchActionText.uppercased()
     }
 
     /// Makes sure unused components (in the current mode) are effectively disabled
@@ -102,7 +107,7 @@ extension AuthViewController {
         secondaryActionButton.alphaValue        = mode.secondaryActionFieldAlpha
         wordPressSSOButton.alphaValue           = mode.wordPressSSOFieldAlpha
 
-        switchAuthenticationView.isHidden                 = !mode.isSwitchVisible
+        actionsSeparatorView.isHidden = !mode.showActionSeparator
     }
 
     /// Animates Visible / Invisible components, based on the specified state
@@ -167,11 +172,6 @@ extension AuthViewController {
         performSelector(onMainThread: secondaryActionSelector, with: nil, waitUntilDone: false)
     }
 
-    @IBAction
-    func switchAuthenticationMode(_ sender: Any) {
-        containingNavigationController?.push(nextViewController())
-    }
-
     private func nextViewController() -> AuthViewController {
         let nextMode = mode.nextMode()
 
@@ -181,6 +181,11 @@ extension AuthViewController {
 
         return nextVC
     }
+
+    @objc
+    func pushEmailLoginView() {
+        containingNavigationController?.push(nextViewController())
+    }
 }
 
 

diff --git a/Simplenote/AuthViewController.h b/Simplenote/AuthViewController.h
@@ -17,11 +17,12 @@
 @property (nonatomic, strong) IBOutlet NSButton                     *actionButton;
 @property (nonatomic, strong) IBOutlet NSProgressIndicator          *actionProgress;
 @property (nonatomic, strong) IBOutlet NSButton                     *secondaryActionButton;
-@property (nonatomic, strong) IBOutlet NSTextField                  *switchTipField;
-@property (nonatomic, strong) IBOutlet NSButton                     *switchActionButton;
 @property (nonatomic, strong) IBOutlet NSView                       *wordPressSSOContainerView;
 @property (nonatomic, strong) IBOutlet NSButton                     *wordPressSSOButton;
-@property (weak) IBOutlet NSView *switchAuthenticationView;
+@property (weak) IBOutlet NSView *actionsSeparatorView;
+@property (weak) IBOutlet NSView *leadingSeparatorView;
+@property (weak) IBOutlet NSTextField *separatorLabel;
+@property (weak) IBOutlet NSView *trailingSeparatorView;
 
 @property (nonatomic, strong) IBOutlet NSLayoutConstraint           *passwordFieldHeightConstraint;
 @property (nonatomic, strong) IBOutlet NSLayoutConstraint           *secondaryActionHeightConstraint;

diff --git a/Simplenote/AuthViewController.m b/Simplenote/AuthViewController.m
@@ -81,7 +81,6 @@ - (void)setInterfaceEnabled:(BOOL)enabled {
     [self.passwordField setEnabled:enabled];
     [self.actionButton setEnabled:enabled];
     [self.secondaryActionButton setEnabled:enabled];
-    [self.switchActionButton setEnabled:enabled];
     [self.wordPressSSOButton setEnabled:enabled];
 }