Redesign the sidebar upgrade card with a compact Unlock Pro CTA.

Co-authored-by: Cursor <cursoragent@cursor.com>

clone _of_clarus_ai_chat_bot/Utilities/AppTheme.swift

@@ -12,6 +12,11 @@ enum AppTheme {
     static let avatarBackground = Color(red: 0.88, green: 0.88, blue: 0.90)
     static let controlBackground = Color(red: 0.98, green: 0.98, blue: 0.99)
     static let cardShadow = Color.black.opacity(0.06)
+    static let upgradeCardBackground = Color(red: 1.0, green: 0.95, blue: 0.92)
+    static let upgradeBorder = Color(red: 0.98, green: 0.84, blue: 0.82)
+    static let upgradeCrown = Color(red: 0.92, green: 0.70, blue: 0.15)
+    static let upgradeDescription = Color(red: 0.55, green: 0.48, blue: 0.45)
+    static let upgradeButtonBorder = Color(red: 0.92, green: 0.90, blue: 0.89)
 
     static let sidebarWidth: CGFloat = 248
     static let cornerRadiusLarge: CGFloat = 20

clone _of_clarus_ai_chat_bot/Views/SidebarView.swift

@@ -115,35 +115,60 @@ struct SidebarView: View {
     }
 
     private var upgradeButton: some View {
-        Button(action: {}) {
-            HStack(spacing: 8) {
-                Image(systemName: "sparkles")
-                    .font(.system(size: 13, weight: .semibold))
-                    .foregroundStyle(AppTheme.accent)
+        VStack(spacing: 0) {
+            VStack(spacing: 5) {
+                Image(systemName: "crown.fill")
+                    .font(.system(size: 15))
+                    .foregroundStyle(AppTheme.upgradeCrown)
 
-                Text("Upgrade to pro")
-                    .font(.system(size: 13, weight: .semibold))
+                Text("Unlock Pro")
+                    .font(.system(size: 13, weight: .bold))
                     .foregroundStyle(AppTheme.textPrimary)
 
-                Spacer()
-
-                Image(systemName: "chevron.right")
-                    .font(.system(size: 10, weight: .bold))
-                    .foregroundStyle(AppTheme.textSecondary)
+                Text("Upgrade to Pro for unlimited chats, advanced AI models, and all features.")
+                    .font(.system(size: 10))
+                    .foregroundStyle(AppTheme.upgradeDescription)
+                    .multilineTextAlignment(.center)
+                    .lineSpacing(1)
+                    .fixedSize(horizontal: false, vertical: true)
             }
-            .padding(.horizontal, 14)
-            .padding(.vertical, 12)
-            .background(
-                RoundedRectangle(cornerRadius: AppTheme.cornerRadiusMedium, style: .continuous)
-                    .stroke(AppTheme.accent.opacity(0.45), lineWidth: 1)
-                    .background(
-                        RoundedRectangle(cornerRadius: AppTheme.cornerRadiusMedium, style: .continuous)
-                            .fill(Color.white)
-                    )
-            )
+            .padding(.horizontal, 10)
+            .padding(.top, 12)
+            .padding(.bottom, 10)
+
+            Button(action: {}) {
+                HStack(spacing: 4) {
+                    Text("Upgrade Now")
+                        .font(.system(size: 12, weight: .bold))
+                    Image(systemName: "arrow.up.right")
+                        .font(.system(size: 9, weight: .bold))
+                }
+                .foregroundStyle(AppTheme.accentDark)
+                .frame(maxWidth: .infinity)
+                .padding(.vertical, 8)
+                .background(
+                    RoundedRectangle(cornerRadius: 8, style: .continuous)
+                        .fill(Color.white)
+                )
+                .overlay(
+                    RoundedRectangle(cornerRadius: 8, style: .continuous)
+                        .stroke(AppTheme.upgradeButtonBorder, lineWidth: 1)
+                )
+            }
+            .buttonStyle(.plain)
+            .padding(.horizontal, 10)
+            .padding(.bottom, 10)
+            .accessibilityLabel("Upgrade Now")
         }
-        .buttonStyle(.plain)
-        .accessibilityLabel("Upgrade to pro")
+        .background(
+            RoundedRectangle(cornerRadius: 10, style: .continuous)
+                .fill(AppTheme.upgradeCardBackground)
+        )
+        .overlay(
+            RoundedRectangle(cornerRadius: 10, style: .continuous)
+                .stroke(AppTheme.upgradeBorder, lineWidth: 1)
+        )
+        .accessibilityElement(children: .contain)
     }
 }