fix: Improve ThemeSelector

app/src/main/java/app/myzel394/alibi/ui/components/SettingsScreen/atoms/ThemeSelector.kt

@@ -7,14 +7,18 @@ import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.CheckCircle
 import androidx.compose.material.icons.filled.Mic
 import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.rememberCoroutineScope
@@ -31,68 +35,90 @@ import kotlinx.coroutines.launch
 
 @Composable
 fun Preview(
+    modifier: Modifier = Modifier,
     backgroundColor: Color,
     primaryColor: Color,
     textColor: Color,
     onSelect: () -> Unit,
+    isSelected: Boolean = false,
 ) {
-    Column(
+    Box(
-        modifier = Modifier
+        modifier = modifier,
-            .width(100.dp)
+        contentAlignment = Alignment.Center,
-            .height(200.dp)
-            .clip(shape = RoundedCornerShape(10.dp))
-            .border(width = 1.dp, color = textColor, shape = RoundedCornerShape(10.dp))
-            .background(backgroundColor)
-            .clickable { onSelect() },
-        horizontalAlignment = Alignment.CenterHorizontally,
-        verticalArrangement = Arrangement.SpaceBetween,
     ) {
-        Row(
-            horizontalArrangement = Arrangement.SpaceBetween,
-            modifier = Modifier
-                .fillMaxWidth()
-                .padding(10.dp)
-        ) {
-            Box(
-                modifier = Modifier
-                    .width(30.dp)
-                    .height(10.dp)
-                    .clip(shape = RoundedCornerShape(10.dp))
-                    .background(primaryColor)
-            )
-            Box(
-                modifier = Modifier
-                    .width(10.dp)
-                    .height(10.dp)
-                    .clip(shape = RoundedCornerShape(10.dp))
-                    .background(primaryColor)
-            )
-        }
         Column(
+            modifier = Modifier
+                .width(100.dp)
+                .height(200.dp)
+                .clip(shape = RoundedCornerShape(10.dp))
+                .border(width = 1.dp, color = textColor, shape = RoundedCornerShape(10.dp))
+                .background(backgroundColor)
+                .clickable { onSelect() },
             horizontalAlignment = Alignment.CenterHorizontally,
-            verticalArrangement = Arrangement.spacedBy(12.dp),
+            verticalArrangement = Arrangement.SpaceBetween,
         ) {
-            Icon(
+            Row(
-                Icons.Default.Mic,
+                horizontalArrangement = Arrangement.SpaceBetween,
-                contentDescription = null,
-                tint = primaryColor,
-            )
-            Box(
                 modifier = Modifier
-                    .width(40.dp)
+                    .fillMaxWidth()
-                    .height(6.dp)
+                    .padding(10.dp)
-                    .clip(shape = RoundedCornerShape(10.dp))
+            ) {
-                    .background(primaryColor)
+                Box(
-            )
+                    modifier = Modifier
-            Box(
+                        .width(30.dp)
-                modifier = Modifier
+                        .height(10.dp)
-                    .width(75.dp)
+                        .clip(shape = RoundedCornerShape(10.dp))
-                    .height(10.dp)
+                        .background(primaryColor)
-                    .clip(shape = RoundedCornerShape(10.dp))
+                )
-                    .background(textColor)
+                Box(
-            )
+                    modifier = Modifier
+                        .size(10.dp)
+                        .clip(shape = RoundedCornerShape(10.dp))
+                        .background(primaryColor)
+                )
+            }
+            Column(
+                horizontalAlignment = Alignment.CenterHorizontally,
+                verticalArrangement = Arrangement.spacedBy(12.dp),
+            ) {
+                Icon(
+                    Icons.Default.Mic,
+                    contentDescription = null,
+                    tint = primaryColor,
+                )
+                Box(
+                    modifier = Modifier
+                        .width(40.dp)
+                        .height(6.dp)
+                        .clip(shape = RoundedCornerShape(10.dp))
+                        .background(primaryColor)
+                )
+                Box(
+                    modifier = Modifier
+                        .width(75.dp)
+                        .height(10.dp)
+                        .clip(shape = RoundedCornerShape(10.dp))
+                        .background(textColor)
+                )
+            }
+            Box {}
+        }
+        if (isSelected) {
+            Column(
+                horizontalAlignment = Alignment.CenterHorizontally,
+                verticalArrangement = Arrangement.Center,
+                modifier = Modifier
+                    .fillMaxSize(),
+            ) {
+                Icon(
+                    Icons.Default.CheckCircle,
+                    contentDescription = null,
+                    tint = MaterialTheme.colorScheme.onSurfaceVariant,
+                    modifier = Modifier
+                        .size(30.dp),
+                )
+            }
         }
-        Box {}
     }
 }
 
@@ -113,6 +139,9 @@ fun ThemeSelector() {
             .padding(16.dp)
     ) {
         Preview(
+            modifier = Modifier
+                .fillMaxWidth()
+                .weight(1f),
             backgroundColor = Color(0xFFF0F0F0),
             primaryColor = Color(0xFFAAAAAA),
             textColor = Color(0xFFCCCCCC),
@@ -122,9 +151,13 @@ fun ThemeSelector() {
                         it.setTheme(AppSettings.Theme.LIGHT)
                     }
                 }
-            }
+            },
+            isSelected = settings.theme == AppSettings.Theme.LIGHT,
         )
         Preview(
+            modifier = Modifier
+                .fillMaxWidth()
+                .weight(1f),
             backgroundColor = Color(0xFF444444),
             primaryColor = Color(0xFF888888),
             textColor = Color(0xFF606060),
@@ -134,7 +167,8 @@ fun ThemeSelector() {
                         it.setTheme(AppSettings.Theme.DARK)
                     }
                 }
-            }
+            },
+            isSelected = settings.theme == AppSettings.Theme.DARK,
         )
     }
 }