tag chips WIP

compass_app/app/lib/common/themes/colors.dart

@@ -1,7 +1,8 @@
 import 'dart:ui';
 
 class AppColors {
-  static const grey1 = Color(0xFFF2F2F2);
   static const black1 = Color(0xFF101010);
   static const white1 = Color(0xFFFFF7FA);
+  static const grey1 = Color(0xFFF2F2F2);
+  static const grey2 = Color(0xFF4D4D4D); // Figma rgba(255, 255, 255, 0.3)
 }

compass_app/app/lib/common/themes/text_styles.dart

@@ -1,13 +1,26 @@
 import 'package:flutter/material.dart';
 import 'package:google_fonts/google_fonts.dart';
 
-// Note: original Figma file uses Nikkei Maru
-// which is not available on GoogleFonts
-final cardTitleStyle = GoogleFonts.anton(
-  textStyle: const TextStyle(
-    fontWeight: FontWeight.w800,
-    fontSize: 15.0,
-    color: Colors.white,
-    letterSpacing: 1,
-  ),
-);
+class TextStyles {
+  // Note: original Figma file uses Nikkei Maru
+  // which is not available on GoogleFonts
+  static final cardTitleStyle = GoogleFonts.anton(
+    textStyle: const TextStyle(
+      fontWeight: FontWeight.w800,
+      fontSize: 15.0,
+      color: Colors.white,
+      letterSpacing: 1,
+    ),
+  );
+
+  // Note: original Figma file uses Google Sans
+  // which is not available on GoogleFonts
+  static final chipTagStyle = GoogleFonts.openSans(
+    textStyle: const TextStyle(
+      fontWeight: FontWeight.w500,
+      fontSize: 10,
+      color: Colors.white,
+      textBaseline: TextBaseline.alphabetic,
+    ),
+  );
+}

compass_app/app/lib/common/themes/theme.dart

@@ -1,4 +1,5 @@
 import 'package:compass_app/common/themes/colors.dart';
+import 'package:compass_app/common/themes/text_styles.dart';
 import 'package:flutter/material.dart';
 
 class AppTheme {

compass_app/app/lib/common/widgets/tag_chip.dart

@@ -0,0 +1,43 @@
+import 'package:compass_app/common/themes/colors.dart';
+import 'package:compass_app/common/themes/text_styles.dart';
+import 'package:flutter/material.dart';
+
+class TagChip extends StatelessWidget {
+  const TagChip({
+    super.key,
+    required this.tag,
+  });
+
+  final String tag;
+
+  @override
+  Widget build(BuildContext context) {
+    return ClipRRect(
+      borderRadius: BorderRadius.circular(10.0),
+      child: DecoratedBox(
+        decoration: const BoxDecoration(
+          color: AppColors.grey2,
+        ),
+        child: SizedBox(
+          height: 20.0,
+          child: Padding(
+            padding: const EdgeInsets.symmetric(horizontal: 6.0),
+            child: Row(
+              crossAxisAlignment: CrossAxisAlignment.center,
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                Text(
+                  tag,
+                  textAlign: TextAlign.center,
+                  style: TextStyles.chipTagStyle,
+                ),
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+
+  
+}

compass_app/app/lib/features/results/presentation/result_card.dart

@@ -1,4 +1,5 @@
 import 'package:compass_app/common/themes/text_styles.dart';
+import 'package:compass_app/common/widgets/tag_chip.dart';
 import 'package:compass_app/features/results/business/model/destination.dart';
 import 'package:flutter/material.dart';
 
@@ -32,12 +33,15 @@ class ResultCard extends StatelessWidget {
               children: [
                 Text(
                   destination.name.toUpperCase(),
-                  style: cardTitleStyle,
+                  style: TextStyles.cardTitleStyle,
                 ),
+                const SizedBox(height: 6,),
                 Wrap(
+                  spacing: 4.0,
+                  runSpacing: 4.0,
                   direction: Axis.horizontal,
                   children: destination.tags
-                      .map((e) => Chip(label: Text(e)))
+                      .map((e) => TagChip(tag: e))
                       .toList(),
                 ),
               ],