Преглед на файлове

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 преди 2 месеца
родител
ревизия
ac4b4c47c0
променени са 1 файла, в които са добавени 54 реда и са изтрити 35 реда
  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() {
     private func configureFeatureShortcutCards() {
         featureCardsRow.orientation = .horizontal
         featureCardsRow.orientation = .horizontal
-        featureCardsRow.spacing = 12
+        featureCardsRow.spacing = 16
         featureCardsRow.distribution = .fillEqually
         featureCardsRow.distribution = .fillEqually
         featureCardsRow.alignment = .top
         featureCardsRow.alignment = .top
         featureCardsRow.translatesAutoresizingMaskIntoConstraints = false
         featureCardsRow.translatesAutoresizingMaskIntoConstraints = false
 
 
         let specs: [(symbol: String, title: String, subtitle: String, action: Selector)] = [
         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))
             ("chevron.left.forwardslash.chevron.right", "Skill", "Match jobs that fit your skills", #selector(didTapFeatureSkill))
         ]
         ]
         for spec in specs {
         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 final class FeatureShortcutCardView: NSView {
+    private static let cardCornerRadius: CGFloat = 14
     private weak var actionTarget: AnyObject?
     private weak var actionTarget: AnyObject?
     private var actionSelector: Selector
     private var actionSelector: Selector
 
 
@@ -2551,37 +2552,44 @@ private final class FeatureShortcutCardView: NSView {
         super.init(frame: .zero)
         super.init(frame: .zero)
         translatesAutoresizingMaskIntoConstraints = false
         translatesAutoresizingMaskIntoConstraints = false
         wantsLayer = true
         wantsLayer = true
-        layer?.cornerRadius = 14
+        layer?.cornerRadius = Self.cardCornerRadius
         if #available(macOS 11.0, *) {
         if #available(macOS 11.0, *) {
             layer?.cornerCurve = .continuous
             layer?.cornerCurve = .continuous
         }
         }
         layer?.backgroundColor = NSColor.white.cgColor
         layer?.backgroundColor = NSColor.white.cgColor
         layer?.masksToBounds = false
         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?.shadowOffset = CGSize(width: 0, height: 2)
-        layer?.shadowRadius = 10
+        layer?.shadowRadius = 12
         layer?.shadowOpacity = 1
         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()
         let iconHost = NSView()
         iconHost.translatesAutoresizingMaskIntoConstraints = false
         iconHost.translatesAutoresizingMaskIntoConstraints = false
         iconHost.wantsLayer = true
         iconHost.wantsLayer = true
         iconHost.layer?.backgroundColor = iconWellColor.cgColor
         iconHost.layer?.backgroundColor = iconWellColor.cgColor
-        iconHost.layer?.cornerRadius = 22
+        iconHost.layer?.cornerRadius = iconSize / 2
 
 
         let icon = NSImageView()
         let icon = NSImageView()
         icon.translatesAutoresizingMaskIntoConstraints = false
         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.image = NSImage(systemSymbolName: symbolName, accessibilityDescription: nil)
-        icon.contentTintColor = brandBlue
+        icon.contentTintColor = primaryBlue
         iconHost.addSubview(icon)
         iconHost.addSubview(icon)
 
 
         let titleField = NSTextField(wrappingLabelWithString: title)
         let titleField = NSTextField(wrappingLabelWithString: title)
         titleField.font = .systemFont(ofSize: 15, weight: .bold)
         titleField.font = .systemFont(ofSize: 15, weight: .bold)
-        titleField.textColor = brandBlue
+        titleField.textColor = primaryBlue
         titleField.maximumNumberOfLines = 1
         titleField.maximumNumberOfLines = 1
         titleField.isEditable = false
         titleField.isEditable = false
         titleField.isBordered = false
         titleField.isBordered = false
@@ -2589,50 +2597,60 @@ private final class FeatureShortcutCardView: NSView {
         titleField.alignment = .left
         titleField.alignment = .left
 
 
         let subtitleField = NSTextField(wrappingLabelWithString: subtitle)
         let subtitleField = NSTextField(wrappingLabelWithString: subtitle)
-        subtitleField.font = .systemFont(ofSize: 11, weight: .regular)
+        subtitleField.font = .systemFont(ofSize: 12, weight: .regular)
         subtitleField.textColor = secondary
         subtitleField.textColor = secondary
         subtitleField.maximumNumberOfLines = 2
         subtitleField.maximumNumberOfLines = 2
         subtitleField.isEditable = false
         subtitleField.isEditable = false
         subtitleField.isBordered = false
         subtitleField.isBordered = false
         subtitleField.drawsBackground = false
         subtitleField.drawsBackground = false
         subtitleField.alignment = .left
         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()
         let chevron = NSImageView()
         chevron.translatesAutoresizingMaskIntoConstraints = false
         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.image = NSImage(systemSymbolName: "arrow.right", accessibilityDescription: nil)
-        chevron.contentTintColor = brandBlue
+        chevron.contentTintColor = primaryBlue
         chevron.setContentHuggingPriority(.required, for: .horizontal)
         chevron.setContentHuggingPriority(.required, for: .horizontal)
         chevron.setContentCompressionResistancePriority(.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.setContentHuggingPriority(.required, for: .horizontal)
         iconHost.setContentCompressionResistancePriority(.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.orientation = .horizontal
-        row.spacing = 12
+        row.spacing = 16
         row.alignment = .centerY
         row.alignment = .centerY
         row.distribution = .fill
         row.distribution = .fill
         row.translatesAutoresizingMaskIntoConstraints = false
         row.translatesAutoresizingMaskIntoConstraints = false
         addSubview(row)
         addSubview(row)
 
 
+        let inset: CGFloat = 22
         NSLayoutConstraint.activate([
         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.centerXAnchor.constraint(equalTo: iconHost.centerXAnchor),
             icon.centerYAnchor.constraint(equalTo: iconHost.centerYAnchor)
             icon.centerYAnchor.constraint(equalTo: iconHost.centerYAnchor)
         ])
         ])
@@ -2651,7 +2669,8 @@ private final class FeatureShortcutCardView: NSView {
         super.layout()
         super.layout()
         guard let layer = layer, bounds.width > 0, bounds.height > 0 else { return }
         guard let layer = layer, bounds.width > 0, bounds.height > 0 else { return }
         let r = bounds
         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) {
     override func mouseDown(with event: NSEvent) {