fix(macos): white text color in dark mode, text field white background

lib/components/Artist/ArtistCard.dart

@@ -1,12 +1,16 @@
 import 'package:auto_size_text/auto_size_text.dart';
+import 'package:fluent_ui/fluent_ui.dart' hide Colors;
 import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:platform_ui/platform_ui.dart';
 import 'package:spotify/spotify.dart';
 import 'package:spotube/components/Shared/HoverBuilder.dart';
 import 'package:spotube/components/Shared/UniversalImage.dart';
+import 'package:spotube/hooks/usePlatformProperty.dart';
 import 'package:spotube/utils/service_utils.dart';
 import 'package:spotube/utils/type_conversion_utils.dart';
 
-class ArtistCard extends StatelessWidget {
+class ArtistCard extends HookWidget {
   final Artist artist;
   const ArtistCard(this.artist, {Key? key}) : super(key: key);
 
@@ -18,28 +22,76 @@ class ArtistCard extends StatelessWidget {
         placeholder: ImagePlaceholder.artist,
       ),
     );
+    final boxShadow = usePlatformProperty<BoxShadow?>(
+      (context) => PlatformProperty(
+        android: BoxShadow(
+          blurRadius: 10,
+          offset: const Offset(0, 3),
+          spreadRadius: 5,
+          color: Theme.of(context).shadowColor,
+        ),
+        ios: null,
+        macos: null,
+        linux: BoxShadow(
+          blurRadius: 10,
+          offset: const Offset(0, 3),
+          spreadRadius: 5,
+          color: Theme.of(context).shadowColor,
+        ),
+        windows: null,
+      ),
+    );
+
+    final splash = usePlatformProperty<InteractiveInkFeatureFactory?>(
+      (context) => PlatformProperty.multiPlatformGroup({
+        InkRipple.splashFactory: {TargetPlatform.android, TargetPlatform.linux},
+        NoSplash.splashFactory: {
+          TargetPlatform.windows,
+          TargetPlatform.macOS,
+          TargetPlatform.iOS,
+        }
+      }),
+    );
+
     return SizedBox(
       height: 240,
       width: 200,
       child: InkWell(
+        splashFactory: splash,
         onTap: () {
           ServiceUtils.navigate(context, "/artist/${artist.id}");
         },
-        borderRadius: BorderRadius.circular(10),
+        customBorder: platform == TargetPlatform.windows
+            ? Border.all(
+                color: FluentTheme.maybeOf(context)
+                        ?.micaBackgroundColor
+                        .withOpacity(.7) ??
+                    Colors.transparent,
+                width: 1,
+              )
+            : null,
+        borderRadius: BorderRadius.circular(
+          platform == TargetPlatform.windows ? 5 : 8,
+        ),
         child: HoverBuilder(builder: (context, isHovering) {
           return Ink(
             width: 200,
             decoration: BoxDecoration(
-              color: Theme.of(context).backgroundColor,
-              borderRadius: BorderRadius.circular(8),
+              color: PlatformTheme.of(context).secondaryBackgroundColor,
+              borderRadius: BorderRadius.circular(
+                platform == TargetPlatform.windows ? 5 : 8,
+              ),
               boxShadow: [
-                BoxShadow(
-                  blurRadius: 10,
-                  offset: const Offset(0, 3),
-                  spreadRadius: 5,
-                  color: Theme.of(context).shadowColor,
-                )
+                if (boxShadow != null) boxShadow,
               ],
+              border: [TargetPlatform.windows, TargetPlatform.macOS]
+                      .contains(platform)
+                  ? Border.all(
+                      color: PlatformTheme.of(context).borderColor ??
+                          Colors.transparent,
+                      width: 1,
+                    )
+                  : null,
             ),
             child: Padding(
               padding: const EdgeInsets.all(15),
@@ -79,7 +131,7 @@ class ArtistCard extends StatelessWidget {
                     artist.name!,
                     maxLines: 2,
                     textAlign: TextAlign.center,
-                    style: Theme.of(context).textTheme.bodyLarge!.copyWith(
+                    style: PlatformTextTheme.of(context).body?.copyWith(
                           fontWeight: FontWeight.bold,
                         ),
                   ),

lib/components/Artist/ArtistProfile.dart

@@ -31,13 +31,13 @@ class ArtistProfile extends HookConsumerWidget {
   Widget build(BuildContext context, ref) {
     SpotifyApi spotify = ref.watch(spotifyProvider);
     final parentScrollController = useScrollController();
-    final textTheme = Theme.of(context).textTheme;
+    final textTheme = PlatformTheme.of(context).textTheme;
     final chipTextVariant = useBreakpointValue(
-      sm: textTheme.bodySmall,
-      md: textTheme.bodyMedium,
-      lg: textTheme.headline6,
-      xl: textTheme.headline6,
-      xxl: textTheme.headline6,
+      sm: textTheme!.caption,
+      md: textTheme.body,
+      lg: textTheme.subheading,
+      xl: textTheme.headline,
+      xxl: textTheme.headline,
     );
 
     final avatarWidth = useBreakpointValue(
@@ -53,7 +53,7 @@ class ArtistProfile extends HookConsumerWidget {
     final Playback playback = ref.watch(playbackProvider);
 
     return SafeArea(
-      child: Scaffold(
+      child: PlatformScaffold(
         appBar: const PageWindowTitleBar(
           leading: BackButton(),
         ),
@@ -68,7 +68,7 @@ class ArtistProfile extends HookConsumerWidget {
               return const ShimmerArtistProfile();
             } else if (artistsQuery.hasError) {
               return Center(
-                child: Text(artistsQuery.error.toString()),
+                child: PlatformText(artistsQuery.error.toString()),
               );
             }
 
@@ -106,21 +106,22 @@ class ArtistProfile extends HookConsumerWidget {
                               decoration: BoxDecoration(
                                   color: Colors.blue,
                                   borderRadius: BorderRadius.circular(50)),
-                              child: Text(data.type!.toUpperCase(),
+                              child: PlatformText(data.type!.toUpperCase(),
                                   style: chipTextVariant?.copyWith(
                                       color: Colors.white)),
                             ),
-                            Text(
+                            PlatformText(
                               data.name!,
                               style: breakpoint.isSm
-                                  ? textTheme.headline4
-                                  : textTheme.headline2,
+                                  ? textTheme.subheading
+                                  : textTheme.headline,
                             ),
-                            Text(
+                            PlatformText(
                               "${PrimitiveUtils.toReadableNumber(data.followers!.total!.toDouble())} followers",
                               style: breakpoint.isSm
-                                  ? textTheme.bodyText1
-                                  : textTheme.headline5,
+                                  ? textTheme.body
+                                  : textTheme.body
+                                      ?.copyWith(fontWeight: FontWeight.bold),
                             ),
                             const SizedBox(height: 20),
                             Row(
@@ -144,7 +145,7 @@ class ArtistProfile extends HookConsumerWidget {
                                       );
                                     }
 
-                                    return OutlinedButton(
+                                    return PlatformFilledButton(
                                       onPressed: () async {
                                         try {
                                           isFollowingQuery.data!
@@ -170,7 +171,7 @@ class ArtistProfile extends HookConsumerWidget {
                                           ]);
                                         }
                                       },
-                                      child: Text(
+                                      child: PlatformText(
                                         isFollowingQuery.data!
                                             ? "Following"
                                             : "Follow",
@@ -190,7 +191,7 @@ class ArtistProfile extends HookConsumerWidget {
                                         const SnackBar(
                                           width: 300,
                                           behavior: SnackBarBehavior.floating,
-                                          content: Text(
+                                          content: PlatformText(
                                             "Artist URL copied to clipboard",
                                             textAlign: TextAlign.center,
                                           ),
@@ -218,7 +219,7 @@ class ArtistProfile extends HookConsumerWidget {
                         return const PlatformCircularProgressIndicator();
                       } else if (topTracksQuery.hasError) {
                         return Center(
-                          child: Text(topTracksQuery.error.toString()),
+                          child: PlatformText(topTracksQuery.error.toString()),
                         );
                       }
 
@@ -252,9 +253,10 @@ class ArtistProfile extends HookConsumerWidget {
                       return Column(children: [
                         Row(
                           children: [
-                            Text(
+                            PlatformText(
                               "Top Tracks",
-                              style: Theme.of(context).textTheme.headline4,
+                              style:
+                                  PlatformTheme.of(context).textTheme?.headline,
                             ),
                             Container(
                               margin: const EdgeInsets.symmetric(horizontal: 5),
@@ -294,16 +296,16 @@ class ArtistProfile extends HookConsumerWidget {
                     },
                   ),
                   const SizedBox(height: 50),
-                  Text(
+                  PlatformText(
                     "Albums",
-                    style: Theme.of(context).textTheme.headline4,
+                    style: PlatformTheme.of(context).textTheme?.headline,
                   ),
                   const SizedBox(height: 10),
                   ArtistAlbumList(artistId),
                   const SizedBox(height: 20),
-                  Text(
+                  PlatformText(
                     "Fans also likes",
-                    style: Theme.of(context).textTheme.headline4,
+                    style: PlatformTheme.of(context).textTheme?.headline,
                   ),
                   const SizedBox(height: 10),
                   HookBuilder(
@@ -317,7 +319,7 @@ class ArtistProfile extends HookConsumerWidget {
                         return const PlatformCircularProgressIndicator();
                       } else if (relatedArtists.hasError) {
                         return Center(
-                          child: Text(relatedArtists.error.toString()),
+                          child: PlatformText(relatedArtists.error.toString()),
                         );
                       }
 

lib/components/Category/CategoryCard.dart

@@ -3,6 +3,7 @@ import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart' hide Page;
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:platform_ui/platform_ui.dart';
 import 'package:spotify/spotify.dart';
 import 'package:spotube/components/LoaderShimmers/ShimmerPlaybuttonCard.dart';
 import 'package:spotube/components/Playlist/PlaylistCard.dart';
@@ -46,15 +47,13 @@ class CategoryCard extends HookConsumerWidget {
           padding: const EdgeInsets.all(8.0),
           child: Row(
             children: [
-              Text(
-                category.name ?? "Unknown",
-                style: Theme.of(context).textTheme.headline5,
-              ),
+              PlatformText.headline(category.name ?? "Unknown"),
             ],
           ),
         ),
         playlistQuery.hasError
-            ? Text("Something Went Wrong\n${playlistQuery.errors.first}")
+            ? PlatformText(
+                "Something Went Wrong\n${playlistQuery.errors.first}")
             : SizedBox(
                 height: 245,
                 child: ScrollConfiguration(

lib/components/Home/Genres.dart

@@ -42,7 +42,6 @@ class Genres extends HookConsumerWidget {
     ];
 
     return PlatformScaffold(
-      backgroundColor: PlatformProperty.all(Colors.transparent),
       body: ListView.builder(
         itemCount: categories.length,
         itemBuilder: (context, index) {

lib/components/Library/UserAlbums.dart

@@ -1,6 +1,7 @@
 import 'package:fl_query_hooks/fl_query_hooks.dart';
 import 'package:flutter/material.dart' hide Image;
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:platform_ui/platform_ui.dart';
 import 'package:spotube/components/Album/AlbumCard.dart';
 import 'package:spotube/components/LoaderShimmers/ShimmerPlaybuttonCard.dart';
 import 'package:spotube/provider/SpotifyDI.dart';
@@ -22,16 +23,21 @@ class UserAlbums extends HookConsumerWidget {
     }
 
     return SingleChildScrollView(
-      child: Padding(
-        padding: const EdgeInsets.all(8.0),
-        child: Wrap(
-          spacing: 20, // gap between adjacent chips
-          runSpacing: 20, // gap between lines
-          alignment: WrapAlignment.center,
-          children: albumsQuery.data!
-              .map((album) =>
-                  AlbumCard(TypeConversionUtils.simpleAlbum_X_Album(album)))
-              .toList(),
+      child: Material(
+        type: MaterialType.transparency,
+        color: PlatformTheme.of(context).scaffoldBackgroundColor,
+        child: Container(
+          width: double.infinity,
+          padding: const EdgeInsets.all(8.0),
+          child: Wrap(
+            spacing: 20, // gap between adjacent chips
+            runSpacing: 20, // gap between lines
+            alignment: WrapAlignment.center,
+            children: albumsQuery.data!
+                .map((album) =>
+                    AlbumCard(TypeConversionUtils.simpleAlbum_X_Album(album)))
+                .toList(),
+          ),
         ),
       ),
     );

lib/components/Library/UserArtists.dart

@@ -2,6 +2,7 @@ import 'package:fl_query_hooks/fl_query_hooks.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:platform_ui/platform_ui.dart';
 import 'package:spotify/spotify.dart';
 import 'package:spotube/components/Artist/ArtistCard.dart';
 import 'package:spotube/components/Shared/Waypoint.dart';
@@ -28,26 +29,30 @@ class UserArtists extends HookConsumerWidget {
         ? false
         : (artistQuery.pages.last?.items?.length ?? 0) == 15;
 
-    return GridView.builder(
-      itemCount: artists.length,
-      gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
-        maxCrossAxisExtent: 200,
-        mainAxisExtent: 250,
-        crossAxisSpacing: 20,
-        mainAxisSpacing: 20,
+    return Material(
+      type: MaterialType.transparency,
+      color: PlatformTheme.of(context).scaffoldBackgroundColor,
+      child: GridView.builder(
+        itemCount: artists.length,
+        gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
+          maxCrossAxisExtent: 200,
+          mainAxisExtent: 250,
+          crossAxisSpacing: 20,
+          mainAxisSpacing: 20,
+        ),
+        padding: const EdgeInsets.all(10),
+        itemBuilder: (context, index) {
+          if (index == artists.length - 1 && hasNextPage) {
+            return Waypoint(
+              onEnter: () {
+                artistQuery.fetchNextPage();
+              },
+              child: ArtistCard(artists[index]),
+            );
+          }
+          return ArtistCard(artists[index]);
+        },
       ),
-      padding: const EdgeInsets.all(10),
-      itemBuilder: (context, index) {
-        if (index == artists.length - 1 && hasNextPage) {
-          return Waypoint(
-            onEnter: () {
-              artistQuery.fetchNextPage();
-            },
-            child: ArtistCard(artists[index]),
-          );
-        }
-        return ArtistCard(artists[index]);
-      },
     );
   }
 }