Update share and copy link button's design

app/src/main/java/com/infomaniak/swisstransfer/ui/components/DoubleButtonCombo.kt

@@ -23,11 +23,11 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
 import com.infomaniak.swisstransfer.R
+import com.infomaniak.swisstransfer.ui.theme.Dimens
 import com.infomaniak.swisstransfer.ui.theme.Margin
 import com.infomaniak.swisstransfer.ui.theme.SwissTransferTheme
 import com.infomaniak.swisstransfer.ui.utils.PreviewAllWindows
 
-private val WIDTH_LIMIT = 800.dp
 private val WIDTH_THRESHOLD = 500.dp
 
 @Composable
@@ -37,7 +37,7 @@ fun ColumnScope.DoubleButtonCombo(
 ) {
     BoxWithConstraints(
         modifier = Modifier
-            .widthIn(max = WIDTH_LIMIT)
+            .widthIn(max = Dimens.DoubleButtonMaxWidth)
             .align(Alignment.CenterHorizontally),
     ) {
         when {
@@ -95,7 +95,7 @@ private fun HorizontallyStackedButtons(
 
 @Composable
 private fun SingleButton(button: @Composable (Modifier) -> Unit) {
-    Box(Modifier.widthIn(max = WIDTH_LIMIT / 2)) {
+    Box(Modifier.widthIn(max = Dimens.SingleButtonMaxWidth)) {
         button(
             Modifier
                 .fillMaxWidth()

app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/upload/UploadSuccessQrScreen.kt

@@ -17,7 +17,6 @@
  */
 package com.infomaniak.swisstransfer.ui.screen.newtransfer.upload
 
-import android.content.Context
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.rememberScrollState
@@ -27,76 +26,63 @@ import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
-import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextAlign
 import com.infomaniak.swisstransfer.R
 import com.infomaniak.swisstransfer.ui.components.*
-import com.infomaniak.swisstransfer.ui.images.AppImages.AppIcons
 import com.infomaniak.swisstransfer.ui.images.AppImages.AppIllus
-import com.infomaniak.swisstransfer.ui.images.icons.DocumentOnDocument
-import com.infomaniak.swisstransfer.ui.images.icons.PersonBadgeShare
 import com.infomaniak.swisstransfer.ui.images.illus.beers.Beers
 import com.infomaniak.swisstransfer.ui.screen.newtransfer.importfiles.components.TransferType
+import com.infomaniak.swisstransfer.ui.screen.newtransfer.upload.components.ShareAndCopyButtons
 import com.infomaniak.swisstransfer.ui.theme.Dimens
 import com.infomaniak.swisstransfer.ui.theme.Margin
 import com.infomaniak.swisstransfer.ui.theme.SwissTransferTheme
 import com.infomaniak.swisstransfer.ui.utils.PreviewAllWindows
-import com.infomaniak.swisstransfer.ui.utils.copyText
-import com.infomaniak.swisstransfer.ui.utils.shareText
-import kotlinx.coroutines.launch
 
 @Composable
 fun UploadSuccessQrScreen(transferType: TransferType, transferUrl: String, closeActivity: () -> Unit) {
-
-    val context = LocalContext.current
     val snackbarHostState = remember { SnackbarHostState() }
 
     BottomStickyButtonScaffold(
         snackbarHostState = snackbarHostState,
         topBar = { BrandTopAppBar() },
-        topButton = {
-            LargeButton(
-                modifier = it,
-                style = ButtonType.PRIMARY,
-                titleRes = R.string.buttonShare,
-                imageVector = AppIcons.PersonBadgeShare,
-                onClick = { context.shareText(transferUrl) },
-            )
-        },
         bottomButton = {
             LargeButton(
                 modifier = it,
-                style = ButtonType.SECONDARY,
+                style = ButtonType.PRIMARY,
                 titleRes = R.string.buttonFinished,
                 onClick = closeActivity,
             )
         },
-        content = { Content(context, snackbarHostState, transferType, transferUrl) },
-    )
+    ) {
+        Column {
+            SuccessMessage(transferType, transferUrl)
+
+            ShareAndCopyButtons(
+                modifier = Modifier.padding(bottom = Margin.Medium, top = Margin.Mini),
+                transferLink = transferUrl,
+                snackbarHostState = snackbarHostState,
+            )
+        }
+    }
 }
 
 @Composable
-private fun Content(context: Context, snackbarHostState: SnackbarHostState, transferType: TransferType, transferUrl: String) {
-
-    val scope = rememberCoroutineScope()
-
+private fun ColumnScope.SuccessMessage(transferType: TransferType, transferUrl: String) {
     Column(
         modifier = Modifier
-            .fillMaxSize()
+            .fillMaxWidth()
+            .weight(1f)
             .verticalScroll(rememberScrollState())
-            .padding(Margin.Medium),
+            .padding(horizontal = Margin.Medium),
         horizontalAlignment = Alignment.CenterHorizontally,
         verticalArrangement = Arrangement.Center,
     ) {
+        Spacer(modifier = Modifier.height(Margin.Medium))
 
-        Image(
-            imageVector = AppIllus.Beers.image(),
-            contentDescription = null,
-        )
+        Image(imageVector = AppIllus.Beers.image(), contentDescription = null)
 
         Spacer(Modifier.height(Margin.Huge))
 
@@ -121,20 +107,6 @@ private fun Content(context: Context, snackbarHostState: SnackbarHostState, tran
             )
         }
     }
-
-    // TODO: What do we want to do with this button placement?
-    LargeButton(
-        modifier = Modifier.padding(Margin.Medium),
-        style = ButtonType.SECONDARY,
-        titleRes = R.string.buttonCopyLink,
-        imageVector = AppIcons.DocumentOnDocument,
-        onClick = {
-            context.copyText(
-                text = transferUrl,
-                showSnackbar = { scope.launch { snackbarHostState.showSnackbar(it) } },
-            )
-        },
-    )
 }
 
 @PreviewAllWindows

app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/upload/components/ShareAndCopyButtons.kt

@@ -0,0 +1,112 @@
+/*
+ * Infomaniak SwissTransfer - Android
+ * Copyright (C) 2024 Infomaniak Network SA
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+package com.infomaniak.swisstransfer.ui.screen.newtransfer.upload.components
+
+import androidx.annotation.StringRes
+import androidx.compose.foundation.layout.*
+import androidx.compose.material3.*
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.res.stringResource
+import com.infomaniak.swisstransfer.R
+import com.infomaniak.swisstransfer.ui.components.ButtonType
+import com.infomaniak.swisstransfer.ui.images.AppImages
+import com.infomaniak.swisstransfer.ui.images.icons.DocumentOnDocument
+import com.infomaniak.swisstransfer.ui.images.icons.PersonBadgeShare
+import com.infomaniak.swisstransfer.ui.theme.CustomShapes
+import com.infomaniak.swisstransfer.ui.theme.Dimens
+import com.infomaniak.swisstransfer.ui.theme.Margin
+import com.infomaniak.swisstransfer.ui.theme.SwissTransferTheme
+import com.infomaniak.swisstransfer.ui.utils.PreviewLightAndDark
+import com.infomaniak.swisstransfer.ui.utils.copyText
+import com.infomaniak.swisstransfer.ui.utils.shareText
+import kotlinx.coroutines.launch
+
+@Composable
+fun ColumnScope.ShareAndCopyButtons(modifier: Modifier = Modifier, transferLink: String, snackbarHostState: SnackbarHostState) {
+    val scope = rememberCoroutineScope()
+    val context = LocalContext.current
+
+    Row(
+        modifier
+            .widthIn(max = Dimens.SingleButtonMaxWidth)
+            .fillMaxWidth()
+            .padding(horizontal = Margin.Medium)
+            .align(Alignment.CenterHorizontally),
+    ) {
+        ShareCopyButton(
+            textRes = R.string.buttonShare,
+            icon = AppImages.AppIcons.PersonBadgeShare,
+            onClick = { context.shareText(transferLink) },
+        )
+
+        Spacer(modifier = Modifier.width(Margin.Medium))
+
+        ShareCopyButton(
+            textRes = R.string.buttonCopyLink,
+            icon = AppImages.AppIcons.DocumentOnDocument,
+            onClick = {
+                context.copyText(
+                    text = transferLink,
+                    showSnackbar = { scope.launch { snackbarHostState.showSnackbar(it) } },
+                )
+            },
+        )
+    }
+}
+
+@Composable
+private fun RowScope.ShareCopyButton(icon: ImageVector, @StringRes textRes: Int, onClick: () -> Unit) {
+    Button(
+        modifier = Modifier.weight(1f),
+        shape = CustomShapes.MEDIUM,
+        colors = ButtonType.SECONDARY.buttonColors(),
+        contentPadding = PaddingValues(vertical = Margin.Medium),
+        onClick = onClick,
+    ) {
+        Column(
+            horizontalAlignment = Alignment.CenterHorizontally,
+            verticalArrangement = Arrangement.Center,
+        ) {
+            Icon(icon, contentDescription = null, modifier = Modifier.size(Dimens.SmallIconSize))
+            Spacer(modifier = Modifier.height(Margin.Micro))
+            Text(stringResource(textRes))
+        }
+    }
+}
+
+@PreviewLightAndDark
+@Composable
+private fun Preview() {
+    SwissTransferTheme {
+        Surface {
+            Column {
+                val snackbarHostState = remember { SnackbarHostState() }
+                ShareAndCopyButtons(
+                    transferLink = "https://example.com",
+                    snackbarHostState = snackbarHostState,
+                )
+            }
+        }
+    }
+}

app/src/main/java/com/infomaniak/swisstransfer/ui/theme/Dimens.kt

@@ -24,6 +24,8 @@ object Dimens {
     val SettingVerticalMargin = Margin.Small
     val DescriptionWidth = 300.dp
     val LargeButtonHeight = 56.dp
+    val DoubleButtonMaxWidth = 800.dp
+    val SingleButtonMaxWidth = DoubleButtonMaxWidth / 2
     val SmallIconSize = 16.dp
     val IconSize = 24.dp
     val BorderWidth = 1.dp