Fix ui dark mode + Some ui changes

app/build.gradle

@@ -70,20 +70,21 @@ dependencies {
     implementation "androidx.navigation:navigation-compose:2.5.3"
 //    kotlinx serialization
     implementation "org.jetbrains.kotlinx:kotlinx-serialization-json:1.3.0"
-//     Network dependencies
+//    Network dependencies
     def retrofit_version = "2.9.0"
     implementation "com.squareup.retrofit2:retrofit:$retrofit_version"
     implementation "com.squareup.retrofit2:converter-gson:$retrofit_version"
     implementation 'com.squareup.okhttp3:logging-interceptor:4.9.3'
-//     Dependency injection
+//    Image loading
+    implementation "io.coil-kt:coil-compose:2.2.2"
+//    Dependency injection
     implementation "com.google.dagger:hilt-android:$hilt_version"
     kapt "com.google.dagger:hilt-compiler:$hilt_version"
     kapt "androidx.hilt:hilt-compiler:1.0.0"
     implementation "androidx.hilt:hilt-navigation-compose:1.0.0"
-    // Paging 3
+//    Paging 3
     implementation "androidx.paging:paging-compose:1.0.0-alpha17"
 
-    implementation("io.coil-kt:coil-compose:2.0.0-rc03")
     testImplementation 'junit:junit:4.13.2'
 //    androidTestImplementation 'androidx.test.ext:junit:1.1.3'
 //    androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0'

app/src/main/java/com/phoenix/newsapp/NetworkModule.kt

@@ -1,7 +1,7 @@
 package com.phoenix.newsapp
 
 import com.phoenix.newsapp.data.network.NewsApi
-import com.phoenix.newsapp.utils.Constants
+import com.phoenix.newsapp.ui.screen.utils.Constants
 import dagger.Module
 import dagger.Provides
 import dagger.hilt.InstallIn

app/src/main/java/com/phoenix/newsapp/data/network/EverythingPagingSource.kt

@@ -3,7 +3,7 @@ package com.phoenix.newsapp.data.network
 import androidx.paging.PagingSource
 import androidx.paging.PagingState
 import com.phoenix.newsapp.data.model.Article
-import com.phoenix.newsapp.utils.Constants
+import com.phoenix.newsapp.ui.screen.utils.Constants
 import retrofit2.HttpException
 import java.io.IOException
 

app/src/main/java/com/phoenix/newsapp/data/network/HeadlinesPagingSource.kt

@@ -3,7 +3,7 @@ package com.phoenix.newsapp.data.network
 import androidx.paging.PagingSource
 import androidx.paging.PagingState
 import com.phoenix.newsapp.data.model.Article
-import com.phoenix.newsapp.utils.Constants
+import com.phoenix.newsapp.ui.screen.utils.Constants
 import retrofit2.HttpException
 import java.io.IOException
 

app/src/main/java/com/phoenix/newsapp/data/network/NewsApi.kt

@@ -2,7 +2,7 @@ package com.phoenix.newsapp.data.network
 
 import com.phoenix.newsapp.BuildConfig
 import com.phoenix.newsapp.data.network.response.NewsResponse
-import com.phoenix.newsapp.utils.Constants
+import com.phoenix.newsapp.ui.screen.utils.Constants
 import retrofit2.http.GET
 import retrofit2.http.Headers
 import retrofit2.http.Query

app/src/main/java/com/phoenix/newsapp/data/network/Repository.kt

@@ -4,7 +4,7 @@ import androidx.paging.Pager
 import androidx.paging.PagingConfig
 import androidx.paging.PagingData
 import com.phoenix.newsapp.data.model.Article
-import com.phoenix.newsapp.utils.Constants
+import com.phoenix.newsapp.ui.screen.utils.Constants
 import kotlinx.coroutines.flow.Flow
 import javax.inject.Inject
 

app/src/main/java/com/phoenix/newsapp/ui/screen/about/AboutScreen.kt

@@ -1,20 +1,16 @@
 package com.phoenix.newsapp.ui.screen.about
 
-import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.*
-import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.ArrowBack
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
-import androidx.compose.material3.OutlinedButton
-import androidx.compose.material3.Text
+import androidx.compose.material3.MaterialTheme
 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.platform.LocalUriHandler
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
@@ -48,7 +44,7 @@ fun AboutScreen(navController: NavHostController) {
             HyperlinkText(
                 text = stringResource(R.string.about_desc),
                 modifier = Modifier.padding(horizontal = 24.dp),
-                color = Color(0xDE000000),
+                color = MaterialTheme.colorScheme.onBackground,
                 fontWeight = FontWeight.Bold,
                 fontSize = 16.sp,
                 linkText = listOf("newsapi.org"),
@@ -82,20 +78,13 @@ fun AboutScreen(navController: NavHostController) {
                 )
             }
         }
-        IconButton(onClick = { navController.popBackStack() }, modifier = Modifier.padding(16.dp)) {
+        IconButton(onClick = { navController.popBackStack() }) {
             Icon(
                 imageVector = Icons.Default.ArrowBack,
                 contentDescription = null,
+                tint = MaterialTheme.colorScheme.onBackground
             )
         }
-        OutlinedButton(
-            modifier = Modifier.align(Alignment.BottomEnd).padding(horizontal = 24.dp, vertical = 16.dp),
-            shape = RoundedCornerShape(8.dp),
-            border = BorderStroke(2.dp, Color(0xFF4481A1)),
-            onClick = { /*TODO: Show libraries */ }
-        ) {
-            Text(text = "Third party libraries", color = Color.Black)
-        }
     }
 }
 

