miklo
/
soapbox
sforkowany z mirror/soapbox
1
0
Forkuj 0
Kod Zgłoszenia Oczekujące zmiany Packages Projekty Wydania Wiki Aktywność

Fix a few visual issues

api-accept
Justin 2022-05-02 09:59:42 -04:00
rodzic a58069a123
commit d644e3cf25
2 zmienionych plików z 63 dodań i 60 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

2
app/soapbox/features/ui/components/modals/report-modal/steps/other-actions-step.tsx
Wyświetl plik

@ -95,7 +95,7 @@ const OtherActionsStep = ({ account }: IOtherActionsStep) => {
<Stack space={4}> <Stack space={4}>
{renderSelectedStatuses()} {renderSelectedStatuses()}
{!features.reportMultipleStatuses && ( {features.reportMultipleStatuses && (
<Stack space={2}> <Stack space={2}>
<Text size='xl' weight='semibold'>Include other statuses?</Text> <Text size='xl' weight='semibold'>Include other statuses?</Text>

121
app/soapbox/features/ui/components/modals/report-modal/steps/reason-step.tsx
Wyświetl plik

@ -68,6 +68,7 @@ const ReasonStep = (_props: IReasonStep) => {
const comment = useAppSelector((state) => state.reports.getIn(['new', 'comment']) as string); const comment = useAppSelector((state) => state.reports.getIn(['new', 'comment']) as string);
const rules = useAppSelector((state) => state.rules.items); const rules = useAppSelector((state) => state.rules.items);
const ruleId = useAppSelector((state) => state.reports.getIn(['new', 'rule_id']) as boolean); const ruleId = useAppSelector((state) => state.reports.getIn(['new', 'rule_id']) as boolean);
const shouldRequireRule = rules.length > 0;
const renderSelectedStatuses = useCallback(() => { const renderSelectedStatuses = useCallback(() => {
switch (selectedStatusIds.size) { switch (selectedStatusIds.size) {
@ -112,69 +113,71 @@ const ReasonStep = (_props: IReasonStep) => {
<Stack space={4}> <Stack space={4}>
{renderSelectedStatuses()} {renderSelectedStatuses()}
<Stack space={2}> {shouldRequireRule && (
<Text size='xl' weight='semibold'>Reason for reporting</Text> <Stack space={2}>
<Text size='xl' weight='semibold'>Reason for reporting</Text>
<div className='relative'> <div className='relative'>
<div <div
className='bg-white rounded-lg -space-y-px max-h-96 overflow-y-auto' className='bg-white rounded-lg -space-y-px max-h-96 overflow-y-auto'
onScroll={handleRulesScrolling} onScroll={handleRulesScrolling}
ref={rulesListRef} ref={rulesListRef}
> >
{rules.map((rule, idx) => { {rules.map((rule, idx) => {
const isSelected = String(ruleId) === rule.id; const isSelected = String(ruleId) === rule.id;
return ( return (
<button <button
key={idx} key={idx}
data-testid={`rule-${rule.id}`} data-testid={`rule-${rule.id}`}
onClick={() => dispatch(changeReportRule(rule.id))} onClick={() => dispatch(changeReportRule(rule.id))}
className={classNames({ className={classNames({
'relative border border-solid border-gray-200 hover:bg-gray-50 text-left w-full p-4 flex justify-between items-center cursor-pointer': true, 'relative border border-solid border-gray-200 hover:bg-gray-50 text-left w-full p-4 flex justify-between items-center cursor-pointer': true,
'rounded-tl-lg rounded-tr-lg': idx === 0, 'rounded-tl-lg rounded-tr-lg': idx === 0,
'rounded-bl-lg rounded-br-lg': idx === rules.length - 1, 'rounded-bl-lg rounded-br-lg': idx === rules.length - 1,
'bg-gray-50': isSelected, 'bg-gray-50': isSelected,
})} })}
> >
<div className='mr-3 flex flex-col'> <div className='mr-3 flex flex-col'>
<span <span
className={classNames('block text-sm font-medium', { className={classNames('block text-sm font-medium', {
'text-primary-800': isSelected, 'text-primary-800': isSelected,
'text-gray-800': !isSelected, 'text-gray-800': !isSelected,
})} })}
> >
{rule.text} {rule.text}
</span> </span>
<Text theme='muted' size='sm'>{rule.subtext}</Text> <Text theme='muted' size='sm'>{rule.subtext}</Text>
</div> </div>
<input <input
name='reason' name='reason'
type='radio' type='radio'
value={rule.id} value={rule.id}
checked={isSelected} checked={isSelected}
readOnly readOnly
className='h-4 w-4 mt-0.5 cursor-pointer text-indigo-600 border-gray-300 focus:ring-indigo-500' className='h-4 w-4 mt-0.5 cursor-pointer text-indigo-600 border-gray-300 focus:ring-indigo-500'
/> />
</button> </button>
); );
})} })}
</div>
<div
className={classNames('inset-x-0 top-0 flex justify-center bg-gradient-to-b from-white pb-12 pt-8 pointer-events-none dark:from-slate-900 absolute transition-opacity duration-500', {
'opacity-0': isNearTop,
'opacity-100': !isNearTop,
})}
/>
<div
className={classNames('inset-x-0 bottom-0 flex justify-center bg-gradient-to-t from-white pt-12 pb-8 pointer-events-none dark:from-slate-900 absolute transition-opacity duration-500', {
'opacity-0': isNearBottom,
'opacity-100': !isNearBottom,
})}
/>
</div> </div>
</Stack>
<div )}
className={classNames('inset-x-0 top-0 flex justify-center bg-gradient-to-b from-white pb-12 pt-8 pointer-events-none dark:from-slate-900 absolute transition-opacity duration-500', {
'opacity-0': isNearTop,
'opacity-100': !isNearTop,
})}
/>
<div
className={classNames('inset-x-0 bottom-0 flex justify-center bg-gradient-to-t from-white pt-12 pb-8 pointer-events-none dark:from-slate-900 absolute transition-opacity duration-500', {
'opacity-0': isNearBottom,
'opacity-100': !isNearBottom,
})}
/>
</div>
</Stack>
<FormGroup labelText={intl.formatMessage(messages.placeholder)}> <FormGroup labelText={intl.formatMessage(messages.placeholder)}>
<Textarea <Textarea