Skip to content

Commit 57d3ba0

Browse files
cy245cy245
committed
Fix UI bugs - make sign up page scrollable to handle large font sizing, and make Shrine screens adapt to dark mode correctly by setting font and button colors
1 parent a87938f commit 57d3ba0

File tree

12 files changed

+257
-131
lines changed

12 files changed

+257
-131
lines changed

‎Shrine/app/src/main/java/com/authentication/shrine/ui/AuthenticationScreen.kt‎

Lines changed: 29 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@ import androidx.compose.foundation.layout.Arrangement
2121
import androidx.compose.foundation.layout.Column
2222
import androidx.compose.foundation.layout.Spacer
2323
import androidx.compose.foundation.layout.fillMaxSize
24-
import androidx.compose.foundation.layout.fillMaxWidth
2524
import androidx.compose.foundation.layout.height
2625
import androidx.compose.foundation.layout.padding
2726
import androidx.compose.material3.Scaffold
@@ -41,6 +40,7 @@ import androidx.compose.ui.res.dimensionResource
4140
import androidx.compose.ui.res.painterResource
4241
import androidx.compose.ui.res.stringResource
4342
import androidx.compose.ui.tooling.preview.Preview
43+
import androidx.compose.ui.unit.dp
4444
import com.authentication.shrine.CredentialManagerUtils
4545
import com.authentication.shrine.R
4646
import com.authentication.shrine.ui.common.LogoHeading
@@ -171,31 +171,36 @@ fun AuthenticationScreen(
171171

172172
Spacer(modifier = Modifier.height(dimensionResource(R.dimen.padding_extra_large)))
173173

174-
// Sign In with passkey or password Button
175-
ShrineButton(
176-
onClick = onSignInWithPasskeyOrPasswordRequest,
177-
buttonText = stringResource(id = R.string.sign_in),
178-
isButtonEnabled = !uiState.isLoading,
179-
)
174+
Column(
175+
horizontalAlignment = Alignment.CenterHorizontally,
176+
verticalArrangement = Arrangement.spacedBy(16.dp)
177+
) {
178+
// Sign In with passkey or password Button
179+
ShrineButton(
180+
onClick = onSignInWithPasskeyOrPasswordRequest,
181+
buttonText = stringResource(id = R.string.sign_in),
182+
isButtonEnabled = !uiState.isLoading,
183+
)
180184

181-
// Sign Up Button
182-
ShrineButton(
183-
onClick = navigateToRegister,
184-
buttonText = stringResource(id = R.string.sign_up),
185-
isButtonDark = false,
186-
isButtonEnabled = !uiState.isLoading,
187-
)
185+
// Sign Up Button
186+
ShrineButton(
187+
onClick = navigateToRegister,
188+
buttonText = stringResource(id = R.string.sign_up),
189+
usePrimaryColor = false,
190+
isButtonEnabled = !uiState.isLoading,
191+
)
188192

189-
// Sign in with Google image
190-
Image(
191-
painter = painterResource(id = R.drawable.siwg_button_light),
192-
contentDescription = stringResource(R.string.sign_in_with_google_button),
193-
modifier = Modifier
194-
.height(dimensionResource(R.dimen.siwg_button_height))
195-
.clickable(
196-
enabled = !uiState.isLoading,
197-
onClick = onSignInWithSignInWithGoogleRequest)
198-
)
193+
// Sign in with Google image
194+
Image(
195+
painter = painterResource(id = R.drawable.siwg_button_light),
196+
contentDescription = stringResource(R.string.sign_in_with_google_button),
197+
modifier = Modifier
198+
.height(dimensionResource(R.dimen.siwg_button_height))
199+
.clickable(
200+
enabled = !uiState.isLoading,
201+
onClick = onSignInWithSignInWithGoogleRequest)
202+
)
203+
}
199204
}
200205

