Skip to content

Style Search Bar and Clear All button to match dark theme mockups (closes #612) #613

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
andrewtavis merged 3 commits into from
Jun 8, 2026
Merged

Style Search Bar and Clear All button to match dark theme mockups (closes #612) #613

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c53c656
Style search bar and clear all button to match dark theme mockups (cl…
prince-0408 Jun 8, 2026
1c0233b
Fix search bar and clear all button text/icon contrast in light mode
prince-0408 Jun 8, 2026
5589001
Merge branch 'main' into feature/search-bar-styling
andrewtavis Jun 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 15 additions & 10 deletions app/src/main/java/be/scri/ui/screens/ConjugateScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ package be.scri.ui.screens
import android.widget.Toast
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.Arrangement
import androidx.compose.foundation.layout.Box
Expand All @@ -31,7 +32,6 @@ import androidx.compose.runtime.getValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.ColorFilter
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.layout.ContentScale
Expand Down Expand Up @@ -111,15 +111,19 @@ fun ConjugateScreen(
.fillMaxWidth()
.height(56.dp)
.background(
color = MaterialTheme.colorScheme.primary,
color = MaterialTheme.colorScheme.surfaceContainer,
shape = RoundedCornerShape(dimensionResource(id = R.dimen.rounded_corner_radius_standard)),
).border(
width = 1.dp,
color = MaterialTheme.colorScheme.outline,
shape = RoundedCornerShape(dimensionResource(id = R.dimen.rounded_corner_radius_standard)),
).padding(horizontal = Dimensions.PaddingMedium),
verticalAlignment = Alignment.CenterVertically,
) {
Image(
painter = painterResource(id = R.drawable.ic_search_vector),
contentDescription = "Search",
colorFilter = ColorFilter.tint(Color.Black),
colorFilter = ColorFilter.tint(MaterialTheme.colorScheme.onPrimary),
modifier = Modifier.size(Dimensions.IconSize),
)

Expand All @@ -130,11 +134,11 @@ fun ConjugateScreen(
onValueChange = { viewModel.onSearchQueryChanged(it) },
textStyle =
MaterialTheme.typography.bodyLarge.copy(
color = Color.Black,
color = MaterialTheme.colorScheme.onPrimary,
fontWeight = FontWeight.Bold,
),
singleLine = true,
cursorBrush = SolidColor(Color.Black),
cursorBrush = SolidColor(MaterialTheme.colorScheme.onPrimary),
modifier = Modifier.weight(1f),
decorationBox = { innerTextField ->
Box(
Expand All @@ -144,7 +148,7 @@ fun ConjugateScreen(
if (searchQuery.isEmpty()) {
Text(
text = stringResource(R.string.i18n_app_conjugate_verbs_search_placeholder),
color = Color.Black.copy(alpha = 0.6f),
color = MaterialTheme.colorScheme.onPrimary.copy(alpha = 0.6f),
style =
MaterialTheme.typography.bodyLarge.copy(
fontWeight = FontWeight.Bold,
Expand All @@ -160,7 +164,7 @@ fun ConjugateScreen(
Image(
painter = painterResource(id = R.drawable.close),
contentDescription = "Clear",
colorFilter = ColorFilter.tint(Color.Black),
colorFilter = ColorFilter.tint(MaterialTheme.colorScheme.onPrimary),
modifier =
Modifier
.size(Dimensions.IconSize)
Expand All @@ -172,7 +176,7 @@ fun ConjugateScreen(
Image(
painter = painterResource(id = R.drawable.play_button),
contentDescription = "Play button",
colorFilter = ColorFilter.tint(Color.Black),
colorFilter = ColorFilter.tint(MaterialTheme.colorScheme.onPrimary),
modifier =
Modifier
.width(21.dp)
Expand Down Expand Up @@ -338,15 +342,16 @@ fun ConjugateScreen(
Row(
modifier =
Modifier
.background(MaterialTheme.colorScheme.primary, RoundedCornerShape(4.dp))
.background(MaterialTheme.colorScheme.surfaceContainer, RoundedCornerShape(4.dp))
.border(1.dp, MaterialTheme.colorScheme.outline, RoundedCornerShape(4.dp))
.clickable { viewModel.clearAllRecentlyConjugated() }
.padding(horizontal = 8.dp, vertical = 4.dp),
verticalAlignment = Alignment.CenterVertically,
) {
Text(
text = "Clear all ✕",
fontWeight = FontWeight.Bold,
color = Color.Black,
color = MaterialTheme.colorScheme.onPrimary,
style = MaterialTheme.typography.bodySmall,
)
}
Expand Down
Loading