diff --git a/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/components/BottomNavBar.kt b/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/components/BottomNavBar.kt index e8f369e3..a612b830 100644 --- a/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/components/BottomNavBar.kt +++ b/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/components/BottomNavBar.kt @@ -43,7 +43,7 @@ fun BottomNavBar( label = { Text( text = stringResource(item.title), - style = MaterialTheme.typography.labelSmall + style = MaterialTheme.typography.labelMedium ) }, alwaysShowLabel = true, diff --git a/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/components/ExpandedText.kt b/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/components/ExpandedText.kt index 88f026e0..6d7df903 100644 --- a/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/components/ExpandedText.kt +++ b/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/components/ExpandedText.kt @@ -22,8 +22,6 @@ import androidx.compose.ui.text.TextStyle import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.unit.IntSize -import androidx.compose.ui.unit.TextUnit -import androidx.compose.ui.unit.sp @Composable fun ExpandableText( @@ -31,8 +29,7 @@ fun ExpandableText( overFlowText: String, modifier: Modifier = Modifier, minimizedMaxLines: Int = 1, - fontSize: TextUnit = 14.sp, - style: TextStyle = MaterialTheme.typography.bodySmall, + style: TextStyle = MaterialTheme.typography.bodyLarge, textAlign: TextAlign = TextAlign.Start, color: Color = Color.LightGray.copy(alpha = .85f), ) { @@ -71,7 +68,6 @@ fun ExpandableText( maxLines = if (expanded) Int.MAX_VALUE else minimizedMaxLines, overflow = TextOverflow.Ellipsis, onTextLayout = { textLayoutResultState.value = it }, - fontSize = fontSize, style = style, textAlign = textAlign, color = color @@ -97,7 +93,6 @@ fun ExpandableText( cutText = null } .alpha(if (seeMoreOffset != null) 1f else 0f), - fontSize = fontSize, style = style, color = Color.LightGray.copy(alpha = .9f) ) diff --git a/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/components/ItemMovieCast.kt b/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/components/ItemMovieCast.kt index 88f7f168..48f653ad 100644 --- a/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/components/ItemMovieCast.kt +++ b/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/components/ItemMovieCast.kt @@ -12,6 +12,7 @@ import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip import androidx.compose.ui.layout.ContentScale +import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.unit.dp @@ -38,7 +39,7 @@ fun ItemMovieCast(modifier: Modifier = Modifier, actor: Actor) { Text( modifier = Modifier.width(78.dp), text = actor.name ?: "Unknown actor", - style = MaterialTheme.typography.titleMedium, + style = MaterialTheme.typography.headlineSmall, fontSize = 14.sp, overflow = TextOverflow.Ellipsis, textAlign = TextAlign.Center, @@ -49,7 +50,7 @@ fun ItemMovieCast(modifier: Modifier = Modifier, actor: Actor) { Text( modifier = Modifier.width(77.dp), text = actor.character ?: "Unknown character", - style = MaterialTheme.typography.labelSmall, + style = MaterialTheme.typography.labelMedium.copy(fontWeight = FontWeight.Medium), fontSize = 12.sp, color = TextSecondary, overflow = TextOverflow.Ellipsis, diff --git a/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/components/MovieCardDescription.kt b/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/components/MovieCardDescription.kt index ab353ace..f413c9c3 100644 --- a/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/components/MovieCardDescription.kt +++ b/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/components/MovieCardDescription.kt @@ -95,7 +95,7 @@ fun MovieCardDescription( text = movie.title, fontSize = 24.sp, maxLines = 1, - style = MaterialTheme.typography.titleMedium, + style = MaterialTheme.typography.headlineLarge, overflow = TextOverflow.Ellipsis, textAlign = TextAlign.Start, color = dominantColorState.onColor, diff --git a/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/components/MovieCardLandscape.kt b/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/components/MovieCardLandscape.kt index fd51abfc..821c21d3 100644 --- a/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/components/MovieCardLandscape.kt +++ b/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/components/MovieCardLandscape.kt @@ -28,7 +28,6 @@ import androidx.compose.ui.layout.ContentScale import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.unit.dp -import androidx.compose.ui.unit.sp import coil3.compose.AsyncImage import com.kmpalette.loader.NetworkLoader import com.kmpalette.loader.rememberNetworkLoader @@ -112,9 +111,8 @@ fun MovieCardLandscape( Text( modifier = Modifier, text = movie.title ?: stringResource(Res.string.unknown_movie), - fontSize = 18.sp, maxLines = 2, - style = MaterialTheme.typography.titleMedium, + style = MaterialTheme.typography.headlineLarge, overflow = TextOverflow.Ellipsis, textAlign = TextAlign.Start, color = dominantColorState.onColor @@ -151,9 +149,8 @@ fun MovieCardLandscape( Text( modifier = Modifier, text = movie.releaseDate.getReleaseDate().capitalizeEachWord(), - fontSize = 14.sp, maxLines = 1, - style = MaterialTheme.typography.labelSmall, + style = MaterialTheme.typography.bodyMedium, overflow = TextOverflow.Ellipsis, textAlign = TextAlign.Start, color = dominantColorState.onColor diff --git a/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/components/MovieCardPager.kt b/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/components/MovieCardPager.kt index 619077b2..cee0ce89 100644 --- a/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/components/MovieCardPager.kt +++ b/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/components/MovieCardPager.kt @@ -104,13 +104,11 @@ fun MovieCardPager( Text( modifier = Modifier, text = movie.title ?: stringResource(Res.string.unknown_movie), - fontSize = 28.sp, maxLines = 2, - style = MaterialTheme.typography.titleMedium, + style = MaterialTheme.typography.headlineLarge.copy(fontSize = 26.sp), overflow = TextOverflow.Ellipsis, textAlign = TextAlign.Start, color = dominantColorState.onColor, - lineHeight = 30.sp ) movie.voteAverage?.let { diff --git a/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/components/MovieCardPortraitCompact.kt b/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/components/MovieCardPortraitCompact.kt index fa6cf36d..5494ce91 100644 --- a/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/components/MovieCardPortraitCompact.kt +++ b/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/components/MovieCardPortraitCompact.kt @@ -61,7 +61,7 @@ fun MovieCardPortraitCompact( Text( modifier = Modifier.width(145.dp), text = movie.title ?: stringResource(Res.string.unknown_movie), - style = MaterialTheme.typography.bodyLarge, + style = MaterialTheme.typography.headlineSmall, color = MaterialTheme.colorScheme.onSurface, fontSize = 14.sp, maxLines = 1, diff --git a/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/components/MovieRatingSection.kt b/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/components/MovieRatingSection.kt index e901201f..5eabb791 100644 --- a/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/components/MovieRatingSection.kt +++ b/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/components/MovieRatingSection.kt @@ -17,12 +17,13 @@ import androidx.compose.material3.VerticalDivider import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp +import com.vickbt.composeApp.ui.theme.Golden import com.vickbt.shared.resources.Res import com.vickbt.shared.resources.popularity import com.vickbt.shared.resources.rating -import com.vickbt.composeApp.ui.theme.Golden import org.jetbrains.compose.resources.stringResource @Composable @@ -43,15 +44,13 @@ fun MovieRatingSection(popularity: String?, voteAverage: String?) { Text( modifier = Modifier, text = if (popularity.isNullOrEmpty()) "N/A" else popularity, - style = MaterialTheme.typography.titleLarge, - fontSize = 42.sp, + style = MaterialTheme.typography.titleLarge.copy(fontSize = 42.sp), color = MaterialTheme.colorScheme.onSurface, ) Text( text = stringResource(Res.string.popularity), - style = MaterialTheme.typography.titleMedium, - fontSize = 18.sp, + style = MaterialTheme.typography.titleMedium.copy(fontWeight = FontWeight.SemiBold), color = MaterialTheme.colorScheme.onSurface, ) } @@ -80,8 +79,7 @@ fun MovieRatingSection(popularity: String?, voteAverage: String?) { Text( modifier = Modifier, text = if (voteAverage.isNullOrEmpty()) "N/A" else "$voteAverage/5.0", - style = MaterialTheme.typography.titleMedium, - fontSize = 20.sp, + style = MaterialTheme.typography.titleLarge.copy(fontSize = 20.sp), color = MaterialTheme.colorScheme.onSurface, ) } diff --git a/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/components/NavRailBar.kt b/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/components/NavRailBar.kt index 0f211392..bd0d6264 100644 --- a/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/components/NavRailBar.kt +++ b/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/components/NavRailBar.kt @@ -46,7 +46,7 @@ fun NavRailBar( label = { Text( text = stringResource(item.title), - style = MaterialTheme.typography.labelSmall + style = MaterialTheme.typography.labelMedium ) }, colors = NavigationRailItemDefaults.colors( diff --git a/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/components/SectionSeparator.kt b/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/components/SectionSeparator.kt index a1574278..2560f6fa 100644 --- a/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/components/SectionSeparator.kt +++ b/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/components/SectionSeparator.kt @@ -17,7 +17,7 @@ fun SectionSeparator( sectionTitle: String ) { Row( - modifier = modifier.padding(start = 16.dp, end = 16.dp, top = 16.dp, bottom = 8.dp), + modifier = modifier.padding(horizontal = 16.dp, vertical = 4.dp), verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.SpaceBetween, ) { @@ -25,7 +25,7 @@ fun SectionSeparator( modifier = Modifier, text = sectionTitle, color = MaterialTheme.colorScheme.onSurface, - style = MaterialTheme.typography.titleLarge, + style = MaterialTheme.typography.headlineMedium, maxLines = 1, overflow = TextOverflow.Ellipsis ) diff --git a/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/components/appbars/TopAppBar.kt b/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/components/appbars/TopAppBar.kt index 5e79f386..9a94d698 100644 --- a/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/components/appbars/TopAppBar.kt +++ b/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/components/appbars/TopAppBar.kt @@ -19,7 +19,7 @@ fun AppBar(title: String) { colors = TopAppBarDefaults.mediumTopAppBarColors(MaterialTheme.colorScheme.surface), title = { Text( - modifier = Modifier.padding(horizontal = 20.dp, vertical = 8.dp), + modifier = Modifier.padding(horizontal = 16.dp, vertical = 8.dp), text = title, color = MaterialTheme.colorScheme.onSurface, style = MaterialTheme.typography.titleMedium, diff --git a/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/components/preferences/DialogPreferenceSelection.kt b/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/components/preferences/DialogPreferenceSelection.kt index 6bab3182..ca0e29c4 100644 --- a/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/components/preferences/DialogPreferenceSelection.kt +++ b/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/components/preferences/DialogPreferenceSelection.kt @@ -74,9 +74,8 @@ fun DialogPreferenceSelection( Text( modifier = Modifier.clickable { onNegativeClick() }, text = "Cancel".toUpperCase(Locale.current), - style = MaterialTheme.typography.bodyMedium, + style = MaterialTheme.typography.headlineMedium.copy(fontSize = 16.sp), color = MaterialTheme.colorScheme.primary, - fontSize = 16.sp, maxLines = 1, overflow = TextOverflow.Ellipsis, textAlign = TextAlign.Center diff --git a/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/components/preferences/ItemPreferenceOption.kt b/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/components/preferences/ItemPreferenceOption.kt index eb05c9eb..cfd72372 100644 --- a/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/components/preferences/ItemPreferenceOption.kt +++ b/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/components/preferences/ItemPreferenceOption.kt @@ -32,9 +32,8 @@ fun ItemPreferenceOption( Text( modifier = Modifier.fillMaxWidth(), text = optionText, - style = MaterialTheme.typography.bodyMedium, + style = MaterialTheme.typography.titleMedium.copy(fontSize = 18.sp), color = MaterialTheme.colorScheme.onSurface, - fontSize = 18.sp, maxLines = 1, overflow = TextOverflow.Ellipsis, textAlign = TextAlign.Start diff --git a/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/components/preferences/PreferencesGroup.kt b/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/components/preferences/PreferencesGroup.kt index 9d66514a..51971ec7 100644 --- a/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/components/preferences/PreferencesGroup.kt +++ b/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/components/preferences/PreferencesGroup.kt @@ -3,17 +3,13 @@ package com.vickbt.composeApp.ui.components.preferences import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.ColumnScope -import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer -import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding -import androidx.compose.foundation.layout.wrapContentHeight -import androidx.compose.material3.Divider +import androidx.compose.material3.HorizontalDivider import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Text 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.text.style.TextAlign @@ -28,35 +24,23 @@ fun PreferencesGroup( isLast: Boolean = false, content: @Composable ColumnScope.() -> Unit ) { - Column { - Row( - modifier = modifier - .fillMaxWidth() - .wrapContentHeight(), - verticalAlignment = Alignment.CenterVertically - ) { - if (!title.isNullOrEmpty()) { - Spacer(modifier = Modifier.weight(2f)) - - Text( - modifier = Modifier - .weight(8f) - .padding(horizontal = 12.dp), - text = title, - style = MaterialTheme.typography.bodyMedium, - color = MaterialTheme.colorScheme.primary, - fontSize = 16.sp, - maxLines = 1, - overflow = TextOverflow.Ellipsis, - textAlign = TextAlign.Start - ) - } + Column(modifier = modifier) { + if (!title.isNullOrEmpty()) { + Text( + modifier = Modifier.padding(horizontal = 12.dp, vertical = 4.dp), + text = title, + style = MaterialTheme.typography.titleLarge.copy(fontSize = 16.sp), + color = MaterialTheme.colorScheme.primary, + maxLines = 1, + overflow = TextOverflow.Ellipsis, + textAlign = TextAlign.Start + ) } Spacer(modifier = Modifier.height(2.dp)) - Column(content = content, verticalArrangement = Arrangement.spacedBy(2.dp)) + Column(content = content, verticalArrangement = Arrangement.spacedBy(3.dp)) - if (!isLast) Divider(color = Color.Gray.copy(alpha = 0.7f), thickness = 1.dp) + if (!isLast) HorizontalDivider(color = Color.Gray.copy(alpha = 0.7f), thickness = 1.dp) } } diff --git a/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/components/preferences/TextPreference.kt b/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/components/preferences/TextPreference.kt index 84752aa6..2cd5649d 100644 --- a/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/components/preferences/TextPreference.kt +++ b/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/components/preferences/TextPreference.kt @@ -18,7 +18,6 @@ import androidx.compose.ui.graphics.vector.ImageVector import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.unit.dp -import androidx.compose.ui.unit.sp @Composable fun TextPreference( @@ -58,7 +57,6 @@ fun TextPreference( text = title, style = MaterialTheme.typography.titleMedium, color = MaterialTheme.colorScheme.onSurface, - fontSize = 17.sp, maxLines = 1, overflow = TextOverflow.Ellipsis, textAlign = TextAlign.Start @@ -70,9 +68,8 @@ fun TextPreference( .fillMaxWidth() .padding(horizontal = 13.dp), text = subTitle, - style = MaterialTheme.typography.bodyMedium, - color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.6f), - fontSize = 14.sp, + style = MaterialTheme.typography.titleSmall, + color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.8f), maxLines = 1, overflow = TextOverflow.Ellipsis, textAlign = TextAlign.Start diff --git a/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/screens/details/DetailsScreen.kt b/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/screens/details/DetailsScreen.kt index 7dd77e1c..a23459e6 100644 --- a/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/screens/details/DetailsScreen.kt +++ b/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/screens/details/DetailsScreen.kt @@ -9,6 +9,7 @@ import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.wrapContentHeight import androidx.compose.foundation.lazy.LazyRow import androidx.compose.foundation.lazy.items import androidx.compose.foundation.rememberScrollState @@ -32,6 +33,7 @@ import com.kmpalette.loader.rememberNetworkLoader import com.vickbt.composeApp.ui.components.ItemMovieCast import com.vickbt.composeApp.ui.components.MovieCardPortrait import com.vickbt.composeApp.ui.components.MovieRatingSection +import com.vickbt.composeApp.ui.components.SectionSeparator import com.vickbt.composeApp.ui.components.appbars.DetailsAppBar import com.vickbt.composeApp.ui.components.collapsingToolbar.CollapsingToolbarScaffold import com.vickbt.composeApp.ui.components.collapsingToolbar.ScrollStrategy @@ -64,19 +66,20 @@ fun DetailsScreen( val networkLoader = rememberNetworkLoader(httpClient = koinInject()) - val movieDetailsState by viewModel.movieDetailsState.collectAsState() + val movieDetailsUiState by viewModel.movieDetailsState.collectAsState() val scrollState = rememberScrollState() val collapsingScrollState = rememberCollapsingToolbarScaffoldState() Box(modifier = Modifier.fillMaxSize()) { - if (movieDetailsState.isLoading && movieDetailsState.movieDetails == null) { + if (movieDetailsUiState.isLoading && movieDetailsUiState.movieDetails == null) { CircularProgressIndicator(modifier = Modifier.align(Alignment.Center)) - } else if (!movieDetailsState.error.isNullOrEmpty()) { + } else if (!movieDetailsUiState.error.isNullOrEmpty()) { Text( modifier = Modifier.align(Alignment.Center), - text = "Error:\n${movieDetailsState.error}", - textAlign = TextAlign.Center + text = "Error:\n${movieDetailsUiState.error}", + textAlign = TextAlign.Center, + style = MaterialTheme.typography.headlineMedium ) } else { CollapsingToolbarScaffold( @@ -87,7 +90,7 @@ fun DetailsScreen( DetailsAppBar( modifier = Modifier.fillMaxWidth(), collapsingScrollState = collapsingScrollState, - movieDetailsState = movieDetailsState, + movieDetailsState = movieDetailsUiState, networkLoader = networkLoader, onNavigationIconClick = { navigator.navigateUp() }, onShareIconClick = {}, @@ -106,30 +109,29 @@ fun DetailsScreen( verticalArrangement = Arrangement.spacedBy(14.dp) ) { //region Movie Ratings - if (movieDetailsState.movieDetails?.voteAverage != null) { + if (movieDetailsUiState.movieDetails?.voteAverage != null) { MovieRatingSection( - popularity = movieDetailsState.movieDetails?.voteAverage?.getPopularity(), - voteAverage = movieDetailsState.movieDetails?.voteAverage?.getRating() + popularity = movieDetailsUiState.movieDetails?.voteAverage?.getPopularity(), + voteAverage = movieDetailsUiState.movieDetails?.voteAverage?.getRating() ) } //endregion //region Movie Overview - if (!movieDetailsState.movieDetails?.overview.isNullOrEmpty()) { - Text( - modifier = Modifier.padding(horizontal = 16.dp), - text = stringResource(Res.string.overview), - style = MaterialTheme.typography.titleMedium, - fontSize = 20.sp, - color = MaterialTheme.colorScheme.onSurface, + if (!movieDetailsUiState.movieDetails?.overview.isNullOrEmpty()) { + SectionSeparator( + modifier = Modifier + .fillMaxWidth() + .wrapContentHeight(), + sectionTitle = stringResource(Res.string.overview) ) Text( modifier = Modifier .fillMaxWidth() .padding(horizontal = 16.dp), - text = movieDetailsState.movieDetails?.overview ?: "", - style = MaterialTheme.typography.bodySmall, + text = movieDetailsUiState.movieDetails?.overview ?: "", + style = MaterialTheme.typography.bodyLarge, color = MaterialTheme.colorScheme.onSurface, fontSize = 15.sp, textAlign = TextAlign.Start, @@ -139,12 +141,12 @@ fun DetailsScreen( //endregion //region Movie Cast - movieDetailsState.movieCast?.let { cast -> - Text( - modifier = Modifier.padding(horizontal = 16.dp), - text = stringResource(Res.string.cast), - style = MaterialTheme.typography.titleMedium, - fontSize = 20.sp + movieDetailsUiState.movieCast?.let { cast -> + SectionSeparator( + modifier = Modifier + .fillMaxWidth() + .wrapContentHeight(), + sectionTitle = stringResource(Res.string.cast) ) LazyRow( @@ -160,14 +162,13 @@ fun DetailsScreen( //endregion //region Similar Movies - movieDetailsState.similarMovies?.let { + movieDetailsUiState.similarMovies?.let { val similarMovies = it.collectAsLazyPagingItems() - Text( - modifier = Modifier.padding(horizontal = 16.dp), - text = stringResource(Res.string.similar_movies), - style = MaterialTheme.typography.titleMedium, - fontSize = 20.sp, - color = MaterialTheme.colorScheme.onSurface + SectionSeparator( + modifier = Modifier + .fillMaxWidth() + .wrapContentHeight(), + sectionTitle = stringResource(Res.string.similar_movies) ) LazyRow( diff --git a/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/screens/favorites/FavoritesScreen.kt b/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/screens/favorites/FavoritesScreen.kt index c6bb031c..42452b07 100644 --- a/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/screens/favorites/FavoritesScreen.kt +++ b/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/screens/favorites/FavoritesScreen.kt @@ -10,10 +10,16 @@ import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.foundation.lazy.items +import androidx.compose.material3.CircularProgressIndicator +import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Scaffold +import androidx.compose.material3.Text 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.text.style.TextAlign import androidx.compose.ui.unit.dp import androidx.navigation.NavHostController import com.kmpalette.loader.rememberNetworkLoader @@ -32,7 +38,7 @@ fun FavoritesScreen( viewModel: FavoritesViewModel = koinViewModel(), mainPaddingValues: PaddingValues ) { - val favoriteMovies = viewModel.favoriteMoviesState.collectAsState().value + val favoritesUiState by viewModel.favoriteMoviesState.collectAsState() val networkLoader = rememberNetworkLoader(httpClient = koinInject()) @@ -41,17 +47,28 @@ fun FavoritesScreen( topBar = { AppBar(stringResource(Res.string.title_favorites)) } ) { paddingValues -> Box(modifier = Modifier.fillMaxSize().padding(paddingValues)) { - LazyColumn( - modifier = Modifier.fillMaxSize() - .padding(horizontal = 16.dp) - ) { - items(items = favoriteMovies.favoriteMovies ?: emptyList()) { favoriteMovie -> - MovieCardDescription( - modifier = Modifier.fillMaxWidth().height(260.dp).padding(vertical = 4.dp), - movie = favoriteMovie, - networkLoader = networkLoader - ) { movieDetails -> - navigator.navigate("/details/${movieDetails.id}") + if (favoritesUiState.isLoading) { + CircularProgressIndicator(modifier = Modifier.align(Alignment.Center)) + } else if (!favoritesUiState.error.isNullOrEmpty()) { + Text( + modifier = Modifier.align(Alignment.Center), + text = "Error:\n${favoritesUiState.error}", + textAlign = TextAlign.Center, + style = MaterialTheme.typography.headlineMedium + ) + } else { + LazyColumn( + modifier = Modifier.align(Alignment.Center).fillMaxSize() + .padding(horizontal = 16.dp) + ) { + items(items = favoritesUiState.favoriteMovies ?: emptyList()) { favoriteMovie -> + MovieCardDescription( + modifier = Modifier.fillMaxWidth().height(260.dp).padding(vertical = 4.dp), + movie = favoriteMovie, + networkLoader = networkLoader + ) { movieDetails -> + navigator.navigate("/details/${movieDetails.id}") + } } } } diff --git a/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/screens/home/HomeScreen.kt b/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/screens/home/HomeScreen.kt index 2eaaeab7..12dd3813 100644 --- a/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/screens/home/HomeScreen.kt +++ b/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/screens/home/HomeScreen.kt @@ -17,6 +17,7 @@ import androidx.compose.foundation.pager.rememberPagerState import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.verticalScroll import androidx.compose.material3.CircularProgressIndicator +import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Scaffold import androidx.compose.material3.Text import androidx.compose.runtime.Composable @@ -78,7 +79,8 @@ fun HomeScreen( Text( modifier = Modifier.align(Alignment.Center), text = "Error:\n${homeUiState.error}", - textAlign = TextAlign.Center + textAlign = TextAlign.Center, + style = MaterialTheme.typography.headlineMedium ) } else { Column( diff --git a/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/screens/search/SearchScreen.kt b/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/screens/search/SearchScreen.kt index 54f58d2d..e2f282bd 100644 --- a/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/screens/search/SearchScreen.kt +++ b/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/screens/search/SearchScreen.kt @@ -41,6 +41,7 @@ import app.cash.paging.compose.collectAsLazyPagingItems import com.vickbt.composeApp.ui.components.MovieCardPortrait import com.vickbt.composeApp.utils.WindowSize import com.vickbt.shared.resources.Res +import com.vickbt.shared.resources.back import com.vickbt.shared.resources.title_search import org.jetbrains.compose.resources.stringResource import org.koin.compose.viewmodel.koinViewModel @@ -69,7 +70,7 @@ fun SearchScreen( Text( text = stringResource(Res.string.title_search), fontSize = 18.sp, - style = MaterialTheme.typography.labelMedium, + style = MaterialTheme.typography.titleMedium, maxLines = 1, overflow = TextOverflow.Ellipsis, textAlign = TextAlign.Start @@ -83,7 +84,7 @@ fun SearchScreen( }) { Icon( imageVector = Icons.AutoMirrored.Rounded.ArrowBack, - contentDescription = "Go back" + contentDescription = stringResource(Res.string.back) ) } } else { @@ -116,7 +117,8 @@ fun SearchScreen( Text( modifier = Modifier.align(Alignment.Center), text = "Error:\n${searchUiState.error}", - textAlign = TextAlign.Center + textAlign = TextAlign.Center, + style = MaterialTheme.typography.headlineMedium ) } else { searchUiState.movieResults?.let { movieResults -> diff --git a/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/theme/Theme.kt b/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/theme/Theme.kt index ef164d24..38833e8e 100644 --- a/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/theme/Theme.kt +++ b/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/theme/Theme.kt @@ -7,24 +7,47 @@ import androidx.compose.material3.MaterialTheme import androidx.compose.material3.darkColorScheme import androidx.compose.material3.lightColorScheme import androidx.compose.runtime.Composable +import androidx.compose.ui.graphics.Color import coil3.annotation.ExperimentalCoilApi import coil3.compose.setSingletonImageLoaderFactory import com.vickbt.composeApp.utils.getAsyncImageLoader private val DarkColorPalette = darkColorScheme( - primary = DarkPrimaryColor, - secondary = DarkPrimaryColor, - surface = DarkSurface, - onSurface = DarkTextPrimary, - background = DarkSurface + primary = Color(0xFFE50914), // Notflix Red + onPrimary = Color(0xFFFFFFFF), // White + primaryContainer = Color(0xFF7D020A), // Darker Red for buttons + onPrimaryContainer = Color(0xFFFFFFFF), // White on dark red + + secondary = Color(0xFF121212), // Notflix Background Dark Gray + onSecondary = Color(0xFFE0E0E0), // Light Gray Text + + background = Color(0xFF000000), // Black + onBackground = Color(0xFFE0E0E0), // Light Gray Text + + surface = Color(0xFF121212), // Dark Gray + onSurface = Color(0xFFE0E0E0), // Light Gray Text + + error = Color(0xFFCF6679), // Default Material Red + onError = Color(0xFFFFFFFF) // White on Error ) private val LightColorPalette = lightColorScheme( - primary = PrimaryColor, - secondary = PrimaryColor, - surface = Surface, - onSurface = TextPrimary, - background = Surface + primary = Color(0xFFE50914), // Notflix Red + onPrimary = Color(0xFFFFFFFF), // White on Red + primaryContainer = Color(0xFFFFDAD5), // Light Red for containers + onPrimaryContainer = Color(0xFF410003), // Dark Red on Light Red + + secondary = Color(0xFFF5F5F5), // Light Gray for background and surfaces + onSecondary = Color(0xFF121212), // Dark Gray text on Light Gray + + background = Color(0xFFFFFFFF), // Pure White Background + onBackground = Color(0xFF121212), // Dark Gray Text + + surface = Color(0xFFF5F5F5), // Light Gray Surface + onSurface = Color(0xFF121212), // Dark Gray Text + + error = Color(0xFFB3261E), // Material's Default Red + onError = Color(0xFFFFFFFF) // White on Error ) @Composable diff --git a/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/theme/Type.kt b/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/theme/Type.kt index 27da4c14..a3fa9a68 100644 --- a/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/theme/Type.kt +++ b/composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/theme/Type.kt @@ -12,44 +12,98 @@ import org.jetbrains.compose.resources.Font @Composable internal fun Typography(): Typography { - val Nunito = FontFamily(Font(Res.font.nunito)) + val nunito = FontFamily(Font(Res.font.nunito)) return Typography( - titleLarge = TextStyle( - fontFamily = Nunito, + displayLarge = TextStyle( + fontFamily = nunito, + fontWeight = FontWeight.Bold, + fontSize = 57.sp, + lineHeight = 64.sp + ), + displayMedium = TextStyle( + fontFamily = nunito, + fontWeight = FontWeight.Bold, + fontSize = 45.sp, + lineHeight = 52.sp + ), + displaySmall = TextStyle( + fontFamily = nunito, + fontWeight = FontWeight.Medium, + fontSize = 36.sp, + lineHeight = 44.sp + ), + headlineLarge = TextStyle( + fontFamily = nunito, fontWeight = FontWeight.Bold, fontSize = 24.sp, - lineHeight = 28.sp, - letterSpacing = 0.sp, + lineHeight = 40.sp ), - - titleMedium = TextStyle( - fontFamily = Nunito, + headlineMedium = TextStyle( + fontFamily = nunito, + fontWeight = FontWeight.SemiBold, + fontSize = 20.sp, + lineHeight = 36.sp + ), + headlineSmall = TextStyle( + fontFamily = nunito, fontWeight = FontWeight.SemiBold, + fontSize = 18.sp, + lineHeight = 32.sp + ), + titleLarge = TextStyle( + fontFamily = nunito, + fontWeight = FontWeight.Bold, + fontSize = 22.sp, + lineHeight = 28.sp + ), + titleMedium = TextStyle( + fontFamily = nunito, + fontWeight = FontWeight.Bold, fontSize = 16.sp, - lineHeight = 24.sp, - letterSpacing = 0.15.sp, + lineHeight = 24.sp + ), + titleSmall = TextStyle( + fontFamily = nunito, + fontWeight = FontWeight.Medium, + fontSize = 14.sp, + lineHeight = 20.sp ), - bodyLarge = TextStyle( - fontFamily = Nunito, - fontWeight = FontWeight.Bold, + fontFamily = nunito, + fontWeight = FontWeight.Normal, fontSize = 16.sp, - lineHeight = 24.sp, - letterSpacing = 0.15.sp, + lineHeight = 24.sp ), - bodyMedium = TextStyle( - fontFamily = Nunito, + fontFamily = nunito, + fontWeight = FontWeight.Normal, + fontSize = 14.sp, + lineHeight = 20.sp + ), + bodySmall = TextStyle( + fontFamily = nunito, + fontWeight = FontWeight.Normal, + fontSize = 12.sp, + lineHeight = 16.sp + ), + labelLarge = TextStyle( + fontFamily = nunito, fontWeight = FontWeight.Medium, - fontSize = 16.sp, - lineHeight = 28.sp, - letterSpacing = 0.15.sp, + fontSize = 14.sp, + lineHeight = 20.sp + ), + labelMedium = TextStyle( + fontFamily = nunito, + fontWeight = FontWeight.SemiBold, + fontSize = 12.sp, + lineHeight = 16.sp ), - labelSmall = TextStyle( - fontFamily = Nunito, - fontWeight = FontWeight.SemiBold + fontFamily = nunito, + fontWeight = FontWeight.Medium, + fontSize = 11.sp, + lineHeight = 16.sp ) ) }