Add the arrow to the empty state new transfer fab

app/build.gradle.kts

@@ -66,6 +66,7 @@ dependencies {
     implementation(libs.compose.material3)
     implementation(libs.compose.material3.adaptative.navigation)
     implementation(libs.navigation.compose)
+    implementation(libs.androidx.constraintlayout.compose)
 
     implementation(libs.androidx.adaptive)
     implementation(libs.androidx.adaptive.layout)

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

@@ -19,7 +19,10 @@
 package com.infomaniak.swisstransfer.ui.components
 
 import android.content.res.Configuration
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.CornerBasedShape
 import androidx.compose.material3.FloatingActionButton
 import androidx.compose.material3.FloatingActionButtonDefaults
@@ -29,10 +32,12 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import com.infomaniak.swisstransfer.R
 import com.infomaniak.swisstransfer.ui.icons.AppIcons
 import com.infomaniak.swisstransfer.ui.icons.app.Add
+import com.infomaniak.swisstransfer.ui.theme.Margin
 import com.infomaniak.swisstransfer.ui.theme.Shapes
 import com.infomaniak.swisstransfer.ui.theme.SwissTransferTheme
 
@@ -44,7 +49,7 @@ fun SwissTransferFab(
     onClick: () -> Unit,
 ) {
     FloatingActionButton(
-        modifier = modifier.let { if (fabType == FabType.BIG) it.size(80.dp) else it },
+        modifier = modifier.let { fabType.customSize?.let { size -> it.size(size) } ?: it },
         onClick = onClick,
         containerColor = SwissTransferTheme.materialColors.primary,
         shape = fabType.shape,
@@ -57,26 +62,21 @@ fun SwissTransferFab(
     }
 }
 
-enum class FabType(val shape: CornerBasedShape) {
-    NORMAL(Shapes.medium),
-    BIG(Shapes.large),
+enum class FabType(val shape: CornerBasedShape, val customSize: Dp?) {
+    NORMAL(Shapes.medium, null),
+    BIG(Shapes.large, 80.dp),
 }
 
 
-@Preview
-@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES or Configuration.UI_MODE_TYPE_NORMAL)
+@Preview(name = "Light mode")
+@Preview(name = "Dark mode", uiMode = Configuration.UI_MODE_NIGHT_YES or Configuration.UI_MODE_TYPE_NORMAL)
 @Composable
 private fun SwissTransferFabPreview() {
     SwissTransferTheme {
-        SwissTransferFab(onClick = {})
-    }
-}
-
-@Preview
-@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES or Configuration.UI_MODE_TYPE_NORMAL)
-@Composable
-private fun SwissTransferFabBigPreview() {
-    SwissTransferTheme {
-        SwissTransferFab(fabType = FabType.BIG, onClick = {})
+        Row {
+            SwissTransferFab(onClick = {})
+            Spacer(modifier = Modifier.width(Margin.Large))
+            SwissTransferFab(fabType = FabType.BIG, onClick = {})
+        }
     }
 }

app/src/main/java/com/infomaniak/swisstransfer/ui/icons/AppIcons.kt

@@ -18,4 +18,6 @@
 
 package com.infomaniak.swisstransfer.ui.icons
 
-object AppIcons
+object AppIcons {
+    object Illu
+}

app/src/main/java/com/infomaniak/swisstransfer/ui/icons/illu/ArrowCurvedDownright.kt

@@ -0,0 +1,89 @@
+/*
+ * 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.icons.illu
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.size
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.PathFillType.Companion.NonZero
+import androidx.compose.ui.graphics.SolidColor
+import androidx.compose.ui.graphics.StrokeCap.Companion.Butt
+import androidx.compose.ui.graphics.StrokeJoin.Companion.Miter
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.graphics.vector.ImageVector.Builder
+import androidx.compose.ui.graphics.vector.path
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.infomaniak.swisstransfer.ui.icons.AppIcons
+
+val AppIcons.Illu.ArrowCurvedDownright: ImageVector
+    get() {
+        if (_arrowcurveddownright != null) {
+            return _arrowcurveddownright!!
+        }
+        _arrowcurveddownright = Builder(
+            name = "Arrowcurveddownright",
+            defaultWidth = 37.0.dp,
+            defaultHeight = 45.0.dp,
+            viewportWidth = 37.0f,
+            viewportHeight = 45.0f
+        ).apply {
+            path(
+                fill = SolidColor(Color(0xFF1A1A1A)),
+                stroke = null,
+                strokeLineWidth = 0.0f,
+                strokeLineCap = Butt,
+                strokeLineJoin = Miter,
+                strokeLineMiter = 4.0f,
+                pathFillType = NonZero
+            ) {
+                moveTo(34.0f, 44.81f)
+                reflectiveCurveToRelative(1.352f, -0.094f, 2.001f, -0.31f)
+                curveToRelative(0.65f, -0.216f, 0.899f, -1.524f, 0.59f, -2.066f)
+                lineToRelative(-6.049f, -10.615f)
+                curveToRelative(-0.872f, -1.526f, -1.961f, -0.176f, -1.376f, 1.095f)
+                quadToRelative(1.57f, 3.411f, 3.14f, 6.83f)
+                curveTo(16.984f, 31.213f, 2.658f, 20.65f, 1.744f, 1.334f)
+                curveTo(1.68f, -0.062f, -0.08f, -0.68f, 0.005f, 1.075f)
+                curveToRelative(0.967f, 20.496f, 15.83f, 32.004f, 32.19f, 41.158f)
+                horizontalLineToRelative(-9.45f)
+                curveToRelative(-1.26f, 0.0f, -0.824f, 2.583f, 0.233f, 2.583f)
+                curveToRelative(4.04f, 0.0f, 6.982f, -0.005f, 11.022f, -0.005f)
+            }
+        }.build()
+        return _arrowcurveddownright!!
+    }
+
+private var _arrowcurveddownright: ImageVector? = null
+
+@Preview
+@Composable
+private fun Preview() {
+    Box(modifier = Modifier.background(Color.White)) {
+        Image(
+            imageVector = AppIcons.Illu.ArrowCurvedDownright,
+            contentDescription = null,
+            modifier = Modifier.size(250.dp)
+        )
+    }
+}

app/src/main/java/com/infomaniak/swisstransfer/ui/screen/main/sent/SentScreen.kt

@@ -19,6 +19,7 @@
 package com.infomaniak.swisstransfer.ui.screen.main.sent
 
 import androidx.compose.foundation.layout.*
+import androidx.compose.material3.Icon
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
@@ -30,11 +31,14 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
+import androidx.constraintlayout.compose.ConstraintLayout
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import androidx.lifecycle.viewmodel.compose.viewModel
 import com.infomaniak.swisstransfer.R
 import com.infomaniak.swisstransfer.ui.components.NewTransferFab
 import com.infomaniak.swisstransfer.ui.components.NewTransferFabType
+import com.infomaniak.swisstransfer.ui.icons.AppIcons
+import com.infomaniak.swisstransfer.ui.icons.illu.ArrowCurvedDownright
 import com.infomaniak.swisstransfer.ui.screen.main.LocalNavType
 import com.infomaniak.swisstransfer.ui.theme.Margin
 import com.infomaniak.swisstransfer.ui.theme.SwissTransferTheme
@@ -84,10 +88,29 @@ fun EmptyScreen() {
             text = stringResource(id = R.string.firstTransferDescription),
             style = SwissTransferTheme.typography.bodyRegular
         )
-        NewTransferFab(
-            modifier = Modifier.padding(top = Margin.ExtraLarge),
-            newTransferFabType = NewTransferFabType.EMPTY_STATE,
-        )
+        Spacer(modifier = Modifier.height(Margin.Medium))
+        ConstraintLayout {
+            val (icon, fab) = createRefs()
+
+            Icon(
+                modifier = Modifier
+                    .constrainAs(icon) {
+                        top.linkTo(parent.top)
+                        end.linkTo(fab.start, margin = Margin.Small)
+                    },
+                imageVector = AppIcons.Illu.ArrowCurvedDownright,
+                contentDescription = null,
+            )
+            NewTransferFab(
+                modifier = Modifier
+                    .constrainAs(fab) {
+                        start.linkTo(parent.start)
+                        end.linkTo(parent.end)
+                        top.linkTo(parent.top, Margin.Large)
+                    },
+                newTransferFabType = NewTransferFabType.EMPTY_STATE,
+            )
+        }
     }
 }
 
@@ -109,7 +132,7 @@ private fun TransferScreen(
 
 @PreviewMobile
 @Composable
-private fun SentScreenMobilePreview() {
+private fun SentScreenAMobilePreview() {
     SwissTransferTheme {
         Surface {
             SentScreen(

gradle/libs.versions.toml

@@ -3,6 +3,7 @@ activityCompose = "1.9.1"
 adaptiveLayout = "1.0.0-beta04"
 agp = "8.5.2"
 composeBom = "2024.06.00"
+constraintlayoutCompose = "1.0.1"
 coreKtx = "1.13.1"
 junit = "4.13.2"
 junitVersion = "1.2.1"
@@ -17,6 +18,7 @@ androidx-activity-compose = { group = "androidx.activity", name = "activity-comp
 androidx-adaptive = { module = "androidx.compose.material3.adaptive:adaptive", version.ref = "adaptiveLayout" }
 androidx-adaptive-layout = { module = "androidx.compose.material3.adaptive:adaptive-layout", version.ref = "adaptiveLayout" }
 androidx-adaptive-navigation = { module = "androidx.compose.material3.adaptive:adaptive-navigation", version.ref = "adaptiveLayout" }
+androidx-constraintlayout-compose = { module = "androidx.constraintlayout:constraintlayout-compose", version.ref = "constraintlayoutCompose" }
 androidx-core-ktx = { group = "androidx.core", name = "core-ktx", version.ref = "coreKtx" }
 androidx-lifecycle-runtime-ktx = { group = "androidx.lifecycle", name = "lifecycle-runtime-ktx", version.ref = "lifecycleRuntimeKtx" }
 compose-bom = { group = "androidx.compose", name = "compose-bom", version.ref = "composeBom" }
@@ -36,4 +38,3 @@ junit = { group = "junit", name = "junit", version.ref = "junit" }
 android-application = { id = "com.android.application", version.ref = "agp" }
 compose-compiler = { id = "org.jetbrains.kotlin.plugin.compose", version.ref = "kotlin" }
 kotlin-android = { id = "org.jetbrains.kotlin.android", version.ref = "kotlin" }
-