Small UI tweaks

common/ui/compose/src/commonMain/kotlin/app/tivi/common/compose/theme/Shape.kt

@@ -3,6 +3,7 @@
 
 package app.tivi.common.compose.theme
 
+import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material3.Shapes
 
-val TiviShapes = Shapes()
+val TiviShapes = Shapes(small = CircleShape)

common/ui/compose/src/commonMain/kotlin/app/tivi/common/compose/theme/Type.kt

@@ -5,13 +5,13 @@ package app.tivi.common.compose.theme
 
 import androidx.compose.material3.Typography
 import androidx.compose.runtime.Composable
-import app.tivi.common.ui.resources.InterFontFamily
+import app.tivi.common.ui.resources.DmSansFontFamily
 
 val TiviTypography: Typography
   @Composable get() {
     // Eugh, this is gross but there is no defaultFontFamily property in M3
     val default = Typography()
-    val fontFamily = InterFontFamily
+    val fontFamily = DmSansFontFamily
     return Typography(
       displayLarge = default.displayLarge.copy(fontFamily = fontFamily),
       displayMedium = default.displayMedium.copy(fontFamily = fontFamily),

common/ui/compose/src/commonMain/kotlin/app/tivi/common/compose/ui/IconButtonScrim.kt

@@ -21,11 +21,13 @@ fun ScrimmedIconButton(
   showScrim: Boolean,
   onClick: () -> Unit,
   modifier: Modifier = Modifier,
+  enabled: Boolean = true,
   invertThemeOnScrim: Boolean = true,
   icon: @Composable () -> Unit,
 ) {
   IconButton(
     onClick = onClick,
+    enabled = enabled,
     modifier = modifier,
   ) {
     if (invertThemeOnScrim) {
@@ -46,7 +48,7 @@ fun ScrimmedIconButton(
 private fun ScrimSurface(
   modifier: Modifier = Modifier,
   showScrim: Boolean = true,
-  alpha: Float = 0.3f,
+  alpha: Float = 0.5f,
   icon: @Composable () -> Unit,
 ) {
   Surface(

common/ui/compose/src/commonMain/kotlin/app/tivi/common/compose/ui/RefreshButton.kt

@@ -20,8 +20,10 @@ fun RefreshButton(
   refreshing: Boolean,
   onClick: () -> Unit,
   modifier: Modifier = Modifier,
+  showScrim: Boolean = false,
 ) {
-  IconButton(
+  ScrimmedIconButton(
+    showScrim = showScrim,
     onClick = onClick,
     enabled = !refreshing,
     modifier = modifier,

common/ui/resources/fonts/src/commonMain/kotlin/app/tivi/common/ui/resources/Fonts.kt

@@ -17,10 +17,9 @@ expect fun font(
   style: FontStyle = FontStyle.Normal,
 ): Font
 
-val InterFontFamily: FontFamily
+val DmSansFontFamily: FontFamily
   @Composable get() = FontFamily(
-    font(fontName = "Inter", resourceId = "inter_light", weight = FontWeight.Light),
-    font(fontName = "Inter", resourceId = "inter_regular", weight = FontWeight.Normal),
-    font(fontName = "Inter", resourceId = "inter_medium", weight = FontWeight.Medium),
-    font(fontName = "Inter", resourceId = "inter_bold", weight = FontWeight.Bold),
+    font(fontName = "DM Sans", resourceId = "dm_sans_regular", weight = FontWeight.Normal),
+    font(fontName = "DM Sans", resourceId = "dm_sans_medium", weight = FontWeight.Medium),
+    font(fontName = "DM Sans", resourceId = "dm_sans_bold", weight = FontWeight.Bold),
   )

ios-app/Tivi/Tivi.xcodeproj/project.pbxproj

@@ -10,10 +10,9 @@
 		38137D702A55BA8A00A687CC /* AppAuth in Frameworks */ = {isa = PBXBuildFile; productRef = 38137D6F2A55BA8A00A687CC /* AppAuth */; };
 		38137D722A55D6E200A687CC /* Auth.swift in Sources */ = {isa = PBXBuildFile; fileRef = 38137D712A55D6E200A687CC /* Auth.swift */; };
 		38137D772A584D1900A687CC /* Settings.bundle in Resources */ = {isa = PBXBuildFile; fileRef = 38137D762A584D1900A687CC /* Settings.bundle */; };
-		388C5D782A6989B600A858D6 /* inter_bold.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 388C5D762A69896300A858D6 /* inter_bold.ttf */; };
-		388C5D792A6989B600A858D6 /* inter_regular.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 388C5D772A69896400A858D6 /* inter_regular.ttf */; };
-		388C5D7A2A6989B600A858D6 /* inter_medium.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 388C5D752A69896300A858D6 /* inter_medium.ttf */; };
-		388C5D7B2A6989B600A858D6 /* inter_light.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 388C5D742A69896300A858D6 /* inter_light.ttf */; };
+		832E820B2ADF2404006728FE /* dm_sans_bold.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 832E82092ADF20F4006728FE /* dm_sans_bold.ttf */; };
+		832E820C2ADF2404006728FE /* dm_sans_medium.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 832E820A2ADF20F4006728FE /* dm_sans_medium.ttf */; };
+		832E820D2ADF2404006728FE /* dm_sans_regular.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 832E82082ADF20F4006728FE /* dm_sans_regular.ttf */; };
 		833349382A4CCCEE00F464FE /* TiviApp.swift in Sources */ = {isa = PBXBuildFile; fileRef = 833349372A4CCCEE00F464FE /* TiviApp.swift */; };
 		8333493A2A4CCCEE00F464FE /* ContentView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 833349392A4CCCEE00F464FE /* ContentView.swift */; };
 		8333493C2A4CCCEF00F464FE /* Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 8333493B2A4CCCEF00F464FE /* Assets.xcassets */; };
@@ -27,10 +26,9 @@
 		38137D712A55D6E200A687CC /* Auth.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Auth.swift; sourceTree = "<group>"; };
 		38137D762A584D1900A687CC /* Settings.bundle */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.plug-in"; path = Settings.bundle; sourceTree = "<group>"; };
 		38282FFD2A4F318E00E7929E /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist; path = Info.plist; sourceTree = "<group>"; };
-		388C5D742A69896300A858D6 /* inter_light.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; name = inter_light.ttf; path = ../../common/ui/resources/fonts/src/commonMain/resources/font/inter_light.ttf; sourceTree = SOURCE_ROOT; };
-		388C5D752A69896300A858D6 /* inter_medium.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; name = inter_medium.ttf; path = ../../common/ui/resources/fonts/src/commonMain/resources/font/inter_medium.ttf; sourceTree = SOURCE_ROOT; };
-		388C5D762A69896300A858D6 /* inter_bold.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; name = inter_bold.ttf; path = ../../common/ui/resources/fonts/src/commonMain/resources/font/inter_bold.ttf; sourceTree = SOURCE_ROOT; };
-		388C5D772A69896400A858D6 /* inter_regular.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; name = inter_regular.ttf; path = ../../common/ui/resources/fonts/src/commonMain/resources/font/inter_regular.ttf; sourceTree = SOURCE_ROOT; };
+		832E82082ADF20F4006728FE /* dm_sans_regular.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; name = dm_sans_regular.ttf; path = ../../../../common/ui/resources/fonts/src/commonMain/resources/font/dm_sans_regular.ttf; sourceTree = "<group>"; };
+		832E82092ADF20F4006728FE /* dm_sans_bold.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; name = dm_sans_bold.ttf; path = ../../../../common/ui/resources/fonts/src/commonMain/resources/font/dm_sans_bold.ttf; sourceTree = "<group>"; };
+		832E820A2ADF20F4006728FE /* dm_sans_medium.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; name = dm_sans_medium.ttf; path = ../../../../common/ui/resources/fonts/src/commonMain/resources/font/dm_sans_medium.ttf; sourceTree = "<group>"; };
 		833349342A4CCCEE00F464FE /* Tivi dev.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = "Tivi dev.app"; sourceTree = BUILT_PRODUCTS_DIR; };
 		833349372A4CCCEE00F464FE /* TiviApp.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TiviApp.swift; sourceTree = "<group>"; };
 		833349392A4CCCEE00F464FE /* ContentView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ContentView.swift; sourceTree = "<group>"; };
@@ -56,10 +54,9 @@
 		3882F6342A6162EE00E03704 /* font */ = {
 			isa = PBXGroup;
 			children = (
-				388C5D762A69896300A858D6 /* inter_bold.ttf */,
-				388C5D752A69896300A858D6 /* inter_medium.ttf */,
-				388C5D772A69896400A858D6 /* inter_regular.ttf */,
-				388C5D742A69896300A858D6 /* inter_light.ttf */,
+				832E82092ADF20F4006728FE /* dm_sans_bold.ttf */,
+				832E820A2ADF20F4006728FE /* dm_sans_medium.ttf */,
+				832E82082ADF20F4006728FE /* dm_sans_regular.ttf */,
 			);
 			path = font;
 			sourceTree = "<group>";
@@ -182,14 +179,13 @@
 			isa = PBXResourcesBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
+				832E820B2ADF2404006728FE /* dm_sans_bold.ttf in Resources */,
+				832E820C2ADF2404006728FE /* dm_sans_medium.ttf in Resources */,
+				832E820D2ADF2404006728FE /* dm_sans_regular.ttf in Resources */,
 				38137D772A584D1900A687CC /* Settings.bundle in Resources */,
 				8333493F2A4CCCEF00F464FE /* Preview Assets.xcassets in Resources */,
 				8333493C2A4CCCEF00F464FE /* Assets.xcassets in Resources */,
 				83AB60062A520078007FC216 /* GoogleService-Info.plist in Resources */,
-				388C5D7B2A6989B600A858D6 /* inter_light.ttf in Resources */,
-				388C5D792A6989B600A858D6 /* inter_regular.ttf in Resources */,
-				388C5D7A2A6989B600A858D6 /* inter_medium.ttf in Resources */,
-				388C5D782A6989B600A858D6 /* inter_bold.ttf in Resources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};

ui/show/details/src/commonMain/kotlin/app/tivi/showdetails/details/ShowDetails.kt

@@ -69,6 +69,7 @@ import androidx.compose.material3.Text
 import androidx.compose.material3.TopAppBar
 import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.material3.TopAppBarScrollBehavior
+import androidx.compose.material3.surfaceColorAtElevation
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.LaunchedEffect
@@ -81,13 +82,16 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.ColorFilter
+import androidx.compose.ui.graphics.RectangleShape
 import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.semantics.contentDescription
 import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.max
+import androidx.compose.ui.unit.sp
 import app.tivi.common.compose.Layout
 import app.tivi.common.compose.LocalStrings
 import app.tivi.common.compose.LocalTiviTextCreator
@@ -101,6 +105,9 @@ import app.tivi.common.compose.ui.Backdrop
 import app.tivi.common.compose.ui.ExpandingText
 import app.tivi.common.compose.ui.PosterCard
 import app.tivi.common.compose.ui.RefreshButton
+import app.tivi.common.compose.ui.ScrimmedIconButton
+import app.tivi.common.compose.ui.copy
+import app.tivi.common.compose.ui.plus
 import app.tivi.data.compoundmodels.EpisodeWithSeason
 import app.tivi.data.compoundmodels.RelatedShowEntryWithShow
 import app.tivi.data.compoundmodels.SeasonWithEpisodesAndWatches
@@ -198,12 +205,12 @@ internal fun ShowDetails(
     }
   }
 
-  val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior()
+  val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior()
 
   Scaffold(
     topBar = {
       ShowDetailsAppBar(
-        title = viewState.show.title ?: "",
+        title = null,
         isRefreshing = viewState.refreshing,
         onNavigateUp = navigateUp,
         onRefresh = refresh,
@@ -239,7 +246,8 @@ internal fun ShowDetails(
     // The nav bar is handled by the root Scaffold
     contentWindowInsets = ScaffoldDefaults.contentWindowInsets
       .exclude(WindowInsets.navigationBars),
-    modifier = modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
+    modifier = modifier
+      .nestedScroll(scrollBehavior.nestedScrollConnection),
   ) { contentPadding ->
     Surface(modifier = Modifier.bodyWidth()) {
       ShowDetailsScrollingContent(
@@ -290,22 +298,34 @@ private fun ShowDetailsScrollingContent(
 
   LazyColumn(
     state = listState,
-    contentPadding = contentPadding,
+    contentPadding = contentPadding.copy(copyTop = false),
     modifier = modifier,
     flingBehavior = rememberTiviFlingBehavior(),
   ) {
     item(key = "backdrop") {
       Backdrop(
         imageModel = show.asImageModel(ImageType.BACKDROP),
+        shape = RectangleShape,
         modifier = Modifier
-          .padding(horizontal = bodyMargin, vertical = gutter)
           .fillMaxWidth()
-          .aspectRatio(16f / 10),
+          .aspectRatio(16f / 11),
       )
     }
 
     item {
-      Spacer(modifier = Modifier.height(max(gutter, bodyMargin)))
+      val title = show.title?.takeIf { it.isNotEmpty() }
+      if (title != null) {
+        Text(
+          text = title,
+          style = MaterialTheme.typography.displaySmall,
+          letterSpacing = (-1).sp,
+          lineHeight = 36.sp,
+          fontWeight = FontWeight.Bold,
+          modifier = Modifier
+            .padding(horizontal = bodyMargin, vertical = max(gutter, bodyMargin))
+            .fillMaxWidth(),
+        )
+      }
     }
 
     item(key = "poster_info") {
@@ -951,19 +971,27 @@ private fun SeasonDropdownMenu(
   }
 }
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 private fun ShowDetailsAppBar(
-  title: String,
+  title: String?,
   isRefreshing: Boolean,
   onNavigateUp: () -> Unit,
   onRefresh: () -> Unit,
   modifier: Modifier = Modifier,
-  scrollBehavior: TopAppBarScrollBehavior? = null,
+  scrollBehavior: TopAppBarScrollBehavior,
 ) {
   TopAppBar(
-    title = { Text(text = title) },
+    title = {
+      if (title != null) {
+        Text(text = title)
+      }
+    },
     navigationIcon = {
-      IconButton(onClick = onNavigateUp) {
+      ScrimmedIconButton(
+        showScrim = scrollBehavior.state.contentOffset > -4,
+        onClick = onNavigateUp,
+      ) {
         Icon(
           imageVector = Icons.Default.ArrowBack,
           contentDescription = LocalStrings.current.cdNavigateUp,
@@ -972,10 +1000,15 @@ private fun ShowDetailsAppBar(
     },
     actions = {
       RefreshButton(
-        onClick = onRefresh,
+        showScrim = scrollBehavior.state.contentOffset > -4,
         refreshing = !isRefreshing,
+        onClick = onRefresh,
       )
     },
+    colors = TopAppBarDefaults.topAppBarColors(
+      containerColor = MaterialTheme.colorScheme.surface.copy(alpha = 0f),
+      scrolledContainerColor = MaterialTheme.colorScheme.surfaceColorAtElevation(4.dp),
+    ),
     scrollBehavior = scrollBehavior,
     windowInsets = TopAppBarDefaults.windowInsets
       .only(WindowInsetsSides.Horizontal + WindowInsetsSides.Top),