Remove remaining uses of old topbar

10 files changed, 172 insertions, 263 deletions

diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/CollapsingTopBar.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/CollapsingTopBar.kt
deleted file mode 100644
index f2906f1d46..0000000000
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/CollapsingTopBar.kt
+++ /dev/null
@@ -1,112 +0,0 @@
-package net.mullvad.mullvadvpn.compose.component
-
-import androidx.compose.foundation.Image
-import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.Spacer
-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.layout.wrapContentHeight
-import androidx.compose.foundation.layout.wrapContentWidth
-import androidx.compose.material3.Button
-import androidx.compose.material3.ButtonDefaults
-import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Text
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.rotate
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.res.dimensionResource
-import androidx.compose.ui.res.painterResource
-import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.text.TextStyle
-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.unit.dp
-import androidx.compose.ui.unit.sp
-import net.mullvad.mullvadvpn.R
-import net.mullvad.mullvadvpn.lib.theme.AppTheme
-
-@Preview
-@Composable
-private fun PreviewTopBar() {
-    AppTheme {
-        CollapsingTopBar(
-            backgroundColor = MaterialTheme.colorScheme.secondary,
-            onBackClicked = {},
-            title = "View title",
-            progress = 1.0f,
-            modifier = Modifier.height(102.dp)
-        )
-    }
-}
-
-@Composable
-fun CollapsingTopBar(
-    backgroundColor: Color,
-    onBackClicked: () -> Unit,
-    title: String,
-    progress: Float,
-    modifier: Modifier,
-    backIcon: Int? = null,
-    shouldRotateBackButtonDown: Boolean = false
-) {
-    val expandedToolbarHeight = dimensionResource(id = R.dimen.expanded_toolbar_height)
-    val iconSize = dimensionResource(id = R.dimen.icon_size)
-    val sideMargin = dimensionResource(id = R.dimen.side_margin)
-    val verticalMargin = dimensionResource(id = R.dimen.cell_label_vertical_padding)
-    val maxTopPadding = 48
-    val minTopPadding = 14
-    val maxTitleSize = 30
-    val minTitleSize = 20
-
-    Spacer(
-        modifier = Modifier.fillMaxWidth().height(expandedToolbarHeight).background(backgroundColor)
-    )
-
-    Button(
-        modifier = Modifier.wrapContentWidth().wrapContentHeight(),
-        onClick = onBackClicked,
-        colors =
-            ButtonDefaults.buttonColors(
-                contentColor = Color.White,
-                containerColor = backgroundColor
-            ),
-        shape = MaterialTheme.shapes.small
-    ) {
-        Image(
-            painter = painterResource(id = backIcon ?: R.drawable.icon_back),
-            contentDescription = stringResource(id = R.string.back),
-            modifier =
-                Modifier.rotate(if (shouldRotateBackButtonDown) 270f else 0f)
-                    .width(iconSize)
-                    .height(iconSize)
-        )
-    }
-
-    Text(
-        text = title,
-        style =
-            TextStyle(color = Color.White, fontWeight = FontWeight.Bold, textAlign = TextAlign.End),
-        modifier =
-            modifier.padding(
-                start = sideMargin,
-                end = sideMargin,
-                top = (minTopPadding + (maxTopPadding - minTopPadding) * progress).dp,
-                bottom = verticalMargin
-            ),
-        fontSize =
-            topBarSize(
-                    progress = progress,
-                    minTitleSize = minTitleSize,
-                    maxTitleSize = maxTitleSize
-                )
-                .sp
-    )
-}
-
-private fun topBarSize(progress: Float, minTitleSize: Int, maxTitleSize: Int): Float {
-    return (minTitleSize + ((maxTitleSize - minTitleSize) * progress))
-}
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 47966b3b88..e2ba1d4f76 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
@@ -10,13 +10,11 @@ import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.MediumTopAppBar
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Snackbar
 import androidx.compose.material3.SnackbarData
 import androidx.compose.material3.SnackbarHost
 import androidx.compose.material3.SnackbarHostState
-import androidx.compose.material3.Text
 import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.material3.rememberTopAppBarState
 import androidx.compose.runtime.Composable
