Improve UX interaction with PostSubscriptionCloseButton

MAILANDR-2416
ProtonMail · Dec 11, 2024 · f24d405 · f24d405
1 parent 791403b
commit f24d405
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 33 deletions.
diff --git a/...ail/android/mailupselling/presentation/ui/postsubscription/PostSubscriptionCloseButton.kt b/...ail/android/mailupselling/presentation/ui/postsubscription/PostSubscriptionCloseButton.kt
@@ -19,49 +19,42 @@
 package ch.protonmail.android.mailupselling.presentation.ui.postsubscription
 
 import androidx.compose.foundation.background
-import androidx.compose.foundation.clickable
-import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.CircleShape
-import androidx.compose.material.ripple
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Close
 import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.semantics.Role
-import ch.protonmail.android.mailcommon.presentation.compose.MailDimens
 import ch.protonmail.android.mailupselling.presentation.R
 import ch.protonmail.android.mailupselling.presentation.ui.postsubscription.PostSubscriptionColors.CloseButtonBackground
-import me.proton.core.compose.theme.ProtonDimens
+import ch.protonmail.android.mailupselling.presentation.ui.postsubscription.PostSubscriptionColors.CloseButtonColor
+import ch.protonmail.android.mailupselling.presentation.ui.postsubscription.PostSubscriptionDimens.CloseButtonSize
 
 @Composable
 internal fun PostSubscriptionCloseButton(modifier: Modifier = Modifier, onClick: () -> Unit) {
-    Box(
-        modifier = modifier
-            .padding(ProtonDimens.SmallSpacing)
-            .clickable(
-                interactionSource = remember { MutableInteractionSource() },
-                indication = ripple(
-                    radius = MailDimens.PostSubscriptionCloseButtonRippleRadius,
-                    color = Color.White
-                ),
-                role = Role.Button,
-                onClick = onClick
-            )
-            .padding(ProtonDimens.SmallSpacing)
-            .background(color = CloseButtonBackground, shape = CircleShape)
-            .padding(ProtonDimens.SmallSpacing)
+    IconButton(
+        modifier = modifier,
+        onClick = onClick
     ) {
-        Icon(
-            modifier = Modifier.size(ProtonDimens.SmallIconSize),
-            painter = painterResource(id = R.drawable.ic_proton_cross_big),
-            contentDescription = stringResource(id = R.string.post_subscription_close_button_content_description),
-            tint = Color.White
-        )
+        Box(
+            contentAlignment = Alignment.Center,
+            modifier = Modifier
+                .size(CloseButtonSize)
+                .background(
+                    color = CloseButtonBackground,
+                    shape = CircleShape
+                )
+        ) {
+            Icon(
+                imageVector = Icons.Filled.Close,
+                tint = CloseButtonColor,
+                contentDescription = stringResource(R.string.post_subscription_close_button_content_description)
+            )
+        }
     }
 }
diff --git a/...oid/mailupselling/presentation/ui/postsubscription/PostSubscriptionDiscoverAllAppsPage.kt b/...oid/mailupselling/presentation/ui/postsubscription/PostSubscriptionDiscoverAllAppsPage.kt
@@ -52,6 +52,7 @@ import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.zIndex
 import ch.protonmail.android.mailcommon.presentation.NO_CONTENT_DESCRIPTION
 import ch.protonmail.android.mailcommon.presentation.compose.MailDimens
 import ch.protonmail.android.mailupselling.domain.model.telemetry.postsubscription.PostSubscriptionTelemetryEventType
@@ -115,7 +116,10 @@ private fun PostSubscriptionDiscoverAllAppsPage(
     Box {
         if (!isScrolled.value) {
             PostSubscriptionCloseButton(
-                modifier = Modifier.align(Alignment.TopEnd),
+                modifier = Modifier
+                    .align(Alignment.TopEnd)
+                    .padding(ProtonDimens.ExtraSmallSpacing)
+                    .zIndex(1f),
                 onClick = onClose
             )
         }

diff --git a/...onmail/android/mailupselling/presentation/ui/postsubscription/PostSubscriptionUiValues.kt b/...onmail/android/mailupselling/presentation/ui/postsubscription/PostSubscriptionUiValues.kt
@@ -23,6 +23,7 @@ import androidx.compose.ui.unit.dp
 
 object PostSubscriptionColors {
     val BackgroundGradientColorStops = arrayOf(0.0f to Color(0xFF0C0233), 1.0f to Color(0xFF522580))
+    val CloseButtonColor = Color.White
     val CloseButtonBackground = Color(0x14FFFFFF)
     val HorizontalDividerColor = Color(0x3DFFFFFF)
     val BottomSectionBackgroundColor = Color(0x14FFFFFF)
@@ -45,6 +46,7 @@ object PostSubscriptionColors {
 }
 
 object PostSubscriptionDimens {
+    val CloseButtonSize = 32.dp
     val WelcomePageVerticalSpacing = 136.dp
     val WelcomePageIllustrationBigWidth = 218.dp
     val WelcomePageIllustrationSmallWidth = 109.dp

diff --git a/...ail/android/mailupselling/presentation/ui/postsubscription/PostSubscriptionWelcomePage.kt b/...ail/android/mailupselling/presentation/ui/postsubscription/PostSubscriptionWelcomePage.kt
@@ -50,6 +50,7 @@ import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.zIndex
 import ch.protonmail.android.mailcommon.presentation.NO_CONTENT_DESCRIPTION
 import ch.protonmail.android.mailcommon.presentation.compose.MailDimens
 import ch.protonmail.android.mailupselling.presentation.R
@@ -98,7 +99,10 @@ fun PostSubscriptionWelcomePage(modifier: Modifier = Modifier, onClose: () -> Un
     Box {
         if (!isScrolled.value) {
             PostSubscriptionCloseButton(
-                modifier = Modifier.align(Alignment.TopEnd),
+                modifier = Modifier
+                    .align(Alignment.TopEnd)
+                    .padding(ProtonDimens.ExtraSmallSpacing)
+                    .zIndex(1f),
                 onClick = onClose
             )
         }