Fix youtube (#105)

* fix YoutubeListItem layout

* fix contentColor for YoutubeChip

* wrap YoutubeContent with surface to align topBar and content color

* tweak selected background color for light theme in YoutubeChip

* tweak color for YoutubeChip

* tweak padding for Youtube chip and home

* tweak elevation for appbar according to theme

* tweak content elevation to align it with appBar

Author: wiryadev

demos/youtube/src/main/java/com/guru/composecookbook/youtube/components/YoutubeChip.kt

@@ -16,19 +16,23 @@ import androidx.compose.ui.unit.dp
 fun YoutubeChip(selected: Boolean, text: String, modifier: Modifier = Modifier) {
     Surface(
         color = when {
-            selected -> MaterialTheme.colors.onSurface
-            else -> Color.Transparent
+            selected -> MaterialTheme.colors.onSurface.copy(
+                alpha = if (MaterialTheme.colors.isLight) 0.7f else 1f
+            )
+            else -> MaterialTheme.colors.onSurface.copy(
+                alpha = if (MaterialTheme.colors.isLight) 0.04f else 0.07f
+            )
         },
         contentColor = when {
-            selected -> MaterialTheme.colors.onPrimary
-            else -> Color.LightGray
+            selected -> MaterialTheme.colors.surface
+            else -> MaterialTheme.colors.onSurface
         },
         shape = CircleShape,
         border = BorderStroke(
             width = 1.dp,
             color = when {
-                selected -> MaterialTheme.colors.primary
-                else -> Color.LightGray
+                selected -> MaterialTheme.colors.surface
+                else -> if (MaterialTheme.colors.isLight) Color.LightGray else Color.DarkGray
             }
         ),
         modifier = modifier
@@ -37,8 +41,10 @@ fun YoutubeChip(selected: Boolean, text: String, modifier: Modifier = Modifier)
             text = text,
             textAlign = TextAlign.Center,
             style = MaterialTheme.typography.body2,
-            modifier = Modifier.padding(8.dp)
+            modifier = Modifier.padding(
+                vertical = 8.dp,
+                horizontal = 12.dp,
+            )
         )
-
     }
 }

demos/youtube/src/main/java/com/guru/composecookbook/youtube/components/YoutubeHome.kt

@@ -2,6 +2,7 @@ package com.guru.composecookbook.youtube.components
 
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.lazy.LazyColumn
@@ -30,7 +31,7 @@ fun YoutubeHome() {
                 title = { Text(text = "Youtube") },
                 backgroundColor = MaterialTheme.colors.surface,
                 contentColor = MaterialTheme.colors.onSurface,
-                elevation = 8.dp,
+                elevation = if (MaterialTheme.colors.isLight) 0.dp else 8.dp,
                 navigationIcon = {
                     Icon(
                         painter = painterResource(id = R.drawable.ic_youtube),
@@ -62,7 +63,11 @@ fun YoutubeHome() {
             )
         },
         content = {
-            YoutubeContent()
+            Surface(
+                elevation = if (MaterialTheme.colors.isLight) 0.dp else 8.dp,
+            ) {
+                YoutubeContent()
+            }
         }
     )
 }
@@ -73,23 +78,29 @@ fun YoutubeContent() {
     // There is performance issue when using LazyRowFor and LazyColumnFor inside scrollableColumn
     // So using column for now.
     Column {
+        Divider()
         LazyRow(
-            modifier = Modifier.padding(vertical = 8.dp)
+            modifier = Modifier.padding(vertical = 8.dp),
+            contentPadding = PaddingValues(horizontal = 12.dp),
         ) {
             items(
                 items = tweets,
                 itemContent = {
                     YoutubeChip(
                         selected = it.id == 2,
                         text = it.author,
-                        modifier = Modifier.padding(8.dp)
+                        modifier = Modifier.padding(
+                            horizontal = 4.dp,
+                        )
                     )
-                })
+                }
+            )
         }
         LazyColumn {
             items(
                 items = tweets,
-                itemContent = { item -> YoutubeListItem(item) })
+                itemContent = { item -> YoutubeListItem(item) }
+            )
         }
     }
 }

demos/youtube/src/main/java/com/guru/composecookbook/youtube/components/YoutubeListItem.kt

@@ -19,10 +19,10 @@ import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
-import androidx.constraintlayout.compose.ChainStyle
 import androidx.constraintlayout.compose.ConstraintLayout
 import androidx.constraintlayout.compose.Dimension
 import com.guru.composecookbook.data.DemoDataProvider
@@ -37,7 +37,7 @@ fun YoutubeListItem(item: Tweet) {
             .clickable { }
     ) {
         val (image, authorImage, title, subtitle, button) = createRefs()
-        createVerticalChain(title, subtitle, chainStyle = ChainStyle.Packed)
+
         Image(
             painter = painterResource(id = item.tweetImageId),
             contentDescription = null,
@@ -67,6 +67,8 @@ fun YoutubeListItem(item: Tweet) {
         Text(
             text = item.text,
             style = MaterialTheme.typography.h6.copy(fontSize = 14.sp),
+            maxLines = 2,
+            overflow = TextOverflow.Ellipsis,
             modifier = Modifier.constrainAs(title) {
                 linkTo(
                     start = authorImage.end,
@@ -75,8 +77,7 @@ fun YoutubeListItem(item: Tweet) {
                     endMargin = 16.dp
                 )
                 linkTo(
-                    top = image.bottom,
-                    topMargin = 8.dp,
+                    top = authorImage.top,
                     bottom = subtitle.top
                 )
                 width = Dimension.fillToConstraints
@@ -87,10 +88,11 @@ fun YoutubeListItem(item: Tweet) {
             style = MaterialTheme.typography.subtitle2,
             modifier = Modifier
                 .constrainAs(subtitle) {
+                    bottom.linkTo(parent.bottom)
                     start.linkTo(title.start)
                     width = Dimension.fillToConstraints
                 }
-                .padding(bottom = 16.dp)
+                .padding(bottom = 24.dp)
         )
         IconButton(
             onClick = { },