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

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,

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) },

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
+                    )
                 }
             )
         }