UI Enhancements

oudaykhaled · Dec 16, 2023 · e653361 · e653361
1 parent 3488193
commit e653361
Show file tree

Hide file tree

Showing 13 changed files with 134 additions and 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
@@ -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
@@ -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
         )

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

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