201206
if (uiState.isLoading) {

‎Shrine/app/src/main/java/com/authentication/shrine/ui/CreatePasskeyScreen.kt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -187,7 +187,7 @@ private fun CreatePasskeyActions(
187187
ShrineButton(
188188
onClick = onNotNowClicked,
189189
buttonText = stringResource(R.string.not_now),
190-
isButtonDark = false,
190+
usePrimaryColor = false,
191191
isButtonEnabled = !uiState.isLoading,
192192
)
193193
}

‎Shrine/app/src/main/java/com/authentication/shrine/ui/HelpScreen.kt‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,11 +57,13 @@ fun HelpScreen(
5757
text = stringResource(R.string.contact),
5858
style = MaterialTheme.typography.bodyMedium,
5959
textAlign = TextAlign.Center,
60+
color = MaterialTheme.colorScheme.onBackground
6061
)
6162
Text(
6263
text = stringResource(R.string.email),
6364
style = MaterialTheme.typography.bodyMedium,
6465
textAlign = TextAlign.Center,
66+
color = MaterialTheme.colorScheme.onBackground
6567
)
6668
}
6769
}

‎Shrine/app/src/main/java/com/authentication/shrine/ui/MainMenuScreen.kt‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import androidx.compose.foundation.layout.Spacer
2222
import androidx.compose.foundation.layout.fillMaxHeight
2323
import androidx.compose.foundation.layout.height
2424
import androidx.compose.foundation.layout.padding
25+
import androidx.compose.material3.MaterialTheme
2526
import androidx.compose.material3.Scaffold
2627
import androidx.compose.material3.SnackbarHost
2728
import androidx.compose.material3.SnackbarHostState
@@ -37,7 +38,6 @@ import com.authentication.shrine.R
3738
import com.authentication.shrine.ui.common.LogoHeading
3839
import com.authentication.shrine.ui.common.ShrineButton
3940
import com.authentication.shrine.ui.theme.ShrineTheme
40-
import com.authentication.shrine.ui.theme.greenBackground
4141
import com.authentication.shrine.ui.viewmodel.HomeViewModel
4242

4343
/**
@@ -104,7 +104,7 @@ fun MainMenuScreen(
104104
) { contentPadding ->
105105
Column(
106106
modifier = Modifier
107-
.background(greenBackground)
107+
.background(MaterialTheme.colorScheme.background)
108108
.padding(contentPadding)
109109
.fillMaxHeight()
110110
.padding(dimensionResource(R.dimen.padding_medium)),
@@ -156,7 +156,7 @@ private fun MainMenuButtonsList(
156156
ShrineButton(
157157
onClick = onSettingsButtonClicked,
158158
buttonText = stringResource(R.string.settings),
159-
isButtonDark = false,
159+
usePrimaryColor = false,
160160
)
161161

162162
ShrineButton(
@@ -170,7 +170,7 @@ private fun MainMenuButtonsList(
170170
navigateToLogin()
171171
},
172172
buttonText = stringResource(R.string.sign_out),
173-
isButtonDark = false,
173+
usePrimaryColor = false,
174174
)
175175
}
176176
}

‎Shrine/app/src/main/java/com/authentication/shrine/ui/PasskeyManagementScreen.kt‎

Lines changed: 33 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,10 @@
1515
*/
1616
package com.authentication.shrine.ui
1717

