Skip to content
This repository has been archived by the owner on Nov 5, 2024. It is now read-only.

Fixed font baseline alignment using baseline shift instead of padding workaround #355

Merged
merged 2 commits into from
Jan 2, 2022
Merged

Fixed font baseline alignment using baseline shift instead of padding workaround #355

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6f0acb9
Fixed font baseline alignment using baseline shift instead of padding…
swapnilkadlag Jan 1, 2022
af72b08
Replaced top/bottom padding with vertical padding for Account button …
swapnilkadlag Jan 1, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion app/src/main/java/com/ivy/wallet/ui/csvimport/flow/ImportFrom.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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))
Expand Down
10 changes: 4 additions & 6 deletions app/src/main/java/com/ivy/wallet/ui/edit/core/EditBottomSheet.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -328,8 +328,7 @@ private fun TransferRowMini(
color = fromContrastColor,
fontWeight = FontWeight.ExtraBold
),
paddingTop = 10.dp,
paddingBottom = 12.dp
padding = 10.dp,
) {
onSetExpanded()
}
Expand All @@ -350,8 +349,7 @@ private fun TransferRowMini(
color = toContrastColor,
fontWeight = FontWeight.ExtraBold
),
paddingTop = 10.dp,
paddingBottom = 12.dp
padding = 10.dp,
) {
onSetExpanded()
}
Expand Down Expand Up @@ -532,7 +530,7 @@ private fun Account(
Spacer(Modifier.width(4.dp))

Text(
modifier = Modifier.padding(top = 10.dp, bottom = 12.dp),
modifier = Modifier.padding(vertical = 10.dp),
text = account.name,
style = Typo.body2.style(
color = textColor,
Expand Down Expand Up @@ -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,
Expand Down
3 changes: 1 addition & 2 deletions app/src/main/java/com/ivy/wallet/ui/home/CustomerJourney.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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()
Expand Down
3 changes: 1 addition & 2 deletions app/src/main/java/com/ivy/wallet/ui/home/HomeMoreMenu.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
4 changes: 2 additions & 2 deletions app/src/main/java/com/ivy/wallet/ui/onboarding/components/Suggestions.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion app/src/main/java/com/ivy/wallet/ui/onboarding/steps/OnboardingAccounts.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
2 changes: 1 addition & 1 deletion app/src/main/java/com/ivy/wallet/ui/onboarding/steps/OnboardingCategories.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
5 changes: 1 addition & 4 deletions app/src/main/java/com/ivy/wallet/ui/onboarding/steps/OnboardingSplashLogin.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
3 changes: 1 addition & 2 deletions app/src/main/java/com/ivy/wallet/ui/paywall/PlansSheet.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
6 changes: 2 additions & 4 deletions app/src/main/java/com/ivy/wallet/ui/planned/list/PlannedPaymentCard.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand All @@ -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 {
Expand Down
14 changes: 5 additions & 9 deletions app/src/main/java/com/ivy/wallet/ui/reports/FilterOverlay.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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!!)
Expand Down Expand Up @@ -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()
}
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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()
}
Expand All @@ -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()
}
Expand Down
3 changes: 1 addition & 2 deletions app/src/main/java/com/ivy/wallet/ui/reports/ReportScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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()
Expand Down
5 changes: 1 addition & 4 deletions app/src/main/java/com/ivy/wallet/ui/search/SearchScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion app/src/main/java/com/ivy/wallet/ui/settings/SettingsScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
38 changes: 26 additions & 12 deletions app/src/main/java/com/ivy/wallet/ui/theme/IvyTypography.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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),
Expand All @@ -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),
),
)

Expand All @@ -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,
)
3 changes: 0 additions & 3 deletions app/src/main/java/com/ivy/wallet/ui/theme/components/BalanceRow.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
6 changes: 2 additions & 4 deletions app/src/main/java/com/ivy/wallet/ui/theme/components/IvyBorderButton.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down Expand Up @@ -80,8 +79,7 @@ fun IvyBorderButton(

Text(
modifier = Modifier.padding(
top = paddingTop,
bottom = paddingBottom
vertical = padding,
),
text = text,
style = textStyle
Expand Down
6 changes: 2 additions & 4 deletions app/src/main/java/com/ivy/wallet/ui/theme/components/IvyButton.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
) {
Expand Down Expand Up @@ -92,8 +91,7 @@ fun IvyButton(

Text(
modifier = Modifier.padding(
top = paddingTop,
bottom = paddingBottom
vertical = padding,
),
text = text,
style = textStyle
Expand Down
1 change: 0 additions & 1 deletion app/src/main/java/com/ivy/wallet/ui/theme/components/IvyCheckbox.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
Loading