Replace some bootstrap utility classes with tailwind ones

This commit is contained in:
Alejandro Celaya
2025-04-05 11:48:24 +02:00
parent bd034c11b6
commit d188d67c5a
6 changed files with 15 additions and 65 deletions

View File

@@ -1,7 +1,4 @@
import { faMinusCircle as deleteIcon } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { useToggle } from '@shlinkio/shlink-frontend-kit';
import { clsx } from 'clsx';
import type { FC, PropsWithChildren } from 'react';
import { useCallback } from 'react';
import { useNavigate } from 'react-router';
@@ -12,17 +9,13 @@ import type { DeleteServerModalProps } from './DeleteServerModal';
export type DeleteServerButtonProps = PropsWithChildren<{
server: ServerWithId;
className?: string;
textClassName?: string;
}>;
type DeleteServerButtonDeps = {
DeleteServerModal: FC<DeleteServerModalProps>;
};
const DeleteServerButton: FCWithDeps<DeleteServerButtonProps, DeleteServerButtonDeps> = (
{ server, className, children, textClassName },
) => {
const DeleteServerButton: FCWithDeps<DeleteServerButtonProps, DeleteServerButtonDeps> = ({ server, children }) => {
const { DeleteServerModal } = useDependencies(DeleteServerButton);
const [isModalOpen, , showModal, hideModal] = useToggle();
const navigate = useNavigate();
@@ -35,11 +28,9 @@ const DeleteServerButton: FCWithDeps<DeleteServerButtonProps, DeleteServerButton
return (
<>
<button type="button" className={clsx(className, 'p-0 bg-transparent border-0')} onClick={showModal}>
{!children && <FontAwesomeIcon fixedWidth icon={deleteIcon} />}
<span className={textClassName}>{children ?? 'Remove this server'}</span>
<button type="button" className="tw:text-danger tw:hover:underline" onClick={showModal}>
{children}
</button>
<DeleteServerModal server={server} open={isModalOpen} onClose={onClose} />
</>
);

View File

@@ -45,7 +45,7 @@ const ServerError: FCWithDeps<ServerErrorProps, ServerErrorDeps> = ({ servers, s
{isServerWithId(selectedServer) && (
<p className="tw:text-xl">
Alternatively, if you think you may have misconfigured this server, you
can <DeleteServerButton server={selectedServer} className="tw:text-danger tw:hover:underline">remove
can <DeleteServerButton server={selectedServer}>remove
it</DeleteServerButton> or&nbsp;
<Link to={`/server/${selectedServer.id}/edit?reconnect=true`}>edit it</Link>.
</p>