diff --git a/lib/app_shell.dart b/lib/app_shell.dart index 32e4736..39450f3 100644 --- a/lib/app_shell.dart +++ b/lib/app_shell.dart @@ -459,8 +459,8 @@ class _HomeShellState extends State { child: Row( children: [ Container( - width: 42, - height: 42, + width: 38, + height: 38, decoration: BoxDecoration( color: sage, borderRadius: BorderRadius.circular(15), @@ -472,7 +472,7 @@ class _HomeShellState extends State { size: 24, ), ), - const SizedBox(width: 10), + const SizedBox(width: 8), Expanded( child: Column( crossAxisAlignment: CrossAxisAlignment.start, @@ -500,7 +500,7 @@ class _HomeShellState extends State { ), ), const SizedBox(height: 2), - LanguageSwitcher( + CompactLanguageSwitcher( languageCode: widget.languageCode, onChanged: widget.onLanguageChanged, labels: text, @@ -527,7 +527,7 @@ class _HomeShellState extends State { style: IconButton.styleFrom( backgroundColor: Colors.white, foregroundColor: sage, - minimumSize: const Size(36, 36), + minimumSize: const Size(32, 32), tapTargetSize: MaterialTapTargetSize.shrinkWrap, padding: EdgeInsets.zero, @@ -1350,3 +1350,134 @@ class _LanguagePill extends StatelessWidget { ); } } + +class CompactLanguageSwitcher extends StatelessWidget { + const CompactLanguageSwitcher({ + super.key, + required this.languageCode, + required this.onChanged, + required this.labels, + }); + + final String languageCode; + final ValueChanged onChanged; + final AppText labels; + + @override + Widget build(BuildContext context) { + return Align( + alignment: Alignment.centerLeft, + child: FittedBox( + fit: BoxFit.scaleDown, + alignment: Alignment.centerLeft, + child: Container( + height: 22, + padding: const EdgeInsets.all(2), + decoration: BoxDecoration( + color: Colors.white, + borderRadius: BorderRadius.circular(999), + border: Border.all(color: sage.withValues(alpha: .16)), + ), + child: Row( + mainAxisSize: MainAxisSize.min, + children: [ + _CompactLanguagePill( + selected: languageCode != 'en', + colors: const [ + Color(0xFFCE2939), + Colors.white, + Color(0xFF477050), + ], + label: labels.hunShort, + onTap: () => onChanged('hu'), + ), + _CompactLanguagePill( + selected: languageCode == 'en', + colors: const [ + Color(0xFF012169), + Colors.white, + Color(0xFFC8102E), + ], + label: labels.engShort, + onTap: () => onChanged('en'), + ), + ], + ), + ), + ), + ); + } +} + +class _CompactLanguagePill extends StatelessWidget { + const _CompactLanguagePill({ + required this.selected, + required this.colors, + required this.label, + required this.onTap, + }); + + final bool selected; + final List colors; + final String label; + final VoidCallback onTap; + + @override + Widget build(BuildContext context) { + return InkWell( + borderRadius: BorderRadius.circular(999), + onTap: selected ? null : onTap, + child: AnimatedContainer( + duration: const Duration(milliseconds: 180), + padding: const EdgeInsets.symmetric(horizontal: 5, vertical: 2), + decoration: BoxDecoration( + color: selected ? sage : Colors.transparent, + borderRadius: BorderRadius.circular(999), + ), + child: Row( + mainAxisSize: MainAxisSize.min, + children: [ + _MiniFlag(colors: colors), + const SizedBox(width: 2), + Text( + label, + style: TextStyle( + fontSize: 8, + height: 1, + fontWeight: FontWeight.w900, + color: selected ? Colors.white : Colors.black45, + ), + ), + ], + ), + ), + ); + } +} + +class _MiniFlag extends StatelessWidget { + const _MiniFlag({required this.colors}); + + final List colors; + + @override + Widget build(BuildContext context) { + return Container( + width: 12, + height: 8, + clipBehavior: Clip.antiAlias, + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(2), + border: Border.all( + color: Colors.black.withValues(alpha: .10), + width: .5, + ), + ), + child: Column( + children: colors + .map((color) => Expanded(child: Container(color: color))) + .toList(), + ), + ); + } +}