From 7074edcfaf4119e11ecfb96ed0dca67654dbd304 Mon Sep 17 00:00:00 2001
From: Kevin Boulongne <kevin.boulongne@infomaniak.com>
Date: Mon, 18 Nov 2024 18:06:14 +0100
Subject: [PATCH] feat: Update `Progress` UI

---
 .../upload/UploadProgressScreen.kt            |  4 +-
 .../newtransfer/upload/components/Progress.kt | 38 ++++++++++++++++---
 2 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/upload/UploadProgressScreen.kt b/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/upload/UploadProgressScreen.kt
index 2e969cfe1..8a503badd 100644
--- a/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/upload/UploadProgressScreen.kt
+++ b/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/upload/UploadProgressScreen.kt
@@ -113,9 +113,9 @@ private fun UploadProgressScreen(
             horizontalAlignment = Alignment.CenterHorizontally,
         ) {
             AdHeader(adScreenType)
-
             Spacer(Modifier.height(Margin.Medium))
-            Text(stringResource(R.string.uploadProgressIndication))
+            Text(text = stringResource(R.string.uploadProgressIndication), style = SwissTransferTheme.typography.h2)
+            Spacer(Modifier.height(Margin.Mini))
             Progress(progressState, totalSizeInBytes)
             Spacer(Modifier.height(Margin.Huge))
         }
diff --git a/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/upload/components/Progress.kt b/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/upload/components/Progress.kt
index 7da176a48..443636a4b 100644
--- a/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/upload/components/Progress.kt
+++ b/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/upload/components/Progress.kt
@@ -24,6 +24,7 @@ import androidx.compose.runtime.derivedStateOf
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
 import androidx.compose.ui.platform.LocalContext
+import com.infomaniak.swisstransfer.ui.theme.SwissTransferTheme
 import com.infomaniak.swisstransfer.ui.utils.HumanReadableSizeUtils
 import com.infomaniak.swisstransfer.workers.UploadWorker
 import java.util.Locale
@@ -34,10 +35,23 @@ fun Progress(
     totalSizeInBytes: Long,
 ) {
     Row {
+
         Percentage({ progressState().uploadedSize }, totalSizeInBytes)
-        Text(" - ")
-        UploadedSize({ progressState().uploadedSize })
-        Text(" / ")
+
+        Text(
+            text = " - ",
+            style = SwissTransferTheme.typography.labelRegular,
+            color = SwissTransferTheme.colors.secondaryTextColor,
+        )
+
+        UploadedSize { progressState().uploadedSize }
+
+        Text(
+            text = " / ",
+            style = SwissTransferTheme.typography.labelRegular,
+            color = SwissTransferTheme.colors.secondaryTextColor,
+        )
+
         TotalSize(totalSizeInBytes)
     }
 }
@@ -51,7 +65,11 @@ private fun Percentage(uploadedSizeInBytes: () -> Long, totalSizeInBytes: Long)
         }
     }
 
-    Text("$percentageNoDecimals%")
+    Text(
+        text = "$percentageNoDecimals%",
+        style = SwissTransferTheme.typography.labelRegular,
+        color = SwissTransferTheme.colors.secondaryTextColor,
+    )
 }
 
 @Composable
@@ -61,7 +79,11 @@ private fun UploadedSize(uploadedSizeInBytes: () -> Long) {
         derivedStateOf { HumanReadableSizeUtils.getHumanReadableSize(context, uploadedSizeInBytes()) }
     }
 
-    Text(humanReadableSize)
+    Text(
+        text = humanReadableSize,
+        style = SwissTransferTheme.typography.labelRegular,
+        color = SwissTransferTheme.colors.secondaryTextColor,
+    )
 }
 
 @Composable
@@ -71,5 +93,9 @@ private fun TotalSize(totalSizeInBytes: Long) {
         derivedStateOf { HumanReadableSizeUtils.getHumanReadableSize(context, totalSizeInBytes) }
     }
 
-    Text(humanReadableTotalSize)
+    Text(
+        text = humanReadableTotalSize,
+        style = SwissTransferTheme.typography.labelRegular,
+        color = SwissTransferTheme.colors.secondaryTextColor,
+    )
 }