Fix UI amount keyboard, outline button (#3113)

* Fix UI amount keyboard, outline button

* fix comment

Author: isaacnguyen0809

screen/main/src/main/java/com/ivy/main/MainBottomBar.kt

@@ -41,15 +41,15 @@ import androidx.compose.ui.unit.dp
 import androidx.compose.ui.zIndex
 import com.ivy.design.l0_system.UI
 import com.ivy.design.l0_system.style
+import com.ivy.design.utils.thenIf
 import com.ivy.legacy.data.model.MainTab
 import com.ivy.legacy.ivyWalletCtx
 import com.ivy.legacy.utils.clickableNoIndication
 import com.ivy.legacy.utils.densityScope
 import com.ivy.legacy.utils.lerp
 import com.ivy.legacy.utils.navigationBarInset
-import com.ivy.legacy.utils.springBounceFast
-import com.ivy.design.utils.thenIf
 import com.ivy.legacy.utils.rememberInteractionSource
+import com.ivy.legacy.utils.springBounceFast
 import com.ivy.legacy.utils.toDensityDp
 import com.ivy.legacy.utils.toDensityPx
 import com.ivy.ui.R
@@ -163,7 +163,7 @@ fun BoxWithConstraintsScope.BottomBar(
     // ------------------------------------ BUTTONS--------------------------------------------------
     val fabStartX = ivyContext.screenWidth / 2 - FAB_BUTTON_SIZE.toDensityPx() / 2
     val fabStartY = ivyContext.screenHeight - navigationBarInset() -
-        30.dp.toDensityPx() - FAB_BUTTON_SIZE.toDensityPx()
+            30.dp.toDensityPx() - FAB_BUTTON_SIZE.toDensityPx()
 
     TransactionButtons(
         buttonsShownPercent = buttonsShownPercent,
@@ -304,6 +304,7 @@ private fun TransactionButtons(
                         )
                     }
                 }
+                .padding(horizontal = 8.dp)
                 .alpha(buttonsShownPercent)
                 .zIndex(200f),
             iconStart = R.drawable.ic_planned_payments,
@@ -358,7 +359,7 @@ private fun AddIncomeButton(
     buttonLeftX: Float,
     sideButtonsY: Float,
     clickAreaWidth: Int,
-    onAddIncome: () -> Unit
+    onAddIncome: () -> Unit,
 ) {
     IvyCircleButton(
         modifier = Modifier
@@ -443,7 +444,7 @@ private fun AddExpenseButton(
     fabStartY: Float,
     buttonCenterY: Float,
     clickAreaWidth: Int,
-    onAddExpense: () -> Unit
+    onAddExpense: () -> Unit,
 ) {
     IvyCircleButton(
         modifier = Modifier
@@ -530,7 +531,7 @@ private fun AddTransferButton(
     buttonRightX: Float,
     sideButtonsY: Float,
     clickAreaWidth: Int,
-    onAddTransfer: () -> Unit
+    onAddTransfer: () -> Unit,
 ) {
     IvyCircleButton(
         modifier = Modifier
@@ -614,7 +615,7 @@ private fun RowScope.Tab(
     name: String,
     selected: Boolean,
     selectedColor: Color,
-    onClick: () -> Unit
+    onClick: () -> Unit,
 ) {
     Row(
         modifier = Modifier

temp/legacy-code/src/main/java/com/ivy/legacy/legacy/ui/theme/components/IvyOutlinedButton.kt

@@ -72,7 +72,7 @@ fun IvyOutlinedButton(
         }
 
         Text(
-            modifier = Modifier.padding(vertical = padding),
+            modifier = Modifier.padding(vertical = padding, horizontal = 4.dp),
             text = text,
             style = UI.typo.b2.style(
                 fontWeight = FontWeight.Bold,

temp/legacy-code/src/main/java/com/ivy/legacy/legacy/ui/theme/modal/edit/AmountModal.kt

@@ -123,7 +123,7 @@ fun BoxWithConstraintsScope.AmountModal(
         SecondaryActions = {
             if (showPlusMinus) {
                 Row {
-                    Spacer(modifier = Modifier.width(34.dp))
+                    Spacer(modifier = Modifier.width(24.dp))
                     KeypadCircleButton(
                         text = "+/-",
                         testTag = "plus_minus",
@@ -228,6 +228,7 @@ fun AmountInput(
     var firstInput by remember { mutableStateOf(true) }
 
     AmountKeyboard(
+        horizontalPadding = 40.dp,
         forCalculator = false,
         onNumberPressed = {
             if (firstInput) {
@@ -289,6 +290,7 @@ private fun formatNumber(number: String): String? {
         } else {
             ""
         }
+
         return formatInt(intPart) + decimalFormatted
     }
 
@@ -301,6 +303,7 @@ fun AmountKeyboard(
     forCalculator: Boolean,
     onNumberPressed: (String) -> Unit,
     onDecimalPoint: () -> Unit,
+    horizontalPadding: Dp = 0.dp,
     ZeroRow: (@Composable RowScope.() -> Unit)? = null,
     FirstRowExtra: (@Composable RowScope.() -> Unit)? = null,
     SecondRowExtra: (@Composable RowScope.() -> Unit)? = null,
@@ -310,20 +313,24 @@ fun AmountKeyboard(
 ) {
     if (ZeroRow != null) {
         Row(
-            modifier = Modifier.fillMaxWidth(),
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(horizontal = horizontalPadding),
             verticalAlignment = Alignment.CenterVertically,
             horizontalArrangement = Arrangement.SpaceEvenly
         ) {
             ZeroRow.invoke(this)
         }
 
-        Spacer(Modifier.height(16.dp))
+        Spacer(Modifier.height(8.dp))
     }
 
     Row(
-        modifier = Modifier.fillMaxWidth(),
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(horizontal = horizontalPadding),
         verticalAlignment = Alignment.CenterVertically,
-        horizontalArrangement = Arrangement.Center
+        horizontalArrangement = Arrangement.SpaceEvenly
 
     ) {
         CircleNumberButton(
@@ -332,16 +339,12 @@ fun AmountKeyboard(
             onNumberPressed = onNumberPressed
         )
 
-        Spacer(Modifier.width(16.dp))
-
         CircleNumberButton(
             forCalculator = forCalculator,
             value = "8",
             onNumberPressed = onNumberPressed
         )
 
-        Spacer(Modifier.width(16.dp))
-
         CircleNumberButton(
             forCalculator = forCalculator,
             value = "9",
@@ -351,29 +354,27 @@ fun AmountKeyboard(
         FirstRowExtra?.invoke(this)
     }
 
-    Spacer(Modifier.height(16.dp))
+    Spacer(Modifier.height(8.dp))
 
     Row(
-        modifier = Modifier.fillMaxWidth(),
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(horizontal = horizontalPadding),
         verticalAlignment = Alignment.CenterVertically,
-        horizontalArrangement = Arrangement.Center
+        horizontalArrangement = Arrangement.SpaceEvenly
     ) {
         CircleNumberButton(
             forCalculator = forCalculator,
             value = "4",
             onNumberPressed = onNumberPressed
         )
 
-        Spacer(Modifier.width(16.dp))
-
         CircleNumberButton(
             forCalculator = forCalculator,
             value = "5",
             onNumberPressed = onNumberPressed
         )
 
-        Spacer(Modifier.width(16.dp))
-
         CircleNumberButton(
             forCalculator = forCalculator,
             value = "6",
@@ -383,29 +384,27 @@ fun AmountKeyboard(
         SecondRowExtra?.invoke(this)
     }
 
-    Spacer(Modifier.height(16.dp))
+    Spacer(Modifier.height(8.dp))
 
     Row(
-        modifier = Modifier.fillMaxWidth(),
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(horizontal = horizontalPadding),
         verticalAlignment = Alignment.CenterVertically,
-        horizontalArrangement = Arrangement.Center
+        horizontalArrangement = Arrangement.SpaceEvenly
     ) {
         CircleNumberButton(
             forCalculator = forCalculator,
             value = "1",
             onNumberPressed = onNumberPressed
         )
 
-        Spacer(Modifier.width(16.dp))
-
         CircleNumberButton(
             forCalculator = forCalculator,
             value = "2",
             onNumberPressed = onNumberPressed
         )
 
-        Spacer(Modifier.width(16.dp))
-
         CircleNumberButton(
             forCalculator = forCalculator,
             value = "3",
@@ -415,12 +414,14 @@ fun AmountKeyboard(
         ThirdRowExtra?.invoke(this)
     }
 
-    Spacer(Modifier.height(16.dp))
+    Spacer(Modifier.height(8.dp))
 
     Row(
-        modifier = Modifier.fillMaxWidth(),
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(horizontal = horizontalPadding),
         verticalAlignment = Alignment.CenterVertically,
-        horizontalArrangement = Arrangement.Center
+        horizontalArrangement = Arrangement.SpaceEvenly
     ) {
         KeypadCircleButton(
             text = localDecimalSeparator(),
@@ -433,16 +434,12 @@ fun AmountKeyboard(
             onDecimalPoint()
         }
 
-        Spacer(Modifier.width(16.dp))
-
         CircleNumberButton(
             forCalculator = forCalculator,
             value = "0",
             onNumberPressed = onNumberPressed
         )
 
-        Spacer(Modifier.width(16.dp))
-
         IvyIcon(
             modifier = circleButtonModifier(onClick = onBackspace)
                 .padding(all = 24.dp)
@@ -532,4 +529,4 @@ private fun Preview() {
             }
         }
     }
-}
+}