From a57b359186a3a5470534b4a364f4b3d1b3ea70e6 Mon Sep 17 00:00:00 2001 From: Kingkor Roy Tirtho Date: Sun, 5 Jul 2026 15:45:49 +0600 Subject: [PATCH] feat: replace IconButton with GhostIconButton in PlayerQueueContent and PlayableCard for visual consistency --- .../core/ui/component/cards/PlayableCard.kt | 14 +++++++------- .../spotube/modules/shell/AppExpandedPlayer.kt | 2 ++ .../spotube/modules/shell/AppLargePlayer.kt | 18 +++++++++++++++++- .../shell/player_queue/PlayerQueueContent.kt | 10 +++++----- 4 files changed, 31 insertions(+), 13 deletions(-) diff --git a/composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/core/ui/component/cards/PlayableCard.kt b/composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/core/ui/component/cards/PlayableCard.kt index 105757fe..cf5cfd5b 100644 --- a/composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/core/ui/component/cards/PlayableCard.kt +++ b/composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/core/ui/component/cards/PlayableCard.kt @@ -33,9 +33,9 @@ import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.width +import androidx.compose.foundation.shape.CircleShape import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material3.Icon -import dev.krtirtho.spotube.core.ui.base.IconButton import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Scaffold import androidx.compose.runtime.Composable @@ -55,8 +55,8 @@ import dev.krtirtho.spotube.core.ui.misc.TextWithShimmer import dev.krtirtho.spotube.core.ui.misc.shimmerApply import dev.krtirtho.spotube.resources.iconsax.Iconsax import dev.krtirtho.spotube.resources.iconsax.IconsaxAddSquare -import dev.krtirtho.spotube.resources.iconsax.IconsaxPauseCircle -import dev.krtirtho.spotube.resources.iconsax.Play +import dev.krtirtho.spotube.resources.iconsax.IconsaxPause +import dev.krtirtho.spotube.resources.iconsax.IconsaxPlay @Composable fun PlayableCard( @@ -108,7 +108,7 @@ fun PlayableCard( SecondaryIconButton( onClick = onAddToQueue, modifier = Modifier.size(30.dp), - shape = RoundedCornerShape(6.dp) + shape = CircleShape, ) { Icon( imageVector = Iconsax.IconsaxAddSquare, @@ -121,12 +121,12 @@ fun PlayableCard( PrimaryIconButton( onClick = onPlay, modifier = Modifier.size(30.dp), - shape = RoundedCornerShape(6.dp) + shape = CircleShape, ) { Icon( imageVector = if (isPlaying) { - Iconsax.IconsaxPauseCircle - } else Iconsax.Play, + Iconsax.IconsaxPause + } else Iconsax.IconsaxPlay, contentDescription = "Play", ) } diff --git a/composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/modules/shell/AppExpandedPlayer.kt b/composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/modules/shell/AppExpandedPlayer.kt index 23173fa1..dbe796a7 100644 --- a/composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/modules/shell/AppExpandedPlayer.kt +++ b/composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/modules/shell/AppExpandedPlayer.kt @@ -530,6 +530,8 @@ fun AppExpandedPlayer( containerDarker = MaterialTheme.colorScheme.onSurface, containerLighter = MaterialTheme.colorScheme.onSurface, containerPressed = MaterialTheme.colorScheme.onSurfaceVariant, + shadow = MaterialTheme.colorScheme.onSurfaceVariant, + border = MaterialTheme.colorScheme.onSurfaceVariant ), modifier = Modifier .size(72.dp), diff --git a/composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/modules/shell/AppLargePlayer.kt b/composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/modules/shell/AppLargePlayer.kt index ada2fc2a..957c020e 100644 --- a/composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/modules/shell/AppLargePlayer.kt +++ b/composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/modules/shell/AppLargePlayer.kt @@ -28,6 +28,7 @@ import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.width +import androidx.compose.foundation.shape.CircleShape import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material3.Icon import androidx.compose.material3.MaterialTheme @@ -54,9 +55,11 @@ import dev.krtirtho.spotube.core.audioplayer.AudioPlayerQueue import dev.krtirtho.spotube.core.audioplayer.LoopState import dev.krtirtho.spotube.core.audioplayer.QueueEntry import dev.krtirtho.spotube.core.ui.base.GhostIconButton +import dev.krtirtho.spotube.core.ui.base.IconButton import dev.krtirtho.spotube.core.ui.base.Slider import dev.krtirtho.spotube.core.ui.base.VariableIconButton import dev.krtirtho.spotube.core.ui.base.VariableIconButtonVariant +import dev.krtirtho.spotube.core.ui.base.rememberButtonColors import dev.krtirtho.spotube.modules.downloads.DownloadProgressIcon import dev.krtirtho.spotube.modules.downloads.DownloadsViewModel import dev.krtirtho.spotube.modules.saved_tracks.SAVED_TRACKS_COLLECTION_ID @@ -274,10 +277,23 @@ fun AppLargePlayer( GhostIconButton(onClick = ::onSkipPrevious) { Icon(Iconsax.IconsaxPrevious, contentDescription = "Previous") } - GhostIconButton(onClick = ::onPlayPause, modifier = Modifier.size(44.dp)) { + IconButton( + onClick = ::onPlayPause, + colors = rememberButtonColors().copy( + containerDarker = MaterialTheme.colorScheme.onSurface, + containerLighter = MaterialTheme.colorScheme.onSurface, + containerPressed = MaterialTheme.colorScheme.onSurfaceVariant, + shadow = MaterialTheme.colorScheme.onSurfaceVariant, + border = MaterialTheme.colorScheme.onSurfaceVariant + ), + modifier = Modifier + .size(50.dp), + shape = CircleShape, + ) { Icon( if (playerUiState.isPlaying) Iconsax.IconsaxPause else Iconsax.IconsaxPlay, contentDescription = if (playerUiState.isPlaying) "Pause" else "Play or pause", + tint = MaterialTheme.colorScheme.surface, ) } GhostIconButton(onClick = ::onSkipNext) { diff --git a/composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/modules/shell/player_queue/PlayerQueueContent.kt b/composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/modules/shell/player_queue/PlayerQueueContent.kt index f6a9a4e7..20b60180 100644 --- a/composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/modules/shell/player_queue/PlayerQueueContent.kt +++ b/composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/modules/shell/player_queue/PlayerQueueContent.kt @@ -37,21 +37,19 @@ import androidx.compose.foundation.lazy.items import androidx.compose.foundation.lazy.rememberLazyListState import androidx.compose.material3.DropdownMenu import androidx.compose.material3.DropdownMenuItem -import androidx.compose.material3.FilledTonalIconButton import androidx.compose.material3.Icon -import androidx.compose.material3.IconButton import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Surface import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.LaunchedEffect +import androidx.compose.runtime.collectAsState import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableIntStateOf import androidx.compose.runtime.mutableStateListOf import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.runtime.setValue -import androidx.compose.runtime.collectAsState import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip @@ -63,6 +61,8 @@ import compose.icons.FeatherIcons import compose.icons.feathericons.MoreVertical import dev.krtirtho.spotube.core.audioplayer.QueueEntry import dev.krtirtho.spotube.core.di.rememberLogger +import dev.krtirtho.spotube.core.ui.base.GhostIconButton +import dev.krtirtho.spotube.core.ui.base.SecondaryIconButton import dev.krtirtho.spotube.core.ui.base.TextField import dev.krtirtho.spotube.resources.iconsax.Iconsax import dev.krtirtho.spotube.resources.iconsax.IconsaxFilterSearch @@ -186,7 +186,7 @@ fun PlayerQueueContent( singleLine = true, modifier = Modifier.weight(1f), ) - FilledTonalIconButton( + SecondaryIconButton( onClick = viewModel::clearQueue, shape = MaterialTheme.shapes.small, ) { @@ -333,7 +333,7 @@ private fun QueueItemRow( Spacer(modifier = Modifier.width(4.dp)) Box { - IconButton( + GhostIconButton( onClick = { showMenu = true }, modifier = Modifier.size(36.dp), ) {