From 98ad641b9b6de3225d1a90920fde77ea2bf9602c Mon Sep 17 00:00:00 2001 From: Acclorite <140836141+Acclorite@users.noreply.github.com> Date: Sun, 20 Oct 2024 11:58:28 +0300 Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=80=20Improve=20SettingsCategoryItem?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Larger font size * Changed colors * More padding * Changed icons * Rounded corners (visible when holding) --- .../screens/settings/SettingsScreen.kt | 24 +++++++------- .../components/SettingsCategoryItem.kt | 31 +++++++++++-------- 2 files changed, 30 insertions(+), 25 deletions(-) diff --git a/app/src/main/java/ua/acclorite/book_story/presentation/screens/settings/SettingsScreen.kt b/app/src/main/java/ua/acclorite/book_story/presentation/screens/settings/SettingsScreen.kt index a275acde..63a577dc 100644 --- a/app/src/main/java/ua/acclorite/book_story/presentation/screens/settings/SettingsScreen.kt +++ b/app/src/main/java/ua/acclorite/book_story/presentation/screens/settings/SettingsScreen.kt @@ -8,10 +8,10 @@ import androidx.compose.foundation.layout.navigationBars import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.windowInsetsPadding import androidx.compose.material.icons.Icons -import androidx.compose.material.icons.automirrored.filled.MenuBook -import androidx.compose.material.icons.filled.DisplaySettings -import androidx.compose.material.icons.filled.Explore -import androidx.compose.material.icons.filled.Palette +import androidx.compose.material.icons.outlined.DisplaySettings +import androidx.compose.material.icons.outlined.Explore +import androidx.compose.material.icons.outlined.LocalLibrary +import androidx.compose.material.icons.outlined.Palette import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.LargeTopAppBar import androidx.compose.material3.MaterialTheme @@ -76,8 +76,8 @@ private fun SettingsScreen() { item { SettingsCategoryItem( - icon = Icons.Default.DisplaySettings, - text = stringResource(id = R.string.general_settings), + icon = Icons.Outlined.DisplaySettings, + title = stringResource(id = R.string.general_settings), description = stringResource(id = R.string.general_settings_desc) ) { onNavigate { @@ -88,8 +88,8 @@ private fun SettingsScreen() { item { SettingsCategoryItem( - icon = Icons.Default.Palette, - text = stringResource(id = R.string.appearance_settings), + icon = Icons.Outlined.Palette, + title = stringResource(id = R.string.appearance_settings), description = stringResource(id = R.string.appearance_settings_desc) ) { onNavigate { @@ -100,8 +100,8 @@ private fun SettingsScreen() { item { SettingsCategoryItem( - icon = Icons.AutoMirrored.Filled.MenuBook, - text = stringResource(id = R.string.reader_settings), + icon = Icons.Outlined.LocalLibrary, + title = stringResource(id = R.string.reader_settings), description = stringResource(id = R.string.reader_settings_desc) ) { onNavigate { @@ -112,8 +112,8 @@ private fun SettingsScreen() { item { SettingsCategoryItem( - icon = Icons.Default.Explore, - text = stringResource(id = R.string.browse_settings), + icon = Icons.Outlined.Explore, + title = stringResource(id = R.string.browse_settings), description = stringResource(id = R.string.browse_settings_desc) ) { onNavigate { diff --git a/app/src/main/java/ua/acclorite/book_story/presentation/screens/settings/components/SettingsCategoryItem.kt b/app/src/main/java/ua/acclorite/book_story/presentation/screens/settings/components/SettingsCategoryItem.kt index 7799321e..b659f86f 100644 --- a/app/src/main/java/ua/acclorite/book_story/presentation/screens/settings/components/SettingsCategoryItem.kt +++ b/app/src/main/java/ua/acclorite/book_story/presentation/screens/settings/components/SettingsCategoryItem.kt @@ -4,17 +4,16 @@ import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row -import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size -import androidx.compose.foundation.layout.width import androidx.compose.material3.Icon import androidx.compose.material3.MaterialTheme 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.graphics.vector.ImageVector import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.unit.Dp @@ -22,44 +21,50 @@ import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp /** - * Settings category item. It is used to represent the whole category. + * Settings category item. + * It is used to represent the whole category. + * + * @param icon Icon that represents category. + * @param title Title of the category. + * @param description Description of the category. + * @param verticalPadding Vertical item padding. + * @param onClick OnClick callback. Usually navigation action. */ @Composable fun SettingsCategoryItem( icon: ImageVector, - text: String, + title: String, description: String, - verticalPadding: Dp = 16.dp, + verticalPadding: Dp = 20.dp, onClick: () -> Unit ) { Row( modifier = Modifier .fillMaxWidth() + .clip(MaterialTheme.shapes.extraLarge) .clickable { onClick() } - .padding(vertical = verticalPadding, horizontal = 18.dp), + .padding(vertical = verticalPadding, horizontal = 24.dp), verticalAlignment = Alignment.CenterVertically, - horizontalArrangement = Arrangement.Start + horizontalArrangement = Arrangement.spacedBy(18.dp) ) { Icon( imageVector = icon, contentDescription = null, modifier = Modifier.size(24.dp), - tint = MaterialTheme.colorScheme.primary + tint = MaterialTheme.colorScheme.onSurfaceVariant ) - Spacer(modifier = Modifier.width(18.dp)) Column { Text( - text, - style = MaterialTheme.typography.bodyLarge, + text = title, + fontSize = 19.sp, color = MaterialTheme.colorScheme.onSurface, - fontSize = 18.sp, maxLines = 1, overflow = TextOverflow.Ellipsis ) Text( - description, + text = description, style = MaterialTheme.typography.bodyMedium, color = MaterialTheme.colorScheme.onSurfaceVariant, maxLines = 1,