Sign in with Google button (#55)

* WIP: Google button * Add Google sign-in button * Refactor
Ivy-Apps · Dec 1, 2024 · 79f6f4f · 79f6f4f
1 parent 6348daf
commit 79f6f4f
Show file tree

Hide file tree

Showing 17 changed files with 117 additions and 11 deletions.
diff --git a/composeApp/src/commonMain/composeResources/drawable/google-signin-logo.xml b/composeApp/src/commonMain/composeResources/drawable/google-signin-logo.xml
@@ -0,0 +1,18 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+        android:viewportWidth="48"
+        android:viewportHeight="48"
+        android:width="48dp"
+        android:height="48dp">
+    <path
+            android:pathData="M43.611 20.083H42V20H24v8h11.303c-1.649 4.657 -6.08 8 -11.303 8c-6.627 0 -12 -5.373 -12 -12c0 -6.627 5.373 -12 12 -12c3.059 0 5.842 1.154 7.961 3.039l5.657 -5.657C34.046 6.053 29.268 4 24 4C12.955 4 4 12.955 4 24c0 11.045 8.955 20 20 20c11.045 0 20 -8.955 20 -20C44 22.659 43.862 21.35 43.611 20.083z"
+            android:fillColor="#FFC107"/>
+    <path
+            android:pathData="M6.306 14.691l6.571 4.819C14.655 15.108 18.961 12 24 12c3.059 0 5.842 1.154 7.961 3.039l5.657 -5.657C34.046 6.053 29.268 4 24 4C16.318 4 9.656 8.337 6.306 14.691z"
+            android:fillColor="#FF3D00"/>
+    <path
+            android:pathData="M24 44c5.166 0 9.86 -1.977 13.409 -5.192l-6.19 -5.238C29.211 35.091 26.715 36 24 36c-5.202 0 -9.619 -3.317 -11.283 -7.946l-6.522 5.025C9.505 39.556 16.227 44 24 44z"
+            android:fillColor="#4CAF50"/>
+    <path
+            android:pathData="M43.611 20.083H42V20H24v8h11.303c-0.792 2.237 -2.231 4.166 -4.087 5.571c0.001 -0.001 0.002 -0.001 0.003 -0.002l6.19 5.238C36.971 39.205 44 34 44 24C44 22.659 43.862 21.35 43.611 20.083z"
+            android:fillColor="#1976D2"/>
+</vector>
diff --git a/composeApp/src/commonMain/composeResources/font/roboto_black.ttf b/composeApp/src/commonMain/composeResources/font/roboto_black.ttf
diff --git a/composeApp/src/commonMain/composeResources/font/roboto_black_italic.ttf b/composeApp/src/commonMain/composeResources/font/roboto_black_italic.ttf
diff --git a/composeApp/src/commonMain/composeResources/font/roboto_bold.ttf b/composeApp/src/commonMain/composeResources/font/roboto_bold.ttf
diff --git a/composeApp/src/commonMain/composeResources/font/roboto_bold_italic.ttf b/composeApp/src/commonMain/composeResources/font/roboto_bold_italic.ttf
diff --git a/composeApp/src/commonMain/composeResources/font/roboto_italic.ttf b/composeApp/src/commonMain/composeResources/font/roboto_italic.ttf
diff --git a/composeApp/src/commonMain/composeResources/font/roboto_light.ttf b/composeApp/src/commonMain/composeResources/font/roboto_light.ttf
diff --git a/composeApp/src/commonMain/composeResources/font/roboto_light_italic.ttf b/composeApp/src/commonMain/composeResources/font/roboto_light_italic.ttf
diff --git a/composeApp/src/commonMain/composeResources/font/roboto_medium.ttf b/composeApp/src/commonMain/composeResources/font/roboto_medium.ttf
diff --git a/composeApp/src/commonMain/composeResources/font/roboto_medium_italic.ttf b/composeApp/src/commonMain/composeResources/font/roboto_medium_italic.ttf
diff --git a/composeApp/src/commonMain/composeResources/font/roboto_regular.ttf b/composeApp/src/commonMain/composeResources/font/roboto_regular.ttf
diff --git a/composeApp/src/commonMain/composeResources/font/roboto_thin.ttf b/composeApp/src/commonMain/composeResources/font/roboto_thin.ttf
diff --git a/composeApp/src/commonMain/composeResources/font/roboto_thin_italic.ttf b/composeApp/src/commonMain/composeResources/font/roboto_thin_italic.ttf
diff --git a/composeApp/src/commonMain/kotlin/ui/screen/intro/IntroViewModel.kt b/composeApp/src/commonMain/kotlin/ui/screen/intro/IntroViewModel.kt
@@ -27,7 +27,7 @@ class IntroViewModel(
 
     override fun onEvent(event: IntroViewEvent) {
         when (event) {
-            IntroViewEvent.OnContinueClick -> handleContinueClick()
+            IntroViewEvent.OnContinueWithGoogleClick -> handleContinueClick()
         }
     }
 

diff --git a/composeApp/src/commonMain/kotlin/ui/screen/intro/IntroViewState.kt b/composeApp/src/commonMain/kotlin/ui/screen/intro/IntroViewState.kt
@@ -3,5 +3,5 @@ package ui.screen.intro
 class IntroViewState
 
 sealed interface IntroViewEvent {
-    data object OnContinueClick : IntroViewEvent
+    data object OnContinueWithGoogleClick : IntroViewEvent
 }
diff --git a/composeApp/src/commonMain/kotlin/ui/screen/intro/composable/IntroContent.kt b/composeApp/src/commonMain/kotlin/ui/screen/intro/composable/IntroContent.kt
@@ -1,18 +1,33 @@
 package ui.screen.intro.composable
 
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Surface
+import androidx.compose.material.Text
 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.graphics.Color
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
 import component.LocalLottieAnimation
-import component.button.CtaButton
 import component.platformHorizontalPadding
 import component.text.Headline
 import component.text.Title
+import learn.composeapp.generated.resources.Res
+import learn.composeapp.generated.resources.google_signin_logo
+import org.jetbrains.compose.resources.painterResource
 import ui.screen.intro.IntroViewEvent
 import ui.screen.intro.IntroViewState
+import ui.theme.RobotoFontFamily
 
 
 @Composable
@@ -40,21 +55,69 @@ fun IntroContent(
             Spacer(modifier = Modifier.height(12.dp))
             Title(text = "Learn programming by thinking.")
             Spacer(modifier = Modifier.height(24.dp))
-            ContinueButton(onClick = { onEvent(IntroViewEvent.OnContinueClick) })
+            GoogleSignInButton(
+                onClick = {
+                    onEvent(IntroViewEvent.OnContinueWithGoogleClick)
+                }
+            )
             Spacer(modifier = Modifier.weight(1f))
             IntroLegalText()
         }
     }
 }
 
 @Composable
