Fix #1501, fix #1979: Add device screen UI polish.

- Add styling for segmented control on iOS13 devices.
- Make password comment text has red color
- Description in Japanese language was missing.

All attributed texts are now optional, if they fail a regular string
will be shown.

Client/Frontend/Sync/SyncAddDeviceViewController.swift

@@ -138,11 +138,16 @@ class SyncAddDeviceViewController: SyncViewController {
     func setupVisuals() {
         modeControl = UISegmentedControl(items: [Strings.QRCode, Strings.CodeWords])
         modeControl.translatesAutoresizingMaskIntoConstraints = false
-        modeControl.tintColor = BraveUX.BraveOrange
         modeControl.selectedSegmentIndex = 0
         modeControl.addTarget(self, action: #selector(SEL_changeMode), for: .valueChanged)
         modeControl.isHidden = deviceType == .computer
         modeControl.setContentCompressionResistancePriority(.defaultHigh, for: .vertical)
+
+        if #available(iOS 13.0, *) {
+            modeControl.selectedSegmentTintColor = BraveUX.BraveOrange
+        } else {
+            modeControl.tintColor = BraveUX.BraveOrange
+        }
         stackView.addArrangedSubview(modeControl)
 
         let titleDescriptionStackView = UIStackView()
@@ -225,19 +230,37 @@ class SyncAddDeviceViewController: SyncViewController {
         titleLabel.text = isFirstIndex ? Strings.SyncAddDeviceScan : Strings.SyncAddDeviceWords
 
         if isFirstIndex {
-            descriptionLabel.text = Strings.SyncAddDeviceScanDescription
+            let description = Strings.SyncAddDeviceScanDescription
+            let attributedDescription = NSMutableAttributedString(string: description)
+
+            if let lastSentenceRange = lastSentenceRange(text: description) {
+                attributedDescription.addAttribute(.foregroundColor, value: BraveUX.Red, range: lastSentenceRange)
+            }
+
+            descriptionLabel.attributedText = attributedDescription
         } else {
             // The button name should be the same as in codewords instructions.
             let buttonName = Strings.ScanSyncCode
             let addDeviceWords = String(format: Strings.SyncAddDeviceWordsDescription, buttonName)
+            let description = NSMutableAttributedString(string: addDeviceWords)
             let fontSize = descriptionLabel.font.pointSize
 
-            // For codewords instructions copy, we want to bold the button name which needs to be tapped.
-            descriptionLabel.attributedText =
-                addDeviceWords.makePartiallyBoldAttributedString(stringToBold: buttonName, boldTextSize: fontSize)
+            let boldRange = (addDeviceWords as NSString).range(of: buttonName)
+            description.addAttribute(.font, value: UIFont.boldSystemFont(ofSize: fontSize), range: boldRange)
+
+            if let lastSentenceRange = lastSentenceRange(text: addDeviceWords) {
+                description.addAttribute(.foregroundColor, value: BraveUX.Red, range: lastSentenceRange)
+            }
+
+            descriptionLabel.attributedText = description
         }
     }
 
+    private func lastSentenceRange(text: String) -> NSRange? {
+        guard let lastSentence = text.split(separator: "\n").last else { return nil }
+        return (text as NSString).range(of: String(lastSentence))
+    }
+
     @objc func SEL_showCodewords() {
         modeControl.selectedSegmentIndex = 1
         enterWordsButton.isHidden = true

Shared/Extensions/StringExtensions.swift

@@ -102,19 +102,6 @@ extension String {
         return cleaned.trimmingCharacters(in: .whitespacesAndNewlines).components(separatedBy: string)
     }
 
-    /// Makes a part of the string bold and returns a NSAttributedString.
-    /// Text size must be provided for bold system font and to make font size the same as rest of the string.
-    public func makePartiallyBoldAttributedString(stringToBold text: String, boldTextSize: CGFloat) -> NSAttributedString? {
-        let addWordsDescriptionBolded = NSMutableAttributedString(string: self)
-        guard let rangeOfBoldedText = self.range(of: text) else { return nil }
-        // NSMutableAttributedString still uses NSRange, a conversion from Swift's range is required.
-        let nsRangeOfBoldedText = NSRange(rangeOfBoldedText, in: self)
-        // Make sure we use the same font size for the bolded text.
-        let attributes: [NSAttributedString.Key: Any] = [.font: UIFont.boldSystemFont(ofSize: boldTextSize)]
-        addWordsDescriptionBolded.setAttributes(attributes, range: nsRangeOfBoldedText)
-        return addWordsDescriptionBolded
-    }
-
     /*
      Truncates the string to the specified length number of characters and appends an optional trailing string if longer.
      - Parameter length: Desired maximum lengths of a string