From 827b2ad83eb0f62fc9ef5ea34528c88588f1fdbc Mon Sep 17 00:00:00 2001 From: Rikin Marfatia Date: Wed, 17 Jul 2024 14:20:33 -0700 Subject: [PATCH] Updating Previews for Snapshot Baseline (#75) This PR is just updating and organizing our Previews for Screens and Components. The ideas is that every component has multiple previews for different visual states and also different logical states. Part of the Goal is is to create a `MultiPreview` annotation that we can just tack on to all future previews with all the desired test states. --- .../com/emergetools/hackernews/AppActivity.kt | 9 + .../com/emergetools/hackernews/AppDomain.kt | 7 +- .../features/comments/CommentsScreen.kt | 158 +++++------ .../comments/HtmlToAnnotatedString.kt | 4 +- .../features/settings/SettingsScreen.kt | 14 +- .../features/stories/StoriesScreen.kt | 258 +++++++++--------- .../features/stories/StoryScreen.kt | 10 - .../emergetools/hackernews/ui/theme/Color.kt | 26 +- .../emergetools/hackernews/ui/theme/Theme.kt | 25 +- .../emergetools/hackernews/ui/theme/Type.kt | 1 + 10 files changed, 275 insertions(+), 237 deletions(-) diff --git a/android/app/src/main/java/com/emergetools/hackernews/AppActivity.kt b/android/app/src/main/java/com/emergetools/hackernews/AppActivity.kt index 2a615bfa..a012be46 100644 --- a/android/app/src/main/java/com/emergetools/hackernews/AppActivity.kt +++ b/android/app/src/main/java/com/emergetools/hackernews/AppActivity.kt @@ -11,8 +11,10 @@ import androidx.compose.animation.slideOut import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.padding import androidx.compose.material3.Icon +import androidx.compose.material3.MaterialTheme import androidx.compose.material3.NavigationBar import androidx.compose.material3.NavigationBarItem +import androidx.compose.material3.NavigationBarItemDefaults import androidx.compose.material3.Scaffold import androidx.compose.runtime.Composable import androidx.compose.runtime.CompositionLocalProvider @@ -37,6 +39,9 @@ import com.emergetools.hackernews.features.stories.Stories import com.emergetools.hackernews.features.stories.StoriesDestinations.Feed import com.emergetools.hackernews.features.stories.storiesGraph import com.emergetools.hackernews.ui.theme.HackerNewsTheme +import com.emergetools.hackernews.ui.theme.HackerOrangeLight +import com.emergetools.hackernews.ui.theme.HackerRed +import com.emergetools.hackernews.ui.theme.HackerRedLight class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { @@ -76,6 +81,10 @@ fun App() { state.navItems.forEach { navItem -> NavigationBarItem( selected = navItem.selected, + colors = NavigationBarItemDefaults.colors( + selectedIconColor = MaterialTheme.colorScheme.primary, + indicatorColor = MaterialTheme.colorScheme.primaryContainer + ), onClick = { model.actions(AppAction.NavItemSelected(navItem)) diff --git a/android/app/src/main/java/com/emergetools/hackernews/AppDomain.kt b/android/app/src/main/java/com/emergetools/hackernews/AppDomain.kt index d7d54ec6..c035fd3c 100644 --- a/android/app/src/main/java/com/emergetools/hackernews/AppDomain.kt +++ b/android/app/src/main/java/com/emergetools/hackernews/AppDomain.kt @@ -1,13 +1,8 @@ package com.emergetools.hackernews import androidx.annotation.DrawableRes -import androidx.compose.material.icons.Icons -import androidx.compose.material.icons.rounded.Menu -import androidx.compose.material.icons.rounded.Settings -import androidx.compose.ui.graphics.vector.ImageVector import androidx.lifecycle.ViewModel import androidx.navigation.NavDestination -import com.emergetools.hackernews.features.bookmarks.BookmarksDestinations import com.emergetools.hackernews.features.bookmarks.BookmarksDestinations.Bookmarks import com.emergetools.hackernews.features.settings.SettingsDestinations.Settings import com.emergetools.hackernews.features.stories.Stories @@ -20,7 +15,7 @@ data class NavItem( val icon: Int, val label: String, val route: Any, - val selected: Boolean + val selected: Boolean, ) data class AppState( diff --git a/android/app/src/main/java/com/emergetools/hackernews/features/comments/CommentsScreen.kt b/android/app/src/main/java/com/emergetools/hackernews/features/comments/CommentsScreen.kt index 5c75a426..039f6add 100644 --- a/android/app/src/main/java/com/emergetools/hackernews/features/comments/CommentsScreen.kt +++ b/android/app/src/main/java/com/emergetools/hackernews/features/comments/CommentsScreen.kt @@ -18,7 +18,6 @@ import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.foundation.lazy.items import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material.icons.Icons -import androidx.compose.material.icons.filled.MoreVert import androidx.compose.material.icons.filled.ThumbUp import androidx.compose.material3.Icon import androidx.compose.material3.MaterialTheme @@ -34,10 +33,10 @@ import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.PathEffect import androidx.compose.ui.graphics.StrokeCap import androidx.compose.ui.text.font.FontWeight -import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.tooling.preview.PreviewLightDark import androidx.compose.ui.unit.dp -import com.emergetools.hackernews.ui.theme.HNOrange import com.emergetools.hackernews.ui.theme.HackerNewsTheme +import com.emergetools.hackernews.ui.theme.HackerOrange @Composable fun CommentsScreen(state: CommentsState) { @@ -83,7 +82,7 @@ fun CommentsScreen(state: CommentsState) { } } -@Preview +@PreviewLightDark @Composable private fun CommentsScreenPreview() { HackerNewsTheme { @@ -117,7 +116,7 @@ private fun CommentsScreenPreview() { } } -@Preview +@PreviewLightDark @Composable private fun CommentsScreenLoadingPreview() { HackerNewsTheme { @@ -127,46 +126,6 @@ private fun CommentsScreenLoadingPreview() { } } -@Preview -@Composable -fun CommentRowPreview() { - HackerNewsTheme { - Column { - CommentRow( - state = CommentState.Content( - id = 1, - level = 0, - author = "rikinm", - content = "Hello Parent", - timeLabel = "2d ago", - children = listOf( - CommentState.Content( - id = 2, - level = 1, - author = "vasantm", - content = "Hello Child", - timeLabel = "2h ago", - children = listOf() - ) - ) - ) - ) - } - } -} - -@Preview -@Composable -fun CommentRowLoadingPreview() { - HackerNewsTheme { - Column { - CommentRow( - state = CommentState.Loading(level = 0) - ) - } - } -} - @Composable fun CommentRow(state: CommentState) { val startPadding = (state.level * 16).dp @@ -190,12 +149,13 @@ fun CommentRow(state: CommentState) { Text( text = state.author, style = MaterialTheme.typography.labelSmall, - color = HNOrange, + color = HackerOrange, fontWeight = FontWeight.Medium ) Text( - "•", - style = MaterialTheme.typography.labelSmall + text = "•", + style = MaterialTheme.typography.labelSmall, + color = MaterialTheme.colorScheme.onSurface ) Text( text = state.timeLabel, @@ -207,18 +167,15 @@ fun CommentRow(state: CommentState) { Icon( modifier = Modifier.size(16.dp), imageVector = Icons.Default.ThumbUp, + tint = MaterialTheme.colorScheme.onSurface, contentDescription = "upvote" ) - Icon( - modifier = Modifier.size(16.dp), - imageVector = Icons.Default.MoreVert, - contentDescription = "options" - ) } Row { Text( text = state.content.parseAsHtml(), - style = MaterialTheme.typography.labelSmall + style = MaterialTheme.typography.labelSmall, + color = MaterialTheme.colorScheme.onSurface, ) } } @@ -233,7 +190,7 @@ fun CommentRow(state: CommentState) { .width(40.dp) .height(14.dp) .clip(RoundedCornerShape(4.dp)) - .background(HNOrange) + .background(HackerOrange) ) Box( @@ -275,34 +232,43 @@ fun CommentRow(state: CommentState) { } } -@Preview +@PreviewLightDark @Composable -private fun ItemHeaderPreview() { +fun CommentRowPreview() { HackerNewsTheme { - ItemHeader( - state = HeaderState.Content( - title = "Show HN: A super neat HN client for Android", - author = "rikinm", - points = 69, - body = "Hi there" - ), - modifier = Modifier - .fillMaxWidth() - .wrapContentHeight() - ) + Column { + CommentRow( + state = CommentState.Content( + id = 1, + level = 0, + author = "rikinm", + content = "Hello Parent", + timeLabel = "2d ago", + children = listOf( + CommentState.Content( + id = 2, + level = 1, + author = "vasantm", + content = "Hello Child", + timeLabel = "2h ago", + children = listOf() + ) + ) + ) + ) + } } } -@Preview +@PreviewLightDark @Composable -private fun ItemHeaderLoadingPreview() { +fun CommentRowLoadingPreview() { HackerNewsTheme { - ItemHeader( - state = HeaderState.Loading, - modifier = Modifier - .fillMaxWidth() - .wrapContentHeight() - ) + Column { + CommentRow( + state = CommentState.Loading(level = 0) + ) + } } } @@ -311,7 +277,6 @@ fun ItemHeader( state: HeaderState, modifier: Modifier = Modifier ) { - Column( modifier = modifier .background(color = MaterialTheme.colorScheme.background) @@ -322,11 +287,13 @@ fun ItemHeader( is HeaderState.Content -> { Text( text = state.title, + color = MaterialTheme.colorScheme.onSurface, style = MaterialTheme.typography.titleSmall ) if (state.body != null) { Text( text = state.body.parseAsHtml(), + color = MaterialTheme.colorScheme.onSurface, style = MaterialTheme.typography.labelSmall, ) } @@ -337,14 +304,17 @@ fun ItemHeader( ) { Text( text = "${state.points}", + color = MaterialTheme.colorScheme.onSurface, style = MaterialTheme.typography.labelSmall ) Text( text = "•", + color = MaterialTheme.colorScheme.onSurface, style = MaterialTheme.typography.labelSmall ) Text( text = state.author, + color = MaterialTheme.colorScheme.onSurface, style = MaterialTheme.typography.labelSmall, fontWeight = FontWeight.Medium ) @@ -411,4 +381,36 @@ fun ItemHeader( } } } -} \ No newline at end of file +} + +@PreviewLightDark +@Composable +private fun ItemHeaderPreview() { + HackerNewsTheme { + ItemHeader( + state = HeaderState.Content( + title = "Show HN: A super neat HN client for Android", + author = "rikinm", + points = 69, + body = "Hi there" + ), + modifier = Modifier + .fillMaxWidth() + .wrapContentHeight() + ) + } +} + +@PreviewLightDark +@Composable +private fun ItemHeaderLoadingPreview() { + HackerNewsTheme { + ItemHeader( + state = HeaderState.Loading, + modifier = Modifier + .fillMaxWidth() + .wrapContentHeight() + ) + } +} + diff --git a/android/app/src/main/java/com/emergetools/hackernews/features/comments/HtmlToAnnotatedString.kt b/android/app/src/main/java/com/emergetools/hackernews/features/comments/HtmlToAnnotatedString.kt index b46616b9..e3a08194 100644 --- a/android/app/src/main/java/com/emergetools/hackernews/features/comments/HtmlToAnnotatedString.kt +++ b/android/app/src/main/java/com/emergetools/hackernews/features/comments/HtmlToAnnotatedString.kt @@ -30,7 +30,7 @@ import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.text.style.TextDecoration import androidx.compose.ui.unit.em import androidx.core.text.HtmlCompat -import com.emergetools.hackernews.ui.theme.HNOrange +import com.emergetools.hackernews.ui.theme.HackerOrange /** * This code will be added to Compose 1.7, just some utilities to convert HTML Spanned to Annotated String @@ -108,7 +108,7 @@ private fun AnnotatedString.Builder.addSpan(span: Any, start: Int, end: Int) { url, styles = TextLinkStyles( style = SpanStyle( - color = HNOrange + color = HackerOrange ) ) ), diff --git a/android/app/src/main/java/com/emergetools/hackernews/features/settings/SettingsScreen.kt b/android/app/src/main/java/com/emergetools/hackernews/features/settings/SettingsScreen.kt index ec971d30..0be3d197 100644 --- a/android/app/src/main/java/com/emergetools/hackernews/features/settings/SettingsScreen.kt +++ b/android/app/src/main/java/com/emergetools/hackernews/features/settings/SettingsScreen.kt @@ -1,7 +1,9 @@ package com.emergetools.hackernews.features.settings +import androidx.compose.foundation.background import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Text @@ -13,8 +15,16 @@ import com.emergetools.hackernews.ui.theme.HackerNewsTheme @Composable fun SettingsScreen() { - Column(modifier = Modifier.fillMaxSize().padding(8.dp)) { - Text("Settings", style = MaterialTheme.typography.titleMedium) + Column( + modifier = Modifier + .fillMaxSize() + .background(color = MaterialTheme.colorScheme.background) + ) { + Text( + text = "Settings", + modifier = Modifier.fillMaxWidth().padding(8.dp), + style = MaterialTheme.typography.titleMedium + ) } } diff --git a/android/app/src/main/java/com/emergetools/hackernews/features/stories/StoriesScreen.kt b/android/app/src/main/java/com/emergetools/hackernews/features/stories/StoriesScreen.kt index bf0c4d97..5a54c22c 100644 --- a/android/app/src/main/java/com/emergetools/hackernews/features/stories/StoriesScreen.kt +++ b/android/app/src/main/java/com/emergetools/hackernews/features/stories/StoriesScreen.kt @@ -45,26 +45,21 @@ import androidx.compose.ui.draw.clip import androidx.compose.ui.draw.drawBehind import androidx.compose.ui.draw.drawWithContent import androidx.compose.ui.geometry.Offset -import androidx.compose.ui.geometry.Size import androidx.compose.ui.geometry.center import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.Path import androidx.compose.ui.graphics.RectangleShape import androidx.compose.ui.graphics.StrokeCap -import androidx.compose.ui.graphics.StrokeJoin -import androidx.compose.ui.graphics.drawscope.DrawStyle -import androidx.compose.ui.graphics.drawscope.Fill -import androidx.compose.ui.graphics.drawscope.Stroke import androidx.compose.ui.graphics.graphicsLayer import androidx.compose.ui.res.painterResource import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.style.TextAlign -import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.tooling.preview.PreviewLightDark import androidx.compose.ui.unit.dp import com.emergetools.hackernews.R import com.emergetools.hackernews.features.comments.CommentsDestinations -import com.emergetools.hackernews.ui.theme.HNOrange import com.emergetools.hackernews.ui.theme.HackerNewsTheme +import com.emergetools.hackernews.ui.theme.HackerOrange @OptIn(ExperimentalMaterial3Api::class) @Composable @@ -154,74 +149,7 @@ fun StoriesScreen( } } -@Preview -@Composable -private fun FeedSelectionPreview() { - HackerNewsTheme { - FeedSelection( - feedType = FeedType.Top, - onSelected = {} - ) - } -} - -@Composable -private fun FeedSelection( - modifier: Modifier = Modifier, - feedType: FeedType, - onSelected: (FeedType) -> Unit, -) { - val selectedTab = remember(feedType) { feedType.ordinal } - - TabRow( - selectedTabIndex = selectedTab, - modifier = modifier.wrapContentWidth(), - containerColor = MaterialTheme.colorScheme.background, - contentColor = MaterialTheme.colorScheme.onBackground, - indicator = { tabPositions -> - if (selectedTab < tabPositions.size) { - Box( - modifier = Modifier - .tabIndicatorOffset(tabPositions[selectedTab]) - .height(2.dp) - .drawBehind { - val barWidth = size.width * 0.33f - val start = size.center.x - barWidth / 2f - val end = size.center.x + barWidth / 2f - val bottom = size.height - 16f - drawLine( - start = Offset(start, bottom), - end = Offset(end, bottom), - color = HNOrange, - strokeWidth = 4f, - cap = StrokeCap.Round, - ) - } - ) - } - }, - divider = {} - ) { - FeedType.entries.forEach { feedType -> - Text( - modifier = Modifier - .fillMaxWidth() - .padding(8.dp) - .clickable( - indication = null, - interactionSource = remember { MutableInteractionSource() } - ) { - onSelected(feedType) - }, - textAlign = TextAlign.Center, - text = feedType.label, - style = MaterialTheme.typography.titleMedium, - ) - } - } -} - -@Preview +@PreviewLightDark @Composable private fun StoriesScreenPreview() { HackerNewsTheme { @@ -257,42 +185,6 @@ private fun StoriesScreenPreview() { } } -@Preview -@Composable -private fun StoryRowPreview() { - HackerNewsTheme { - StoryRow( - item = StoryItem.Content( - id = 1L, - title = "Hello There", - author = "heyrikin", - score = 10, - commentCount = 0, - epochTimestamp = 100L, - timeLabel = "2h ago", - bookmarked = true, - url = "" - ), - onClick = {}, - onBookmark = {}, - onCommentClicked = {}, - ) - } -} - -@Preview -@Composable -private fun StoryRowLoadingPreview() { - HackerNewsTheme { - StoryRow( - item = StoryItem.Loading(id = 1L), - onClick = {}, - onBookmark = {}, - onCommentClicked = {}, - ) - } -} - @OptIn(ExperimentalFoundationApi::class) @Composable fun StoryRow( @@ -334,15 +226,15 @@ fun StoryRow( val path = Path().apply { moveTo(startX, startY) - lineTo(startX, startY+bookmarkHeight) - lineTo(startX+bookmarkWidth/2f, startY+bookmarkHeight*0.75f) - lineTo(startX+bookmarkWidth, startY+bookmarkHeight) - lineTo(startX+bookmarkWidth, startY) + lineTo(startX, startY + bookmarkHeight) + lineTo(startX + bookmarkWidth / 2f, startY + bookmarkHeight * 0.75f) + lineTo(startX + bookmarkWidth, startY + bookmarkHeight) + lineTo(startX + bookmarkWidth, startY) } drawPath( path, - color = HNOrange, + color = HackerOrange, ) } .combinedClickable( @@ -368,19 +260,36 @@ fun StoryRow( ) { Text( text = item.title, + color = MaterialTheme.colorScheme.onSurface, style = MaterialTheme.typography.titleSmall ) Row(horizontalArrangement = Arrangement.spacedBy(4.dp)) { - Text(text = "${item.score}", style = MaterialTheme.typography.labelSmall) - Text(text = "•", style = MaterialTheme.typography.labelSmall) + Text( + text = "${item.score}", + color = MaterialTheme.colorScheme.onSurface, + style = MaterialTheme.typography.labelSmall + ) + Text( + text = "•", + color = MaterialTheme.colorScheme.onSurface, + style = MaterialTheme.typography.labelSmall + ) Text( text = item.author, - color = HNOrange, + color = HackerOrange, style = MaterialTheme.typography.labelSmall, fontWeight = FontWeight.Medium ) - Text(text = "•", style = MaterialTheme.typography.labelSmall) - Text(text = item.timeLabel, style = MaterialTheme.typography.labelSmall) + Text( + text = "•", + color = MaterialTheme.colorScheme.onSurface, + style = MaterialTheme.typography.labelSmall + ) + Text( + text = item.timeLabel, + color = MaterialTheme.colorScheme.onSurface, + style = MaterialTheme.typography.labelSmall + ) } } @@ -401,6 +310,7 @@ fun StoryRow( ) Text( text = "${item.commentCount}", + color = MaterialTheme.colorScheme.onSurface, style = MaterialTheme.typography.labelSmall, fontWeight = FontWeight.Medium ) @@ -457,7 +367,7 @@ fun StoryRow( .width(40.dp) .height(14.dp) .clip(RoundedCornerShape(4.dp)) - .background(HNOrange) + .background(HackerOrange) ) } } @@ -465,3 +375,107 @@ fun StoryRow( } } } + +@PreviewLightDark +@Composable +private fun StoryRowPreview() { + HackerNewsTheme { + StoryRow( + item = StoryItem.Content( + id = 1L, + title = "Hello There", + author = "heyrikin", + score = 10, + commentCount = 0, + epochTimestamp = 100L, + timeLabel = "2h ago", + bookmarked = true, + url = "" + ), + onClick = {}, + onBookmark = {}, + onCommentClicked = {}, + ) + } +} + +@PreviewLightDark +@Composable +private fun StoryRowLoadingPreview() { + HackerNewsTheme { + StoryRow( + item = StoryItem.Loading(id = 1L), + onClick = {}, + onBookmark = {}, + onCommentClicked = {}, + ) + } +} + + +@Composable +private fun FeedSelection( + modifier: Modifier = Modifier, + feedType: FeedType, + onSelected: (FeedType) -> Unit, +) { + val selectedTab = remember(feedType) { feedType.ordinal } + + TabRow( + selectedTabIndex = selectedTab, + modifier = modifier.wrapContentWidth(), + containerColor = MaterialTheme.colorScheme.background, + contentColor = MaterialTheme.colorScheme.onBackground, + indicator = { tabPositions -> + if (selectedTab < tabPositions.size) { + Box( + modifier = Modifier + .tabIndicatorOffset(tabPositions[selectedTab]) + .height(2.dp) + .drawBehind { + val barWidth = size.width * 0.33f + val start = size.center.x - barWidth / 2f + val end = size.center.x + barWidth / 2f + val bottom = size.height - 16f + drawLine( + start = Offset(start, bottom), + end = Offset(end, bottom), + color = HackerOrange, + strokeWidth = 4f, + cap = StrokeCap.Round, + ) + } + ) + } + }, + divider = {} + ) { + FeedType.entries.forEach { feedType -> + Text( + modifier = Modifier + .fillMaxWidth() + .padding(8.dp) + .clickable( + indication = null, + interactionSource = remember { MutableInteractionSource() } + ) { + onSelected(feedType) + }, + textAlign = TextAlign.Center, + text = feedType.label, + style = MaterialTheme.typography.titleMedium, + ) + } + } +} + +@PreviewLightDark +@Composable +private fun FeedSelectionPreview() { + HackerNewsTheme { + FeedSelection( + feedType = FeedType.Top, + onSelected = {} + ) + } +} \ No newline at end of file diff --git a/android/app/src/main/java/com/emergetools/hackernews/features/stories/StoryScreen.kt b/android/app/src/main/java/com/emergetools/hackernews/features/stories/StoryScreen.kt index 451a8a5a..d279719d 100644 --- a/android/app/src/main/java/com/emergetools/hackernews/features/stories/StoryScreen.kt +++ b/android/app/src/main/java/com/emergetools/hackernews/features/stories/StoryScreen.kt @@ -9,10 +9,8 @@ import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.text.style.TextOverflow -import androidx.compose.ui.tooling.preview.Preview import com.google.accompanist.web.WebView import com.google.accompanist.web.rememberWebViewState -import com.emergetools.hackernews.ui.theme.HackerNewsTheme @Composable fun StoryScreen(url: String) { @@ -29,12 +27,4 @@ fun StoryScreen(url: String) { state = webViewState ) } -} - -@Preview -@Composable -private fun StoryScreenPreview() { - HackerNewsTheme { - StoryScreen("www.google.com") - } } \ No newline at end of file diff --git a/android/app/src/main/java/com/emergetools/hackernews/ui/theme/Color.kt b/android/app/src/main/java/com/emergetools/hackernews/ui/theme/Color.kt index 580393da..eb2756fd 100644 --- a/android/app/src/main/java/com/emergetools/hackernews/ui/theme/Color.kt +++ b/android/app/src/main/java/com/emergetools/hackernews/ui/theme/Color.kt @@ -2,13 +2,23 @@ package com.emergetools.hackernews.ui.theme import androidx.compose.ui.graphics.Color -val Purple80 = Color(0xFFD0BCFF) -val PurpleGrey80 = Color(0xFFCCC2DC) -val Pink80 = Color(0xFFEFB8C8) +val HackerOrange = Color(0xFFF59342) +val HackerOrangeLight = Color(0xFFFCE0C9) -val Purple40 = Color(0xFF6650a4) -val PurpleGrey40 = Color(0xFF625b71) -val Pink40 = Color(0xFF7D5260) +val HackerRed = Color(0xFFEF476F) +val HackerRedLight = Color(0xFFF8B1C1) -val HNOrange = Color(0xFFF57C00) -val HNOrangeLight = Color(0xFFFFCD93) +val HackerBlue = Color(0xFF118AB2) +val HackerBlueLight = Color(0xFFACE5F7) + +val HackerGreen = Color(0xFF06D6A0) +val HackerGreenLight = Color(0xFFAEFDE8) + +val BackgroundLight = Color(0xFFF9F9FF) +val BackgroundDark = Color(0xFF121317) +val OnBackgroundLight = Color(0xFF1A1C20) +val OnBackgroundDark = Color(0xFFE2E2E8) +val SurfaceLight = Color(0xFFEEEDF3) +val SurfaceDark = Color(0xFF1E2024) +val OnSurfaceLight = OnBackgroundLight +val OnSurfaceDark = OnBackgroundDark diff --git a/android/app/src/main/java/com/emergetools/hackernews/ui/theme/Theme.kt b/android/app/src/main/java/com/emergetools/hackernews/ui/theme/Theme.kt index d1e8f32f..d65492f6 100644 --- a/android/app/src/main/java/com/emergetools/hackernews/ui/theme/Theme.kt +++ b/android/app/src/main/java/com/emergetools/hackernews/ui/theme/Theme.kt @@ -9,23 +9,30 @@ import androidx.compose.material3.lightColorScheme import androidx.compose.runtime.Composable import androidx.compose.ui.platform.LocalContext -private val DarkColorScheme = darkColorScheme( - primary = Purple80, - secondary = PurpleGrey80, - tertiary = Pink80 +private val LightColorScheme = lightColorScheme( + primary = HackerOrange, + primaryContainer = HackerOrangeLight, + background = BackgroundLight, + surface = SurfaceLight, + onBackground = OnBackgroundLight, + onSurface = OnSurfaceLight ) -private val LightColorScheme = lightColorScheme( - primary = Purple40, - secondary = PurpleGrey40, - tertiary = Pink40 +private val DarkColorScheme = darkColorScheme( + primary = HackerOrange, + primaryContainer = HackerOrangeLight, + background = BackgroundDark, + surface = SurfaceDark, + onBackground = OnBackgroundDark, + onSurface = OnSurfaceDark ) + @Composable fun HackerNewsTheme( darkTheme: Boolean = isSystemInDarkTheme(), // Dynamic color is available on Android 12+ - dynamicColor: Boolean = true, + dynamicColor: Boolean = false, content: @Composable () -> Unit ) { val colorScheme = when { diff --git a/android/app/src/main/java/com/emergetools/hackernews/ui/theme/Type.kt b/android/app/src/main/java/com/emergetools/hackernews/ui/theme/Type.kt index 0a05d985..84f898cb 100644 --- a/android/app/src/main/java/com/emergetools/hackernews/ui/theme/Type.kt +++ b/android/app/src/main/java/com/emergetools/hackernews/ui/theme/Type.kt @@ -1,5 +1,6 @@ package com.emergetools.hackernews.ui.theme +import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Typography import androidx.compose.ui.text.TextStyle import androidx.compose.ui.text.font.Font