[#100] Add support for dark theme and minor code improvements

Author: kaungkhantsoe

app/src/main/java/co/nimblehq/compose/crypto/ui/common/AppDialogPopUp.kt

@@ -1,59 +1,51 @@
 package co.nimblehq.compose.crypto.ui.common
 
-import androidx.annotation.StringRes
-import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.*
 import androidx.compose.material.*
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.window.Dialog
-import co.nimblehq.compose.crypto.R
 import co.nimblehq.compose.crypto.ui.theme.*
 
 @Composable
 fun AppDialogPopUp(
     onDismiss: () -> Unit,
     onClick: () -> Unit,
-    @StringRes title: Int,
-    @StringRes message: Int,
-    @StringRes actionText: Int,
+    title: String,
+    message: String,
+    actionText: String,
 ) {
     Dialog(
         onDismissRequest = onDismiss
     ) {
-        Column(
-            modifier = Modifier
-                .background(Color.White)
-                .width(DialogWidth)
-        ) {
-            Text(
-                text = stringResource(id = title),
-                style = AppTheme.typography.h6,
-                color = Color.Black,
-                modifier = Modifier.padding(top = Dp16, start = Dp16, end = Dp16)
-            )
-            Text(
-                text = stringResource(id = message),
-                style = AppTheme.typography.body1,
-                color = Color.Black,
-                modifier = Modifier.padding(Dp16)
-            )
-            Row(
-                horizontalArrangement = Arrangement.End,
-                modifier = Modifier
-                    .fillMaxWidth()
-                    .padding(bottom = Dp16, end = Dp8)
+        Surface {
+            Column(
+                modifier = Modifier.width(DialogWidth)
             ) {
+                Text(
+                    text = title,
+                    style = AppTheme.typography.h6,
+                    color = AppTheme.colors.text,
+                    modifier = Modifier.padding(top = Dp16, start = Dp16, end = Dp16)
+                )
+                Text(
+                    text = message,
+                    style = AppTheme.typography.body1,
+                    color = AppTheme.colors.text,
+                    modifier = Modifier.padding(Dp16)
+                )
                 TextButton(
-                    onClick = onClick
+                    onClick = onClick,
+                    modifier = Modifier
+                        .align(Alignment.End)
+                        .padding(bottom = Dp16, end = Dp8)
                 ) {
                     Text(
-                        text = stringResource(id = actionText),
+                        text = actionText,
                         style = AppTheme.styles.semiBold16,
-                        color = Color.Blue,
+                        color = AppTheme.colors.dialogText,
                     )
                 }
             }
@@ -69,9 +61,9 @@ fun AppDialogPopUpPreview() {
             AppDialogPopUp(
                 onDismiss = { /*TODO*/ },
                 onClick = { /*TODO*/ },
-                message = R.string.no_internet_message,
-                actionText = android.R.string.ok,
-                title = R.string.no_internet_title
+                message = "No internet connection was found. Please check your internet connection and try again.",
+                actionText = "OK",
+                title = "Oops!"
             )
         }
     }

app/src/main/java/co/nimblehq/compose/crypto/ui/screens/home/HomeScreen.kt

@@ -58,7 +58,7 @@ fun HomeScreen(
     }
 
     // TODO remove in integration ticket
-    val isNetworkConnected by viewModel.hasConnection.collectAsState()
+    val isNetworkConnected by viewModel.isNetworkConnected.collectAsState()
 
     val showMyCoinsLoading: IsLoading by viewModel.output.showMyCoinsLoading.collectAsState()
     val showTrendingCoinsLoading: LoadingState by viewModel.output.showTrendingCoinsLoading.collectAsState()
@@ -96,9 +96,9 @@ fun HomeScreen(
         AppDialogPopUp(
             onDismiss = { /*TODO*/ },
             onClick = { /*TODO*/ },
-            message = R.string.no_internet_message,
-            actionText = android.R.string.ok,
-            title = R.string.no_internet_title
+            message = stringResource(id = R.string.no_internet_message),
+            actionText = stringResource(id = android.R.string.ok),
+            title = stringResource(id = R.string.no_internet_title)
         )
     }
 }

app/src/main/java/co/nimblehq/compose/crypto/ui/screens/home/HomeViewModel.kt

@@ -85,16 +85,16 @@ class HomeViewModel @Inject constructor(
     private var trendingCoinsPage = MY_COINS_INITIAL_PAGE
 
     // TODO remove in integration ticket
-    private val _hasConnection = MutableStateFlow<Boolean?>(null)
-    val hasConnection: StateFlow<Boolean?> = _hasConnection
+    private val _isNetworkConnected = MutableStateFlow<Boolean?>(null)
+    val isNetworkConnected: StateFlow<Boolean?> = _isNetworkConnected
 
     init {
         loadData()
         // TODO remove in integration ticket
         execute {
             isNetworkConnectedUseCase()
                 .collect {
-                    _hasConnection.emit(it)
+                    _isNetworkConnected.emit(it)
                 }
         }
     }

app/src/main/java/co/nimblehq/compose/crypto/ui/theme/AppColors.kt

@@ -3,6 +3,7 @@ package co.nimblehq.compose.crypto.ui.theme
 import androidx.compose.material.*
 import androidx.compose.runtime.staticCompositionLocalOf
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.Color.Companion.Blue
 
 /**
  * Extend final [Colors] class to provide more custom app colors.
@@ -35,6 +36,7 @@ data class AppColors(
     val pullRefreshContent: Color = CaribbeanGreen,
 
     val text: Color,
+    val dialogText: Color,
     val textSectionLink: Color = TiffanyBlue,
 )
 
@@ -47,7 +49,8 @@ internal val LightColorPalette = AppColors(
     coinItemBackground = White,
     coinNameText = SonicSilver,
     pullRefreshBackground = White,
-    text = DarkJungleGreen
+    text = DarkJungleGreen,
+    dialogText = Blue
 )
 
 internal val DarkColorPalette = AppColors(
@@ -59,7 +62,8 @@ internal val DarkColorPalette = AppColors(
     coinItemBackground = QuartzAlpha20,
     coinNameText = LightSilver,
     pullRefreshBackground = DarkJungleGreen,
-    text = White
+    text = White,
+    dialogText = White
 )
 
 internal val LocalColors = staticCompositionLocalOf { LightColorPalette }