Improve validation error display (trustwallet#704)

* Correct the textLabel color * Use Colors.red * Add error to AppStyle * Use lighter red * Adjust font size/ cell height * Show validation error in the footer * Add cases for form footer/header * Prevent crash * update to use AppStyle * Use new footer * Make sure all errors show * Move setUpFooter func to avoid repeating code * Use same font for both error and footer * Revert back to default footer * Show validation errors in footer conditionally * Requested changes * Fix SwiftLint warning * Update FormAppearance.swift Fix spacing * Change naming
aimdreamboy · May 8, 2018 · a0f81d7 · a0f81d7
1 parent 235c223
commit a0f81d7
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 19 deletions.
diff --git a/Trust/Style/AppStyle.swift b/Trust/Style/AppStyle.swift
@@ -8,6 +8,8 @@ enum AppStyle {
     case paragraph
     case paragraphLight
     case largeAmount
+    case error
+    case formHeader
 
     var font: UIFont {
         switch self {
@@ -21,6 +23,10 @@ enum AppStyle {
             return UIFont.systemFont(ofSize: 15, weight: .light)
         case .largeAmount:
             return UIFont.systemFont(ofSize: 20, weight: .medium)
+        case .error:
+            return UIFont.systemFont(ofSize: 12, weight: .light)
+        case .formHeader:
+            return UIFont.systemFont(ofSize: 14, weight: .regular)
         }
     }
 
@@ -32,6 +38,10 @@ enum AppStyle {
             return Colors.charcoal
         case .largeAmount:
             return UIColor.black // Usually colors based on the amount
+        case .error:
+            return Colors.errorRed
+        case .formHeader:
+            return Colors.doveGray
         }
     }
 }
diff --git a/Trust/Style/Colors.swift b/Trust/Style/Colors.swift
@@ -6,6 +6,7 @@ struct Colors {
     static let darkBlue = UIColor(hex: "3375BB")
     static let blue = UIColor(hex: "2e91db")
     static let red = UIColor(hex: "f7506c")
+    static let errorRed = UIColor(hex: "E32146")
     static let veryLightRed = UIColor(hex: "FFF4F4")
     static let veryLightOrange = UIColor(hex: "FFECC9")
     static let green = UIColor(hex: "2fbb4f")
@@ -14,6 +15,7 @@ struct Colors {
     static let veryVeryLightGray = UIColor(hex: "fafafa") // P.S. Creative naming
     static let gray = UIColor.gray
     static let darkGray = UIColor(hex: "606060")
+    static let doveGray = UIColor(hex: "6e6e72")
     static let black = UIColor(hex: "313849")
     static let whisper = UIColor(hex: "EBEAEA")
     static let charcoal = UIColor(hex: "464646")

diff --git a/Trust/UI/FormAppearance.swift b/Trust/UI/FormAppearance.swift
@@ -44,18 +44,20 @@ struct AppFormAppearance {
     }
 
     static func onRowValidationChanged(baseCell: BaseCell, row: BaseRow) {
-        guard let rowIndex = row.indexPath?.row, let rowSection = row.section else {
-            return
-        }
+        guard let rowIndex = row.indexPath?.row, let rowSection = row.section else { return }
+
         while rowSection.count > rowIndex + 1 && rowSection[rowIndex  + 1] is LabelRow {
             rowSection.remove(at: rowIndex + 1)
         }
+
         if !row.isValid {
             for (index, validationMsg) in row.validationErrors.map({ $0.msg }).enumerated() {
                 let labelRow = LabelRow {
                     $0.title = validationMsg
-                    $0.cell.height = { 20 }
-                    $0.cell.textLabel?.textColor = .red
+                    $0.cell.height = { 40 }
+                }.cellUpdate { cell, _ in
+                    cell.textLabel?.font = AppStyle.error.font
+                    cell.textLabel?.textColor = AppStyle.error.textColor
                 }
                 row.section?.insert(labelRow, at: row.indexPath!.row + index + 1)
             }

diff --git a/Trust/Wallet/ViewControllers/ImportWalletViewController.swift b/Trust/Wallet/ViewControllers/ImportWalletViewController.swift
@@ -23,13 +23,6 @@ class ImportWalletViewController: FormViewController {
         static let mnemonic = "mnemonic"
     }
 
-    lazy var pargraphStyle: NSMutableParagraphStyle = {
-        let style = NSMutableParagraphStyle()
-        style.lineHeightMultiple = 1.25
-        style.alignment = .natural
-        return style
-    }()
-
     var segmentRow: SegmentedRow<String>? {
         return form.rowBy(tag: Values.segment)
     }
@@ -82,13 +75,10 @@ class ImportWalletViewController: FormViewController {
             +++ Section {
                 var header = HeaderFooterView<InfoHeaderView>(.class)
                 header.height = { 90 }
-                header.onSetupView = {[weak self] (view, section) -> Void in
-                    guard let strongSelf = self else { return }
-                    view.label.attributedText = NSAttributedString(string: "Importing wallet as easy as creating", attributes: [
-                        NSAttributedStringKey.font: UIFont.systemFont(ofSize: 14, weight: UIFont.Weight.regular),
-                        NSAttributedStringKey.foregroundColor: UIColor(hex: "6e6e72"),
-                        NSAttributedStringKey.paragraphStyle: strongSelf.pargraphStyle,
-                    ])
+                header.onSetupView = { (view, section) -> Void in
+                    view.label.textColor = AppStyle.formHeader.textColor
+                    view.label.font = AppStyle.formHeader.font
+                    view.label.text = NSLocalizedString("importing.wallet.message", value: "Importing wallet as easy as creating", comment: "")
                     view.logoImageView.image = R.image.create_wallet_import()
                 }
                 $0.header = header