From bb102a893ab1f2d9e4e34290b83231a059312256 Mon Sep 17 00:00:00 2001
From: Miguel Beltran <m@beltran.work>
Date: Mon, 1 Jul 2024 17:07:31 +0200
Subject: [PATCH] color blur in tags

---
 compass_app/app/lib/common/themes/colors.dart |  3 +-
 .../app/lib/common/widgets/tag_chip.dart      | 53 ++++++++++---------
 2 files changed, 31 insertions(+), 25 deletions(-)

diff --git a/compass_app/app/lib/common/themes/colors.dart b/compass_app/app/lib/common/themes/colors.dart
index 37cd78347..06924f483 100644
--- a/compass_app/app/lib/common/themes/colors.dart
+++ b/compass_app/app/lib/common/themes/colors.dart
@@ -4,6 +4,7 @@ class AppColors {
   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)
+  static const grey2 = Color(0xFF4D4D4D);
+  static const whiteTransparent = Color(0x4DFFFFFF); // Figma rgba(255, 255, 255, 0.3)
 }
 
diff --git a/compass_app/app/lib/common/widgets/tag_chip.dart b/compass_app/app/lib/common/widgets/tag_chip.dart
index 25feb77bd..8a62210ce 100644
--- a/compass_app/app/lib/common/widgets/tag_chip.dart
+++ b/compass_app/app/lib/common/widgets/tag_chip.dart
@@ -1,3 +1,5 @@
+import 'dart:ui';
+
 import 'package:compass_app/common/themes/colors.dart';
 import 'package:compass_app/common/themes/text_styles.dart';
 import 'package:flutter/material.dart';
@@ -14,30 +16,33 @@ class TagChip extends StatelessWidget {
   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: [
-                Icon(
-                  _iconFrom(tag),
-                  color: Colors.white,
-                  size: 10,
-                ),
-                const SizedBox(width: 4),
-                Text(
-                  tag,
-                  textAlign: TextAlign.center,
-                  style: TextStyles.chipTagStyle,
-                ),
-              ],
+      child: BackdropFilter(
+        filter: ImageFilter.blur(sigmaX: 3, sigmaY: 3),
+        child: DecoratedBox(
+          decoration: const BoxDecoration(
+            color: AppColors.whiteTransparent,
+          ),
+          child: SizedBox(
+            height: 20.0,
+            child: Padding(
+              padding: const EdgeInsets.symmetric(horizontal: 6.0),
+              child: Row(
+                crossAxisAlignment: CrossAxisAlignment.center,
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  Icon(
+                    _iconFrom(tag),
+                    color: Colors.white,
+                    size: 10,
+                  ),
+                  const SizedBox(width: 4),
+                  Text(
+                    tag,
+                    textAlign: TextAlign.center,
+                    style: TextStyles.chipTagStyle,
+                  ),
+                ],
+              ),
             ),
           ),
         ),