refactor Ui components for custom selector

app/src/main/java/fr/free/nrw/commons/customselector/ui/components/Buttons.kt

@@ -22,12 +22,14 @@ fun PrimaryButton(
     text: String,
     onClick: ()-> Unit,
     modifier: Modifier = Modifier,
+    enabled: Boolean = true,
     shape: Shape = RoundedCornerShape(12.dp),
 ) {
     Button(
         onClick = onClick,
         modifier = modifier,
         shape = shape,
+        enabled = enabled,
         contentPadding = PaddingValues(horizontal = 24.dp, vertical = 4.dp)
     ) {
         Text(
@@ -42,11 +44,13 @@ fun SecondaryButton(
     text: String,
     onClick: ()-> Unit,
     modifier: Modifier = Modifier,
+    enabled: Boolean = true,
     shape: Shape = RoundedCornerShape(12.dp),
 ) {
     OutlinedButton(
         onClick = onClick,
         modifier = modifier,
+        enabled = enabled,
         border = BorderStroke(1.dp, color = MaterialTheme.colorScheme.primary),
         shape = shape,
         contentPadding = PaddingValues(horizontal = 16.dp, vertical = 4.dp)

app/src/main/java/fr/free/nrw/commons/customselector/ui/components/CustomSelectorBottomBar.kt

@@ -19,14 +19,21 @@ import fr.free.nrw.commons.ui.theme.CommonsTheme
 fun CustomSelectorBottomBar(
     onPrimaryAction: ()-> Unit,
     onSecondaryAction: ()-> Unit,
-    modifier: Modifier = Modifier
+    modifier: Modifier = Modifier,
+    isAnyImageNotForUpload: Boolean = false
 ) {
+    val buttonText = if (isAnyImageNotForUpload) {
+        R.string.unmark_as_not_for_upload
+    } else {
+        R.string.mark_as_not_for_upload
+    }
+
     Row(
         modifier = modifier,
         horizontalArrangement = Arrangement.spacedBy(16.dp)
     ) {
         SecondaryButton(
-            text = stringResource(R.string.mark_as_not_for_upload).uppercase(),
+            text = stringResource(buttonText).uppercase(),
             onClick = onSecondaryAction,
             modifier = Modifier.weight(1f)
         )
@@ -34,6 +41,7 @@ fun CustomSelectorBottomBar(
         PrimaryButton(
             text = stringResource(R.string.upload).uppercase(),
             onClick = onPrimaryAction,
+            enabled = !isAnyImageNotForUpload,
             modifier = Modifier
                 .weight(1f)
                 .height(IntrinsicSize.Max)

app/src/main/java/fr/free/nrw/commons/customselector/ui/components/CustomSelectorTopBar.kt

@@ -1,12 +1,14 @@
 package fr.free.nrw.commons.customselector.ui.components
 
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.layout.widthIn
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.rounded.KeyboardArrowLeft
 import androidx.compose.material.icons.filled.Close
@@ -20,6 +22,7 @@ import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.material3.TopAppBar
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.painterResource
@@ -92,25 +95,24 @@ fun CustomSelectorTopBar(
                     colors = CardDefaults.elevatedCardColors(
                         containerColor = MaterialTheme.colorScheme.primary
                     ),
-                    elevation = CardDefaults.elevatedCardElevation(8.dp),
+                    shape = RoundedCornerShape(50),
-                    shape = CircleShape,
+                    modifier = Modifier.padding(end = 8.dp)
-                    modifier = Modifier.semantics { contentDescription = "$selectionCount Selected" }
+                        .semantics { contentDescription = "$selectionCount Selected" }
-                        .padding(end = 8.dp)
                 ) {
                     Row(
-                        modifier = Modifier.padding(start = 16.dp, end = 8.dp),
+                        modifier = Modifier.padding(horizontal = 8.dp, vertical = 6.dp)
+                            .widthIn(min = 52.dp),
                         verticalAlignment = Alignment.CenterVertically,
-                        horizontalArrangement = Arrangement.spacedBy(8.dp)
+                        horizontalArrangement = Arrangement.SpaceEvenly
                     ) {
-                        Text(
+                        Text(text = "$selectionCount")
-                            text = "$selectionCount",
-                            modifier = Modifier.padding(vertical = 8.dp)
-                        )
-
                         Icon(
                             imageVector = Icons.Default.Close,
                             contentDescription = null,
-                            modifier = Modifier.clickable { onUnselectAllAction() }
+                            modifier = Modifier.clickable(
+                                interactionSource = remember { MutableInteractionSource() },
+                                indication = null
+                            ) { onUnselectAllAction() }
                         )
                     }
                 }