fix: cta style

lib/home/widgets/welcome_view.dart

@@ -84,7 +84,13 @@ class _WelcomeView extends StatelessWidget {
               ),
               const SizedBox(height: 40),
               PrimaryCTA(
-                icon: vertexIcons.arrowForward.image(),
+                icon: const CircleAvatar(
+                  backgroundColor: VertexColors.white,
+                  child: Icon(
+                    Icons.arrow_forward,
+                    color: VertexColors.googleBlue,
+                  ),
+                ),
                 label: l10n.startAsking,
                 onPressed: () =>
                     context.read<HomeBloc>().add(const FromWelcomeToQuestion()),

packages/app_ui/lib/src/theme/vertex_theme.dart

@@ -13,6 +13,8 @@ class VertexTheme {
       textTheme: _textTheme,
       inputDecorationTheme: _inputDecorationTheme,
       useMaterial3: true,
+      elevatedButtonTheme: _elevatedButtonTheme,
+      textButtonTheme: _textButtonTheme,
     );
   }
 
@@ -55,4 +57,23 @@ class VertexTheme {
       contentPadding: const EdgeInsets.symmetric(vertical: 32),
     );
   }
+
+  static ElevatedButtonThemeData get _elevatedButtonTheme {
+    return ElevatedButtonThemeData(
+      style: ElevatedButton.styleFrom(
+        textStyle: _textTheme.bodyMedium,
+        backgroundColor: VertexColors.googleBlue,
+        foregroundColor: VertexColors.white,
+      ),
+    );
+  }
+
+  static TextButtonThemeData get _textButtonTheme {
+    return TextButtonThemeData(
+      style: TextButton.styleFrom(
+        textStyle: _textTheme.bodyMedium,
+        foregroundColor: VertexColors.white,
+      ),
+    );
+  }
 }

packages/app_ui/lib/src/widgets/primary_cta.dart

@@ -1,4 +1,3 @@
-import 'package:app_ui/app_ui.dart';
 import 'package:flutter/material.dart';
 
 /// {@template primary_cta}
@@ -14,8 +13,8 @@ class PrimaryCTA extends StatelessWidget {
     super.key,
   });
 
-  /// The image that will be displayed on the left side of the button.
-  final Image? icon;
+  /// The widget that will be displayed on the left side of the button.
+  final Widget? icon;
 
   /// The text that will be displayed on the right side of the button.
   final String label;
@@ -27,31 +26,25 @@ class PrimaryCTA extends StatelessWidget {
   Widget build(BuildContext context) {
     return ElevatedButton(
       onPressed: onPressed,
-      style: ButtonStyle(
-        backgroundColor: const MaterialStatePropertyAll(
-          VertexColors.googleBlue,
-        ),
-        padding: MaterialStatePropertyAll(
-          EdgeInsets.only(
-            left: icon != null ? 24 : 32,
-            top: 20,
-            bottom: 20,
-            right: 32,
-          ),
+      style: ElevatedButton.styleFrom(
+        padding: EdgeInsets.only(
+          left: icon != null ? 8 : 32,
+          top: 20,
+          bottom: 20,
+          right: 32,
         ),
       ),
       child: Row(
         mainAxisSize: MainAxisSize.min,
         children: [
-          if (icon != null) icon!,
+          if (icon != null)
+            Padding(
+              padding: const EdgeInsets.only(right: 16),
+              child: icon,
+            ),
           Text(
             label,
             textAlign: TextAlign.center,
-            style: const TextStyle(
-              fontSize: 18,
-              fontWeight: FontWeight.w500,
-              color: VertexColors.white,
-            ),
           ),
         ],
       ),

packages/app_ui/lib/src/widgets/tertiary_cta.dart

@@ -1,9 +1,7 @@
-import 'package:app_ui/app_ui.dart';
 import 'package:flutter/material.dart';
 
 /// {@template tertiary_cta}
 /// TertiaryCTA
-/// side.
 /// {@endtemplate}
 class TertiaryCTA extends StatelessWidget {
   /// {@macro tertiary_cta}
@@ -30,16 +28,15 @@ class TertiaryCTA extends StatelessWidget {
       child: Row(
         mainAxisSize: MainAxisSize.min,
         children: [
-          if (icon != null) icon!,
-          Expanded(
+          if (icon != null)
+            Padding(
+              padding: const EdgeInsets.only(right: 4),
+              child: icon,
+            ),
+          Flexible(
             child: Text(
               label,
               textAlign: TextAlign.center,
-              style: const TextStyle(
-                fontSize: 18,
-                fontWeight: FontWeight.w500,
-                color: VertexColors.white,
-              ),
             ),
           ),
         ],