Update the app UI design

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,

composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/components/ExpandedText.kt

@@ -22,17 +22,14 @@ 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(
     text: String,
     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)
             )

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,

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,

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

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 {

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,

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,
             )
         }

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(

composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/components/SectionSeparator.kt

@@ -17,15 +17,15 @@ 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,
     ) {
         Text(
             modifier = Modifier,
             text = sectionTitle,
             color = MaterialTheme.colorScheme.onSurface,
-            style = MaterialTheme.typography.titleLarge,
+            style = MaterialTheme.typography.headlineMedium,
             maxLines = 1,
             overflow = TextOverflow.Ellipsis
         )

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,

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

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

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)
     }
 }

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