Rework the labeler selection step of the report flow (#3269)

* Rework the labeler selection step of the report flow

* Fix: use gtMobile

* Use primitives, fix avatar

* Spacing tweaks

* Show handle instead of description

---------

Co-authored-by: Eric Bailey <git@esb.lol>
This commit is contained in:
Paul Frazee 2024-03-19 11:38:17 -07:00 committed by GitHub
parent 9277282e6c
commit c9c3bd98b7
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 31 additions and 53 deletions

View file

@ -9,7 +9,7 @@ import {DMCA_LINK} from '#/components/ReportDialog/const'
import {Link} from '#/components/Link'
export {useDialogControl as useReportDialogControl} from '#/components/Dialog'
import {atoms as a, useTheme} from '#/alf'
import {atoms as a, useTheme, useBreakpoints} from '#/alf'
import {Text} from '#/components/Typography'
import {
Button,
@ -35,6 +35,7 @@ export function SelectReportOptionView({
}) {
const t = useTheme()
const {_} = useLingui()
const {gtMobile} = useBreakpoints()
const allReportOptions = useReportOptions()
const reportOptions = allReportOptions[props.params.type]
@ -76,7 +77,7 @@ export function SelectReportOptionView({
</Button>
) : null}
<View style={[a.justify_center, a.gap_sm]}>
<View style={[a.justify_center, gtMobile ? a.gap_sm : a.gap_xs]}>
<Text style={[a.text_2xl, a.font_bold]}>{i18n.title}</Text>
<Text style={[a.text_md, t.atoms.text_contrast_medium]}>
{i18n.description}