ui: remove hardcoded colors and font, configure light/dark theme #25

Author: shubham0204

app/build.gradle.kts

@@ -89,6 +89,7 @@ dependencies {
     implementation(libs.koin.android)
     implementation(libs.koin.annotations)
     implementation(libs.koin.androidx.compose)
+    implementation(libs.androidx.ui.text.google.fonts)
     ksp(libs.koin.ksp.compiler)
 
     // ObjectBox: on-device NoSQL database

app/src/main/java/io/shubham0204/smollmandroid/ui/components/AppAlertDialog.kt

@@ -23,7 +23,6 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
-import io.shubham0204.smollmandroid.ui.theme.AppFontFamily
 
 private var title = ""
 private var text = ""
@@ -38,8 +37,8 @@ fun AppAlertDialog() {
     val visible by remember { alertDialogShowStatus }
     if (visible) {
         AlertDialog(
-            title = { Text(text = title, fontFamily = AppFontFamily) },
-            text = { Text(text = text, fontFamily = AppFontFamily) },
+            title = { Text(text = title) },
+            text = { Text(text = text) },
             onDismissRequest = { /* All alert dialogs are non-cancellable */ },
             confirmButton = {
                 TextButton(

app/src/main/java/io/shubham0204/smollmandroid/ui/components/AppProgressDialog.kt

@@ -25,19 +25,17 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.LinearProgressIndicator
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.window.Dialog
-import io.shubham0204.smollmandroid.ui.theme.AppAccentColor
-import io.shubham0204.smollmandroid.ui.theme.AppFontFamily
 
 private val progressDialogVisibleState = mutableStateOf(false)
 private val progressDialogText = mutableStateOf("")
@@ -47,32 +45,35 @@ private val progressDialogTitle = mutableStateOf("")
 fun AppProgressDialog() {
     val isVisible by remember { progressDialogVisibleState }
     if (isVisible) {
-        Dialog(onDismissRequest = { /* Progress dialogs are non-cancellable */ }) {
-            Box(
-                contentAlignment = Alignment.Center,
-                modifier =
-                    Modifier
-                        .fillMaxWidth()
-                        .background(Color.White, shape = RoundedCornerShape(8.dp)),
-            ) {
-                Column(
-                    horizontalAlignment = Alignment.CenterHorizontally,
-                    modifier = Modifier.padding(vertical = 24.dp),
+        Surface {
+            Dialog(onDismissRequest = { /* Progress dialogs are non-cancellable */ }) {
+                Box(
+                    contentAlignment = Alignment.Center,
+                    modifier =
+                        Modifier
+                            .fillMaxWidth()
+                            .background(MaterialTheme.colorScheme.surfaceContainer, shape = RoundedCornerShape(8.dp)),
                 ) {
-                    Text(text = progressDialogTitle.value, fontFamily = AppFontFamily)
-                    Spacer(modifier = Modifier.padding(4.dp))
-                    LinearProgressIndicator(
-                        modifier = Modifier.fillMaxWidth(),
-                        color = AppAccentColor,
-                    )
-                    Spacer(modifier = Modifier.padding(4.dp))
-                    Text(
-                        text = progressDialogText.value,
-                        textAlign = TextAlign.Center,
-                        modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp),
-                        fontFamily = AppFontFamily,
-                        style = MaterialTheme.typography.labelSmall,
-                    )
+                    Column(
+                        horizontalAlignment = Alignment.CenterHorizontally,
+                        modifier = Modifier.padding(vertical = 24.dp),
+                    ) {
+                        Text(text = progressDialogTitle.value)
+                        Spacer(modifier = Modifier.padding(4.dp))
+                        LinearProgressIndicator(
+                            modifier = Modifier.fillMaxWidth(),
+                        )
+                        Spacer(modifier = Modifier.padding(4.dp))
+                        Text(
+                            text = progressDialogText.value,
+                            textAlign = TextAlign.Center,
+                            modifier =
+                                Modifier
+                                    .fillMaxWidth()
+                                    .padding(horizontal = 16.dp),
+                            style = MaterialTheme.typography.labelSmall,
+                        )
+                    }
                 }
             }
         }

app/src/main/java/io/shubham0204/smollmandroid/ui/components/Text.kt

@@ -16,30 +16,11 @@
 
 package io.shubham0204.smollmandroid.ui.components
 
-import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.text.style.TextAlign
-import io.shubham0204.smollmandroid.ui.theme.AppFontFamily
-
-@Composable
-fun SmallLabelText(
-    text: String,
-    modifier: Modifier = Modifier,
-    textColor: Color = Color.Black,
-) {
-    Text(
-        text = text,
-        style = MaterialTheme.typography.labelSmall,
-        fontFamily = AppFontFamily,
-        modifier = modifier,
-        color = textColor,
-    )
-}
 
 @Composable
 fun MediumLabelText(
@@ -49,7 +30,6 @@ fun MediumLabelText(
     Text(
         text = text,
         style = MaterialTheme.typography.labelMedium,
-        fontFamily = AppFontFamily,
         modifier = modifier,
     )
 }
@@ -62,25 +42,10 @@ fun LargeLabelText(
     Text(
         text = text,
         style = MaterialTheme.typography.labelLarge,
-        fontFamily = AppFontFamily,
         modifier = modifier,
     )
 }
 
-@Composable
-fun DialogTitleText(
-    text: String,
-    modifier: Modifier = Modifier,
-) {
-    Text(
-        text = text,
-        style = MaterialTheme.typography.titleLarge,
-        fontFamily = AppFontFamily,
-        modifier = modifier.fillMaxWidth(),
-        textAlign = TextAlign.Center,
-    )
-}
-
 @Composable
 fun AppBarTitleText(
     text: String,
@@ -89,7 +54,6 @@ fun AppBarTitleText(
     Text(
         text = text,
         style = MaterialTheme.typography.titleMedium,
-        fontFamily = AppFontFamily,
         modifier = modifier,
         fontWeight = FontWeight.Bold,
     )