Improved UI in themes settings

core/base/src/main/res/values/strings.xml

@@ -1323,6 +1323,7 @@
     <string name="enable_dynamic_colors">Dynamic colors</string>
     <string name="enable_dynamic_colors_support">Use colors from your wallpaper</string>
     <string name="color_scheme">Color scheme</string>
+    <string name="launcher_icon">Launcher icon</string>
     <string name="selected_color">Selected color</string>
     <string name="selected_launcher_icon">Selected icon</string>
 
@@ -1334,6 +1335,7 @@
     <string name="ok_label" translatable="false">OK</string>
     <string name="apply_label">Apply</string>
     <string name="warning_label">Warning!</string>
+    <string name="unstable_label">unstable</string>
     <string name="icon_change_warning">This feature is unstable. App will be closed to apply changes. Restart your launcher if nothing changes. Reinstall app from phone settings if things go horribly. You have been warned!</string>
     <string name="search_bar_placeholder">Search units</string>
     <string name="search_placeholder">No results found</string>

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

@@ -29,18 +29,22 @@ import androidx.compose.animation.expandVertically
 import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
 import androidx.compose.animation.shrinkVertically
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.padding
 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.Delete
 import androidx.compose.material.icons.filled.Palette
 import androidx.compose.material.icons.filled.Warning
 import androidx.compose.material3.AlertDialog
+import androidx.compose.material3.Badge
 import androidx.compose.material3.FilledTonalButton
 import androidx.compose.material3.Icon
 import androidx.compose.material3.ListItem
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
 import androidx.compose.runtime.Composable
@@ -164,52 +168,6 @@ private fun ThemesScreen(
     ) { paddingValues ->
         LazyColumn(contentPadding = paddingValues) {
 
-            item {
-                ListItem(
-                    headlineContent = { Text(stringResource(R.string.selected_color)) },
-                    supportingContent = {
-                        ColorSelector(
-                            modifier = Modifier.padding(top = 12.dp),
-                            selected = selectedLauncherIconColor,
-                            onItemClick = {
-                                selectedLauncherIconColor = it
-                            },
-                            colorSchemes = remember {
-                                LauncherIcon.values().map { Color(it.backgroundColor) }
-                                    .distinct()
-                            },
-                        )
-                    },
-                    modifier = Modifier.padding(start = 40.dp)
-                )
-            }
-
-            item {
-                ListItem(
-                    headlineContent = { Text(stringResource(R.string.selected_launcher_icon)) },
-                    supportingContent = {
-                        IconsSelector(
-                            modifier = Modifier.padding(top = 12.dp),
-                            selectedColor = selectedLauncherIconColorAnim.value,
-                            icons = launcherIcons,
-                            selectedIcon = selectedLauncherIcon,
-                            onIconChange = { selectedLauncherIcon = it }
-                        )
-                    },
-                    modifier = Modifier.padding(start = 40.dp)
-                )
-            }
-
-            item {
-                FilledTonalButton(
-                    modifier = Modifier.padding(start = 56.dp),
-                    enabled = currentIcon != selectedLauncherIcon,
-                    onClick = { showIconChangeWarning = true },
-                ) {
-                    Text(stringResource(R.string.apply_label))
-                }
-            }
-
             item {
                 ListItem(
                     leadingContent = {
@@ -298,6 +256,68 @@ private fun ThemesScreen(
                     )
                 }
             }
+
+            item {
+                Row(
+                    modifier = Modifier.padding(start = 56.dp, end = 16.dp, top = 24.dp, bottom = 12.dp),
+                    horizontalArrangement = Arrangement.spacedBy(4.dp)
+                ) {
+                    Text(
+                        modifier = Modifier.background(MaterialTheme.colorScheme.background),
+                        text = stringResource(R.string.launcher_icon),
+                        style = MaterialTheme.typography.titleSmall,
+                        color = MaterialTheme.colorScheme.primary
+                    )
+                    Badge { Text(stringResource(R.string.unstable_label)) }
+                }
+            }
+
+            item {
+                ListItem(
+                    headlineContent = { Text(stringResource(R.string.selected_color)) },
+                    supportingContent = {
+                        ColorSelector(
+                            modifier = Modifier.padding(top = 12.dp),
+                            selected = selectedLauncherIconColor,
+                            onItemClick = {
+                                selectedLauncherIconColor = it
+                            },
+                            colorSchemes = remember {
+                                LauncherIcon.values().map { Color(it.backgroundColor) }
+                                    .distinct()
+                            },
+                        )
+                    },
+                    modifier = Modifier.padding(start = 40.dp)
+                )
+            }
+
+            item {
+                ListItem(
+                    headlineContent = { Text(stringResource(R.string.selected_launcher_icon)) },
+                    supportingContent = {
+                        IconsSelector(
+                            modifier = Modifier.padding(top = 12.dp),
+                            selectedColor = selectedLauncherIconColorAnim.value,
+                            icons = launcherIcons,
+                            selectedIcon = selectedLauncherIcon,
+                            onIconChange = { selectedLauncherIcon = it }
+                        )
+                    },
+                    modifier = Modifier.padding(start = 40.dp)
+                )
+            }
+
+            item {
+                FilledTonalButton(
+                    modifier = Modifier.padding(start = 56.dp),
+                    enabled = currentIcon != selectedLauncherIcon,
+                    onClick = { showIconChangeWarning = true },
+                ) {
+                    Text(stringResource(R.string.apply_label))
+                }
+            }
+
         }
     }