refactor(MyKSuiteDashboard): Use TopAppBar and Scaffold

Infomaniak · Feb 3, 2025 · c092335 · c092335
1 parent 8dbbfdd
commit c092335
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 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
@@ -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,64 @@ 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)
+                // 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
@@ -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
@@ -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
@@ -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,