diff --git a/lib/screens/menu_browse_screen.dart b/lib/screens/menu_browse_screen.dart index 500908d..f05e5a9 100644 --- a/lib/screens/menu_browse_screen.dart +++ b/lib/screens/menu_browse_screen.dart @@ -1,4 +1,4 @@ -import "package:flutter/material.dart"; +import "package:flutter/material.dart"; import "package:provider/provider.dart"; import "../app/app_router.dart"; @@ -397,11 +397,21 @@ class _MenuBrowseScreenState extends State { } Widget _buildItemImage(int itemId) { - return ClipRRect( - borderRadius: BorderRadius.circular(8), - child: SizedBox( - width: 64, - height: 64, + return Container( + width: 90, + height: 90, + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(12), + boxShadow: [ + BoxShadow( + color: Colors.black.withOpacity(0.1), + blurRadius: 8, + offset: const Offset(0, 2), + ), + ], + ), + child: ClipRRect( + borderRadius: BorderRadius.circular(12), child: Image.network( "$_imageBaseUrl/items/$itemId.png", fit: BoxFit.cover, @@ -411,16 +421,20 @@ class _MenuBrowseScreenState extends State { "$_imageBaseUrl/items/$itemId.jpg", fit: BoxFit.cover, errorBuilder: (context, error, stackTrace) { - // Show placeholder if no image return Container( decoration: BoxDecoration( - color: Theme.of(context).colorScheme.primaryContainer, - borderRadius: BorderRadius.circular(8), + gradient: LinearGradient( + begin: Alignment.topLeft, + end: Alignment.bottomRight, + colors: [Colors.grey.shade200, Colors.grey.shade300], + ), ), - child: Icon( - Icons.restaurant, - color: Theme.of(context).colorScheme.onPrimaryContainer, - size: 28, + child: Center( + child: Icon( + Icons.restaurant_menu, + color: Colors.grey.shade500, + size: 36, + ), ), ); }, @@ -555,16 +569,27 @@ class _MenuBrowseScreenState extends State { final hasModifiers = _itemsByParent.containsKey(item.itemId); return Container( - margin: const EdgeInsets.symmetric(horizontal: 12, vertical: 6), + margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8), decoration: BoxDecoration( - color: Theme.of(context).colorScheme.surface, - borderRadius: BorderRadius.circular(12), - border: Border.all( - color: Theme.of(context).colorScheme.outlineVariant.withAlpha(128), - ), + color: Colors.white, + borderRadius: BorderRadius.circular(16), + boxShadow: [ + BoxShadow( + color: Colors.black.withOpacity(0.08), + blurRadius: 12, + offset: const Offset(0, 4), + ), + BoxShadow( + color: Colors.black.withOpacity(0.04), + blurRadius: 4, + offset: const Offset(0, 2), + ), + ], ), - child: InkWell( - borderRadius: BorderRadius.circular(12), + child: Material( + color: Colors.transparent, + child: InkWell( + borderRadius: BorderRadius.circular(16), onTap: () { if (hasModifiers) { _showItemCustomization(item); @@ -573,13 +598,14 @@ class _MenuBrowseScreenState extends State { } }, child: Padding( - padding: const EdgeInsets.all(16), - child: Row( - children: [ - // Item image or placeholder - _buildItemImage(item.itemId), - const SizedBox(width: 16), - // Item details + padding: const EdgeInsets.all(12), + child: Row( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + // Item image with shadow + _buildItemImage(item.itemId), + const SizedBox(width: 14), + // Item details Expanded( child: Column( crossAxisAlignment: CrossAxisAlignment.start, @@ -634,7 +660,8 @@ class _MenuBrowseScreenState extends State { ), ], ), - ], + ], + ), ), ), ), @@ -1065,7 +1092,7 @@ class _ItemCustomizationSheetState extends State<_ItemCustomizationSheet> { ], const SizedBox(height: 12), Container( - padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6), + padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8), decoration: BoxDecoration( color: Theme.of(context).colorScheme.primaryContainer, borderRadius: BorderRadius.circular(20),