-private fun ContinueButton(
-    modifier: Modifier = Modifier,
+private fun GoogleSignInButton(
     onClick: () -> Unit,
+    modifier: Modifier = Modifier,
 ) {
-    CtaButton(
-        modifier = modifier,
-        text = "Continue with Google",
-        onClick = onClick
-    )
+    val shape = RoundedCornerShape(percent = 50)
+    val isLight = MaterialTheme.colors.isLight
+    Row(
+        modifier = modifier
+            .clip(shape)
+            .clickable(onClick = onClick)
+            .border(
+                width = 1.dp,
+                color = if (isLight) {
+                    Color(0xFF747775)
+                } else {
+                    Color(0xFF8E918F)
+                },
+                shape = shape,
+            )
+            .background(
+                color = if (isLight) {
+                    Color(0xFFFFFFFF)
+                } else {
+                    Color(0xFF131314)
+                },
+                shape = shape,
+            )
+            .padding(
+                horizontal = 12.dp,
+                vertical = 10.dp,
+            ),
+        verticalAlignment = Alignment.CenterVertically,
+    ) {
+        Image(
+            modifier = Modifier.size(20.dp),
+            painter = painterResource(Res.drawable.google_signin_logo),
+            contentDescription = null,
+        )
+        Spacer(Modifier.width(10.dp))
+        Text(
+            text = "Sign in with Google",
+            color = if (isLight) {
+                Color(0xFF1F1F1F)
+            } else {
+                Color(0xFFE3E3E3)
+            },
+            fontSize = 14.sp,
+            lineHeight = 14.sp,
+            fontWeight = FontWeight.Medium,
+            fontFamily = RobotoFontFamily,
+            textAlign = TextAlign.Center,
+        )
+    }
 }
diff --git a/composeApp/src/commonMain/kotlin/ui/theme/Typography.kt b/composeApp/src/commonMain/kotlin/ui/theme/Typography.kt
@@ -0,0 +1,25 @@
+package ui.theme
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.text.font.FontStyle
+import androidx.compose.ui.text.font.FontWeight
+import learn.composeapp.generated.resources.*
+import org.jetbrains.compose.resources.Font
+
+val RobotoFontFamily
+    @Composable
+    get() = FontFamily(
+        Font(Res.font.roboto_regular, FontWeight.Normal),
+        Font(Res.font.roboto_bold, FontWeight.Bold),
+        Font(Res.font.roboto_italic, FontWeight.Normal, style = FontStyle.Italic),
+        Font(Res.font.roboto_bold_italic, FontWeight.Bold, style = FontStyle.Italic),
+        Font(Res.font.roboto_light, FontWeight.Light),
+        Font(Res.font.roboto_light_italic, FontWeight.Light, style = FontStyle.Italic),
+        Font(Res.font.roboto_medium, FontWeight.Medium),
+        Font(Res.font.roboto_medium_italic, FontWeight.Medium, style = FontStyle.Italic),
+        Font(Res.font.roboto_black, FontWeight.Black),
+        Font(Res.font.roboto_black_italic, FontWeight.Black, style = FontStyle.Italic),
+        Font(Res.font.roboto_thin, FontWeight.Thin),
+        Font(Res.font.roboto_thin_italic, FontWeight.Thin, style = FontStyle.Italic)
+    )