feat(ui): use M3 expressive buttons

nsh07 · nsh07 · commit b6c8f4e7432e · 2025-11-14T18:37:16.000+05:30
diff --git 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))
             }
         }
diff --git 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(
diff --git 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),
diff --git 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)
diff --git 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
diff --git 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
diff --git 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
diff --git 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))
diff --git 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
                 )
             }
diff --git 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(
