Use scaffold with small top bar in Filter Screen

2 files changed, 10 insertions, 34 deletions

diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Scaffolding.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Scaffolding.kt
index bcb0763a4e..4d86a8b35b 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Scaffolding.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Scaffolding.kt
@@ -270,6 +270,7 @@ fun ScaffoldWithSmallTopBar(
     navigationIcon: @Composable () -> Unit = {},
     actions: @Composable RowScope.() -> Unit = {},
     snackbarHostState: SnackbarHostState = remember { SnackbarHostState() },
+    bottomBar: @Composable () -> Unit = {},
     content: @Composable (modifier: Modifier) -> Unit,
 ) {
     Scaffold(
@@ -287,6 +288,7 @@ fun ScaffoldWithSmallTopBar(
                 snackbar = { snackbarData -> MullvadSnackbar(snackbarData = snackbarData) },
             )
         },
+        bottomBar = bottomBar,
         content = { content(Modifier.fillMaxSize().padding(it)) },
     )
 }
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/FilterScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/FilterScreen.kt
index 2129b24cf4..a869749328 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/FilterScreen.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/FilterScreen.kt
@@ -2,20 +2,12 @@ package net.mullvad.mullvadvpn.compose.screen
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.systemBarsPadding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.LazyItemScope
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.automirrored.filled.ArrowBack
-import androidx.compose.material3.Icon
-import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Scaffold
-import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -25,7 +17,6 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
@@ -38,6 +29,8 @@ import net.mullvad.mullvadvpn.compose.button.ApplyButton
 import net.mullvad.mullvadvpn.compose.cell.CheckboxCell
 import net.mullvad.mullvadvpn.compose.cell.ExpandableComposeCell
 import net.mullvad.mullvadvpn.compose.cell.SelectableCell
+import net.mullvad.mullvadvpn.compose.component.NavigateBackIconButton
+import net.mullvad.mullvadvpn.compose.component.ScaffoldWithSmallTopBar
 import net.mullvad.mullvadvpn.compose.constant.ContentType
 import net.mullvad.mullvadvpn.compose.extensions.itemWithDivider
 import net.mullvad.mullvadvpn.compose.extensions.itemsWithDivider
@@ -106,9 +99,10 @@ fun FilterScreen(
     var ownershipExpanded by rememberSaveable { mutableStateOf(false) }
 
     val backgroundColor = MaterialTheme.colorScheme.surface
-    Scaffold(
-        modifier = Modifier.background(backgroundColor).systemBarsPadding().fillMaxSize(),
-        topBar = { TopBar(onBackClick = onBackClick) },
+    ScaffoldWithSmallTopBar(
+        modifier = Modifier.background(backgroundColor),
+        appBarTitle = stringResource(R.string.filter),
+        navigationIcon = { NavigateBackIconButton(onNavigateBack = onBackClick) },
         bottomBar = {
             BottomBar(
                 isApplyButtonEnabled = state.isApplyButtonEnabled,
@@ -116,8 +110,8 @@ fun FilterScreen(
                 onApplyClick = onApplyClick,
             )
         },
-    ) { contentPadding ->
-        LazyColumn(modifier = Modifier.padding(contentPadding).fillMaxSize()) {
+    ) { modifier ->
+        LazyColumn(modifier = modifier.fillMaxSize()) {
             itemWithDivider(key = Keys.OWNERSHIP_TITLE, contentType = ContentType.HEADER) {
                 OwnershipHeader(ownershipExpanded) { ownershipExpanded = it }
             }
@@ -261,26 +255,6 @@ private fun LazyItemScope.RemovedProvider(
 }
 
 @Composable
-private fun TopBar(onBackClick: () -> Unit) {
-    Row(Modifier.fillMaxWidth(), verticalAlignment = Alignment.CenterVertically) {
-        IconButton(onClick = onBackClick) {
-            Icon(
-                imageVector = Icons.AutoMirrored.Default.ArrowBack,
-                contentDescription = stringResource(id = R.string.back),
-                tint = MaterialTheme.colorScheme.onSurface,
-            )
-        }
-        Text(
-            text = stringResource(R.string.filter),
-            modifier = Modifier.weight(1f).padding(end = Dimens.titleIconSize),
-            textAlign = TextAlign.Center,
-            style = MaterialTheme.typography.titleLarge,
-            color = MaterialTheme.colorScheme.onSurface,
-        )
-    }
-}
-
-@Composable
 private fun BottomBar(
     isApplyButtonEnabled: Boolean,
     backgroundColor: Color,