Add scaffold preview, use container color in about screen and scaffold

Author: Isira-Seneviratne

app/src/main/java/org/schabi/newpipe/ui/components/common/ScaffoldWithToolbar.kt

@@ -1,16 +1,20 @@
 package org.schabi.newpipe.ui.components.common
 
+import android.content.res.Configuration
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.RowScope
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.filled.ArrowBack
 import androidx.compose.material3.ExperimentalMaterial3Api
 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.material3.TopAppBar
+import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.tooling.preview.Preview
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
@@ -24,6 +28,9 @@ fun ScaffoldWithToolbar(
         topBar = {
             TopAppBar(
                 title = { Text(text = title) },
+                colors = TopAppBarDefaults.topAppBarColors(
+                    containerColor = MaterialTheme.colorScheme.primaryContainer
+                ),
                 navigationIcon = {
                     IconButton(onClick = onBackClick) {
                         Icon(
@@ -38,3 +45,14 @@ fun ScaffoldWithToolbar(
         content = content
     )
 }
+
+@Preview(name = "Light mode", uiMode = Configuration.UI_MODE_NIGHT_NO)
+@Preview(name = "Dark mode", uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Composable
+private fun ScaffoldWithToolbarPreview() {
+    ScaffoldWithToolbar(
+        title = "Example",
+        onBackClick = {},
+        content = {}
+    )
+}

app/src/main/java/org/schabi/newpipe/ui/screens/AboutScreen.kt

@@ -20,7 +20,6 @@ import androidx.compose.runtime.mutableIntStateOf
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
 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 androidx.compose.ui.unit.dp
@@ -45,10 +44,13 @@ fun AboutScreen(padding: PaddingValues) {
             tabIndex = pagerState.currentPage
         }
 
-        TabRow(selectedTabIndex = tabIndex) {
+        TabRow(
+            selectedTabIndex = tabIndex,
+            containerColor = MaterialTheme.colorScheme.primaryContainer
+        ) {
             TITLES.forEachIndexed { index, titleId ->
                 Tab(
-                    text = { Text(text = stringResource(titleId), color = Color.White) },
+                    text = { Text(text = stringResource(titleId)) },
                     selected = tabIndex == index,
                     onClick = { tabIndex = index }
                 )