bigbuffet/pleroma
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Toast: use HStack, RTL support

Browse source
This commit is contained in:
Alex Gleason 2022-12-23 11:31:53 -06:00
parent 140c0b3037
commit 69328ade8b
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
1 changed files with 10 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
app/soapbox/components/ui/toast/toast.tsx
View file

@ -6,6 +6,7 @@ import { Link } from 'react-router-dom';
import { ToastText, ToastType } from 'soapbox/toast'; import { ToastText, ToastType } from 'soapbox/toast';
import HStack from '../hstack/hstack';
import Icon from '../icon/icon'; import Icon from '../icon/icon';
const renderText = (text: ToastText) => { const renderText = (text: ToastText) => {
@ -63,7 +64,7 @@ const Toast = (props: IToast) => {
}; };
const renderAction = () => { const renderAction = () => {
const classNames = 'ml-3 mt-0.5 flex-shrink-0 rounded-full text-sm font-medium text-primary-600 dark:text-accent-blue hover:underline focus:outline-none'; const classNames = 'mt-0.5 flex-shrink-0 rounded-full text-sm font-medium text-primary-600 dark:text-accent-blue hover:underline focus:outline-none';
if (action && actionLabel) { if (action && actionLabel) {
return ( return (
@ -109,24 +110,24 @@ const Toast = (props: IToast) => {
} }
> >
<div className='p-4'> <div className='p-4'>
<div className='flex items-start'> <HStack space={4} alignItems='start'>
<div className='flex w-0 flex-1 justify-between items-start'> <HStack space={3} justifyContent='between' alignItems='start' className='w-0 flex-1'>
<div className='w-0 flex-1 flex items-start'> <HStack space={3} alignItems='start' className='w-0 flex-1'>
<div className='flex-shrink-0'> <div className='flex-shrink-0'>
{renderIcon()} {renderIcon()}
</div> </div>
<p className='ml-3 pt-0.5 text-sm text-gray-900 dark:text-gray-100' data-testid='toast-message'> <p className='pt-0.5 text-sm text-gray-900 dark:text-gray-100' data-testid='toast-message'>
{renderText(message)} {renderText(message)}
</p> </p>
</div> </HStack>
{/* Action */} {/* Action */}
{renderAction()} {renderAction()}
</div> </HStack>
{/* Dismiss Button */} {/* Dismiss Button */}
<div className='ml-4 flex flex-shrink-0 pt-0.5'> <div className='flex flex-shrink-0 pt-0.5'>
<button <button
type='button' type='button'
className='inline-flex rounded-md text-gray-600 dark:text-gray-600 hover:text-gray-700 dark:hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2' className='inline-flex rounded-md text-gray-600 dark:text-gray-600 hover:text-gray-700 dark:hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2'
@ -137,7 +138,7 @@ const Toast = (props: IToast) => {
<Icon src={require('@tabler/icons/x.svg')} className='w-5 h-5' /> <Icon src={require('@tabler/icons/x.svg')} className='w-5 h-5' />
</button> </button>
</div> </div>
</div> </HStack>
</div> </div>
</div> </div>
); );