UI Enhancements

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
  )
  }
  }

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 <T> 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
  )

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()) {

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)
  )
  }
 }

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>(BottomNavItem.Home) }

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)
  }
  )
  }
  }
-}
+}