feat: Update my kSuite button color (#323)

Author: FabianDevel

MyKSuite/src/main/java/com/infomaniak/core/myksuite/ui/components/MyKSuiteChips.kt

@@ -18,6 +18,7 @@
 package com.infomaniak.core.myksuite.ui.components
 
 import android.content.res.Configuration
+import androidx.annotation.ColorInt
 import androidx.annotation.DrawableRes
 import androidx.annotation.StringRes
 import androidx.compose.foundation.Image
@@ -40,7 +41,7 @@ import com.infomaniak.core.myksuite.ui.theme.Margin
 import com.infomaniak.core.myksuite.ui.theme.MyKSuiteTheme
 
 @Composable
-fun MyKSuiteChip(modifier: Modifier = Modifier, tier: MyKSuiteTier, backgroundColor: Int? = null) {
+fun MyKSuiteChip(modifier: Modifier = Modifier, tier: MyKSuiteTier, @ColorInt backgroundColor: Int? = null) {
     Image(
         modifier = modifier
             .background(

MyKSuite/src/main/java/com/infomaniak/core/myksuite/ui/components/MyKSuitePrimaryButton.kt

@@ -21,14 +21,11 @@ import android.content.res.Configuration
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.height
-import androidx.compose.material3.Button
-import androidx.compose.material3.Surface
-import androidx.compose.material3.Text
+import androidx.compose.material3.*
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.tooling.preview.Preview
-import com.infomaniak.core.myksuite.ui.screens.components.MyKSuiteButtonColors
 import com.infomaniak.core.myksuite.ui.screens.components.MyKSuiteButtonType
 import com.infomaniak.core.myksuite.ui.theme.Dimens
 import com.infomaniak.core.myksuite.ui.theme.Margin
@@ -39,13 +36,15 @@ import com.infomaniak.core.myksuite.ui.theme.Typography
 internal fun MyKSuitePrimaryButton(
     modifier: Modifier = Modifier,
     text: String,
-    colors: @Composable () -> MyKSuiteButtonColors,
     shape: Shape,
     onClick: () -> Unit,
 ) {
     Button(
         modifier = modifier.height(Dimens.buttonHeight),
-        colors = colors().buttonColors(),
+        colors = ButtonDefaults.buttonColors(
+            containerColor = MaterialTheme.colorScheme.primary,
+            contentColor = MaterialTheme.colorScheme.onPrimary,
+        ),
         shape = shape,
         onClick = onClick,
     ) {
@@ -63,13 +62,11 @@ private fun Preview() {
                 MyKSuitePrimaryButton(
                     text = "Lorem",
                     shape = MyKSuiteButtonType.Mail.shape,
-                    colors = MyKSuiteButtonType.Mail.colors,
                     onClick = {},
                 )
                 MyKSuitePrimaryButton(
                     text = "Close",
                     shape = MyKSuiteButtonType.Drive.shape,
-                    colors = MyKSuiteButtonType.Drive.colors,
                     onClick = {},
                 )
             }

MyKSuite/src/main/java/com/infomaniak/core/myksuite/ui/screens/MyKSuiteDashboardScreen.kt

@@ -41,7 +41,9 @@ import com.infomaniak.core.myksuite.R
 import com.infomaniak.core.myksuite.ui.components.*
 import com.infomaniak.core.myksuite.ui.network.ApiRoutes
 import com.infomaniak.core.myksuite.ui.screens.components.*
-import com.infomaniak.core.myksuite.ui.theme.*
+import com.infomaniak.core.myksuite.ui.theme.Dimens
+import com.infomaniak.core.myksuite.ui.theme.LocalMyKSuiteColors
+import com.infomaniak.core.myksuite.ui.theme.Margin
 import com.infomaniak.core.myksuite.ui.theme.Typography
 import com.infomaniak.core.useravatar.AvatarData
 import com.infomaniak.core.useravatar.exposed.UserAvatar
@@ -52,34 +54,32 @@ import java.util.Date
 
 @Composable
 fun MyKSuiteDashboardScreen(dashboardScreenData: () -> MyKSuiteDashboardScreenData, onClose: () -> Unit = {}) {
-    MyKSuiteTheme {
-        Scaffold(
-            topBar = { TopAppBar(onClose) },
-            containerColor = LocalMyKSuiteColors.current.onPrimaryButton,
-        ) { paddingValues ->
-            Box(
-                Modifier
-                    .fillMaxHeight()
-                    .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), verticalArrangement = Arrangement.spacedBy(Margin.Large)) {
-                    val paddedModifier = Modifier.padding(horizontal = Margin.Medium)
-                    SubscriptionInfoCard(paddedModifier, dashboardScreenData)
+    Scaffold(
+        topBar = { TopAppBar(onClose) },
+        containerColor = LocalMyKSuiteColors.current.onPrimaryButton,
+    ) { paddingValues ->
+        Box(
+            Modifier
+                .fillMaxHeight()
+                .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), verticalArrangement = Arrangement.spacedBy(Margin.Large)) {
+                val paddedModifier = Modifier.padding(horizontal = Margin.Medium)
+                SubscriptionInfoCard(paddedModifier, dashboardScreenData)
 
-                    if (dashboardScreenData().myKSuiteTier == MyKSuiteTier.Free) {
-                        // TODO: Add this line when we'll have In-app payments
-                        // MyKSuitePlusPromotionCard(paddedModifier) {}
-                    } else {
-                        AdvantagesCard(paddedModifier)
-                    }
+                if (dashboardScreenData().myKSuiteTier == MyKSuiteTier.Free) {
+                    // TODO: Add this line when we'll have In-app payments
+                    // MyKSuitePlusPromotionCard(paddedModifier) {}
+                } else {
+                    AdvantagesCard(paddedModifier)
                 }
             }
         }
@@ -237,12 +237,6 @@ private fun MyKSuitePlusPromotionCard(modifier: Modifier = Modifier, onButtonCli
                 MyKSuitePrimaryButton(
                     modifier = Modifier.fillMaxWidth(),
                     text = stringResource(R.string.myKSuiteDashboardFreeTrialButton),
-                    colors = {
-                        MyKSuiteButtonColors(
-                            containerColor = localColors.primaryButton,
-                            contentColor = localColors.onPrimaryButton,
-                        )
-                    },
                     shape = RoundedCornerShape(Dimens.largeCornerRadius),
                     onClick = onButtonClicked,
                 )

MyKSuite/src/main/java/com/infomaniak/core/myksuite/ui/screens/MyKSuiteUpgradeBottomSheet.kt

@@ -51,10 +51,8 @@ fun MyKSuiteUpgradeBottomSheet(
     sheetState: SheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true),
     onDismissRequest: () -> Unit,
 ) {
-    MyKSuiteTheme {
-        ModalBottomSheet(onDismissRequest, modifier, sheetState) {
-            UpgradeBottomSheetContent(app, onDismissRequest)
-        }
+    ModalBottomSheet(onDismissRequest, modifier, sheetState) {
+        UpgradeBottomSheetContent(app, onDismissRequest)
     }
 }
 
@@ -103,7 +101,6 @@ private fun UpgradeBottomSheetContent(app: KSuiteApp, onButtonClicked: () -> Uni
         MyKSuitePrimaryButton(
             modifier = paddedModifier.fillMaxWidth(),
             text = stringResource(R.string.buttonClose),
-            colors = app.buttonStyle.colors,
             shape = app.buttonStyle.shape,
             onClick = onButtonClicked,
         )

MyKSuite/src/main/java/com/infomaniak/core/myksuite/ui/screens/components/MyKSuiteButtonType.kt

@@ -18,43 +18,11 @@
 package com.infomaniak.core.myksuite.ui.screens.components
 
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material3.ButtonColors
-import androidx.compose.material3.ButtonDefaults
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.unit.dp
 import com.infomaniak.core.myksuite.ui.theme.Dimens
-import com.infomaniak.core.myksuite.ui.theme.LocalMyKSuiteColors
 
-internal enum class MyKSuiteButtonType(val colors: @Composable () -> MyKSuiteButtonColors, val shape: Shape) {
-    Mail(
-        colors = {
-            val localColors = LocalMyKSuiteColors.current
-            MyKSuiteButtonColors(
-                containerColor = localColors.mailButton,
-                contentColor = localColors.onMailButton,
-            )
-        },
-        shape = RoundedCornerShape(Dimens.largeCornerRadius),
-    ),
-    Drive(
-        colors = {
-            val localColors = LocalMyKSuiteColors.current
-            MyKSuiteButtonColors(
-                containerColor = localColors.primaryButton,
-                contentColor = localColors.onPrimaryButton,
-            )
-        },
-        shape = RoundedCornerShape(10.dp),
-    ),
-}
-
-internal data class MyKSuiteButtonColors(val containerColor: Color, val contentColor: Color) {
-
-    @Composable
-    fun buttonColors(): ButtonColors = ButtonDefaults.buttonColors(
-        containerColor = containerColor,
-        contentColor = contentColor,
-    )
+internal enum class MyKSuiteButtonType(val shape: Shape) {
+    Mail(shape = RoundedCornerShape(Dimens.largeCornerRadius)),
+    Drive(shape = RoundedCornerShape(10.dp)),
 }

MyKSuite/src/main/java/com/infomaniak/core/myksuite/ui/theme/ColorsDark.kt

@@ -34,7 +34,9 @@ private const val onMailButton = 0xFF3F0018
 private const val mail = 0xFFF2357A
 private const val drive = 0xFF5C89F7
 
-internal val DarkColorScheme = darkColorScheme(
+internal fun getDarkColorScheme(primaryColor: Color, onPrimaryColor: Color) = darkColorScheme(
+    primary = primaryColor,
+    onPrimary = onPrimaryColor,
     onSurfaceVariant = Color(rabbit), // Used for bottom sheet drag handle
     surfaceContainerLow = Color(bat), // Used for bottom sheet backgrounds
     surfaceContainerHighest = Color(bat), // Used for Card backgrounds

MyKSuite/src/main/java/com/infomaniak/core/myksuite/ui/theme/ColorsLight.kt

@@ -41,7 +41,9 @@ private const val onMailButton = 0xFFFEF8F7
 private const val mail = 0xFFF2357A
 private const val drive = 0xFF5C89F7
 
-internal val LightColorScheme = lightColorScheme(
+internal fun getLightColorScheme(primaryColor: Color, onPrimaryColor: Color) = lightColorScheme(
+    primary = primaryColor,
+    onPrimary = onPrimaryColor,
     onSurfaceVariant = Color(mouse), // Used for bottom sheet drag handle
     surfaceContainerLow = Color(white), // Used for bottom sheet backgrounds
     surfaceContainerHighest = Color(sky), // Used for Card backgrounds

MyKSuite/src/main/java/com/infomaniak/core/myksuite/ui/theme/Theme.kt

@@ -17,16 +17,41 @@
  */
 package com.infomaniak.core.myksuite.ui.theme
 
+import android.content.Context
+import androidx.annotation.AttrRes
 import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.material3.LocalTextStyle
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.*
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.LocalContext
+import com.google.android.material.color.MaterialColors
+import com.google.android.material.R as RMaterial
 
 internal val LocalMyKSuiteColors: ProvidableCompositionLocal<MyKSuiteColors> = staticCompositionLocalOf { MyKSuiteColors() }
 
+/**
+ * This theme should be used in any XML View's wrapper class, as it uses the XML material attributes
+ */
+@Composable
+internal fun MyKSuiteXMLTheme(content: @Composable () -> Unit) {
+    val context = LocalContext.current
+    MyKSuiteTheme(
+        primaryColor = getMaterialColor(context, RMaterial.attr.colorPrimary),
+        onPrimaryColor = getMaterialColor(context, RMaterial.attr.colorOnPrimary),
+        content = content,
+    )
+}
+
+/**
+ * Basic theme to use if the components are called from Compose
+ */
 @Composable
-internal fun MyKSuiteTheme(content: @Composable () -> Unit) {
+internal fun MyKSuiteTheme(
+    primaryColor: Color = MaterialTheme.colorScheme.primary,
+    onPrimaryColor: Color = MaterialTheme.colorScheme.onPrimary,
+    content: @Composable () -> Unit,
+) {
     val isDarkTheme = isSystemInDarkTheme()
     val customColors = if (isDarkTheme) MyKSuiteDarkColors else MyKSuiteLightColors
 
@@ -35,7 +60,11 @@ internal fun MyKSuiteTheme(content: @Composable () -> Unit) {
         LocalMyKSuiteColors provides customColors,
     ) {
         MaterialTheme(
-            colorScheme = if (isDarkTheme) DarkColorScheme else LightColorScheme,
+            colorScheme = if (isDarkTheme) {
+                getDarkColorScheme(primaryColor, onPrimaryColor)
+            } else {
+                getLightColorScheme(primaryColor, onPrimaryColor)
+            },
             content = content,
         )
     }
@@ -60,3 +89,5 @@ internal data class MyKSuiteColors(
     val iconColor: Color = Color.Unspecified,
     val cardBorderColor: Color = Color.Unspecified,
 )
+
+private fun getMaterialColor(context: Context, @AttrRes colorId: Int) = Color(MaterialColors.getColor(context, colorId, 0))

MyKSuite/src/main/java/com/infomaniak/core/myksuite/ui/views/BaseMyKSuiteChipView.kt

@@ -19,13 +19,13 @@ package com.infomaniak.core.myksuite.ui.views
 
 import android.content.Context
 import android.util.AttributeSet
+import androidx.annotation.ColorInt
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.platform.AbstractComposeView
-import androidx.core.content.res.ResourcesCompat
 import com.infomaniak.core.myksuite.R
 import com.infomaniak.core.myksuite.ui.components.MyKSuiteChip
 import com.infomaniak.core.myksuite.ui.components.MyKSuiteTier
-import com.infomaniak.core.myksuite.ui.theme.MyKSuiteTheme
+import com.infomaniak.core.myksuite.ui.theme.MyKSuiteXMLTheme
 
 abstract class BaseMyKSuiteChipView @JvmOverloads constructor(
     context: Context,
@@ -34,18 +34,20 @@ abstract class BaseMyKSuiteChipView @JvmOverloads constructor(
     val tier: MyKSuiteTier,
 ) : AbstractComposeView(context, attrs, defStyleAttr) {
 
-    private var backgroundColor: Int = ResourcesCompat.ID_NULL
+    @ColorInt
+    private var backgroundColor: Int? = null
 
     init {
         context.obtainStyledAttributes(attrs, R.styleable.BaseMyKSuiteChipView, defStyleAttr, 0).apply {
-            backgroundColor = getInt(R.styleable.BaseMyKSuiteChipView_backgroundColor, ResourcesCompat.ID_NULL)
+            backgroundColor = getColor(R.styleable.BaseMyKSuiteChipView_backgroundColor, 0).takeIf {
+                hasValue(R.styleable.BaseMyKSuiteChipView_backgroundColor)
+            }
             recycle()
         }
     }
 
     @Composable
     override fun Content() {
-        val colorRes = if (backgroundColor == ResourcesCompat.ID_NULL) null else backgroundColor
-        MyKSuiteTheme { MyKSuiteChip(tier = tier, backgroundColor = colorRes) }
+        MyKSuiteXMLTheme { MyKSuiteChip(tier = tier, backgroundColor = backgroundColor) }
     }
 }

MyKSuite/src/main/java/com/infomaniak/core/myksuite/ui/views/MyKSuiteDashboardFragment.kt

@@ -28,6 +28,7 @@ import androidx.navigation.fragment.findNavController
 import androidx.navigation.fragment.navArgs
 import com.infomaniak.core.myksuite.ui.screens.MyKSuiteDashboardScreen
 import com.infomaniak.core.myksuite.ui.screens.MyKSuiteDashboardScreenData
+import com.infomaniak.core.myksuite.ui.theme.MyKSuiteXMLTheme
 
 open class MyKSuiteDashboardFragment : Fragment() {
 
@@ -41,11 +42,13 @@ open class MyKSuiteDashboardFragment : Fragment() {
         return ComposeView(requireContext()).apply {
             composeView = this
             setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
-            setContent { MyKSuiteDashboardScreen(dashboardScreenData = { navigationArgs.dashboardData }, onClose = onClose) }
+            resetContent(navigationArgs.dashboardData)
         }
     }
 
     protected fun resetContent(dashboardData: MyKSuiteDashboardScreenData) {
-        composeView?.setContent { MyKSuiteDashboardScreen(dashboardScreenData = { dashboardData }, onClose = onClose) }
+        composeView?.setContent {
+            MyKSuiteXMLTheme { MyKSuiteDashboardScreen(dashboardScreenData = { dashboardData }, onClose = onClose) }
+        }
     }
 }