UI improvements for settings

Added icons, some descriptions. Rearranged settings.
2025-06-19 00:35:26 +02:00 · 2022-12-12 20:23:52 +04:00 · 2022-12-12 20:23:52 +04:00 · b25596bbc1
commit b25596bbc1
parent 66ec851bcb
12 changed files with 348 additions and 134 deletions
--- a/app/src/main/java/com/sadellie/unitto/MainActivity.kt
+++ b/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) {
--- a/app/src/main/java/com/sadellie/unitto/data/NavRoutes.kt
+++ b/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"
 }
--- a/app/src/main/java/com/sadellie/unitto/screens/common/Header.kt
+++ b/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
--- a/app/src/main/java/com/sadellie/unitto/screens/common/UnittoListItem.kt
+++ b/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,
--- a/app/src/main/java/com/sadellie/unitto/screens/setttings/AboutScreen.kt
+++ b/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.material3.MaterialTheme
-import androidx.compose.material3.OutlinedCard
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Copyright
+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.ui.Alignment
+import androidx.compose.runtime.getValue
+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(
-            verticalArrangement = Arrangement.spacedBy(16.dp),
-            contentPadding = PaddingValues(
-                start = 16.dp,
-                end = 16.dp,
-                top = padding.calculateTopPadding(),
-                bottom = 24.dp
+        LazyColumn(contentPadding = padding) {
+
+            // CURRENCY RATE NOTE
+            item {
+                ListItem(
+                    leadingContent = {
+                        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
+                    },
+                    headlineText = { Text(stringResource(R.string.currency_rates_note_setting)) },
+                    modifier = Modifier.clickable { showDialog = true }
                )
-                        Text(
-                            modifier = Modifier.padding(top = 4.dp, bottom = 12.dp),
-                            text = it.dev ?: "",
-                            style = MaterialTheme.typography.bodyLarge
+            }
+
+            // TERMS AND CONDITIONS
+            item {
+                ListItem(
+                    leadingContent = {
+                        Icon(
+                            Icons.Default.PrivacyTip,
+                            stringResource(R.string.terms_and_conditions),
                        )
-                        Text(
-                            text = it.description ?: "",
-                            style = MaterialTheme.typography.bodyMedium
+                    },
+                    headlineText = { Text(stringResource(R.string.terms_and_conditions)) },
+                    modifier = Modifier.clickable {
+                        openLink(
+                            mContext,
+                            "http://sadellie.github.io/unitto/terms-app.html"
                        )
-                        Text(
-                            modifier = Modifier.align(Alignment.End),
-                            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)
+        )
    }
 }
--- a/app/src/main/java/com/sadellie/unitto/screens/setttings/SettingsScreen.kt
+++ b/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
-            item { Header(stringResource(R.string.general_settings_group)) }
-
-            // THEME
+            // UNIT GROUPS
            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 }
-                )
-            }
-
-            // 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 }
+                    modifier = Modifier
+                        .clickable { dialogState = DialogState.OUTPUT_FORMAT }
+                        .padding(start = 40.dp)
                )
            }

            // 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)) },
-                    supportingText = { Text("${BuildConfig.VERSION_NAME} (${BuildConfig.VERSION_CODE})") },
-                    modifier = Modifier.clickable {}
+                    leadingContent = {
+                        Icon(
+                            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,
 }
--- a/app/src/main/java/com/sadellie/unitto/screens/setttings/ThemesScreen.kt
+++ b/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,
--- a/app/src/main/java/com/sadellie/unitto/screens/setttings/ThirdPartyLicensesScreen.kt
+++ b/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
+                        )
+                    }
+                }
+            }
+        }
+    }
+}
--- a/app/src/main/java/com/sadellie/unitto/screens/setttings/UnitGroupsScreen.kt
+++ b/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)
                )
            }

--- a/app/src/main/res/values-en-rGB/strings.xml
+++ b/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>
--- a/app/src/main/res/values-ru/strings.xml
+++ b/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>
--- a/app/src/main/res/values/strings.xml
+++ b/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>