Ref brave/brave-ios#8417: URL bar revamp design improvements (brave/b…

…rave-ios#8480)

- Bumps the URL font to `body` (17pt)
- Adjusts the toolbar icons to be more inline with design, and makes the bookmark button feel less out of place
- Fixes the voice search/QR code icons which didn't get updated browser colors accidentally

Sources/Brave/Frontend/Browser/Toolbars/UrlBar/TabLocationView.swift

@@ -163,7 +163,7 @@ class TabLocationView: UIView {
     urlDisplayLabel.setContentCompressionResistancePriority(UILayoutPriority(rawValue: 250), for: .horizontal)
     urlDisplayLabel.setContentCompressionResistancePriority(.required, for: .vertical)
     urlDisplayLabel.accessibilityIdentifier = "url"
-    urlDisplayLabel.font = .preferredFont(forTextStyle: .subheadline)
+    urlDisplayLabel.font = .preferredFont(forTextStyle: .body)
     urlDisplayLabel.backgroundColor = .clear
     urlDisplayLabel.clipsToBounds = true
     urlDisplayLabel.lineBreakMode = .byClipping
@@ -369,7 +369,7 @@ class TabLocationView: UIView {
   private func updateForTraitCollection() {
     let clampedTraitCollection = traitCollection.clampingSizeCategory(maximum: .accessibilityLarge)
     let toolbarTraitCollection = UITraitCollection(preferredContentSizeCategory: traitCollection.toolbarButtonContentSizeCategory)
-    urlDisplayLabel.font = .preferredFont(forTextStyle: .subheadline, compatibleWith: clampedTraitCollection)
+    urlDisplayLabel.font = .preferredFont(forTextStyle: .body, compatibleWith: clampedTraitCollection)
     placeholderLabel.font = urlDisplayLabel.font
     let pointSize = UIFont.preferredFont(
       forTextStyle: .footnote,

Sources/Brave/Frontend/Browser/Toolbars/UrlBar/TopToolbarView.swift

@@ -45,7 +45,6 @@ class TopToolbarView: UIView, ToolbarProtocol {
     static let locationPadding: CGFloat = 8
     static let locationHeight: CGFloat = 44
     static let textFieldCornerRadius: CGFloat = 10
-    static let buttonWidth: CGFloat = 32
   }
 
   // MARK: URLBarButton
@@ -143,8 +142,9 @@ class TopToolbarView: UIView, ToolbarProtocol {
     $0.setImage(UIImage(braveSystemNamed: "leo.product.bookmarks"), for: .normal)
     $0.accessibilityLabel = Strings.bookmarksMenuItem
     $0.addTarget(self, action: #selector(didClickBookmarkButton), for: .touchUpInside)
+    $0.contentEdgeInsets = .init(top: 4, left: 4, bottom: 4, right: 4)
     $0.snp.makeConstraints {
-      $0.width.greaterThanOrEqualTo(UX.buttonWidth)
+      $0.size.greaterThanOrEqualTo(32)
     }
   }
 
@@ -188,7 +188,7 @@ class TopToolbarView: UIView, ToolbarProtocol {
 
   private let shieldsRewardsStack = UIStackView().then {
     $0.distribution = .fillEqually
-    $0.spacing = 0 // buttons contain padding
+    $0.spacing = 8
     $0.setContentHuggingPriority(.required, for: .horizontal)
   }
 
@@ -237,14 +237,15 @@ class TopToolbarView: UIView, ToolbarProtocol {
     button.accessibilityLabel = Strings.bravePanel
     button.imageView?.adjustsImageSizeForAccessibilityContentSizeCategory = true
     button.accessibilityIdentifier = "urlBar-shieldsButton"
+    button.contentEdgeInsets = .init(top: 4, left: 5, bottom: 4, right: 5)
     return button
   }()
 
   private(set) lazy var rewardsButton: RewardsButton = {
     let button = RewardsButton()
     button.addTarget(self, action: #selector(didTapBraveRewardsButton), for: .touchUpInside)
     // Visual centering
-    button.contentEdgeInsets = .init(top: 1, left: 0, bottom: 1, right: 0)
+    button.contentEdgeInsets = .init(top: 4, left: 4, bottom: 6, right: 4)
     return button
   }()
 
@@ -378,17 +379,15 @@ class TopToolbarView: UIView, ToolbarProtocol {
 
   private func updateForTraitCollection() {
     let toolbarSizeCategory = traitCollection.toolbarButtonContentSizeCategory
-    let pointSize = UIFont.preferredFont(forTextStyle: .headline, compatibleWith: .init(preferredContentSizeCategory: toolbarSizeCategory)).lineHeight
+    let pointSize = UIFontMetrics(forTextStyle: .body).scaledValue(for: 28, compatibleWith: .init(preferredContentSizeCategory: toolbarSizeCategory))
     shieldsButton.snp.remakeConstraints {
-      $0.width.greaterThanOrEqualTo(UX.buttonWidth)
-      $0.height.equalTo(pointSize)
+      $0.size.equalTo(pointSize)
     }
     rewardsButton.snp.remakeConstraints {
-      $0.width.greaterThanOrEqualTo(UX.buttonWidth)
-      $0.height.equalTo(pointSize)
+      $0.size.equalTo(pointSize)
     }
     let clampedTraitCollection = traitCollection.clampingSizeCategory(maximum: .accessibilityLarge)
-    locationTextField?.font = .preferredFont(forTextStyle: .subheadline, compatibleWith: clampedTraitCollection)
+    locationTextField?.font = .preferredFont(forTextStyle: .body, compatibleWith: clampedTraitCollection)
   }
 
   private func setupConstraints() {
@@ -416,7 +415,7 @@ class TopToolbarView: UIView, ToolbarProtocol {
   override func layoutSubviews() {
     super.layoutSubviews()
     // Increase the inset of the main stack view if there's no additional space from safe areas
-    let horizontalInset: CGFloat = safeAreaInsets.left > 0 ? 0 : UX.locationPadding
+    let horizontalInset: CGFloat = safeAreaInsets.left > 0 ? 0 : 12
     mainStackView.layoutMargins = .init(top: 0, left: horizontalInset, bottom: 0, right: horizontalInset)
 
     locationContainer.layoutIfNeeded()
@@ -446,6 +445,11 @@ class TopToolbarView: UIView, ToolbarProtocol {
     locationTextField?.backgroundColor = browserColors.containerBackground
     locationTextField?.textColor = browserColors.textPrimary
     locationTextField?.attributedPlaceholder = makePlaceholder(colors: browserColors)
+    for button in [qrCodeButton, voiceSearchButton] {
+      button.primaryTintColor = browserColors.iconDefault
+      button.disabledTintColor = browserColors.iconDisabled
+      button.selectedTintColor = browserColors.iconActive
+    }
   }
 
   /// Created whenever the location bar on top is selected