Design a custom profile logout popover aligned with the updated top-bar style.

Replace the default context menu with a polished, rounded account popover and keep logout behavior consistent by closing the popover before signing out.

Made-with: Cursor

zoom_app/ViewController.swift

@@ -241,6 +241,7 @@ class ViewController: NSViewController {
     private weak var topBarPremiumButton: NSButton?
     private weak var topBarAuthButton: NSButton?
     private var topBarAuthButtonWidthConstraint: NSLayoutConstraint?
+    private var profileMenuPopover: NSPopover?
     private var paywallWindow: NSWindow?
     private var joinMeetingWindow: NSWindow?
     private var scheduleMeetingWindow: NSWindow?
@@ -1352,17 +1353,76 @@ class ViewController: NSViewController {
     }
 
     @objc private func profileMenuLogoutTapped() {
+        profileMenuPopover?.performClose(nil)
         logoutTapped()
     }
 
     private func showProfileMenu() {
         guard let button = topBarAuthButton else { return }
-        let menu = NSMenu()
-        let logoutItem = NSMenuItem(title: "Logout", action: #selector(profileMenuLogoutTapped), keyEquivalent: "")
-        logoutItem.target = self
-        menu.addItem(logoutItem)
-        let menuOrigin = NSPoint(x: button.bounds.minX, y: button.bounds.minY - 6)
-        menu.popUp(positioning: nil, at: menuOrigin, in: button)
+        if profileMenuPopover == nil {
+            profileMenuPopover = makeProfileMenuPopover()
+        }
+        guard let popover = profileMenuPopover else { return }
+        if popover.isShown {
+            popover.performClose(nil)
+            return
+        }
+        popover.show(relativeTo: button.bounds, of: button, preferredEdge: .maxY)
+    }
+
+    private func makeProfileMenuPopover() -> NSPopover {
+        let popover = NSPopover()
+        popover.behavior = .transient
+        popover.animates = true
+
+        let contentController = NSViewController()
+        let root = NSView(frame: NSRect(x: 0, y: 0, width: 198, height: 86))
+        root.wantsLayer = true
+        root.layer?.cornerRadius = 12
+        root.layer?.backgroundColor = (palette.isDarkMode
+            ? NSColor(calibratedRed: 30 / 255, green: 33 / 255, blue: 40 / 255, alpha: 1)
+            : NSColor(calibratedWhite: 0.15, alpha: 1)
+        ).cgColor
+        root.layer?.borderWidth = 1
+        root.layer?.borderColor = NSColor.white.withAlphaComponent(palette.isDarkMode ? 0.08 : 0.16).cgColor
+
+        let logoutButton = NSButton(title: "Logout", target: self, action: #selector(profileMenuLogoutTapped))
+        logoutButton.translatesAutoresizingMaskIntoConstraints = false
+        logoutButton.isBordered = false
+        logoutButton.wantsLayer = true
+        logoutButton.layer?.cornerRadius = 9
+        logoutButton.layer?.backgroundColor = NSColor.white.withAlphaComponent(palette.isDarkMode ? 0.08 : 0.14).cgColor
+        logoutButton.contentTintColor = .white
+        logoutButton.font = .systemFont(ofSize: 13, weight: .semibold)
+        logoutButton.alignment = .left
+        logoutButton.imagePosition = .imageLeading
+        logoutButton.imageHugsTitle = true
+        logoutButton.bezelStyle = .shadowlessSquare
+        logoutButton.title = "  Logout"
+        if let symbol = NSImage(systemSymbolName: "rectangle.portrait.and.arrow.right", accessibilityDescription: "Logout") {
+            logoutButton.image = symbol.withSymbolConfiguration(.init(pointSize: 13, weight: .semibold))
+        }
+
+        let subtitle = makeLabel("Account", size: 11, color: NSColor.white.withAlphaComponent(0.72), weight: .medium, centered: false)
+        subtitle.translatesAutoresizingMaskIntoConstraints = false
+
+        root.addSubview(subtitle)
+        root.addSubview(logoutButton)
+        NSLayoutConstraint.activate([
+            subtitle.topAnchor.constraint(equalTo: root.topAnchor, constant: 10),
+            subtitle.leadingAnchor.constraint(equalTo: root.leadingAnchor, constant: 12),
+            subtitle.trailingAnchor.constraint(equalTo: root.trailingAnchor, constant: -12),
+
+            logoutButton.topAnchor.constraint(equalTo: subtitle.bottomAnchor, constant: 8),
+            logoutButton.leadingAnchor.constraint(equalTo: root.leadingAnchor, constant: 10),
+            logoutButton.trailingAnchor.constraint(equalTo: root.trailingAnchor, constant: -10),
+            logoutButton.heightAnchor.constraint(equalToConstant: 34)
+        ])
+
+        contentController.view = root
+        popover.contentViewController = contentController
+        popover.contentSize = root.frame.size
+        return popover
     }
     
     @objc private func topBarPlaceholderTapped() {