Redesign intro screen (#62)

* Redesign intro screen and sigh in methode screen * Fix lint
canopas · Jun 3, 2024 · 9f04b71 · 9f04b71
1 parent e1e732e
commit 9f04b71
Show file tree

Hide file tree

Showing 29 changed files with 1,355 additions and 190 deletions.
diff --git a/app/src/main/ic_launcher-playstore.png b/app/src/main/ic_launcher-playstore.png
diff --git a/app/src/main/java/com/canopas/yourspace/ui/component/PrimaryButton.kt b/app/src/main/java/com/canopas/yourspace/ui/component/PrimaryButton.kt
@@ -2,7 +2,6 @@ package com.canopas.yourspace.ui.component
 
 import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
@@ -29,6 +28,7 @@ fun PrimaryButton(
     containerColor: Color = AppTheme.colorScheme.primary,
     contentColor: Color = AppTheme.colorScheme.onPrimary
 ) {
+    val isEnable = enabled && !showLoader
     val textColor = if (enabled) contentColor else AppTheme.colorScheme.textDisabled
     Button(
         onClick = onClick,
@@ -38,7 +38,7 @@ fun PrimaryButton(
             containerColor = containerColor,
             disabledContainerColor = AppTheme.colorScheme.containerLow
         ),
-        enabled = enabled
+        enabled = isEnable
     ) {
         Spacer(modifier = Modifier.width(24.dp))
         if (showLoader) {
@@ -67,6 +67,7 @@ fun PrimaryTextButton(
     contentColor: Color = AppTheme.colorScheme.primary,
     containerColor: Color = AppTheme.colorScheme.surface
 ) {
+    val isEnable = enabled && !showLoader
     TextButton(
         onClick = onClick,
         modifier = modifier.height(48.dp),
@@ -75,7 +76,7 @@ fun PrimaryTextButton(
             containerColor = containerColor,
             contentColor = contentColor
         ),
-        enabled = enabled
+        enabled = isEnable
     ) {
         Spacer(modifier = Modifier.width(24.dp))
         if (showLoader) {
@@ -101,26 +102,39 @@ fun PrimaryOutlinedButton(
     modifier: Modifier = Modifier,
     label: String,
     onClick: () -> Unit,
-    containerColor: Color = AppTheme.colorScheme.surface,
+    enabled: Boolean = true,
+    showLoader: Boolean = false,
+    icon: @Composable (() -> Unit)? = null,
+    containerColor: Color = Color.Transparent,
     contentColor: Color = AppTheme.colorScheme.primary,
-    outlineColor: Color = AppTheme.colorScheme.primary,
-    enabled: Boolean = true
+    outlineColor: Color = AppTheme.colorScheme.primary
 ) {
+    val isEnable = enabled && !showLoader
     OutlinedButton(
         onClick = onClick,
-        modifier = modifier
-            .fillMaxWidth(fraction = 0.9f),
+        modifier = modifier.height(48.dp),
         border = BorderStroke(color = outlineColor, width = 1.dp),
         colors = ButtonDefaults.buttonColors(
-            containerColor = containerColor
+            containerColor = containerColor,
+            disabledContainerColor = containerColor
         ),
-        enabled = enabled
+        enabled = isEnable
     ) {
+        Spacer(modifier = Modifier.width(24.dp))
+        if (showLoader) {
+            AppProgressIndicator(color = contentColor)
+            Spacer(modifier = Modifier.width(8.dp))
+        }
+        if (icon != null && !showLoader) {
+            icon()
+            Spacer(modifier = Modifier.width(8.dp))
+        }
+
         Text(
             text = label,
-            style = AppTheme.appTypography.subTitle2.copy(color = contentColor),
-            textAlign = TextAlign.Center,
-            modifier = Modifier.padding(vertical = 6.dp, horizontal = 6.dp)
+            style = AppTheme.appTypography.button.copy(color = contentColor),
+            textAlign = TextAlign.Center
         )
+        Spacer(modifier = Modifier.width(24.dp))
     }
 }
diff --git a/app/src/main/java/com/canopas/yourspace/ui/flow/auth/methods/SignInMethodsScreen.kt b/app/src/main/java/com/canopas/yourspace/ui/flow/auth/methods/SignInMethodsScreen.kt
@@ -14,30 +14,25 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.rememberScrollState
-import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.verticalScroll
-import androidx.compose.material3.Button
-import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.Scaffold
-import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Brush
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
 import com.canopas.yourspace.R
 import com.canopas.yourspace.ui.component.AppBanner
 import com.canopas.yourspace.ui.component.AppLogo
-import com.canopas.yourspace.ui.component.AppProgressIndicator
+import com.canopas.yourspace.ui.component.PrimaryButton
+import com.canopas.yourspace.ui.component.PrimaryOutlinedButton
 import com.canopas.yourspace.ui.theme.AppTheme
 import com.canopas.yourspace.ui.theme.CatchMeTheme
 import com.google.android.gms.auth.api.signin.GoogleSignIn
@@ -48,10 +43,7 @@ import timber.log.Timber
 @Composable
 fun SignInMethodsScreen() {
     Scaffold {
-        SignInContent(
-            modifier = Modifier
-                .padding(it)
-        )
+        SignInContent(modifier = Modifier.padding(it))
     }
 }
 
@@ -81,7 +73,7 @@ private fun SignInContent(modifier: Modifier) {
         AppLogo(colorTint = AppTheme.colorScheme.primary)
         Spacer(modifier = Modifier.weight(1f))
         GoogleSignInBtn()
-        Spacer(modifier = Modifier.height(20.dp))
+        Spacer(modifier = Modifier.height(24.dp))
         PhoneLoginBtn(onClick = { viewModel.signInWithPhone() })
         Spacer(modifier = Modifier.weight(1f))
     }
@@ -96,22 +88,11 @@ private fun SignInContent(modifier: Modifier) {
 
 @Composable
 private fun PhoneLoginBtn(onClick: () -> Unit) {
-    Button(
-        onClick = onClick,
-        modifier = Modifier
-            .fillMaxWidth(fraction = 0.8f),
-        shape = RoundedCornerShape(50),
-        colors = ButtonDefaults.buttonColors(
-            containerColor = AppTheme.colorScheme.primary
-        )
-    ) {
-        Text(
-            text = stringResource(id = R.string.sign_in_btn_continue_with_phone),
-            style = AppTheme.appTypography.label1.copy(color = AppTheme.colorScheme.onPrimary),
-            textAlign = TextAlign.Center,
-            modifier = Modifier.padding(vertical = 6.dp)
-        )
-    }
+    PrimaryButton(
+        modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp),
+        label = stringResource(id = R.string.sign_in_btn_continue_with_phone),
+        onClick = onClick
+    )
 }
 
 @Composable
@@ -134,7 +115,7 @@ private fun GoogleSignInBtn() {
             }
         }
 
-    Button(
+    PrimaryOutlinedButton(
         onClick = {
             val gso = GoogleSignInOptions.Builder(GoogleSignInOptions.DEFAULT_SIGN_IN)
                 .requestIdToken(context.getString(R.string.default_web_client_id))
@@ -146,28 +127,18 @@ private fun GoogleSignInBtn() {
             signInClientLauncher.launch(googleSignInClient.signInIntent)
         },
         modifier = Modifier
-            .fillMaxWidth(fraction = 0.8f),
-        shape = RoundedCornerShape(50),
-        colors = ButtonDefaults.buttonColors(
-            containerColor = Color.White
-        )
-    ) {
-        if (state.showGoogleLoading) {
-            AppProgressIndicator()
-        } else {
+            .fillMaxWidth()
+            .padding(horizontal = 16.dp),
+        showLoader = state.showGoogleLoading,
+        label = stringResource(id = R.string.sign_in_btn_continue_with_google),
+        icon = {
             Image(
                 painter = painterResource(id = R.drawable.ic_sign_in_google_logo),
                 contentDescription = null,
                 modifier = Modifier.size(18.dp)
             )
-            Text(
-                text = stringResource(id = R.string.sign_in_btn_continue_with_google),
-                style = AppTheme.appTypography.label1.copy(color = Color.Black),
-                textAlign = TextAlign.Center,
-                modifier = Modifier.padding(vertical = 6.dp, horizontal = 6.dp)
-            )
         }
-    }
+    )
 }
 
 @Preview