From ada9e53ff25f0ec231e5ad72fd05fa21e98a4080 Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Mon, 4 Nov 2024 21:41:18 -0300
Subject: [PATCH] Fix action-modal

---
 .../ui/components/modals/actions-modal.tsx       | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/features/ui/components/modals/actions-modal.tsx b/src/features/ui/components/modals/actions-modal.tsx
index 0898a80b2..0e873b20b 100644
--- a/src/features/ui/components/modals/actions-modal.tsx
+++ b/src/features/ui/components/modals/actions-modal.tsx
@@ -3,8 +3,8 @@ import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { spring } from 'react-motion';
 
-import Icon from 'soapbox/components/icon';
 import { HStack } from 'soapbox/components/ui';
+import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
 import ReplyIndicator from 'soapbox/features/compose/components/reply-indicator';
 
 import Motion from '../../util/optional-motion';
@@ -36,10 +36,10 @@ const ActionsModal: React.FC<IActionsModal> = ({ status, actions, onClick, onClo
           {...compProps}
           space={2.5}
           data-index={i}
-          className={clsx('w-full', { active, 'text-danger-600 dark:text-danger-400': destructive })}
+          className={clsx('flex w-full items-center px-4 py-3 text-left text-gray-700 no-underline hover:bg-gray-100 focus:bg-gray-100 dark:text-gray-500 dark:hover:bg-gray-800 dark:focus:bg-primary-800', { active, 'text-danger-600 dark:text-danger-400': destructive })}
           element={Comp}
         >
-          {icon && <Icon title={text} src={icon} role='presentation' tabIndex={-1} />}
+          {icon && <SvgIcon title={text} className='size-6 min-w-5 stroke-[1.5]' src={icon} role='presentation' tabIndex={-1} />}
           <div>
             <div className={clsx({ 'font-medium': !!meta })}>{text}</div>
             <div>{meta}</div>
@@ -52,18 +52,22 @@ const ActionsModal: React.FC<IActionsModal> = ({ status, actions, onClick, onClo
   return (
     <Motion defaultStyle={{ top: 100 }} style={{ top: spring(0) }}>
       {({ 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}%` }}>
+        <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 && (
             <ReplyIndicator className='max-h-[300px] overflow-y-auto rounded-b-none' status={status} hideActions />
           )}
 
-          <ul className={clsx({ 'max-h-[calc(80vh-75px)]': !!status }, 'my-2 shrink-0 overflow-y-auto')}>
+          <ul className={clsx({ ' max-h-[calc(80vh-75px)]': !!status }, 'my-2 max-h-[calc(100vh-147px)] shrink-0 overflow-y-auto')}>
             {actions && actions.map(renderAction)}
 
             <li className='m-2 block h-px bg-gray-200 black:bg-gray-800 dark:bg-gray-600' />
 
             <li>
-              <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}>
+              <button
+                type='button'
+                className='flex w-full items-center justify-center px-4 py-3 text-left text-gray-700 no-underline hover:bg-gray-100 focus:bg-gray-100 dark:text-gray-500 dark:hover:bg-gray-800 dark:focus:bg-primary-800'
+                onClick={onClose}
+              >
                 <FormattedMessage id='lightbox.close' defaultMessage='Close' />
               </button>
             </li>