From 42e034f34e499edff2838b8833b9bcac5fc78e3e Mon Sep 17 00:00:00 2001 From: mtgriego Date: Mon, 3 Jun 2024 08:43:31 -0700 Subject: [PATCH] Add PPO cards for Fix Payment, Authorize Card, and Take Survey (#2049) * add PPO cards for a few of the different types * update preview padding to show badge better * lint * some visual adjustment based on feedback --- .../pledgedprojectsoverview/ui/PPOCardView.kt | 616 ++++++++++++++++++ .../ui/compose/designsystem/KSBadges.kt | 44 +- .../ui/compose/designsystem/KSButtons.kt | 35 +- .../ui/compose/designsystem/KSDimensions.kt | 8 +- app/src/main/res/drawable/ic_clock.xml | 9 + 5 files changed, 692 insertions(+), 20 deletions(-) create mode 100644 app/src/main/java/com/kickstarter/features/pledgedprojectsoverview/ui/PPOCardView.kt create mode 100644 app/src/main/res/drawable/ic_clock.xml diff --git a/app/src/main/java/com/kickstarter/features/pledgedprojectsoverview/ui/PPOCardView.kt b/app/src/main/java/com/kickstarter/features/pledgedprojectsoverview/ui/PPOCardView.kt new file mode 100644 index 0000000000..6c899b520d --- /dev/null +++ b/app/src/main/java/com/kickstarter/features/pledgedprojectsoverview/ui/PPOCardView.kt @@ -0,0 +1,616 @@ +package com.kickstarter.features.pledgedprojectsoverview.ui + +import android.content.res.Configuration +import androidx.compose.foundation.BorderStroke +import androidx.compose.foundation.Image +import androidx.compose.foundation.background +import androidx.compose.foundation.clickable +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.fillMaxWidth +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.size +import androidx.compose.foundation.layout.width +import androidx.compose.foundation.lazy.LazyColumn +import androidx.compose.material.Badge +import androidx.compose.material.BadgedBox +import androidx.compose.material.Card +import androidx.compose.material.Text +import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.clip +import androidx.compose.ui.graphics.ColorFilter +import androidx.compose.ui.graphics.painter.ColorPainter +import androidx.compose.ui.graphics.vector.ImageVector +import androidx.compose.ui.layout.ContentScale +import androidx.compose.ui.platform.LocalContext +import androidx.compose.ui.res.stringResource +import androidx.compose.ui.res.vectorResource +import androidx.compose.ui.text.style.TextOverflow +import androidx.compose.ui.tooling.preview.Preview +import coil.compose.AsyncImage +import coil.request.ImageRequest +import com.kickstarter.R +import com.kickstarter.ui.compose.designsystem.KSCoralBadge +import com.kickstarter.ui.compose.designsystem.KSDividerLineGrey +import com.kickstarter.ui.compose.designsystem.KSPrimaryGreenButton +import com.kickstarter.ui.compose.designsystem.KSSecondaryRedButton +import com.kickstarter.ui.compose.designsystem.KSTheme +import com.kickstarter.ui.compose.designsystem.KSTheme.colors +import com.kickstarter.ui.compose.designsystem.KSTheme.dimensions +import com.kickstarter.ui.compose.designsystem.KSTheme.typography +import com.kickstarter.ui.compose.designsystem.shapes + +@Composable +@Preview(name = "Light", uiMode = Configuration.UI_MODE_NIGHT_NO) +@Preview(name = "Dark", uiMode = Configuration.UI_MODE_NIGHT_YES) +fun PPOCardPreview() { + KSTheme { + LazyColumn( + Modifier + .background(color = colors.backgroundSurfacePrimary), + contentPadding = PaddingValues(dimensions.paddingMedium) + ) { + item { + PPOCardView( + viewType = PPOCardViewType.FIX_PAYMENT, + onCardClick = {}, + projectName = "Sugardew Island - Your cozy farm shop let’s pretend this is a longer title let’s pretend this is a longer title", + pledgeAmount = "$50.00", + creatorName = "Some really really really really really really really long name", + sendAMessageClickAction = {}, + showBadge = true, + onActionButtonClicked = {}, + timeNumberForAction = 6 + ) + + Spacer(modifier = Modifier.height(dimensions.paddingMedium)) + } + + item { + PPOCardView( + viewType = PPOCardViewType.PAYMENT_FIXED, + onCardClick = {}, + projectName = "Sugardew Island - Your cozy farm shop let’s pretend this is a longer title let’s pretend this is a longer title", + pledgeAmount = "$50.00", + creatorName = "Some really really really really really really really long name", + sendAMessageClickAction = {}, + showBadge = false, + onActionButtonClicked = {}, + timeNumberForAction = 6 + ) + + Spacer(modifier = Modifier.height(dimensions.paddingMedium)) + } + + item { + PPOCardView( + viewType = PPOCardViewType.AUTHENTICATE_CARD, + onCardClick = {}, + projectName = "Sugardew Island - Your cozy farm shop let’s pretend this is a longer title let’s pretend this is a longer title", + pledgeAmount = "$60.00", + creatorName = "Some really really really really really really really long name", + sendAMessageClickAction = {}, + showBadge = true, + onActionButtonClicked = {}, + timeNumberForAction = 7 + ) + + Spacer(modifier = Modifier.height(dimensions.paddingMedium)) + } + + item { + PPOCardView( + viewType = PPOCardViewType.CARD_AUTHENTICATED, + onCardClick = {}, + projectName = "Sugardew Island - Your cozy farm shop let’s pretend this is a longer title let’s pretend this is a longer title", + pledgeAmount = "$60.00", + creatorName = "Some really really really really really really really long name", + sendAMessageClickAction = {}, + showBadge = false, + onActionButtonClicked = {}, + timeNumberForAction = 7 + ) + + Spacer(modifier = Modifier.height(dimensions.paddingMedium)) + } + + item { + PPOCardView( + viewType = PPOCardViewType.TAKE_SURVEY, + onCardClick = {}, + projectName = "Sugardew Island - Your cozy farm shop let’s pretend this is a longer title let’s pretend this is a longer title", + pledgeAmount = "$70.00", + creatorName = "Some really really really really really really really long name", + sendAMessageClickAction = {}, + showBadge = true, + onActionButtonClicked = {}, + timeNumberForAction = 8 + ) + + Spacer(modifier = Modifier.height(dimensions.paddingMedium)) + } + + item { + PPOCardView( + viewType = PPOCardViewType.SURVEY_SUBMITTED, + onCardClick = {}, + projectName = "Sugardew Island - Your cozy farm shop let’s pretend this is a longer title let’s pretend this is a longer title", + pledgeAmount = "$70.00", + creatorName = "Some really really really really really really really long name", + sendAMessageClickAction = {}, + showBadge = false, + onActionButtonClicked = {}, + timeNumberForAction = 8 + ) + + Spacer(modifier = Modifier.height(dimensions.paddingMedium)) + } + } + } +} + +enum class PPOCardViewType { + CONFIRM_ADDRESS, + ADDRESS_CONFIRMED, + FIX_PAYMENT, + PAYMENT_FIXED, + AUTHENTICATE_CARD, + CARD_AUTHENTICATED, + TAKE_SURVEY, + SURVEY_SUBMITTED +} + +@Composable +fun PPOCardView( + viewType: PPOCardViewType, + onCardClick: () -> Unit, + projectName: String? = null, + pledgeAmount: String? = null, + imageUrl: String? = null, + imageContentDescription: String? = null, + creatorName: String? = null, + sendAMessageClickAction: () -> Unit, + showBadge: Boolean = false, + onActionButtonClicked: () -> Unit, + timeNumberForAction: Int = 0 +) { + + BadgedBox( + badge = { if (showBadge) Badge(backgroundColor = colors.textAccentGreen) } + ) { + Card( + modifier = Modifier + .fillMaxWidth(), + shape = shapes.small, + contentColor = colors.backgroundSurfacePrimary, + backgroundColor = colors.backgroundSurfacePrimary, + border = BorderStroke(width = dimensions.borderThickness, color = colors.borderSubtle), + ) { + Column( + Modifier.clickable { onCardClick.invoke() } + ) { + when (viewType) { + PPOCardViewType.CONFIRM_ADDRESS -> {} + PPOCardViewType.ADDRESS_CONFIRMED -> {} + PPOCardViewType.FIX_PAYMENT -> FixPaymentAlertsView(timeNumberForAction) + PPOCardViewType.PAYMENT_FIXED -> {} + PPOCardViewType.AUTHENTICATE_CARD -> AuthenticateCardAlertsView(timeNumberForAction) + PPOCardViewType.CARD_AUTHENTICATED -> {} + PPOCardViewType.TAKE_SURVEY -> TakeSurveyAlertsView(timeNumberForAction) + PPOCardViewType.SURVEY_SUBMITTED -> SurveySubmittedAlertsView(timeNumberForAction) + } + + ProjectPledgeSummaryView( + projectName = projectName, + pledgeAmount = pledgeAmount, + imageUrl = imageUrl, + imageContentDescription = imageContentDescription + ) + + CreatorNameSendMessageView( + creatorName = creatorName, + sendAMessageClickAction = sendAMessageClickAction + ) + + when (viewType) { + PPOCardViewType.CONFIRM_ADDRESS -> {} + PPOCardViewType.ADDRESS_CONFIRMED -> {} + PPOCardViewType.FIX_PAYMENT -> FixPaymentButtonView(onActionButtonClicked) + PPOCardViewType.PAYMENT_FIXED -> PaymentFixedButtonView { } + PPOCardViewType.AUTHENTICATE_CARD -> AuthenticateCardButtonView(onActionButtonClicked) + PPOCardViewType.CARD_AUTHENTICATED -> CardAuthenticatedButtonView { } + PPOCardViewType.TAKE_SURVEY -> TakeSurveyButtonView(onActionButtonClicked) + PPOCardViewType.SURVEY_SUBMITTED -> SurveySubmittedButtonView { } + } + } + } + } +} + +@Composable +fun ProjectPledgeSummaryView( + projectName: String? = null, + pledgeAmount: String? = null, + imageUrl: String? = null, + imageContentDescription: String? = null, +) { + Row( + modifier = Modifier + .fillMaxWidth() + .padding(all = dimensions.paddingMediumSmall) + ) { + AsyncImage( + model = ImageRequest.Builder(LocalContext.current) + .data(imageUrl) + .crossfade(true) + .build(), + contentDescription = imageContentDescription, + modifier = Modifier + .weight(0.25f) + .height(dimensions.clickableButtonHeight) + .clip(shapes.small), + placeholder = ColorPainter(color = colors.backgroundDisabled), + contentScale = ContentScale.FillWidth + ) + + Spacer(modifier = Modifier.width(dimensions.paddingSmall)) + + Column( + modifier = Modifier + .weight(0.75f) + .height(dimensions.clickableButtonHeight) + ) { + Text( + text = projectName ?: "", + color = colors.textPrimary, + style = typography.footnoteMedium, + overflow = TextOverflow.Ellipsis, + minLines = 2, + maxLines = 2 + ) + + Spacer(modifier = Modifier.weight(1f)) + + // TODO: Replace with translated string + Text( + text = "$pledgeAmount pledged", + color = colors.textSecondary, + style = typography.caption2 + ) + } + } +} + +@Composable +fun CreatorNameSendMessageView( + creatorName: String? = null, + sendAMessageClickAction: () -> Unit +) { + KSDividerLineGrey() + + Row( + Modifier + .fillMaxWidth() + ) { + + Row( + modifier = Modifier + .weight(0.7f) + .padding( + top = dimensions.paddingMediumSmall, + bottom = dimensions.paddingMediumSmall, + start = dimensions.paddingMediumSmall, + end = dimensions.paddingSmall + ) + ) { + Text( + text = stringResource(id = R.string.project_menu_created_by), + color = colors.textSecondary, + style = typography.caption2 + ) + + Text( + text = " ${creatorName.orEmpty()}", + overflow = TextOverflow.Ellipsis, + color = colors.textSecondary, + style = typography.caption2Medium, + maxLines = 1 + ) + } + + Row( + modifier = Modifier + .weight(0.3f) + .padding( + end = dimensions.paddingMediumSmall, + top = dimensions.paddingMediumSmall, + bottom = dimensions.paddingMediumSmall + ) + .clickable { sendAMessageClickAction.invoke() } + ) { + // TODO: Replace with translated string + Text( + text = "Send a message", + color = colors.textAccentGreen, + style = typography.caption2 + ) + + Image( + modifier = Modifier.size(dimensions.paddingMediumSmall), + imageVector = ImageVector.vectorResource(id = R.drawable.chevron_right), + contentDescription = null, + colorFilter = ColorFilter.tint(color = colors.textAccentGreen) + ) + } + } + + KSDividerLineGrey() +} + +@Composable +fun FixPaymentAlertsView(daysRemaining: Int = -1) { + Column( + modifier = Modifier + .fillMaxWidth() + .padding(top = dimensions.paddingMediumSmall, start = dimensions.paddingMediumSmall) + ) { + KSCoralBadge( + leadingIcon = { + // TODO: Replace with translated string + Image( + modifier = Modifier.padding(end = dimensions.paddingXSmall), + imageVector = ImageVector.vectorResource(id = R.drawable.ic_icon_alert), + contentDescription = "Payment Failed", + colorFilter = ColorFilter.tint(colors.textAccentRedBold) + ) + }, + // TODO: Replace with translated string + text = "Payment failed", + textColor = colors.textAccentRedBold + ) + + if (daysRemaining > 0) { + Spacer(modifier = Modifier.height(dimensions.paddingSmall)) + + KSCoralBadge( + leadingIcon = { + // TODO: Replace with translated string + Image( + modifier = Modifier + .padding(end = dimensions.paddingXSmall) + .size(dimensions.alertIconSize), + imageVector = ImageVector.vectorResource(id = R.drawable.ic_clock), + contentDescription = "Pledge will be dropped in $daysRemaining days", + colorFilter = ColorFilter.tint(colors.textAccentRedBold) + ) + }, + // TODO: Replace with translated string + text = "Pledge will be dropped in $daysRemaining days", + textColor = colors.textAccentRedBold + ) + } + } +} + +@Composable +fun FixPaymentButtonView(onFixPaymentClicked: () -> Unit) { + // TODO: Replace with translated string + KSSecondaryRedButton( + modifier = Modifier.padding(dimensions.paddingMediumSmall), + onClickAction = { onFixPaymentClicked.invoke() }, + text = "Fix Payment", + isEnabled = true, + textStyle = typography.buttonText + ) +} + +@Composable +fun AuthenticateCardAlertsView(daysRemaining: Int = -1) { + Column( + modifier = Modifier + .fillMaxWidth() + .padding(top = dimensions.paddingMediumSmall, start = dimensions.paddingMediumSmall) + ) { + KSCoralBadge( + leadingIcon = { + // TODO: Replace with translated string + Image( + modifier = Modifier.padding(end = dimensions.paddingXSmall), + imageVector = ImageVector.vectorResource(id = R.drawable.ic_icon_alert), + contentDescription = "Card needs authentication", + colorFilter = ColorFilter.tint(colors.textAccentRedBold) + ) + }, + // TODO: Replace with translated string + text = "Card needs authentication", + textColor = colors.textAccentRedBold + ) + + if (daysRemaining > 0) { + Spacer(modifier = Modifier.height(dimensions.paddingSmall)) + + KSCoralBadge( + leadingIcon = { + // TODO: Replace with translated string + Image( + modifier = Modifier + .padding(end = dimensions.paddingXSmall) + .size(dimensions.alertIconSize), + imageVector = ImageVector.vectorResource(id = R.drawable.ic_clock), + contentDescription = "Pledge will be dropped in $daysRemaining days", + colorFilter = ColorFilter.tint(colors.textAccentRedBold) + ) + }, + // TODO: Replace with translated string + text = "Pledge will be dropped in $daysRemaining days", + textColor = colors.textAccentRedBold + ) + } + } +} + +@Composable +fun PaymentFixedButtonView(onFixPaymentClicked: () -> Unit) { + // TODO: Replace with translated string + KSSecondaryRedButton( + modifier = Modifier.padding(dimensions.paddingMediumSmall), + leadingIcon = { + Image( + modifier = Modifier + .padding(end = dimensions.paddingXSmall) + .size(dimensions.paddingMedium), + imageVector = ImageVector.vectorResource(id = R.drawable.icon__check), + contentDescription = "Payment Fixed", + colorFilter = ColorFilter.tint(color = colors.textSecondary) + ) + }, + onClickAction = { onFixPaymentClicked.invoke() }, + text = "Payment Fixed", + isEnabled = false, + textStyle = typography.buttonText + ) +} + +@Composable +fun AuthenticateCardButtonView(onAuthenticateCardClicked: () -> Unit) { + // TODO: Replace with translated string + KSSecondaryRedButton( + modifier = Modifier.padding(dimensions.paddingMediumSmall), + onClickAction = { onAuthenticateCardClicked.invoke() }, + text = "Authenticate Card", + isEnabled = true, + textStyle = typography.buttonText + ) +} + +@Composable +fun CardAuthenticatedButtonView(onFixPaymentClicked: () -> Unit) { + // TODO: Replace with translated string + KSSecondaryRedButton( + modifier = Modifier.padding(dimensions.paddingMediumSmall), + leadingIcon = { + Image( + modifier = Modifier + .padding(end = dimensions.paddingXSmall) + .size(dimensions.paddingMedium), + imageVector = ImageVector.vectorResource(id = R.drawable.icon__check), + contentDescription = "Card Authenticated", + colorFilter = ColorFilter.tint(color = colors.textSecondary) + ) + }, + onClickAction = { onFixPaymentClicked.invoke() }, + text = "Card Authenticated", + isEnabled = false, + textStyle = typography.buttonText + ) +} + +@Composable +fun TakeSurveyAlertsView(hoursRemaining: Int = -1) { + Column( + modifier = Modifier + .fillMaxWidth() + .padding(top = dimensions.paddingMediumSmall, start = dimensions.paddingMediumSmall) + ) { + KSCoralBadge( + leadingIcon = { + // TODO: Replace with translated string + Image( + modifier = Modifier.padding(end = dimensions.paddingXSmall), + imageVector = ImageVector.vectorResource(id = R.drawable.ic_icon_alert), + contentDescription = "Complete Survey", + colorFilter = ColorFilter.tint(colors.textSecondary) + ) + }, + // TODO: Replace with translated string + text = "Complete Survey", + ) + + if (hoursRemaining > 0) { + Spacer(modifier = Modifier.height(dimensions.paddingSmall)) + + KSCoralBadge( + leadingIcon = { + // TODO: Replace with translated string + Image( + modifier = Modifier + .padding(end = dimensions.paddingXSmall) + .size(dimensions.alertIconSize), + imageVector = ImageVector.vectorResource(id = R.drawable.ic_clock), + contentDescription = "Address locks in $hoursRemaining hours", + colorFilter = ColorFilter.tint(colors.textSecondary) + ) + }, + // TODO: Replace with translated string + text = "Address locks in $hoursRemaining hours", + ) + } + } +} + +@Composable +fun TakeSurveyButtonView(onAuthenticateCardClicked: () -> Unit) { + // TODO: Replace with translated string + KSPrimaryGreenButton( + modifier = Modifier.padding(dimensions.paddingMediumSmall), + onClickAction = { onAuthenticateCardClicked.invoke() }, + text = "Take Survey", + isEnabled = true, + textStyle = typography.buttonText + ) +} + +@Composable +fun SurveySubmittedAlertsView(hoursRemaining: Int = -1) { + if (hoursRemaining > 0) { + Column( + modifier = Modifier + .fillMaxWidth() + .padding(top = dimensions.paddingMediumSmall, start = dimensions.paddingMediumSmall) + ) { + Spacer(modifier = Modifier.height(dimensions.paddingSmall)) + + KSCoralBadge( + leadingIcon = { + // TODO: Replace with translated string + Image( + modifier = Modifier + .padding(end = dimensions.paddingXSmall) + .size(dimensions.alertIconSize), + imageVector = ImageVector.vectorResource(id = R.drawable.ic_clock), + contentDescription = "Address locks in $hoursRemaining hours", + colorFilter = ColorFilter.tint(colors.textSecondary) + ) + }, + // TODO: Replace with translated string + text = "Address locks in $hoursRemaining hours", + ) + } + } +} + +@Composable +fun SurveySubmittedButtonView(onFixPaymentClicked: () -> Unit) { + // TODO: Replace with translated string + KSPrimaryGreenButton( + modifier = Modifier.padding(dimensions.paddingMediumSmall), + leadingIcon = { + Image( + modifier = Modifier + .padding(end = dimensions.paddingXSmall) + .size(dimensions.paddingMedium), + imageVector = ImageVector.vectorResource(id = R.drawable.icon__check), + contentDescription = "Survey Submitted", + colorFilter = ColorFilter.tint(color = colors.textSecondary) + ) + }, + onClickAction = { onFixPaymentClicked.invoke() }, + text = "Survey Submitted", + isEnabled = false, + textStyle = typography.buttonText + ) +} diff --git a/app/src/main/java/com/kickstarter/ui/compose/designsystem/KSBadges.kt b/app/src/main/java/com/kickstarter/ui/compose/designsystem/KSBadges.kt index 2c2f211358..f4b115ca39 100644 --- a/app/src/main/java/com/kickstarter/ui/compose/designsystem/KSBadges.kt +++ b/app/src/main/java/com/kickstarter/ui/compose/designsystem/KSBadges.kt @@ -3,6 +3,7 @@ package com.kickstarter.ui.compose.designsystem import android.content.res.Configuration import androidx.compose.foundation.background import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height @@ -10,6 +11,7 @@ import androidx.compose.foundation.layout.padding import androidx.compose.material.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color import androidx.compose.ui.tooling.preview.Preview import com.kickstarter.ui.compose.designsystem.KSTheme.colors import com.kickstarter.ui.compose.designsystem.KSTheme.dimensions @@ -38,9 +40,11 @@ fun KSBadgesPreview() { @Composable fun KSGreenBadge( - text: String + leadingIcon: @Composable () -> Unit = {}, + text: String, + textColor: Color = colors.textAccentGreen ) { - Text( + Row( modifier = Modifier .background( color = colors.backgroundAccentGreenSubtle, @@ -51,18 +55,25 @@ fun KSGreenBadge( top = dimensions.paddingSmall, bottom = dimensions.paddingSmall, end = dimensions.paddingMediumSmall - ), - text = text, - color = colors.textAccentGreen, - style = typography.footnoteMedium - ) + ) + ) { + leadingIcon() + + Text( + text = text, + color = textColor, + style = typography.footnoteMedium + ) + } } @Composable fun KSCoralBadge( - text: String + leadingIcon: @Composable () -> Unit = {}, + text: String, + textColor: Color = colors.textSecondary ) { - Text( + Row( modifier = Modifier .background( color = colors.backgroundDangerSubtle, @@ -73,9 +84,14 @@ fun KSCoralBadge( top = dimensions.paddingSmall, bottom = dimensions.paddingSmall, end = dimensions.paddingMediumSmall - ), - text = text, - color = colors.textSecondary, - style = typography.footnoteMedium - ) + ) + ) { + leadingIcon() + + Text( + text = text, + color = textColor, + style = typography.footnoteMedium + ) + } } diff --git a/app/src/main/java/com/kickstarter/ui/compose/designsystem/KSButtons.kt b/app/src/main/java/com/kickstarter/ui/compose/designsystem/KSButtons.kt index fc2c2cce9e..ad6dd35349 100644 --- a/app/src/main/java/com/kickstarter/ui/compose/designsystem/KSButtons.kt +++ b/app/src/main/java/com/kickstarter/ui/compose/designsystem/KSButtons.kt @@ -21,6 +21,7 @@ import androidx.compose.runtime.CompositionLocalProvider import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.res.painterResource +import androidx.compose.ui.text.TextStyle import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.Dp import com.kickstarter.R @@ -163,17 +164,21 @@ fun KSSmallButtonsPreview() { @Composable fun KSPrimaryGreenButton( modifier: Modifier = Modifier, + leadingIcon: @Composable () -> Unit = {}, onClickAction: () -> Unit, text: String, + textStyle: TextStyle = typography.body, isEnabled: Boolean ) { CompositionLocalProvider(LocalRippleTheme provides KSRippleThemeWhite) { KSButton( modifier = modifier, + leadingIcon = leadingIcon, onClickAction = onClickAction, isEnabled = isEnabled, backgroundColor = colors.backgroundAccentGreenBold, text = text, + textStyle = textStyle, textColor = colors.textInversePrimary ) } @@ -182,17 +187,21 @@ fun KSPrimaryGreenButton( @Composable fun KSPrimaryBlueButton( modifier: Modifier = Modifier, + leadingIcon: @Composable () -> Unit = {}, onClickAction: () -> Unit, text: String, + textStyle: TextStyle = typography.body, isEnabled: Boolean ) { CompositionLocalProvider(LocalRippleTheme provides KSRippleThemeWhite) { KSButton( modifier = modifier, + leadingIcon = leadingIcon, onClickAction = onClickAction, isEnabled = isEnabled, backgroundColor = colors.backgroundAccentBlueBold, text = text, + textStyle = textStyle, textColor = colors.textInversePrimary ) } @@ -201,17 +210,21 @@ fun KSPrimaryBlueButton( @Composable fun KSPrimaryBlackButton( modifier: Modifier = Modifier, + leadingIcon: @Composable () -> Unit = {}, onClickAction: () -> Unit, text: String, + textStyle: TextStyle = typography.body, isEnabled: Boolean ) { CompositionLocalProvider(LocalRippleTheme provides KSRippleThemeWhite) { KSButton( modifier = modifier, + leadingIcon = leadingIcon, onClickAction = onClickAction, isEnabled = isEnabled, backgroundColor = colors.backgroundAction, text = text, + textStyle = textStyle, textColor = colors.textInversePrimary ) } @@ -220,17 +233,21 @@ fun KSPrimaryBlackButton( @Composable fun KSSecondaryGreyButton( modifier: Modifier = Modifier, + leadingIcon: @Composable () -> Unit = {}, onClickAction: () -> Unit, text: String, + textStyle: TextStyle = typography.body, isEnabled: Boolean ) { CompositionLocalProvider(LocalRippleTheme provides KSRippleThemeWhite) { KSButton( modifier = modifier, + leadingIcon = leadingIcon, onClickAction = onClickAction, isEnabled = isEnabled, - backgroundColor = colors.backgroundAccentGraySubtle, + backgroundColor = colors.backgroundAccentGrayBold, text = text, + textStyle = textStyle, textColor = colors.textPrimary ) } @@ -239,17 +256,21 @@ fun KSSecondaryGreyButton( @Composable fun KSSecondaryRedButton( modifier: Modifier = Modifier, + leadingIcon: @Composable () -> Unit = {}, onClickAction: () -> Unit, text: String, + textStyle: TextStyle = typography.body, isEnabled: Boolean ) { CompositionLocalProvider(LocalRippleTheme provides KSRippleThemeWhite) { KSButton( modifier = modifier, + leadingIcon = leadingIcon, onClickAction = onClickAction, isEnabled = isEnabled, backgroundColor = colors.backgroundDangerBold, text = text, + textStyle = textStyle, textColor = colors.textInversePrimary ) } @@ -258,17 +279,21 @@ fun KSSecondaryRedButton( @Composable fun KSSecondaryWhiteButton( modifier: Modifier = Modifier, + leadingIcon: @Composable () -> Unit = {}, onClickAction: () -> Unit, text: String, + textStyle: TextStyle = typography.body, isEnabled: Boolean ) { CompositionLocalProvider(LocalRippleTheme provides KSRippleThemeGrey) { KSButton( modifier = modifier, + leadingIcon = leadingIcon, onClickAction = onClickAction, isEnabled = isEnabled, backgroundColor = colors.backgroundSurfacePrimary, text = text, + textStyle = textStyle, textColor = colors.textAccentGreenBold ) } @@ -453,10 +478,12 @@ fun KSSmallButton( @Composable fun KSButton( modifier: Modifier = Modifier, + leadingIcon: @Composable () -> Unit = {}, onClickAction: () -> Unit, isEnabled: Boolean, backgroundColor: Color, text: String, + textStyle: TextStyle = typography.body, textColor: Color, ) { Button( @@ -472,10 +499,12 @@ fun KSButton( enabled = isEnabled, shape = shapes.medium ) { + leadingIcon() + Text( text = text, - color = if (isEnabled) textColor else colors.textAccentGrey, - style = typography.body + color = if (isEnabled) textColor else colors.textSecondary, + style = textStyle ) } } diff --git a/app/src/main/java/com/kickstarter/ui/compose/designsystem/KSDimensions.kt b/app/src/main/java/com/kickstarter/ui/compose/designsystem/KSDimensions.kt index 5be061bb90..0c01c0a624 100644 --- a/app/src/main/java/com/kickstarter/ui/compose/designsystem/KSDimensions.kt +++ b/app/src/main/java/com/kickstarter/ui/compose/designsystem/KSDimensions.kt @@ -56,7 +56,8 @@ data class KSDimensions( val dottedListDotSize: Dp = Dp.Unspecified, val countryInputWidth: Dp = Dp.Unspecified, val storedCardImageHeight: Dp = Dp.Unspecified, - val storedCardImageWidth: Dp = Dp.Unspecified + val storedCardImageWidth: Dp = Dp.Unspecified, + val alertIconSize: Dp = Dp.Unspecified ) val LocalKSCustomDimensions = staticCompositionLocalOf { @@ -75,7 +76,7 @@ val KSStandardDimensions = KSDimensions( paddingXXLarge = 40.dp, paddingDoubleLarge = 48.dp, paddingTripleLarge = 72.dp, - minButtonHeight = 48.dp, + minButtonHeight = 40.dp, stepperHeight = 36.dp, stepperWidth = 108.dp, stepperButtonWidth = 54.dp, @@ -112,5 +113,6 @@ val KSStandardDimensions = KSDimensions( dottedListDotSize = 2.dp, countryInputWidth = 164.dp, storedCardImageHeight = 40.dp, - storedCardImageWidth = 64.dp + storedCardImageWidth = 64.dp, + alertIconSize = 14.dp ) diff --git a/app/src/main/res/drawable/ic_clock.xml b/app/src/main/res/drawable/ic_clock.xml new file mode 100644 index 0000000000..144cad5eb7 --- /dev/null +++ b/app/src/main/res/drawable/ic_clock.xml @@ -0,0 +1,9 @@ + + +