[No Ticket] UI tweaks for PPO (#2127)

* make it so pull to refresh has an animation and loading is shown with the native spinner * UI tweak to have line spacing for single line project names
kickstarter · Sep 11, 2024 · 7fb3ddc · 7fb3ddc
1 parent 8da70c5
commit 7fb3ddc
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 53 deletions.
diff --git a/app/src/main/java/com/kickstarter/features/pledgedprojectsoverview/ui/PPOCardView.kt b/app/src/main/java/com/kickstarter/features/pledgedprojectsoverview/ui/PPOCardView.kt
@@ -256,11 +256,11 @@ fun ProjectPledgeSummaryView(
                 color = colors.textPrimary,
                 style = typography.footnoteMedium,
                 overflow = TextOverflow.Ellipsis,
-                minLines = 2,
+                minLines = 1,
                 maxLines = 2
             )
 
-            Spacer(modifier = Modifier.weight(1f))
+            Spacer(modifier = Modifier.height(dimensions.paddingXSmall))
 
             Text(
                 text = stringResource(id = R.string.pledge_amount_pledged_fpo).format("pledge_amount", pledgeAmount),

diff --git a/...va/com/kickstarter/features/pledgedprojectsoverview/ui/PledgedProjectsOverviewActivity.kt b/...va/com/kickstarter/features/pledgedprojectsoverview/ui/PledgedProjectsOverviewActivity.kt
@@ -102,7 +102,7 @@ class PledgedProjectsOverviewActivity : AppCompatActivity() {
                         onSendMessageClick = { projectName, projectID, ppoCards, totalAlerts, creatorID -> viewModel.onMessageCreatorClicked(projectName = projectName, projectId = projectID, creatorID = creatorID, ppoCards = ppoCards, totalAlerts = totalAlerts) },
                         onProjectPledgeSummaryClick = { url ->
                             openBackingDetailsWebView(
-                                url = env.webEndpoint() + url,
+                                url = url,
                                 resultLauncher = null
                             )
                         },
@@ -134,15 +134,15 @@ class PledgedProjectsOverviewActivity : AppCompatActivity() {
                                 PPOCardViewType.OPEN_SURVEY -> {
                                     env.analytics()?.trackPPOOpenSurveyCTAClicked(PPOCard.projectId ?: "", ppoCardPagingSource.itemSnapshotList.items, totalAlerts, PPOCard.surveyID ?: "")
                                     openBackingDetailsWebView(
-                                        url = env.webEndpoint() + (PPOCard.backingDetailsUrl ?: ""),
+                                        url = PPOCard.backingDetailsUrl ?: "",
                                         resultLauncher = startForResult
                                     )
                                 }
 
                                 PPOCardViewType.CONFIRM_ADDRESS -> {
                                     env.analytics()?.trackPPOConfirmAddressEditCTAClicked(PPOCard.projectId ?: "", ppoCardPagingSource.itemSnapshotList.items, totalAlerts)
                                     openBackingDetailsWebView(
-                                        url = env.webEndpoint() + (PPOCard.backingDetailsUrl ?: ""),
+                                        url = PPOCard.backingDetailsUrl ?: "",
                                         resultLauncher = startForResult
                                     )
                                 }

diff --git a/...java/com/kickstarter/features/pledgedprojectsoverview/ui/PledgedProjectsOverviewScreen.kt b/...java/com/kickstarter/features/pledgedprojectsoverview/ui/PledgedProjectsOverviewScreen.kt
@@ -2,8 +2,6 @@ package com.kickstarter.features.pledgedprojectsoverview.ui
 
 import android.content.res.Configuration
 import androidx.compose.foundation.Image
-import androidx.compose.foundation.background
-import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -23,6 +21,7 @@ import androidx.compose.material.Scaffold
 import androidx.compose.material.SnackbarHost
 import androidx.compose.material.SnackbarHostState
 import androidx.compose.material.Text
+import androidx.compose.material.pullrefresh.PullRefreshIndicator
 import androidx.compose.material.pullrefresh.pullRefresh
 import androidx.compose.material.pullrefresh.rememberPullRefreshState
 import androidx.compose.runtime.Composable
@@ -48,7 +47,6 @@ import com.kickstarter.libs.utils.RewardViewUtils
 import com.kickstarter.libs.utils.extensions.format
 import com.kickstarter.libs.utils.extensions.isNullOrZero
 import com.kickstarter.ui.compose.designsystem.KSAlertDialog
-import com.kickstarter.ui.compose.designsystem.KSCircularProgressIndicator
 import com.kickstarter.ui.compose.designsystem.KSErrorSnackbar
 import com.kickstarter.ui.compose.designsystem.KSHeadsupSnackbar
 import com.kickstarter.ui.compose.designsystem.KSPrimaryGreenButton
@@ -178,41 +176,41 @@ fun PledgedProjectsOverviewScreen(
         isLoading,
         pullRefreshCallback,
     )
-    Box(
-        modifier = Modifier
-            .fillMaxSize()
-            .pullRefresh(pullRefreshState),
-        contentAlignment = Alignment.Center
-    ) {
-        Scaffold(
-            snackbarHost = {
-                SnackbarHost(
-                    modifier = Modifier.padding(dimensions.paddingSmall),
-                    hostState = errorSnackBarHostState,
-                    snackbar = { data ->
-                        // Action label is typically for the action on a snackbar, but we can
-                        // leverage it and show different visuals depending on what we pass in
-                        if (data.actionLabel == KSSnackbarTypes.KS_ERROR.name) {
-                            KSErrorSnackbar(text = data.message)
-                        } else {
-                            KSHeadsupSnackbar(text = data.message)
-                        }
+    Scaffold(
+        snackbarHost = {
+            SnackbarHost(
+                modifier = Modifier.padding(dimensions.paddingSmall),
+                hostState = errorSnackBarHostState,
+                snackbar = { data ->
+                    // Action label is typically for the action on a snackbar, but we can
+                    // leverage it and show different visuals depending on what we pass in
+                    if (data.actionLabel == KSSnackbarTypes.KS_ERROR.name) {
+                        KSErrorSnackbar(text = data.message)
+                    } else {
+                        KSHeadsupSnackbar(text = data.message)
                     }
-                )
-            },
-            modifier = modifier,
-            topBar = {
-                TopToolBar(
-                    title = stringResource(id = R.string.Project_alerts),
-                    titleColor = colors.textPrimary,
-                    leftOnClickAction = onBackPressed,
-                    leftIconColor = colors.icon,
-                    leftIconModifier = Modifier.testTag(PledgedProjectsOverviewScreenTestTag.BACK_BUTTON.name),
-                    backgroundColor = colors.backgroundSurfacePrimary,
-                )
-            },
-            backgroundColor = colors.backgroundSurfacePrimary
-        ) { padding ->
+                }
+            )
+        },
+        modifier = modifier,
+        topBar = {
+            TopToolBar(
+                title = stringResource(id = R.string.Project_alerts),
+                titleColor = colors.textPrimary,
+                leftOnClickAction = onBackPressed,
+                leftIconColor = colors.icon,
+                leftIconModifier = Modifier.testTag(PledgedProjectsOverviewScreenTestTag.BACK_BUTTON.name),
+                backgroundColor = colors.backgroundSurfacePrimary,
+            )
+        },
+        backgroundColor = colors.backgroundSurfacePrimary
+    ) { padding ->
+        Box(
+            modifier = Modifier
+                .fillMaxSize()
+                .pullRefresh(pullRefreshState),
+            contentAlignment = Alignment.TopCenter
+        ) {
             if (isErrored) {
                 PPOScreenErrorState()
             } else if (showEmptyState) {
@@ -287,17 +285,14 @@ fun PledgedProjectsOverviewScreen(
                     }
                 }
             }
-            if (isLoading) {
-                Box(
-                    modifier = Modifier
-                        .fillMaxSize()
-                        .background(KSTheme.colors.backgroundAccentGraySubtle.copy(alpha = 0.5f))
-                        .clickable(enabled = false) { },
-                    contentAlignment = Alignment.Center
-                ) {
-                    KSCircularProgressIndicator()
-                }
-            }
+
+            PullRefreshIndicator(
+                modifier = Modifier.align(Alignment.TopCenter),
+                refreshing = isLoading,
+                state = pullRefreshState,
+                backgroundColor = colors.backgroundAccentGraySubtle,
+                contentColor = colors.backgroundAccentGreenBold
+            )
         }
     }