Procházet zdrojové kódy

Restyle home feature shortcut cards to match reference design

Update Role, Company, and Skill tiles with outline SF Symbols, corporate
blue and slate secondary colors, pastel icon wells, light border, softer
shadow, and subtitle row with trailing arrow. Increase padding and card
spacing.

Co-authored-by: Cursor <cursoragent@cursor.com>
AhtashamShahzad1 před 2 měsíci
rodič
revize
ac4b4c47c0
1 změnil soubory, kde provedl 54 přidání a 35 odebrání
  1. 54 35
      App for Indeed/Views/DashboardView.swift

+ 54 - 35
App for Indeed/Views/DashboardView.swift

@@ -312,14 +312,14 @@ final class DashboardView: NSView, NSTextFieldDelegate {
 
     private func configureFeatureShortcutCards() {
         featureCardsRow.orientation = .horizontal
-        featureCardsRow.spacing = 12
+        featureCardsRow.spacing = 16
         featureCardsRow.distribution = .fillEqually
         featureCardsRow.alignment = .top
         featureCardsRow.translatesAutoresizingMaskIntoConstraints = false
 
         let specs: [(symbol: String, title: String, subtitle: String, action: Selector)] = [
-            ("briefcase.fill", "Role", "Explore similar or better job roles", #selector(didTapFeatureRole)),
-            ("building.2.fill", "Company", "Find opportunities at other companies", #selector(didTapFeatureCompany)),
+            ("briefcase", "Role", "Explore similar or better job roles", #selector(didTapFeatureRole)),
+            ("building.2", "Company", "Find opportunities at other companies", #selector(didTapFeatureCompany)),
             ("chevron.left.forwardslash.chevron.right", "Skill", "Match jobs that fit your skills", #selector(didTapFeatureSkill))
         ]
         for spec in specs {
@@ -2540,8 +2540,9 @@ private struct OpenAIAPIErrorResponse: Codable {
     }
 }
 
-/// Home welcome row: three tappable shortcuts that seed the main search field (matches the reference dashboard tiles).
+/// Home welcome row: three tappable shortcuts that seed the main search field (reference: white cards, pastel icon well, arrow at bottom trailing).
 private final class FeatureShortcutCardView: NSView {
+    private static let cardCornerRadius: CGFloat = 14
     private weak var actionTarget: AnyObject?
     private var actionSelector: Selector
 
@@ -2551,37 +2552,44 @@ private final class FeatureShortcutCardView: NSView {
         super.init(frame: .zero)
         translatesAutoresizingMaskIntoConstraints = false
         wantsLayer = true
-        layer?.cornerRadius = 14
+        layer?.cornerRadius = Self.cardCornerRadius
         if #available(macOS 11.0, *) {
             layer?.cornerCurve = .continuous
         }
         layer?.backgroundColor = NSColor.white.cgColor
         layer?.masksToBounds = false
-        layer?.shadowColor = NSColor.black.withAlphaComponent(0.12).cgColor
+        layer?.borderWidth = 1
+        // `#EDF2F7` — light card stroke.
+        layer?.borderColor = NSColor(srgbRed: 237 / 255, green: 242 / 255, blue: 247 / 255, alpha: 1).cgColor
+        layer?.shadowColor = NSColor.black.withAlphaComponent(0.06).cgColor
         layer?.shadowOffset = CGSize(width: 0, height: 2)
-        layer?.shadowRadius = 10
+        layer?.shadowRadius = 12
         layer?.shadowOpacity = 1
 
-        let brandBlue = NSColor(srgbRed: 37 / 255, green: 87 / 255, blue: 167 / 255, alpha: 1)
-        let iconWellColor = NSColor(srgbRed: 220 / 255, green: 235 / 255, blue: 252 / 255, alpha: 1)
-        let secondary = NSColor(srgbRed: 118 / 255, green: 118 / 255, blue: 118 / 255, alpha: 1)
+        // `#0047AB` — primary title / icons / arrow.
+        let primaryBlue = NSColor(srgbRed: 0 / 255, green: 71 / 255, blue: 171 / 255, alpha: 1)
+        // `#EBF2FF` — circular icon well.
+        let iconWellColor = NSColor(srgbRed: 235 / 255, green: 242 / 255, blue: 255 / 255, alpha: 1)
+        // `#5D6D7E` — muted description.
+        let secondary = NSColor(srgbRed: 93 / 255, green: 109 / 255, blue: 126 / 255, alpha: 1)
 
+        let iconSize: CGFloat = 48
         let iconHost = NSView()
         iconHost.translatesAutoresizingMaskIntoConstraints = false
         iconHost.wantsLayer = true
         iconHost.layer?.backgroundColor = iconWellColor.cgColor
-        iconHost.layer?.cornerRadius = 22
+        iconHost.layer?.cornerRadius = iconSize / 2
 
         let icon = NSImageView()
         icon.translatesAutoresizingMaskIntoConstraints = false
-        icon.symbolConfiguration = NSImage.SymbolConfiguration(pointSize: 16, weight: .semibold)
+        icon.symbolConfiguration = NSImage.SymbolConfiguration(pointSize: 18, weight: .regular)
         icon.image = NSImage(systemSymbolName: symbolName, accessibilityDescription: nil)
-        icon.contentTintColor = brandBlue
+        icon.contentTintColor = primaryBlue
         iconHost.addSubview(icon)
 
         let titleField = NSTextField(wrappingLabelWithString: title)
         titleField.font = .systemFont(ofSize: 15, weight: .bold)
-        titleField.textColor = brandBlue
+        titleField.textColor = primaryBlue
         titleField.maximumNumberOfLines = 1
         titleField.isEditable = false
         titleField.isBordered = false
@@ -2589,50 +2597,60 @@ private final class FeatureShortcutCardView: NSView {
         titleField.alignment = .left
 
         let subtitleField = NSTextField(wrappingLabelWithString: subtitle)
-        subtitleField.font = .systemFont(ofSize: 11, weight: .regular)
+        subtitleField.font = .systemFont(ofSize: 12, weight: .regular)
         subtitleField.textColor = secondary
         subtitleField.maximumNumberOfLines = 2
         subtitleField.isEditable = false
         subtitleField.isBordered = false
         subtitleField.drawsBackground = false
         subtitleField.alignment = .left
-        subtitleField.preferredMaxLayoutWidth = 160
-
-        let textColumn = NSStackView(views: [titleField, subtitleField])
-        textColumn.orientation = .vertical
-        textColumn.spacing = 4
-        textColumn.alignment = .leading
-        textColumn.translatesAutoresizingMaskIntoConstraints = false
-        textColumn.setContentHuggingPriority(.defaultLow, for: .horizontal)
-        textColumn.setContentCompressionResistancePriority(.defaultLow, for: .horizontal)
+        subtitleField.lineBreakMode = .byWordWrapping
+        subtitleField.setContentHuggingPriority(.defaultLow, for: .horizontal)
+        subtitleField.setContentCompressionResistancePriority(.defaultLow, for: .horizontal)
 
         let chevron = NSImageView()
         chevron.translatesAutoresizingMaskIntoConstraints = false
-        chevron.symbolConfiguration = NSImage.SymbolConfiguration(pointSize: 13, weight: .semibold)
+        chevron.symbolConfiguration = NSImage.SymbolConfiguration(pointSize: 12, weight: .semibold)
         chevron.image = NSImage(systemSymbolName: "arrow.right", accessibilityDescription: nil)
-        chevron.contentTintColor = brandBlue
+        chevron.contentTintColor = primaryBlue
         chevron.setContentHuggingPriority(.required, for: .horizontal)
         chevron.setContentCompressionResistancePriority(.required, for: .horizontal)
 
+        let subtitleRow = NSStackView(views: [subtitleField, chevron])
+        subtitleRow.orientation = .horizontal
+        subtitleRow.spacing = 10
+        subtitleRow.alignment = .bottom
+        subtitleRow.distribution = .fill
+        subtitleRow.translatesAutoresizingMaskIntoConstraints = false
+
+        let textColumn = NSStackView(views: [titleField, subtitleRow])
+        textColumn.orientation = .vertical
+        textColumn.spacing = 6
+        textColumn.alignment = .leading
+        textColumn.translatesAutoresizingMaskIntoConstraints = false
+        textColumn.setContentHuggingPriority(.defaultLow, for: .horizontal)
+        textColumn.setContentCompressionResistancePriority(.defaultLow, for: .horizontal)
+
         iconHost.setContentHuggingPriority(.required, for: .horizontal)
         iconHost.setContentCompressionResistancePriority(.required, for: .horizontal)
 
-        let row = NSStackView(views: [iconHost, textColumn, chevron])
+        let row = NSStackView(views: [iconHost, textColumn])
         row.orientation = .horizontal
-        row.spacing = 12
+        row.spacing = 16
         row.alignment = .centerY
         row.distribution = .fill
         row.translatesAutoresizingMaskIntoConstraints = false
         addSubview(row)
 
+        let inset: CGFloat = 22
         NSLayoutConstraint.activate([
-            row.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 14),
-            row.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -14),
-            row.topAnchor.constraint(equalTo: topAnchor, constant: 16),
-            row.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -16),
+            row.leadingAnchor.constraint(equalTo: leadingAnchor, constant: inset),
+            row.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -inset),
+            row.topAnchor.constraint(equalTo: topAnchor, constant: inset),
+            row.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -inset),
 
-            iconHost.widthAnchor.constraint(equalToConstant: 44),
-            iconHost.heightAnchor.constraint(equalToConstant: 44),
+            iconHost.widthAnchor.constraint(equalToConstant: iconSize),
+            iconHost.heightAnchor.constraint(equalToConstant: iconSize),
             icon.centerXAnchor.constraint(equalTo: iconHost.centerXAnchor),
             icon.centerYAnchor.constraint(equalTo: iconHost.centerYAnchor)
         ])
@@ -2651,7 +2669,8 @@ private final class FeatureShortcutCardView: NSView {
         super.layout()
         guard let layer = layer, bounds.width > 0, bounds.height > 0 else { return }
         let r = bounds
-        layer.shadowPath = CGPath(roundedRect: r, cornerWidth: 14, cornerHeight: 14, transform: nil)
+        let cr = Self.cardCornerRadius
+        layer.shadowPath = CGPath(roundedRect: r, cornerWidth: cr, cornerHeight: cr, transform: nil)
     }
 
     override func mouseDown(with event: NSEvent) {