redesign app phase 1

lib/components/PlayerScreen/player_buttons.dart

@@ -1,7 +1,7 @@
 import 'package:audio_service/audio_service.dart';
 import 'package:flutter/material.dart';
 import 'package:get_it/get_it.dart';
-import 'package:flutter_gen/gen_l10n/app_localizations.dart';
+import 'package:finamp/l10n/app_localizations.dart';
 
 import '../../services/music_player_background_task.dart';
 
@@ -15,6 +15,8 @@ class PlayerButtons extends StatelessWidget {
       stream: audioHandler.playbackState,
       builder: (context, snapshot) {
         final PlaybackState? playbackState = snapshot.data;
+        final colorScheme = Theme.of(context).colorScheme;
+
         return Row(
           mainAxisSize: MainAxisSize.max,
           mainAxisAlignment: MainAxisAlignment.spaceBetween,
@@ -28,41 +30,39 @@ class PlayerButtons extends StatelessWidget {
                 playbackState == null
                     ? AudioServiceShuffleMode.none
                     : playbackState.shuffleMode,
-                Theme.of(context).colorScheme.secondary,
+                colorScheme.primary,
               ),
               onPressed: playbackState != null
                   ? () async {
                       if (playbackState.shuffleMode ==
                           AudioServiceShuffleMode.all) {
-                        await audioHandler
-                            .setShuffleMode(AudioServiceShuffleMode.none);
+                        await audioHandler.setShuffleMode(
+                          AudioServiceShuffleMode.none,
+                        );
                       } else {
-                        await audioHandler
-                            .setShuffleMode(AudioServiceShuffleMode.all);
+                        await audioHandler.setShuffleMode(
+                          AudioServiceShuffleMode.all,
+                        );
                       }
                     }
                   : null,
-              iconSize: 20,
+              iconSize: 22,
             ),
             IconButton(
               tooltip: AppLocalizations.of(context)!.skipToPrevious,
-              icon: const Icon(Icons.skip_previous),
+              icon: const Icon(Icons.skip_previous_rounded),
               onPressed: playbackState != null
                   ? () async => await audioHandler.skipToPrevious()
                   : null,
-              iconSize: 36,
+              iconSize: 38,
+              style: IconButton.styleFrom(
+                backgroundColor: colorScheme.surfaceVariant.withOpacity(0.44),
+              ),
             ),
-            SizedBox(
-              height: 56,
-              width: 56,
-              child: FloatingActionButton(
+            SizedBox.square(
+              dimension: 68,
+              child: IconButton.filled(
                 tooltip: AppLocalizations.of(context)!.togglePlayback,
-                // We set a heroTag because otherwise the play button on AlbumScreenContent will do hero widget stuff
-                heroTag: "PlayerScreenFAB",
-                backgroundColor: Theme.of(context).colorScheme.primary,
-                foregroundColor: Theme.of(context).colorScheme.onPrimary,
-                splashColor:
-                    Theme.of(context).colorScheme.onPrimary.withOpacity(0.24),
                 onPressed: playbackState != null
                     ? () async {
                         if (playbackState.playing) {
@@ -72,21 +72,25 @@ class PlayerButtons extends StatelessWidget {
                         }
                       }
                     : null,
-                child: Icon(
+                icon: Icon(
                   playbackState == null || playbackState.playing
                       ? Icons.pause
                       : Icons.play_arrow,
-                  size: 36,
+                  size: 42,
                 ),
               ),
             ),
             IconButton(
-                tooltip: AppLocalizations.of(context)!.skipToNext,
-                icon: const Icon(Icons.skip_next),
-                onPressed: playbackState != null
-                    ? () async => audioHandler.skipToNext()
-                    : null,
-                iconSize: 36),
+              tooltip: AppLocalizations.of(context)!.skipToNext,
+              icon: const Icon(Icons.skip_next_rounded),
+              onPressed: playbackState != null
+                  ? () async => audioHandler.skipToNext()
+                  : null,
+              iconSize: 38,
+              style: IconButton.styleFrom(
+                backgroundColor: colorScheme.surfaceVariant.withOpacity(0.44),
+              ),
+            ),
             IconButton(
               tooltip: playbackState?.repeatMode == AudioServiceRepeatMode.all
                   ? AppLocalizations.of(context)!.loopModeAllTooltip
@@ -97,26 +101,29 @@ class PlayerButtons extends StatelessWidget {
                 playbackState == null
                     ? AudioServiceRepeatMode.none
                     : playbackState.repeatMode,
-                Theme.of(context).colorScheme.secondary,
+                colorScheme.primary,
               ),
               onPressed: playbackState != null
                   ? () async {
                       // Cyles from none -> all -> one
                       if (playbackState.repeatMode ==
                           AudioServiceRepeatMode.none) {
-                        await audioHandler
-                            .setRepeatMode(AudioServiceRepeatMode.all);
+                        await audioHandler.setRepeatMode(
+                          AudioServiceRepeatMode.all,
+                        );
                       } else if (playbackState.repeatMode ==
                           AudioServiceRepeatMode.all) {
-                        await audioHandler
-                            .setRepeatMode(AudioServiceRepeatMode.one);
+                        await audioHandler.setRepeatMode(
+                          AudioServiceRepeatMode.one,
+                        );
                       } else {
-                        await audioHandler
-                            .setRepeatMode(AudioServiceRepeatMode.none);
+                        await audioHandler.setRepeatMode(
+                          AudioServiceRepeatMode.none,
+                        );
                       }
                     }
                   : null,
-              iconSize: 20,
+              iconSize: 22,
             ),
           ],
         );
@@ -125,7 +132,9 @@ class PlayerButtons extends StatelessWidget {
   }
 
   Widget _getRepeatingIcon(
-      AudioServiceRepeatMode repeatMode, Color iconColour) {
+    AudioServiceRepeatMode repeatMode,
+    Color iconColour,
+  ) {
     if (repeatMode == AudioServiceRepeatMode.all) {
       return Icon(Icons.repeat, color: iconColour);
     } else if (repeatMode == AudioServiceRepeatMode.one) {
@@ -136,7 +145,9 @@ class PlayerButtons extends StatelessWidget {
   }
 
   Icon _getShufflingIcon(
-      AudioServiceShuffleMode shuffleMode, Color iconColour) {
+    AudioServiceShuffleMode shuffleMode,
+    Color iconColour,
+  ) {
     if (shuffleMode == AudioServiceShuffleMode.all) {
       return Icon(Icons.shuffle, color: iconColour);
     } else {