chore(login): allow background image to be visible

Signed-off-by: Brandon McAnsh <git@bmcreations.dev>

Author: bmc08gt

app/src/main/java/com/getcode/CodeApp.kt

@@ -16,7 +16,6 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
-import cafe.adriel.voyager.core.screen.Screen
 import cafe.adriel.voyager.navigator.CurrentScreen
 import cafe.adriel.voyager.navigator.Navigator
 import cafe.adriel.voyager.transitions.ScreenTransition
@@ -25,11 +24,8 @@ import cafe.adriel.voyager.transitions.SlideTransition
 import com.getcode.navigation.core.BottomSheetNavigator
 import com.getcode.navigation.core.CombinedNavigator
 import com.getcode.navigation.core.LocalCodeNavigator
-import com.getcode.navigation.screens.AccessKeyLoginScreen
-import com.getcode.navigation.screens.HomeScreen
 import com.getcode.navigation.screens.LoginScreen
 import com.getcode.navigation.screens.MainRoot
-import com.getcode.navigation.screens.PermissionRequestScreen
 import com.getcode.navigation.transitions.SheetSlideTransition
 import com.getcode.theme.Brand
 import com.getcode.theme.CodeTheme
@@ -50,7 +46,6 @@ fun CodeApp() {
         val appState = rememberCodeAppState()
         AppNavHost {
             CodeScaffold(
-                backgroundColor = Brand,
                 scaffoldState = appState.scaffoldState
             ) { innerPaddingModifier ->
                 val codeNavigator = LocalCodeNavigator.current

app/src/main/java/com/getcode/theme/Dimens.kt

@@ -10,7 +10,7 @@ import androidx.compose.ui.unit.dp
 import com.getcode.BuildConfig
 
 val topBarHeight = 56.dp
-const val sheetHeight = 0.93f
+const val sheetHeight = 0.9f
 
 internal val LocalDimens = staticCompositionLocalOf<Dimensions> {
     error("No Dimensions provided")

app/src/main/java/com/getcode/view/components/ImageWithBackground.kt

@@ -0,0 +1,57 @@
+package com.getcode.view.components
+
+import androidx.annotation.DrawableRes
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.draw.scale
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.ColorFilter
+import androidx.compose.ui.graphics.DefaultAlpha
+import androidx.compose.ui.graphics.RectangleShape
+import androidx.compose.ui.graphics.Shape
+import androidx.compose.ui.graphics.painter.Painter
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.res.painterResource
+
+@Composable
+fun ImageWithBackground(
+    modifier: Modifier = Modifier,
+    painter: Painter,
+    @DrawableRes backgroundDrawableResId: Int,
+    contentDescription: String?,
+    shape: Shape = RectangleShape,
+    alignment: Alignment = Alignment.Center,
+    contentScale: ContentScale = ContentScale.Fit,
+    imageScale: Float = 1f,
+    alpha: Float = DefaultAlpha,
+    colorFilter: ColorFilter? = null
+) {
+    Box(
+        modifier = modifier.background(color = Color.Unspecified, shape = shape),
+    ) {
+        Image(
+            painter = painter,
+            contentDescription = contentDescription,
+            alignment = alignment,
+            contentScale = contentScale,
+            alpha = alpha,
+            colorFilter = colorFilter,
+            modifier = Modifier.scale(imageScale),
+        )
+        Image(
+            modifier = Modifier
+                .matchParentSize()
+                .clip(shape),
+            alignment = alignment,
+            contentScale = contentScale,
+            alpha = alpha,
+            painter = painterResource(backgroundDrawableResId),
+            contentDescription = null,
+        )
+    }
+}

app/src/main/java/com/getcode/view/login/LoginHome.kt

@@ -1,11 +1,6 @@
 package com.getcode.view.login
 
-import androidx.compose.animation.AnimatedVisibility
-import androidx.compose.animation.core.tween
-import androidx.compose.animation.fadeIn
-import androidx.compose.animation.fadeOut
 import androidx.compose.foundation.Image
-import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.fillMaxHeight
@@ -16,14 +11,11 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.windowInsetsPadding
 import androidx.compose.foundation.text.ClickableText
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.DisposableEffect
 import androidx.compose.runtime.LaunchedEffect
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.rememberCoroutineScope
-import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.ColorFilter
+import androidx.compose.ui.graphics.painter.ColorPainter
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalFocusManager
@@ -36,20 +28,18 @@ import androidx.compose.ui.text.style.TextDecoration
 import androidx.compose.ui.text.withStyle
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.constraintlayout.compose.ConstraintLayout
-import androidx.hilt.navigation.compose.hiltViewModel
 import com.getcode.LocalAnalytics
 import com.getcode.R
 import com.getcode.navigation.core.LocalCodeNavigator
 import com.getcode.navigation.screens.AccessKeyLoginScreen
 import com.getcode.navigation.screens.LoginPhoneVerificationScreen
+import com.getcode.theme.Brand
 import com.getcode.theme.BrandLight
 import com.getcode.theme.CodeTheme
-import com.getcode.util.AnimationUtils
 import com.getcode.util.ChromeTabsUtils
 import com.getcode.view.components.ButtonState
 import com.getcode.view.components.CodeButton
-import kotlinx.coroutines.delay
-import kotlinx.coroutines.launch
+import com.getcode.view.components.ImageWithBackground
 
 
 @Preview
@@ -58,45 +48,25 @@ fun LoginHome() {
     val context = LocalContext.current
     val navigator = LocalCodeNavigator.current
 
-    var show by remember {
-        mutableStateOf(false)
-    }
     Box {
-
-        AnimatedVisibility(
-            modifier = Modifier.fillMaxSize(),
-            visible = show,
-            enter = fadeIn(
-                animationSpec = tween(AnimationUtils.animationTime)
-            ),
-            exit = fadeOut(tween(AnimationUtils.animationTime))
-        ) {
-            Box(
-                Modifier
-                    .fillMaxSize()
-                    .background(CodeTheme.colors.background)
-            )
-        }
-
         ConstraintLayout(
             modifier = Modifier
                 .fillMaxSize()
                 .windowInsetsPadding(WindowInsets.navigationBars),
         ) {
             val (bgImage, logo, buttonCreate, buttonLogin, toc) = createRefs()
 
-            Image(
-                painterResource(R.drawable.ic_code_splash_bg),
-                "",
+            ImageWithBackground(
                 modifier = Modifier
                     .constrainAs(bgImage) {
                         start.linkTo(parent.start)
                         end.linkTo(parent.end)
                         top.linkTo(parent.top)
-                        bottom.linkTo(parent.bottom)
                     }
                     .fillMaxSize(),
-                contentScale = ContentScale.Crop,
+                painter = ColorPainter(Brand),
+                backgroundDrawableResId = R.drawable.ic_code_splash_bg,
+                contentDescription = null
             )
 
             Image(
@@ -191,17 +161,9 @@ fun LoginHome() {
 
     val focusManager = LocalFocusManager.current
     val analytics = LocalAnalytics.current
-    val scope = rememberCoroutineScope()
-    DisposableEffect(Unit) {
+    LaunchedEffect(Unit) {
         focusManager.clearFocus()
         analytics.onAppStarted()
-        scope.launch {
-            delay(750)
-            show = false
-        }
 
-        onDispose { show = true }
     }
-
-
 }

app/src/main/java/com/getcode/view/login/PhoneVerify.kt

@@ -250,7 +250,6 @@ private fun PhoneEntry(
         BasicTextField(
             modifier = Modifier
                 .fillMaxHeight()
-                .padding(top = CodeTheme.dimens.border)
                 .weight(1f)
                 .focusRequester(focusRequester),
             value = value,

app/src/main/res/drawable/ic_code_splash_bg.xml

@@ -8,7 +8,6 @@
         android:pathData="M0,0h375v812h-375z"/>
     <path
         android:pathData="M-42,9.965l341.536,-319.965l429.174,458.107l-341.536,319.965z"
-        android:fillColor="#33C4C4C4"
-        android:fillAlpha="0.14"/>
+        android:fillColor="#33C4C4C4" />
   </group>
 </vector>