refactor: Polish import screen

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

@@ -17,12 +17,22 @@
  */
 package com.infomaniak.swisstransfer.ui.components
 
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.*
-import androidx.compose.material3.Scaffold
 import androidx.compose.material3.SnackbarHost
 import androidx.compose.material3.SnackbarHostState
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.style.TextAlign
+import com.infomaniak.swisstransfer.R
+import com.infomaniak.swisstransfer.ui.theme.Dimens
+import com.infomaniak.swisstransfer.ui.theme.SwissTransferTheme
+import com.infomaniak.swisstransfer.ui.utils.PreviewLargeWindow
+import com.infomaniak.swisstransfer.ui.utils.PreviewSmallWindow
 
 @Composable
 fun BottomStickyButtonScaffold(
@@ -33,17 +43,44 @@ fun BottomStickyButtonScaffold(
     bottomButton: @Composable ((Modifier) -> Unit)? = null,
     content: @Composable BoxScope.() -> Unit,
 ) {
-    Scaffold(
+    SinglePaneScaffold(
         snackbarHost = { snackbarHostState?.let { SnackbarHost(hostState = it) } },
         topBar = topBar,
     ) { contentPaddings ->
         Column(
             modifier = modifier
                 .fillMaxWidth()
                 .padding(contentPaddings),
+            horizontalAlignment = Alignment.CenterHorizontally,
         ) {
             Box(modifier = Modifier.weight(1.0f), content = content)
-            DoubleButtonCombo(topButton, bottomButton)
+            DoubleButtonCombo(
+                modifier = Modifier.padding(vertical = Dimens.ButtonComboVerticalPadding),
+                topButton = topButton,
+                bottomButton = bottomButton,
+            )
+        }
+    }
+}
+
+@PreviewSmallWindow
+@PreviewLargeWindow
+@Composable
+private fun Preview() {
+    SwissTransferTheme {
+        Surface {
+            BottomStickyButtonScaffold(
+                topBar = { BrandTopAppBar() },
+                topButton = { modifier -> LargeButton(R.string.appName, onClick = {}, modifier = modifier) },
+            ) {
+                Text(
+                    modifier = Modifier
+                        .fillMaxSize()
+                        .background(Color.LightGray),
+                    text = "content",
+                    textAlign = TextAlign.Center,
+                )
+            }
         }
     }
 }

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

@@ -32,11 +32,12 @@ private val WIDTH_THRESHOLD = 500.dp
 
 @Composable
 fun ColumnScope.DoubleButtonCombo(
+    modifier: Modifier = Modifier,
     topButton: @Composable ((Modifier) -> Unit)? = null,
     bottomButton: @Composable ((Modifier) -> Unit)? = null
 ) {
     BoxWithConstraints(
-        modifier = Modifier
+        modifier = modifier
             .widthIn(max = Dimens.DoubleButtonMaxWidth)
             .align(Alignment.CenterHorizontally),
     ) {
@@ -71,7 +72,7 @@ private fun VerticallyStackedButtons(
         bottomButton(
             Modifier
                 .fillMaxWidth()
-                .padding(start = Margin.Medium, end = Margin.Medium, bottom = Margin.Large),
+                .padding(horizontal = Margin.Medium),
         )
     }
 }
@@ -84,7 +85,7 @@ private fun HorizontallyStackedButtons(
     Row(
         modifier = Modifier
             .fillMaxWidth()
-            .padding(bottom = Margin.Large, start = Margin.Medium, end = Margin.Medium),
+            .padding(horizontal = Margin.Medium),
         horizontalArrangement = Arrangement.spacedBy(Margin.Medium),
         verticalAlignment = Alignment.CenterVertically,
     ) {
@@ -99,7 +100,7 @@ private fun SingleButton(button: @Composable (Modifier) -> Unit) {
         button(
             Modifier
                 .fillMaxWidth()
-                .padding(bottom = Margin.Large, start = Margin.Medium, end = Margin.Medium),
+                .padding(horizontal = Margin.Medium),
         )
     }
 }
@@ -125,6 +126,7 @@ private fun DoubleButtonComboPreview() {
                     )
                 },
             )
+            Spacer(Modifier.height(Margin.Medium))
             DoubleButtonCombo(
                 bottomButton = {
                     LargeButton(

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

@@ -0,0 +1,71 @@
+/*
+ * 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.components
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.*
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Surface
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import com.infomaniak.swisstransfer.ui.theme.Dimens
+import com.infomaniak.swisstransfer.ui.theme.SwissTransferTheme
+import com.infomaniak.swisstransfer.ui.utils.PreviewLargeWindow
+import com.infomaniak.swisstransfer.ui.utils.PreviewLightAndDark
+
+@Composable
+fun SinglePaneScaffold(
+    topBar: @Composable () -> Unit = {},
+    bottomBar: @Composable () -> Unit = {},
+    snackbarHost: @Composable () -> Unit = {},
+    content: @Composable (PaddingValues) -> Unit,
+) {
+    Scaffold(
+        topBar = topBar,
+        bottomBar = bottomBar,
+        snackbarHost = snackbarHost,
+    ) { contentPadding ->
+        Box(
+            contentAlignment = Alignment.TopCenter,
+            modifier = Modifier.fillMaxWidth(),
+        ) {
+            Box(Modifier.widthIn(max = Dimens.MaxSinglePaneScreenWidth)) {
+                content(contentPadding)
+            }
+        }
+    }
+}
+
+@PreviewLightAndDark
+@PreviewLargeWindow
+@Composable
+private fun Preview() {
+    SwissTransferTheme {
+        Surface {
+            SinglePaneScaffold {
+                Box(
+                    Modifier
+                        .fillMaxSize()
+                        .background(Color.Cyan)
+                )
+            }
+        }
+    }
+}

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

@@ -39,7 +39,7 @@ fun SwissTransferAlertDialog(
     @StringRes descriptionRes: Int,
     onDismiss: () -> Unit,
     onConfirmation: () -> Unit,
-    shouldEnableConfirmButton: () -> Boolean = { true },
+    isConfirmButtonEnabled: () -> Boolean = { true },
     content: @Composable (ColumnScope.() -> Unit)? = null,
 ) {
     BasicAlertDialog(
@@ -56,7 +56,7 @@ fun SwissTransferAlertDialog(
                 additionalContent = content,
                 onDismiss = onDismiss,
                 onConfirmation = onConfirmation,
-                shouldEnableConfirmButton = shouldEnableConfirmButton,
+                isConfirmButtonEnabled = isConfirmButtonEnabled,
             )
         }
     }
@@ -70,16 +70,16 @@ private fun BasicAlertDialogContent(
     additionalContent: @Composable (ColumnScope.() -> Unit)? = null,
     onDismiss: () -> Unit,
     onConfirmation: () -> Unit,
-    shouldEnableConfirmButton: () -> Boolean = { true },
+    isConfirmButtonEnabled: () -> Boolean = { true },
 ) {
     Column(modifier.padding(Margin.Large)) {
         TitleAndDescription(titleRes, descriptionRes)
         Spacer(Modifier.height(Margin.Large))
         additionalContent?.let {
             it()
-            Spacer(Modifier.height(Margin.Large))
+            Spacer(Modifier.height(Margin.Mini))
         }
-        ActionButtons(onDismiss, onConfirmation, shouldEnableConfirmButton)
+        ActionButtons(onDismiss, onConfirmation, isConfirmButtonEnabled)
     }
 }
 
@@ -99,7 +99,7 @@ private fun TitleAndDescription(titleRes: Int, descriptionRes: Int) {
 }
 
 @Composable
-private fun ActionButtons(onDismissRequest: () -> Unit, onConfirmation: () -> Unit, shouldEnable: () -> Boolean) {
+private fun ActionButtons(onDismissRequest: () -> Unit, onConfirmation: () -> Unit, isEnabled: () -> Boolean) {
     Row(
         modifier = Modifier.fillMaxWidth(),
         horizontalArrangement = Arrangement.End,
@@ -114,7 +114,7 @@ private fun ActionButtons(onDismissRequest: () -> Unit, onConfirmation: () -> Un
         SmallButton(
             titleRes = R.string.buttonConfirm,
             onClick = onConfirmation,
-            enabled = shouldEnable
+            enabled = isEnabled
         )
     }
 }

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

@@ -40,6 +40,7 @@ import androidx.compose.ui.unit.dp
 import com.infomaniak.swisstransfer.R
 import com.infomaniak.swisstransfer.ui.images.AppImages.AppIllus
 import com.infomaniak.swisstransfer.ui.images.illus.ArrowDownRightCurved
+import com.infomaniak.swisstransfer.ui.theme.Dimens
 import com.infomaniak.swisstransfer.ui.theme.Margin
 import com.infomaniak.swisstransfer.ui.theme.SwissTransferTheme
 
@@ -133,7 +134,11 @@ private fun BottomSheetContent(
             Spacer(Modifier.height(Margin.Large))
         }
 
-        DoubleButtonCombo(topButton = topButton, bottomButton = bottomButton)
+        DoubleButtonCombo(
+            modifier = Modifier.padding(bottom = Dimens.ButtonComboVerticalPadding),
+            topButton = topButton,
+            bottomButton = bottomButton,
+        )
     }
 }
 

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

@@ -46,8 +46,12 @@ import com.infomaniak.swisstransfer.ui.theme.SwissTransferTheme
 
 /**
  * Wrapper for Material's [OutlinedTextField] that enforce our design needs.
+ *
  * By default, this TextField is single lined. You can specify [maxLineNumber] or [minLineNumber] to make it multi-lined
+ *
  * If [isPassword] value is true, the [keyboardType] field will be ignored to force [KeyboardType.Password]
+ *
+ * To set an error message, you need to pass this message as [supportingText] and set [isError] to true
  */
 @Composable
 fun SwissTransferTextField(
@@ -62,8 +66,8 @@ fun SwissTransferTextField(
     imeAction: ImeAction = ImeAction.Default,
     keyboardActions: KeyboardActions = KeyboardActions.Default,
     isReadOnly: Boolean = false,
-    errorMessage: @Composable () -> String? = { null },
-    supportingText: String? = null,
+    isError: Boolean = false,
+    supportingText: @Composable (() -> Unit)? = null,
     onValueChange: ((String) -> Unit)? = null,
 ) {
 
@@ -80,17 +84,6 @@ fun SwissTransferTextField(
         disabledTrailingIconColor = SwissTransferTheme.colors.iconColor,
     )
 
-    @Composable
-    fun getSupportingText(): (@Composable () -> Unit)? {
-        val displayText = if (text.isEmpty()) {
-            supportingText
-        } else {
-            errorMessage() ?: supportingText
-        }
-
-        return displayText?.let { @Composable { Text(it) } }
-    }
-
     OutlinedTextField(
         modifier = modifier,
         readOnly = isReadOnly,
@@ -119,8 +112,8 @@ fun SwissTransferTextField(
             imeAction = imeAction,
         ),
         keyboardActions = keyboardActions,
-        isError = errorMessage() != null && text.isNotEmpty(),
-        supportingText = getSupportingText(),
+        isError = isError,
+        supportingText = supportingText,
     )
 }
 
@@ -139,18 +132,21 @@ private fun getShowPasswordButton(shouldShowPassword: Boolean, onClick: () -> Un
 @Composable
 @Preview
 private fun Preview() {
+    val supportingText = "supporting Text"
+    val initialValue = "initialValue"
+
     SwissTransferTheme {
         Surface {
             Column(Modifier.padding(Margin.Medium)) {
                 SwissTransferTextField(
                     label = stringResource(R.string.transferMessagePlaceholder),
                     initialValue = "test",
-                    errorMessage = { null },
                 )
                 SwissTransferTextField(
                     keyboardType = KeyboardType.Email,
                     initialValue = "a@[email protected]",
-                    errorMessage = { "Invalid address" },
+                    supportingText = { Text("Invalid address") },
+                    isError = true,
                     label = stringResource(R.string.transferRecipientAddressPlaceholder),
                 )
                 SwissTransferTextField(
@@ -160,25 +156,25 @@ private fun Preview() {
                 )
                 SwissTransferTextField(
                     maxLineNumber = 10,
-                    initialValue = "initial value",
+                    initialValue = initialValue,
                     isRequired = false,
                     label = stringResource(R.string.transferMessagePlaceholder),
-                    supportingText = "supporting Text",
+                    supportingText = { Text(supportingText) },
                 )
                 SwissTransferTextField(
                     maxLineNumber = 10,
-                    initialValue = "initial value",
+                    initialValue = initialValue,
                     isPassword = true,
                     label = stringResource(R.string.settingsOptionPassword),
-                    supportingText = "supporting Text",
+                    supportingText = { Text(supportingText) },
                 )
                 SwissTransferTextField(
                     maxLineNumber = 10,
-                    initialValue = "initial value",
+                    initialValue = initialValue,
                     isPassword = true,
                     label = stringResource(R.string.settingsOptionPassword),
-                    errorMessage = { "Wrong password" },
-                    supportingText = "supporting Text",
+                    isError = true,
+                    supportingText = { Text("Wrong password") },
                 )
             }
         }