Apply suggestions from code review

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>
This commit is contained in:
Samuel Newman
2025-08-05 01:36:15 -07:00
committed by GitHub
parent 7f9d53ced1
commit 75793153fb
+12 -5
View File
@@ -211,7 +211,7 @@ export function StepHandle() {
<Requirement> <Requirement>
{!validCheck.hyphenStartOrEnd ? ( {!validCheck.hyphenStartOrEnd ? (
<RequirementText> <RequirementText>
<Trans>Doesn't begin or end with a hyphen</Trans> <Trans>Username cannot begin or end with a hyphen</Trans>
</RequirementText> </RequirementText>
) : ( ) : (
<RequirementText> <RequirementText>
@@ -225,7 +225,7 @@ export function StepHandle() {
!validCheck.totalLength) && ( !validCheck.totalLength) && (
<RequirementText> <RequirementText>
<Trans> <Trans>
No longer than{' '} Username cannot be longer than{' '}
<Plural <Plural
value={MAX_SERVICE_HANDLE_LENGTH} value={MAX_SERVICE_HANDLE_LENGTH}
other="# characters" other="# characters"
@@ -265,7 +265,7 @@ function RequirementText({children}: {children: React.ReactNode}) {
const t = useTheme() const t = useTheme()
return ( return (
<Text style={[a.text_sm, a.flex_1, {color: t.palette.negative_500}]}> <Text style={[a.text_sm, a.flex_1, {color: t.palette.negative_500}]}>
<Trans>{children}</Trans> {children}
</Text> </Text>
) )
} }
@@ -300,7 +300,12 @@ function HandleSuggestions({
]}> ]}>
{suggestions.map((suggestion, index) => ( {suggestions.map((suggestion, index) => (
<Button <Button
label={_(msg`Select ${suggestion.handle}`)} label={_(
msg({
message: `Select ${suggestion.handle}`,
comment: `Accessibility label for a username suggestion in the account creation flow`,
}),
)}
key={index} key={index}
onPress={() => onSelect(suggestion)} onPress={() => onSelect(suggestion)}
hoverStyle={[t.atoms.bg_contrast_25]} hoverStyle={[t.atoms.bg_contrast_25]}
@@ -326,7 +331,9 @@ function HandleSuggestions({
]}> ]}>
<Text style={[a.text_md]}>{suggestion.handle}</Text> <Text style={[a.text_md]}>{suggestion.handle}</Text>
<Text style={[a.text_sm, {color: t.palette.positive_700}]}> <Text style={[a.text_sm, {color: t.palette.positive_700}]}>
<Trans>Available</Trans> <Trans comment="Shown next to an available username suggestion in the account creation flow">
Available
</Trans>
</Text> </Text>
</Button> </Button>
))} ))}