Просмотр исходного кода

Refine main page typography and meeting tab bar spacing.

Reduce heading sizes and tune the platform tab bar shape, insets, and item spacing so the first screen matches the requested compact centered look.

Made-with: Cursor
huzaifahayat12 3 месяцев назад
Родитель
Сommit
b3ff8cdeaa
1 измененных файлов с 22 добавлено и 14 удалено
  1. 22 14
      meetings_app/ViewController.swift

+ 22 - 14
meetings_app/ViewController.swift

@@ -141,15 +141,18 @@ private extension ViewController {
     }
     }
 
 
     func meetingTypeTabs() -> NSView {
     func meetingTypeTabs() -> NSView {
-        let shell = roundedContainer(cornerRadius: 20, color: palette.tabBarBackground)
+        let wrapper = NSView()
+        wrapper.translatesAutoresizingMaskIntoConstraints = false
+
+        let shell = roundedContainer(cornerRadius: 24, color: palette.tabBarBackground)
         shell.translatesAutoresizingMaskIntoConstraints = false
         shell.translatesAutoresizingMaskIntoConstraints = false
-        shell.heightAnchor.constraint(equalToConstant: 56).isActive = true
+        shell.heightAnchor.constraint(equalToConstant: 48).isActive = true
 
 
         let stack = NSStackView()
         let stack = NSStackView()
         stack.translatesAutoresizingMaskIntoConstraints = false
         stack.translatesAutoresizingMaskIntoConstraints = false
         stack.orientation = .horizontal
         stack.orientation = .horizontal
         stack.distribution = .fillEqually
         stack.distribution = .fillEqually
-        stack.spacing = 10
+        stack.spacing = 4
 
 
         stack.addArrangedSubview(topTab("Meet", icon: "􀤆", selected: true))
         stack.addArrangedSubview(topTab("Meet", icon: "􀤆", selected: true))
         stack.addArrangedSubview(topTab("Zoom", icon: "􀤉", selected: false))
         stack.addArrangedSubview(topTab("Zoom", icon: "􀤉", selected: false))
@@ -157,15 +160,20 @@ private extension ViewController {
         stack.addArrangedSubview(topTab("Zoho", icon: "􀯶", selected: false))
         stack.addArrangedSubview(topTab("Zoho", icon: "􀯶", selected: false))
 
 
         shell.addSubview(stack)
         shell.addSubview(stack)
+        wrapper.addSubview(shell)
         NSLayoutConstraint.activate([
         NSLayoutConstraint.activate([
-            shell.widthAnchor.constraint(greaterThanOrEqualToConstant: 700),
-            stack.leadingAnchor.constraint(equalTo: shell.leadingAnchor, constant: 10),
-            stack.trailingAnchor.constraint(equalTo: shell.trailingAnchor, constant: -10),
-            stack.topAnchor.constraint(equalTo: shell.topAnchor, constant: 8),
-            stack.bottomAnchor.constraint(equalTo: shell.bottomAnchor, constant: -8)
+            wrapper.widthAnchor.constraint(greaterThanOrEqualToConstant: 780),
+            shell.leadingAnchor.constraint(equalTo: wrapper.leadingAnchor),
+            shell.trailingAnchor.constraint(equalTo: wrapper.trailingAnchor),
+            shell.topAnchor.constraint(equalTo: wrapper.topAnchor),
+            shell.bottomAnchor.constraint(equalTo: wrapper.bottomAnchor),
+            stack.leadingAnchor.constraint(equalTo: shell.leadingAnchor, constant: 72),
+            stack.trailingAnchor.constraint(equalTo: shell.trailingAnchor, constant: -28),
+            stack.topAnchor.constraint(equalTo: shell.topAnchor, constant: 6),
+            stack.bottomAnchor.constraint(equalTo: shell.bottomAnchor, constant: -6)
         ])
         ])
 
 
-        return shell
+        return wrapper
     }
     }
 
 
     func meetingUrlSection() -> NSView {
     func meetingUrlSection() -> NSView {
@@ -382,7 +390,7 @@ private extension ViewController {
     }
     }
 
 
     func topTab(_ title: String, icon: String, selected: Bool) -> NSView {
     func topTab(_ title: String, icon: String, selected: Bool) -> NSView {
-        let tab = roundedContainer(cornerRadius: 18, color: selected ? palette.primaryBlue : .clear)
+        let tab = roundedContainer(cornerRadius: 19, color: selected ? palette.primaryBlue : .clear)
         tab.translatesAutoresizingMaskIntoConstraints = false
         tab.translatesAutoresizingMaskIntoConstraints = false
 
 
         let iconLabelView = textLabel(icon, font: typography.tabIcon, color: palette.textPrimary)
         let iconLabelView = textLabel(icon, font: typography.tabIcon, color: palette.textPrimary)
@@ -466,10 +474,10 @@ private struct Typography {
     let sidebarIcon = NSFont.systemFont(ofSize: 12, weight: .medium)
     let sidebarIcon = NSFont.systemFont(ofSize: 12, weight: .medium)
     let sidebarItem = NSFont.systemFont(ofSize: 16, weight: .medium)
     let sidebarItem = NSFont.systemFont(ofSize: 16, weight: .medium)
 
 
-    let pageTitle = NSFont.systemFont(ofSize: 31, weight: .semibold)
-    let sectionTitle = NSFont.systemFont(ofSize: 23, weight: .semibold)
-    let sectionTitleBold = NSFont.systemFont(ofSize: 29, weight: .bold)
-    let dateHeading = NSFont.systemFont(ofSize: 21, weight: .medium)
+    let pageTitle = NSFont.systemFont(ofSize: 27, weight: .semibold)
+    let sectionTitle = NSFont.systemFont(ofSize: 20, weight: .semibold)
+    let sectionTitleBold = NSFont.systemFont(ofSize: 25, weight: .bold)
+    let dateHeading = NSFont.systemFont(ofSize: 18, weight: .medium)
 
 
     let tabIcon = NSFont.systemFont(ofSize: 13, weight: .regular)
     let tabIcon = NSFont.systemFont(ofSize: 13, weight: .regular)
     let tabTitle = NSFont.systemFont(ofSize: 31 / 2, weight: .semibold)
     let tabTitle = NSFont.systemFont(ofSize: 31 / 2, weight: .semibold)