Fixed font baseline alignment using baseline shift instead of padding…

… workaround
Ivy-Apps · Jan 1, 2022 · 6f0acb9 · 6f0acb9
1 parent 1d89776
commit 6f0acb9
Show file tree

Hide file tree

Showing 25 changed files with 65 additions and 89 deletions.
diff --git a/app/src/main/java/com/ivy/wallet/ui/csvimport/flow/ImportFrom.kt b/app/src/main/java/com/ivy/wallet/ui/csvimport/flow/ImportFrom.kt
@@ -100,7 +100,7 @@ private fun ImportOption(
             .clickable {
                 onImportFrom(importType)
             }
-            .padding(top = 24.dp, bottom = 22.dp),
+            .padding(vertical = 24.dp),
         verticalAlignment = Alignment.CenterVertically
     ) {
         Spacer(Modifier.width(20.dp))

diff --git a/app/src/main/java/com/ivy/wallet/ui/edit/core/EditBottomSheet.kt b/app/src/main/java/com/ivy/wallet/ui/edit/core/EditBottomSheet.kt
@@ -328,8 +328,7 @@ private fun TransferRowMini(
                 color = fromContrastColor,
                 fontWeight = FontWeight.ExtraBold
             ),
-            paddingTop = 10.dp,
-            paddingBottom = 12.dp
+            padding = 10.dp,
         ) {
             onSetExpanded()
         }
@@ -350,8 +349,7 @@ private fun TransferRowMini(
                 color = toContrastColor,
                 fontWeight = FontWeight.ExtraBold
             ),
-            paddingTop = 10.dp,
-            paddingBottom = 12.dp
+            padding = 10.dp,
         ) {
             onSetExpanded()
         }
