🚀 Update UI of About Screen

* Material3 Style

app/src/main/java/ua/acclorite/book_story/presentation/about/AboutBadgeItem.kt

@@ -6,38 +6,47 @@
 
 package ua.acclorite.book_story.presentation.about
 
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import ua.acclorite.book_story.domain.about.Badge
-import ua.acclorite.book_story.presentation.core.components.common.IconButton
 
 @Composable
 fun AboutBadgeItem(
     badge: Badge,
     onClick: () -> Unit
 ) {
-    if (badge.imageVector == null && badge.drawable != null) {
-        IconButton(
-            modifier = Modifier.size(22.dp),
-            icon = badge.drawable,
-            contentDescription = badge.contentDescription,
-            disableOnClick = false,
-            color = MaterialTheme.colorScheme.primary
-        ) {
-            onClick()
-        }
-    } else if (badge.imageVector != null && badge.drawable == null) {
-        IconButton(
-            modifier = Modifier.size(22.dp),
-            icon = badge.imageVector,
-            contentDescription = badge.contentDescription,
-            disableOnClick = false,
-            color = MaterialTheme.colorScheme.primary
-        ) {
-            onClick()
+    Box(
+        modifier = Modifier
+            .clip(MaterialTheme.shapes.large)
+            .background(MaterialTheme.colorScheme.surfaceContainer)
+            .clickable { onClick() }
+            .padding(14.dp)
+    ) {
+        if (badge.imageVector == null && badge.drawable != null) {
+            Icon(
+                modifier = Modifier.size(22.dp),
+                painter = painterResource(id = badge.drawable),
+                contentDescription = stringResource(id = badge.contentDescription),
+                tint = MaterialTheme.colorScheme.primary
+            )
+        } else if (badge.imageVector != null && badge.drawable == null) {
+            Icon(
+                modifier = Modifier.size(22.dp),
+                imageVector = badge.imageVector,
+                contentDescription = stringResource(id = badge.contentDescription),
+                tint = MaterialTheme.colorScheme.primary
+            )
         }
     }
 }

app/src/main/java/ua/acclorite/book_story/presentation/about/AboutBadges.kt

@@ -7,16 +7,13 @@
 package ua.acclorite.book_story.presentation.about
 
 import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyRow
 import androidx.compose.foundation.lazy.items
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
-import androidx.compose.ui.unit.dp
 import ua.acclorite.book_story.R
 import ua.acclorite.book_story.presentation.core.constants.Constants
 import ua.acclorite.book_story.presentation.core.constants.provideAboutBadges
@@ -29,36 +26,30 @@ fun AboutBadges(
 ) {
     val context = LocalContext.current
 
-    Box(
+    LazyRow(
         modifier = Modifier.fillMaxWidth(),
-        contentAlignment = Alignment.Center
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.SpaceBetween
     ) {
-        LazyRow(
-            Modifier
-                .padding(18.dp),
-            verticalAlignment = Alignment.CenterVertically,
-            horizontalArrangement = Arrangement.spacedBy(13.dp)
-        ) {
-            items(
-                Constants.provideAboutBadges(),
-                key = { it.id }
-            ) { badge ->
-                AboutBadgeItem(badge = badge) {
-                    when (badge.id) {
-                        "tryzub" -> {
-                            context.getString(R.string.slava_ukraini)
-                                .showToast(context = context, longToast = false)
-                        }
+        items(
+            Constants.provideAboutBadges(),
+            key = { it.id }
+        ) { badge ->
+            AboutBadgeItem(badge = badge) {
+                when (badge.id) {
+                    "tryzub" -> {
+                        context.getString(R.string.slava_ukraini)
+                            .showToast(context = context, longToast = false)
+                    }
 
-                        else -> {
-                            badge.url?.let {
-                                navigateToBrowserPage(
-                                    AboutEvent.OnNavigateToBrowserPage(
-                                        page = it,
-                                        context = context
-                                    )
+                    else -> {
+                        badge.url?.let {
+                            navigateToBrowserPage(
+                                AboutEvent.OnNavigateToBrowserPage(
+                                    page = it,
+                                    context = context
                                 )
-                            }
+                            )
                         }
                     }
                 }

app/src/main/java/ua/acclorite/book_story/presentation/about/AboutItem.kt

@@ -8,6 +8,7 @@ package ua.acclorite.book_story.presentation.about
 
 import androidx.compose.animation.core.EaseInOut
 import androidx.compose.animation.core.tween
+import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
@@ -21,9 +22,9 @@ import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
 import androidx.compose.ui.text.AnnotatedString
 import androidx.compose.ui.text.style.TextOverflow
-import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import ua.acclorite.book_story.presentation.core.components.progress_indicator.CircularProgressIndicator
@@ -34,7 +35,6 @@ fun AboutItem(
     modifier: Modifier = Modifier,
     title: String,
     description: AnnotatedString?,
-    verticalPadding: Dp = 12.dp,
     showLoading: Boolean = false,
     isOnClickEnabled: Boolean = true,
     onClick: () -> Unit = {}
@@ -42,10 +42,12 @@ fun AboutItem(
     Row(
         modifier
             .fillMaxWidth()
+            .clip(MaterialTheme.shapes.large)
+            .background(MaterialTheme.colorScheme.surfaceContainer)
             .clickable(enabled = isOnClickEnabled) {
                 onClick()
             }
-            .padding(horizontal = 18.dp, vertical = verticalPadding),
+            .padding(horizontal = 18.dp, vertical = 18.dp),
         verticalAlignment = Alignment.CenterVertically
     ) {
         Column(Modifier.weight(1f)) {

app/src/main/java/ua/acclorite/book_story/presentation/about/AboutLayout.kt

@@ -6,21 +6,25 @@
 
 package ua.acclorite.book_story.presentation.about
 
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
-import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.navigationBarsPadding
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.lazy.LazyListState
-import androidx.compose.material3.HorizontalDivider
+import androidx.compose.foundation.shape.CornerSize
+import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
@@ -35,6 +39,7 @@ import ua.acclorite.book_story.presentation.core.constants.provideReleasesPage
 import ua.acclorite.book_story.presentation.core.constants.provideTranslationPage
 import ua.acclorite.book_story.ui.about.AboutEvent
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun AboutLayout(
     updateLoading: Boolean,
@@ -46,16 +51,13 @@ fun AboutLayout(
     navigateToCredits: () -> Unit
 ) {
     val context = LocalContext.current
+
     LazyColumnWithScrollbar(
         Modifier
             .fillMaxSize()
             .padding(top = paddingValues.calculateTopPadding()),
         state = listState
     ) {
-        item {
-            Spacer(modifier = Modifier.height(16.dp))
-        }
-
         item {
             Box(
                 modifier = Modifier.fillMaxWidth(),
@@ -65,123 +67,119 @@ fun AboutLayout(
                     painterResource(id = R.drawable.app_icon),
                     contentDescription = stringResource(id = R.string.app_icon_content_desc),
                     modifier = Modifier
-                        .padding(14.dp)
-                        .size(120.dp),
-                    tint = MaterialTheme.colorScheme.onSurfaceVariant
+                        .padding(horizontal = 14.dp)
+                        .padding(
+                            top = 40.dp,
+                            bottom = 50.dp
+                        )
+                        .size(180.dp),
+                    tint = MaterialTheme.colorScheme.primary
                 )
             }
         }
 
         item {
-            Spacer(modifier = Modifier.height(36.dp))
-            HorizontalDivider(
-                modifier = Modifier.fillMaxWidth(),
-                color = MaterialTheme.colorScheme.outlineVariant
-            )
-        }
-
-        item {
-            AboutItem(
-                title = stringResource(id = R.string.app_version_option),
-                description = buildAnnotatedString {
-                    append(
-                        stringResource(
-                            id = R.string.app_version_option_desc_1,
-                            context.getString(R.string.app_version)
+            Column(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .clip(
+                        MaterialTheme.shapes.extraLarge.copy(
+                            bottomStart = CornerSize(0),
+                            bottomEnd = CornerSize(0)
                         )
                     )
-                    append("\n")
-                    append(stringResource(id = R.string.app_version_option_desc_2))
-                },
-                showLoading = updateLoading
+                    .background(MaterialTheme.colorScheme.surfaceContainerLow)
+                    .padding(24.dp)
+                    .navigationBarsPadding(),
+                verticalArrangement = Arrangement.spacedBy(12.dp)
             ) {
-                checkForUpdate(
-                    AboutEvent.OnCheckForUpdate(
-                        context = context
+                AboutItem(
+                    title = stringResource(id = R.string.app_version_option),
+                    description = buildAnnotatedString {
+                        append(
+                            stringResource(
+                                id = R.string.app_version_option_desc_1,
+                                context.getString(R.string.app_version)
+                            )
+                        )
+                        append("\n")
+                        append(stringResource(id = R.string.app_version_option_desc_2))
+                    },
+                    showLoading = updateLoading
+                ) {
+                    checkForUpdate(
+                        AboutEvent.OnCheckForUpdate(
+                            context = context
+                        )
                     )
+                }
+
+                AboutItem(
+                    title = stringResource(id = R.string.report_bug_option),
+                    description = null
+                ) {
+                    navigateToBrowserPage(
+                        AboutEvent.OnNavigateToBrowserPage(
+                            page = Constants.provideIssuesPage(),
+                            context = context
+                        )
+                    )
+                }
+
+                AboutItem(
+                    title = stringResource(id = R.string.contributors_option),
+                    description = null
+                ) {
+                    navigateToBrowserPage(
+                        AboutEvent.OnNavigateToBrowserPage(
+                            page = Constants.provideContributorsPage(),
+                            context = context
+                        )
+                    )
+                }
+
+                AboutItem(
+                    title = stringResource(id = R.string.whats_new_option),
+                    description = null
+                ) {
+                    navigateToBrowserPage(
+                        AboutEvent.OnNavigateToBrowserPage(
+                            page = Constants.provideReleasesPage(),
+                            context = context
+                        )
+                    )
+                }
+
+                AboutItem(
+                    title = stringResource(id = R.string.licenses_option),
+                    description = null
+                ) {
+                    navigateToLicenses()
+                }
+
+                AboutItem(
+                    title = stringResource(id = R.string.credits_option),
+                    description = null
+                ) {
+                    navigateToCredits()
+                }
+
+                AboutItem(
+                    title = stringResource(id = R.string.help_translate_option),
+                    description = null
+                ) {
+                    navigateToBrowserPage(
+                        AboutEvent.OnNavigateToBrowserPage(
+                            page = Constants.provideTranslationPage(),
+                            context = context
+                        )
+                    )
+                }
+
+                AboutBadges(
+                    navigateToBrowserPage = navigateToBrowserPage
                 )
             }
         }
-
-        item {
-            AboutItem(
-                title = stringResource(id = R.string.report_bug_option),
-                description = null
-            ) {
-                navigateToBrowserPage(
-                    AboutEvent.OnNavigateToBrowserPage(
-                        page = Constants.provideIssuesPage(),
-                        context = context
-                    )
-                )
-            }
-        }
-
-
-        item {
-            AboutItem(
-                title = stringResource(id = R.string.contributors_option),
-                description = null
-            ) {
-                navigateToBrowserPage(
-                    AboutEvent.OnNavigateToBrowserPage(
-                        page = Constants.provideContributorsPage(),
-                        context = context
-                    )
-                )
-            }
-        }
-
-        item {
-            AboutItem(
-                title = stringResource(id = R.string.whats_new_option),
-                description = null
-            ) {
-                navigateToBrowserPage(
-                    AboutEvent.OnNavigateToBrowserPage(
-                        page = Constants.provideReleasesPage(),
-                        context = context
-                    )
-                )
-            }
-        }
-
-        item {
-            AboutItem(
-                title = stringResource(id = R.string.licenses_option),
-                description = null
-            ) {
-                navigateToLicenses()
-            }
-        }
-
-        item {
-            AboutItem(
-                title = stringResource(id = R.string.credits_option),
-                description = null
-            ) {
-                navigateToCredits()
-            }
-        }
-
-        item {
-            AboutItem(
-                title = stringResource(id = R.string.help_translate_option),
-                description = null
-            ) {
-                navigateToBrowserPage(
-                    AboutEvent.OnNavigateToBrowserPage(
-                        page = Constants.provideTranslationPage(),
-                        context = context
-                    )
-                )
-            }
-        }
-
-        item {
-            AboutBadges(
-                navigateToBrowserPage = navigateToBrowserPage
-            )
-        }
     }
 }

app/src/main/java/ua/acclorite/book_story/presentation/about/AboutScaffold.kt

@@ -6,10 +6,7 @@
 
 package ua.acclorite.book_story.presentation.about
 
-import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.navigationBars
-import androidx.compose.foundation.layout.windowInsetsPadding
 import androidx.compose.foundation.lazy.LazyListState
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.MaterialTheme
@@ -35,8 +32,7 @@ fun AboutScaffold(
     Scaffold(
         Modifier
             .fillMaxSize()
-            .nestedScroll(scrollBehavior.nestedScrollConnection)
-            .windowInsetsPadding(WindowInsets.navigationBars),
+            .nestedScroll(scrollBehavior.nestedScrollConnection),
         containerColor = MaterialTheme.colorScheme.surface,
         topBar = {
             AboutTopBar(