feat: Update Progress UI

Infomaniak · Nov 18, 2024 · baeb298 · baeb298
1 parent 1eca1fc
commit baeb298
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 9 deletions.
diff --git a/...in/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/upload/UploadProgressScreen.kt b/...in/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/upload/UploadProgressScreen.kt
@@ -114,10 +114,15 @@ private fun UploadProgressScreen(
         ) {
             AdHeader(adScreenType)
 
-            Spacer(modifier = Modifier.height(Margin.Medium))
-            Text(stringResource(R.string.uploadProgressIndication))
+            Spacer(Modifier.height(Margin.Medium))
+
+            Text(text = stringResource(R.string.uploadProgressIndication), style = SwissTransferTheme.typography.h2)
+
+            Spacer(Modifier.height(Margin.Mini))
+
             Progress(progressState, totalSizeInBytes)
-            Spacer(modifier = Modifier.height(Margin.Huge))
+
+            Spacer(Modifier.height(Margin.Huge))
         }
 
         if (showBottomSheet.get()) CancelUploadBottomSheet(onCancel = onCancel, closeButtonSheet = { showBottomSheet.set(false) })

diff --git a/...ain/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/upload/components/Progress.kt b/...ain/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 = " - ",
+            color = SwissTransferTheme.colors.secondaryTextColor,
+            style = SwissTransferTheme.typography.labelRegular,
+        )
+
+        UploadedSize { progressState().uploadedSize }
+
+        Text(
+            text = " / ",
+            color = SwissTransferTheme.colors.secondaryTextColor,
+            style = SwissTransferTheme.typography.labelRegular,
+        )
+
         TotalSize(totalSizeInBytes)
     }
 }
@@ -51,7 +65,11 @@ private fun Percentage(uploadedSizeInBytes: () -> Long, totalSizeInBytes: Long)
         }
     }
 
-    Text("$percentageNoDecimals%")
+    Text(
+        text = "$percentageNoDecimals%",
+        color = SwissTransferTheme.colors.secondaryTextColor,
+        style = SwissTransferTheme.typography.labelRegular,
+    )
 }
 
 @Composable
@@ -61,7 +79,11 @@ private fun UploadedSize(uploadedSizeInBytes: () -> Long) {
         derivedStateOf { HumanReadableSizeUtils.getHumanReadableSize(context, uploadedSizeInBytes()) }
     }
 
-    Text(humanReadableSize)
+    Text(
+        text = humanReadableSize,
+        color = SwissTransferTheme.colors.secondaryTextColor,
+        style = SwissTransferTheme.typography.labelRegular,
+    )
 }
 
 @Composable
@@ -71,5 +93,9 @@ private fun TotalSize(totalSizeInBytes: Long) {
         derivedStateOf { HumanReadableSizeUtils.getHumanReadableSize(context, totalSizeInBytes) }
     }
 
-    Text(humanReadableTotalSize)
+    Text(
+        text = humanReadableTotalSize,
+        color = SwissTransferTheme.colors.secondaryTextColor,
+        style = SwissTransferTheme.typography.labelRegular,
+    )
 }