Me > Material Design team

Centered leading content for all list items

core/ui/src/main/java/com/sadellie/unitto/core/ui/common/UnittoListItem.kt

@@ -18,44 +18,121 @@
 
 package com.sadellie.unitto.core.ui.common
 
+import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.heightIn
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Home
 import androidx.compose.material.ripple.rememberRipple
-import androidx.compose.material3.ListItem
+import androidx.compose.material3.Icon
+import androidx.compose.material3.LocalContentColor
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.ProvideTextStyle
 import androidx.compose.material3.Switch
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
 
-/**
- * Represents one item in list on Settings screen.
- *
- * @param label Main text.
- * @param supportContent Text that is located below label.
- * @param switchState Current switch state.
- * @param onSwitchChange Action to perform when user clicks on this component or just switch. Gives
- * you new value.
- */
 @Composable
 fun UnittoListItem(
-    label: String,
+    modifier: Modifier = Modifier,
-    leadingContent: @Composable (() -> Unit)?,
+    headlineContent: @Composable () -> Unit,
-    supportContent: String? = null,
+    supportingContent: @Composable (() -> Unit)? = null,
+    leadingContent: @Composable (() -> Unit)? = null,
+    trailingContent: @Composable (() -> Unit)? = null,
+) {
+    Row(
+        modifier = modifier
+            .background(MaterialTheme.colorScheme.surface)
+            .heightIn(min = 56.dp)
+            .padding(top = 14.dp, bottom = 14.dp, start = 16.dp, end = 24.dp),
+        horizontalArrangement = Arrangement.spacedBy(16.dp),
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        leadingContent?.let {
+            ProvideColor(
+                color = MaterialTheme.colorScheme.onSurfaceVariant,
+                content = it
+            )
+        }
+
+        Column(Modifier.weight(1f)) {
+            ProvideTextStyle(
+                color = MaterialTheme.colorScheme.onSurface,
+                textStyle = MaterialTheme.typography.bodyLarge,
+                content = headlineContent
+            )
+            supportingContent?.let {
+                ProvideTextStyle(
+                    color = MaterialTheme.colorScheme.onSurfaceVariant,
+                    textStyle = MaterialTheme.typography.bodyMedium,
+                    content = it
+                )
+            }
+        }
+        trailingContent?.invoke()
+    }
+}
+
+@Composable
+fun UnittoListItem(
+    modifier: Modifier = Modifier,
+    headlineText: String,
+    supportingText: String? = null,
+    icon: ImageVector,
+    iconDescription: String,
+    trailing: @Composable (() -> Unit)? = null,
+) = UnittoListItem(
+    modifier = modifier,
+    headlineContent = { Text(headlineText) },
+    supportingContent = supportingText?.let { { Text(it) } },
+    leadingContent = {
+        Icon(
+            imageVector = icon,
+            contentDescription = iconDescription,
+            modifier = Modifier.size(24.dp),
+            tint = MaterialTheme.colorScheme.onSurfaceVariant
+        )
+    },
+    trailingContent = trailing
+)
+
+@Composable
+fun UnittoListItem(
+    modifier: Modifier = Modifier,
+    headlineText: String,
+    icon: ImageVector,
+    iconDescription: String,
+    supportingText: String? = null,
     switchState: Boolean,
     onSwitchChange: (Boolean) -> Unit
 ) {
-    ListItem(
+    UnittoListItem(
         modifier = Modifier
             .clickable(
                 interactionSource = remember { MutableInteractionSource() },
                 indication = rememberRipple(),
                 onClick = { onSwitchChange(!switchState) }
             ),
-        headlineContent = { Text(label) },
+        headlineText = headlineText,
-        supportingContent = { supportContent?.let { Text(text = it) } },
+        supportingText = supportingText,
-        leadingContent = leadingContent,
+        icon = icon,
-        trailingContent = {
+        iconDescription = iconDescription,
+        trailing = {
             Switch(
                 checked = switchState,
                 onCheckedChange = { onSwitchChange(it) }
@@ -63,3 +140,63 @@ fun UnittoListItem(
         }
     )
 }
+
+@Composable
+private fun ProvideTextStyle(
+    color: Color,
+    textStyle: TextStyle,
+    content: @Composable () -> Unit,
+) = CompositionLocalProvider(LocalContentColor provides color) {
+    ProvideTextStyle(textStyle, content)
+}
+
+@Composable
+private fun ProvideColor(
+    color: Color,
+    content: @Composable () -> Unit,
+) = CompositionLocalProvider(LocalContentColor provides color) {
+    content()
+}
+
+@Preview
+@Composable
+fun PreviewUnittoListItem1() {
+    UnittoListItem(
+        modifier = Modifier,
+        headlineContent = { Text("Headline") },
+        supportingContent = { Text("Support") },
+        leadingContent = {
+            Icon(
+                imageVector = Icons.Default.Home,
+                contentDescription = null
+            )
+        },
+    )
+}
+
+@Preview
+@Composable
+private fun PreviewUnittoListItem2() {
+    UnittoListItem(
+        icon = Icons.Default.Home,
+        headlineText = "Text text",
+        supportingText = "Support text support text support text support text",
+        modifier = Modifier,
+        trailing = {},
+        iconDescription = ""
+    )
+}
+
+@Preview
+@Composable
+private fun PreviewUnittoListItem3() {
+    UnittoListItem(
+        icon = Icons.Default.Home,
+        headlineText = "Text text",
+        supportingText = "Support text support text support text support text",
+        modifier = Modifier,
+        onSwitchChange = {},
+        iconDescription = "",
+        switchState = true,
+    )
+}

feature/settings/src/main/java/com/sadellie/unitto/feature/settings/SettingsScreen.kt

@@ -32,9 +32,6 @@ import androidx.compose.material.icons.filled.RateReview
 import androidx.compose.material.icons.filled.SwapHoriz
 import androidx.compose.material.icons.filled.Vibration
 import androidx.compose.material.icons.filled._123
-import androidx.compose.material3.Icon
-import androidx.compose.material3.ListItem
-import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -43,6 +40,7 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.core.os.LocaleListCompat
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
@@ -54,6 +52,7 @@ import com.sadellie.unitto.core.ui.common.NavigateUpButton
 import com.sadellie.unitto.core.ui.common.UnittoListItem
 import com.sadellie.unitto.core.ui.common.UnittoScreenWithLargeTopBar
 import com.sadellie.unitto.core.ui.openLink
+import com.sadellie.unitto.data.userprefs.GeneralPreferences
 import com.sadellie.unitto.feature.settings.components.AlertDialogWithList
 import com.sadellie.unitto.feature.settings.navigation.aboutRoute
 import com.sadellie.unitto.feature.settings.navigation.calculatorSettingsRoute
@@ -62,13 +61,33 @@ import com.sadellie.unitto.feature.settings.navigation.formattingRoute
 import com.sadellie.unitto.feature.settings.navigation.themesRoute
 
 @Composable
-internal fun SettingsScreen(
+internal fun SettingsRoute(
     viewModel: SettingsViewModel = hiltViewModel(),
     menuButtonClick: () -> Unit,
     navControllerAction: (String) -> Unit,
 ) {
-    val mContext = LocalContext.current
     val userPrefs = viewModel.userPrefs.collectAsStateWithLifecycle()
+
+    SettingsScreen(
+        userPrefs = userPrefs.value,
+        menuButtonClick = menuButtonClick,
+        navControllerAction = navControllerAction,
+        updateMiddleZero = viewModel::updateMiddleZero,
+        updateVibrations = viewModel::updateVibrations,
+        updateStartingScreen = viewModel::updateStartingScreen
+    )
+}
+
+@Composable
+private fun SettingsScreen(
+    userPrefs: GeneralPreferences,
+    menuButtonClick: () -> Unit,
+    navControllerAction: (String) -> Unit,
+    updateMiddleZero: (Boolean) -> Unit,
+    updateVibrations: (Boolean) -> Unit,
+    updateStartingScreen: (String) -> Unit
+) {
+    val mContext = LocalContext.current
     var dialogState: DialogState by rememberSaveable {
         mutableStateOf(DialogState.NONE)
     }
@@ -81,73 +100,53 @@ internal fun SettingsScreen(
 
             // THEME
             item {
-                ListItem(
+                UnittoListItem(
-                    leadingContent = {
+                    icon = Icons.Default.Palette,
-                        Icon(
+                    iconDescription = stringResource(R.string.theme_setting),
-                            Icons.Default.Palette,
+                    headlineText = stringResource(R.string.theme_setting),
-                            stringResource(R.string.theme_setting),
+                    supportingText = stringResource(R.string.theme_setting_support),
-                        )
-                    },
-                    headlineContent = { Text(stringResource(R.string.theme_setting)) },
-                    supportingContent = { Text(stringResource(R.string.theme_setting_support)) },
                     modifier = Modifier.clickable { navControllerAction(themesRoute) }
                 )
             }
 
             // START SCREEN
             item {
-                ListItem(
+                UnittoListItem(
-                    leadingContent = {
+                    icon = Icons.Default.Home,
-                        Icon(
+                    iconDescription = stringResource(R.string.starting_screen_setting),
-                            Icons.Default.Home,
+                    headlineText = stringResource(R.string.starting_screen_setting),
-                            stringResource(R.string.starting_screen_setting),
+                    supportingText = stringResource(R.string.starting_screen_setting_support),
-                        )
-                    },
-                    headlineContent = { Text(stringResource(R.string.starting_screen_setting)) },
-                    supportingContent = { Text(stringResource(R.string.starting_screen_setting_support)) },
                     modifier = Modifier.clickable { dialogState = DialogState.START_SCREEN }
                 )
             }
 
             // FORMATTING
             item {
-                ListItem(
+                UnittoListItem(
-                    leadingContent = {
+                    icon = Icons.Default._123,
-                        Icon(
+                    iconDescription = stringResource(R.string.formatting_setting),
-                            Icons.Default._123,
+                    headlineText = stringResource(R.string.formatting_setting),
-                            stringResource(R.string.formatting_setting),
+                    supportingText = stringResource(R.string.formatting_setting_support),
-                        )
-                    },
-                    headlineContent = { Text(stringResource(R.string.formatting_setting)) },
-                    supportingContent = { Text(stringResource(R.string.formatting_setting_support)) },
                     modifier = Modifier.clickable { navControllerAction(formattingRoute) }
                 )
             }
 
             item {
-                ListItem(
+                UnittoListItem(
-                    leadingContent = {
+                    icon = Icons.Default.Calculate,
-                        Icon(
+                    iconDescription = stringResource(R.string.calculator),
-                            Icons.Default.Calculate,
+                    headlineText = stringResource(R.string.calculator),
-                            stringResource(R.string.calculator),
+                    supportingText = stringResource(R.string.calculator_settings_support),
-                        )
-                    },
-                    headlineContent = { Text(stringResource(R.string.calculator)) },
-                    supportingContent = { Text(stringResource(R.string.calculator_settings_support)) },
                     modifier = Modifier.clickable { navControllerAction(calculatorSettingsRoute) }
                 )
             }
 
             item {
-                ListItem(
+                UnittoListItem(
-                    leadingContent = {
+                    icon = Icons.Default.SwapHoriz,
-                        Icon(
+                    iconDescription = stringResource(R.string.unit_converter),
-                            Icons.Default.SwapHoriz,
+                    headlineText = stringResource(R.string.unit_converter),
-                            stringResource(R.string.unit_converter),
+                    supportingText = stringResource(R.string.converter_settings_support),
-                        )
-                    },
-                    headlineContent = { Text(stringResource(R.string.unit_converter)) },
-                    supportingContent = { Text(stringResource(R.string.converter_settings_support)) },
                     modifier = Modifier.clickable { navControllerAction(converterSettingsRoute) }
                 )
             }
@@ -158,46 +157,36 @@ internal fun SettingsScreen(
             // MIDDLE ZERO
             item {
                 UnittoListItem(
-                    label = stringResource(R.string.middle_zero_option),
+                    icon = Icons.Default.ExposureZero,
-                    leadingContent = {
+                    iconDescription = stringResource(R.string.middle_zero_option),
-                        Icon(
+                    headlineText = stringResource(R.string.middle_zero_option),
-                            Icons.Default.ExposureZero,
+                    supportingText = stringResource(R.string.middle_zero_option_support),
-                            stringResource(R.string.middle_zero_option)
+                    modifier = Modifier.clickable { navControllerAction(converterSettingsRoute) },
-                        )
+                    switchState = userPrefs.middleZero,
-                    },
+                    onSwitchChange = updateMiddleZero
-                    supportContent = stringResource(R.string.middle_zero_option_support),
-                    switchState = userPrefs.value.middleZero,
-                    onSwitchChange = viewModel::updateMiddleZero
                 )
             }
 
             // VIBRATIONS
             item {
                 UnittoListItem(
-                    label = stringResource(R.string.enable_vibrations),
+                    icon = Icons.Default.Vibration,
-                    leadingContent = {
+                    iconDescription = stringResource(R.string.enable_vibrations),
-                        Icon(
+                    headlineText = stringResource(R.string.enable_vibrations),
-                            Icons.Default.Vibration,
+                    supportingText = stringResource(R.string.enable_vibrations_support),
-                            stringResource(R.string.enable_vibrations)
+                    modifier = Modifier.clickable { navControllerAction(converterSettingsRoute) },
-                        )
+                    switchState = userPrefs.enableVibrations,
-                    },
+                    onSwitchChange = updateVibrations
-                    supportContent = stringResource(R.string.enable_vibrations_support),
-                    switchState = userPrefs.value.enableVibrations,
-                    onSwitchChange = viewModel::updateVibrations
                 )
             }
 
             // LANGUAGE
             item {
-                ListItem(
+                UnittoListItem(
-                    leadingContent = {
+                    icon = Icons.Default.Language,
-                        Icon(
+                    iconDescription = stringResource(R.string.language_setting),
-                            Icons.Default.Language,
+                    headlineText = stringResource(R.string.language_setting),
-                            stringResource(R.string.language_setting)
+                    supportingText = stringResource(R.string.language_setting_support),
-                        )
-                    },
-                    headlineContent = { Text(stringResource(R.string.language_setting)) },
-                    supportingContent = { Text(stringResource(R.string.language_setting_support)) },
                     modifier = Modifier.clickable { dialogState = DialogState.LANGUAGE }
                 )
             }
@@ -205,14 +194,10 @@ internal fun SettingsScreen(
             // RATE THIS APP
             if (BuildConfig.STORE_LINK.isNotEmpty()) {
                 item {
-                    ListItem(
+                    UnittoListItem(
-                        leadingContent = {
+                        icon = Icons.Default.RateReview,
-                            Icon(
+                        iconDescription = stringResource(R.string.rate_this_app),
-                                Icons.Default.RateReview,
+                        headlineText = stringResource(R.string.rate_this_app),
-                                stringResource(R.string.rate_this_app),
-                            )
-                        },
-                        headlineContent = { Text(stringResource(R.string.rate_this_app)) },
                         modifier = Modifier.clickable { openLink(mContext, BuildConfig.STORE_LINK) }
                     )
                 }
@@ -220,15 +205,11 @@ internal fun SettingsScreen(
 
             // More settings
             item {
-                ListItem(
+                UnittoListItem(
-                    leadingContent = {
+                    icon = Icons.Default.Info,
-                        Icon(
+                    iconDescription = stringResource(R.string.about_unitto),
-                            Icons.Default.Info,
+                    headlineText = stringResource(R.string.about_unitto),
-                            stringResource(R.string.about_unitto),
+                    supportingText = stringResource(R.string.about_unitto_support),
-                        )
-                    },
-                    headlineContent = { Text(stringResource(R.string.about_unitto)) },
-                    supportingContent = { Text(stringResource(R.string.about_unitto_support)) },
                     modifier = Modifier.clickable { navControllerAction(aboutRoute) }
                 )
             }
@@ -247,9 +228,9 @@ internal fun SettingsScreen(
         DialogState.START_SCREEN -> {
             AlertDialogWithList(
                 title = stringResource(R.string.starting_screen_setting),
-                selectedItemIndex = userPrefs.value.startingScreen,
+                selectedItemIndex = userPrefs.startingScreen,
                 listItems = TOP_LEVEL_GRAPH_ROUTES,
-                selectAction = viewModel::updateStartingScreen,
+                selectAction = updateStartingScreen,
                 dismissAction = { resetDialog() }
             )
         }
@@ -287,3 +268,16 @@ internal fun SettingsScreen(
 private enum class DialogState {
     NONE, START_SCREEN, LANGUAGE
 }
+
+@Preview
+@Composable
+private fun PreviewSettingsScreen() {
+    SettingsScreen(
+        userPrefs = GeneralPreferences(),
+        menuButtonClick = { /*TODO*/ },
+        navControllerAction = {},
+        updateMiddleZero = {},
+        updateVibrations = {},
+        updateStartingScreen = {}
+    )
+}

feature/settings/src/main/java/com/sadellie/unitto/feature/settings/about/AboutScreen.kt

@@ -31,8 +31,6 @@ import androidx.compose.material.icons.filled.Policy
 import androidx.compose.material.icons.filled.PrivacyTip
 import androidx.compose.material.icons.filled.Translate
 import androidx.compose.material3.AlertDialog
-import androidx.compose.material3.Icon
-import androidx.compose.material3.ListItem
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
 import androidx.compose.runtime.Composable
@@ -49,6 +47,7 @@ import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.sadellie.unitto.core.base.BuildConfig
 import com.sadellie.unitto.core.base.R
 import com.sadellie.unitto.core.ui.common.NavigateUpButton
+import com.sadellie.unitto.core.ui.common.UnittoListItem
 import com.sadellie.unitto.core.ui.common.UnittoScreenWithLargeTopBar
 import com.sadellie.unitto.core.ui.openLink
 
@@ -70,28 +69,20 @@ internal fun AboutScreen(
         LazyColumn(contentPadding = padding) {
             // CURRENCY RATE NOTE
             item {
-                ListItem(
+                UnittoListItem(
-                    leadingContent = {
+                    icon = Icons.AutoMirrored.Filled.Help,
-                        Icon(
+                    iconDescription = stringResource(R.string.currency_rates_note_setting),
-                            Icons.AutoMirrored.Filled.Help,
+                    headlineText = stringResource(R.string.currency_rates_note_setting),
-                            stringResource(R.string.currency_rates_note_setting)
-                        )
-                    },
-                    headlineContent = { Text(stringResource(R.string.currency_rates_note_setting)) },
                     modifier = Modifier.clickable { showDialog = true }
                 )
             }
 
             // TERMS AND CONDITIONS
             item {
-                ListItem(
+                UnittoListItem(
-                    leadingContent = {
+                    icon = Icons.Default.PrivacyTip,
-                        Icon(
+                    iconDescription = stringResource(R.string.terms_and_conditions),
-                            Icons.Default.PrivacyTip,
+                    headlineText = stringResource(R.string.terms_and_conditions),
-                            stringResource(R.string.terms_and_conditions)
-                        )
-                    },
-                    headlineContent = { Text(stringResource(R.string.terms_and_conditions)) },
                     modifier = Modifier.clickable {
                         openLink(
                             mContext,
@@ -103,14 +94,10 @@ internal fun AboutScreen(
 
             // PRIVACY POLICY
             item {
-                ListItem(
+                UnittoListItem(
-                    leadingContent = {
+                    icon = Icons.Default.Policy,
-                        Icon(
+                    iconDescription = stringResource(R.string.privacy_policy),
-                            Icons.Default.Policy,
+                    headlineText = stringResource(R.string.privacy_policy),
-                            stringResource(R.string.privacy_policy)
-                        )
-                    },
-                    headlineContent = { Text(stringResource(R.string.privacy_policy)) },
                     modifier = Modifier.clickable {
                         openLink(
                             mContext,
@@ -122,14 +109,10 @@ internal fun AboutScreen(
 
             // OPEN SOURCE
             item {
-                ListItem(
+                UnittoListItem(
-                    leadingContent = {
+                    icon = Icons.Default.Code,
-                        Icon(
+                    iconDescription = stringResource(R.string.open_source),
-                            Icons.Default.Code,
+                    headlineText = stringResource(R.string.open_source),
-                            stringResource(R.string.open_source)
-                        )
-                    },
-                    headlineContent = { Text(stringResource(R.string.open_source)) },
                     modifier = Modifier.clickable {
                         openLink(
                             mContext,
@@ -141,15 +124,11 @@ internal fun AboutScreen(
 
             // TRANSLATE
             item {
-                ListItem(
+                UnittoListItem(
-                    leadingContent = {
+                    icon = Icons.Default.Translate,
-                        Icon(
+                    iconDescription = stringResource(R.string.translate_app),
-                            Icons.Default.Translate,
+                    headlineText = stringResource(R.string.translate_app),
-                            stringResource(R.string.translate_app)
+                    supportingText = stringResource(R.string.translate_app_support),
-                        )
-                    },
-                    headlineContent = { Text(stringResource(R.string.translate_app)) },
-                    supportingContent = { Text(stringResource(R.string.translate_app_support)) },
                     modifier = Modifier.clickable {
                         openLink(
                             mContext,
@@ -161,29 +140,21 @@ internal fun AboutScreen(
 
             // THIRD PARTY
             item {
-                ListItem(
+                UnittoListItem(
-                    leadingContent = {
+                    icon = Icons.Default.Copyright,
-                        Icon(
+                    iconDescription = stringResource(R.string.third_party_licenses),
-                            Icons.Default.Copyright,
+                    headlineText = stringResource(R.string.third_party_licenses),
-                            stringResource(R.string.third_party_licenses)
-                        )
-                    },
-                    headlineContent = { Text(stringResource(R.string.third_party_licenses)) },
                     modifier = Modifier.clickable { navigateToThirdParty() }
                 )
             }
 
             // APP VERSION
             item {
-                ListItem(
+                UnittoListItem(
-                    leadingContent = {
+                    icon = Icons.Default.Info,
-                        Icon(
+                    iconDescription = stringResource(R.string.app_version_name_setting),
-                            Icons.Default.Info,
+                    headlineText = stringResource(R.string.app_version_name_setting),
-                            stringResource(R.string.app_version_name_setting)
+                    supportingText = "${BuildConfig.APP_NAME} (${BuildConfig.APP_CODE})",
-                        )
-                    },
-                    headlineContent = { Text(stringResource(R.string.app_version_name_setting)) },
-                    supportingContent = { Text("${BuildConfig.APP_NAME} (${BuildConfig.APP_CODE})") },
                     modifier = Modifier.combinedClickable {
                         if (prefs.value.enableToolsExperiment) {
                             Toast.makeText(mContext, "Experiments features are already enabled!", Toast.LENGTH_LONG).show()

feature/settings/src/main/java/com/sadellie/unitto/feature/settings/calculator/CalculatorSettingsScreen.kt

@@ -21,7 +21,6 @@ package com.sadellie.unitto.feature.settings.calculator
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Timer
-import androidx.compose.material3.Icon
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.res.stringResource
 import androidx.hilt.navigation.compose.hiltViewModel
@@ -45,14 +44,10 @@ internal fun CalculatorSettingsScreen(
         LazyColumn(contentPadding = padding) {
             item {
                 UnittoListItem(
-                    label = stringResource(R.string.partial_history_view_setting),
+                    headlineText = stringResource(R.string.partial_history_view_setting),
-                    leadingContent = {
+                    icon = Icons.Default.Timer,
-                        Icon(
+                    iconDescription = stringResource(R.string.partial_history_view_setting),
-                            Icons.Default.Timer,
+                    supportingText = stringResource(R.string.partial_history_view_setting_support),
-                            stringResource(R.string.partial_history_view_setting)
-                        )
-                    },
-                    supportContent = stringResource(R.string.partial_history_view_setting_support),
                     switchState = prefs.value.partialHistoryView,
                     onSwitchChange = viewModel::updatePartialHistoryView
                 )

feature/settings/src/main/java/com/sadellie/unitto/feature/settings/converter/ConverterSettingsScreen.kt

@@ -24,9 +24,6 @@ import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.filled.Rule
 import androidx.compose.material.icons.automirrored.filled.Sort
 import androidx.compose.material.icons.filled.Timer
-import androidx.compose.material3.Icon
-import androidx.compose.material3.ListItem
-import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -59,30 +56,22 @@ internal fun ConverterSettingsScreen(
         LazyColumn(contentPadding = padding) {
             // UNIT GROUPS
             item {
-                ListItem(
+                UnittoListItem(
-                    leadingContent = {
+                    icon = Icons.AutoMirrored.Filled.Rule,
-                        Icon(
+                    iconDescription = stringResource(R.string.unit_groups_setting),
-                            Icons.AutoMirrored.Filled.Rule,
+                    headlineText = stringResource(R.string.unit_groups_setting),
-                            stringResource(R.string.disable_unit_group_description),
+                    supportingText = stringResource(R.string.unit_groups_support),
-                        )
-                    },
-                    headlineContent = { Text(stringResource(R.string.unit_groups_setting)) },
-                    supportingContent = { Text(stringResource(R.string.unit_groups_support)) },
                     modifier = Modifier.clickable { navigateToUnitsGroup() }
                 )
             }
 
             // UNITS LIST SORTING
             item {
-                ListItem(
+                UnittoListItem(
-                    leadingContent = {
+                    icon = Icons.AutoMirrored.Filled.Sort,
-                        Icon(
+                    iconDescription = stringResource(R.string.units_sorting),
-                            Icons.AutoMirrored.Filled.Sort,
+                    headlineText = stringResource(R.string.units_sorting),
-                            stringResource(R.string.units_sorting)
+                    supportingText = stringResource(R.string.units_sorting_support),
-                        )
-                    },
-                    headlineContent = { Text(stringResource(R.string.units_sorting)) },
-                    supportingContent = { Text(stringResource(R.string.units_sorting_support)) },
                     modifier = Modifier.clickable { showDialog = true }
                 )
             }
@@ -90,14 +79,10 @@ internal fun ConverterSettingsScreen(
             // FORMAT TIME
             item {
                 UnittoListItem(
-                    label = stringResource(R.string.format_time),
+                    icon = Icons.Default.Timer,
-                    leadingContent = {
+                    iconDescription = stringResource(R.string.format_time),
-                        Icon(
+                    headlineText = stringResource(R.string.format_time),
-                            Icons.Default.Timer,
+                    supportingText = stringResource(R.string.format_time_support),
-                            stringResource(R.string.format_time)
-                        )
-                    },
-                    supportContent = stringResource(R.string.format_time_support),
                     switchState = prefs.value.unitConverterFormatTime,
                     onSwitchChange = viewModel::updateUnitConverterFormatTime
                 )

feature/settings/src/main/java/com/sadellie/unitto/feature/settings/formatting/FormattingScreen.kt

@@ -34,7 +34,6 @@ import androidx.compose.material.icons.filled.Architecture
 import androidx.compose.material.icons.filled.EMobiledata
 import androidx.compose.material.icons.filled._123
 import androidx.compose.material3.Icon
-import androidx.compose.material3.ListItem
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -58,6 +57,7 @@ import com.sadellie.unitto.core.base.Separator
 import com.sadellie.unitto.core.ui.common.NavigateUpButton
 import com.sadellie.unitto.core.ui.common.SegmentedButton
 import com.sadellie.unitto.core.ui.common.SegmentedButtonsRow
+import com.sadellie.unitto.core.ui.common.UnittoListItem
 import com.sadellie.unitto.core.ui.common.UnittoScreenWithLargeTopBar
 import com.sadellie.unitto.core.ui.common.UnittoSlider
 import com.sadellie.unitto.core.ui.common.squashable
@@ -147,7 +147,7 @@ fun FormattingScreen(
             }
 
             item("precision_label") {
-                ListItem(
+                UnittoListItem(
                     leadingContent = {
                         Icon(Icons.Default.Architecture, stringResource(R.string.precision_setting))
                     },
@@ -176,7 +176,7 @@ fun FormattingScreen(
             }
 
             item("separator_label") {
-                ListItem(
+                UnittoListItem(
                     leadingContent = {
                         Icon(Icons.Default._123, stringResource(R.string.precision_setting))
                     },
@@ -213,7 +213,7 @@ fun FormattingScreen(
             }
 
             item("output_format_label") {
-                ListItem(
+                UnittoListItem(
                     leadingContent = {
                         Icon(Icons.Default.EMobiledata, stringResource(R.string.precision_setting))
                     },

feature/settings/src/main/java/com/sadellie/unitto/feature/settings/navigation/SettingsNavigation.kt

@@ -25,7 +25,7 @@ import androidx.navigation.compose.composable
 import androidx.navigation.compose.navigation
 import androidx.navigation.navDeepLink
 import com.sadellie.unitto.core.base.TopLevelDestinations
-import com.sadellie.unitto.feature.settings.SettingsScreen
+import com.sadellie.unitto.feature.settings.SettingsRoute
 import com.sadellie.unitto.feature.settings.about.AboutScreen
 import com.sadellie.unitto.feature.settings.calculator.CalculatorSettingsScreen
 import com.sadellie.unitto.feature.settings.converter.ConverterSettingsScreen
@@ -65,7 +65,7 @@ fun NavGraphBuilder.settingGraph(
         )
     ) {
         composable(start) {
-            SettingsScreen(
+            SettingsRoute(
                 menuButtonClick = navController::navigateUp,
                 navControllerAction = navController::navigate
             )

feature/settings/src/main/java/com/sadellie/unitto/feature/settings/themes/ThemesScreen.kt

@@ -39,7 +39,6 @@ import androidx.compose.material.icons.outlined.DarkMode
 import androidx.compose.material.icons.outlined.HdrAuto
 import androidx.compose.material.icons.outlined.LightMode
 import androidx.compose.material3.Icon
-import androidx.compose.material3.ListItem
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
@@ -147,7 +146,7 @@ private fun ThemesScreen(
         LazyColumn(contentPadding = paddingValues) {
 
             item {
-                ListItem(
+                UnittoListItem(
                     leadingContent = {
                         Icon(
                             Icons.Default.Palette,
@@ -195,14 +194,10 @@ private fun ThemesScreen(
                     exit = shrinkVertically() + fadeOut(),
                 ) {
                     UnittoListItem(
-                        leadingContent = {
+                        icon = Icons.Default.DarkMode,
-                            Icon(
+                        iconDescription = stringResource(R.string.force_amoled_mode),
-                                Icons.Default.DarkMode,
+                        headlineText = stringResource(R.string.force_amoled_mode),
-                                stringResource(R.string.force_amoled_mode),
+                        supportingText = stringResource(R.string.force_amoled_mode_support),
-                            )
-                        },
-                        label = stringResource(R.string.force_amoled_mode),
-                        supportContent = stringResource(R.string.force_amoled_mode_support),
                         switchState = isAmoledThemeEnabled,
                         onSwitchChange = onAmoledThemeChange
                     )
@@ -211,14 +206,10 @@ private fun ThemesScreen(
 
             item {
                 UnittoListItem(
-                    leadingContent = {
+                    icon = Icons.Default.FontDownload,
-                        Icon(
+                    iconDescription = stringResource(R.string.system_font_setting),
-                            Icons.Default.FontDownload,
+                    headlineText = stringResource(R.string.system_font_setting),
-                            stringResource(R.string.system_font_setting),
+                    supportingText = stringResource(R.string.system_font_setting_support),
-                        )
-                    },
-                    label = stringResource(R.string.system_font_setting),
-                    supportContent = stringResource(R.string.system_font_setting_support),
                     switchState = systemFont,
                     onSwitchChange = onSystemFontChange
                 )
@@ -229,14 +220,10 @@ private fun ThemesScreen(
 
                 item {
                     UnittoListItem(
-                        leadingContent = {
+                        icon = Icons.Default.Colorize,
-                            Icon(
+                        iconDescription = stringResource(R.string.enable_dynamic_colors),
-                                Icons.Default.Colorize,
+                        headlineText = stringResource(R.string.enable_dynamic_colors),
-                                stringResource(R.string.enable_dynamic_colors),
+                        supportingText = stringResource(R.string.enable_dynamic_colors_support),
-                            )
-                        },
-                        label = stringResource(R.string.enable_dynamic_colors),
-                        supportContent = stringResource(R.string.enable_dynamic_colors_support),
                         switchState = isDynamicThemeEnabled,
                         onSwitchChange = onDynamicThemeChange
                     )
@@ -248,7 +235,7 @@ private fun ThemesScreen(
                         enter = expandVertically() + fadeIn(),
                         exit = shrinkVertically() + fadeOut(),
                     ) {
-                        ListItem(
+                        UnittoListItem(
                             headlineContent = { Text(stringResource(R.string.selected_color)) },
                             supportingContent = {
                                 ColorSelector(
@@ -259,7 +246,7 @@ private fun ThemesScreen(
                                     defaultColor = Color(0xFF186c31)
                                 )
                             },
-                            modifier = Modifier.padding(start = 40.dp)
+                            modifier = Modifier.padding(start = 40.dp),
                         )
                     }
                 }
@@ -270,7 +257,7 @@ private fun ThemesScreen(
                         enter = expandVertically() + fadeIn(),
                         exit = shrinkVertically() + fadeOut(),
                     ) {
-                        ListItem(
+                        UnittoListItem(
                             headlineContent = { Text(stringResource(R.string.monet_mode)) },
                             supportingContent = {
                                 MonetModeSelector(