feat(ui): use M3 expressive buttons

2025-11-14 18:37:06 +05:30
parent 46589079d2
commit b6c8f4e743
10 changed files with 61 additions and 11 deletions
--- a/app/src/foss/java/org/nsh07/pomodoro/billing/TomatoPlusPaywallDialog.kt
+++ b/app/src/foss/java/org/nsh07/pomodoro/billing/TomatoPlusPaywallDialog.kt
@@ -26,6 +26,8 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme.colorScheme
 import androidx.compose.material3.MaterialTheme.typography
@@ -41,6 +43,7 @@ import androidx.compose.ui.unit.dp
 import org.nsh07.pomodoro.R
 import org.nsh07.pomodoro.ui.theme.AppFonts.robotoFlexTopBar

+@OptIn(ExperimentalMaterial3ExpressiveApi::class)
@Composable
 fun TomatoPlusPaywallDialog(
    isPlus: Boolean,
@@ -77,7 +80,10 @@ fun TomatoPlusPaywallDialog(
                modifier = Modifier.padding(horizontal = 24.dp)
            )
            Spacer(Modifier.height(16.dp))
-            Button(onClick = { uriHandler.openUri("https://coff.ee/nsh07") }) {
+            Button(
+                onClick = { uriHandler.openUri("https://coff.ee/nsh07") },
+                shapes = ButtonDefaults.shapes()
+            ) {
                Text(stringResource(R.string.bmc))
            }
        }
--- a/app/src/foss/java/org/nsh07/pomodoro/ui/settingsScreen/components/AboutButtons.kt
+++ b/app/src/foss/java/org/nsh07/pomodoro/ui/settingsScreen/components/AboutButtons.kt
@@ -23,6 +23,8 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.size
 import androidx.compose.material3.Button
 import androidx.compose.material3.ButtonColors
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
 import androidx.compose.material3.Icon
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -34,6 +36,7 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import org.nsh07.pomodoro.R

+@OptIn(ExperimentalMaterial3ExpressiveApi::class)
@Composable
 fun TopButton(
    buttonColors: ButtonColors,
@@ -43,6 +46,7 @@ fun TopButton(
    Button(
        colors = buttonColors,
        onClick = { uriHandler.openUri("https://coff.ee/nsh07") },
+        shapes = ButtonDefaults.shapes(),
        modifier = modifier
    ) {
        Row(
@@ -60,6 +64,7 @@ fun TopButton(
    }
 }

+@OptIn(ExperimentalMaterial3ExpressiveApi::class)
@Composable
 fun BottomButton(
    buttonColors: ButtonColors,
@@ -69,6 +74,7 @@ fun BottomButton(
    Button(
        colors = buttonColors,
        onClick = { uriHandler.openUri("https://hosted.weblate.org/engage/tomato/") },
+        shapes = ButtonDefaults.shapes(),
        modifier = modifier
    ) {
        Row(
--- a/app/src/main/java/org/nsh07/pomodoro/ui/settingsScreen/components/AboutCard.kt
+++ b/app/src/main/java/org/nsh07/pomodoro/ui/settingsScreen/components/AboutCard.kt
@@ -29,8 +29,10 @@ import androidx.compose.foundation.layout.size
 import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.Card
 import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
+import androidx.compose.material3.IconButtonDefaults
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.MaterialTheme.colorScheme
 import androidx.compose.material3.MaterialTheme.shapes
@@ -48,6 +50,7 @@ import org.nsh07.pomodoro.R
 import org.nsh07.pomodoro.ui.theme.AppFonts.robotoFlexTopBar

 // Taken from https://github.com/shub39/Grit/blob/master/app/src/main/java/com/shub39/grit/core/presentation/settings/ui/component/AboutApp.kt
+@OptIn(ExperimentalMaterial3ExpressiveApi::class)
@Composable
 fun AboutCard(
    isPlus: Boolean,
@@ -92,7 +95,8 @@ fun AboutCard(
                IconButton(
                    onClick = {
                        Toast.makeText(context, "Coming soon...", Toast.LENGTH_SHORT).show()
-                    }
+                    },
+                    shapes = IconButtonDefaults.shapes()
                ) {
                    Icon(
                        painterResource(R.drawable.discord),
@@ -102,7 +106,8 @@ fun AboutCard(
                }

                IconButton(
-                    onClick = { uriHandler.openUri("https://github.com/nsh07/Tomato") }
+                    onClick = { uriHandler.openUri("https://github.com/nsh07/Tomato") },
+                    shapes = IconButtonDefaults.shapes()
                ) {
                    Icon(
                        painterResource(R.drawable.github),
--- a/app/src/main/java/org/nsh07/pomodoro/ui/settingsScreen/components/PlusDivider.kt
+++ b/app/src/main/java/org/nsh07/pomodoro/ui/settingsScreen/components/PlusDivider.kt
@@ -22,6 +22,8 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
 import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.MaterialTheme.colorScheme
 import androidx.compose.material3.MaterialTheme.typography
@@ -32,6 +34,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.unit.dp

+@OptIn(ExperimentalMaterial3ExpressiveApi::class)
@Composable
 fun PlusDivider(
    setShowPaywall: (Boolean) -> Unit,
@@ -41,6 +44,7 @@ fun PlusDivider(
        HorizontalDivider(modifier = Modifier.clip(CircleShape), thickness = 4.dp)
        Button(
            onClick = { setShowPaywall(true) },
+            shapes = ButtonDefaults.shapes(),
            modifier = Modifier
                .background(colorScheme.surfaceContainer)
                .padding(horizontal = 8.dp)
--- a/app/src/main/java/org/nsh07/pomodoro/ui/settingsScreen/screens/AlarmSettings.kt
+++ b/app/src/main/java/org/nsh07/pomodoro/ui/settingsScreen/screens/AlarmSettings.kt
@@ -38,8 +38,9 @@ import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.itemsIndexed
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
+import androidx.compose.material3.FilledTonalIconButton
 import androidx.compose.material3.Icon
-import androidx.compose.material3.IconButton
+import androidx.compose.material3.IconButtonDefaults
 import androidx.compose.material3.LargeFlexibleTopAppBar
 import androidx.compose.material3.ListItem
 import androidx.compose.material3.Switch
@@ -156,7 +157,11 @@ fun AlarmSettings(
                Text(stringResource(R.string.settings))
            },
            navigationIcon = {
-                IconButton(onBack) {
+                FilledTonalIconButton(
+                    onClick = onBack,
+                    shapes = IconButtonDefaults.shapes(),
+                    colors = IconButtonDefaults.filledTonalIconButtonColors(containerColor = listItemColors.containerColor)
+                ) {
                    Icon(
                        painterResource(R.drawable.arrow_back),
                        null
--- a/app/src/main/java/org/nsh07/pomodoro/ui/settingsScreen/screens/AppearanceSettings.kt
+++ b/app/src/main/java/org/nsh07/pomodoro/ui/settingsScreen/screens/AppearanceSettings.kt
@@ -28,8 +28,9 @@ import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
+import androidx.compose.material3.FilledTonalIconButton
 import androidx.compose.material3.Icon
-import androidx.compose.material3.IconButton
+import androidx.compose.material3.IconButtonDefaults
 import androidx.compose.material3.LargeFlexibleTopAppBar
 import androidx.compose.material3.ListItem
 import androidx.compose.material3.Switch
@@ -80,7 +81,11 @@ fun AppearanceSettings(
                Text(stringResource(R.string.settings))
            },
            navigationIcon = {
-                IconButton(onBack) {
+                FilledTonalIconButton(
+                    onClick = onBack,
+                    shapes = IconButtonDefaults.shapes(),
+                    colors = IconButtonDefaults.filledTonalIconButtonColors(containerColor = listItemColors.containerColor)
+                ) {
                    Icon(
                        painterResource(R.drawable.arrow_back),
                        null
--- a/app/src/main/java/org/nsh07/pomodoro/ui/settingsScreen/screens/TimerSettings.kt
+++ b/app/src/main/java/org/nsh07/pomodoro/ui/settingsScreen/screens/TimerSettings.kt
@@ -44,9 +44,9 @@ import androidx.compose.foundation.text.input.TextFieldState
 import androidx.compose.foundation.text.input.rememberTextFieldState
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
+import androidx.compose.material3.FilledTonalIconButton
 import androidx.compose.material3.FilledTonalIconToggleButton
 import androidx.compose.material3.Icon
-import androidx.compose.material3.IconButton
 import androidx.compose.material3.IconButtonDefaults
 import androidx.compose.material3.LargeFlexibleTopAppBar
 import androidx.compose.material3.ListItem
@@ -150,7 +150,11 @@ fun TimerSettings(
                Text(stringResource(R.string.settings))
            },
            navigationIcon = {
-                IconButton(onBack) {
+                FilledTonalIconButton(
+                    onClick = onBack,
+                    shapes = IconButtonDefaults.shapes(),
+                    colors = IconButtonDefaults.filledTonalIconButtonColors(containerColor = listItemColors.containerColor)
+                ) {
                    Icon(
                        painterResource(R.drawable.arrow_back),
                        null
--- a/app/src/main/java/org/nsh07/pomodoro/ui/timerScreen/AlarmDialog.kt
+++ b/app/src/main/java/org/nsh07/pomodoro/ui/timerScreen/AlarmDialog.kt
@@ -27,7 +27,9 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
 import androidx.compose.material3.Icon
 import androidx.compose.material3.LocalContentColor
 import androidx.compose.material3.MaterialTheme.colorScheme
@@ -47,7 +49,7 @@ import androidx.compose.ui.window.DialogProperties
 import org.nsh07.pomodoro.R
 import org.nsh07.pomodoro.ui.theme.TomatoTheme

-@OptIn(ExperimentalMaterial3Api::class)
+@OptIn(ExperimentalMaterial3Api::class, ExperimentalMaterial3ExpressiveApi::class)
@Composable
 fun AlarmDialog(
    modifier: Modifier = Modifier,
@@ -90,6 +92,7 @@ fun AlarmDialog(
                    Spacer(modifier = Modifier.height(24.dp))
                    Button(
                        onClick = stopAlarm,
+                        shapes = ButtonDefaults.shapes(),
                        modifier = Modifier.align(Alignment.End),
                    ) {
                        Text(stringResource(R.string.stop_alarm))
--- a/app/src/play/java/org/nsh07/pomodoro/billing/TomatoPlusPaywallDialog.kt
+++ b/app/src/play/java/org/nsh07/pomodoro/billing/TomatoPlusPaywallDialog.kt
@@ -18,8 +18,10 @@
 package org.nsh07.pomodoro.billing

 import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
 import androidx.compose.material3.FilledTonalIconButton
 import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButtonDefaults
 import androidx.compose.material3.Scaffold
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
@@ -30,7 +32,9 @@ import com.revenuecat.purchases.ui.revenuecatui.Paywall
 import com.revenuecat.purchases.ui.revenuecatui.PaywallOptions
 import com.revenuecat.purchases.ui.revenuecatui.customercenter.CustomerCenter
 import org.nsh07.pomodoro.R
+import org.nsh07.pomodoro.ui.theme.CustomColors.listItemColors

+@OptIn(ExperimentalMaterial3ExpressiveApi::class)
@Composable
 fun TomatoPlusPaywallDialog(
    isPlus: Boolean,
@@ -46,12 +50,14 @@ fun TomatoPlusPaywallDialog(

            FilledTonalIconButton(
                onClick = onDismiss,
+                shapes = IconButtonDefaults.shapes(),
+                colors = IconButtonDefaults.filledTonalIconButtonColors(containerColor = listItemColors.containerColor),
                modifier = Modifier
                    .padding(innerPadding)
                    .padding(16.dp)
            ) {
                Icon(
-                    painterResource(R.drawable.arrow_back),
+                    painterResource(R.drawable.clear),
                    null
                )
            }
--- a/app/src/play/java/org/nsh07/pomodoro/ui/settingsScreen/components/AboutButtons.kt
+++ b/app/src/play/java/org/nsh07/pomodoro/ui/settingsScreen/components/AboutButtons.kt
@@ -22,6 +22,8 @@ import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.size
 import androidx.compose.material3.Button
 import androidx.compose.material3.ButtonColors
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
 import androidx.compose.material3.Icon
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -33,6 +35,7 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import org.nsh07.pomodoro.R

+@OptIn(ExperimentalMaterial3ExpressiveApi::class)
@Composable
 fun TopButton(
    buttonColors: ButtonColors,
@@ -42,6 +45,7 @@ fun TopButton(
    Button(
        colors = buttonColors,
        onClick = { uriHandler.openUri("https://hosted.weblate.org/engage/tomato/") },
+        shapes = ButtonDefaults.shapes(),
        modifier = modifier
    ) {
        Row(
@@ -59,6 +63,7 @@ fun TopButton(
    }
 }

+@OptIn(ExperimentalMaterial3ExpressiveApi::class)
@Composable
 fun BottomButton(
    buttonColors: ButtonColors,
@@ -68,6 +73,7 @@ fun BottomButton(
    Button(
        colors = buttonColors,
        onClick = { uriHandler.openUri("https://play.google.com/store/apps/details?id=org.nsh07.pomodoro") },
+        shapes = ButtonDefaults.shapes(),
        modifier = modifier
    ) {
        Row(