feat(settings): reorder appearance settings, move strings to res

Closes: #97

app/src/main/java/org/nsh07/pomodoro/ui/settingsScreen/components/ColorSchemePickerListItem.kt

@@ -17,6 +17,7 @@
 
 package org.nsh07.pomodoro.ui.settingsScreen.components
 
+import android.os.Build
 import androidx.compose.animation.AnimatedContent
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
@@ -28,6 +29,8 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.lazy.LazyRow
 import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.shape.CornerSize
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
@@ -38,6 +41,7 @@ import androidx.compose.material3.Switch
 import androidx.compose.material3.SwitchDefaults
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
@@ -65,6 +69,7 @@ fun ColorSchemePickerListItem(
         Color(0xff9fd75c), Color(0xffc1d02d), Color(0xfffabd00), Color(0xffffb86e),
         Color.White
     )
+    val zeroCorner = remember { CornerSize(0) }
 
     Column(
         modifier
@@ -76,45 +81,48 @@ fun ColorSchemePickerListItem(
                 }
             )
     ) {
-        ListItem(
+        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
-            leadingContent = {
+            ListItem(
-                Icon(
+                leadingContent = {
-                    painterResource(R.drawable.colors),
+                    Icon(
-                    null
+                        painterResource(R.drawable.colors),
-                )
+                        null
-            },
+                    )
-            headlineContent = { Text("Dynamic color") },
+                },
-            supportingContent = { Text("Adapt theme colors from your wallpaper") },
+                headlineContent = { Text(stringResource(R.string.dynamic_color)) },
-            trailingContent = {
+                supportingContent = { Text(stringResource(R.string.dynamic_color_desc)) },
-                val checked = color == colorSchemes.last()
+                trailingContent = {
-                Switch(
+                    val checked = color == colorSchemes.last()
-                    checked = checked,
+                    Switch(
-                    onCheckedChange = {
+                        checked = checked,
-                        if (it) onColorChange(colorSchemes.last())
+                        onCheckedChange = {
-                        else onColorChange(colorSchemes.first())
+                            if (it) onColorChange(colorSchemes.last())
-                    },
+                            else onColorChange(colorSchemes.first())
-                    thumbContent = {
+                        },
-                        if (checked) {
+                        thumbContent = {
-                            Icon(
+                            if (checked) {
-                                painter = painterResource(R.drawable.check),
+                                Icon(
-                                contentDescription = null,
+                                    painter = painterResource(R.drawable.check),
-                                modifier = Modifier.size(SwitchDefaults.IconSize),
+                                    contentDescription = null,
-                            )
+                                    modifier = Modifier.size(SwitchDefaults.IconSize),
-                        } else {
+                                )
-                            Icon(
+                            } else {
-                                painter = painterResource(R.drawable.clear),
+                                Icon(
-                                contentDescription = null,
+                                    painter = painterResource(R.drawable.clear),
-                                modifier = Modifier.size(SwitchDefaults.IconSize),
+                                    contentDescription = null,
-                            )
+                                    modifier = Modifier.size(SwitchDefaults.IconSize),
-                        }
+                                )
-                    },
+                            }
-                    colors = switchColors
+                        },
-                )
+                        colors = switchColors
-            },
+                    )
-            colors = listItemColors,
+                },
-            modifier = Modifier.clip(middleListItemShape)
+                colors = listItemColors,
-        )
+                modifier = Modifier.clip(middleListItemShape)
-        Spacer(Modifier.height(2.dp))
+            )
+            Spacer(Modifier.height(2.dp))
+        }
+
         ListItem(
             leadingContent = {
                 Icon(
@@ -131,7 +139,14 @@ fun ColorSchemePickerListItem(
                 )
             },
             colors = listItemColors,
-            modifier = Modifier.clip(middleListItemShape)
+            modifier = Modifier.clip(
+                RoundedCornerShape(
+                    topStart = middleListItemShape.topStart,
+                    topEnd = middleListItemShape.topEnd,
+                    zeroCorner,
+                    zeroCorner
+                )
+            )
         )
 
         Column(

app/src/main/java/org/nsh07/pomodoro/ui/settingsScreen/screens/AppearanceSettings.kt

@@ -56,6 +56,7 @@ import org.nsh07.pomodoro.ui.theme.CustomColors.switchColors
 import org.nsh07.pomodoro.ui.theme.CustomColors.topBarColors
 import org.nsh07.pomodoro.ui.theme.TomatoShapeDefaults.bottomListItemShape
 import org.nsh07.pomodoro.ui.theme.TomatoShapeDefaults.middleListItemShape
+import org.nsh07.pomodoro.ui.theme.TomatoTheme
 import org.nsh07.pomodoro.utils.toColor
 
 @OptIn(ExperimentalMaterial3Api::class, ExperimentalMaterial3ExpressiveApi::class)
@@ -100,24 +101,24 @@ fun AppearanceSettings(
             item {
                 Spacer(Modifier.height(14.dp))
             }
-            item {
-                ColorSchemePickerListItem(
-                    color = preferencesState.colorScheme.toColor(),
-                    items = 3,
-                    index = 0,
-                    onColorChange = onColorSchemeChange
-                )
-            }
             item {
                 ThemePickerListItem(
                     theme = preferencesState.theme,
                     onThemeChange = onThemeChange,
                     items = 3,
-                    index = 1,
+                    index = 0,
                     modifier = Modifier
                         .clip(middleListItemShape)
                 )
             }
+            item {
+                ColorSchemePickerListItem(
+                    color = preferencesState.colorScheme.toColor(),
+                    items = 3,
+                    index = 1,
+                    onColorChange = onColorSchemeChange
+                )
+            }
             item {
                 val item = SettingsSwitchItem(
                     checked = preferencesState.blackTheme,
@@ -168,11 +169,13 @@ fun AppearanceSettings(
 @Composable
 fun AppearanceSettingsPreview() {
     val preferencesState = PreferencesState()
-    AppearanceSettings(
+    TomatoTheme {
-        preferencesState = preferencesState,
+        AppearanceSettings(
-        onBlackThemeChange = {},
+            preferencesState = preferencesState,
-        onThemeChange = {},
+            onBlackThemeChange = {},
-        onColorSchemeChange = {},
+            onThemeChange = {},
-        onBack = {}
+            onColorSchemeChange = {},
-    )
+            onBack = {}
+        )
+    }
 }

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

@@ -83,4 +83,6 @@
     <string name="dnd_desc">Turn on DND when running a Focus timer</string>
     <string name="app_name_plus">Tomato+</string>
     <string name="get_plus">Get Tomato+</string>
+    <string name="dynamic_color">Dynamic color</string>
+    <string name="dynamic_color_desc">Adapt theme colors from your wallpaper</string>
 </resources>