diff --git a/composeApp/src/commonMain/composeResources/drawable/google-signin-logo.xml b/composeApp/src/commonMain/composeResources/drawable/google-signin-logo.xml new file mode 100644 index 00000000..9ba7e11b --- /dev/null +++ b/composeApp/src/commonMain/composeResources/drawable/google-signin-logo.xml @@ -0,0 +1,18 @@ + + + + + + \ No newline at end of file diff --git a/composeApp/src/commonMain/composeResources/font/roboto_black.ttf b/composeApp/src/commonMain/composeResources/font/roboto_black.ttf new file mode 100644 index 00000000..58fa175b Binary files /dev/null and b/composeApp/src/commonMain/composeResources/font/roboto_black.ttf differ diff --git a/composeApp/src/commonMain/composeResources/font/roboto_black_italic.ttf b/composeApp/src/commonMain/composeResources/font/roboto_black_italic.ttf new file mode 100644 index 00000000..0a4dfd05 Binary files /dev/null and b/composeApp/src/commonMain/composeResources/font/roboto_black_italic.ttf differ diff --git a/composeApp/src/commonMain/composeResources/font/roboto_bold.ttf b/composeApp/src/commonMain/composeResources/font/roboto_bold.ttf new file mode 100644 index 00000000..e64db796 Binary files /dev/null and b/composeApp/src/commonMain/composeResources/font/roboto_bold.ttf differ diff --git a/composeApp/src/commonMain/composeResources/font/roboto_bold_italic.ttf b/composeApp/src/commonMain/composeResources/font/roboto_bold_italic.ttf new file mode 100644 index 00000000..5e39ae97 Binary files /dev/null and b/composeApp/src/commonMain/composeResources/font/roboto_bold_italic.ttf differ diff --git a/composeApp/src/commonMain/composeResources/font/roboto_italic.ttf b/composeApp/src/commonMain/composeResources/font/roboto_italic.ttf new file mode 100644 index 00000000..65498ee3 Binary files /dev/null and b/composeApp/src/commonMain/composeResources/font/roboto_italic.ttf differ diff --git a/composeApp/src/commonMain/composeResources/font/roboto_light.ttf b/composeApp/src/commonMain/composeResources/font/roboto_light.ttf new file mode 100644 index 00000000..a7e02843 Binary files /dev/null and b/composeApp/src/commonMain/composeResources/font/roboto_light.ttf differ diff --git a/composeApp/src/commonMain/composeResources/font/roboto_light_italic.ttf b/composeApp/src/commonMain/composeResources/font/roboto_light_italic.ttf new file mode 100644 index 00000000..867b76d9 Binary files /dev/null and b/composeApp/src/commonMain/composeResources/font/roboto_light_italic.ttf differ diff --git a/composeApp/src/commonMain/composeResources/font/roboto_medium.ttf b/composeApp/src/commonMain/composeResources/font/roboto_medium.ttf new file mode 100644 index 00000000..0707e15c Binary files /dev/null and b/composeApp/src/commonMain/composeResources/font/roboto_medium.ttf differ diff --git a/composeApp/src/commonMain/composeResources/font/roboto_medium_italic.ttf b/composeApp/src/commonMain/composeResources/font/roboto_medium_italic.ttf new file mode 100644 index 00000000..4e3bf0d2 Binary files /dev/null and b/composeApp/src/commonMain/composeResources/font/roboto_medium_italic.ttf differ diff --git a/composeApp/src/commonMain/composeResources/font/roboto_regular.ttf b/composeApp/src/commonMain/composeResources/font/roboto_regular.ttf new file mode 100644 index 00000000..2d116d92 Binary files /dev/null and b/composeApp/src/commonMain/composeResources/font/roboto_regular.ttf differ diff --git a/composeApp/src/commonMain/composeResources/font/roboto_thin.ttf b/composeApp/src/commonMain/composeResources/font/roboto_thin.ttf new file mode 100644 index 00000000..ab68508d Binary files /dev/null and b/composeApp/src/commonMain/composeResources/font/roboto_thin.ttf differ diff --git a/composeApp/src/commonMain/composeResources/font/roboto_thin_italic.ttf b/composeApp/src/commonMain/composeResources/font/roboto_thin_italic.ttf new file mode 100644 index 00000000..b2c39336 Binary files /dev/null and b/composeApp/src/commonMain/composeResources/font/roboto_thin_italic.ttf differ diff --git a/composeApp/src/commonMain/kotlin/ui/screen/intro/IntroViewModel.kt b/composeApp/src/commonMain/kotlin/ui/screen/intro/IntroViewModel.kt index b652cf5a..409873bf 100644 --- 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 index 4d2b0ef8..b562653a 100644 --- 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 } \ No newline at end of file diff --git a/composeApp/src/commonMain/kotlin/ui/screen/intro/composable/IntroContent.kt b/composeApp/src/commonMain/kotlin/ui/screen/intro/composable/IntroContent.kt index 740b6bfd..64e7147f 100644 --- 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,7 +55,11 @@ 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() } @@ -48,13 +67,57 @@ fun IntroContent( } @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, + ) + } } \ No newline at end of file diff --git a/composeApp/src/commonMain/kotlin/ui/theme/Typography.kt b/composeApp/src/commonMain/kotlin/ui/theme/Typography.kt new file mode 100644 index 00000000..e22e3def --- /dev/null +++ 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) + ) \ No newline at end of file