Small Screen Preview Fix (#166)

Showcasing fixing our small screen bug in settings by leveraging Previews + Snapshots.
EmergeTools · Oct 16, 2024 · 8a31ead · 8a31ead
1 parent c110c8c
commit 8a31ead
Show file tree

Hide file tree

Showing 2 changed files with 88 additions and 3 deletions.
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
@@ -2,22 +2,31 @@ package com.emergetools.hackernews.features.settings
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.rounded.Lock
 import androidx.compose.material.icons.rounded.Warning
 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.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Devices
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.emergetools.hackernews.R
 import com.emergetools.hackernews.features.settings.components.BuiltByCard
@@ -41,17 +50,21 @@ fun SettingsScreen(
   Column(
     modifier = Modifier
       .fillMaxSize()
-      .background(color = MaterialTheme.colorScheme.background)
-      .padding(8.dp),
+      .background(color = MaterialTheme.colorScheme.background),
     verticalArrangement = Arrangement.spacedBy(16.dp),
   ) {
     Text(
       text = "Settings",
-      modifier = Modifier.fillMaxWidth(),
+      modifier = Modifier
+        .fillMaxWidth()
+        .padding(8.dp),
       style = MaterialTheme.typography.titleMedium,
       color = MaterialTheme.colorScheme.onBackground
     )
     Column(
+      modifier = Modifier
+        .verticalScroll(state = rememberScrollState())
+        .padding(horizontal = 8.dp),
       verticalArrangement = Arrangement.spacedBy(4.dp)
     ) {
       SettingsSectionLabel("Profile")
@@ -171,3 +184,74 @@ private fun SettingsScreenPreview() {
     )
   }
 }
+
+@Preview(
+  device = Devices.PIXEL_2,
+  showSystemUi = true
+)
+@Composable
+private fun SettingsSmallScreenPreview() {
+  HackerNewsTheme {
+    Scaffold(
+      bottomBar = {
+        SettingsPreviewNavBar()
+      }
+    ) { innerPadding ->
+      Box(modifier = Modifier.padding(innerPadding)) {
+        SettingsScreen(
+          state = SettingsState(false),
+          actions = {},
+          navigation = {}
+        )
+      }
+    }
+  }
+}
+
+@Composable
+private fun SettingsPreviewNavBar() {
+  NavigationBar {
+    NavigationBarItem(
+      selected = false,
+      colors = NavigationBarItemDefaults.colors(
+        selectedIconColor = MaterialTheme.colorScheme.primary,
+        indicatorColor = MaterialTheme.colorScheme.primary.copy(alpha = 0.2f)
+      ),
+      onClick = { },
+      icon = {
+        Icon(
+          painter = painterResource(R.drawable.ic_feed),
+          contentDescription = "feed"
+        )
+      },
+    )
+    NavigationBarItem(
+      selected = false,
+      colors = NavigationBarItemDefaults.colors(
+        selectedIconColor = MaterialTheme.colorScheme.primary,
+        indicatorColor = MaterialTheme.colorScheme.primary.copy(alpha = 0.2f)
+      ),
+      onClick = { },
+      icon = {
+        Icon(
+          painter = painterResource(R.drawable.ic_bookmarks),
+          contentDescription = "bookmarks"
+        )
+      },
+    )
+    NavigationBarItem(
+      selected = true,
+      colors = NavigationBarItemDefaults.colors(
+        selectedIconColor = MaterialTheme.colorScheme.primary,
+        indicatorColor = MaterialTheme.colorScheme.primary.copy(alpha = 0.2f)
+      ),
+      onClick = { },
+      icon = {
+        Icon(
+          painter = painterResource(R.drawable.ic_settings),
+          contentDescription = "settings"
+        )
+      },
+    )
+  }
+}
diff --git a/android/app/src/main/java/com/emergetools/hackernews/ui/preview/AppStoreSnapshot.kt b/android/app/src/main/java/com/emergetools/hackernews/ui/preview/AppStoreSnapshot.kt
@@ -13,6 +13,7 @@ annotation class AppStoreSnapshot
 
 @Preview(device = Devices.PIXEL_FOLD)
 @Preview(device = Devices.PIXEL_TABLET)
+@Preview(device = Devices.PIXEL_2)
 annotation class DevicePreview
 
 @DevicePreview