Replace some bootstrap utility classes with tailwind ones

src/common/ShlinkVersions.tsx

@@ -12,7 +12,7 @@ export interface ShlinkVersionsProps {
 }
 
 const VersionLink = ({ project, version }: { project: 'shlink' | 'shlink-web-client'; version: string }) => (
-  <ExternalLink href={`https://github.com/shlinkio/${project}/releases/${version}`} className="text-muted">
+  <ExternalLink href={`https://github.com/shlinkio/${project}/releases/${version}`} className="tw:text-gray-500">
     <b>{version}</b>
   </ExternalLink>
 );
@@ -21,7 +21,7 @@ export const ShlinkVersions = ({ selectedServer, clientVersion = SHLINK_WEB_CLIE
   const normalizedClientVersion = normalizeVersion(clientVersion);
 
   return (
-    <small className="text-muted">
+    <small className="tw:text-gray-500">
       {isReachableServer(selectedServer) && (
         <>Server: <VersionLink project="shlink" version={selectedServer.printableVersion} /> - </>
       )}

src/common/ShlinkVersionsContainer.tsx

@@ -9,7 +9,7 @@ export type ShlinkVersionsContainerProps = {
 
 export const ShlinkVersionsContainer = ({ selectedServer }: ShlinkVersionsContainerProps) => (
   <div
-    className={clsx('text-center', { 'tw:md:ml-(--aside-menu-width)': isReachableServer(selectedServer) })}
+    className={clsx('tw:text-center', { 'tw:md:ml-(--aside-menu-width)': isReachableServer(selectedServer) })}
   >
     <ShlinkVersions selectedServer={selectedServer} />
   </div>

src/servers/DeleteServerButton.tsx

@@ -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> = (
+const DeleteServerButton: FCWithDeps<DeleteServerButtonProps, DeleteServerButtonDeps> = ({ server, children }) => {
-  { server, className, children, textClassName },
-) => {
   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}>
+      <button type="button" className="tw:text-danger tw:hover:underline" onClick={showModal}>
-        {!children && <FontAwesomeIcon fixedWidth icon={deleteIcon} />}
+        {children}
-        <span className={textClassName}>{children ?? 'Remove this server'}</span>
       </button>
-
       <DeleteServerModal server={server} open={isModalOpen} onClose={onClose} />
     </>
   );

src/servers/helpers/ServerError.tsx

@@ -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>

test/servers/DeleteServerButton.test.tsx

@@ -13,11 +13,11 @@ describe('<DeleteServerButton />', () => {
   const DeleteServerButton = DeleteServerButtonFactory(fromPartial({
     DeleteServerModal: (props: DeleteServerModalProps) => <DeleteServerModal {...props} deleteServer={vi.fn()} />,
   }));
-  const setUp = (children?: ReactNode) => {
+  const setUp = (children: ReactNode = 'Remove this server') => {
     const history = createMemoryHistory({ initialEntries: ['/foo'] });
     const result = renderWithEvents(
       <Router location={history.location} navigator={history}>
-        <DeleteServerButton server={fromPartial({})} textClassName="button">{children}</DeleteServerButton>
+        <DeleteServerButton server={fromPartial({})}>{children}</DeleteServerButton>
       </Router>,
     );
 
@@ -30,7 +30,6 @@ describe('<DeleteServerButton />', () => {
     ['Foo bar'],
     ['baz'],
     ['something'],
-    [undefined],
   ])('renders expected content', (children) => {
     const { container } = setUp(children);
     expect(container.firstChild).toBeTruthy();

test/servers/__snapshots__/DeleteServerButton.test.tsx.snap

@@ -2,67 +2,27 @@
 
 exports[`<DeleteServerButton /> > renders expected content 1`] = `
 <button
-  class="p-0 bg-transparent border-0"
+  class="tw:text-danger tw:hover:underline"
   type="button"
 >
-  <span
+  Foo bar
-    class="button"
-  >
-    Foo bar
-  </span>
 </button>
 `;
 
 exports[`<DeleteServerButton /> > renders expected content 2`] = `
 <button
-  class="p-0 bg-transparent border-0"
+  class="tw:text-danger tw:hover:underline"
   type="button"
 >
-  <span
+  baz
-    class="button"
-  >
-    baz
-  </span>
 </button>
 `;
 
 exports[`<DeleteServerButton /> > renders expected content 3`] = `
 <button
-  class="p-0 bg-transparent border-0"
+  class="tw:text-danger tw:hover:underline"
   type="button"
 >
-  <span
+  something
-    class="button"
-  >
-    something
-  </span>
-</button>
-`;
-
-exports[`<DeleteServerButton /> > renders expected content 4`] = `
-<button
-  class="p-0 bg-transparent border-0"
-  type="button"
->
-  <svg
-    aria-hidden="true"
-    class="svg-inline--fa fa-circle-minus fa-fw "
-    data-icon="circle-minus"
-    data-prefix="fas"
-    focusable="false"
-    role="img"
-    viewBox="0 0 512 512"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM184 232l144 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-144 0c-13.3 0-24-10.7-24-24s10.7-24 24-24z"
-      fill="currentColor"
-    />
-  </svg>
-  <span
-    class="button"
-  >
-    Remove this server
-  </span>
 </button>
 `;