Explorar el Código

Polish paywall typography.

Refine type scale and spacing across hero, plan cards, trust row, and footer, adding a small styled-label helper for kerning and line spacing.

Co-authored-by: Cursor <cursoragent@cursor.com>
huzaifahayat12 hace 2 meses
padre
commit
8a97950911
Se han modificado 1 ficheros con 62 adiciones y 14 borrados
  1. 62 14
      zoom_app/ViewController.swift

+ 62 - 14
zoom_app/ViewController.swift

@@ -3402,6 +3402,34 @@ class ViewController: NSViewController {
         return label
     }
 
+    private func styledLabel(
+        _ text: String,
+        font: NSFont,
+        color: NSColor,
+        kern: CGFloat? = nil,
+        lineSpacing: CGFloat? = nil
+    ) -> NSTextField {
+        let label = textLabel(text, font: font, color: color)
+        if kern == nil, lineSpacing == nil {
+            return label
+        }
+
+        let paragraph = NSMutableParagraphStyle()
+        paragraph.alignment = label.alignment
+        paragraph.lineBreakMode = .byWordWrapping
+        if let lineSpacing { paragraph.lineSpacing = lineSpacing }
+
+        var attrs: [NSAttributedString.Key: Any] = [
+            .font: font,
+            .foregroundColor: color,
+            .paragraphStyle: paragraph
+        ]
+        if let kern { attrs[.kern] = kern }
+
+        label.attributedStringValue = NSAttributedString(string: text, attributes: attrs)
+        return label
+    }
+
     private func startStoreKit() {
         storeKitStartupTask?.cancel()
         storeKitCoordinator.onEntitlementsChanged = { [weak self] _ in
@@ -3724,7 +3752,7 @@ class ViewController: NSViewController {
         topRow.alignment = .centerY
         topRow.distribution = .fill
         topRow.spacing = 10
-        topRow.addArrangedSubview(textLabel("Meetings Pro", font: NSFont.systemFont(ofSize: 24, weight: .bold), color: primaryText))
+        topRow.addArrangedSubview(textLabel("Meetings Pro", font: NSFont.systemFont(ofSize: 26, weight: .semibold), color: primaryText))
         let topSpacer = NSView()
         topSpacer.translatesAutoresizingMaskIntoConstraints = false
         topRow.addArrangedSubview(topSpacer)
@@ -4085,13 +4113,28 @@ class ViewController: NSViewController {
         card.layer?.backgroundColor = palette.secondaryCardBackground.cgColor
         styleSurface(card, borderColor: palette.inputBorder, borderWidth: 1, shadow: false)
 
-        let eyebrowLabel = textLabel(eyebrow, font: NSFont.systemFont(ofSize: 10, weight: .bold), color: NSColor(calibratedRed: 0.19, green: 0.82, blue: 0.39, alpha: 1))
+        let eyebrowLabel = styledLabel(
+            eyebrow,
+            font: NSFont.systemFont(ofSize: 11, weight: .semibold),
+            color: NSColor(calibratedRed: 0.19, green: 0.82, blue: 0.39, alpha: 0.92),
+            kern: 0.8
+        )
         eyebrowLabel.alignment = .left
 
-        let titleLabel = textLabel(title, font: NSFont.systemFont(ofSize: 16, weight: .bold), color: primaryText)
+        let titleLabel = styledLabel(
+            title,
+            font: NSFont.systemFont(ofSize: 18, weight: .semibold),
+            color: primaryText,
+            lineSpacing: 1
+        )
         titleLabel.alignment = .left
 
-        let subtitleLabel = textLabel(subtitle, font: NSFont.systemFont(ofSize: 12, weight: .medium), color: secondaryText)
+        let subtitleLabel = styledLabel(
+            subtitle,
+            font: NSFont.systemFont(ofSize: 13, weight: .regular),
+            color: secondaryText,
+            lineSpacing: 2
+        )
         subtitleLabel.maximumNumberOfLines = 2
         subtitleLabel.lineBreakMode = .byTruncatingTail
         subtitleLabel.alignment = .left
@@ -4153,8 +4196,8 @@ class ViewController: NSViewController {
         card.layer?.backgroundColor = palette.inputBackground.cgColor
         styleSurface(card, borderColor: palette.inputBorder, borderWidth: 1, shadow: false)
 
-        let titleLabel = textLabel(title, font: NSFont.systemFont(ofSize: 11, weight: .semibold), color: primaryText)
-        let subtitleLabel = textLabel(subtitle, font: NSFont.systemFont(ofSize: 10, weight: .medium), color: secondaryText)
+        let titleLabel = textLabel(title, font: NSFont.systemFont(ofSize: 12, weight: .semibold), color: primaryText)
+        let subtitleLabel = textLabel(subtitle, font: NSFont.systemFont(ofSize: 11, weight: .regular), color: secondaryText)
 
         let stack = NSStackView()
         stack.translatesAutoresizingMaskIntoConstraints = false
@@ -4189,14 +4232,14 @@ class ViewController: NSViewController {
         iconWrap.heightAnchor.constraint(equalToConstant: 24).isActive = true
         styleSurface(iconWrap, borderColor: palette.inputBorder, borderWidth: 1, shadow: false)
 
-        let iconLabel = textLabel(icon, font: NSFont.systemFont(ofSize: 12, weight: .medium), color: accentBlue)
+        let iconLabel = textLabel(icon, font: NSFont.systemFont(ofSize: 13, weight: .medium), color: accentBlue)
         iconWrap.addSubview(iconLabel)
         NSLayoutConstraint.activate([
             iconLabel.centerXAnchor.constraint(equalTo: iconWrap.centerXAnchor),
             iconLabel.centerYAnchor.constraint(equalTo: iconWrap.centerYAnchor)
         ])
 
-        let title = textLabel(text, font: NSFont.systemFont(ofSize: 11, weight: .medium), color: primaryText)
+        let title = textLabel(text, font: NSFont.systemFont(ofSize: 12, weight: .medium), color: primaryText)
 
         card.addSubview(iconWrap)
         card.addSubview(title)
@@ -4243,7 +4286,12 @@ class ViewController: NSViewController {
         ])
         styleSurface(card, borderColor: palette.inputBorder, borderWidth: 1, shadow: false)
 
-        let badgeLabel = textLabel(badge, font: NSFont.systemFont(ofSize: 10, weight: .bold), color: .white)
+        let badgeLabel = styledLabel(
+            badge.uppercased(),
+            font: NSFont.systemFont(ofSize: 10.5, weight: .semibold),
+            color: .white,
+            kern: 0.6
+        )
         let badgeWrap = roundedContainer(cornerRadius: 10, color: badgeColor)
         badgeWrap.translatesAutoresizingMaskIntoConstraints = false
         badgeWrap.wantsLayer = true
@@ -4262,9 +4310,9 @@ class ViewController: NSViewController {
         ])
         wrapper.addSubview(badgeWrap)
 
-        let titleLabel = textLabel(title, font: NSFont.systemFont(ofSize: 15, weight: .bold), color: accentBlue)
+        let titleLabel = textLabel(title, font: NSFont.systemFont(ofSize: 16, weight: .semibold), color: accentBlue)
         card.addSubview(titleLabel)
-        let priceLabel = textLabel(price, font: NSFont.systemFont(ofSize: 13, weight: .bold), color: primaryText)
+        let priceLabel = textLabel(price, font: NSFont.systemFont(ofSize: 15, weight: .bold), color: primaryText)
         card.addSubview(priceLabel)
         paywallPlanPriceLabels[plan] = priceLabel
 
@@ -4280,7 +4328,7 @@ class ViewController: NSViewController {
         ])
 
         if let subtitle {
-            let sub = textLabel(subtitle, font: NSFont.systemFont(ofSize: 10, weight: .semibold), color: secondaryText)
+            let sub = textLabel(subtitle, font: NSFont.systemFont(ofSize: 11, weight: .regular), color: secondaryText)
             card.addSubview(sub)
             paywallPlanSubtitleLabels[plan] = sub
             NSLayoutConstraint.activate([
@@ -4370,8 +4418,8 @@ class ViewController: NSViewController {
         button.translatesAutoresizingMaskIntoConstraints = false
         button.isBordered = false
         button.bezelStyle = .shadowlessSquare
-        button.font = NSFont.systemFont(ofSize: 12, weight: .semibold)
-        button.contentTintColor = palette.isDarkMode ? .white : .black
+        button.font = NSFont.systemFont(ofSize: 11, weight: .semibold)
+        button.contentTintColor = secondaryText
         button.alignment = .center
         button.heightAnchor.constraint(equalToConstant: 24).isActive = true
         return button