moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Change classname "dropdown-menu_separator" to use only Tailwind

This commit is contained in:
danidfra 2024-11-01 16:49:32 -03:00
parent afd7260e3d
commit 337d835dd9
1 changed files with 8 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/features/ui/components/modals/actions-modal.tsx
View File

@ -22,7 +22,7 @@ interface IActionsModal {
const ActionsModal: React.FC<IActionsModal> = ({ status, actions, onClick, onClose }) => { const ActionsModal: React.FC<IActionsModal> = ({ status, actions, onClick, onClose }) => {
const renderAction = (action: MenuItem | null, i: number) => { const renderAction = (action: MenuItem | null, i: number) => {
if (action === null) { if (action === null) {
return <li key={`sep-${i}`} className='dropdown-menu__separator' />; return <li key={`sep-${i}`} className='m-2 block h-px bg-gray-200 black:bg-gray-800 dark:bg-gray-600' />;
} }
const { icon = null, text, meta = null, active = false, href = '#', destructive } = action; const { icon = null, text, meta = null, active = false, href = '#', destructive } = action;
@ -36,12 +36,12 @@ const ActionsModal: React.FC<IActionsModal> = ({ status, actions, onClick, onClo
{...compProps} {...compProps}
space={2.5} space={2.5}
data-index={i} data-index={i}
className={clsx('w-full', { active, destructive })} className={clsx('w-full', { active, 'text-danger-600 dark:text-danger-400': destructive })}
element={Comp} element={Comp}
> >
{icon && <Icon title={text} src={icon} role='presentation' tabIndex={-1} />} {icon && <Icon title={text} src={icon} role='presentation' tabIndex={-1} />}
<div> <div>
<div className={clsx({ 'actions-modal__item-label': !!meta })}>{text}</div> <div className={clsx({ 'font-medium': !!meta })}>{text}</div>
<div>{meta}</div> <div>{meta}</div>
</div> </div>
</HStack> </HStack>
@ -52,18 +52,18 @@ const ActionsModal: React.FC<IActionsModal> = ({ status, actions, onClick, onClo
return ( return (
<Motion defaultStyle={{ top: 100 }} style={{ top: spring(0) }}> <Motion defaultStyle={{ top: 100 }} style={{ top: spring(0) }}>
{({ top }) => ( {({ top }) => (
<div className='modal-root__modal actions-modal' style={{ top: `${top}%` }}> <div className='pointer-events-auto relative z-[9999] m-auto flex max-h-[calc(100vh-3rem)] w-full max-w-lg flex-col overflow-hidden rounded-2xl bg-white text-gray-400 shadow-xl black:bg-black dark:bg-gray-900' style={{ top: `${top}%` }}>
{status && ( {status && (
<ReplyIndicator className='actions-modal__status rounded-b-none' status={status} hideActions /> <ReplyIndicator className='max-h-[300px] overflow-y-auto rounded-b-none' status={status} hideActions />
)} )}
<ul className={clsx({ 'with-status': !!status })}> <ul className={clsx({ 'max-h-[calc(80vh-75px)]': !!status }, 'my-2 shrink-0 overflow-y-auto')}>
{actions && actions.map(renderAction)} {actions && actions.map(renderAction)}
<li className='dropdown-menu__separator' /> <li className='m-2 block h-px bg-gray-200 black:bg-gray-800 dark:bg-gray-600' />
<li> <li>
<button type='button' onClick={onClose}> <button type='button' className='w-full text-center text-gray-700 hover:bg-gray-100 dark:text-gray-500 dark:hover:bg-gray-800' onClick={onClose}>
<FormattedMessage id='lightbox.close' defaultMessage='Close' /> <FormattedMessage id='lightbox.close' defaultMessage='Close' />
</button> </button>
</li> </li>