UI fixes for TopAppBar (#377)

app/src/main/java/me/ash/reader/ui/component/base/RYScaffold.kt

@@ -30,30 +30,20 @@ fun RYScaffold(
                     topBarTonalElevation,
                     color = containerColor
                 )
-            )
-            .statusBarsPadding(),
-//            .run {
-//                if (bottomBar != null || floatingActionButton != null) {
-//                    navigationBarsPadding()
-//                } else {
-//                    this
-//                }
-//            },
+            ),
         containerColor = MaterialTheme.colorScheme.surfaceColorAtElevation(
             containerTonalElevation,
             color = containerColor
         ) onDark MaterialTheme.colorScheme.surface,
         topBar = {
             if (navigationIcon != null || actions != null) {
-                SmallTopAppBar(
+                TopAppBar(
                     title = {},
-                    colors = TopAppBarDefaults.smallTopAppBarColors(
-                        containerColor = MaterialTheme.colorScheme.surfaceColorAtElevation(
-                            topBarTonalElevation, color = containerColor
-                        ),
-                    ),
                     navigationIcon = { navigationIcon?.invoke() },
                     actions = { actions?.invoke(this) },
+                    colors = TopAppBarDefaults.smallTopAppBarColors(
+                        containerColor = Color.Transparent,
+                    )
                 )
             }
         },

app/src/main/java/me/ash/reader/ui/page/home/reading/Content.kt

@@ -37,14 +37,6 @@ fun Content(
         LazyColumn(
             modifier = Modifier
                 .fillMaxSize()
-                .statusBarsPadding()
-                .run {
-                    if (isShowToolBar) {
-                        navigationBarsPadding()
-                    } else {
-                        this
-                    }
-                }
                 .drawVerticalScrollbar(listState),
             state = listState,
         ) {

app/src/main/java/me/ash/reader/ui/page/home/reading/TopBar.kt

@@ -2,20 +2,21 @@ package me.ash.reader.ui.page.home.reading
 
 import RYExtensibleVisibility
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.layout.statusBarsPadding
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.outlined.Palette
 import androidx.compose.material.icons.outlined.Share
 import androidx.compose.material.icons.rounded.Close
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.SmallTopAppBar
+import androidx.compose.material3.TopAppBar
 import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
@@ -25,7 +26,6 @@ import me.ash.reader.R
 import me.ash.reader.data.model.preference.LocalReadingPageTonalElevation
 import me.ash.reader.ui.component.base.FeedbackIconButton
 import me.ash.reader.ui.ext.share
-import me.ash.reader.ui.ext.surfaceColorAtElevation
 import me.ash.reader.ui.page.common.RouteName
 
 @OptIn(ExperimentalMaterial3Api::class)
@@ -47,14 +47,10 @@ fun TopBar(
         contentAlignment = Alignment.TopCenter
     ) {
         RYExtensibleVisibility(visible = isShow) {
-            SmallTopAppBar(
-                modifier = Modifier.statusBarsPadding(),
-                colors = TopAppBarDefaults.smallTopAppBarColors(
-                    containerColor = MaterialTheme.colorScheme.surfaceColorAtElevation(
-                        elevation = tonalElevation.value.dp
-                    ),
-                ),
+            TopAppBar(
                 title = {},
+                modifier = Modifier,
+                windowInsets = WindowInsets(0.dp),
                 navigationIcon = {
                     FeedbackIconButton(
                         imageVector = Icons.Rounded.Close,
@@ -86,7 +82,9 @@ fun TopBar(
                             ?.let { it + "\n" } + link
                         )
                     }
-                }
+                }, colors = TopAppBarDefaults.smallTopAppBarColors(
+                    containerColor = Color.Transparent,
+                )
             )
         }
     }

app/src/main/java/me/ash/reader/ui/page/settings/color/feeds/FeedsPagePreview.kt

@@ -12,10 +12,11 @@ import androidx.compose.material.icons.rounded.ArrowBack
 import androidx.compose.material.icons.rounded.Refresh
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.SmallTopAppBar
+import androidx.compose.material3.TopAppBar
 import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.*
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
@@ -67,13 +68,8 @@ fun FeedsPagePreview(
                 shape = RoundedCornerShape(24.dp)
             )
     ) {
-        SmallTopAppBar(
+        TopAppBar(
             title = {},
-            colors = TopAppBarDefaults.smallTopAppBarColors(
-                containerColor = MaterialTheme.colorScheme.surfaceColorAtElevation(
-                    topBarTonalElevation.value.dp
-                ),
-            ),
             navigationIcon = {
                 FeedbackIconButton(
                     imageVector = Icons.Rounded.ArrowBack,
@@ -92,7 +88,9 @@ fun FeedsPagePreview(
                     contentDescription = stringResource(R.string.subscribe),
                     tint = MaterialTheme.colorScheme.onSurface,
                 )
-            }
+            }, colors = TopAppBarDefaults.smallTopAppBarColors(
+                containerColor = Color.Transparent,
+            )
         )
         Spacer(modifier = Modifier.height(12.dp))
         GroupItem(
@@ -105,7 +103,8 @@ fun FeedsPagePreview(
         FeedItemExpandSwitcher(
             groupAlpha = groupAlpha,
             feedBadgeAlpha = feedBadgeAlpha,
-            isExpanded = groupListExpand.value)
+            isExpanded = groupListExpand.value
+        )
         Spacer(modifier = Modifier.height(12.dp))
         FilterBar(
             filter = filter,
@@ -121,7 +120,7 @@ fun FeedsPagePreview(
 
 @Stable
 @Composable
-fun FeedItemExpandSwitcher(groupAlpha: Float,feedBadgeAlpha: Float ,isExpanded: Boolean) {
+fun FeedItemExpandSwitcher(groupAlpha: Float, feedBadgeAlpha: Float, isExpanded: Boolean) {
     FeedPreview(
         groupAlpha = groupAlpha,
         feedBadgeAlpha = feedBadgeAlpha,
@@ -131,7 +130,7 @@ fun FeedItemExpandSwitcher(groupAlpha: Float,feedBadgeAlpha: Float ,isExpanded:
 
 @Stable
 @Composable
-fun FeedPreview(groupAlpha: Float,feedBadgeAlpha: Float, isExpanded: Boolean) {
+fun FeedPreview(groupAlpha: Float, feedBadgeAlpha: Float, isExpanded: Boolean) {
     FeedItem(
         feed = generateFeedPreview(),
         alpha = groupAlpha,

app/src/main/java/me/ash/reader/ui/page/settings/color/flow/FlowPagePreview.kt

@@ -12,10 +12,11 @@ import androidx.compose.material.icons.rounded.DoneAll
 import androidx.compose.material.icons.rounded.Search
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.SmallTopAppBar
+import androidx.compose.material3.TopAppBar
 import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.*
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
@@ -55,13 +56,8 @@ fun FlowPagePreview(
                 shape = RoundedCornerShape(24.dp)
             )
     ) {
-        SmallTopAppBar(
+        TopAppBar(
             title = {},
-            colors = TopAppBarDefaults.smallTopAppBarColors(
-                containerColor = MaterialTheme.colorScheme.surfaceColorAtElevation(
-                    topBarTonalElevation.value.dp
-                ),
-            ),
             navigationIcon = {
                 FeedbackIconButton(
                     imageVector = Icons.Rounded.ArrowBack,
@@ -80,7 +76,9 @@ fun FlowPagePreview(
                     contentDescription = stringResource(R.string.search),
                     tint = MaterialTheme.colorScheme.onSurface,
                 ) {}
-            }
+            }, colors = TopAppBarDefaults.smallTopAppBarColors(
+                containerColor = Color.Transparent,
+            )
         )
         Spacer(modifier = Modifier.height(12.dp))
         ArticleItem(