18+
import androidx.compose.foundation.BorderStroke
1819
import androidx.compose.foundation.Image
1920
import androidx.compose.foundation.background
21+
import androidx.compose.foundation.border
2022
import androidx.compose.foundation.layout.Arrangement
2123
import androidx.compose.foundation.layout.Column
2224
import androidx.compose.foundation.layout.Row
@@ -32,6 +34,7 @@ import androidx.compose.material3.MaterialTheme
3234
import androidx.compose.material3.Scaffold
3335
import androidx.compose.material3.SnackbarHost
3436
import androidx.compose.material3.SnackbarHostState
37+
import androidx.compose.material3.Surface
3538
import androidx.compose.material3.Text
3639
import androidx.compose.material3.TextButton
3740
import androidx.compose.runtime.Composable
@@ -59,7 +62,6 @@ import com.authentication.shrine.ui.common.ShrineLoader
5962
import com.authentication.shrine.ui.common.ShrineTextHeader
6063
import com.authentication.shrine.ui.common.ShrineToolbar
6164
import com.authentication.shrine.ui.theme.ShrineTheme
62-
import com.authentication.shrine.ui.theme.grayBackground
6365
import com.authentication.shrine.ui.viewmodel.PasskeyManagementUiState
6466
import com.authentication.shrine.ui.viewmodel.PasskeyManagementViewModel
6567
import com.authentication.shrine.utility.toReadableDate
@@ -165,7 +167,7 @@ fun PasskeyManagementScreen(
165167
onClick = onCreatePasskeyClicked,
166168
buttonText = stringResource(R.string.create_passkey),
167169
modifier = Modifier.padding(dimensionResource(R.dimen.padding_small)),
168-
isButtonDark = false,
170+
usePrimaryColor = false,
169171
isButtonEnabled = !uiState.isLoading,
170172
)
171173
}
@@ -201,11 +203,13 @@ fun PasskeysListColumn(
201203
passkeysList: List<PasskeyCredential>,
202204
aaguidData: Map<String, Map<String, String>>,
203205
) {
206+
val shape = RoundedCornerShape(dimensionResource(R.dimen.padding_small))
204207
LazyColumn(
205208
modifier = Modifier
206209
.padding(dimensionResource(R.dimen.padding_small))
207-
.clip(RoundedCornerShape(dimensionResource(R.dimen.padding_small)))
208-
.background(grayBackground)
210+
.border(BorderStroke(1.dp, MaterialTheme.colorScheme.outlineVariant), shape = shape)
211+
.clip(shape)
212+
.background(MaterialTheme.colorScheme.surfaceVariant)
209213
.padding(dimensionResource(R.dimen.padding_small))
210214
.fillMaxWidth(),
211215
) {
@@ -227,7 +231,7 @@ fun PasskeysListColumn(
227231
horizontal = dimensionResource(R.dimen.dimen_standard)
228232
),
229233
thickness = 1.dp,
230-
color = MaterialTheme.colorScheme.onBackground,
234+
color = MaterialTheme.colorScheme.onSurfaceVariant,
231235
)
232236
}
233237
},
@@ -278,11 +282,13 @@ fun PasskeysDetailsRow(
278282
text = credentialProviderName,
279283
style = MaterialTheme.typography.bodyLarge,
280284
fontWeight = FontWeight.Bold,
285+
color = MaterialTheme.colorScheme.onSurfaceVariant
281286
)
282287

283288
Text(
284289
text = stringResource(R.string.created, passkeyCreationDate),
285290
style = MaterialTheme.typography.bodySmall,
291+
color = MaterialTheme.colorScheme.onSurfaceVariant
286292
)
287293
}
288294

