Procházet zdrojové kódy

Enlarge the Email Writer generate button and tighten top layout spacing.

Co-authored-by: Cursor <cursoragent@cursor.com>
AhtashamShahzad1 před 1 měsícem
rodič
revize
896b9a2f2d

+ 46 - 5
gramora/Views/Components/GradientButton.swift

@@ -1,7 +1,48 @@
 import SwiftUI
 import SwiftUI
 
 
 struct GradientButton: View {
 struct GradientButton: View {
+    enum Size {
+        case standard
+        case large
+
+        var verticalPadding: CGFloat {
+            switch self {
+            case .standard: 15
+            case .large: 22
+            }
+        }
+
+        var horizontalPadding: CGFloat {
+            switch self {
+            case .standard: 28
+            case .large: 32
+            }
+        }
+
+        var titleFont: Font {
+            switch self {
+            case .standard: .system(size: 16, weight: .semibold)
+            case .large: .system(size: 18, weight: .semibold)
+            }
+        }
+
+        var leadingIconFont: Font {
+            switch self {
+            case .standard: .system(size: 15, weight: .semibold)
+            case .large: .system(size: 17, weight: .semibold)
+            }
+        }
+
+        var trailingIconFont: Font {
+            switch self {
+            case .standard: .system(size: 14, weight: .semibold)
+            case .large: .system(size: 16, weight: .semibold)
+            }
+        }
+    }
+
     let title: String
     let title: String
+    var size: Size = .standard
     let action: () -> Void
     let action: () -> Void
 
 
     @State private var isHovered = false
     @State private var isHovered = false
@@ -10,18 +51,18 @@ struct GradientButton: View {
         Button(action: action) {
         Button(action: action) {
             HStack(spacing: 10) {
             HStack(spacing: 10) {
                 Image(systemName: "sparkles")
                 Image(systemName: "sparkles")
-                    .font(.system(size: 15, weight: .semibold))
+                    .font(size.leadingIconFont)
 
 
                 Text(title)
                 Text(title)
-                    .font(.system(size: 16, weight: .semibold))
+                    .font(size.titleFont)
                     .textSelection(.disabled)
                     .textSelection(.disabled)
 
 
                 Image(systemName: "arrow.right")
                 Image(systemName: "arrow.right")
-                    .font(.system(size: 14, weight: .semibold))
+                    .font(size.trailingIconFont)
             }
             }
             .foregroundStyle(.white)
             .foregroundStyle(.white)
-            .padding(.horizontal, 28)
-            .padding(.vertical, 15)
+            .padding(.horizontal, size.horizontalPadding)
+            .padding(.vertical, size.verticalPadding)
             .frame(maxWidth: .infinity)
             .frame(maxWidth: .infinity)
             .background(isHovered ? AppTheme.primaryGradientHover : AppTheme.primaryGradient)
             .background(isHovered ? AppTheme.primaryGradientHover : AppTheme.primaryGradient)
             .clipShape(RoundedRectangle(cornerRadius: AppTheme.buttonCornerRadius))
             .clipShape(RoundedRectangle(cornerRadius: AppTheme.buttonCornerRadius))

+ 18 - 18
gramora/Views/EmailWriterView.swift

@@ -6,23 +6,23 @@ struct EmailWriterView: View {
     var body: some View {
     var body: some View {
         GeometryReader { proxy in
         GeometryReader { proxy in
             let dynamicHorizontalPadding = min(max(proxy.size.width * 0.045, AppTheme.contentPadding), 52)
             let dynamicHorizontalPadding = min(max(proxy.size.width * 0.045, AppTheme.contentPadding), 52)
-            let dynamicTopPadding = min(max(proxy.size.height * 0.05, 24), 44)
-            let dynamicBottomPadding = min(max(proxy.size.height * 0.06, 28), 56)
+            let dynamicTopPadding = min(max(proxy.size.height * 0.03, 16), 28)
+            let dynamicBottomPadding = min(max(proxy.size.height * 0.04, 20), 40)
 
 
             VStack(alignment: .leading, spacing: 0) {
             VStack(alignment: .leading, spacing: 0) {
                 header
                 header
-                    .padding(.bottom, 28)
+                    .padding(.bottom, 16)
 
 
                 contentCard
                 contentCard
                     .frame(maxWidth: 1200, maxHeight: .infinity, alignment: .topLeading)
                     .frame(maxWidth: 1200, maxHeight: .infinity, alignment: .topLeading)
                     .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)
                     .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)
 
 
-                GradientButton(title: "Generate Email") {
+                GradientButton(title: "Generate Email", size: .large) {
                     viewModel.generateEmail()
                     viewModel.generateEmail()
                 }
                 }
                 .disabled(!viewModel.canGenerate)
                 .disabled(!viewModel.canGenerate)
                 .opacity(viewModel.canGenerate ? 1 : 0.55)
                 .opacity(viewModel.canGenerate ? 1 : 0.55)
-                .padding(.top, 24)
+                .padding(.top, 16)
             }
             }
             .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)
             .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)
             .padding(.horizontal, dynamicHorizontalPadding)
             .padding(.horizontal, dynamicHorizontalPadding)
@@ -38,9 +38,9 @@ struct EmailWriterView: View {
 
 
     private var header: some View {
     private var header: some View {
         HStack(alignment: .top) {
         HStack(alignment: .top) {
-            VStack(alignment: .leading, spacing: 8) {
+            VStack(alignment: .leading, spacing: 6) {
                 Text("AI Email Writer")
                 Text("AI Email Writer")
-                    .font(.system(size: 30, weight: .bold))
+                    .font(.system(size: 26, weight: .bold))
                     .foregroundStyle(AppTheme.textPrimary)
                     .foregroundStyle(AppTheme.textPrimary)
 
 
                 HStack(spacing: 0) {
                 HStack(spacing: 0) {
@@ -57,7 +57,7 @@ struct EmailWriterView: View {
                     Text(".")
                     Text(".")
                         .foregroundStyle(AppTheme.textSecondary)
                         .foregroundStyle(AppTheme.textSecondary)
                 }
                 }
-                .font(.system(size: 15))
+                .font(.system(size: 14))
             }
             }
 
 
             Spacer()
             Spacer()
@@ -70,7 +70,7 @@ struct EmailWriterView: View {
     }
     }
 
 
     private var contentCard: some View {
     private var contentCard: some View {
-        VStack(alignment: .leading, spacing: 16) {
+        VStack(alignment: .leading, spacing: 12) {
             optionsRow
             optionsRow
 
 
             subjectField
             subjectField
@@ -82,7 +82,7 @@ struct EmailWriterView: View {
                 .frame(maxHeight: .infinity)
                 .frame(maxHeight: .infinity)
         }
         }
         .frame(maxHeight: .infinity, alignment: .top)
         .frame(maxHeight: .infinity, alignment: .top)
-        .padding(22)
+        .padding(18)
         .background(AppTheme.cardBackground)
         .background(AppTheme.cardBackground)
         .clipShape(RoundedRectangle(cornerRadius: AppTheme.cardCornerRadius))
         .clipShape(RoundedRectangle(cornerRadius: AppTheme.cardCornerRadius))
         .overlay(
         .overlay(
@@ -113,7 +113,7 @@ struct EmailWriterView: View {
     }
     }
 
 
     private var subjectField: some View {
     private var subjectField: some View {
-        VStack(alignment: .leading, spacing: 8) {
+        VStack(alignment: .leading, spacing: 6) {
             Text("Subject (optional)")
             Text("Subject (optional)")
                 .font(.system(size: 12, weight: .medium))
                 .font(.system(size: 12, weight: .medium))
                 .foregroundStyle(AppTheme.textMuted)
                 .foregroundStyle(AppTheme.textMuted)
@@ -123,7 +123,7 @@ struct EmailWriterView: View {
                 .font(.system(size: 14))
                 .font(.system(size: 14))
                 .foregroundStyle(AppTheme.textPrimary)
                 .foregroundStyle(AppTheme.textPrimary)
                 .padding(.horizontal, 14)
                 .padding(.horizontal, 14)
-                .padding(.vertical, 10)
+                .padding(.vertical, 8)
                 .background(Color.white)
                 .background(Color.white)
                 .clipShape(RoundedRectangle(cornerRadius: AppTheme.inputCornerRadius))
                 .clipShape(RoundedRectangle(cornerRadius: AppTheme.inputCornerRadius))
                 .overlay(
                 .overlay(
@@ -134,7 +134,7 @@ struct EmailWriterView: View {
     }
     }
 
 
     private var inputPanel: some View {
     private var inputPanel: some View {
-        VStack(alignment: .leading, spacing: 12) {
+        VStack(alignment: .leading, spacing: 10) {
             HStack(spacing: 8) {
             HStack(spacing: 8) {
                 Text("What should the email say?")
                 Text("What should the email say?")
                     .font(.system(size: 13, weight: .semibold))
                     .font(.system(size: 13, weight: .semibold))
@@ -156,7 +156,7 @@ struct EmailWriterView: View {
                     .font(.system(size: 14))
                     .font(.system(size: 14))
                     .foregroundStyle(AppTheme.textPrimary)
                     .foregroundStyle(AppTheme.textPrimary)
                     .frame(maxWidth: .infinity, maxHeight: .infinity)
                     .frame(maxWidth: .infinity, maxHeight: .infinity)
-                    .frame(minHeight: 96)
+                    .frame(minHeight: 72)
                     .background(Color.white)
                     .background(Color.white)
                     .clipShape(RoundedRectangle(cornerRadius: AppTheme.inputCornerRadius))
                     .clipShape(RoundedRectangle(cornerRadius: AppTheme.inputCornerRadius))
                     .overlay(
                     .overlay(
@@ -183,7 +183,7 @@ struct EmailWriterView: View {
             .frame(maxHeight: .infinity)
             .frame(maxHeight: .infinity)
         }
         }
         .frame(maxHeight: .infinity)
         .frame(maxHeight: .infinity)
-        .padding(16)
+        .padding(12)
         .background(AppTheme.background)
         .background(AppTheme.background)
         .clipShape(RoundedRectangle(cornerRadius: AppTheme.inputCornerRadius))
         .clipShape(RoundedRectangle(cornerRadius: AppTheme.inputCornerRadius))
         .overlay(
         .overlay(
@@ -193,7 +193,7 @@ struct EmailWriterView: View {
     }
     }
 
 
     private var outputPanel: some View {
     private var outputPanel: some View {
-        VStack(alignment: .leading, spacing: 12) {
+        VStack(alignment: .leading, spacing: 10) {
             HStack(spacing: 8) {
             HStack(spacing: 8) {
                 Text("Generated Email")
                 Text("Generated Email")
                     .font(.system(size: 13, weight: .semibold))
                     .font(.system(size: 13, weight: .semibold))
@@ -216,7 +216,7 @@ struct EmailWriterView: View {
                 .font(.system(size: 14))
                 .font(.system(size: 14))
                 .foregroundStyle(AppTheme.textPrimary)
                 .foregroundStyle(AppTheme.textPrimary)
                 .frame(maxWidth: .infinity, maxHeight: .infinity)
                 .frame(maxWidth: .infinity, maxHeight: .infinity)
-                .frame(minHeight: 96)
+                .frame(minHeight: 72)
                 .background(Color.white)
                 .background(Color.white)
                 .clipShape(RoundedRectangle(cornerRadius: AppTheme.inputCornerRadius))
                 .clipShape(RoundedRectangle(cornerRadius: AppTheme.inputCornerRadius))
                 .overlay(
                 .overlay(
@@ -236,7 +236,7 @@ struct EmailWriterView: View {
             .frame(maxHeight: .infinity)
             .frame(maxHeight: .infinity)
         }
         }
         .frame(maxHeight: .infinity)
         .frame(maxHeight: .infinity)
-        .padding(16)
+        .padding(12)
         .background(AppTheme.tealLight.opacity(0.35))
         .background(AppTheme.tealLight.opacity(0.35))
         .clipShape(RoundedRectangle(cornerRadius: AppTheme.inputCornerRadius))
         .clipShape(RoundedRectangle(cornerRadius: AppTheme.inputCornerRadius))
         .overlay(
         .overlay(