ui: tint the offline strip and make it slimmer

Drop the divider and move the strip onto a lightly primary-tinted
version of the bar colour, so it reads as its own band without a rule.
Trim the vertical padding, leaving the strip at 28dp.
This commit is contained in:
austinried
2026-10-21 10:14:10 +00:00
parent bb3abe39b6
commit 72e1b61bff
@@ -49,7 +49,6 @@ import androidx.compose.material3.FilterChip
import androidx.compose.material3.FilterChipDefaults import androidx.compose.material3.FilterChipDefaults
import androidx.compose.material3.FloatingActionButton import androidx.compose.material3.FloatingActionButton
import androidx.compose.material3.FloatingActionButtonDefaults import androidx.compose.material3.FloatingActionButtonDefaults
import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.Icon import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton import androidx.compose.material3.IconButton
import androidx.compose.material3.LocalContentColor import androidx.compose.material3.LocalContentColor
@@ -90,6 +89,7 @@ import androidx.compose.ui.graphics.StrokeCap
import androidx.compose.ui.graphics.drawscope.clipPath import androidx.compose.ui.graphics.drawscope.clipPath
import androidx.compose.ui.graphics.drawscope.clipRect import androidx.compose.ui.graphics.drawscope.clipRect
import androidx.compose.ui.graphics.graphicsLayer import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.graphics.lerp
import androidx.compose.ui.graphics.vector.ImageVector import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.layout.boundsInParent import androidx.compose.ui.layout.boundsInParent
import androidx.compose.ui.layout.layout import androidx.compose.ui.layout.layout
@@ -592,7 +592,7 @@ fun LibraryScreen(
.padding(bottom = bottomInset), .padding(bottom = bottomInset),
) { ) {
if (offline) { if (offline) {
OfflineStrip(onGoOnline = onExitOffline) OfflineStrip(onGoOnline = onExitOffline, headerColor = headerColor)
} }
LibraryTabs( LibraryTabs(
pagerState = pagerState, pagerState = pagerState,
@@ -835,6 +835,7 @@ private val TAB_ICON_SIZE = 24.dp
private val TAB_VERTICAL_PADDING = 6.dp private val TAB_VERTICAL_PADDING = 6.dp
private val TOUCH_TARGET = 48.dp private val TOUCH_TARGET = 48.dp
private const val LIST_OPTIONS_WEIGHT = 0.11f private const val LIST_OPTIONS_WEIGHT = 0.11f
private const val OFFLINE_STRIP_TINT = 0.10f
private val LIST_OPTIONS_BAR_WIDTHS = listOf(1f, 0.62f, 0.34f) private val LIST_OPTIONS_BAR_WIDTHS = listOf(1f, 0.62f, 0.34f)
@Composable @Composable
@@ -1015,43 +1016,41 @@ internal fun LibraryTabs(
@Composable @Composable
private fun OfflineStrip( private fun OfflineStrip(
onGoOnline: () -> Unit, onGoOnline: () -> Unit,
headerColor: Color,
modifier: Modifier = Modifier, modifier: Modifier = Modifier,
) { ) {
Column(modifier.fillMaxWidth()) { Surface(
Surface( onClick = onGoOnline,
onClick = onGoOnline, color = lerp(headerColor, MaterialTheme.colorScheme.primary, OFFLINE_STRIP_TINT),
color = Color.Transparent, contentColor = MaterialTheme.colorScheme.onBackground,
contentColor = MaterialTheme.colorScheme.onBackground, modifier = modifier.fillMaxWidth(),
modifier = Modifier.fillMaxWidth(), ) {
Row(
modifier =
Modifier
.fillMaxWidth()
.padding(horizontal = 16.dp, vertical = 4.dp),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(8.dp),
) { ) {
Row( Icon(
modifier = imageVector = Icons.Rounded.CloudOff,
Modifier contentDescription = null,
.fillMaxWidth() tint = MaterialTheme.colorScheme.primary,
.padding(horizontal = 16.dp, vertical = 6.dp), modifier = Modifier.size(18.dp),
verticalAlignment = Alignment.CenterVertically, )
horizontalArrangement = Arrangement.spacedBy(8.dp), Text(
) { text = stringResource(R.string.offline_mode_banner),
Icon( style = MaterialTheme.typography.bodyMedium,
imageVector = Icons.Rounded.CloudOff, maxLines = 2,
contentDescription = null, modifier = Modifier.weight(1f),
tint = MaterialTheme.colorScheme.primary, )
modifier = Modifier.size(18.dp), Text(
) text = stringResource(R.string.offline_go_online),
Text( style = MaterialTheme.typography.labelLarge,
text = stringResource(R.string.offline_mode_banner), color = MaterialTheme.colorScheme.primary,
style = MaterialTheme.typography.bodyMedium, )
maxLines = 2,
modifier = Modifier.weight(1f),
)
Text(
text = stringResource(R.string.offline_go_online),
style = MaterialTheme.typography.labelLarge,
color = MaterialTheme.colorScheme.primary,
)
}
} }
HorizontalDivider(color = MaterialTheme.colorScheme.outlineVariant)
} }
} }