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.

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

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(

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

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

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