@@ -25,7 +23,6 @@ import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.input.nestedscroll.nestedScroll
-import androidx.compose.ui.text.style.TextOverflow
 import com.google.accompanist.systemuicontroller.rememberSystemUiController
 import net.mullvad.mullvadvpn.lib.theme.AlphaTopBar
 
@@ -94,19 +91,18 @@ fun ScaffoldWithMediumTopBar(
     Scaffold(
         modifier = modifier.fillMaxSize().nestedScroll(scrollBehavior.nestedScrollConnection),
         topBar = {
-            MediumTopAppBar(
-                title = { Text(appBarTitle, maxLines = 1, overflow = TextOverflow.Ellipsis) },
+            MullvadMediumTopBar(
+                title = appBarTitle,
                 navigationIcon = navigationIcon,
-                scrollBehavior = scrollBehavior,
-                colors =
-                    TopAppBarDefaults.mediumTopAppBarColors(
-                        containerColor = MaterialTheme.colorScheme.background
-                    ),
-                actions = actions
+                actions,
+                scrollBehavior = scrollBehavior
             )
         },
         content = {
-            content(Modifier.fillMaxSize().padding(it).drawVerticalScrollbar(lazyListState), lazyListState)
+            content(
+                Modifier.fillMaxSize().padding(it).drawVerticalScrollbar(lazyListState),
+                lazyListState
+            )
         }
     )
 }
@@ -130,20 +126,19 @@ fun ScaffoldWithMediumTopBar(
     Scaffold(
         modifier = modifier.fillMaxSize().nestedScroll(scrollBehavior.nestedScrollConnection),
         topBar = {
-            MediumTopAppBar(
-                title = { Text(appBarTitle, maxLines = 1, overflow = TextOverflow.Ellipsis) },
+            MullvadMediumTopBar(
+                title = appBarTitle,
                 navigationIcon = navigationIcon,
-                scrollBehavior = scrollBehavior,
-                colors =
-                    TopAppBarDefaults.mediumTopAppBarColors(
-                        containerColor = MaterialTheme.colorScheme.background
-                    ),
-                actions = actions
+                actions,
+                scrollBehavior = scrollBehavior
             )
         },
         content = {
             content(
-                Modifier.fillMaxSize().padding(it).drawVerticalScrollbar(scrollState).verticalScroll(scrollState)
+                Modifier.fillMaxSize()
+                    .padding(it)
+                    .drawVerticalScrollbar(scrollState)
+                    .verticalScroll(scrollState)
             )
         }
     )
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/TopBar.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/TopBar.kt
index 2b41ba6722..2cab654e72 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/TopBar.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/TopBar.kt
@@ -1,7 +1,10 @@
+@file:OptIn(ExperimentalMaterial3Api::class)
+
 package net.mullvad.mullvadvpn.compose.component
 
 import androidx.compose.foundation.layout.BoxWithConstraints
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.RowScope
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
@@ -9,8 +12,11 @@ import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.MediumTopAppBar
+import androidx.compose.material3.Text
 import androidx.compose.material3.TopAppBar
 import androidx.compose.material3.TopAppBarDefaults
+import androidx.compose.material3.TopAppBarScrollBehavior
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
@@ -18,6 +24,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import net.mullvad.mullvadvpn.R
@@ -105,13 +112,14 @@ fun MullvadTopBar(
                         val logoHeight = Dimens.mediumPadding
                         val logoStartEndPadding = Dimens.mediumPadding
 
-                        val shouldShowText = remember(maxWidth) {
-                            val logoHeightWidthRatio =
-                                logoTextPainter.intrinsicSize.width /
-                                    logoTextPainter.intrinsicSize.height
-                            val expectedLength = logoHeightWidthRatio * logoHeight.value
-                            maxWidth > (expectedLength + logoStartEndPadding.value * 2).dp
-                        }
+                        val shouldShowText =
+                            remember(maxWidth) {
+                                val logoHeightWidthRatio =
+                                    logoTextPainter.intrinsicSize.width /
+                                        logoTextPainter.intrinsicSize.height
+                                val expectedLength = logoHeightWidthRatio * logoHeight.value
+                                maxWidth > (expectedLength + logoStartEndPadding.value * 2).dp
+                            }
 
                         if (shouldShowText) {
                             Icon(
@@ -152,3 +160,51 @@ fun MullvadTopBar(
             ),
     )
 }
+
+@Preview
+@Composable
+private fun PreviewMediumTopBar() {
+    AppTheme {
+        MullvadMediumTopBar(
+            title = "Title",
+        )
+    }
+}
+
+@Preview(widthDp = 260)
+@Composable
+private fun PreviewSlimMediumTopBar() {
+    AppTheme {
+        MullvadMediumTopBar(
+            title = "Long top bar with long title",
+            actions = {
+                IconButton(onClick = {}) {
+                    Icon(
+                        painter = painterResource(id = R.drawable.icon_settings),
+                        contentDescription = null
+                    )
+                }
+            }
+        )
+    }
+}
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun MullvadMediumTopBar(
+    title: String,
+    navigationIcon: @Composable () -> Unit = {},
+    actions: @Composable RowScope.() -> Unit = {},
+    scrollBehavior: TopAppBarScrollBehavior? = null
+) {
+    MediumTopAppBar(
+        title = { Text(text = title, maxLines = 1, overflow = TextOverflow.Ellipsis) },
+        navigationIcon = navigationIcon,
+        scrollBehavior = scrollBehavior,
+        colors =
+            TopAppBarDefaults.mediumTopAppBarColors(
+                containerColor = MaterialTheme.colorScheme.background
+            ),
+        actions = actions
+    )
+}
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/ReportProblemScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/ReportProblemScreen.kt
index 4d524c28dc..6dc34937d5 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/ReportProblemScreen.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/ReportProblemScreen.kt
@@ -3,8 +3,8 @@ package net.mullvad.mullvadvpn.compose.screen
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.ColumnScope
+import androidx.compose.foundation.layout.IntrinsicSize
 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
@@ -13,7 +13,6 @@ import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextField
 import androidx.compose.runtime.Composable
@@ -33,12 +32,10 @@ import androidx.compose.ui.text.buildAnnotatedString
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.withStyle
 import androidx.compose.ui.tooling.preview.Preview
-import me.onebone.toolbar.ScrollStrategy
-import me.onebone.toolbar.rememberCollapsingToolbarScaffoldState
 import net.mullvad.mullvadvpn.R
 import net.mullvad.mullvadvpn.compose.button.ActionButton
-import net.mullvad.mullvadvpn.compose.component.CollapsingToolbarScaffold
-import net.mullvad.mullvadvpn.compose.component.CollapsingTopBar
+import net.mullvad.mullvadvpn.compose.component.NavigateBackIconButton
+import net.mullvad.mullvadvpn.compose.component.ScaffoldWithMediumTopBar
 import net.mullvad.mullvadvpn.compose.dialog.ReportProblemNoEmailDialog
 import net.mullvad.mullvadvpn.compose.textfield.mullvadWhiteTextFieldColors
 import net.mullvad.mullvadvpn.dataproxy.SendProblemReportResult
@@ -100,39 +97,30 @@ fun ReportProblemScreen(
     onNavigateToViewLogs: () -> Unit = {},
     onBackClick: () -> Unit = {}
 ) {
+    var email by rememberSaveable { mutableStateOf("") }
+    var description by rememberSaveable { mutableStateOf("") }
 
-    val scaffoldState = rememberCollapsingToolbarScaffoldState()
-    val progress = scaffoldState.toolbarState.progress
-    CollapsingToolbarScaffold(
-        backgroundColor = MaterialTheme.colorScheme.background,
-        modifier = Modifier.fillMaxSize(),
-        state = scaffoldState,
-        scrollStrategy = ScrollStrategy.ExitUntilCollapsed,
-        isEnabledWhenCollapsable = false,
-        toolbar = {
-            val scaffoldModifier =
-                Modifier.road(
-                    whenCollapsed = Alignment.TopCenter,
-                    whenExpanded = Alignment.BottomStart
-                )
-            CollapsingTopBar(
-                backgroundColor = MaterialTheme.colorScheme.background,
-                onBackClicked = onBackClick,
-                title = stringResource(id = R.string.report_a_problem),
-                progress = progress,
-                modifier = scaffoldModifier,
-            )
-        },
-    ) {
-        var email by rememberSaveable { mutableStateOf("") }
-        var description by rememberSaveable { mutableStateOf("") }
+    // Dialog to show confirm if no email was added
+    if (uiState.showConfirmNoEmail) {
+        ReportProblemNoEmailDialog(
+            onDismiss = onDismissNoEmailDialog,
+            onConfirm = { onSendReport(email, description) }
+        )
+    }
+
+    ScaffoldWithMediumTopBar(
+        appBarTitle = stringResource(id = R.string.report_a_problem),
+        navigationIcon = { NavigateBackIconButton(onBackClick) }
+    ) { modifier ->
 
         // Show sending states
         if (uiState.sendingState != null) {
             Column(
                 modifier =
-                    Modifier.fillMaxSize()
-                        .padding(vertical = Dimens.mediumPadding, horizontal = Dimens.sideMargin)
+                    modifier.padding(
+                        vertical = Dimens.mediumPadding,
+                        horizontal = Dimens.sideMargin
+                    )
             ) {
                 when (uiState.sendingState) {
                     SendingReportUiState.Sending -> SendingContent()
@@ -140,69 +128,61 @@ fun ReportProblemScreen(
                         ErrorContent({ onSendReport(email, description) }, onClearSendResult)
                     is SendingReportUiState.Success -> SentContent(uiState.sendingState)
                 }
-                return@CollapsingToolbarScaffold
+                return@ScaffoldWithMediumTopBar
             }
         }
 
-        // Dialog to show confirm if no email was added
-        if (uiState.showConfirmNoEmail) {
-            ReportProblemNoEmailDialog(
-                onDismiss = onDismissNoEmailDialog,
-                onConfirm = { onSendReport(email, description) }
-            )
-        }
-
-        Surface(color = MaterialTheme.colorScheme.background) {
-            Column(
-                modifier =
-                    Modifier.padding(
+        Column(
+            modifier =
+                modifier
+                    .padding(
                         start = Dimens.sideMargin,
                         end = Dimens.sideMargin,
                         bottom = Dimens.verticalSpace,
-                    ),
-                verticalArrangement = Arrangement.spacedBy(Dimens.mediumPadding)
-            ) {
-                Text(text = stringResource(id = R.string.problem_report_description))
+                    )
+                    .height(IntrinsicSize.Max),
+            verticalArrangement = Arrangement.spacedBy(Dimens.mediumPadding)
+        ) {
+            Text(text = stringResource(id = R.string.problem_report_description))
 
-                TextField(
-                    modifier = Modifier.fillMaxWidth(),
-                    value = email,
-                    onValueChange = { email = it },
-                    maxLines = 1,
-                    singleLine = true,
-                    placeholder = { Text(text = stringResource(id = R.string.user_email_hint)) },
-                    colors = mullvadWhiteTextFieldColors()
-                )
+            TextField(
+                modifier = Modifier.fillMaxWidth(),
+                value = email,
+                onValueChange = { email = it },
+                maxLines = 1,
+                singleLine = true,
+                placeholder = { Text(text = stringResource(id = R.string.user_email_hint)) },
+                colors = mullvadWhiteTextFieldColors()
+            )
 
-                TextField(
-                    modifier = Modifier.fillMaxWidth().weight(1f),
-                    value = description,
-                    onValueChange = { description = it },
-                    placeholder = { Text(stringResource(R.string.user_message_hint)) },
-                    colors = mullvadWhiteTextFieldColors()
-                )
+            TextField(
+                modifier = Modifier.fillMaxWidth().weight(1f),
+                value = description,
+                onValueChange = { description = it },
+                placeholder = { Text(stringResource(R.string.user_message_hint)) },
+                colors = mullvadWhiteTextFieldColors()
+            )
 
-                ActionButton(
-                    colors =
-                        ButtonDefaults.buttonColors(
-                            containerColor = MaterialTheme.colorScheme.primary,
-                            contentColor = MaterialTheme.colorScheme.onPrimary
-                        ),
-                    onClick = onNavigateToViewLogs,
-                    text = stringResource(id = R.string.view_logs)
-                )
+            ActionButton(
+                colors =
+                    ButtonDefaults.buttonColors(
+                        containerColor = MaterialTheme.colorScheme.primary,
+                        contentColor = MaterialTheme.colorScheme.onPrimary
+                    ),
+                onClick = onNavigateToViewLogs,
+                text = stringResource(id = R.string.view_logs)
+            )
 
-                ActionButton(
-                    colors =
-                        ButtonDefaults.buttonColors(
-                            containerColor = MaterialTheme.colorScheme.surface,
-                            contentColor = MaterialTheme.colorScheme.onSurface
-                        ),
-                    onClick = { onSendReport(email, description) },
-                    isEnabled = description.isNotEmpty(),
-                    text = stringResource(id = R.string.send)
-                )
-            }
+            ActionButton(
+                colors =
+                    ButtonDefaults.buttonColors(
+                        containerColor = MaterialTheme.colorScheme.surface,
+                        contentColor = MaterialTheme.colorScheme.onSurface
+                    ),
+                onClick = { onSendReport(email, description) },
+                isEnabled = description.isNotEmpty(),
+                text = stringResource(id = R.string.send)
+            )
         }
     }
 }
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/SettingsScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/SettingsScreen.kt
index 86dcc80f28..8983e6ac4a 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/SettingsScreen.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/SettingsScreen.kt
@@ -31,6 +31,7 @@ import net.mullvad.mullvadvpn.compose.state.SettingsUiState
 import net.mullvad.mullvadvpn.compose.test.LAZY_LIST_TEST_TAG
 import net.mullvad.mullvadvpn.constant.IS_PLAY_BUILD
 import net.mullvad.mullvadvpn.lib.common.util.openLink
+import net.mullvad.mullvadvpn.lib.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.theme.Dimens
 import net.mullvad.mullvadvpn.util.appendHideNavOnPlayBuild
 
@@ -38,11 +39,17 @@ import net.mullvad.mullvadvpn.util.appendHideNavOnPlayBuild
 @Preview
 @Composable
 private fun PreviewSettings() {
-    SettingsScreen(
-        uiState =
-            SettingsUiState(appVersion = "2222.22", isLoggedIn = true, isUpdateAvailable = true),
-        enterTransitionEndAction = MutableSharedFlow()
-    )
+    AppTheme {
+        SettingsScreen(
+            uiState =
+                SettingsUiState(
+                    appVersion = "2222.22",
+                    isLoggedIn = true,
+                    isUpdateAvailable = true
+                ),
+            enterTransitionEndAction = MutableSharedFlow()
+        )
+    }
 }
 
 @ExperimentalMaterial3Api
@@ -64,7 +71,7 @@ fun SettingsScreen(
     }
 
     ScaffoldWithMediumTopBar(
-        appBarTitle = stringResource(id = R.string.settings_vpn),
+        appBarTitle = stringResource(id = R.string.settings),
         navigationIcon = { NavigateBackDownIconButton(onBackClick) },
     ) { modifier, lazyListState ->
         LazyColumn(
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/SplitTunnelingScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/SplitTunnelingScreen.kt
index 7823a28494..28d5e05fb3 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/SplitTunnelingScreen.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/SplitTunnelingScreen.kt
@@ -88,10 +88,7 @@ fun SplitTunnelingScreen(
         appBarTitle = stringResource(id = R.string.split_tunneling),
         navigationIcon = { NavigateBackIconButton(onBackClick) }
     ) { _, lazyListState ->
-        LazyColumn(
-            horizontalAlignment = Alignment.CenterHorizontally,
-            state = lazyListState
-        ) {
+        LazyColumn(horizontalAlignment = Alignment.CenterHorizontally, state = lazyListState) {
             item(key = CommonContentKey.DESCRIPTION, contentType = ContentType.DESCRIPTION) {
                 Box(modifier = Modifier.fillMaxWidth()) {
                     Text(
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/ViewLogsScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/ViewLogsScreen.kt
index 091d19f480..cdef4bdbb3 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/ViewLogsScreen.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/ViewLogsScreen.kt
@@ -8,7 +8,9 @@ import androidx.compose.foundation.text.selection.SelectionContainer
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.Card
 import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Scaffold
 import androidx.compose.material3.TextField
 import androidx.compose.material3.TextFieldDefaults
 import androidx.compose.runtime.Composable
@@ -17,11 +19,9 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
-import me.onebone.toolbar.ScrollStrategy
-import me.onebone.toolbar.rememberCollapsingToolbarScaffoldState
 import net.mullvad.mullvadvpn.R
-import net.mullvad.mullvadvpn.compose.component.CollapsingToolbarScaffold
-import net.mullvad.mullvadvpn.compose.component.CollapsingTopBar
+import net.mullvad.mullvadvpn.compose.component.MullvadMediumTopBar
+import net.mullvad.mullvadvpn.compose.component.NavigateBackIconButton
 import net.mullvad.mullvadvpn.compose.component.drawVerticalScrollbar
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.theme.Dimens
@@ -39,38 +39,25 @@ private fun PreviewViewLogsLoadingScreen() {
     AppTheme { ViewLogsScreen(uiState = ViewLogsUiState()) }
 }
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun ViewLogsScreen(
     uiState: ViewLogsUiState,
     onBackClick: () -> Unit = {},
 ) {
 
-    val scaffoldState = rememberCollapsingToolbarScaffoldState()
-    val progress = scaffoldState.toolbarState.progress
-    CollapsingToolbarScaffold(
-        backgroundColor = MaterialTheme.colorScheme.background,
-        modifier = Modifier.fillMaxSize(),
-        state = scaffoldState,
-        scrollStrategy = ScrollStrategy.ExitUntilCollapsed,
-        isEnabledWhenCollapsable = false,
-        toolbar = {
-            val scaffoldModifier =
-                Modifier.road(
-                    whenCollapsed = Alignment.TopCenter,
-                    whenExpanded = Alignment.BottomStart
-                )
-            CollapsingTopBar(
-                backgroundColor = MaterialTheme.colorScheme.secondary,
-                onBackClicked = onBackClick,
+    Scaffold(
+        topBar = {
+            MullvadMediumTopBar(
                 title = stringResource(id = R.string.view_logs),
-                progress = progress,
-                modifier = scaffoldModifier,
+                navigationIcon = { NavigateBackIconButton(onBackClick) }
             )
-        },
+        }
     ) {
         Card(
             modifier =
                 Modifier.fillMaxSize()
+                    .padding(it)
                     .padding(
                         start = Dimens.sideMargin,
                         end = Dimens.sideMargin,
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/VpnSettingsScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/VpnSettingsScreen.kt
index a6857dcd72..c65710f17b 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/VpnSettingsScreen.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/VpnSettingsScreen.kt
@@ -10,7 +10,6 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.itemsIndexed
 import androidx.compose.material3.Divider
-import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
diff --git a/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/Theme.kt b/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/Theme.kt
index 8480e1c520..9ab3fc1e0f 100644
--- a/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/Theme.kt
+++ b/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/Theme.kt
@@ -15,7 +15,6 @@ import androidx.compose.ui.text.font.FontFamily
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.TextUnit
 import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
 import net.mullvad.mullvadvpn.lib.theme.dimensions.Dimensions
 import net.mullvad.mullvadvpn.lib.theme.dimensions.defaultDimensions
 import net.mullvad.mullvadvpn.lib.theme.typeface.TypeScale
@@ -30,7 +29,7 @@ private val MullvadTypography =
         bodyMedium = TextStyle(fontSize = TypeScale.TextMediumPlus, fontWeight = FontWeight.Bold),
         titleMedium =
             TextStyle(fontSize = TypeScale.TextMediumPlus, fontWeight = FontWeight.SemiBold),
-        titleLarge = TextStyle(fontSize = 22.sp, fontFamily = FontFamily.SansSerif),
+        titleLarge = TextStyle(fontSize = TypeScale.TitleLarge, fontFamily = FontFamily.SansSerif),
         labelMedium = TextStyle(fontSize = TypeScale.TextSmall, fontWeight = FontWeight.SemiBold),
         labelLarge =
             TextStyle(
diff --git a/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/typeface/TypeScale.kt b/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/typeface/TypeScale.kt
index 09ee7cafde..524461c07e 100644
--- a/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/typeface/TypeScale.kt
+++ b/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/typeface/TypeScale.kt
@@ -16,4 +16,5 @@ internal object TypeScale {
     val TextMediumPlus = 18.sp
     val TextMedium = 16.sp
     val TextSmall = 13.sp
+    val TitleLarge = 22.sp
 }