feat: Add Background Gradient to Screens

presentation/src/main/java/com/london/presentation/feature/account/AccountScreen.kt

@@ -1,14 +1,18 @@
 package com.london.presentation.feature.account
 
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalUriHandler
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.zIndex
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.london.designsystem.component.TopBar
@@ -19,6 +23,7 @@ import com.london.presentation.feature.account.bottomsheet.LanguageBottomSheet
 import com.london.presentation.feature.account.bottomsheet.LogoutBottomSheet
 import com.london.presentation.feature.account.components.LoggedInContent
 import com.london.presentation.feature.account.components.NotLoggedInContent
+import com.london.presentation.shared.BackgroundGradient
 import com.london.presentation.shared.buildscreen.BuildScreen
 import com.london.presentation.utils.Listen
 import com.london.presentation.utils.navBarBottomPadding
@@ -61,61 +66,70 @@ private fun Content(
     uiState: AccountUiState,
     accountContract: AccountContract,
 ) {
-    Column(Modifier.navBarBottomPadding()) {
-        TopBar(
-            title = stringResource(R.string.my_account),
-            modifier = Modifier.padding(horizontal = 16.dp, vertical = 12.dp)
+
+    Box(
+        modifier = Modifier.fillMaxSize()
+    ){
+        BackgroundGradient(
+            modifier = Modifier.align(Alignment.TopStart).zIndex(1f)
         )
 
-        if (uiState.isUserLoggedIn) {
-            LoggedInContent(
-                uiState = uiState,
-                accountContract = accountContract
-            )
-        } else {
-            NotLoggedInContent(
-                onLoginClick = accountContract::onLoginClick
+        Column(Modifier.navBarBottomPadding()) {
+            TopBar(
+                title = stringResource(R.string.my_account),
+                modifier = Modifier.padding(horizontal = 16.dp, vertical = 12.dp)
             )
-        }
-    }
 
-    when (uiState.activeBottomSheet) {
-        ActiveBottomSheet.Logout -> {
-            LogoutBottomSheet(
-                onBottomSheetDismiss = accountContract::onBottomSheetDismiss,
-                onLogoutConfirmed = accountContract::onLogoutConfirmed,
-                isLoading = uiState.isLogoutLoading
-            )
+            if (uiState.isUserLoggedIn) {
+                LoggedInContent(
+                    uiState = uiState,
+                    accountContract = accountContract
+                )
+            } else {
+                NotLoggedInContent(
+                    onLoginClick = accountContract::onLoginClick
+                )
+            }
         }
 
-        ActiveBottomSheet.ContentRestriction -> {
-            ContentRestrictionBottomSheet(
-                currentLevel = uiState.currentContentRestriction,
-                onSaveClick = accountContract::onContentRestrictionSave,
-                onDismiss = accountContract::onBottomSheetDismiss
-            )
-        }
+        when (uiState.activeBottomSheet) {
+            ActiveBottomSheet.Logout -> {
+                LogoutBottomSheet(
+                    onBottomSheetDismiss = accountContract::onBottomSheetDismiss,
+                    onLogoutConfirmed = accountContract::onLogoutConfirmed,
+                    isLoading = uiState.isLogoutLoading
+                )
+            }
 
-        ActiveBottomSheet.Appearance -> {
-            AppearanceBottomSheet(
-                appTheme = uiState.appTheme,
-                onBottomSheetDismiss = accountContract::onBottomSheetDismiss,
-                onDarkModeSelected = accountContract::onDarkModeSelected,
-                onLightModeSelected = accountContract::onLightModeSelected,
-                onAppearanceModeSave = accountContract::onAppearanceModeSave,
-            )
-        }
+            ActiveBottomSheet.ContentRestriction -> {
+                ContentRestrictionBottomSheet(
+                    currentLevel = uiState.currentContentRestriction,
+                    onSaveClick = accountContract::onContentRestrictionSave,
+                    onDismiss = accountContract::onBottomSheetDismiss
+                )
+            }
 
-        ActiveBottomSheet.Language -> {
-            LanguageBottomSheet(
-                appLanguage = uiState.appLanguage,
-                onBottomSheetDismiss = accountContract::onBottomSheetDismiss,
-                onEnglishSelected = accountContract::onEnglishSelected,
-                onArabicSelected = accountContract::onArabicSelected,
-                onLanguageSettingsSave = accountContract::onLanguageSettingsSave,
-            )
-        }
+            ActiveBottomSheet.Appearance -> {
+                AppearanceBottomSheet(
+                    appTheme = uiState.appTheme,
+                    onBottomSheetDismiss = accountContract::onBottomSheetDismiss,
+                    onDarkModeSelected = accountContract::onDarkModeSelected,
+                    onLightModeSelected = accountContract::onLightModeSelected,
+                    onAppearanceModeSave = accountContract::onAppearanceModeSave,
+                )
+            }
+
+            ActiveBottomSheet.Language -> {
+                LanguageBottomSheet(
+                    appLanguage = uiState.appLanguage,
+                    onBottomSheetDismiss = accountContract::onBottomSheetDismiss,
+                    onEnglishSelected = accountContract::onEnglishSelected,
+                    onArabicSelected = accountContract::onArabicSelected,
+                    onLanguageSettingsSave = accountContract::onLanguageSettingsSave,
+                )
+            }
 
-        else -> {}
+            else -> {}
+        }
     }
 }

presentation/src/main/java/com/london/presentation/feature/account/rating/MyRatingScreen.kt

@@ -1,6 +1,7 @@
 package com.london.presentation.feature.account.rating
 
 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
@@ -10,9 +11,11 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.zIndex
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.london.designsystem.component.NovixChip
@@ -21,6 +24,7 @@ import com.london.designsystem.theme.NovixTheme
 import com.london.designsystem.theme.ThemePreviews
 import com.london.domain.entity.shared.MediaType
 import com.london.presentation.R
+import com.london.presentation.shared.BackgroundGradient
 import com.london.presentation.shared.EmptyGenreLayout
 import com.london.presentation.shared.SnackBarAnimation
 import com.london.presentation.shared.base.ErrorState
@@ -76,54 +80,65 @@ private fun Content(
         onBack = contract::onBackClick,
         onRetry = contract::onRetryClick
     ) {
-        Column(
+
+        Box(
             modifier = Modifier.fillMaxSize()
         ) {
-            TopBar(
+            BackgroundGradient(
                 modifier = Modifier
-                    .fillMaxWidth()
-                    .padding(horizontal = 16.dp, vertical = 12.dp),
-                title = stringResource(R.string.my_rating),
-                onBackClick = contract::onBackClick
+                    .align(Alignment.TopStart)
+                    .zIndex(1f)
             )
 
-            RatingChipsRow(
-                selected = selectedCategory,
-                onSelect = contract::onRatingCategorySelected,
-                modifier = Modifier.padding(bottom = 12.dp)
-            )
+            Column(
+                modifier = Modifier.fillMaxSize()
+            ) {
+                TopBar(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(horizontal = 16.dp, vertical = 12.dp),
+                    title = stringResource(R.string.my_rating),
+                    onBackClick = contract::onBackClick
+                )
 
-            if (items.isEmpty()) {
-                EmptyGenreLayout(
-                    message = stringResource(R.string.there_is_no_items),
-                    modifier = Modifier.fillMaxSize()
+                RatingChipsRow(
+                    selected = selectedCategory,
+                    onSelect = contract::onRatingCategorySelected,
+                    modifier = Modifier.padding(bottom = 12.dp)
                 )
-            } else {
-                MediaLazyVerticalGrid(
-                    items = items,
-                    imageUrl = { it.posterPath },
-                    name = { it.title },
-                    rate = { rated -> rated.rating.toLocalizedNumbers() },
-                    hasSaveIcon = false,
-                    isItemSaved = { false },
-                    onSaveClick = {},
-                    onDeleteClick = { rated ->
-                        when (rated.mediaType) {
-                            MediaType.Movie -> contract.onDeleteMovieClick(rated.id)
-                            MediaType.TvShow -> contract.onDeleteTVShowClick(rated.id)
-                        }
-                    },
-                    onItemClick = { rated ->
-                        when (rated.mediaType) {
-                            MediaType.Movie -> contract.onMovieClick(rated.id)
-                            MediaType.TvShow -> contract.onTvShowClick(rated.id)
+
+                if (items.isEmpty()) {
+                    EmptyGenreLayout(
+                        message = stringResource(R.string.there_is_no_items),
+                        modifier = Modifier.fillMaxSize()
+                    )
+                } else {
+                    MediaLazyVerticalGrid(
+                        items = items,
+                        imageUrl = { it.posterPath },
+                        name = { it.title },
+                        rate = { rated -> rated.rating.toLocalizedNumbers() },
+                        hasSaveIcon = false,
+                        isItemSaved = { false },
+                        onSaveClick = {},
+                        onDeleteClick = { rated ->
+                            when (rated.mediaType) {
+                                MediaType.Movie -> contract.onDeleteMovieClick(rated.id)
+                                MediaType.TvShow -> contract.onDeleteTVShowClick(rated.id)
+                            }
+                        },
+                        onItemClick = { rated ->
+                            when (rated.mediaType) {
+                                MediaType.Movie -> contract.onMovieClick(rated.id)
+                                MediaType.TvShow -> contract.onTvShowClick(rated.id)
+                            }
                         }
-                    }
-                )
+                    )
+                }
             }
-        }
 
-        RatingSnackBar(state)
+            RatingSnackBar(state)
+        }
     }
 }
 

presentation/src/main/java/com/london/presentation/feature/authentication/login/LoginScreen.kt

@@ -30,6 +30,7 @@ import androidx.compose.ui.platform.LocalUriHandler
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.zIndex
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.london.designsystem.component.Icon
@@ -39,6 +40,7 @@ import com.london.designsystem.component.TopBar
 import com.london.designsystem.component.button.PrimaryButton
 import com.london.designsystem.theme.NovixTheme
 import com.london.presentation.R
+import com.london.presentation.shared.BackgroundGradient
 import com.london.presentation.shared.SnackBarAnimation
 import com.london.presentation.shared.base.ErrorState
 import com.london.presentation.utils.Listen
@@ -85,6 +87,11 @@ private fun Content(
             .background(NovixTheme.colors.surface)
             .padding(WindowInsets.navigationBars.asPaddingValues()),
     ) {
+
+        BackgroundGradient(
+            modifier = Modifier.align(Alignment.TopStart).zIndex(1f)
+        )
+
         Image(
             painter = painterResource(dsR.drawable.polygon1),
             contentDescription = stringResource(R.string.app_icon),

presentation/src/main/java/com/london/presentation/feature/category/main/CategoriesScreen.kt

@@ -6,6 +6,7 @@ import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
 import androidx.compose.animation.togetherWith
 import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.fillMaxSize
@@ -19,16 +20,19 @@ import androidx.compose.foundation.lazy.items
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.zIndex
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.london.designsystem.component.NovixChip
 import com.london.designsystem.component.TopBar
 import com.london.designsystem.theme.ThemePreviews
 import com.london.designsystem.utils.string
 import com.london.presentation.R
+import com.london.presentation.shared.BackgroundGradient
 import com.london.presentation.shared.CategoriesItem
 import com.london.presentation.shared.MediaCategory
 import com.london.presentation.shared.genre.MovieGenreUi
@@ -64,23 +68,32 @@ private fun Content(
     state: CategoriesUiState,
     contract: CategoriesContract,
 ) {
-    Column(Modifier.navBarBottomPadding()) {
-        TopBar(
-            title = stringResource(R.string.categories),
-            modifier = Modifier.padding(horizontal = 16.dp, vertical = 12.dp),
-        )
-        CategoriesSelection(
-            onClick = contract::onCategoryClick,
-            selectedCategory = state.selectedCategory,
-            modifier = Modifier.padding(top = 12.dp, bottom = 8.dp),
-        )
-        GenresGrid(
-            state = state,
-            contract = contract,
-            modifier = Modifier
-                .fillMaxSize()
-                .padding(horizontal = 16.dp),
+
+    Box(
+        modifier = Modifier.fillMaxSize()
+    ){
+        BackgroundGradient(
+            modifier = Modifier.align(Alignment.TopStart).zIndex(1f)
         )
+
+        Column(Modifier.navBarBottomPadding()) {
+            TopBar(
+                title = stringResource(R.string.categories),
+                modifier = Modifier.padding(horizontal = 16.dp, vertical = 12.dp),
+            )
+            CategoriesSelection(
+                onClick = contract::onCategoryClick,
+                selectedCategory = state.selectedCategory,
+                modifier = Modifier.padding(top = 12.dp, bottom = 8.dp),
+            )
+            GenresGrid(
+                state = state,
+                contract = contract,
+                modifier = Modifier
+                    .fillMaxSize()
+                    .padding(horizontal = 16.dp),
+            )
+        }
     }
 }