[#1280] Improve button sizing

- Applied to both Primary and secondary buttons
- Changelog update
- Closes #1280

CHANGELOG.md

@@ -16,6 +16,9 @@ directly impact users rather than highlighting other key architectural updates.*
   lightwalletd servers in runtime.
 - The About screen now contains a link to the new Zashi Privacy Policy website
 
+### Fixed
+- Button sizing has been updated to align with the design guidelines and preserve stretching if necessary
+
 ## [0.2.0 (560)] - 2024-02-27
 
 ### Added

ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/component/Button.kt

@@ -50,7 +50,8 @@ private fun ButtonComposablePreview() {
         GradientSurface {
             Column(Modifier.padding(ZcashTheme.dimens.spacingDefault)) {
                 PrimaryButton(onClick = { }, text = "Primary")
-                PrimaryButton(onClick = { }, text = "Primary", showProgressBar = true)
+                PrimaryButton(onClick = { }, text = "Primary...", showProgressBar = true)
+                PrimaryButton(onClick = { }, text = "Primary Small", minHeight = ZcashTheme.dimens.buttonHeightSmall)
                 SecondaryButton(onClick = { }, text = "Secondary")
                 TertiaryButton(onClick = { }, text = "Tertiary")
                 TertiaryButton(onClick = { }, text = "Tertiary", enabled = false)
@@ -67,6 +68,8 @@ fun PrimaryButton(
     onClick: () -> Unit,
     text: String,
     modifier: Modifier = Modifier,
+    minWidth: Dp = ZcashTheme.dimens.buttonWidth,
+    minHeight: Dp = ZcashTheme.dimens.buttonHeight,
     enabled: Boolean = true,
     showProgressBar: Boolean = false,
     buttonColor: Color = MaterialTheme.colorScheme.primary,
@@ -76,29 +79,34 @@ fun PrimaryButton(
         PaddingValues(
             horizontal = ZcashTheme.dimens.spacingNone,
             vertical = ZcashTheme.dimens.spacingSmall
-        )
+        ),
+    contentPaddingValues: PaddingValues = PaddingValues(all = 16.dp)
 ) {
     Button(
         shape = RectangleShape,
         enabled = enabled,
+        contentPadding = contentPaddingValues,
         modifier =
-            modifier.then(Modifier.fillMaxWidth())
+            modifier.then(
-                .padding(outerPaddingValues)
+                Modifier
-                .shadow(
+                    .padding(outerPaddingValues)
-                    contentColor = textColor,
+                    .shadow(
-                    strokeColor = buttonColor,
+                        contentColor = textColor,
-                    strokeWidth = 1.dp,
+                        strokeColor = buttonColor,
-                    offsetX = ZcashTheme.dimens.buttonShadowOffsetX,
+                        strokeWidth = 1.dp,
-                    offsetY = ZcashTheme.dimens.buttonShadowOffsetY,
+                        offsetX = ZcashTheme.dimens.buttonShadowOffsetX,
-                    spread = ZcashTheme.dimens.buttonShadowSpread,
+                        offsetY = ZcashTheme.dimens.buttonShadowOffsetY,
-                )
+                        spread = ZcashTheme.dimens.buttonShadowSpread,
-                .translationClick(
+                    )
-                    // + 6dp to exactly cover the bottom shadow
+                    .translationClick(
-                    translationX = ZcashTheme.dimens.buttonShadowOffsetX + 6.dp,
+                        // + 6dp to exactly cover the bottom shadow
-                    translationY = ZcashTheme.dimens.buttonShadowOffsetX + 6.dp
+                        translationX = ZcashTheme.dimens.buttonShadowOffsetX + 6.dp,
-                )
+                        translationY = ZcashTheme.dimens.buttonShadowOffsetX + 6.dp
-                .defaultMinSize(ZcashTheme.dimens.buttonWidth, ZcashTheme.dimens.buttonHeight)
+                    )
-                .border(1.dp, Color.Black),
+                    .defaultMinSize(minWidth, minHeight)
+                    .fillMaxWidth()
+                    .border(1.dp, Color.Black)
+            ),
         colors =
             buttonColors(
                 containerColor = buttonColor,
@@ -107,9 +115,7 @@ fun PrimaryButton(
             ),
         onClick = onClick,
     ) {
-        ConstraintLayout(
+        ConstraintLayout {
-            modifier = Modifier.fillMaxWidth(),
-        ) {
             val (title, spacer, progress) = createRefs()
 
             Text(
@@ -162,35 +168,42 @@ fun SecondaryButton(
     onClick: () -> Unit,
     text: String,
     modifier: Modifier = Modifier,
+    minWidth: Dp = ZcashTheme.dimens.buttonWidth,
+    minHeight: Dp = ZcashTheme.dimens.buttonHeight,
+    enabled: Boolean = true,
+    buttonColor: Color = MaterialTheme.colorScheme.secondary,
+    textColor: Color = MaterialTheme.colorScheme.onSecondary,
     outerPaddingValues: PaddingValues =
         PaddingValues(
             horizontal = ZcashTheme.dimens.spacingNone,
             vertical = ZcashTheme.dimens.spacingSmall
         ),
-    enabled: Boolean = true,
+    contentPaddingValues: PaddingValues = PaddingValues(all = 16.dp)
-    buttonColor: Color = MaterialTheme.colorScheme.secondary,
-    textColor: Color = MaterialTheme.colorScheme.onSecondary,
 ) {
     Button(
         shape = RectangleShape,
         enabled = enabled,
+        contentPadding = contentPaddingValues,
         modifier =
-            modifier.then(Modifier.fillMaxWidth())
+            modifier.then(
-                .padding(outerPaddingValues)
+                Modifier
-                .shadow(
+                    .padding(outerPaddingValues)
-                    contentColor = textColor,
+                    .shadow(
-                    strokeColor = textColor,
+                        contentColor = textColor,
-                    offsetX = ZcashTheme.dimens.buttonShadowOffsetX,
+                        strokeColor = textColor,
-                    offsetY = ZcashTheme.dimens.buttonShadowOffsetY,
+                        offsetX = ZcashTheme.dimens.buttonShadowOffsetX,
-                    spread = ZcashTheme.dimens.buttonShadowSpread,
+                        offsetY = ZcashTheme.dimens.buttonShadowOffsetY,
-                )
+                        spread = ZcashTheme.dimens.buttonShadowSpread,
-                .translationClick(
+                    )
-                    // + 6dp to exactly cover the bottom shadow
+                    .translationClick(
-                    translationX = ZcashTheme.dimens.buttonShadowOffsetX + 6.dp,
+                        // + 6dp to exactly cover the bottom shadow
-                    translationY = ZcashTheme.dimens.buttonShadowOffsetX + 6.dp
+                        translationX = ZcashTheme.dimens.buttonShadowOffsetX + 6.dp,
-                )
+                        translationY = ZcashTheme.dimens.buttonShadowOffsetX + 6.dp
-                .defaultMinSize(ZcashTheme.dimens.buttonWidth, ZcashTheme.dimens.buttonHeight)
+                    )
-                .border(1.dp, Color.Black),
+                    .defaultMinSize(minWidth, minHeight)
+                    .fillMaxWidth()
+                    .border(1.dp, Color.Black)
+            ),
         colors =
             buttonColors(
                 containerColor = buttonColor,

ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/theme/Dimens.kt

@@ -25,6 +25,7 @@ data class Dimens(
     val buttonShadowSpread: Dp,
     val buttonWidth: Dp,
     val buttonHeight: Dp,
+    val buttonHeightSmall: Dp,
     // Chip
     val chipShadowElevation: Dp,
     val chipStroke: Dp,
@@ -65,7 +66,8 @@ private val defaultDimens =
         buttonShadowOffsetY = 20.dp,
         buttonShadowSpread = 10.dp,
         buttonWidth = 244.dp,
-        buttonHeight = 70.dp,
+        buttonHeight = 56.dp,
+        buttonHeightSmall = 38.dp,
         chipShadowElevation = 4.dp,
         chipStroke = 0.5.dp,
         circularScreenProgressWidth = 48.dp,

ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/theme/internal/Typography.kt

@@ -240,10 +240,14 @@ val LocalExtendedTypography =
                     fontSize = 14.sp,
                     lineHeight = 20.sp
                 ),
-            buttonText = PrimaryTypography.bodySmall,
+            buttonText =
+                PrimaryTypography.bodySmall.copy(
+                    fontWeight = FontWeight.Medium
+                ),
             buttonTextSmall =
                 PrimaryTypography.bodySmall.copy(
-                    fontSize = 11.sp
+                    fontSize = 11.sp,
+                    fontWeight = FontWeight.Medium
                 ),
             checkboxText =
                 PrimaryTypography.bodyMedium.copy(

ui-lib/src/main/java/co/electriccoin/zcash/ui/screen/balances/view/BalancesView.kt

@@ -272,6 +272,7 @@ fun TransparentBalancePanel(
                 text = stringResource(R.string.balances_transparent_balance_shield),
                 textStyle = ZcashTheme.extendedTypography.buttonTextSmall,
                 enabled = shieldState == ShieldState.Available,
+                minHeight = ZcashTheme.dimens.buttonHeightSmall,
                 outerPaddingValues =
                     PaddingValues(
                         horizontal = 54.dp,