UI improvements for settings

Added icons, some descriptions.
Rearranged settings.

app/src/main/java/com/sadellie/unitto/MainActivity.kt

@@ -41,13 +41,19 @@ import com.sadellie.unitto.data.NavRoutes.RIGHT_LIST_SCREEN
 import com.sadellie.unitto.data.NavRoutes.SETTINGS_GRAPH
 import com.sadellie.unitto.data.NavRoutes.SETTINGS_SCREEN
 import com.sadellie.unitto.data.NavRoutes.THEMES_SCREEN
+import com.sadellie.unitto.data.NavRoutes.THIRD_PARTY_LICENSES_SCREEN
 import com.sadellie.unitto.data.NavRoutes.UNIT_GROUPS_SCREEN
 import com.sadellie.unitto.screens.main.MainScreen
 import com.sadellie.unitto.screens.main.MainViewModel
 import com.sadellie.unitto.screens.second.LeftSideScreen
 import com.sadellie.unitto.screens.second.RightSideScreen
 import com.sadellie.unitto.screens.second.SecondViewModel
-import com.sadellie.unitto.screens.setttings.*
+import com.sadellie.unitto.screens.setttings.AboutScreen
+import com.sadellie.unitto.screens.setttings.SettingsScreen
+import com.sadellie.unitto.screens.setttings.SettingsViewModel
+import com.sadellie.unitto.screens.setttings.ThemesScreen
+import com.sadellie.unitto.screens.setttings.ThirdPartyLicensesScreen
+import com.sadellie.unitto.screens.setttings.UnitGroupsScreen
 import com.sadellie.unitto.ui.theme.AppTypography
 import com.sadellie.unitto.ui.theme.DarkThemeColors
 import com.sadellie.unitto.ui.theme.LightThemeColors
@@ -172,8 +178,14 @@ private fun NavGraphBuilder.settingGraph(
             )
         }
 
