redesign app phase 3

lib/components/MusicScreen/album_item_list_tile.dart

@@ -25,24 +25,61 @@ class AlbumItemListTile extends StatelessWidget {
   Widget build(BuildContext context) {
     final jellyfinApiHelper = GetIt.instance<JellyfinApiHelper>();
     final subtitle = generateSubtitle(item, parentType, context);
+    final colorScheme = Theme.of(context).colorScheme;
 
-    return ListTile(
-      // This widget is used on the add to playlist screen, so we allow a custom
-      // onTap to be passed as an argument.
-      onTap: onTap,
-      leading: AlbumImage(item: item),
-      title: Text(
-        item.name ?? AppLocalizations.of(context)!.unknownName,
-        overflow: TextOverflow.ellipsis,
+    return Padding(
+      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 5),
+      child: Material(
+        color: colorScheme.surfaceVariant.withOpacity(0.42),
+        borderRadius: BorderRadius.circular(22),
+        clipBehavior: Clip.antiAlias,
+        child: DecoratedBox(
+          decoration: BoxDecoration(
+            borderRadius: BorderRadius.circular(22),
+            border: Border.all(
+              color: colorScheme.outlineVariant.withOpacity(0.24),
+            ),
+          ),
+          child: ListTile(
+            // This widget is used on the add to playlist screen, so we allow a
+            // custom onTap to be passed as an argument.
+            onTap: onTap,
+            contentPadding: const EdgeInsets.symmetric(
+              horizontal: 12,
+              vertical: 8,
+            ),
+            leading: SizedBox.square(
+              dimension: 62,
+              child: ClipRRect(
+                borderRadius: BorderRadius.circular(18),
+                child: AlbumImage(item: item),
+              ),
+            ),
+            title: Text(
+              item.name ?? AppLocalizations.of(context)!.unknownName,
+              overflow: TextOverflow.ellipsis,
+              style: Theme.of(context).textTheme.titleMedium?.copyWith(
+                    fontWeight: FontWeight.w800,
+                    color: colorScheme.onSurface,
+                  ),
+            ),
+            subtitle: subtitle == null
+                ? null
+                : Text(
+                    subtitle,
+                    maxLines: 1,
+                    overflow: TextOverflow.ellipsis,
+                    style: TextStyle(color: colorScheme.onSurfaceVariant),
+                  ),
+            trailing: jellyfinApiHelper.selectedMixAlbumIds.contains(item.id)
+                ? Icon(Icons.explore_rounded, color: colorScheme.primary)
+                : Icon(
+                    Icons.chevron_right_rounded,
+                    color: colorScheme.onSurfaceVariant,
+                  ),
+          ),
+        ),
       ),
-      subtitle: subtitle == null ? null : Text(
-        subtitle,
-        maxLines: 1,
-        overflow: TextOverflow.ellipsis,
-      ),
-      trailing: jellyfinApiHelper.selectedMixAlbumIds.contains(item.id)
-          ? const Icon(Icons.explore)
-          : null,
     );
   }
 }