From 7aa1bdd77b27a1b87b36a48653aa835bc2252453 Mon Sep 17 00:00:00 2001 From: francelu Date: Thu, 7 Nov 2024 23:32:09 +0100 Subject: [PATCH 1/5] style: adapt layout for compact small screens --- .../periodpals/ui/alert/CreateAlert.kt | 195 +++++++++++------- .../com/android/periodpals/ui/theme/Type.kt | 29 ++- 2 files changed, 146 insertions(+), 78 deletions(-) diff --git a/app/src/main/java/com/android/periodpals/ui/alert/CreateAlert.kt b/app/src/main/java/com/android/periodpals/ui/alert/CreateAlert.kt index e5b7970c4..c2137836d 100644 --- a/app/src/main/java/com/android/periodpals/ui/alert/CreateAlert.kt +++ b/app/src/main/java/com/android/periodpals/ui/alert/CreateAlert.kt @@ -2,12 +2,13 @@ package com.android.periodpals.ui.alert import android.widget.Toast import androidx.compose.foundation.layout.Arrangement -import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth -import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding -import androidx.compose.foundation.layout.width +import androidx.compose.foundation.layout.size +import androidx.compose.foundation.layout.wrapContentHeight +import androidx.compose.foundation.layout.wrapContentSize +import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.material3.Button import androidx.compose.material3.DropdownMenuItem import androidx.compose.material3.ExperimentalMaterial3Api @@ -25,16 +26,17 @@ import androidx.compose.runtime.remember import androidx.compose.runtime.setValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.focus.onFocusEvent import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.platform.testTag import androidx.compose.ui.text.style.TextAlign -import androidx.compose.ui.unit.dp import com.android.periodpals.resources.C.Tag.CreateAlertScreen import com.android.periodpals.ui.navigation.BottomNavigationMenu import com.android.periodpals.ui.navigation.LIST_TOP_LEVEL_DESTINATION import com.android.periodpals.ui.navigation.NavigationActions import com.android.periodpals.ui.navigation.Screen import com.android.periodpals.ui.navigation.TopAppBar +import com.android.periodpals.ui.theme.dimens private const val SCREEN_TITLE = "Create Alert" private const val DEFAULT_LOCATION = "" @@ -73,7 +75,7 @@ fun CreateAlertScreen(navigationActions: NavigationActions) { val (urgencyIsSelected, setUrgencyIsSelected) = remember { mutableStateOf(false) } Scaffold( - modifier = Modifier.testTag(CreateAlertScreen.SCREEN), + modifier = Modifier.fillMaxSize().testTag(CreateAlertScreen.SCREEN), topBar = { TopAppBar(title = SCREEN_TITLE) }, bottomBar = { BottomNavigationMenu( @@ -83,65 +85,112 @@ fun CreateAlertScreen(navigationActions: NavigationActions) { ) }, ) { paddingValues -> - Column( - modifier = Modifier.fillMaxSize().padding(30.dp).padding(paddingValues), + LazyColumn( + modifier = + Modifier.fillMaxSize() + .padding(paddingValues) + .padding( + start = MaterialTheme.dimens.medium1, + top = MaterialTheme.dimens.small3, + end = MaterialTheme.dimens.medium1), horizontalAlignment = Alignment.CenterHorizontally, - verticalArrangement = Arrangement.SpaceEvenly, + verticalArrangement = Arrangement.spacedBy(MaterialTheme.dimens.small2, Alignment.Top), ) { - Text( - text = INSTRUCTION_TEXT, - modifier = Modifier.testTag(CreateAlertScreen.INSTRUCTION_TEXT), - textAlign = TextAlign.Center, - style = MaterialTheme.typography.titleSmall, - ) - ExposedDropdownMenuSample( - itemsList = PRODUCT_DROPDOWN_CHOICES, - label = PRODUCT_DROPDOWN_LABEL, - defaultValue = PRODUCT_DROPDOWN_DEFAULT_VALUE, - setIsSelected = setProductIsSelected, - testTag = CreateAlertScreen.PRODUCT_FIELD, - ) - ExposedDropdownMenuSample( - itemsList = EMERGENCY_DROPDOWN_CHOICES, - label = EMERGENCY_DROPDOWN_LABEL, - defaultValue = EMERGENCY_DROPDOWN_DEFAULT_VALUE, - setIsSelected = setUrgencyIsSelected, - testTag = CreateAlertScreen.URGENCY_FIELD, - ) - OutlinedTextField( - modifier = Modifier.fillMaxWidth().testTag(CreateAlertScreen.LOCATION_FIELD), - value = location, - onValueChange = { location = it }, - label = { Text(LOCATION_FIELD_LABEL) }, - placeholder = { Text(LOCATION_FIELD_PLACEHOLDER) }, - ) - OutlinedTextField( - modifier = - Modifier.fillMaxWidth().height(150.dp).testTag(CreateAlertScreen.MESSAGE_FIELD), - value = message, - onValueChange = { message = it }, - label = { Text(MESSAGE_FIELD_LABEL) }, - placeholder = { Text(MESSAGE_FIELD_PLACEHOLDER) }, - ) - Button( - modifier = - Modifier.width(300.dp) - .height(100.dp) - .testTag(CreateAlertScreen.SUBMIT_BUTTON) - .padding(16.dp), - onClick = { - val (isValid, errorMessage) = - validateFields(productIsSelected, urgencyIsSelected, location, message) - if (!isValid) { - Toast.makeText(context, errorMessage, Toast.LENGTH_SHORT).show() - } else { - Toast.makeText(context, SUCCESSFUL_SUBMISSION_TOAST_MESSAGE, Toast.LENGTH_SHORT) - .show() - navigationActions.navigateTo(Screen.ALERT_LIST) - } - }, - ) { - Text(SUBMISSION_BUTTON_TEXT, style = MaterialTheme.typography.headlineMedium) + item { + Text( + text = INSTRUCTION_TEXT, + modifier = Modifier.testTag(CreateAlertScreen.INSTRUCTION_TEXT), + textAlign = TextAlign.Center, + style = MaterialTheme.typography.bodyMedium, + ) + } + + item { + ExposedDropdownMenuSample( + itemsList = PRODUCT_DROPDOWN_CHOICES, + label = PRODUCT_DROPDOWN_LABEL, + defaultValue = PRODUCT_DROPDOWN_DEFAULT_VALUE, + setIsSelected = setProductIsSelected, + testTag = CreateAlertScreen.PRODUCT_FIELD, + ) + } + + item { + ExposedDropdownMenuSample( + itemsList = EMERGENCY_DROPDOWN_CHOICES, + label = EMERGENCY_DROPDOWN_LABEL, + defaultValue = EMERGENCY_DROPDOWN_DEFAULT_VALUE, + setIsSelected = setUrgencyIsSelected, + testTag = CreateAlertScreen.URGENCY_FIELD, + ) + } + + item { + var isFocused by remember { mutableStateOf(false) } + OutlinedTextField( + modifier = + Modifier.fillMaxWidth().testTag(CreateAlertScreen.LOCATION_FIELD).onFocusEvent { + focusState -> + isFocused = focusState.isFocused + }, + value = location, + onValueChange = { location = it }, + textStyle = MaterialTheme.typography.labelLarge, + label = { + Text( + text = LOCATION_FIELD_LABEL, + style = + if (isFocused || location.isNotEmpty()) MaterialTheme.typography.labelLarge + else MaterialTheme.typography.labelMedium) + }, + placeholder = { + Text(text = LOCATION_FIELD_PLACEHOLDER, style = MaterialTheme.typography.labelLarge) + }, + ) + } + + item { + var isFocused by remember { mutableStateOf(false) } + OutlinedTextField( + modifier = + Modifier.fillMaxWidth() + .wrapContentHeight() + .testTag(CreateAlertScreen.MESSAGE_FIELD) + .onFocusEvent { focusState -> isFocused = focusState.isFocused }, + value = message, + onValueChange = { message = it }, + textStyle = MaterialTheme.typography.labelLarge, + label = { + Text( + text = MESSAGE_FIELD_LABEL, + style = + if (isFocused || location.isNotEmpty()) MaterialTheme.typography.labelLarge + else MaterialTheme.typography.labelMedium) + }, + placeholder = { + Text(text = MESSAGE_FIELD_PLACEHOLDER, style = MaterialTheme.typography.labelLarge) + }, + minLines = 3, + ) + } + + item { + Button( + modifier = Modifier.wrapContentSize().testTag(CreateAlertScreen.SUBMIT_BUTTON), + onClick = { + val (isValid, errorMessage) = + validateFields(productIsSelected, urgencyIsSelected, location, message) + if (!isValid) { + Toast.makeText(context, errorMessage, Toast.LENGTH_SHORT).show() + } else { + Toast.makeText(context, SUCCESSFUL_SUBMISSION_TOAST_MESSAGE, Toast.LENGTH_SHORT) + .show() + navigationActions.navigateTo(Screen.ALERT_LIST) + } + }, + ) { + Text(SUBMISSION_BUTTON_TEXT, style = MaterialTheme.typography.headlineMedium) + } } } } @@ -169,25 +218,33 @@ fun ExposedDropdownMenuSample( var text by remember { mutableStateOf(defaultValue) } ExposedDropdownMenuBox( - modifier = Modifier.testTag(testTag), + modifier = Modifier.wrapContentSize().testTag(testTag), expanded = expanded, onExpandedChange = { expanded = it }, ) { TextField( - modifier = Modifier.menuAnchor(), - label = { Text(label) }, + modifier = Modifier.fillMaxWidth().wrapContentHeight().menuAnchor(), + textStyle = MaterialTheme.typography.labelLarge, + label = { Text(text = label, style = MaterialTheme.typography.labelMedium) }, value = text, onValueChange = {}, singleLine = true, readOnly = true, - trailingIcon = { ExposedDropdownMenuDefaults.TrailingIcon(expanded = expanded) }, + trailingIcon = { + ExposedDropdownMenuDefaults.TrailingIcon( + expanded = expanded, Modifier.size(MaterialTheme.dimens.iconSize)) + }, colors = ExposedDropdownMenuDefaults.textFieldColors(), ) - ExposedDropdownMenu(expanded = expanded, onDismissRequest = { expanded = false }) { + ExposedDropdownMenu( + expanded = expanded, + onDismissRequest = { expanded = false }, + modifier = Modifier.wrapContentSize(), + ) { itemsList.forEach { option -> DropdownMenuItem( - modifier = Modifier.testTag(CreateAlertScreen.DROPDOWN_ITEM + option), - text = { Text(option) }, + modifier = Modifier.fillMaxWidth().testTag(CreateAlertScreen.DROPDOWN_ITEM + option), + text = { Text(text = option, style = MaterialTheme.typography.labelLarge) }, onClick = { text = option expanded = false diff --git a/app/src/main/java/com/android/periodpals/ui/theme/Type.kt b/app/src/main/java/com/android/periodpals/ui/theme/Type.kt index 6c173d410..3de742fa5 100644 --- a/app/src/main/java/com/android/periodpals/ui/theme/Type.kt +++ b/app/src/main/java/com/android/periodpals/ui/theme/Type.kt @@ -47,7 +47,8 @@ val Nunito_Sans = style = FontStyle.Italic))) fun createTypography( - headlineLargeSize: Int, + headlineMediumSize: Int, + titleLargeSize: Int, titleMediumSize: Int, bodyLargeSize: Int, bodyMediumSize: Int, @@ -55,13 +56,18 @@ fun createTypography( labelSmallSize: Int ): Typography { return Typography( - headlineLarge = + headlineMedium = TextStyle( + fontFamily = Nunito_Sans, + fontWeight = FontWeight.Bold, + fontStyle = FontStyle.Normal, + fontSize = headlineMediumSize.sp), + titleLarge = TextStyle( fontFamily = Nunito_Sans, fontWeight = FontWeight.Black, fontStyle = FontStyle.Normal, - fontSize = headlineLargeSize.sp, - lineHeight = (headlineLargeSize * 1.5).sp), + fontSize = titleLargeSize.sp, + lineHeight = (titleLargeSize * 1.5).sp), titleMedium = TextStyle( fontFamily = Nunito_Sans, @@ -96,7 +102,8 @@ fun createTypography( val CompactSmallTypography = createTypography( - headlineLargeSize = 32, + headlineMediumSize = 20, + titleLargeSize = 32, titleMediumSize = 10, bodyLargeSize = 18, bodyMediumSize = 16, @@ -105,7 +112,8 @@ val CompactSmallTypography = val CompactMediumTypography = createTypography( - headlineLargeSize = 40, + headlineMediumSize = 24, + titleLargeSize = 40, titleMediumSize = 14, bodyLargeSize = 20, bodyMediumSize = 18, @@ -114,7 +122,8 @@ val CompactMediumTypography = val CompactLargeTypography = createTypography( - headlineLargeSize = 48, + headlineMediumSize = 28, + titleLargeSize = 48, titleMediumSize = 14, bodyLargeSize = 24, bodyMediumSize = 20, @@ -123,7 +132,8 @@ val CompactLargeTypography = val MediumTypography = createTypography( - headlineLargeSize = 56, + headlineMediumSize = 32, + titleLargeSize = 56, titleMediumSize = 16, bodyLargeSize = 24, bodyMediumSize = 22, @@ -132,7 +142,8 @@ val MediumTypography = val ExpandedTypography = createTypography( - headlineLargeSize = 64, + headlineMediumSize = 36, + titleLargeSize = 64, titleMediumSize = 18, bodyLargeSize = 24, bodyMediumSize = 22, From 6dc7bdb1302b231645e2156118f227ae45938240 Mon Sep 17 00:00:00 2001 From: francelu Date: Thu, 7 Nov 2024 23:49:03 +0100 Subject: [PATCH 2/5] style: adapt layout for compact S and M screens --- .../com/android/periodpals/ui/alert/CreateAlert.kt | 4 ++-- .../main/java/com/android/periodpals/ui/theme/Type.kt | 11 ++++++----- 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/app/src/main/java/com/android/periodpals/ui/alert/CreateAlert.kt b/app/src/main/java/com/android/periodpals/ui/alert/CreateAlert.kt index c2137836d..d03b1efd3 100644 --- a/app/src/main/java/com/android/periodpals/ui/alert/CreateAlert.kt +++ b/app/src/main/java/com/android/periodpals/ui/alert/CreateAlert.kt @@ -90,9 +90,9 @@ fun CreateAlertScreen(navigationActions: NavigationActions) { Modifier.fillMaxSize() .padding(paddingValues) .padding( - start = MaterialTheme.dimens.medium1, + start = MaterialTheme.dimens.medium3, top = MaterialTheme.dimens.small3, - end = MaterialTheme.dimens.medium1), + end = MaterialTheme.dimens.medium3), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.spacedBy(MaterialTheme.dimens.small2, Alignment.Top), ) { diff --git a/app/src/main/java/com/android/periodpals/ui/theme/Type.kt b/app/src/main/java/com/android/periodpals/ui/theme/Type.kt index 3de742fa5..fec272415 100644 --- a/app/src/main/java/com/android/periodpals/ui/theme/Type.kt +++ b/app/src/main/java/com/android/periodpals/ui/theme/Type.kt @@ -56,11 +56,12 @@ fun createTypography( labelSmallSize: Int ): Typography { return Typography( - headlineMedium = TextStyle( - fontFamily = Nunito_Sans, - fontWeight = FontWeight.Bold, - fontStyle = FontStyle.Normal, - fontSize = headlineMediumSize.sp), + headlineMedium = + TextStyle( + fontFamily = Nunito_Sans, + fontWeight = FontWeight.Bold, + fontStyle = FontStyle.Normal, + fontSize = headlineMediumSize.sp), titleLarge = TextStyle( fontFamily = Nunito_Sans, From 80ced7ac8657c5085fb84a757b64d79b94849dd3 Mon Sep 17 00:00:00 2001 From: francelu Date: Fri, 8 Nov 2024 15:48:26 +0100 Subject: [PATCH 3/5] fix: apply correct styles for `CreateAlert` button, `AuthWelcomeText`, and `TopAppBar` title - Updated `CreateAlert` "Ask for Help" button to use `headLineMedium` - Set `AuthWelcomeText` to use `titleLarge` - Adjusted `TopAppBar` title to use `titleMedium` --- .../periodpals/ui/alert/CreateAlert.kt | 5 ++-- .../ui/components/AuthComponents.kt | 2 +- .../com/android/periodpals/ui/theme/Type.kt | 30 +++++++++++++------ 3 files changed, 25 insertions(+), 12 deletions(-) diff --git a/app/src/main/java/com/android/periodpals/ui/alert/CreateAlert.kt b/app/src/main/java/com/android/periodpals/ui/alert/CreateAlert.kt index d03b1efd3..a84087871 100644 --- a/app/src/main/java/com/android/periodpals/ui/alert/CreateAlert.kt +++ b/app/src/main/java/com/android/periodpals/ui/alert/CreateAlert.kt @@ -174,6 +174,7 @@ fun CreateAlertScreen(navigationActions: NavigationActions) { ) } + // item { Button( modifier = Modifier.wrapContentSize().testTag(CreateAlertScreen.SUBMIT_BUTTON), @@ -224,8 +225,8 @@ fun ExposedDropdownMenuSample( ) { TextField( modifier = Modifier.fillMaxWidth().wrapContentHeight().menuAnchor(), - textStyle = MaterialTheme.typography.labelLarge, - label = { Text(text = label, style = MaterialTheme.typography.labelMedium) }, + textStyle = MaterialTheme.typography.labelMedium, + label = { Text(text = label, style = MaterialTheme.typography.labelLarge) }, value = text, onValueChange = {}, singleLine = true, diff --git a/app/src/main/java/com/android/periodpals/ui/components/AuthComponents.kt b/app/src/main/java/com/android/periodpals/ui/components/AuthComponents.kt index 5903adc3a..fb5f8418e 100644 --- a/app/src/main/java/com/android/periodpals/ui/components/AuthComponents.kt +++ b/app/src/main/java/com/android/periodpals/ui/components/AuthComponents.kt @@ -73,7 +73,7 @@ fun AuthWelcomeText(text: String, color: Color, testTag: String) { text = text, textAlign = TextAlign.Center, color = color, - style = MaterialTheme.typography.headlineLarge) + style = MaterialTheme.typography.titleLarge) } /** diff --git a/app/src/main/java/com/android/periodpals/ui/theme/Type.kt b/app/src/main/java/com/android/periodpals/ui/theme/Type.kt index b0a0f10ac..6441a6bbb 100644 --- a/app/src/main/java/com/android/periodpals/ui/theme/Type.kt +++ b/app/src/main/java/com/android/periodpals/ui/theme/Type.kt @@ -47,7 +47,8 @@ val Nunito_Sans = style = FontStyle.Italic))) fun createTypography( - headlineLargeSize: Int, + headlineMediumSize: Int, + titleLargeSize: Int, titleMediumSize: Int, bodyLargeSize: Int, bodyMediumSize: Int, @@ -56,13 +57,19 @@ fun createTypography( labelSmallSize: Int ): Typography { return Typography( - headlineLarge = + headlineMedium = + TextStyle( + fontFamily = Nunito_Sans, + fontWeight = FontWeight.Bold, + fontStyle = FontStyle.Normal, + fontSize = headlineMediumSize.sp), + titleLarge = TextStyle( fontFamily = Nunito_Sans, fontWeight = FontWeight.Black, fontStyle = FontStyle.Normal, - fontSize = headlineLargeSize.sp, - lineHeight = (headlineLargeSize * 1.5).sp), + fontSize = titleLargeSize.sp, + lineHeight = (titleLargeSize * 1.5).sp), titleMedium = TextStyle( fontFamily = Nunito_Sans, @@ -103,7 +110,8 @@ fun createTypography( val CompactSmallTypography = createTypography( - headlineLargeSize = 32, + headlineMediumSize = 20, + titleLargeSize = 32, titleMediumSize = 20, bodyLargeSize = 18, bodyMediumSize = 16, @@ -113,7 +121,8 @@ val CompactSmallTypography = val CompactMediumTypography = createTypography( - headlineLargeSize = 40, + headlineMediumSize = 24, + titleLargeSize = 40, titleMediumSize = 22, bodyLargeSize = 20, bodyMediumSize = 18, @@ -123,7 +132,8 @@ val CompactMediumTypography = val CompactLargeTypography = createTypography( - headlineLargeSize = 48, + headlineMediumSize = 28, + titleLargeSize = 48, titleMediumSize = 24, bodyLargeSize = 24, bodyMediumSize = 20, @@ -133,7 +143,8 @@ val CompactLargeTypography = val MediumTypography = createTypography( - headlineLargeSize = 56, + headlineMediumSize = 32, + titleLargeSize = 56, titleMediumSize = 20, bodyLargeSize = 24, bodyMediumSize = 22, @@ -143,7 +154,8 @@ val MediumTypography = val ExpandedTypography = createTypography( - headlineLargeSize = 64, + headlineMediumSize = 36, + titleLargeSize = 64, titleMediumSize = 28, bodyLargeSize = 24, bodyMediumSize = 22, From 6affa9a457045f98ed05d403253ab92fd8b946c3 Mon Sep 17 00:00:00 2001 From: francelu Date: Fri, 8 Nov 2024 17:33:38 +0100 Subject: [PATCH 4/5] fix: adapt layout and typography for compact screens (S, M, L) - Centered vertical arrangement for better alignment on compact L screens - Updated typography for labels and placeholders to improve consistency --- .../periodpals/ui/alert/CreateAlert.kt | 24 ++++++++++++------- 1 file changed, 16 insertions(+), 8 deletions(-) diff --git a/app/src/main/java/com/android/periodpals/ui/alert/CreateAlert.kt b/app/src/main/java/com/android/periodpals/ui/alert/CreateAlert.kt index a84087871..6399c7d9c 100644 --- a/app/src/main/java/com/android/periodpals/ui/alert/CreateAlert.kt +++ b/app/src/main/java/com/android/periodpals/ui/alert/CreateAlert.kt @@ -74,6 +74,7 @@ fun CreateAlertScreen(navigationActions: NavigationActions) { val (productIsSelected, setProductIsSelected) = remember { mutableStateOf(false) } val (urgencyIsSelected, setUrgencyIsSelected) = remember { mutableStateOf(false) } + // Screen Scaffold( modifier = Modifier.fillMaxSize().testTag(CreateAlertScreen.SCREEN), topBar = { TopAppBar(title = SCREEN_TITLE) }, @@ -85,6 +86,7 @@ fun CreateAlertScreen(navigationActions: NavigationActions) { ) }, ) { paddingValues -> + // By default scrollable LazyColumn( modifier = Modifier.fillMaxSize() @@ -94,8 +96,10 @@ fun CreateAlertScreen(navigationActions: NavigationActions) { top = MaterialTheme.dimens.small3, end = MaterialTheme.dimens.medium3), horizontalAlignment = Alignment.CenterHorizontally, - verticalArrangement = Arrangement.spacedBy(MaterialTheme.dimens.small2, Alignment.Top), + verticalArrangement = + Arrangement.spacedBy(MaterialTheme.dimens.small2, Alignment.CenterVertically), ) { + // Instruction text item { Text( text = INSTRUCTION_TEXT, @@ -105,6 +109,7 @@ fun CreateAlertScreen(navigationActions: NavigationActions) { ) } + // Product dropdown menu item { ExposedDropdownMenuSample( itemsList = PRODUCT_DROPDOWN_CHOICES, @@ -115,6 +120,7 @@ fun CreateAlertScreen(navigationActions: NavigationActions) { ) } + // Urgency dropdown menu item { ExposedDropdownMenuSample( itemsList = EMERGENCY_DROPDOWN_CHOICES, @@ -125,6 +131,7 @@ fun CreateAlertScreen(navigationActions: NavigationActions) { ) } + // Location field item { var isFocused by remember { mutableStateOf(false) } OutlinedTextField( @@ -140,8 +147,8 @@ fun CreateAlertScreen(navigationActions: NavigationActions) { Text( text = LOCATION_FIELD_LABEL, style = - if (isFocused || location.isNotEmpty()) MaterialTheme.typography.labelLarge - else MaterialTheme.typography.labelMedium) + if (isFocused || location.isNotEmpty()) MaterialTheme.typography.labelMedium + else MaterialTheme.typography.labelLarge) }, placeholder = { Text(text = LOCATION_FIELD_PLACEHOLDER, style = MaterialTheme.typography.labelLarge) @@ -149,6 +156,7 @@ fun CreateAlertScreen(navigationActions: NavigationActions) { ) } + // Message field item { var isFocused by remember { mutableStateOf(false) } OutlinedTextField( @@ -164,8 +172,8 @@ fun CreateAlertScreen(navigationActions: NavigationActions) { Text( text = MESSAGE_FIELD_LABEL, style = - if (isFocused || location.isNotEmpty()) MaterialTheme.typography.labelLarge - else MaterialTheme.typography.labelMedium) + if (isFocused || message.isNotEmpty()) MaterialTheme.typography.labelMedium + else MaterialTheme.typography.labelLarge) }, placeholder = { Text(text = MESSAGE_FIELD_PLACEHOLDER, style = MaterialTheme.typography.labelLarge) @@ -174,7 +182,7 @@ fun CreateAlertScreen(navigationActions: NavigationActions) { ) } - // + // "Ask for Help" button item { Button( modifier = Modifier.wrapContentSize().testTag(CreateAlertScreen.SUBMIT_BUTTON), @@ -225,8 +233,8 @@ fun ExposedDropdownMenuSample( ) { TextField( modifier = Modifier.fillMaxWidth().wrapContentHeight().menuAnchor(), - textStyle = MaterialTheme.typography.labelMedium, - label = { Text(text = label, style = MaterialTheme.typography.labelLarge) }, + textStyle = MaterialTheme.typography.labelLarge, + label = { Text(text = label, style = MaterialTheme.typography.labelMedium) }, value = text, onValueChange = {}, singleLine = true, From b6098208bfe8664416a909d3b052ab6b1863413f Mon Sep 17 00:00:00 2001 From: francelu Date: Fri, 8 Nov 2024 17:56:05 +0100 Subject: [PATCH 5/5] fix: update `AuthenticationComponents.kt` with correct typography styles --- .../periodpals/ui/components/AuthenticationComponents.kt | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/src/main/java/com/android/periodpals/ui/components/AuthenticationComponents.kt b/app/src/main/java/com/android/periodpals/ui/components/AuthenticationComponents.kt index 0c81914df..74b9d7ce8 100644 --- a/app/src/main/java/com/android/periodpals/ui/components/AuthenticationComponents.kt +++ b/app/src/main/java/com/android/periodpals/ui/components/AuthenticationComponents.kt @@ -93,7 +93,7 @@ fun AuthenticationWelcomeText(text: String = "Welcome to PeriodPals", color: Col text = text, textAlign = TextAlign.Center, color = color, - style = MaterialTheme.typography.headlineLarge, + style = MaterialTheme.typography.titleLarge, ) }