diff --git a/lib/pages/spaces_management/widgets/hoverable_button.dart b/lib/pages/spaces_management/widgets/hoverable_button.dart index bc39f87e..0c158c12 100644 --- a/lib/pages/spaces_management/widgets/hoverable_button.dart +++ b/lib/pages/spaces_management/widgets/hoverable_button.dart @@ -15,63 +15,74 @@ class HoverableButton extends StatefulWidget { }) : super(key: key); @override - _HoverableButtonState createState() => _HoverableButtonState(); + State createState() => _HoverableButtonState(); } class _HoverableButtonState extends State { - bool isHovered = false; // Track hover state + bool isHovered = false; @override Widget build(BuildContext context) { + final theme = Theme.of(context); + return GestureDetector( onTap: widget.onTap, child: MouseRegion( - onEnter: (_) => setState(() => isHovered = true), - onExit: (_) => setState(() => isHovered = false), + onEnter: (_) => _updateHoverState(true), + onExit: (_) => _updateHoverState(false), child: AnimatedContainer( duration: const Duration(milliseconds: 200), padding: const EdgeInsets.symmetric(horizontal: 13, vertical: 8), decoration: BoxDecoration( - color: isHovered ? ColorsManager.warningRed : Colors.white, // Change color on hover + color: isHovered ? ColorsManager.warningRed : Colors.white, borderRadius: BorderRadius.circular(16), boxShadow: [ if (isHovered) BoxShadow( - color: ColorsManager.warningRed, + color: ColorsManager.warningRed.withOpacity(0.4), + blurRadius: 8, + offset: const Offset(0, 4), ), ], ), child: Row( mainAxisSize: MainAxisSize.min, children: [ - if (!isHovered) - SvgPicture.asset( - widget.iconPath, - width: 24, - height: 24, - ) - else - Center( - child: const Icon( - Icons.close, // Display "X" on hover - color: Colors.white, - size: 24, - )), - const SizedBox(width: 8), - if (!isHovered) ...[ - Text( - widget.text, - style: TextStyle( - fontSize: 17, - fontWeight: FontWeight.w500, - color: ColorsManager.spaceColor, - ), - ), - ], + _buildIcon(), + if (!isHovered) const SizedBox(width: 8), + if (!isHovered) _buildText(theme), ], ), ), ), ); } + + Widget _buildIcon() { + return isHovered + ? const Icon( + Icons.close, + color: Colors.white, + size: 24, + ) + : SvgPicture.asset( + widget.iconPath, + width: 24, + height: 24, + ); + } + + Widget _buildText(ThemeData theme) { + return Text( + widget.text, + style: theme.textTheme.bodyLarge?.copyWith( + color: ColorsManager.spaceColor, + fontWeight: FontWeight.w500, + ), + ); + } + + void _updateHoverState(bool hover) { + setState(() => isHovered = hover); + } }