Migrate DeleteServerModal to tailwind components

src/servers/CreateServer.tsx

@@ -1,11 +1,10 @@
 import type { TimeoutToggle } from '@shlinkio/shlink-frontend-kit';
 import { useToggle } from '@shlinkio/shlink-frontend-kit';
 import type { ResultProps } from '@shlinkio/shlink-frontend-kit/tailwind';
-import { Result } from '@shlinkio/shlink-frontend-kit/tailwind';
+import { Button, Result } from '@shlinkio/shlink-frontend-kit/tailwind';
 import type { FC } from 'react';
 import { useCallback, useState } from 'react';
 import { useNavigate } from 'react-router';
-import { Button } from 'reactstrap';
 import { NoMenuLayout } from '../common/NoMenuLayout';
 import type { FCWithDeps } from '../container/utils';
 import { componentFactory, useDependencies } from '../container/utils';
@@ -29,7 +28,7 @@ type CreateServerDeps = {
 };
 
 const ImportResult = ({ variant }: Pick<ResultProps, 'variant'>) => (
-  <div className="mt-3">
+  <div className="tw:mt-4">
     <Result variant={variant}>
       {variant === 'success' && 'Servers properly imported. You can now select one from the list :)'}
       {variant === 'error' && 'The servers could not be imported. Make sure the format is correct.'}
@@ -74,8 +73,8 @@ const CreateServer: FCWithDeps<CreateServerProps, CreateServerDeps> = ({ servers
         {!hasServers && (
           <ImportServersBtn tooltipPlacement="top" onImport={setServersImported} onImportError={setErrorImporting} />
         )}
-        {hasServers && <Button outline onClick={goBack}>Cancel</Button>}
-        <Button outline color="primary">Create server</Button>
+        {hasServers && <Button variant="secondary" onClick={goBack}>Cancel</Button>}
+        <Button type="submit">Create server</Button>
       </ServerForm>
 
       {serversImported && <ImportResult variant="success" />}

src/servers/DeleteServerButton.tsx

@@ -3,6 +3,8 @@ 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';
 import type { FCWithDeps } from '../container/utils';
 import { componentFactory, useDependencies } from '../container/utils';
 import type { ServerWithId } from './data';
@@ -23,6 +25,13 @@ const DeleteServerButton: FCWithDeps<DeleteServerButtonProps, DeleteServerButton
 ) => {
   const { DeleteServerModal } = useDependencies(DeleteServerButton);
   const [isModalOpen, , showModal, hideModal] = useToggle();
+  const navigate = useNavigate();
+  const onClose = useCallback((confirmed: boolean) => {
+    hideModal();
+    if (confirmed) {
+      navigate('/');
+    }
+  }, [hideModal, navigate]);
 
   return (
     <>
@@ -31,7 +40,7 @@ const DeleteServerButton: FCWithDeps<DeleteServerButtonProps, DeleteServerButton
         <span className={textClassName}>{children ?? 'Remove this server'}</span>
       </button>
 
-      <DeleteServerModal server={server} isOpen={isModalOpen} toggle={hideModal} />
+      <DeleteServerModal server={server} open={isModalOpen} onClose={onClose} />
     </>
   );
 };

src/servers/DeleteServerModal.tsx

@@ -1,56 +1,40 @@
+import { CardModal } from '@shlinkio/shlink-frontend-kit/tailwind';
 import type { FC } from 'react';
-import { useRef } from 'react';
-import { useNavigate } from 'react-router';
-import { Button, Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
+import { useCallback } from 'react';
 import type { ServerWithId } from './data';
 
-export interface DeleteServerModalProps {
+export type DeleteServerModalProps = {
   server: ServerWithId;
-  toggle: () => void;
-  isOpen: boolean;
-  redirectHome?: boolean;
-}
+  onClose: (confirmed: boolean) => void;
+  open: boolean;
+};
 
-interface DeleteServerModalConnectProps extends DeleteServerModalProps {
+type DeleteServerModalConnectProps = DeleteServerModalProps & {
   deleteServer: (server: ServerWithId) => void;
-}
-
-export const DeleteServerModal: FC<DeleteServerModalConnectProps> = (
-  { server, toggle, isOpen, deleteServer, redirectHome = true },
-) => {
-  const navigate = useNavigate();
-  const doDelete = useRef<boolean>(false);
-  const toggleAndDelete = () => {
-    doDelete.current = true;
-    toggle();
-  };
-  const onClosed = () => {
-    if (!doDelete.current) {
-      return;
-    }
+};
 
+export const DeleteServerModal: FC<DeleteServerModalConnectProps> = ({ server, onClose, open, deleteServer }) => {
+  const onConfirm = useCallback(() => {
     deleteServer(server);
-    if (redirectHome) {
-      navigate('/');
-    }
-  };
+    onClose(true);
+  }, [deleteServer, onClose, server]);
 
   return (
-    <Modal isOpen={isOpen} toggle={toggle} centered onClosed={onClosed}>
-      <ModalHeader toggle={toggle} className="text-danger">Remove server</ModalHeader>
-      <ModalBody>
-        <p>Are you sure you want to remove <b>{server ? server.name : ''}</b>?</p>
-        <p>
-          <i>
-            No data will be deleted, only the access to this server will be removed from this device.
-            You can create it again at any moment.
-          </i>
-        </p>
-      </ModalBody>
-      <ModalFooter>
-        <Button color="link" onClick={toggle}>Cancel</Button>
-        <Button color="danger" onClick={toggleAndDelete}>Delete</Button>
-      </ModalFooter>
-    </Modal>
+    <CardModal
+      open={open}
+      title="Remove server"
+      variant="danger"
+      onClose={() => onClose(false)}
+      onConfirm={onConfirm}
+      confirmText="Delete"
+    >
+      <p>Are you sure you want to remove <b>{server ? server.name : ''}</b>?</p>
+      <p>
+        <i>
+          No data will be deleted, only the access to this server will be removed from this device.
+          You can create it again at any moment.
+        </i>
+      </p>
+    </CardModal>
   );
 };

src/servers/ManageServersRowDropdown.tsx

@@ -48,11 +48,11 @@ const ManageServersRowDropdown: FCWithDeps<ManageServersRowDropdownConnectProps,
         <FontAwesomeIcon icon={autoConnectIcon} fixedWidth /> {isAutoConnect ? 'Do not a' : 'A'}uto-connect
       </DropdownItem>
       <DropdownItem divider tag="hr" />
-      <DropdownItem className="dropdown-item--danger" onClick={showModal}>
+      <DropdownItem className="tw:text-danger" onClick={showModal}>
         <FontAwesomeIcon icon={deleteIcon} fixedWidth /> Remove server
       </DropdownItem>
 
-      <DeleteServerModal redirectHome={false} server={server} isOpen={isModalOpen} toggle={hideModal} />
+      <DeleteServerModal server={server} open={isModalOpen} onClose={hideModal} />
     </RowDropdownBtn>
   );
 };