@@ -567,7 +565,7 @@ private fun AddAccount(
         Spacer(Modifier.width(4.dp))
 
         Text(
-            modifier = Modifier.padding(top = 10.dp, bottom = 12.dp),
+            modifier = Modifier.padding(vertical = 10.dp),
             text = "Add account",
             style = Typo.body2.style(
                 color = IvyTheme.colors.pureInverse,

diff --git a/app/src/main/java/com/ivy/wallet/ui/home/CustomerJourney.kt b/app/src/main/java/com/ivy/wallet/ui/home/CustomerJourney.kt
@@ -127,8 +127,7 @@ fun CustomerJourneyCard(
                 color = cardData.backgroundColor,
                 fontWeight = FontWeight.Bold
             ),
-            paddingTop = 8.dp,
-            paddingBottom = 10.dp,
+            padding = 8.dp,
             backgroundGradient = Gradient.solid(findContrastTextColor(cardData.backgroundColor))
         ) {
             onCTA()

diff --git a/app/src/main/java/com/ivy/wallet/ui/home/HomeMoreMenu.kt b/app/src/main/java/com/ivy/wallet/ui/home/HomeMoreMenu.kt
@@ -245,8 +245,7 @@ private fun SearchButton(
 
         Text(
             modifier = Modifier.padding(
-                top = 12.dp,
-                bottom = 14.dp
+                vertical = 12.dp,
             ),
             text = "Search transactions",
             style = Typo.body2.style(

diff --git a/app/src/main/java/com/ivy/wallet/ui/onboarding/components/Suggestions.kt b/app/src/main/java/com/ivy/wallet/ui/onboarding/components/Suggestions.kt
@@ -78,7 +78,7 @@ private fun Suggestion(
         Spacer(Modifier.width(8.dp))
 
         Text(
-            modifier = Modifier.padding(top = 14.dp, bottom = 18.dp),
+            modifier = Modifier.padding(vertical = 16.dp),
             text = name,
             style = Typo.body2.style(
                 fontWeight = FontWeight.Bold
@@ -113,7 +113,7 @@ private fun AddNewButton(
         Spacer(Modifier.width(8.dp))
 
         Text(
-            modifier = Modifier.padding(top = 14.dp, bottom = 18.dp),
+            modifier = Modifier.padding(vertical = 16.dp),
             text = "Add new",
             style = Typo.body2.style(
                 color = IvyTheme.colors.pure,

diff --git a/app/src/main/java/com/ivy/wallet/ui/onboarding/steps/OnboardingAccounts.kt b/app/src/main/java/com/ivy/wallet/ui/onboarding/steps/OnboardingAccounts.kt
@@ -249,7 +249,7 @@ fun BuyPremiumRow(
 
         Text(
             modifier = Modifier
-                .padding(top = 10.dp, bottom = 14.dp)
+                .padding(vertical = 12.dp)
                 .padding(start = 12.dp, end = 32.dp),
             text = "Buy premium for unlimited number of $itemLabelPlural",
             style = Typo.body2.style(

diff --git a/app/src/main/java/com/ivy/wallet/ui/onboarding/steps/OnboardingCategories.kt b/app/src/main/java/com/ivy/wallet/ui/onboarding/steps/OnboardingCategories.kt
@@ -231,7 +231,7 @@ private fun CategoryCard(
         Text(
             modifier = Modifier
                 .padding(start = 16.dp, end = 24.dp)
-                .padding(top = 22.dp, bottom = 26.dp),
+                .padding(vertical = 24.dp),
             text = category.name,
             style = Typo.body2.style(
                 fontWeight = FontWeight.Bold

diff --git a/app/src/main/java/com/ivy/wallet/ui/onboarding/steps/OnboardingSplashLogin.kt b/app/src/main/java/com/ivy/wallet/ui/onboarding/steps/OnboardingSplashLogin.kt
@@ -465,10 +465,7 @@ private fun LoginButton(
         Spacer(Modifier.width(16.dp))
 
         Text(
-            modifier = Modifier.padding(
-                top = 18.dp,
-                bottom = 22.dp
-            ),
+            modifier = Modifier.padding(vertical = 20.dp),
             text = text,
             style = Typo.body2.style(
                 color = textColor,

diff --git a/app/src/main/java/com/ivy/wallet/ui/paywall/PlansSheet.kt b/app/src/main/java/com/ivy/wallet/ui/paywall/PlansSheet.kt
@@ -152,8 +152,7 @@ fun BoxWithConstraintsScope.PlansSheet(
                             fontWeight = FontWeight.Bold
                         ),
                         iconStart = R.drawable.ic_custom_crown_s,
-                        paddingTop = 16.dp,
-                        paddingBottom = 16.dp,
+                        padding = 16.dp,
                         iconEdgePadding = 24.dp,
                     ) {
                         selectedPlan?.let {

diff --git a/app/src/main/java/com/ivy/wallet/ui/planned/list/PlannedPaymentCard.kt b/app/src/main/java/com/ivy/wallet/ui/planned/list/PlannedPaymentCard.kt
@@ -136,8 +136,7 @@ private fun PlannedPaymentHeaderRow(
                         color = findContrastTextColor(category.color.toComposeColor()),
                         fontWeight = FontWeight.ExtraBold
                     ),
-                    paddingTop = 8.dp,
-                    paddingBottom = 10.dp,
+                    padding = 8.dp,
                     iconEdgePadding = 10.dp
                 ) {
                     ivyContext.navigateTo(
@@ -161,8 +160,7 @@ private fun PlannedPaymentHeaderRow(
                     color = IvyTheme.colors.pureInverse,
                     fontWeight = FontWeight.ExtraBold
                 ),
-                paddingTop = 8.dp,
-                paddingBottom = 10.dp,
+                padding = 8.dp,
                 iconEdgePadding = 10.dp
             ) {
                 account?.let {

diff --git a/app/src/main/java/com/ivy/wallet/ui/reports/FilterOverlay.kt b/app/src/main/java/com/ivy/wallet/ui/reports/FilterOverlay.kt
@@ -234,8 +234,7 @@ fun BoxWithConstraintsScope.FilterOverlay(
             text = "Apply filter",
             iconStart = R.drawable.ic_filter_xs,
             backgroundGradient = GradientGreen,
-            paddingTop = 10.dp,
-            paddingBottom = 12.dp
+            padding = 10.dp,
         ) {
             if (localFilter != null) {
                 onSetFilter(localFilter!!)
@@ -432,8 +431,7 @@ private fun PeriodFilter(
         text = filter?.period?.toDisplayLong(LocalIvyContext.current.startDayOfMonth)
             ?.capitalizeLocal()
             ?: "Select time range",
-        paddingTop = 12.dp,
-        paddingBottom = 14.dp
+        padding = 12.dp,
     ) {
         onShowPeriodChooserModal()
     }
@@ -656,7 +654,7 @@ fun ListItem(
         Spacer(Modifier.width(4.dp))
 
         Text(
-            modifier = Modifier.padding(top = 10.dp, bottom = 12.dp),
+            modifier = Modifier.padding(vertical = 10.dp),
             text = text,
             style = Typo.body2.style(
                 color = textColor,
@@ -841,8 +839,7 @@ private fun Keyword(
         iconStart = R.drawable.ic_remove,
         iconTint = Red,
         borderColor = borderColor,
-        paddingTop = 10.dp,
-        paddingBottom = 12.dp
+        padding = 10.dp,
     ) {
         onClick()
     }
@@ -856,8 +853,7 @@ private fun AddKeywordButton(
     IvyOutlinedButton(
         text = text,
         iconStart = R.drawable.ic_plus,
-        paddingTop = 10.dp,
-        paddingBottom = 12.dp
+        padding = 10.dp,
     ) {
         onCLick()
     }

diff --git a/app/src/main/java/com/ivy/wallet/ui/reports/ReportScreen.kt b/app/src/main/java/com/ivy/wallet/ui/reports/ReportScreen.kt
@@ -346,8 +346,7 @@ private fun Toolbar(
             iconTint = Green,
             textColor = Green,
             solidBackground = true,
-            paddingTop = 8.dp,
-            paddingBottom = 10.dp,
+            padding = 8.dp,
             iconStart = R.drawable.ic_export_csv
         ) {
             onExport()

diff --git a/app/src/main/java/com/ivy/wallet/ui/search/SearchScreen.kt b/app/src/main/java/com/ivy/wallet/ui/search/SearchScreen.kt
@@ -163,10 +163,7 @@ private fun SearchInput(
         val searchFocus = FocusRequester()
         IvyBasicTextField(
             modifier = Modifier
-                .padding(
-                    top = 12.dp,
-                    bottom = 14.dp
-                )
+                .padding(vertical = 12.dp)
                 .focusRequester(searchFocus),
             value = searchQueryTextFieldValue,
             hint = "Search transactions",

diff --git a/app/src/main/java/com/ivy/wallet/ui/settings/SettingsScreen.kt b/app/src/main/java/com/ivy/wallet/ui/settings/SettingsScreen.kt
@@ -883,7 +883,7 @@ private fun AccountCardButton(
 
         Text(
             modifier = Modifier
-                .padding(top = 10.dp, bottom = 12.dp),
+                .padding(vertical = 10.dp),
             text = text,
             style = Typo.body2.style(
                 fontWeight = FontWeight.Bold,

diff --git a/app/src/main/java/com/ivy/wallet/ui/theme/IvyTypography.kt b/app/src/main/java/com/ivy/wallet/ui/theme/IvyTypography.kt
@@ -6,10 +6,14 @@ import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.Font
 import androidx.compose.ui.text.font.FontFamily
 import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.BaselineShift
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.sp
 import com.ivy.wallet.R
 
+const val OPEN_SANS_BASELINE_SHIFT = 0.075f
+const val RALEWAY_BASELINE_SHIFT = 0.2f
+
 val OpenSans = FontFamily(
         Font(R.font.opensans_regular, FontWeight.Normal),
         Font(R.font.opensans_regular, FontWeight.Medium),
@@ -33,53 +37,63 @@ val Typo = IvyTypography(
         h1 = TextStyle(
                 fontFamily = RaleWay,
                 fontWeight = FontWeight.Black,
-                fontSize = 42.sp
+                fontSize = 42.sp,
+                baselineShift = BaselineShift(RALEWAY_BASELINE_SHIFT),
         ),
         h2 = TextStyle(
                 fontFamily = RaleWay,
                 fontWeight = FontWeight.Normal,
-                fontSize = 32.sp
+                fontSize = 32.sp,
+                baselineShift = BaselineShift(RALEWAY_BASELINE_SHIFT),
         ),
         body1 = TextStyle(
                 fontFamily = RaleWay,
                 fontWeight = FontWeight.ExtraBold,
-                fontSize = 20.sp
+                fontSize = 20.sp,
+                baselineShift = BaselineShift(RALEWAY_BASELINE_SHIFT),
         ),
         body2 = TextStyle(
                 fontFamily = RaleWay,
                 fontWeight = FontWeight.Medium,
-                fontSize = 16.sp
+                fontSize = 16.sp,
+                baselineShift = BaselineShift(RALEWAY_BASELINE_SHIFT),
         ),
         caption = TextStyle(
                 fontFamily = RaleWay,
                 fontWeight = FontWeight.ExtraBold,
-                fontSize = 12.sp
+                fontSize = 12.sp,
+                baselineShift = BaselineShift(RALEWAY_BASELINE_SHIFT),
         ),
 
         numberH1 = TextStyle(
                 fontFamily = OpenSans,
                 fontWeight = FontWeight.Bold,
-                fontSize = 42.sp
+                fontSize = 42.sp,
+                baselineShift = BaselineShift(OPEN_SANS_BASELINE_SHIFT),
         ),
         numberH2 = TextStyle(
                 fontFamily = OpenSans,
                 fontWeight = FontWeight.Normal,
-                fontSize = 32.sp
+                fontSize = 32.sp,
+                baselineShift = BaselineShift(OPEN_SANS_BASELINE_SHIFT),
         ),
         numberBody1 = TextStyle(
                 fontFamily = OpenSans,
                 fontWeight = FontWeight.Bold,
-                fontSize = 20.sp
+                fontSize = 20.sp,
+                baselineShift = BaselineShift(OPEN_SANS_BASELINE_SHIFT),
         ),
         numberBody2 = TextStyle(
                 fontFamily = OpenSans,
                 fontWeight = FontWeight.Normal,
-                fontSize = 16.sp
+                fontSize = 16.sp,
+                baselineShift = BaselineShift(OPEN_SANS_BASELINE_SHIFT),
         ),
         numberCaption = TextStyle(
                 fontFamily = OpenSans,
                 fontWeight = FontWeight.Bold,
-                fontSize = 12.sp
+                fontSize = 12.sp,
+                baselineShift = BaselineShift(OPEN_SANS_BASELINE_SHIFT),
         ),
 )
 
@@ -103,9 +117,9 @@ fun TextStyle.colorAs(color: Color) = this.copy(color = color)
 fun TextStyle.style(
         color: Color = IvyTheme.colors.pureInverse,
         fontWeight: FontWeight = FontWeight.Bold,
-        textAlign: TextAlign = TextAlign.Start
+        textAlign: TextAlign = TextAlign.Start,
 ) = this.copy(
         color = color,
         fontWeight = fontWeight,
-        textAlign = textAlign
+        textAlign = textAlign,
 )
diff --git a/app/src/main/java/com/ivy/wallet/ui/theme/components/BalanceRow.kt b/app/src/main/java/com/ivy/wallet/ui/theme/components/BalanceRow.kt
@@ -180,9 +180,6 @@ private fun Currency(
     textColor: Color,
 ) {
     Text(
-        modifier = Modifier.padding(
-            bottom = if (currencyFontSize == null || currencyFontSize.value > 30) 4.dp else 2.dp
-        ),
         text = currency,
         style = if (currencyFontSize == null) {
             Typo.h1.style(

diff --git a/app/src/main/java/com/ivy/wallet/ui/theme/components/IvyBorderButton.kt b/app/src/main/java/com/ivy/wallet/ui/theme/components/IvyBorderButton.kt
@@ -39,8 +39,7 @@ fun IvyBorderButton(
     enabled: Boolean = true,
     wrapContentMode: Boolean = true,
 
-    paddingTop: Dp = 12.dp,
-    paddingBottom: Dp = 14.dp, //center hack
+    padding: Dp = 12.dp,
     onClick: () -> Unit
 ) {
     Row(
@@ -80,8 +79,7 @@ fun IvyBorderButton(
 
         Text(
             modifier = Modifier.padding(
-                top = paddingTop,
-                bottom = paddingBottom
+                vertical = padding,
             ),
             text = text,
             style = textStyle

diff --git a/app/src/main/java/com/ivy/wallet/ui/theme/components/IvyButton.kt b/app/src/main/java/com/ivy/wallet/ui/theme/components/IvyButton.kt
@@ -39,8 +39,7 @@ fun IvyButton(
     shadowAlpha: Float = 0.15f,
     wrapContentMode: Boolean = true,
     hasGlow: Boolean = true,
-    paddingTop: Dp = 12.dp,
-    paddingBottom: Dp = 14.dp, //center hack
+    padding: Dp = 12.dp,
     iconEdgePadding: Dp = 12.dp,
     onClick: () -> Unit
 ) {
@@ -92,8 +91,7 @@ fun IvyButton(
 
         Text(
             modifier = Modifier.padding(
-                top = paddingTop,
-                bottom = paddingBottom
+                vertical = padding,
             ),
             text = text,
             style = textStyle

diff --git a/app/src/main/java/com/ivy/wallet/ui/theme/components/IvyCheckbox.kt b/app/src/main/java/com/ivy/wallet/ui/theme/components/IvyCheckbox.kt
@@ -66,7 +66,6 @@ fun IvyCheckboxWithText(
         Spacer(modifier = Modifier.width(4.dp))
 
         Text(
-            modifier = Modifier.padding(bottom = 2.dp),
             text = text,
             style = Typo.body2.style(
                 color = IvyTheme.colors.pureInverse,