Improve AboutTab spacing

Author: Stypox

app/src/main/java/org/schabi/newpipe/ui/components/about/AboutTab.kt

@@ -1,10 +1,11 @@
 package org.schabi.newpipe.ui.components.about
 
 import androidx.annotation.StringRes
-import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
+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.wrapContentSize
 import androidx.compose.foundation.layout.wrapContentWidth
@@ -15,12 +16,18 @@ import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.NonRestartableComposable
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
-import androidx.compose.ui.res.painterResource
 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.compose.ui.tooling.preview.datasource.CollectionPreviewParameterProvider
 import androidx.compose.ui.unit.dp
+import androidx.core.content.ContextCompat.getDrawable
+import coil3.compose.AsyncImage
 import my.nanihadesuka.compose.ColumnScrollbar
 import org.schabi.newpipe.BuildConfig
 import org.schabi.newpipe.R
@@ -54,6 +61,9 @@ private class AboutData(
     @StringRes val url: Int
 )
 
+private class AboutDataProvider : CollectionPreviewParameterProvider<AboutData>(ABOUT_ITEMS)
+
+@Preview(backgroundColor = 0xFFFFFFFF, showBackground = true)
 @Composable
 @NonRestartableComposable
 fun AboutTab() {
@@ -73,18 +83,32 @@ fun AboutTab() {
                     .wrapContentSize(Alignment.Center),
                 horizontalAlignment = Alignment.CenterHorizontally
             ) {
-                Image(
-                    painter = painterResource(R.drawable.icon),
-                    contentDescription = stringResource(R.string.app_name)
+                // note: the preview
+                val context = LocalContext.current
+                val launcherDrawable = remember { getDrawable(context, R.mipmap.ic_launcher) }
+                AsyncImage(
+                    model = launcherDrawable,
+                    contentDescription = stringResource(R.string.app_name),
                 )
+                Spacer(Modifier.height(4.dp))
                 Text(
+                    text = stringResource(R.string.app_name),
                     style = MaterialTheme.typography.titleLarge,
-                    text = stringResource(R.string.app_name)
+                    textAlign = TextAlign.Center,
+                )
+                Text(
+                    text = BuildConfig.VERSION_NAME,
+                    style = MaterialTheme.typography.titleMedium,
+                    textAlign = TextAlign.Center,
+                )
+                Text(
+                    modifier = Modifier.fillMaxWidth(),
+                    text = stringResource(R.string.app_description),
+                    textAlign = TextAlign.Center,
                 )
-                Text(text = BuildConfig.VERSION_NAME)
             }
 
-            Text(text = stringResource(R.string.app_description))
+            Spacer(modifier = Modifier.height(4.dp))
 
             for (item in ABOUT_ITEMS) {
                 AboutItem(item)
@@ -93,19 +117,24 @@ fun AboutTab() {
     }
 }
 
+@Preview(backgroundColor = 0xFFFFFFFF, showBackground = true)
 @Composable
 @NonRestartableComposable
-private fun AboutItem(aboutData: AboutData) {
+private fun AboutItem(@PreviewParameter(AboutDataProvider::class) aboutData: AboutData) {
     Column {
         Text(
             text = stringResource(aboutData.title),
             style = MaterialTheme.typography.titleMedium
         )
-        Text(text = stringResource(aboutData.description))
+        Text(
+            text = stringResource(aboutData.description),
+            style = MaterialTheme.typography.bodyMedium
+        )
 
         val context = LocalContext.current
         TextButton(
-            modifier = Modifier.fillMaxWidth()
+            modifier = Modifier
+                .fillMaxWidth()
                 .wrapContentWidth(Alignment.End),
             onClick = { ShareUtils.openUrlInApp(context, context.getString(aboutData.url)) }
         ) {