app/src/main/java/com/phoenix/newsapp/ui/screen/home/HomeScreen.kt

@@ -30,7 +30,6 @@ fun HomeScreen(
     viewModel: HomeViewModel = hiltViewModel()
 ) {
     Scaffold(
-        modifier = Modifier,
         topBar = { HomeTopBar(navController) }
     ) {
         Box(
@@ -71,7 +70,7 @@ private fun HomeTopBar(navController: NavHostController) {
         }
         Text(
             text = stringResource(R.string.app_name),
-            color = Color(0xDE000000),
+            color = MaterialTheme.colorScheme.onBackground,
             fontSize = 20.sp,
             fontWeight = FontWeight.Bold
         )

app/src/main/java/com/phoenix/newsapp/ui/screen/search/SearchScreen.kt

@@ -36,30 +36,23 @@ import com.phoenix.newsapp.ui.widget.ListComposable
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun SearchScreen(
-    navController: NavHostController,
-    viewModel: SearchViewModel = hiltViewModel()
+    navController: NavHostController, viewModel: SearchViewModel = hiltViewModel()
 ) {
     val searchQuery = viewModel.searchQuery
     val searchedArticles = viewModel.searchedArticles
 
     var isSearched by remember { mutableStateOf(false) }
 
     Scaffold(
-        modifier = Modifier,
         topBar = {
-            SearchTopAppBar(
-                searchQuery,
-                onTextChange = {
-                    viewModel.updateSearchQuery(it)
-                },
-                onSearchClicked = {
-                    viewModel.searchArticles(it)
-                    isSearched = true
-                },
-                onCloseClicked = {
-                    navController.popBackStack()
-                }
-            )
+            SearchTopAppBar(searchQuery, onTextChange = {
+                viewModel.updateSearchQuery(it)
+            }, onSearchClicked = {
+                viewModel.searchArticles(it)
+                isSearched = true
+            }, onCloseClicked = {
+                navController.popBackStack()
+            })
         }
     ) {
         Box(
@@ -72,8 +65,7 @@ fun SearchScreen(
                     .background(
                         brush = Brush.verticalGradient(
                             colors = listOf(
-                                Color(0x21212121),
-                                Color.Transparent
+                                Color(0x21212121), Color.Transparent
                             )
                         )
                     )
@@ -99,7 +91,6 @@ private fun SearchTopAppBar(
     OutlinedTextField(
         modifier = Modifier
             .fillMaxWidth()
-            .height(56.dp)
             .padding(vertical = 6.dp, horizontal = 8.dp),
         value = text,
         onValueChange = { string: String ->
@@ -108,7 +99,9 @@ private fun SearchTopAppBar(
         placeholder = {
             Text(
                 text = "Search in the news...",
-                modifier = Modifier.alpha(0.54f),
+                modifier = Modifier
+                    .alpha(0.54f)
+                    .padding(0.dp),
                 fontSize = 15.sp,
                 fontWeight = FontWeight.Medium
             )
@@ -124,15 +117,14 @@ private fun SearchTopAppBar(
         trailingIcon = {
             IconButton(onClick = { onCloseClicked() }) {
                 Icon(
-                    imageVector = Icons.Default.Close,
-                    contentDescription = null
+                    imageVector = Icons.Default.Close, contentDescription = null
                 )
             }
         },
         keyboardOptions = KeyboardOptions(imeAction = ImeAction.Search),
         keyboardActions = KeyboardActions(onSearch = { onSearchClicked(text) }),
         textStyle = TextStyle(
-            color = Color(0xDE000000),
+            color = MaterialTheme.colorScheme.onBackground,
             fontSize = 15.sp,
             fontWeight = FontWeight.Bold
         ),
@@ -157,14 +149,14 @@ private fun EmptySearchIllustration() {
         Spacer(modifier = Modifier.height(12.dp))
         Text(
             text = "Search in the news",
-            color = Color(0xDE000000),
+            color = MaterialTheme.colorScheme.onBackground,
             fontSize = 16.sp,
             fontWeight = FontWeight.SemiBold
         )
         Spacer(modifier = Modifier.height(8.dp))
         Text(
-            text = "Search among the thousands of news!\nfrom many different sources",
-            color = Color(0x8A000000),
+            text = "Search among the thousands of news!\nfrom different & reliable sources",
+            color = MaterialTheme.colorScheme.onBackground,
             fontSize = 14.sp,
             fontWeight = FontWeight.Medium,
             textAlign = TextAlign.Center

app/src/main/java/com/phoenix/newsapp/utils/Constants.kt → app/src/main/java/com/phoenix/newsapp/ui/screen/utils/Constants.kt

@@ -1,4 +1,4 @@
-package com.phoenix.newsapp.utils
+package com.phoenix.newsapp.ui.screen.utils
 
 object Constants {
 

app/src/main/java/com/phoenix/newsapp/ui/theme/Theme.kt

@@ -10,39 +10,41 @@ import androidx.compose.material3.dynamicLightColorScheme
 import androidx.compose.material3.lightColorScheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.SideEffect
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.toArgb
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalView
 import androidx.core.view.ViewCompat
 
 private val DarkColorScheme = darkColorScheme(
-        primary = Purple80,
-        secondary = PurpleGrey80,
-        tertiary = Pink80
+    primary = Purple80,
+    secondary = PurpleGrey80,
+    tertiary = Pink80,
+    background = Color(0xFF212121)
 )
 
 private val LightColorScheme = lightColorScheme(
-        primary = Purple40,
-        secondary = PurpleGrey40,
-        tertiary = Pink40
+    primary = Purple40,
+    secondary = PurpleGrey40,
+    tertiary = Pink40
 
-        /* Other default colors to override
-    background = Color(0xFFFFFBFE),
-    surface = Color(0xFFFFFBFE),
-    onPrimary = Color.White,
-    onSecondary = Color.White,
-    onTertiary = Color.White,
-    onBackground = Color(0xFF1C1B1F),
-    onSurface = Color(0xFF1C1B1F),
-    */
+    /* Other default colors to override
+background = Color(0xFFFFFBFE),
+surface = Color(0xFFFFFBFE),
+onPrimary = Color.White,
+onSecondary = Color.White,
+onTertiary = Color.White,
+onBackground = Color(0xFF1C1B1F),
+onSurface = Color(0xFF1C1B1F),
+*/
 )
 
 @Composable
 fun NewsAppTheme(
-        darkTheme: Boolean = isSystemInDarkTheme(),
-        // Dynamic color is available on Android 12+
-        dynamicColor: Boolean = true,
-        content: @Composable () -> Unit
+    darkTheme: Boolean = isSystemInDarkTheme(),
+    // Dynamic color is available on Android 12+
+    dynamicColor: Boolean = true,
+    content: @Composable () -> Unit
 ) {
     val colorScheme = when {
         dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
@@ -61,8 +63,8 @@ fun NewsAppTheme(
     }
 
     MaterialTheme(
-            colorScheme = colorScheme,
-            typography = Typography,
-            content = content
+        colorScheme = colorScheme,
+        typography = Typography,
+        content = content
     )
 }