refactor: genre home section

lib/components/fallbacks/anonymous_fallback.dart

@@ -1,5 +1,5 @@
-import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:shadcn_flutter/shadcn_flutter.dart';
 import 'package:spotube/extensions/context.dart';
 import 'package:spotube/pages/settings/settings.dart';
 
@@ -28,7 +28,7 @@ class AnonymousFallback extends ConsumerWidget {
         children: [
           Text(context.l10n.not_logged_in),
           const SizedBox(height: 10),
-          FilledButton(
+          Button.primary(
             child: Text(context.l10n.login_with_spotify),
             onPressed: () => ServiceUtils.pushNamed(context, SettingsPage.name),
           )

lib/components/fallbacks/not_found.dart

@@ -1,4 +1,4 @@
-import 'package:flutter/material.dart';
+import 'package:shadcn_flutter/shadcn_flutter.dart';
 import 'package:spotube/collections/assets.gen.dart';
 import 'package:spotube/extensions/context.dart';
 
@@ -8,7 +8,6 @@ class NotFound extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final theme = Theme.of(context);
     final widgets = [
       SizedBox(
         height: 150,
@@ -19,11 +18,10 @@ class NotFound extends StatelessWidget {
         crossAxisAlignment: CrossAxisAlignment.start,
         mainAxisAlignment: MainAxisAlignment.center,
         children: [
-          Text(context.l10n.nothing_found, style: theme.textTheme.titleLarge),
+          Text(context.l10n.nothing_found).large().semiBold(),
           Text(
             context.l10n.the_box_is_empty,
-            style: theme.textTheme.titleMedium,
+          ).semiBold(),
-          ),
         ],
       ),
     ];

lib/modules/home/sections/genres.dart

@@ -1,5 +1,3 @@
-import 'dart:math';
-
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:go_router/go_router.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
@@ -8,7 +6,6 @@ import 'package:shadcn_flutter/shadcn_flutter_extension.dart';
 import 'package:skeletonizer/skeletonizer.dart';
 import 'package:spotify/spotify.dart';
 import 'package:spotube/collections/fake.dart';
-import 'package:spotube/collections/gradients.dart';
 import 'package:spotube/collections/spotube_icons.dart';
 import 'package:spotube/components/image/universal_image.dart';
 import 'package:spotube/extensions/constrains.dart';
@@ -84,32 +81,15 @@ class HomeGenresSection extends HookConsumerWidget {
                 final category =
                     categories.elementAtOrNull(index) ?? FakeData.category;
 
-                return HookBuilder(builder: (context) {
+                return Button(
-                  final (:gradient, :textColor) = useMemoized(
+                  style: ButtonVariance.secondary.copyWith(
-                    () {
+                    padding: (context, states, value) {
-                      final gradient =
+                      return EdgeInsets.zero;
-                          gradients[Random().nextInt(gradients.length)];
-                      final text = gradient.colors
-                              .take(2)
-                              .any((c) => c.computeLuminance() > 0.5)
-                          ? Colors.gray[900]
-                          : Colors.white;
-                      return (
-                        gradient: LinearGradient(
-                          colors: gradient.colors
-                              .map((c) => c.withAlpha((0.8 * 255).ceil()))
-                              .toList(),
-                        ),
-                        textColor: text
-                      );
                     },
-                    [],
+                  ),
-                  );
+                  onPressed: () {},
-
+                  child: CardImage(
-                  return MouseRegion(
+                    onPressed: () {
-                    cursor: SystemMouseCursors.click,
-                    child: GestureDetector(
-                      onTap: () {
                       context.pushNamed(
                         GenrePlaylistsPage.name,
                         pathParameters: {
@@ -118,36 +98,16 @@ class HomeGenresSection extends HookConsumerWidget {
                         extra: category,
                       );
                     },
-                      child: Container(
+                    direction: Axis.horizontal,
-                        decoration: BoxDecoration(
+                    image: UniversalImage(
-                          borderRadius: BorderRadius.circular(8),
+                      path: category.icons!.first.url!,
-                          image: DecorationImage(
-                            image: UniversalImage.imageProvider(
-                              category.icons!.first.url!,
-                            ),
                       fit: BoxFit.cover,
+                      height: 50,
+                      width: 50,
                     ),
-                        ),
+                    title: Text(category.name!),
-                        child: Container(
-                          decoration: BoxDecoration(
-                            borderRadius: BorderRadius.circular(5),
-                            color: context.theme.colorScheme.muted,
-                            gradient:
-                                categoriesQuery.isLoading ? null : gradient,
-                          ),
-                          padding: const EdgeInsets.symmetric(horizontal: 16),
-                          child: Align(
-                            alignment: Alignment.centerLeft,
-                            child: Text(
-                              category.name!,
-                              style: context.theme.typography.large,
-                            ),
-                          ),
-                        ),
-                      ),
                   ),
                 );
-                });
               },
             ),
           ),

lib/pages/lastfm_login/lastfm_login.dart

@@ -36,14 +36,15 @@ class LastFMLoginPage extends HookConsumerWidget {
           ),
         ),
       ],
-      child: SingleChildScrollView(
+      child: Row(
-        child: Container(
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [
+          Container(
             constraints: const BoxConstraints(maxWidth: 400),
             alignment: Alignment.center,
             padding: const EdgeInsets.all(16),
             child: Card(
-            child: Padding(
+              padding: const EdgeInsets.all(16.0),
-              padding: const EdgeInsets.all(16.0).copyWith(top: 8),
               child: Form(
                 onSubmit: (context, values) async {
                   try {
@@ -136,7 +137,7 @@ class LastFMLoginPage extends HookConsumerWidget {
               ),
             ),
           ),
-        ),
+        ],
       ),
     );
   }