Jelajahi Sumber

Add hover feedback to the job search bar

Use HoverableView for the search pill and animate fill, brand-tinted border, and shadow on hover to match other controls.

Co-authored-by: Cursor <cursoragent@cursor.com>
AhtashamShahzad1 2 bulan lalu
induk
melakukan
dcf178fd74
1 mengubah file dengan 14 tambahan dan 1 penghapusan
  1. 14 1
      App for Indeed/Views/DashboardView.swift

+ 14 - 1
App for Indeed/Views/DashboardView.swift

@@ -30,6 +30,8 @@ final class DashboardView: NSView, NSTextFieldDelegate {
         static let border = NSColor(srgbRed: 212 / 255, green: 210 / 255, blue: 208 / 255, alpha: 1)
         /// Job search bar outer stroke (charcoal).
         static let searchBarBorder = NSColor(srgbRed: 58 / 255, green: 58 / 255, blue: 58 / 255, alpha: 1)
+        /// Search bar border on hover (brand-tinted, matches focus affordance elsewhere).
+        static let searchBarBorderHover = NSColor(srgbRed: 37 / 255, green: 87 / 255, blue: 167 / 255, alpha: 0.45)
         static let proCardFill = NSColor(srgbRed: 239 / 255, green: 244 / 255, blue: 252 / 255, alpha: 1)
         static let proCardBorder = NSColor(srgbRed: 212 / 255, green: 210 / 255, blue: 208 / 255, alpha: 1)
         static let proAccent = NSColor(srgbRed: 37 / 255, green: 87 / 255, blue: 167 / 255, alpha: 1)
@@ -67,7 +69,7 @@ final class DashboardView: NSView, NSTextFieldDelegate {
     private let greetingLabel = NSTextField(labelWithString: "")
     private let subtitleLabel = NSTextField(labelWithString: "")
     private let searchBarShadowHost = NSView()
-    private let searchCard = NSView()
+    private let searchCard = HoverableView()
     private let jobSearchIcon = NSImageView()
     private let jobKeywordsField = NSTextField()
     private let findJobsButton = HoverableButton()
@@ -593,6 +595,17 @@ final class DashboardView: NSView, NSTextFieldDelegate {
         searchCard.layer?.borderColor = Theme.searchBarBorder.cgColor
         searchCard.layer?.masksToBounds = true
 
+        searchCard.hoverHandler = { [weak self] hovering in
+            guard let self else { return }
+            CATransaction.begin()
+            CATransaction.setAnimationDuration(0.15)
+            self.searchCard.layer?.backgroundColor = (hovering ? Theme.neutralHoverFill : Theme.cardBackground).cgColor
+            self.searchCard.layer?.borderColor = (hovering ? Theme.searchBarBorderHover : Theme.searchBarBorder).cgColor
+            self.searchBarShadowHost.layer?.shadowColor = NSColor.black.withAlphaComponent(hovering ? 0.24 : 0.18).cgColor
+            self.searchBarShadowHost.layer?.shadowRadius = hovering ? 12 : 10
+            CATransaction.commit()
+        }
+
         searchBarShadowHost.addSubview(searchCard)
 
         func configureField(_ field: NSTextField, placeholder: String) {