Improve AboutTab spacing

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(
+                // note: the preview
-                    painter = painterResource(R.drawable.icon),
+                val context = LocalContext.current
-                    contentDescription = stringResource(R.string.app_name)
+                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,
+                    textAlign = TextAlign.Center,
                 )
                 Text(
-                    style = MaterialTheme.typography.titleLarge,
+                    text = BuildConfig.VERSION_NAME,
-                    text = stringResource(R.string.app_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)) }
         ) {

app/src/main/res/drawable/icon.xml

@@ -1,18 +0,0 @@
-<vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="100dp"
-    android:height="100dp"
-    android:viewportWidth="100"
-    android:viewportHeight="100">
-  <path
-      android:pathData="M50,50m-50,0a50,50 0,1 1,100 0a50,50 0,1 1,-100 0"
-      android:fillColor="#CD201F"/>
-  <path
-      android:pathData="M47,28.2c-9,-5.3 -15.3,-9 -15.3,-9v61.7c0,0 30.4,-18 52.3,-30.9C72.1,43 57.7,34.5 47,28.2z"
-      android:fillColor="#FFFFFF"/>
-  <path
-      android:pathData="M48.4,40.1c-4.1,-2.4 -7,-4.1 -7,-4.1V64c0,0 13.9,-8.2 23.8,-14C59.8,46.8 53.3,42.9 48.4,40.1z"
-      android:fillColor="#CD201F"/>
-  <path
-      android:pathData="M41.4,55.6h6.2v21h-6.2z"
-      android:fillColor="#CD201F"/>
-</vector>