@@ -294,7 +300,7 @@ fun PasskeysDetailsRow(
294300
Text(
295301
text = stringResource(R.string.delete),
296302
style = MaterialTheme.typography.bodyMedium,
297-
color = MaterialTheme.colorScheme.onBackground,
303+
color = MaterialTheme.colorScheme.onSurfaceVariant,
298304
)
299305
}
300306
}
@@ -307,24 +313,26 @@ fun PasskeysDetailsRow(
307313
@Composable
308314
fun PasskeyManagementScreenPreview() {
309315
ShrineTheme {
310-
PasskeyManagementScreen(
311-
onLearnMoreClicked = { },
312-
onBackClicked = { },
313-
onCreatePasskeyClicked = { },
314-
onDeleteClicked = { },
315-
uiState = PasskeyManagementUiState(),
316-
passkeysList = listOf(
317-
PasskeyCredential(
318-
"123",
319-
"234",
320-
"name",
321-
"passkey",
322-
"aaguid",
323-
1L,
324-
"ea9b8d66-4d01-1d21-3ce4-b6b48cb575d4"
325-
)
326-
),
327-
aaguidData = mapOf(),
328-
)
316+
Surface(color = MaterialTheme.colorScheme.background) {
317+
PasskeyManagementScreen(
318+
onLearnMoreClicked = { },
319+
onBackClicked = { },
320+
onCreatePasskeyClicked = { },
321+
onDeleteClicked = { },
322+
uiState = PasskeyManagementUiState(),
323+
passkeysList = listOf(
324+
PasskeyCredential(
325+
id = "preview-id-1",
326+
name = "Preview Passkey",
327+
passkeyUserId = "[email protected]",
328+
credentialType = "public-key",
329+
aaguid = "00000000-0000-0000-0000-000000000000",
330+
registeredAt = System.currentTimeMillis(),
331+
providerIcon = ""
332+
)
333+
),
334+
aaguidData = mapOf(),
335+
)
336+
}
329337
}
330338
}

‎Shrine/app/src/main/java/com/authentication/shrine/ui/RegisterScreen.kt‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,12 @@ package com.authentication.shrine.ui
1717

1818
import androidx.compose.foundation.Image
1919
import androidx.compose.foundation.background
20+
import androidx.compose.foundation.rememberScrollState
21+
import androidx.compose.foundation.verticalScroll
2022
import androidx.compose.foundation.layout.Arrangement
2123
import androidx.compose.foundation.layout.Column
2224
import androidx.compose.foundation.layout.Row
2325
import androidx.compose.foundation.layout.Spacer
24-
import androidx.compose.foundation.layout.fillMaxHeight
2526
import androidx.compose.foundation.layout.fillMaxSize
2627
import androidx.compose.foundation.layout.fillMaxWidth
2728
import androidx.compose.foundation.layout.height
@@ -170,7 +171,7 @@ fun RegisterScreen(
170171
.padding(contentPadding)
171172
.padding(dimensionResource(R.dimen.padding_small))
172173
.fillMaxSize()
173-
.fillMaxHeight(),
174+
.verticalScroll(rememberScrollState()),
174175
verticalArrangement = Arrangement.Center,
175176
horizontalAlignment = Alignment.CenterHorizontally,
176177
) {
@@ -240,6 +241,7 @@ private fun RegisterScreenInputSection(
240241
Text(
241242
text = stringResource(R.string.full_name),
242243
modifier = Modifier.padding(top = dimensionResource(R.dimen.dimen_standard)),
244+
color = MaterialTheme.colorScheme.onSurface
243245
)
244246
TextField(
245247
modifier = Modifier.padding(top = dimensionResource(R.dimen.dimen_standard)),
@@ -258,6 +260,7 @@ private fun RegisterScreenInputSection(
258260
Text(
259261
text = stringResource(R.string.username),
260262
modifier = Modifier.padding(top = dimensionResource(R.dimen.dimen_standard)),
263+
color = MaterialTheme.colorScheme.onSurface
261264
)
262265
TextField(
263266
modifier = Modifier.padding(top = dimensionResource(R.dimen.dimen_standard)),
@@ -277,6 +280,7 @@ private fun RegisterScreenInputSection(
277280
Text(
278281
text = stringResource(R.string.signing_in),
279282
modifier = Modifier.padding(top = dimensionResource(R.dimen.dimen_standard)),
283+
color = MaterialTheme.colorScheme.onSurface
280284
)
281285

282286
PasskeyInformationTab(onLearnMoreClicked, onOtherWaysToSignUpClicked)
@@ -306,7 +310,7 @@ private fun PasskeyInformationTab(
306310
modifier = Modifier
307311
.fillMaxWidth()
308312
.clip(RoundedCornerShape(dimensionResource(R.dimen.size_standard)))
309-
.background(grayBackground)
313+
.background(MaterialTheme.colorScheme.surfaceContainerHigh) // Changed for theme-aware distinction
310314
.padding(dimensionResource(R.dimen.padding_large)),
311315
verticalArrangement = Arrangement.spacedBy(dimensionResource(R.dimen.padding_small)),
312316
) {
@@ -327,7 +331,7 @@ private fun PasskeyInformationTab(
327331
text = "",
328332
clickableText = stringResource(R.string.other_ways_to_sign_up),
329333
onTextClick = onOtherWaysToSignUpClicked,
330-
textStyle = TextStyle(color = Color(0xFF006B5F)),
334+
textStyle = MaterialTheme.typography.bodyMedium,
331335
)
332336
}
333337

0 commit comments

Comments
 (0)