Skip to content

Commit 7aaba58

Browse files
EdgarBarcenas97EdgarBarcenas97
committed
Fix Ui Buttons
1 parent 11a9458 commit 7aaba58

File tree

8 files changed

+99
-156
lines changed

8 files changed

+99
-156
lines changed

‎composeApp/src/commonMain/kotlin/app/app/samplekmp/app/auth/AuthGraph.kt

+4-12
Original file line numberDiff line numberDiff line change
@@ -30,19 +30,13 @@ fun NavGraphBuilder.authGraph(
3030
) {
3131
composable<OnboardingScreenRoute> {
3232
OnboardingScreen(
33-
onSignInClick = {
34-
rootController.navigate(SignInScreenRoute)
35-
},
36-
onSignUpClick = {
37-
rootController.navigate(SignUpScreenRoute)
38-
}
33+
onSignInClick = { rootController.navigate(SignInScreenRoute) },
34+
onSignUpClick = { rootController.navigate(SignUpScreenRoute) }
3935
)
4036
}
4137
composable<SignInScreenRoute> {
4238
SignInScreen(
43-
onBackClick = {
44-
rootController.popBackStack()
45-
},
39+
onBackClick = { rootController.popBackStack() },
4640
onLoginClick = { email, password ->
4741
rootController.navigate(HomeGraph) {
4842
popUpTo(rootController.graph.id) {
@@ -58,9 +52,7 @@ fun NavGraphBuilder.authGraph(
5852
}
5953
composable<SignUpScreenRoute> {
6054
SignUpScreen(
61-
onBackClick = {
62-
rootController.popBackStack()
63-
},
55+
onBackClick = { rootController.popBackStack() },
6456
onRegisterClick = { email, password ->
6557
rootController.navigate(HomeGraph) {
6658
popUpTo(rootController.graph.id) {

‎composeApp/src/commonMain/kotlin/app/app/samplekmp/app/auth/onboarding/OnboardingScaffold.kt

+12-23
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,9 @@ import androidx.compose.foundation.layout.widthIn
1616
import androidx.compose.foundation.pager.HorizontalPager
1717
import androidx.compose.foundation.pager.rememberPagerState
1818
import androidx.compose.foundation.shape.CircleShape
19-
import androidx.compose.material3.Button
20-
import androidx.compose.material3.ButtonDefaults
2119
import androidx.compose.material3.LocalContentColor
2220
import androidx.compose.material3.MaterialTheme
2321
import androidx.compose.material3.Text
24-
import androidx.compose.material3.TextButton
2522
import androidx.compose.runtime.Composable
2623
import androidx.compose.runtime.CompositionLocalProvider
2724
import androidx.compose.runtime.getValue
@@ -40,11 +37,11 @@ import app.app.samplekmp.resources.Space6
4037
import app.app.samplekmp.resources.Space600
4138
import app.app.samplekmp.resources.Space8
4239
import app.app.samplekmp.resources.Weight1
40+
import app.app.samplekmp.resources.composables.button.GradientButton
41+
import app.app.samplekmp.resources.composables.button.TextButtonCustom
4342
import coil3.compose.AsyncImage
44-
import org.jetbrains.compose.resources.stringResource
4543
import samplekmp.composeapp.generated.resources.Res
4644
import samplekmp.composeapp.generated.resources.create_account
47-
import samplekmp.composeapp.generated.resources.forgot_password
4845
import samplekmp.composeapp.generated.resources.login
4946

5047
@Composable
@@ -131,26 +128,18 @@ fun OnboardingScaffold(
131128
Column(
132129
verticalArrangement = Arrangement.spacedBy(Space2),
133130
modifier = Modifier
134-
.align(Alignment.CenterHorizontally)
131+
.fillMaxWidth()
135132
.padding(horizontal = Space16)
136-
.padding(bottom = Space16).widthIn(max = Space600)
133+
.padding(bottom = Space16)
137134
) {
138-
Button(
139-
onClick = onSignUpClick,
140-
modifier = Modifier.fillMaxWidth()
141-
) {
142-
Text(
143-
text = stringResource(Res.string.create_account),
144-
modifier = Modifier.padding(vertical = Space8)
145-
)
146-
}
147-
TextButton(
148-
onClick = onSignInClick,
149-
modifier = Modifier.fillMaxWidth(),
150-
colors = ButtonDefaults.textButtonColors(contentColor = Color.White)
151-
) {
152-
Text(text = stringResource(Res.string.login))
153-
}
135+
GradientButton(
136+
title = Res.string.create_account,
137+
onButtonPressed = onSignUpClick
138+
)
139+
TextButtonCustom(
140+
onTextButtonClick = onSignInClick,
141+
title = Res.string.login
142+
)
154143
}
155144
}
156145
}

‎composeApp/src/commonMain/kotlin/app/app/samplekmp/app/auth/signIn/SignInScaffold.kt

+32-50
Original file line numberDiff line numberDiff line change
@@ -4,38 +4,32 @@ import androidx.compose.foundation.layout.Arrangement
44
import androidx.compose.foundation.layout.Column
55
import androidx.compose.foundation.layout.Spacer
66
import androidx.compose.foundation.layout.fillMaxSize
7-
import androidx.compose.foundation.layout.fillMaxWidth
87
import androidx.compose.foundation.layout.height
98
import androidx.compose.foundation.layout.padding
109
import androidx.compose.material.icons.Icons
1110
import androidx.compose.material.icons.filled.ArrowBack
12-
import androidx.compose.material3.Button
13-
import androidx.compose.material3.CenterAlignedTopAppBar
14-
import androidx.compose.material3.ExperimentalMaterial3Api
15-
import androidx.compose.material3.Icon
16-
import androidx.compose.material3.IconButton
1711
import androidx.compose.material3.MaterialTheme
18-
import androidx.compose.material3.OutlinedButton
1912
import androidx.compose.material3.Scaffold
2013
import androidx.compose.material3.Text
21-
import androidx.compose.material3.TextButton
2214
import androidx.compose.runtime.Composable
2315
import androidx.compose.ui.Alignment
2416
import androidx.compose.ui.Modifier
17+
import app.app.samplekmp.resources.RhealPrimary
2518
import app.app.samplekmp.resources.Space16
26-
import app.app.samplekmp.resources.Space24
2719
import app.app.samplekmp.resources.Space48
2820
import app.app.samplekmp.resources.Space64
2921
import app.app.samplekmp.resources.Space8
22+
import app.app.samplekmp.resources.composables.button.GradientButton
23+
import app.app.samplekmp.resources.composables.button.TextButtonCustom
3024
import app.app.samplekmp.resources.composables.form.login.LoginForm
3125
import app.app.samplekmp.resources.composables.form.login.rememberLoginFormState
26+
import app.app.samplekmp.resources.composables.topbar.TopBar
3227
import org.jetbrains.compose.resources.stringResource
3328
import samplekmp.composeapp.generated.resources.Res
3429
import samplekmp.composeapp.generated.resources.forgot_password
3530
import samplekmp.composeapp.generated.resources.login
3631
import samplekmp.composeapp.generated.resources.register
3732

38-
@OptIn(ExperimentalMaterial3Api::class)
3933
@Composable
4034
fun SignInScaffold(
4135
onBackClick: () -> Unit,
@@ -45,62 +39,50 @@ fun SignInScaffold(
4539
) {
4640
Scaffold(
4741
topBar = {
48-
CenterAlignedTopAppBar(
49-
title = {},
50-
navigationIcon = {
51-
IconButton(onClick = onBackClick) {
52-
Icon(imageVector = Icons.Default.ArrowBack, contentDescription = null)
53-
}
54-
}
42+
TopBar(
43+
icon = Icons.Default.ArrowBack,
44+
onBackClick = onBackClick
5545
)
5646
}
57-
) { padding ->
47+
) { paddingValues ->
5848
Column(
59-
modifier = Modifier
60-
.padding(padding)
61-
.fillMaxSize(),
6249
verticalArrangement = Arrangement.Center,
6350
horizontalAlignment = Alignment.CenterHorizontally,
51+
modifier = Modifier
52+
.fillMaxSize()
53+
.padding(
54+
top = paddingValues.calculateTopPadding(),
55+
bottom = paddingValues.calculateBottomPadding(),
56+
start = Space16,
57+
end = Space16)
6458
) {
6559
val formState = rememberLoginFormState()
6660
Text(
6761
text = stringResource(Res.string.login),
6862
style = MaterialTheme.typography.displayMedium
6963
)
7064
Spacer(modifier = Modifier.height(Space64))
71-
LoginForm(
72-
state = formState,
73-
modifier = Modifier.padding(horizontal = Space24)
74-
)
75-
TextButton(
76-
onClick = onForgotPasswordClick,
65+
LoginForm(state = formState)
66+
TextButtonCustom(
67+
onTextButtonClick = onForgotPasswordClick,
68+
title = Res.string.forgot_password,
69+
color = RhealPrimary,
7770
modifier = Modifier
7871
.align(Alignment.End)
79-
.padding(end = Space16, top = Space8)
80-
) {
81-
Text(text = stringResource(Res.string.forgot_password))
82-
}
72+
.padding(top = Space8)
73+
)
8374
Spacer(modifier = Modifier.height(Space48))
84-
Button(
85-
onClick = {
75+
GradientButton(
76+
title = Res.string.login,
77+
onButtonPressed = {
8678
onLoginClick(formState.email.value, formState.password.value)
87-
},
88-
modifier = Modifier
89-
.fillMaxWidth()
90-
.padding(horizontal = Space24),
91-
enabled = formState.isValid,
92-
) {
93-
Text(text = stringResource(Res.string.login))
94-
}
95-
Spacer(modifier = Modifier.height(Space8))
96-
OutlinedButton(
97-
onClick = onRegisterClick,
98-
modifier = Modifier
99-
.fillMaxWidth()
100-
.padding(horizontal = Space24)
101-
) {
102-
Text(text = stringResource(Res.string.register))
103-
}
79+
}
80+
)
81+
Spacer(modifier = Modifier.height(Space16))
82+
GradientButton(
83+
title = Res.string.register,
84+
onButtonPressed = onRegisterClick,
85+
)
10486
}
10587
}
10688
}

‎composeApp/src/commonMain/kotlin/app/app/samplekmp/app/auth/signup/SignUpScaffold.kt

+17-21
Original file line numberDiff line numberDiff line change
@@ -3,25 +3,22 @@ package app.app.samplekmp.app.auth.signup
33
import androidx.compose.foundation.layout.Column
44
import androidx.compose.foundation.layout.Spacer
55
import androidx.compose.foundation.layout.fillMaxSize
6-
import androidx.compose.foundation.layout.fillMaxWidth
76
import androidx.compose.foundation.layout.padding
87
import androidx.compose.foundation.rememberScrollState
98
import androidx.compose.foundation.verticalScroll
109
import androidx.compose.material.icons.Icons
1110
import androidx.compose.material.icons.filled.ArrowBack
12-
import androidx.compose.material3.Button
1311
import androidx.compose.material3.Scaffold
14-
import androidx.compose.material3.Text
1512
import androidx.compose.runtime.Composable
1613
import androidx.compose.runtime.LaunchedEffect
1714
import androidx.compose.ui.Modifier
1815
import app.app.samplekmp.resources.Space16
1916
import app.app.samplekmp.resources.Weight1
20-
import app.app.samplekmp.resources.composables.topbar.TopBar
17+
import app.app.samplekmp.resources.composables.button.GradientButton
2118
import app.app.samplekmp.resources.composables.form.personalData.PersonalData
2219
import app.app.samplekmp.resources.composables.form.registration.RegistrationForm
2320
import app.app.samplekmp.resources.composables.form.registration.rememberRegistrationFormState
24-
import org.jetbrains.compose.resources.stringResource
21+
import app.app.samplekmp.resources.composables.topbar.TopBar
2522
import samplekmp.composeapp.generated.resources.Res
2623
import samplekmp.composeapp.generated.resources.register
2724

@@ -36,18 +33,20 @@ fun SignUpScaffold(
3633
title = Res.string.register,
3734
icon = Icons.Default.ArrowBack,
3835
onBackClick = onBackClick
39-
4036
)
4137
}
42-
) { padding ->
38+
) { paddingValues ->
4339
Column(
4440
modifier = Modifier
45-
.padding(padding)
4641
.fillMaxSize()
42+
.padding(
43+
top = paddingValues.calculateTopPadding(),
44+
bottom = paddingValues.calculateBottomPadding(),
45+
start = Space16,
46+
end = Space16)
4747
.verticalScroll(rememberScrollState())
4848
) {
4949
val formState = rememberRegistrationFormState()
50-
5150
LaunchedEffect(Unit) {
5251
formState.personalData.run {
5352
firstName.value = "John"
@@ -60,26 +59,23 @@ fun SignUpScaffold(
6059
secondPassword.onValueChanged("StrongPassword123")
6160
}
6261
}
63-
6462
RegistrationForm(
6563
state = formState,
66-
modifier = Modifier.padding(Space16)
64+
modifier = Modifier.padding(top = Space16)
6765
)
6866
Spacer(modifier = Modifier.weight(Weight1))
69-
Button(
70-
onClick = {
67+
GradientButton(
68+
title = Res.string.register,
69+
enabledButton = formState.isValid,
70+
modifier = Modifier
71+
.padding(bottom = Space16),
72+
onButtonPressed = {
7173
onRegisterClick(
7274
formState.personalData.personalData,
7375
formState.passwords.firstPassword.value
7476
)
75-
},
76-
modifier = Modifier
77-
.fillMaxWidth()
78-
.padding(Space16),
79-
enabled = formState.isValid,
80-
) {
81-
Text(text = stringResource(Res.string.register))
82-
}
77+
}
78+
)
8379
}
8480
}
8581
}

‎composeApp/src/commonMain/kotlin/app/app/samplekmp/resources/composables/button/GradientButton.kt

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
package app.app.samplekmp.resources.composables.button
22

33
import androidx.compose.foundation.background
4+
import androidx.compose.foundation.layout.fillMaxWidth
45
import androidx.compose.foundation.layout.height
56
import androidx.compose.material3.Button
67
import androidx.compose.material3.ButtonDefaults
@@ -23,7 +24,7 @@ import app.app.samplekmp.resources.Space40
2324
@Composable
2425
fun GradientButton(
2526
title: StringResource,
26-
enabledButton: Boolean,
27+
enabledButton: Boolean = true,
2728
onButtonPressed: () -> Unit,
2829
modifier: Modifier = Modifier
2930
) {
@@ -38,13 +39,14 @@ fun GradientButton(
3839
colors = ButtonDefaults.buttonColors(containerColor = Color.Transparent),
3940
shape = MaterialTheme.shapes.extraLarge,
4041
modifier = modifier
42+
.fillMaxWidth()
4143
.background(brush = buttonBrush, shape = MaterialTheme.shapes.extraLarge)
4244
.height(Space40)
4345
) {
4446
Text(
4547
text = stringResource(title),
4648
style = MaterialTheme.typography.bodyLarge.copy(
47-
fontWeight = FontWeight.SemiBold,
49+
fontWeight = FontWeight.Normal,
4850
color = if (enabledButton) Neutro00 else Neutro100
4951
)
5052
)

0 commit comments

Comments
 (0)