Home buttons design update for small screens

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

@@ -27,6 +27,7 @@ import androidx.compose.ui.input.pointer.changedToUp
 import androidx.compose.ui.input.pointer.pointerInput
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import co.electriccoin.zcash.ui.design.R
 import co.electriccoin.zcash.ui.design.newcomponent.PreviewScreens
@@ -91,21 +92,24 @@ fun ZashiBigIconButton(
         shadowElevation = shadowElevation
     ) {
         Column(
-            modifier = backgroundModifier.padding(16.dp),
             horizontalAlignment = Alignment.CenterHorizontally,
             verticalArrangement = Arrangement.Center
         ) {
             Image(
+                modifier = Modifier.padding(start = 16.dp, top = 16.dp, end = 16.dp),
                 painter = painterResource(state.icon),
                 contentDescription = state.text.getValue(),
                 colorFilter = ColorFilter.tint(ZashiColors.Text.textPrimary)
             )
             Spacer(Modifier.height(4.dp))
             Text(
+                modifier = Modifier.padding(bottom = 16.dp),
                 text = state.text.getValue(),
                 style = ZashiTypography.textXs,
                 fontWeight = FontWeight.Medium,
-                color = ZashiColors.Text.textPrimary
+                color = ZashiColors.Text.textPrimary,
+                maxLines = 1,
+                overflow = TextOverflow.Clip
             )
         }
     }

ui-lib/src/main/java/co/electriccoin/zcash/ui/screen/home/HomeView.kt

@@ -6,7 +6,6 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.offset
@@ -15,6 +14,7 @@ import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.layout.layout
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.zIndex
@@ -128,7 +128,7 @@ private fun NavButtons(
             modifier =
                 Modifier
                     .weight(1f)
-                    .aspectRatio(1.06f)
+                    .minHeight106Percent()
                     .testTag(HomeTags.RECEIVE),
             state = state.firstButton,
         )
@@ -136,27 +136,40 @@ private fun NavButtons(
             modifier =
                 Modifier
                     .weight(1f)
-                    .aspectRatio(1.06f)
+                    .minHeight106Percent()
                     .testTag(HomeTags.SEND),
             state = state.secondButton,
         )
         ZashiBigIconButton(
             modifier =
                 Modifier
-                    .aspectRatio(1.06f)
+                    .minHeight106Percent()
                     .weight(1f),
             state = state.thirdButton,
         )
         ZashiBigIconButton(
             modifier =
                 Modifier
-                    .aspectRatio(1.06f)
+                    .minHeight106Percent()
                     .weight(1f),
             state = state.fourthButton,
         )
     }
 }
 
+fun Modifier.minHeight106Percent(): Modifier =
+    layout { measurable, constraints ->
+        val placeable = measurable.measure(constraints)
+        val minHeight = (placeable.width.toFloat() / (106f / 100f)).toInt()
+
+        val newConstraints = constraints.copy(minHeight = minHeight)
+        val newPlaceable = measurable.measure(newConstraints)
+
+        layout(newPlaceable.width, newPlaceable.height) {
+            newPlaceable.place(0, 0)
+        }
+    }
+
 @PreviewScreens
 @Composable
 private fun Preview() {