made BlurMenuItemWidget component

lib/theme/colors.dart

@@ -23,6 +23,7 @@ class EnteColorScheme {
   final Color fillBase;
   final Color fillMuted;
   final Color fillFaint;
+  final Color fillFaintPressed;
 
   // Stroke Colors
   final Color strokeBase;
@@ -62,6 +63,7 @@ class EnteColorScheme {
     this.fillBase,
     this.fillMuted,
     this.fillFaint,
+    this.fillFaintPressed,
     this.strokeBase,
     this.strokeMuted,
     this.strokeFaint,
@@ -95,6 +97,7 @@ const EnteColorScheme lightScheme = EnteColorScheme(
   fillBaseLight,
   fillMutedLight,
   fillFaintLight,
+  fillFaintPressedLight,
   strokeBaseLight,
   strokeMutedLight,
   strokeFaintLight,
@@ -119,6 +122,7 @@ const EnteColorScheme darkScheme = EnteColorScheme(
   fillBaseDark,
   fillMutedDark,
   fillFaintDark,
+  fillFaintPressedDark,
   strokeBaseDark,
   strokeMutedDark,
   strokeFaintDark,
@@ -162,10 +166,12 @@ const Color blurTextBaseDark = Color.fromRGBO(255, 255, 255, 0.95);
 const Color fillBaseLight = Color.fromRGBO(0, 0, 0, 1);
 const Color fillMutedLight = Color.fromRGBO(0, 0, 0, 0.12);
 const Color fillFaintLight = Color.fromRGBO(0, 0, 0, 0.04);
+const Color fillFaintPressedLight = Color.fromRGBO(0, 0, 0, 0.08);
 
 const Color fillBaseDark = Color.fromRGBO(255, 255, 255, 1);
 const Color fillMutedDark = Color.fromRGBO(255, 255, 255, 0.16);
 const Color fillFaintDark = Color.fromRGBO(255, 255, 255, 0.12);
+const Color fillFaintPressedDark = Color.fromRGBO(255, 255, 255, 0.06);
 
 // Stroke Colors
 const Color strokeBaseLight = Color.fromRGBO(0, 0, 0, 1);

lib/ui/components/blur_menu_item_widget.dart

@@ -0,0 +1,101 @@
+import 'package:flutter/material.dart';
+import 'package:photos/theme/ente_theme.dart';
+
+class BlurMenuItemWidget extends StatefulWidget {
+  final IconData? leadingIcon;
+  final String? labelText;
+  final Color? menuItemColor;
+  final Color? pressedColor;
+  final VoidCallback? onTap;
+  const BlurMenuItemWidget({
+    this.leadingIcon,
+    this.labelText,
+    this.menuItemColor,
+    this.pressedColor,
+    this.onTap,
+    super.key,
+  });
+
+  @override
+  State<BlurMenuItemWidget> createState() => _BlurMenuItemWidgetState();
+}
+
+class _BlurMenuItemWidgetState extends State<BlurMenuItemWidget> {
+  Color? menuItemColor;
+  @override
+  void initState() {
+    menuItemColor = widget.menuItemColor;
+    super.initState();
+  }
+
+  @override
+  void didChangeDependencies() {
+    menuItemColor = widget.menuItemColor;
+    super.didChangeDependencies();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = getEnteColorScheme(context);
+    return GestureDetector(
+      onTap: widget.onTap,
+      onTapDown: _onTapDown,
+      onTapUp: _onTapUp,
+      onTapCancel: _onCancel,
+      child: AnimatedContainer(
+        duration: const Duration(milliseconds: 20),
+        color: menuItemColor,
+        padding: const EdgeInsets.only(left: 16, right: 12),
+        child: Padding(
+          padding: const EdgeInsets.symmetric(vertical: 14),
+          child: Row(
+            children: [
+              widget.leadingIcon != null
+                  ? Padding(
+                      padding: const EdgeInsets.only(right: 10),
+                      child: Icon(
+                        widget.leadingIcon,
+                        size: 20,
+                        color: colorScheme.blurStrokeBase,
+                      ),
+                    )
+                  : const SizedBox.shrink(),
+              widget.labelText != null
+                  ? Padding(
+                      padding: const EdgeInsets.symmetric(horizontal: 2),
+                      child: Text(
+                        widget.labelText!,
+                        style: getEnteTextTheme(context)
+                            .bodyBold
+                            .copyWith(color: colorScheme.blurTextBase),
+                      ),
+                    )
+                  : const SizedBox.shrink(),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+
+  void _onTapDown(details) {
+    setState(() {
+      menuItemColor = widget.pressedColor ?? widget.menuItemColor;
+    });
+  }
+
+  void _onTapUp(details) {
+    Future.delayed(
+      const Duration(milliseconds: 100),
+      () => setState(() {
+        menuItemColor = widget.menuItemColor;
+      }),
+    );
+  }
+
+  void _onCancel() {
+    setState(() {
+      menuItemColor = widget.menuItemColor;
+    });
+  }
+}