From c0b37ef2f15e6c9e797a38406838fd4a5070f6d4 Mon Sep 17 00:00:00 2001 From: Fabian DEVEL Date: Mon, 3 Feb 2025 17:18:19 +0100 Subject: [PATCH] refactor(MyKSuiteDashboard): Use TopAppBar and Scaffold --- .../ui/screens/MyKSuiteDashboardScreen.kt | 94 ++++++++++--------- .../lib/myksuite/ui/theme/ColorsDark.kt | 1 + .../lib/myksuite/ui/theme/ColorsLight.kt | 1 + .../infomaniak/lib/myksuite/ui/theme/Theme.kt | 1 + 4 files changed, 54 insertions(+), 43 deletions(-) diff --git a/MykSuite/src/main/java/com/infomaniak/lib/myksuite/ui/screens/MyKSuiteDashboardScreen.kt b/MykSuite/src/main/java/com/infomaniak/lib/myksuite/ui/screens/MyKSuiteDashboardScreen.kt index e0c7c73c..df11a08a 100644 --- a/MykSuite/src/main/java/com/infomaniak/lib/myksuite/ui/screens/MyKSuiteDashboardScreen.kt +++ b/MykSuite/src/main/java/com/infomaniak/lib/myksuite/ui/screens/MyKSuiteDashboardScreen.kt @@ -43,6 +43,7 @@ import com.infomaniak.lib.myksuite.ui.screens.components.ExpendableActionItem import com.infomaniak.lib.myksuite.ui.screens.components.LimitedFunctionalities import com.infomaniak.lib.myksuite.ui.screens.components.UserAvatar import com.infomaniak.lib.myksuite.ui.theme.Dimens +import com.infomaniak.lib.myksuite.ui.theme.LocalMyKSuiteColors import com.infomaniak.lib.myksuite.ui.theme.Margin import com.infomaniak.lib.myksuite.ui.theme.MyKSuiteTheme @@ -53,58 +54,65 @@ fun MyKSuiteDashboardScreen( dailySendingLimit: () -> String, onClose: () -> Unit = {}, ) { - Box( - Modifier - .verticalScroll(rememberScrollState()) - .background(MyKSuiteTheme.colors.background), - ) { - Image( - modifier = Modifier - .fillMaxWidth() - .fillMaxHeight(0.45f), - contentScale = ContentScale.FillBounds, - imageVector = ImageVector.vectorResource(R.drawable.illu_dashboard_background), - contentDescription = null, - ) - Column(Modifier.fillMaxSize()) { - - val paddedModifier = Modifier.padding(horizontal = Margin.Medium) - TopAppBar(onClose) - SubscriptionInfoCard(paddedModifier, avatarUri, userName, dailySendingLimit) - // TODO: Add this line when we'll have In-app payments - // MyKSuitePlusPromotionCard(paddedModifier) {} + Scaffold( + modifier = Modifier.fillMaxSize(), + topBar = { TopAppBar(onClose) }, + containerColor = MyKSuiteTheme.colors.onDriveButton, + ) { paddingValues -> + Box(Modifier.verticalScroll(rememberScrollState())) { + Image( + modifier = Modifier + .fillMaxWidth() + .fillMaxHeight(0.45f), + contentScale = ContentScale.FillBounds, + imageVector = ImageVector.vectorResource(R.drawable.illu_dashboard_background), + contentDescription = null, + ) + Column(Modifier.padding(paddingValues)) { + val paddedModifier = Modifier.padding(horizontal = Margin.Medium) + SubscriptionInfoCard(paddedModifier, avatarUri, userName, dailySendingLimit) + Spacer(Modifier.height(Margin.Large)) + // TODO: Add this line when we'll have In-app payments + // MyKSuitePlusPromotionCard(paddedModifier) {} + } } } } +@OptIn(ExperimentalMaterial3Api::class) @Composable private fun TopAppBar(onClose: () -> Unit) { - Row( - modifier = Modifier.padding(bottom = Margin.Medium, start = Margin.Mini, end = Margin.Mini), - verticalAlignment = Alignment.CenterVertically, - ) { - IconButton( - modifier = Modifier.size(Dimens.iconButtonSize), - onClick = onClose, - colors = IconButtonDefaults.iconButtonColors(contentColor = MyKSuiteTheme.colors.iconColor), - ) { - Icon( - modifier = Modifier.size(Dimens.iconSize), - imageVector = ImageVector.vectorResource(R.drawable.ic_cross_thick), - contentDescription = stringResource(R.string.buttonClose), + val localColors = LocalMyKSuiteColors.current + TopAppBar( + colors = TopAppBarDefaults.topAppBarColors( + containerColor = localColors.topAppBarBackground, + titleContentColor = localColors.primaryTextColor, + navigationIconContentColor = localColors.primaryTextColor, + ), + navigationIcon = { + IconButton( + modifier = Modifier.size(Dimens.iconButtonSize), + onClick = onClose, + ) { + Icon( + modifier = Modifier.size(Dimens.iconSize), + imageVector = ImageVector.vectorResource(R.drawable.ic_cross_thick), + contentDescription = stringResource(R.string.buttonClose), + ) + } + }, + title = { + Text( + modifier = Modifier + .padding(end = Dimens.iconButtonSize) + .fillMaxWidth(), + text = stringResource(R.string.myKSuiteDashboardTitle), + style = MyKSuiteTheme.typography.h2, + textAlign = TextAlign.Center, ) } - Text( - modifier = Modifier - .padding(end = Dimens.iconButtonSize) - .fillMaxWidth(), - text = stringResource(R.string.myKSuiteDashboardTitle), - style = MyKSuiteTheme.typography.h2, - color = MyKSuiteTheme.colors.primaryTextColor, - textAlign = TextAlign.Center, - ) - } + ) } @Composable diff --git a/MykSuite/src/main/java/com/infomaniak/lib/myksuite/ui/theme/ColorsDark.kt b/MykSuite/src/main/java/com/infomaniak/lib/myksuite/ui/theme/ColorsDark.kt index 97328186..bdbcad28 100644 --- a/MykSuite/src/main/java/com/infomaniak/lib/myksuite/ui/theme/ColorsDark.kt +++ b/MykSuite/src/main/java/com/infomaniak/lib/myksuite/ui/theme/ColorsDark.kt @@ -49,6 +49,7 @@ internal val MyKSuiteDarkColors = MyKSuiteColors( tertiaryTextColor = Color(elephant), background = Color(bat), secondaryBackground = Color(orca), + topAppBarBackground = Color(orca), chipBackground = Color(orca), drive = Color(drive), mail = Color(mail), diff --git a/MykSuite/src/main/java/com/infomaniak/lib/myksuite/ui/theme/ColorsLight.kt b/MykSuite/src/main/java/com/infomaniak/lib/myksuite/ui/theme/ColorsLight.kt index 90e1dd88..e259c59a 100644 --- a/MykSuite/src/main/java/com/infomaniak/lib/myksuite/ui/theme/ColorsLight.kt +++ b/MykSuite/src/main/java/com/infomaniak/lib/myksuite/ui/theme/ColorsLight.kt @@ -56,6 +56,7 @@ internal val MyKSuiteLightColors = MyKSuiteColors( tertiaryTextColor = Color(shark), background = Color(white), secondaryBackground = Color(white), + topAppBarBackground = Color(sky), chipBackground = Color(rabbit), drive = Color(drive), mail = Color(mail), diff --git a/MykSuite/src/main/java/com/infomaniak/lib/myksuite/ui/theme/Theme.kt b/MykSuite/src/main/java/com/infomaniak/lib/myksuite/ui/theme/Theme.kt index 4b50c47c..42f8f686 100644 --- a/MykSuite/src/main/java/com/infomaniak/lib/myksuite/ui/theme/Theme.kt +++ b/MykSuite/src/main/java/com/infomaniak/lib/myksuite/ui/theme/Theme.kt @@ -58,6 +58,7 @@ internal data class MyKSuiteColors( val tertiaryTextColor: Color = Color.Unspecified, val background: Color = Color.Unspecified, val secondaryBackground: Color = Color.Unspecified, + val topAppBarBackground: Color = Color.Unspecified, val chipBackground: Color = Color.Unspecified, val drive: Color = Color.Unspecified, val mail: Color = Color.Unspecified,