style(ui/components): give BottomBar's a little bounce

show scrim in various places

Signed-off-by: Brandon McAnsh <[email protected]>

Author: bmc08gt

apps/flipcash/app/src/main/kotlin/com/flipcash/app/HomeViewModel.kt

@@ -35,6 +35,7 @@ class HomeViewModel @Inject constructor(
                     positiveText = resources.getString(R.string.action_logIn),
                     tertiaryText = resources.getString(R.string.action_cancel),
                     isDismissible = false,
+                    showScrim = true,
                     onPositive = {
                         viewModelScope.launch {
                             delay(150) // wait for dismiss

apps/flipcash/features/balance/src/main/kotlin/com/flipcash/app/balance/internal/BalanceViewModel.kt

@@ -67,6 +67,7 @@ internal class BalanceViewModel @Inject constructor(
                     BottomBarManager.BottomBarMessage(
                         title = title,
                         subtitle = resources.getString(R.string.prompt_description_cancelTransfer),
+                        showScrim = true,
                         positiveText = resources.getString(R.string.action_cancelTransfer),
                         onPositive = { dispatchEvent(Event.CancelTransfer(vault = metadata.creator)) },
                         negativeText = resources.getString(R.string.action_nevermind)

apps/flipcash/features/login/src/main/kotlin/com/flipcash/app/login/accesskey/AccessKeyScreen.kt

@@ -219,6 +219,7 @@ internal fun AccessKeyScreenContent(viewModel: LoginAccessKeyViewModel, onComple
                                     title = context.getString(R.string.prompt_title_wroteThemDown),
                                     subtitle = context
                                         .getString(R.string.prompt_description_wroteThemDown),
+                                    showScrim = true,
                                     positiveText = context
                                         .getString(R.string.action_yesWroteThemDown),
                                     negativeText = "",
@@ -298,6 +299,7 @@ internal fun AccessKeyScreenContent(viewModel: LoginAccessKeyViewModel, onComple
                     title = context.getString(R.string.prompt_title_exitAccountCreation),
                     subtitle = context
                         .getString(R.string.prompt_description_exitAccountCreation),
+                    showScrim = true,
                     positiveText = context.getString(R.string.action_exit),
                     negativeText = "",
                     tertiaryText = context.getString(R.string.action_cancel),

apps/flipcash/features/menu/src/main/kotlin/com/flipcash/app/menu/internal/MenuScreenViewModel.kt

@@ -122,6 +122,7 @@ internal class MenuScreenViewModel @Inject constructor(
                     BottomBarManager.BottomBarMessage(
                         title = resources.getString(R.string.prompt_title_logout),
                         subtitle = resources.getString(R.string.prompt_description_logout),
+                        showScrim = true,
                         positiveText = resources.getString(R.string.action_logout),
                         tertiaryText = resources.getString(R.string.action_cancel),
                         onPositive = {

apps/flipcash/features/myaccount/src/main/kotlin/com/flipcash/app/myaccount/internal/MyAccountScreenViewModel.kt

@@ -95,6 +95,7 @@ internal class MyAccountScreenViewModel @Inject constructor(
                 BottomBarManager.showMessage(
                     BottomBarManager.BottomBarMessage(
                         title = resources.getString(R.string.prompt_title_deleteAccount),
+                        showScrim = true,
                         subtitle = resources.getString(R.string.prompt_description_deleteAccount),
                         positiveText = resources.getString(R.string.action_deleteAccount),
                         tertiaryText = resources.getString(R.string.action_cancel),
@@ -144,6 +145,7 @@ internal class MyAccountScreenViewModel @Inject constructor(
                     BottomBarManager.BottomBarMessage(
                         title = resources.getString(R.string.prompt_title_viewAccessKey),
                         subtitle = resources.getString(R.string.prompt_description_viewAccessKey),
+                        showScrim = true,
                         positiveText = resources.getString(R.string.action_viewAccessKey),
                         negativeText = resources.getString(R.string.action_cancel),
                         onPositive = { dispatchEvent(Event.OnViewAccessKey) },

apps/flipcash/features/withdrawal/src/main/kotlin/com/flipcash/app/withdrawal/WithdrawalViewModel.kt

@@ -343,6 +343,7 @@ internal class WithdrawalViewModel @Inject constructor(
                     BottomBarManager.BottomBarMessage(
                         title = resources.getString(R.string.prompt_title_confirmWithdrawal),
                         subtitle = resources.getString(R.string.prompt_description_confirmWithdrawal),
+                        showScrim = true,
                         actions = buildList {
                             add(
                                 BottomBarAction(

apps/flipcash/features/withdrawal/src/main/kotlin/com/flipcash/app/withdrawal/internal/confirmation/WithdrawalConfirmationScreen.kt

@@ -61,6 +61,7 @@ internal fun WithdrawalConfirmationScreen(viewModel: WithdrawalViewModel) {
                         title = resources.getString(R.string.success_title_withdrawalComplete),
                         subtitle = resources.getString(R.string.success_description_withdrawalComplete),
                         showCancel = false,
+                        showScrim = true,
                         type = BottomBarManager.BottomBarMessageType.SUCCESS,
                         actions = listOf(
                             BottomBarAction(

ui/components/src/main/kotlin/com/getcode/ui/components/bars/BottomBarContainer.kt

@@ -1,12 +1,17 @@
 package com.getcode.ui.components.bars
 
 import androidx.activity.compose.BackHandler
+import androidx.compose.animation.AnimatedContent
 import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.animation.core.MutableTransitionState
+import androidx.compose.animation.core.Spring
 import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.animation.core.spring
 import androidx.compose.animation.core.tween
+import androidx.compose.animation.fadeIn
 import androidx.compose.animation.slideInVertically
 import androidx.compose.animation.slideOutVertically
+import androidx.compose.animation.togetherWith
 import androidx.compose.foundation.background
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Arrangement
@@ -34,6 +39,7 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.alpha
+import androidx.compose.ui.draw.clipToBounds
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextAlign
@@ -121,22 +127,37 @@ fun BottomBarContainer(barMessages: BarMessages) {
         }
     }
 
-    AnimatedVisibility(
-        modifier = Modifier.fillMaxSize(),
-        visibleState = bottomBarVisibleState,
-        enter = slideInVertically(
-            initialOffsetY = { it / 2 },
-            animationSpec = tween(300.scaled(animationScale).toInt())
-        ),
-        exit = slideOutVertically(
-            targetOffsetY = { it },
-            animationSpec = tween(300.scaled(animationScale).toInt())
-        ),
-    ) {
-        val closeWith: (fromAction: Boolean) -> Unit = { fromAction ->
-            scope.launch { onClose(fromAction) }
+    AnimatedContent(
+        modifier = Modifier.fillMaxSize()
+            .clipToBounds(),
+        targetState = bottomBarVisibleState.targetState,
+        transitionSpec = {
+            slideInVertically(
+                initialOffsetY = { it / 2 },
+                animationSpec = spring(
+                    dampingRatio = Spring.DampingRatioLowBouncy,
+                    stiffness = Spring.StiffnessMediumLow
+                )
+            ) togetherWith slideOutVertically(
+                targetOffsetY = { it },
+                animationSpec = spring(
+                    dampingRatio = Spring.DampingRatioNoBouncy,
+                    stiffness = Spring.StiffnessLow
+                )
+            )
+        },
+        label = "BottomBarAnimation"
+    ) { isVisible ->
+        if (isVisible) {
+            val closeWith: (fromAction: Boolean) -> Unit = { fromAction ->
+                scope.launch { onClose(fromAction) }
+            }
+            BottomBarView(
+                bottomBarMessage = bottomBarMessage,
+                onClose = closeWith,
+                onBackPressed = { closeWith(false) }
+            )
         }
-        BottomBarView(bottomBarMessage = bottomBarMessage, closeWith, onBackPressed = { closeWith(false)})
     }
 }
 
@@ -153,19 +174,12 @@ fun BottomBarView(
     }
 
     Box(
+        modifier = Modifier.fillMaxWidth(),
         contentAlignment = Alignment.BottomCenter
     ) {
         Column(
             modifier = Modifier
-                .background(
-                    when (bottomBarMessage.type) {
-                        BottomBarManager.BottomBarMessageType.DESTRUCTIVE -> CodeTheme.colors.bannerError
-                        BottomBarManager.BottomBarMessageType.REMOTE_SEND -> CodeTheme.colors.brandLight
-                        BottomBarManager.BottomBarMessageType.THEMED -> CodeTheme.colors.brand
-                        BottomBarManager.BottomBarMessageType.WARNING -> CodeTheme.colors.bannerWarning
-                        BottomBarManager.BottomBarMessageType.SUCCESS -> CodeTheme.colors.bannerSuccess
-                    }
-                )
+                .background(bottomBarMessage.type.backgroundColor())
                 .padding(top = CodeTheme.dimens.inset)
                 .padding(horizontal = CodeTheme.dimens.inset)
                 .windowInsetsPadding(WindowInsets.navigationBars),
@@ -238,4 +252,13 @@ fun BottomBarView(
             }
         }
     }
+}
+
+@Composable
+private fun BottomBarManager.BottomBarMessageType.backgroundColor(): Color = when (this) {
+    BottomBarManager.BottomBarMessageType.DESTRUCTIVE -> CodeTheme.colors.bannerError
+    BottomBarManager.BottomBarMessageType.REMOTE_SEND -> CodeTheme.colors.brandLight
+    BottomBarManager.BottomBarMessageType.THEMED -> CodeTheme.colors.brand
+    BottomBarManager.BottomBarMessageType.WARNING -> CodeTheme.colors.bannerWarning
+    BottomBarManager.BottomBarMessageType.SUCCESS -> CodeTheme.colors.bannerSuccess
 }