From e65336177d829191f81d2f675f605b735093f325 Mon Sep 17 00:00:00 2001 From: Ouday Date: Sat, 16 Dec 2023 21:08:47 +0100 Subject: [PATCH] UI Enhancements --- .../bills/ui/view/BillsScreen.kt | 55 +++++++----- .../common/FlowStateUtils.kt | 7 +- .../creditcards/ui/view/CreditCardsScreen.kt | 13 +-- .../home/components/BillOptionsComposable.kt | 11 ++- .../home/components/BottomNavigationBar.kt | 4 +- .../home/components/CreditCardComposable.kt | 83 ++++++++++--------- .../home/components/HomeHeaderComposable.kt | 6 +- .../home/components/LoanCardComposable.kt | 5 -- .../home/ui/view/HomeScreen.kt | 16 ++-- .../ui/view/SubscriptionScreen.kt | 5 +- .../ui/theme/CryptoWalletSampleTheme.kt | 41 +++++---- .../cryptowalletsample/ui/theme/Typography.kt | 2 +- app/src/main/res/values/strings.xml | 6 ++ 13 files changed, 134 insertions(+), 120 deletions(-) diff --git a/app/src/main/java/com/ouday/cryptowalletsample/bills/ui/view/BillsScreen.kt b/app/src/main/java/com/ouday/cryptowalletsample/bills/ui/view/BillsScreen.kt index 93cc46b..25da161 100644 --- a/app/src/main/java/com/ouday/cryptowalletsample/bills/ui/view/BillsScreen.kt +++ b/app/src/main/java/com/ouday/cryptowalletsample/bills/ui/view/BillsScreen.kt @@ -8,10 +8,10 @@ import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.fillMaxWidth 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.foundation.shape.CircleShape import androidx.compose.foundation.shape.RoundedCornerShape -import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.LaunchedEffect @@ -23,20 +23,22 @@ import androidx.compose.runtime.setValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip -import androidx.compose.ui.unit.dp -import androidx.compose.ui.unit.sp +import androidx.compose.ui.res.stringResource +import androidx.compose.ui.text.style.TextOverflow import androidx.hilt.navigation.compose.hiltViewModel +import com.ouday.cryptowalletsample.R import com.ouday.cryptowalletsample.bills.data.model.Bill import com.ouday.cryptowalletsample.bills.data.model.History import com.ouday.cryptowalletsample.bills.ui.viewmodel.BillViewModel import com.ouday.cryptowalletsample.common.FlowState import com.ouday.cryptowalletsample.common.HandleFlowState import com.ouday.cryptowalletsample.home.components.BillOptionItem +import com.ouday.cryptowalletsample.ui.theme.Colors +import com.ouday.cryptowalletsample.ui.theme.MaterialCornerRadius +import com.ouday.cryptowalletsample.ui.theme.Size import com.ouday.cryptowalletsample.ui.theme.Space -import com.ouday.cryptowalletsample.ui.theme.craneColors -import com.ouday.cryptowalletsample.ui.theme.craneTypography +import com.ouday.cryptowalletsample.ui.theme.Typography import com.ouday.cryptowalletsample.ui.theme.success -import dagger.hilt.android.AndroidEntryPoint @Composable fun BillsScreen(modifier: Modifier = Modifier, viewModel: BillViewModel = hiltViewModel()) { @@ -68,12 +70,10 @@ fun BillsScreen(modifier: Modifier = Modifier, viewModel: BillViewModel = hiltVi LazyColumn { items(history.size) { index -> BillDetails(history[index]) - } } } } - }, onRetry = { viewModel.triggerFetchBills() @@ -87,34 +87,49 @@ fun BillDetails(history: History, modifier: Modifier = Modifier) { modifier = modifier .fillMaxWidth() .padding(horizontal = Space.spaceSmall, vertical = Space.spaceSmall) - .clip(RoundedCornerShape(14.dp)) // First clip, then apply background - .background(craneColors.primaryVariant) - .padding(16.dp), // Padding goes after background + .clip(RoundedCornerShape(MaterialCornerRadius.radiusMedium)) + .background(Colors.primaryVariant) + .padding(Space.spaceMedium), verticalAlignment = Alignment.CenterVertically, ) { Column( modifier = Modifier.weight(1f) ) { Text( - text = "Date: ${history.date}", - style = craneTypography.body1 + text = stringResource( + R.string.bill_date, + history.date + ), + style = Typography.body1, + maxLines = 1, + overflow = TextOverflow.Ellipsis, + color = Colors.onSurface ) Text( - text = "Amount: \$${history.amount}", - style = craneTypography.body1 + text = stringResource( + R.string.bill_amount, + history.amount + ), + style = Typography.body1, + maxLines = 1, + overflow = TextOverflow.Ellipsis, + color = Colors.onSurface ) } Box( modifier = Modifier - .size(24.dp) + .width(Size.size3XLarge) + .size(Space.spaceLarge) .clip(CircleShape) - .background(if (history.paid) craneColors.success else craneColors.error), + .background(if (history.paid) Colors.success else Colors.error), contentAlignment = Alignment.Center ) { Text( - text = if (history.paid) "✓" else "✕", - color = craneColors.background, - fontSize = 12.sp + text = if (history.paid) stringResource(R.string.paid) else stringResource(R.string.not_paid), + color = Colors.onSurface, + style = Typography.caption, + maxLines = 1, + overflow = TextOverflow.Ellipsis ) } } diff --git a/app/src/main/java/com/ouday/cryptowalletsample/common/FlowStateUtils.kt b/app/src/main/java/com/ouday/cryptowalletsample/common/FlowStateUtils.kt index fb29dc4..5b345cc 100644 --- a/app/src/main/java/com/ouday/cryptowalletsample/common/FlowStateUtils.kt +++ b/app/src/main/java/com/ouday/cryptowalletsample/common/FlowStateUtils.kt @@ -20,7 +20,6 @@ import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.Error import androidx.compose.material3.Button import androidx.compose.material3.Icon -import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue @@ -32,7 +31,7 @@ import androidx.compose.ui.graphics.Color import androidx.compose.ui.platform.testTag import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.unit.dp -import com.ouday.cryptowalletsample.ui.theme.craneColors +import com.ouday.cryptowalletsample.ui.theme.Colors @Composable fun HandleFlowState( @@ -118,14 +117,14 @@ fun ErrorContent(errorMessage: String, onRetry: () -> Unit) { verticalArrangement = Arrangement.Center ) { // Error icon or image (optional) - Icon(Icons.Filled.Error, contentDescription = "Error", tint = craneColors.error) + Icon(Icons.Filled.Error, contentDescription = "Error", tint = Colors.error) Spacer(modifier = Modifier.height(16.dp)) // Error message text Text( text = errorMessage, - color = craneColors.error, + color = Colors.error, style = typography.body1, textAlign = TextAlign.Center ) diff --git a/app/src/main/java/com/ouday/cryptowalletsample/creditcards/ui/view/CreditCardsScreen.kt b/app/src/main/java/com/ouday/cryptowalletsample/creditcards/ui/view/CreditCardsScreen.kt index b0bfdd4..a144818 100644 --- a/app/src/main/java/com/ouday/cryptowalletsample/creditcards/ui/view/CreditCardsScreen.kt +++ b/app/src/main/java/com/ouday/cryptowalletsample/creditcards/ui/view/CreditCardsScreen.kt @@ -1,33 +1,22 @@ package com.ouday.cryptowalletsample.creditcards.ui.view -import CreditCardComposable import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.fillMaxWidth -import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.lazy.LazyColumn -import androidx.compose.foundation.lazy.LazyRow import androidx.compose.runtime.Composable import androidx.compose.runtime.LaunchedEffect import androidx.compose.runtime.collectAsState import androidx.compose.runtime.getValue -import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier -import androidx.compose.ui.unit.dp import androidx.hilt.navigation.compose.hiltViewModel -import com.google.accompanist.pager.HorizontalPager -import com.google.accompanist.pager.HorizontalPagerIndicator -import com.google.accompanist.pager.rememberPagerState import com.ouday.cryptowalletsample.common.FlowState import com.ouday.cryptowalletsample.common.HandleFlowState import com.ouday.cryptowalletsample.creditcards.data.model.CreditCardInfo import com.ouday.cryptowalletsample.creditcards.ui.viewmodel.CreditCardViewModel -import com.ouday.cryptowalletsample.home.components.LoanCardComposable -import com.ouday.cryptowalletsample.home.ui.view.CreditCardsPager -import com.ouday.cryptowalletsample.ui.theme.Size +import com.ouday.cryptowalletsample.home.components.CreditCardComposable import com.ouday.cryptowalletsample.ui.theme.Space -import com.ouday.cryptowalletsample.ui.theme.craneColors @Composable fun CreditCardsScreen(modifier: Modifier = Modifier, viewModel: CreditCardViewModel = hiltViewModel()) { diff --git a/app/src/main/java/com/ouday/cryptowalletsample/home/components/BillOptionsComposable.kt b/app/src/main/java/com/ouday/cryptowalletsample/home/components/BillOptionsComposable.kt index 2cd36a3..bd45f9b 100644 --- a/app/src/main/java/com/ouday/cryptowalletsample/home/components/BillOptionsComposable.kt +++ b/app/src/main/java/com/ouday/cryptowalletsample/home/components/BillOptionsComposable.kt @@ -18,7 +18,6 @@ import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip -import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.painter.Painter import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.text.style.TextAlign @@ -29,8 +28,8 @@ import com.ouday.cryptowalletsample.R import com.ouday.cryptowalletsample.bills.data.model.Bill import com.ouday.cryptowalletsample.ui.theme.Size import com.ouday.cryptowalletsample.ui.theme.Space -import com.ouday.cryptowalletsample.ui.theme.craneColors -import com.ouday.cryptowalletsample.ui.theme.craneTypography +import com.ouday.cryptowalletsample.ui.theme.Colors +import com.ouday.cryptowalletsample.ui.theme.Typography import coil.decode.SvgDecoder import coil.imageLoader import coil.request.ImageRequest @@ -65,7 +64,7 @@ fun BillOptionItem( modifier = Modifier .clip(RoundedCornerShape(Size.sizeSmall)) .fillMaxWidth() - .background(craneColors.primary.copy(alpha = if (isSelected) 0.8f else 0.2f)) + .background(Colors.primary.copy(alpha = if (isSelected) 0.8f else 0.2f)) .wrapContentHeight() ) { IconButton(onClick = { onBillClicked(bill) }) { @@ -76,7 +75,7 @@ fun BillOptionItem( modifier = Modifier .size(Size.sizeLarge) .padding(Space.space2XSmall), - tint = if (isSelected) craneColors.background else craneColors.onSurface + tint = if (isSelected) Colors.background else Colors.onSurface ) } } @@ -87,7 +86,7 @@ fun BillOptionItem( .fillMaxWidth() .fillMaxHeight(), textAlign = TextAlign.Center, - style = craneTypography.caption.copy(fontSize = 8.sp) + style = Typography.caption.copy(fontSize = 8.sp) ) } } \ No newline at end of file diff --git a/app/src/main/java/com/ouday/cryptowalletsample/home/components/BottomNavigationBar.kt b/app/src/main/java/com/ouday/cryptowalletsample/home/components/BottomNavigationBar.kt index c89b210..f6b7a62 100644 --- a/app/src/main/java/com/ouday/cryptowalletsample/home/components/BottomNavigationBar.kt +++ b/app/src/main/java/com/ouday/cryptowalletsample/home/components/BottomNavigationBar.kt @@ -23,7 +23,7 @@ import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.vector.ImageVector import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp -import com.ouday.cryptowalletsample.ui.theme.craneColors +import com.ouday.cryptowalletsample.ui.theme.Colors @Composable fun BottomNavigationBar( @@ -36,7 +36,7 @@ fun BottomNavigationBar( modifier = Modifier .fillMaxWidth() .height(50.dp) - .background(craneColors.surface, RoundedCornerShape(30.dp)), + .background(Colors.surface, RoundedCornerShape(30.dp)), containerColor = Color.Transparent ) { var selectedItem by remember { mutableStateOf(BottomNavItem.Home) } diff --git a/app/src/main/java/com/ouday/cryptowalletsample/home/components/CreditCardComposable.kt b/app/src/main/java/com/ouday/cryptowalletsample/home/components/CreditCardComposable.kt index 9fe3d73..8f505e3 100644 --- a/app/src/main/java/com/ouday/cryptowalletsample/home/components/CreditCardComposable.kt +++ b/app/src/main/java/com/ouday/cryptowalletsample/home/components/CreditCardComposable.kt @@ -1,30 +1,35 @@ +package com.ouday.cryptowalletsample.home.components + import androidx.compose.foundation.background -import androidx.compose.foundation.layout.* +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.padding import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material3.Button import androidx.compose.material3.Text import androidx.compose.runtime.Composable -import androidx.compose.runtime.collectAsState import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip -import androidx.compose.ui.graphics.Color +import androidx.compose.ui.res.stringResource import androidx.compose.ui.text.font.FontWeight -import androidx.compose.ui.unit.dp -import androidx.compose.ui.unit.sp import androidx.constraintlayout.compose.ConstraintLayout -import androidx.hilt.navigation.compose.hiltViewModel +import com.ouday.cryptowalletsample.R import com.ouday.cryptowalletsample.creditcards.data.model.CreditCardInfo -import com.ouday.cryptowalletsample.creditcards.ui.viewmodel.CreditCardViewModel -import com.ouday.cryptowalletsample.ui.theme.* +import com.ouday.cryptowalletsample.ui.theme.Colors +import com.ouday.cryptowalletsample.ui.theme.MaterialCornerRadius +import com.ouday.cryptowalletsample.ui.theme.Size +import com.ouday.cryptowalletsample.ui.theme.Space +import com.ouday.cryptowalletsample.ui.theme.Typography @Composable fun CreditCardComposable(cardInfo: CreditCardInfo, modifier: Modifier = Modifier) { Box( modifier = modifier - .height(200.dp) // Adjust the height as needed - .clip(RoundedCornerShape(16.dp)) // Adjust corner size as needed - .background(Color.Black) // Use your theme's color - .padding(16.dp) // Use your theme's padding + .height(Size.sizeXMax) // Using Size from CryptoWalletSampleTheme + .clip(RoundedCornerShape(MaterialCornerRadius.radiusMedium)) // Using MaterialCornerRadius from CryptoWalletSampleTheme + .background(Colors.surface) // Using Colors from CryptoWalletSampleTheme + .padding(Space.spaceMedium) // Using Space from CryptoWalletSampleTheme ) { ConstraintLayout( modifier = Modifier.fillMaxSize() @@ -33,67 +38,67 @@ fun CreditCardComposable(cardInfo: CreditCardInfo, modifier: Modifier = Modifier Text( text = cardInfo.cardType, - color = Color.White, - style = craneTypography.h6, // Use your theme's typography + color = Colors.onSurface, + style = Typography.h6, modifier = Modifier.constrainAs(cardType) { - top.linkTo(parent.top, margin = 16.dp) - start.linkTo(parent.start, margin = 16.dp) + top.linkTo(parent.top, margin = Space.spaceMedium) + start.linkTo(parent.start, margin = Space.spaceMedium) } ) Text( text = cardInfo.cardNumber, // Masked number for privacy - color = Color.White, - style = craneTypography.h6, // Use your theme's typography + color = Colors.onSurface, + style = Typography.h6, modifier = Modifier.constrainAs(cardNumber) { - top.linkTo(cardType.bottom, margin = 8.dp) - end.linkTo(parent.end, margin = 16.dp) + top.linkTo(cardType.bottom, margin = Space.spaceSmall) + end.linkTo(parent.end, margin = Space.spaceMedium) } ) Text( - text = "Due Date ${cardInfo.dueDate}", - color = Color.White, - style = craneTypography.subtitle1, // Use your theme's typography + text = stringResource(R.string.due_date, cardInfo.dueDate), + color = Colors.onSurface, + style = Typography.subtitle1, modifier = Modifier.constrainAs(dueDate) { - top.linkTo(cardNumber.bottom, margin = 8.dp) - start.linkTo(parent.start, margin = 16.dp) + top.linkTo(cardNumber.bottom, margin = Space.spaceSmall) + start.linkTo(parent.start, margin = Space.spaceMedium) } ) Text( text = cardInfo.amountDue, - color = Color.White, - style = craneTypography.h4.copy(fontSize = 30.sp, fontWeight = FontWeight.Bold), // Use your theme's typography + color = Colors.onSurface, + style = Typography.h4.copy(fontWeight = FontWeight.Bold), modifier = Modifier.constrainAs(amount) { - top.linkTo(dueDate.bottom, margin = 8.dp) - start.linkTo(parent.start, margin = 16.dp) + top.linkTo(dueDate.bottom, margin = Space.spaceSmall) + start.linkTo(parent.start, margin = Space.spaceMedium) } ) Button( onClick = { /* Handle the payment action */ }, modifier = Modifier.constrainAs(payButton) { - bottom.linkTo(parent.bottom, margin = 16.dp) - end.linkTo(parent.end, margin = 16.dp) + bottom.linkTo(parent.bottom, margin = Space.spaceMedium) + end.linkTo(parent.end, margin = Space.spaceMedium) } ) { Text( - text = "PAY", - style = craneTypography.button, // Use your theme's typography - color = Color.White + text = stringResource(R.string.pay), + style = Typography.button, + color = Colors.onSurface ) } Text( text = cardInfo.paymentStatus, - color = Color.White, - style = craneTypography.overline, // Use your theme's typography + color = Colors.onSurface, + style = Typography.overline, modifier = Modifier.constrainAs(paymentStatus) { - start.linkTo(parent.start, margin = 16.dp) - bottom.linkTo(payButton.top, margin = 8.dp) + start.linkTo(parent.start, margin = Space.spaceMedium) + bottom.linkTo(payButton.top, margin = Space.spaceSmall) } ) } } -} +} \ No newline at end of file diff --git a/app/src/main/java/com/ouday/cryptowalletsample/home/components/HomeHeaderComposable.kt b/app/src/main/java/com/ouday/cryptowalletsample/home/components/HomeHeaderComposable.kt index d445fef..a3c5992 100644 --- a/app/src/main/java/com/ouday/cryptowalletsample/home/components/HomeHeaderComposable.kt +++ b/app/src/main/java/com/ouday/cryptowalletsample/home/components/HomeHeaderComposable.kt @@ -12,8 +12,8 @@ import androidx.constraintlayout.compose.ConstraintLayout import com.ouday.cryptowalletsample.R import com.ouday.cryptowalletsample.ui.theme.Size import com.ouday.cryptowalletsample.ui.theme.Space -import com.ouday.cryptowalletsample.ui.theme.craneColors -import com.ouday.cryptowalletsample.ui.theme.craneTypography +import com.ouday.cryptowalletsample.ui.theme.Colors +import com.ouday.cryptowalletsample.ui.theme.Typography @Composable fun HomeHeaderComposable(username: String, modifier: Modifier = Modifier) { @@ -67,7 +67,7 @@ fun UsernameText(username: String, modifier: Modifier) { Text( text = username, modifier = modifier.padding(start = Space.spaceMedium), - style = craneTypography.h5.copy(color = craneColors.primary) + style = Typography.h5.copy(color = Colors.primary) ) } diff --git a/app/src/main/java/com/ouday/cryptowalletsample/home/components/LoanCardComposable.kt b/app/src/main/java/com/ouday/cryptowalletsample/home/components/LoanCardComposable.kt index fc53ea3..64bea6b 100644 --- a/app/src/main/java/com/ouday/cryptowalletsample/home/components/LoanCardComposable.kt +++ b/app/src/main/java/com/ouday/cryptowalletsample/home/components/LoanCardComposable.kt @@ -6,9 +6,7 @@ import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.fillMaxSize 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.shape.RoundedCornerShape import androidx.compose.material.LinearProgressIndicator import androidx.compose.material.MaterialTheme @@ -16,7 +14,6 @@ import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier -import androidx.compose.ui.draw.clip import androidx.compose.ui.graphics.Color import androidx.compose.ui.res.painterResource import androidx.compose.ui.unit.dp @@ -25,8 +22,6 @@ import androidx.constraintlayout.compose.ConstraintLayout import androidx.constraintlayout.compose.ConstraintLayoutScope import com.ouday.cryptowalletsample.R import com.ouday.cryptowalletsample.subscriptions.data.model.Subscription -import com.ouday.cryptowalletsample.ui.theme.Size -import com.ouday.cryptowalletsample.ui.theme.craneColors @Composable fun LoanCardComposable( diff --git a/app/src/main/java/com/ouday/cryptowalletsample/home/ui/view/HomeScreen.kt b/app/src/main/java/com/ouday/cryptowalletsample/home/ui/view/HomeScreen.kt index 4f2a1c6..02287b4 100644 --- a/app/src/main/java/com/ouday/cryptowalletsample/home/ui/view/HomeScreen.kt +++ b/app/src/main/java/com/ouday/cryptowalletsample/home/ui/view/HomeScreen.kt @@ -1,6 +1,5 @@ package com.ouday.cryptowalletsample.home.ui.view -import CreditCardComposable import androidx.compose.foundation.background import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box @@ -32,12 +31,13 @@ import com.ouday.cryptowalletsample.common.FlowState import com.ouday.cryptowalletsample.common.HandleFlowState import com.ouday.cryptowalletsample.creditcards.data.model.CreditCardInfo import com.ouday.cryptowalletsample.home.components.BillOptionItem +import com.ouday.cryptowalletsample.home.components.CreditCardComposable import com.ouday.cryptowalletsample.home.components.LoanCardComposable import com.ouday.cryptowalletsample.home.ui.viewmodel.HomeViewModel import com.ouday.cryptowalletsample.ui.theme.Size import com.ouday.cryptowalletsample.ui.theme.Space -import com.ouday.cryptowalletsample.ui.theme.craneColors -import com.ouday.cryptowalletsample.ui.theme.craneTypography +import com.ouday.cryptowalletsample.ui.theme.Colors +import com.ouday.cryptowalletsample.ui.theme.Typography @Composable fun HomeScreen(modifier: Modifier = Modifier, viewModel: HomeViewModel = hiltViewModel()) { @@ -53,7 +53,7 @@ fun HomeScreen(modifier: Modifier = Modifier, viewModel: HomeViewModel = hiltVie Spacer(modifier = Modifier.height(Space.spaceMedium)) Text( text = "Bill Payments", - style = craneTypography.subtitle1, + style = Typography.subtitle1, modifier = Modifier.padding(start = Space.spaceLarge) ) Spacer(modifier = Modifier.height(Space.spaceSmall)) @@ -61,7 +61,7 @@ fun HomeScreen(modifier: Modifier = Modifier, viewModel: HomeViewModel = hiltVie Spacer(modifier = Modifier.height(Space.spaceSmall)) Text( text = "Active Loans", - style = craneTypography.subtitle1, + style = Typography.subtitle1, modifier = Modifier.padding(start = Space.spaceLarge) ) Spacer(modifier = Modifier.height(Space.spaceSmall)) @@ -91,7 +91,7 @@ fun Subscriptions(viewModel: HomeViewModel = hiltViewModel()) { .width(Size.size2XMax) .height(Size.sizeMax) .clip(RoundedCornerShape(Size.sizeSmall)) - .background(craneColors.primary.copy(alpha = 0.2f)) + .background(Colors.primary.copy(alpha = 0.2f)) .padding(Size.sizeMedium) ) } @@ -175,8 +175,8 @@ fun CreditCardsPager(creditCards: List) { HorizontalPagerIndicator( pagerState = pagerState, modifier = Modifier.align(Alignment.CenterHorizontally), - activeColor = craneColors.primary, - inactiveColor = craneColors.primary.copy(alpha = 0.6f) + activeColor = Colors.primary, + inactiveColor = Colors.primary.copy(alpha = 0.6f) ) } } \ No newline at end of file diff --git a/app/src/main/java/com/ouday/cryptowalletsample/subscriptions/ui/view/SubscriptionScreen.kt b/app/src/main/java/com/ouday/cryptowalletsample/subscriptions/ui/view/SubscriptionScreen.kt index 9775f37..7527e40 100644 --- a/app/src/main/java/com/ouday/cryptowalletsample/subscriptions/ui/view/SubscriptionScreen.kt +++ b/app/src/main/java/com/ouday/cryptowalletsample/subscriptions/ui/view/SubscriptionScreen.kt @@ -6,7 +6,6 @@ import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding -import androidx.compose.foundation.layout.width import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.runtime.Composable @@ -23,7 +22,7 @@ import com.ouday.cryptowalletsample.subscriptions.data.model.Subscription import com.ouday.cryptowalletsample.subscriptions.ui.viewmodel.SubscriptionViewModel import com.ouday.cryptowalletsample.ui.theme.Size import com.ouday.cryptowalletsample.ui.theme.Space -import com.ouday.cryptowalletsample.ui.theme.craneColors +import com.ouday.cryptowalletsample.ui.theme.Colors @Composable fun SubscriptionScreen(modifier: Modifier = Modifier, viewModel: SubscriptionViewModel = hiltViewModel()) { @@ -60,7 +59,7 @@ fun SubscriptionsList(subscriptions: List, modifier: Modifier = Mo .fillMaxWidth() .height(Size.sizeMax) .clip(RoundedCornerShape(Size.sizeSmall)) - .background(craneColors.primary.copy(alpha = 0.2f)) + .background(Colors.primary.copy(alpha = 0.2f)) .padding(Size.sizeMedium) ) } diff --git a/app/src/main/java/com/ouday/cryptowalletsample/ui/theme/CryptoWalletSampleTheme.kt b/app/src/main/java/com/ouday/cryptowalletsample/ui/theme/CryptoWalletSampleTheme.kt index a9401f8..2f81929 100644 --- a/app/src/main/java/com/ouday/cryptowalletsample/ui/theme/CryptoWalletSampleTheme.kt +++ b/app/src/main/java/com/ouday/cryptowalletsample/ui/theme/CryptoWalletSampleTheme.kt @@ -1,6 +1,5 @@ package com.ouday.cryptowalletsample.ui.theme -import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material.Colors import androidx.compose.material.MaterialTheme import androidx.compose.material.lightColors @@ -9,22 +8,15 @@ import androidx.compose.ui.graphics.Color import androidx.compose.ui.unit.dp val Colors.success: Color - get() = Color(0xFF5DB83B) - -val craneColors = lightColors( - primary = Color(0xFF5D1049), - primaryVariant = Color(0x2D5D1049), - secondary = Color(0xFFE30425), - surface = Color(0x65720D5D), - onSurface = Color(0xFF200217), - onBackground = Color(0xFF000000) -) + get() = Color(0xFF4CAF50) // Example: Changed to Material Green -val BottomSheetShape = RoundedCornerShape( - topStart = 20.dp, - topEnd = 20.dp, - bottomStart = 0.dp, - bottomEnd = 0.dp +val Colors = lightColors( + primary = Color(0xFF6200EE), // Example: Changed to Material Deep Purple + primaryVariant = Color(0xFF3700B3), // Example: Changed to a darker shade of Deep Purple + secondary = Color(0xFF03DAC6), // Example: Changed to Material Teal + surface = Color(0xFF121212), // Example: Changed to a dark surface color + onSurface = Color(0xFFFFFFFF), // Example: Changed to White for contrast on dark surface + onBackground = Color(0xFF000000) // Example: Black for background ) object Size { @@ -54,9 +46,24 @@ object Space { val spaceMax = 64.dp } +object MaterialCornerRadius { + val radiusExtraSmall = 4.dp + val radiusSmall = 8.dp + val radiusMedium = 12.dp + val radiusLarge = 16.dp + val radiusExtraLarge = 20.dp +} + +object MaterialElevation { + val elevationLevel1 = 2.dp // For components like buttons + val elevationLevel2 = 4.dp // For small components like cards + val elevationLevel3 = 6.dp // For medium components + val elevationLevel4 = 8.dp // For large components +} + @Composable fun CryptoWalletSampleTheme(content: @Composable () -> Unit) { - MaterialTheme(colors = craneColors, typography = craneTypography) { + MaterialTheme(colors = Colors, typography = Typography) { content() } } diff --git a/app/src/main/java/com/ouday/cryptowalletsample/ui/theme/Typography.kt b/app/src/main/java/com/ouday/cryptowalletsample/ui/theme/Typography.kt index dfc9c0e..c58beb2 100644 --- a/app/src/main/java/com/ouday/cryptowalletsample/ui/theme/Typography.kt +++ b/app/src/main/java/com/ouday/cryptowalletsample/ui/theme/Typography.kt @@ -37,7 +37,7 @@ val captionTextStyle = TextStyle( fontSize = 16.sp ) -val craneTypography = Typography( +val Typography = Typography( h1 = TextStyle( fontFamily = craneFontFamily, fontWeight = FontWeight.W300, diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml index 083b15a..e8b59b7 100644 --- a/app/src/main/res/values/strings.xml +++ b/app/src/main/res/values/strings.xml @@ -1,3 +1,9 @@ Crypto Wallet Sample + Date: %1$s + Amount: %1$s + Paid + Not Paid + Due Date %1$s + PAY \ No newline at end of file