🚀 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
+) {
+    Box(
+        modifier = Modifier
+            .clip(MaterialTheme.shapes.large)
+            .background(MaterialTheme.colorScheme.surfaceContainer)
+            .clickable { onClick() }
+            .padding(14.dp)
     ) {
         if (badge.imageVector == null && badge.drawable != null) {
-        IconButton(
+            Icon(
                 modifier = Modifier.size(22.dp),
-            icon = badge.drawable,
-            contentDescription = badge.contentDescription,
-            disableOnClick = false,
-            color = MaterialTheme.colorScheme.primary
-        ) {
-            onClick()
-        }
+                painter = painterResource(id = badge.drawable),
+                contentDescription = stringResource(id = badge.contentDescription),
+                tint = MaterialTheme.colorScheme.primary
+            )
         } else if (badge.imageVector != null && badge.drawable == null) {
-        IconButton(
+            Icon(
                 modifier = Modifier.size(22.dp),
-            icon = badge.imageVector,
-            contentDescription = badge.contentDescription,
-            disableOnClick = false,
-            color = MaterialTheme.colorScheme.primary
-        ) {
-            onClick()
+                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,15 +26,10 @@ fun AboutBadges(
 ) {
     val context = LocalContext.current
 
-    Box(
-        modifier = Modifier.fillMaxWidth(),
-        contentAlignment = Alignment.Center
-    ) {
     LazyRow(
-            Modifier
-                .padding(18.dp),
+        modifier = Modifier.fillMaxWidth(),
         verticalAlignment = Alignment.CenterVertically,
-            horizontalArrangement = Arrangement.spacedBy(13.dp)
+        horizontalArrangement = Arrangement.SpaceBetween
     ) {
         items(
             Constants.provideAboutBadges(),
@@ -65,4 +57,3 @@ fun AboutBadges(
         }
     }
 }
-}

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,22 +67,32 @@ 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
+            Column(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .clip(
+                        MaterialTheme.shapes.extraLarge.copy(
+                            bottomStart = CornerSize(0),
+                            bottomEnd = CornerSize(0)
                         )
-        }
-
-        item {
+                    )
+                    .background(MaterialTheme.colorScheme.surfaceContainerLow)
+                    .padding(24.dp)
+                    .navigationBarsPadding(),
+                verticalArrangement = Arrangement.spacedBy(12.dp)
+            ) {
                 AboutItem(
                     title = stringResource(id = R.string.app_version_option),
                     description = buildAnnotatedString {
@@ -101,9 +113,7 @@ fun AboutLayout(
                         )
                     )
                 }
-        }
 
-        item {
                 AboutItem(
                     title = stringResource(id = R.string.report_bug_option),
                     description = null
@@ -115,10 +125,7 @@ fun AboutLayout(
                         )
                     )
                 }
-        }
 
-
-        item {
                 AboutItem(
                     title = stringResource(id = R.string.contributors_option),
                     description = null
@@ -130,9 +137,7 @@ fun AboutLayout(
                         )
                     )
                 }
-        }
 
-        item {
                 AboutItem(
                     title = stringResource(id = R.string.whats_new_option),
                     description = null
@@ -144,27 +149,21 @@ fun AboutLayout(
                         )
                     )
                 }
-        }
 
-        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
@@ -176,12 +175,11 @@ fun AboutLayout(
                         )
                     )
                 }
-        }
 
-        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(