redesign app phase 3

lib/components/MusicScreen/album_item_card.dart

@@ -25,14 +25,34 @@ class AlbumItemCard extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Card(
-      // In AlbumItem, the OpenContainer handles padding.
-      margin: EdgeInsets.zero,
+    final colorScheme = Theme.of(context).colorScheme;
+
+    return DecoratedBox(
+      decoration: BoxDecoration(
+        borderRadius: BorderRadius.circular(26),
+        boxShadow: [
+          BoxShadow(
+            color: colorScheme.shadow.withOpacity(0.32),
+            blurRadius: 22,
+            offset: const Offset(0, 12),
+          ),
+        ],
+      ),
       child: ClipRRect(
-        borderRadius: AlbumImage.borderRadius,
+        borderRadius: BorderRadius.circular(26),
         child: Stack(
           children: [
-            AlbumImage(item: item),
+            Positioned.fill(child: AlbumImage(item: item)),
+            Positioned.fill(
+              child: DecoratedBox(
+                decoration: BoxDecoration(
+                  border: Border.all(
+                    color: Colors.white.withOpacity(0.10),
+                  ),
+                  borderRadius: BorderRadius.circular(26),
+                ),
+              ),
+            ),
             addSettingsListener
                 ? // We need this ValueListenableBuilder to react to changes to
                 // showTextOnGridView. When shown in a MusicScreen, this widget
@@ -88,19 +108,21 @@ class _AlbumItemCardText extends StatelessWidget {
     return Align(
       alignment: Alignment.bottomCenter,
       child: Container(
+        width: double.infinity,
         decoration: BoxDecoration(
           gradient: LinearGradient(
             begin: Alignment.bottomCenter,
             end: Alignment.topCenter,
             colors: [
-              // We fade from half transparent black to transparent so that text is visible on bright images
-              Colors.black.withOpacity(0.5),
+              Colors.black.withOpacity(0.86),
+              Colors.black.withOpacity(0.24),
               Colors.transparent,
             ],
+            stops: const [0.0, 0.58, 1.0],
           ),
         ),
         child: Padding(
-          padding: const EdgeInsets.all(8.0),
+          padding: const EdgeInsets.fromLTRB(14, 46, 14, 14),
           child: Align(
             alignment: Alignment.bottomLeft,
             child: Column(
@@ -110,19 +132,22 @@ class _AlbumItemCardText extends StatelessWidget {
                 Text(
                   item.name ?? "Unknown Name",
                   overflow: TextOverflow.ellipsis,
-                  maxLines: 3,
-                  style: Theme.of(context)
-                      .textTheme
-                      .titleLarge!
-                      .copyWith(color: Colors.white),
+                  maxLines: 2,
+                  style: Theme.of(context).textTheme.titleMedium!.copyWith(
+                        color: Colors.white,
+                        fontWeight: FontWeight.w800,
+                        height: 1.05,
+                      ),
                 ),
                 if (subtitle != null)
                   Text(
                     subtitle,
+                    maxLines: 1,
+                    overflow: TextOverflow.ellipsis,
                     style: Theme.of(context)
                         .textTheme
                         .bodySmall!
-                        .copyWith(color: Colors.white.withOpacity(0.7)),
+                        .copyWith(color: Colors.white.withOpacity(0.72)),
                   )
               ],
             ),
@@ -131,4 +156,4 @@ class _AlbumItemCardText extends StatelessWidget {
       ),
     );
   }
-}
+}