Use new theme and ensure the correct colors are used

The initial requirement for this app was that it worked the same as the
iOS app. This meant matching colors which resulted in a bit of a mess of
different color usage (at last in part my fault!). This change uses a newly
generated set of Material3 theme colors using:

   https://material-foundation.github.io/material-theme-builder/

Then the aim was to only use colors from the theme and to always use the
correct pairings e.g. onPrimary on top of primary, and onSurface on top of
surface. The screenshot test code was extended to enable a visual check of
this. In PreviewTest setting testTheme to true makes the screenshots use a
custom test theme where the pairs of colours (Xxxx and onXxxx) are the same
Color. If any of the screenshots have visible text or a visible icon, then
there's a mismatch in the theme color usage that could cause a problem with
some themes.
With these changes in place, it should now be straightforward to create and
use a new theme, or to allow custom ones. Note that currently, the app will
always use the medium contrast Light theme.

Obviously this does change how the app looks from a color perspective, but
I'm hoping that it's seen as an improvement for usability and accessibility.

app/src/main/java/org/scottishtecharmy/soundscape/components/DrawerMenuItem.kt

@@ -3,7 +3,6 @@ package org.scottishtecharmy.soundscape.components
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.NavigationDrawerItem
-import androidx.compose.material3.NavigationDrawerItemDefaults
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.graphics.vector.ImageVector
@@ -13,16 +12,13 @@ fun DrawerMenuItem(onClick: () -> Unit, label: String, icon: ImageVector) {
     NavigationDrawerItem(
         label = { Text(
             text = label,
-            color = MaterialTheme.colorScheme.onBackground
+            color = MaterialTheme.colorScheme.onBackground,
         ) },
-        colors = NavigationDrawerItemDefaults.colors(
-            unselectedContainerColor = MaterialTheme.colorScheme.background
-        ),
         icon = {
             Icon(
                 icon,
                 null,
-                tint = MaterialTheme.colorScheme.onBackground
+                tint = MaterialTheme.colorScheme.onBackground,
             )
         },
         selected = false,

app/src/main/java/org/scottishtecharmy/soundscape/components/LocationItem.kt

@@ -1,5 +1,6 @@
 package org.scottishtecharmy.soundscape.components
 
+import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
@@ -25,10 +26,8 @@ import androidx.compose.ui.tooling.preview.Preview
 import org.scottishtecharmy.soundscape.geoengine.formatDistance
 import org.scottishtecharmy.soundscape.geojsonparser.geojson.LngLatAlt
 import org.scottishtecharmy.soundscape.screens.home.data.LocationDescription
-import org.scottishtecharmy.soundscape.ui.theme.Foreground2
-import org.scottishtecharmy.soundscape.ui.theme.IntroductionTheme
-import org.scottishtecharmy.soundscape.ui.theme.PaleBlue
 import org.scottishtecharmy.soundscape.ui.theme.extraSmallPadding
+import org.scottishtecharmy.soundscape.ui.theme.smallPadding
 import org.scottishtecharmy.soundscape.ui.theme.spacing
 
 data class EnabledFunction(
@@ -61,6 +60,9 @@ fun LocationItem(
     }
     Row(
         modifier = modifier.fillMaxWidth()
+                           .background(MaterialTheme.colorScheme.primaryContainer)
+                           .smallPadding()
+                           .fillMaxWidth()
                            .clickable {
            if(decoration.details.enabled) {
                decoration.details.functionString(item.name!!)
@@ -72,14 +74,14 @@ fun LocationItem(
             Icon(
                 Icons.Rounded.LocationOn,
                 contentDescription = null,
-                tint = MaterialTheme.colorScheme.onBackground,
+                tint = MaterialTheme.colorScheme.onPrimaryContainer,
                 modifier = Modifier.width(spacing.icon)
             )
         } else if (decoration.index != -1) {
             Text(
                 text = (decoration.index + 1).toString(),
                 style = MaterialTheme.typography.titleLarge,
-                color = MaterialTheme.colorScheme.onBackground,
+                color = MaterialTheme.colorScheme.onPrimaryContainer,
                 modifier = Modifier.width(spacing.targetSize).align(Alignment.CenterVertically)
             )
         }
@@ -90,22 +92,24 @@ fun LocationItem(
                 Text(
                     text = it,
                     style = MaterialTheme.typography.titleLarge,
-                    color = MaterialTheme.colorScheme.onBackground,
+                    color = MaterialTheme.colorScheme.onPrimaryContainer,
                 )
             }
             if(distanceString.isNotEmpty()) {
                 Text(
                     text = distanceString,
-                    color = Foreground2,
+                    color = MaterialTheme.colorScheme.onPrimaryContainer,
                     style = MaterialTheme.typography.bodySmall,
                 )
             }
-            item.fullAddress?.let {
-                Text(
-                    text = it,
-                    style = MaterialTheme.typography.bodyMedium,
-                    color = PaleBlue,
-                )
+            if(item.fullAddress?.isNotEmpty() == true) {
+                item.fullAddress?.let {
+                    Text(
+                        text = it,
+                        style = MaterialTheme.typography.bodyMedium,
+                        color = MaterialTheme.colorScheme.onPrimaryContainer,
+                    )
+                }
             }
         }
         if(decoration.editRoute.enabled) {
@@ -122,7 +126,7 @@ fun LocationItem(
             Icon(
                 Icons.Rounded.ChevronRight,
                 contentDescription = null,
-                tint = MaterialTheme.colorScheme.onBackground,
+                tint = MaterialTheme.colorScheme.onPrimaryContainer,
                 modifier = Modifier.width(spacing.icon)
             )
         }
@@ -132,102 +136,92 @@ fun LocationItem(
 @Preview(name = "Light Mode")
 @Composable
 fun PreviewSearchItemButton() {
-    IntroductionTheme {
-        Column(
-            modifier =
-                Modifier
-                    .fillMaxWidth()
-                    .fillMaxHeight(),
-            horizontalAlignment = Alignment.CenterHorizontally,
-            verticalArrangement = Arrangement.Center,
-        ) {
-            val test =
-                LocationDescription(
-                    name = "Bristol",
-                    fullAddress = "18 Street \n59000 Lille\nFrance",
-                    location = LngLatAlt(8.00, 9.55)
-                )
-            LocationItem(
-                item = test,
-                userLocation = LngLatAlt(9.00, 9.55),
-                decoration = LocationItemDecoration(
-                    location = true,
-                    editRoute = EnabledFunction(true, {}, {}, true),
-                    details = EnabledFunction(false),
-                ),
-                modifier = Modifier.width(spacing.preview),
+    Column(
+        modifier =
+            Modifier
+                .fillMaxWidth()
+                .fillMaxHeight(),
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.Center,
+    ) {
+        val test =
+            LocationDescription(
+                name = "Bristol",
+                fullAddress = "18 Street \n59000 Lille\nFrance",
+                location = LngLatAlt(8.00, 9.55)
             )
-        }
+        LocationItem(
+            item = test,
+            userLocation = LngLatAlt(9.00, 9.55),
+            decoration = LocationItemDecoration(
+                location = true,
+                editRoute = EnabledFunction(true, {}, {}, true),
+                details = EnabledFunction(false),
+            ),
+        )
     }
 }
 
 @Preview(name = "Compact")
 @Composable
 fun PreviewCompactSearchItemButton() {
-    IntroductionTheme {
-        Column(
-            modifier =
-            Modifier
-                .fillMaxWidth()
-                .fillMaxHeight(),
-            horizontalAlignment = Alignment.CenterHorizontally,
-            verticalArrangement = Arrangement.Center,
-        ) {
-            val test =
-                LocationDescription(
-                    name = "Bristol",
-                    location = LngLatAlt(8.00, 9.55)
-                )
-            LocationItem(
-                item = test,
-                decoration = LocationItemDecoration(
-                    location = true,
-                    editRoute = EnabledFunction(false),
-                    details = EnabledFunction(true),
-                ),
-                modifier = Modifier.width(spacing.preview),
-                userLocation = LngLatAlt(8.00, 10.55)
-            )
-            LocationItem(
-                item = test,
-                decoration = LocationItemDecoration(
-                    location = false,
-                    editRoute = EnabledFunction(false),
-                    details = EnabledFunction(false),
-                    index = 99,
-                ),
-                modifier = Modifier.width(spacing.preview),
-                userLocation = LngLatAlt(8.00, 10.55)
+    Column(
+        modifier =
+        Modifier
+            .fillMaxWidth()
+            .fillMaxHeight(),
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.Center,
+    ) {
+        val test =
+            LocationDescription(
+                name = "Bristol",
+                location = LngLatAlt(8.00, 9.55)
             )
-        }
+        LocationItem(
+            item = test,
+            decoration = LocationItemDecoration(
+                location = true,
+                editRoute = EnabledFunction(false),
+                details = EnabledFunction(true),
+            ),
+            userLocation = LngLatAlt(8.00, 10.55)
+        )
+        LocationItem(
+            item = test,
+            decoration = LocationItemDecoration(
+                location = false,
+                editRoute = EnabledFunction(false),
+                details = EnabledFunction(false),
+                index = 99,
+            ),
+            userLocation = LngLatAlt(8.00, 10.55)
+        )
     }
 }
 
 @Preview(name = "Compact")
 @Composable
 fun PreviewOrderedItemButton() {
-    IntroductionTheme {
-        Column(
-            modifier =
-            Modifier
-                .fillMaxWidth()
-                .fillMaxHeight(),
-            horizontalAlignment = Alignment.CenterHorizontally,
-            verticalArrangement = Arrangement.Center,
-        ) {
-            val test =
-                LocationDescription(
-                    name = "Bristol",
-                    location = LngLatAlt(8.00, 9.55)
-                )
-            LocationItem(
-                item = test,
-                decoration = LocationItemDecoration(
-                    index = 2,
-                ),
-                modifier = Modifier.width(spacing.preview),
-                userLocation = LngLatAlt(8.20, 9.55)
+    Column(
+        modifier =
+        Modifier
+            .fillMaxWidth()
+            .fillMaxHeight(),
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.Center,
+    ) {
+        val test =
+            LocationDescription(
+                name = "Bristol",
+                location = LngLatAlt(8.00, 9.55)
             )
-        }
+        LocationItem(
+            item = test,
+            decoration = LocationItemDecoration(
+                index = 2,
+            ),
+            userLocation = LngLatAlt(8.20, 9.55)
+        )
     }
 }

app/src/main/java/org/scottishtecharmy/soundscape/components/MainSearchBar.kt

@@ -1,6 +1,5 @@
 package org.scottishtecharmy.soundscape.components
 
-import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
@@ -15,7 +14,6 @@ import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
-import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.SearchBar
 import androidx.compose.material3.SearchBarDefaults
 import androidx.compose.material3.Text
@@ -55,7 +53,6 @@ fun MainSearchBar(
                     },
                 ),
         shape = RoundedCornerShape(spacing.small),
-        colors = SearchBarDefaults.colors(containerColor = MaterialTheme.colorScheme.surface),
         inputField = {
             SearchBarDefaults.InputField(
                 query = searchText,
@@ -70,7 +67,6 @@ fun MainSearchBar(
                             Icon(
                                 imageVector = Icons.Rounded.Search,
                                 contentDescription = null,
-                                tint = MaterialTheme.colorScheme.onSurfaceVariant,
                             )
                         }
 
@@ -82,13 +78,11 @@ fun MainSearchBar(
                                     Icons.AutoMirrored.Rounded.ArrowBack,
                                     contentDescription =
                                         stringResource(R.string.cancel_search_contentDescription),
-                                    tint = MaterialTheme.colorScheme.onSurfaceVariant,
                                 )
                             }
                         }
                     }
                 },
-                colors = SearchBarDefaults.inputFieldColors(focusedTextColor = MaterialTheme.colorScheme.onSurface),
             )
         },
         expanded = isSearching,
@@ -104,7 +98,6 @@ fun MainSearchBar(
                                 columnCount = 1, // Single-column list
                             )
                     }.fillMaxSize()
-                    .background(MaterialTheme.colorScheme.background),
         ) {
             LazyColumn(modifier = Modifier.padding(top = spacing.medium)) {
                 itemsIndexed(itemList) { index, item ->
@@ -133,7 +126,7 @@ fun MainSearchBar(
                                 },
                             userLocation = userLocation
                         )
-                        HorizontalDivider(color = MaterialTheme.colorScheme.onPrimary)
+                        HorizontalDivider()
                     }
                 }
             }

app/src/main/java/org/scottishtecharmy/soundscape/components/NavigationButton.kt

@@ -20,7 +20,6 @@ import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
-import org.scottishtecharmy.soundscape.ui.theme.SoundscapeTheme
 import org.scottishtecharmy.soundscape.ui.theme.spacing
 
 @Composable
@@ -49,21 +48,19 @@ fun NavigationButton(
             if (icon != null) {
                 Icon(
                     icon,
-                    null,
-                    tint = MaterialTheme.colorScheme.onPrimary
+                    null
                 )
                 Spacer(modifier = Modifier.width(spacing.small))
             }
             Text(
                 text,
-                style = MaterialTheme.typography.bodyMedium,
+                style = MaterialTheme.typography.bodyLarge,
                 textAlign = TextAlign.Start,
                 modifier = Modifier.weight(1f)
             )
             Icon(
                 Icons.Rounded.ChevronRight,
                 null,
-                tint = MaterialTheme.colorScheme.onPrimary,
                 modifier = Modifier.defaultMinSize(spacing.targetSize)
             )
         }
@@ -73,7 +70,5 @@ fun NavigationButton(
 @Preview
 @Composable
 fun PreviewNavigationButton() {
-    SoundscapeTheme {
-        NavigationButton(text = "Long text to show what happens on a wrap", onClick = {})
-    }
+    NavigationButton(text = "Long text to show what happens on a wrap", onClick = {})
 }