+        composable(THIRD_PARTY_LICENSES_SCREEN) {
+            ThirdPartyLicensesScreen(navigateUpAction = { navController.navigateUp() })
+        }
+
         composable(ABOUT_SCREEN) {
-            AboutScreen(navigateUpAction = { navController.navigateUp() })
+            AboutScreen(
+                navigateUpAction = { navController.navigateUp() }
+            ) { route -> navController.navigate(route) }
         }
 
         composable(UNIT_GROUPS_SCREEN) {

app/src/main/java/com/sadellie/unitto/data/NavRoutes.kt

@@ -31,5 +31,6 @@ object NavRoutes {
     const val SETTINGS_SCREEN = "SettingsScreen"
     const val THEMES_SCREEN = "ThemesScreen"
     const val ABOUT_SCREEN = "AboutScreen"
+    const val THIRD_PARTY_LICENSES_SCREEN = "ThirdPartyLicensesScreen"
     const val UNIT_GROUPS_SCREEN = "UnitGroupScreen"
 }

app/src/main/java/com/sadellie/unitto/screens/common/Header.kt

@@ -40,7 +40,7 @@ fun Header(
     text: String,
     modifier: Modifier = Modifier,
     paddingValues: PaddingValues = PaddingValues(
-        start = 16.dp,
+        start = 56.dp,
         end = 16.dp,
         top = 24.dp,
         bottom = 12.dp

app/src/main/java/com/sadellie/unitto/screens/common/UnittoListItem.kt

@@ -60,6 +60,7 @@ import com.sadellie.unitto.R
 @Composable
 fun UnittoListItem(
     label: String,
+    leadingContent: @Composable (() -> Unit)?,
     supportText: String? = null,
     switchState: Boolean,
     onSwitchChange: (Boolean) -> Unit
@@ -73,10 +74,12 @@ fun UnittoListItem(
             ),
         headlineText = { Text(label) },
         supportingText = { supportText?.let { Text(text = it) } },
+        leadingContent = leadingContent,
         trailingContent = {
             Switch(
                 checked = switchState,
-                onCheckedChange = { onSwitchChange(it) })
+                onCheckedChange = { onSwitchChange(it) }
+            )
         }
     )
 }
@@ -96,6 +99,7 @@ fun <T> UnittoListItem(
     label: String,
     supportText: String? = null,
     allOptions: Map<T, String>,
+    leadingContent: @Composable (() -> Unit)?,
     selected: T,
     onSelectedChange: (T) -> Unit
 ) {
@@ -109,6 +113,7 @@ fun <T> UnittoListItem(
     ListItem(
         headlineText = { Text(label) },
         supportingText = { supportText?.let { Text(text = it) } },
+        leadingContent = leadingContent,
         trailingContent = {
             ExposedDropdownMenuBox(
                 modifier = Modifier,
@@ -116,7 +121,9 @@ fun <T> UnittoListItem(
                 onExpandedChange = { dropDownExpanded = it }
             ) {
                 OutlinedTextField(
-                    modifier = Modifier.menuAnchor().widthIn(1.dp),
+                    modifier = Modifier
+                        .menuAnchor()
+                        .widthIn(1.dp),
                     value = allOptions[currentOption] ?: selected.toString(),
                     onValueChange = {},
                     readOnly = true,

app/src/main/java/com/sadellie/unitto/screens/setttings/AboutScreen.kt

@@ -19,83 +19,138 @@
 package com.sadellie.unitto.screens.setttings
 
 import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.PaddingValues
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
-import androidx.compose.foundation.lazy.items
+import androidx.compose.material.icons.Icons
-import androidx.compose.material3.MaterialTheme
+import androidx.compose.material.icons.filled.Copyright
-import androidx.compose.material3.OutlinedCard
+import androidx.compose.material.icons.filled.Help
+import androidx.compose.material.icons.filled.Info
+import androidx.compose.material.icons.filled.Policy
+import androidx.compose.material.icons.filled.PrivacyTip
+import androidx.compose.material3.Icon
+import androidx.compose.material3.ListItem
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.Stable
+import androidx.compose.runtime.getValue
-import androidx.compose.ui.Alignment
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.saveable.rememberSaveable
+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.unit.dp
+import com.sadellie.unitto.BuildConfig
 import com.sadellie.unitto.R
-import com.sadellie.unitto.data.ALL_LIBRARIES
+import com.sadellie.unitto.data.NavRoutes.THIRD_PARTY_LICENSES_SCREEN
 import com.sadellie.unitto.screens.common.UnittoLargeTopAppBar
 import com.sadellie.unitto.screens.openLink
+import com.sadellie.unitto.screens.setttings.components.AlertDialogWithList
+
 
-/**
- * Screen with used third party libraries
- *
- * @param navigateUpAction Action to be called when clicking back button in top bar
- */
-@Stable
 @Composable
 fun AboutScreen(
-    navigateUpAction: () -> Unit = {}
+    navigateUpAction: () -> Unit,
+    navControllerAction: (String) -> Unit
 ) {
     val mContext = LocalContext.current
 
+    var showDialog: Boolean by rememberSaveable {
+        mutableStateOf(false)
+    }
+
     UnittoLargeTopAppBar(
-        title = stringResource(R.string.third_party_licenses),
+        title = "About Unitto",
         navigateUpAction = navigateUpAction
     ) { padding ->
-        LazyColumn(
+        LazyColumn(contentPadding = padding) {
-            verticalArrangement = Arrangement.spacedBy(16.dp),
+
-            contentPadding = PaddingValues(
+            // CURRENCY RATE NOTE
-                start = 16.dp,
+            item {
-                end = 16.dp,
+                ListItem(
-                top = padding.calculateTopPadding(),
+                    leadingContent = {
-                bottom = 24.dp
+                        Icon(
-            )
+                            Icons.Default.Help,
-        ) {
+                            stringResource(R.string.currency_rates_note_setting),
-            items(ALL_LIBRARIES.value) {
-                OutlinedCard(
-                    Modifier.clickable { it.website?.let { url -> openLink(mContext, url) } }
-                ) {
-                    Column(
-                        modifier = Modifier
-                            .fillMaxWidth()
-                            .padding(12.dp)
-                    ) {
-                        Text(
-                            text = it.name,
-                            style = MaterialTheme.typography.titleLarge
                         )
-                        Text(
+                    },
-                            modifier = Modifier.padding(top = 4.dp, bottom = 12.dp),
+                    headlineText = { Text(stringResource(R.string.currency_rates_note_setting)) },
-                            text = it.dev ?: "",
+                    modifier = Modifier.clickable { showDialog = true }
-                            style = MaterialTheme.typography.bodyLarge
+                )
+            }
+
+            // TERMS AND CONDITIONS
+            item {
+                ListItem(
+                    leadingContent = {
+                        Icon(
+                            Icons.Default.PrivacyTip,
+                            stringResource(R.string.terms_and_conditions),
                         )
-                        Text(
+                    },
-                            text = it.description ?: "",
+                    headlineText = { Text(stringResource(R.string.terms_and_conditions)) },
-                            style = MaterialTheme.typography.bodyMedium
+                    modifier = Modifier.clickable {
-                        )
+                        openLink(
-                        Text(
+                            mContext,
-                            modifier = Modifier.align(Alignment.End),
+                            "http://sadellie.github.io/unitto/terms-app.html"
-                            text = it.license ?: "",
-                            style = MaterialTheme.typography.labelLarge
                         )
                     }
-                }
+                )
+            }
+
+            // PRIVACY POLICY
+            item {
+                ListItem(
+                    leadingContent = {
+                        Icon(
+                            Icons.Default.Policy,
+                            stringResource(R.string.privacy_policy),
+                        )
+                    },
+                    headlineText = { Text(stringResource(R.string.privacy_policy)) },
+                    modifier = Modifier.clickable {
+                        openLink(
+                            mContext,
+                            "http://sadellie.github.io/unitto/privacy-app.html"
+                        )
+                    }
+                )
+            }
+
+            // THIRD PARTY
+            item {
+                ListItem(
+                    leadingContent = {
+                        Icon(
+                            Icons.Default.Copyright,
+                            stringResource(R.string.third_party_licenses),
+                        )
+                    },
+                    headlineText = { Text(stringResource(R.string.third_party_licenses)) },
+                    modifier = Modifier.clickable { navControllerAction(THIRD_PARTY_LICENSES_SCREEN) }
+                )
+            }
+
+            // APP VERSION
+            item {
+                ListItem(
+                    leadingContent = {
+                        Icon(
+                            Icons.Default.Info,
+                            stringResource(R.string.app_version_name_setting),
+                        )
+                    },
+                    headlineText = { Text(stringResource(R.string.app_version_name_setting)) },
+                    supportingText = { Text("${BuildConfig.VERSION_NAME} (${BuildConfig.VERSION_CODE})") },
+                    modifier = Modifier.clickable {}
+                )
             }
         }
     }
+
+    if (showDialog) {
+        AlertDialogWithList(
+            title = stringResource(R.string.currency_rates_note_title),
+            dismissAction = { showDialog = false },
+            supportText = stringResource(R.string.currency_rates_note_text),
+            dismissButtonLabel = stringResource(R.string.ok_label)
+        )
+    }
 }

app/src/main/java/com/sadellie/unitto/screens/setttings/SettingsScreen.kt

@@ -19,7 +19,16 @@
 package com.sadellie.unitto.screens.setttings
 
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Info
+import androidx.compose.material.icons.filled.Insights
+import androidx.compose.material.icons.filled.Palette
+import androidx.compose.material.icons.filled.RateReview
+import androidx.compose.material.icons.filled.Rule
+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
@@ -30,6 +39,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.unit.dp
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.sadellie.unitto.BuildConfig
 import com.sadellie.unitto.R
@@ -63,20 +73,48 @@ fun SettingsScreen(
     ) { padding ->
         LazyColumn(contentPadding = padding) {
 
-            // GENERAL GROUP
+            // UNIT GROUPS
-            item { Header(stringResource(R.string.general_settings_group)) }
-
-            // THEME
             item {
                 ListItem(
+                    leadingContent = {
+                        Icon(
+                            Icons.Default.Rule,
+                            stringResource(R.string.disable_unit_group_description),
+                        )
+                    },
                     headlineText = { Text(stringResource(R.string.unit_groups_setting)) },
+                    supportingText = { Text(stringResource(R.string.unit_groups_support)) },
                     modifier = Modifier.clickable { navControllerAction(UNIT_GROUPS_SCREEN) }
                 )
             }
 
+            // THEME
+            item {
+                ListItem(
+                    leadingContent = {
+                        Icon(
+                            Icons.Default.Palette,
+                            stringResource(R.string.theme_setting),
+                        )
+                    },
+                    headlineText = { Text(stringResource(R.string.theme_setting)) },
+                    supportingText = { Text(stringResource(R.string.theme_setting_support)) },
+                    modifier = Modifier.clickable { navControllerAction(THEMES_SCREEN) }
+                )
+            }
+
+            // GENERAL GROUP
+            item { Header(stringResource(R.string.formatting_settings_group)) }
+
             // PRECISION
             item {
                 ListItem(
+                    leadingContent = {
+                        Icon(
+                            Icons.Default._123,
+                            stringResource(R.string.precision_setting),
+                        )
+                    },
                     headlineText = { Text(stringResource(R.string.precision_setting)) },
                     supportingText = { Text(stringResource(R.string.precision_setting_support)) },
                     modifier = Modifier.clickable { dialogState = DialogState.PRECISION }
@@ -88,7 +126,9 @@ fun SettingsScreen(
                 ListItem(
                     headlineText = { Text(stringResource(R.string.separator_setting)) },
                     supportingText = { Text(stringResource(R.string.separator_setting_support)) },
-                    modifier = Modifier.clickable { dialogState = DialogState.SEPARATOR }
+                    modifier = Modifier
+                        .clickable { dialogState = DialogState.SEPARATOR }
+                        .padding(start = 40.dp)
                 )
             }
 
@@ -97,60 +137,25 @@ fun SettingsScreen(
                 ListItem(
                     headlineText = { Text(stringResource(R.string.output_format_setting)) },
                     supportingText = { Text(stringResource(R.string.output_format_setting_support)) },
-                    modifier = Modifier.clickable { dialogState = DialogState.OUTPUT_FORMAT }
+                    modifier = Modifier
-                )
+                        .clickable { dialogState = DialogState.OUTPUT_FORMAT }
-            }
+                        .padding(start = 40.dp)
-
-            // THEME
-            item {
-                ListItem(
-                    headlineText = { Text(stringResource(R.string.theme_setting)) },
-                    supportingText = { Text(stringResource(R.string.theme_setting_support)) },
-                    modifier = Modifier.clickable { navControllerAction(THEMES_SCREEN) }
-                )
-            }
-
-            // CURRENCY RATE NOTE
-            item {
-                ListItem(
-                    headlineText = { Text(stringResource(R.string.currency_rates_note_setting)) },
-                    modifier = Modifier.clickable { dialogState = DialogState.CURRENCY_RATE }
                 )
             }
 
             // ADDITIONAL GROUP
             item { Header(stringResource(R.string.additional_settings_group)) }
 
-            // TERMS AND CONDITIONS
-            item {
-                ListItem(
-                    headlineText = { Text(stringResource(R.string.terms_and_conditions)) },
-                    modifier = Modifier.clickable {
-                        openLink(
-                            mContext,
-                            "http://sadellie.github.io/unitto/terms-app.html"
-                        )
-                    }
-                )
-            }
-
-            // PRIVACY POLICY
-            item {
-                ListItem(
-                    headlineText = { Text(stringResource(R.string.privacy_policy)) },
-                    modifier = Modifier.clickable {
-                        openLink(
-                            mContext,
-                            "http://sadellie.github.io/unitto/privacy-app.html"
-                        )
-                    }
-                )
-            }
-
             // ANALYTICS
             if (BuildConfig.ANALYTICS) {
                 item {
                     UnittoListItem(
+                        leadingContent = {
+                            Icon(
+                                Icons.Default.Insights,
+                                stringResource(R.string.send_usage_statistics),
+                            )
+                        },
                         label = stringResource(R.string.send_usage_statistics),
                         supportText = stringResource(R.string.send_usage_statistics_support),
                         switchState = userPrefs.value.enableAnalytics
@@ -158,30 +163,34 @@ fun SettingsScreen(
                 }
             }
 
-            // THIRD PARTY
-            item {
-                ListItem(
-                    headlineText = { Text(stringResource(R.string.third_party_licenses)) },
-                    modifier = Modifier.clickable { navControllerAction(ABOUT_SCREEN) }
-                )
-            }
-
             // RATE THIS APP
             if (BuildConfig.STORE_LINK.isNotEmpty()) {
                 item {
                     ListItem(
+                        leadingContent = {
+                            Icon(
+                                Icons.Default.RateReview,
+                                stringResource(R.string.rate_this_app),
+                            )
+                        },
                         headlineText = { Text(stringResource(R.string.rate_this_app)) },
                         modifier = Modifier.clickable { openLink(mContext, BuildConfig.STORE_LINK) }
                     )
                 }
             }
 
-            // APP VERSION
+            // More settings
             item {
                 ListItem(
-                    headlineText = { Text(stringResource(R.string.app_version_name_setting)) },
+                    leadingContent = {
-                    supportingText = { Text("${BuildConfig.VERSION_NAME} (${BuildConfig.VERSION_CODE})") },
+                        Icon(
-                    modifier = Modifier.clickable {}
+                            Icons.Default.Info,
+                            stringResource(R.string.about_unitto),
+                        )
+                    },
+                    headlineText = { Text(stringResource(R.string.about_unitto)) },
+                    supportingText = { Text(stringResource(R.string.about_unitto_support)) },
+                    modifier = Modifier.clickable { navControllerAction(ABOUT_SCREEN) }
                 )
             }
         }
@@ -225,14 +234,6 @@ fun SettingsScreen(
                 supportText = stringResource(R.string.output_format_setting_info)
             )
         }
-        DialogState.CURRENCY_RATE -> {
-            AlertDialogWithList(
-                title = stringResource(R.string.currency_rates_note_title),
-                dismissAction = { resetDialog() },
-                supportText = stringResource(R.string.currency_rates_note_text),
-                dismissButtonLabel = stringResource(R.string.ok_label)
-            )
-        }
         // Dismissing alert dialog
         else -> {}
     }
@@ -242,5 +243,5 @@ fun SettingsScreen(
  * All possible states for alert dialog that opens when user clicks on settings.
  */
 private enum class DialogState {
-    NONE, PRECISION, SEPARATOR, OUTPUT_FORMAT, CURRENCY_RATE,
+    NONE, PRECISION, SEPARATOR, OUTPUT_FORMAT,
 }

app/src/main/java/com/sadellie/unitto/screens/setttings/ThemesScreen.kt

@@ -24,6 +24,11 @@ import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
 import androidx.compose.animation.shrinkVertically
 import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Colorize
+import androidx.compose.material.icons.filled.DarkMode
+import androidx.compose.material.icons.filled.Palette
+import androidx.compose.material3.Icon
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.res.stringResource
 import com.sadellie.unitto.R
@@ -45,6 +50,12 @@ fun ThemesScreen(
         LazyColumn(contentPadding = paddingValues) {
             item {
                 UnittoListItem(
+                    leadingContent = {
+                        Icon(
+                            Icons.Default.Palette,
+                            stringResource(R.string.color_theme),
+                        )
+                    },
                     label = stringResource(R.string.color_theme),
                     allOptions = mapOf(
                         ThemingMode.AUTO to stringResource(R.string.force_auto_mode),
@@ -61,6 +72,12 @@ fun ThemesScreen(
 
             item {
                 UnittoListItem(
+                    leadingContent = {
+                        Icon(
+                            Icons.Default.Colorize,
+                            stringResource(R.string.enable_dynamic_colors),
+                        )
+                    },
                     label = stringResource(R.string.enable_dynamic_colors),
                     supportText = stringResource(R.string.enable_dynamic_colors_support),
                     switchState = themmoController.isDynamicThemeEnabled,
@@ -78,6 +95,12 @@ fun ThemesScreen(
                     exit = shrinkVertically() + fadeOut(),
                 ) {
                     UnittoListItem(
+                        leadingContent = {
+                            Icon(
+                                Icons.Default.DarkMode,
+                                stringResource(R.string.force_amoled_mode),
+                            )
+                        },
                         label = stringResource(R.string.force_amoled_mode),
                         supportText = stringResource(R.string.force_amoled_mode_support),
                         switchState = themmoController.isAmoledThemeEnabled,

app/src/main/java/com/sadellie/unitto/screens/setttings/ThirdPartyLicensesScreen.kt

@@ -0,0 +1,101 @@
+/*
+ * Unitto is a unit converter for Android
+ * Copyright (c) 2022-2022 Elshan Agaev
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+package com.sadellie.unitto.screens.setttings
+
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.items
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.OutlinedCard
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.Stable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.dp
+import com.sadellie.unitto.R
+import com.sadellie.unitto.data.ALL_LIBRARIES
+import com.sadellie.unitto.screens.common.UnittoLargeTopAppBar
+import com.sadellie.unitto.screens.openLink
+
+/**
+ * Screen with used third party libraries
+ *
+ * @param navigateUpAction Action to be called when clicking back button in top bar
+ */
+@Stable
+@Composable
+fun ThirdPartyLicensesScreen(
+    navigateUpAction: () -> Unit = {}
+) {
+    val mContext = LocalContext.current
+
+    UnittoLargeTopAppBar(
+        title = stringResource(R.string.third_party_licenses),
+        navigateUpAction = navigateUpAction
+    ) { padding ->
+        LazyColumn(
+            verticalArrangement = Arrangement.spacedBy(16.dp),
+            contentPadding = PaddingValues(
+                start = 16.dp,
+                end = 16.dp,
+                top = padding.calculateTopPadding(),
+                bottom = 24.dp
+            )
+        ) {
+            items(ALL_LIBRARIES.value) {
+                OutlinedCard(
+                    Modifier.clickable { it.website?.let { url -> openLink(mContext, url) } }
+                ) {
+                    Column(
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .padding(12.dp)
+                    ) {
+                        Text(
+                            text = it.name,
+                            style = MaterialTheme.typography.titleLarge
+                        )
+                        Text(
+                            modifier = Modifier.padding(top = 4.dp, bottom = 12.dp),
+                            text = it.dev ?: "",
+                            style = MaterialTheme.typography.bodyLarge
+                        )
+                        Text(
+                            text = it.description ?: "",
+                            style = MaterialTheme.typography.bodyMedium
+                        )
+                        Text(
+                            modifier = Modifier.align(Alignment.End),
+                            text = it.license ?: "",
+                            style = MaterialTheme.typography.labelLarge
+                        )
+                    }
+                }
+            }
+        }
+    }
+}

app/src/main/java/com/sadellie/unitto/screens/setttings/UnitGroupsScreen.kt

@@ -24,6 +24,7 @@ import androidx.compose.animation.core.updateTransition
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
@@ -81,7 +82,10 @@ fun UnitGroupsScreen(
                 .reorderable(state)
         ) {
             item(key = "enabled") {
-                Header(text = stringResource(R.string.enabled_label))
+                Header(
+                    text = stringResource(R.string.enabled_label),
+                    paddingValues = PaddingValues(horizontal = 16.dp, vertical = 12.dp)
+                )
             }
 
             items(shownUnits.value, { it }) { item ->
@@ -137,7 +141,8 @@ fun UnitGroupsScreen(
             item(key = "disabled") {
                 Header(
                     text = stringResource(R.string.disabled_label),
-                    modifier = Modifier.animateItemPlacement()
+                    modifier = Modifier.animateItemPlacement(),
+                    paddingValues = PaddingValues(horizontal = 16.dp, vertical = 12.dp)
                 )
             }
 

app/src/main/res/values-en-rGB/strings.xml

@@ -689,7 +689,7 @@
     <string name="send_usage_statistics">Send usage statistics</string>
     <string name="send_usage_statistics_support">All data is anonymous and encrypted</string>
     <string name="app_version_name_setting">Version name</string>
-    <string name="general_settings_group">General</string>
+    <string name="formatting_settings_group">Formatting</string>
     <string name="additional_settings_group">Additional</string>
 
     <!--Precision-->
@@ -748,5 +748,8 @@
     <string name="enable_unit_group_description">Enable unit group</string>
     <string name="disable_unit_group_description">Disable unit group</string>
     <string name="reorder_unit_group_description">Reorder unit group</string>
+    <string name="about_unitto">About Unitto</string>
+    <string name="about_unitto_support">Learn about the app</string>
+    <string name="unit_groups_support">Disable and rearrange units</string>
 
 </resources>

app/src/main/res/values-ru/strings.xml

@@ -503,7 +503,7 @@
     <string name="privacy_policy">Политика конфиденциальности</string>
     <string name="third_party_licenses">Лицензии третьих лиц</string>
     <string name="rate_this_app">Оценить приложение</string>
-    <string name="general_settings_group">Основное</string>
+    <string name="formatting_settings_group">Форматирование</string>
     <string name="additional_settings_group">Дополнительное</string>
     <string name="precision_setting_support">Количество десятичных знаков</string>
     <string name="precision_setting_info">Переводимые значения могут иметь точность выше предпочтительной.</string>
@@ -683,5 +683,8 @@
     <string name="enable_unit_group_description">Включить группу величин</string>
     <string name="disable_unit_group_description">Отключить группу величин</string>
     <string name="reorder_unit_group_description">Переместить группу величин</string>
+    <string name="about_unitto">О Unitto</string>
+    <string name="about_unitto_support">Узнайте больше о приложении</string>
+    <string name="unit_groups_support">Отключите или отсортируйте единицы измерений</string>
 
 </resources>

app/src/main/res/values/strings.xml

@@ -948,7 +948,7 @@
     <string name="privacy_policy">Privacy Policy</string>
     <string name="third_party_licenses">Third party licenses</string>
     <string name="rate_this_app">Rate this app</string>
-    <string name="general_settings_group">General</string>
+    <string name="formatting_settings_group">Formatting</string>
     <string name="additional_settings_group">Additional</string>
 
     <!--Precision-->
@@ -1027,5 +1027,8 @@
     <string name="send_usage_statistics">Send usage statistics</string>
     <string name="send_usage_statistics_support">All data is anonymous and encrypted</string>
     <string name="app_version_name_setting">Version name</string>
+    <string name="about_unitto">About Unitto</string>
+    <string name="about_unitto_support">Learn about the app</string>
+    <string name="unit_groups_support">Disable and rearrange units</string>
 
 </resources>