From a3eccce0ec54bf34c6c22845f815ffb6353d5f67 Mon Sep 17 00:00:00 2001 From: shed Date: Thu, 7 Apr 2022 00:05:13 +0300 Subject: [PATCH] UI polish for "For You" Onboarding Screen [http://b/228070817] 1. Fixed - Primary container surrounding check mark is too large - refer to Figma for padding values 2.Fixed - Done" button color should be black. 3. Fixed - Margin between bottom of ""done"" button and top of card should be increased. 4. Fixed - Elements within card container should have 16px of padding. Corners should be rounded to 24px 5. Fixed: Headline font should be Euclid and needs to be reduced in size. Refer to type styles in Figma for full specs. 6. Not Fixed (see b/227246491)- Missing save icon 7. Fixed: Date font should be Roboto mono. 8. Not Fixed: Missing ""unread"" indicator dot. 9. Not Fixed: Missing source URL or category tag 8. Fixed: Body copy in card should be Roboto (refer to type styles in Figma for full specs) Change-Id: I76252bd40037f7f7a987c8d45681b9b6b6243823 --- .../nowinandroid/core/ui/NewsResourceCard.kt | 1 + .../core/ui/component/ToggleButton.kt | 6 ++++- .../feature/foryou/ForYouScreen.kt | 22 +++++++++++++++---- 3 files changed, 24 insertions(+), 5 deletions(-) diff --git a/core-ui/src/main/java/com/google/samples/apps/nowinandroid/core/ui/NewsResourceCard.kt b/core-ui/src/main/java/com/google/samples/apps/nowinandroid/core/ui/NewsResourceCard.kt index d31f988ce..4242f2f33 100644 --- a/core-ui/src/main/java/com/google/samples/apps/nowinandroid/core/ui/NewsResourceCard.kt +++ b/core-ui/src/main/java/com/google/samples/apps/nowinandroid/core/ui/NewsResourceCard.kt @@ -141,6 +141,7 @@ fun NewsResourceHeaderImage( }, modifier = Modifier .fillMaxWidth() + .clip(RoundedCornerShape(topEnd = 24.dp, topStart = 24.dp)) .height(180.dp), contentScale = ContentScale.Crop, model = headerImageUrl, diff --git a/core-ui/src/main/java/com/google/samples/apps/nowinandroid/core/ui/component/ToggleButton.kt b/core-ui/src/main/java/com/google/samples/apps/nowinandroid/core/ui/component/ToggleButton.kt index 19f0a4bc2..df2b67f73 100644 --- a/core-ui/src/main/java/com/google/samples/apps/nowinandroid/core/ui/component/ToggleButton.kt +++ b/core-ui/src/main/java/com/google/samples/apps/nowinandroid/core/ui/component/ToggleButton.kt @@ -26,6 +26,7 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.draw.drawBehind import androidx.compose.ui.platform.LocalDensity import androidx.compose.ui.semantics.Role +import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp /** @@ -38,6 +39,8 @@ import androidx.compose.ui.unit.dp * @param enabled Controls the enabled state of the toggle button. When `false`, this toggle button * will not be clickable and will appear disabled to accessibility services. * @param icon The icon content to show when unchecked. + * @param checkedBackgroundRadius The background radius that will be used to draw a background color + * behind the checkedIcon when this toggle button is checked. * @param checkedIcon The icon content to show when checked. */ @Composable @@ -47,11 +50,12 @@ fun NiaToggleButton( modifier: Modifier = Modifier, enabled: Boolean = true, icon: @Composable () -> Unit, + checkedBackgroundRadius: Dp = NiaToggleButtonDefaults.ToggleButtonSize / 2, checkedIcon: @Composable () -> Unit = icon ) { val checkedColor = MaterialTheme.colorScheme.primaryContainer val checkedRadius = with(LocalDensity.current) { - (NiaToggleButtonDefaults.ToggleButtonSize / 2).toPx() + checkedBackgroundRadius.toPx() } IconButton( onClick = { onCheckedChange(!checked) }, diff --git a/feature-foryou/src/main/java/com/google/samples/apps/nowinandroid/feature/foryou/ForYouScreen.kt b/feature-foryou/src/main/java/com/google/samples/apps/nowinandroid/feature/foryou/ForYouScreen.kt index 2c790d4b8..b65093d12 100644 --- a/feature-foryou/src/main/java/com/google/samples/apps/nowinandroid/feature/foryou/ForYouScreen.kt +++ b/feature-foryou/src/main/java/com/google/samples/apps/nowinandroid/feature/foryou/ForYouScreen.kt @@ -49,6 +49,7 @@ import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.Search import androidx.compose.material.icons.outlined.AccountCircle import androidx.compose.material3.Button +import androidx.compose.material3.ButtonDefaults import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.Icon import androidx.compose.material3.MaterialTheme @@ -270,9 +271,15 @@ private fun LazyListScope.InterestsSelection( enabled = interestsSelectionState.canSaveInterests, modifier = Modifier .padding(horizontal = 40.dp) - .width(364.dp) + .width(364.dp), + colors = ButtonDefaults.buttonColors( + containerColor = MaterialTheme.colorScheme.onBackground + ) ) { - Text(text = stringResource(R.string.done)) + Text( + text = stringResource(R.string.done), + color = MaterialTheme.colorScheme.onPrimary + ) } } } @@ -330,6 +337,7 @@ private fun SingleTopicButton( .width(264.dp) .heightIn(min = 56.dp), shape = RoundedCornerShape(corner = CornerSize(8.dp)), + color = MaterialTheme.colorScheme.surface, selected = isSelected, onClick = { onClick(topicId, !isSelected) @@ -354,10 +362,16 @@ private fun SingleTopicButton( checked = isSelected, onCheckedChange = { checked -> onClick(topicId, !isSelected) }, icon = { - Icon(imageVector = NiaIcons.Add, contentDescription = name) + Icon( + imageVector = NiaIcons.Add, contentDescription = name, + tint = MaterialTheme.colorScheme.onSurface + ) }, checkedIcon = { - Icon(imageVector = NiaIcons.Check, contentDescription = name) + Icon( + imageVector = NiaIcons.Check, contentDescription = name, + tint = MaterialTheme.colorScheme.onSurface + ) } ) }