refactor: improve sort button code

Author: gokadzev

lib/screens/playlist_page.dart

@@ -214,11 +214,15 @@ class _PlaylistPageState extends State<PlaylistPage> {
                   if (_playlist['list'].isNotEmpty) ...[
                     SliverToBoxAdapter(
                       child: Padding(
-                        padding: const EdgeInsets.symmetric(
-                          vertical: 10,
-                          horizontal: 20,
+                        padding: const EdgeInsets.only(
+                          top: 15,
+                          bottom: 20,
+                          right: 20,
+                        ),
+                        child: Align(
+                          alignment: Alignment.centerRight,
+                          child: _buildSortSongActionButton(),
                         ),
-                        child: buildSongActionsRow(),
                       ),
                     ),
                     SliverPadding(
@@ -616,13 +620,6 @@ class _PlaylistPageState extends State<PlaylistPage> {
     _pagingController.refresh();
   }
 
-  Widget buildSongActionsRow() {
-    return Row(
-      mainAxisAlignment: MainAxisAlignment.end,
-      children: [_buildSortSongActionButton()],
-    );
-  }
-
   Widget _buildSongListItem(dynamic song, int index, bool isRemovable) {
     final items = _pagingController.items ?? [];
     final totalItems = items.length;

lib/widgets/sort_button.dart

@@ -21,6 +21,7 @@
 
 import 'package:fluentui_system_icons/fluentui_system_icons.dart';
 import 'package:flutter/material.dart';
+import 'package:musify/utilities/common_variables.dart';
 
 typedef SortTypeToStringConverter<T> = String Function(T type);
 typedef OnSortTypeSelected<T> = void Function(T type);
@@ -42,29 +43,33 @@ class SortButton<T extends Enum> extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return PopupMenuButton<T>(
-      padding: EdgeInsets.zero,
-      elevation: 2,
+      padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
+      elevation: 1,
       offset: const Offset(0, 40),
-      child: Row(
-        mainAxisSize: MainAxisSize.min,
-        children: [
-          Icon(
-            FluentIcons.filter_16_filled,
-            color: Theme.of(context).colorScheme.primary,
-            size: 20,
-          ),
-          const SizedBox(width: 8),
-          Text(
-            sortTypeToString(currentSortType),
-            style: TextStyle(
-              color: Theme.of(context).colorScheme.onSurface,
-              fontSize: 15,
-              fontWeight: FontWeight.w600,
-              letterSpacing: 0.15,
-              height: 1.2,
+      borderRadius: commonBarRadius,
+      child: Padding(
+        padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
+        child: Row(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Icon(
+              FluentIcons.filter_16_filled,
+              color: Theme.of(context).colorScheme.primary,
+              size: 20,
             ),
-          ),
-        ],
+            const SizedBox(width: 8),
+            Text(
+              sortTypeToString(currentSortType),
+              style: TextStyle(
+                color: Theme.of(context).colorScheme.onSurface,
+                fontSize: 15,
+                fontWeight: FontWeight.w600,
+                letterSpacing: 0.15,
+                height: 1.2,
+              ),
+            ),
+          ],
+        ),
       ),
       itemBuilder: (context) {
         return sortTypes.map((type) {