Migrate server-related components to tailwind

src/servers/helpers/ImportServersBtn.tsx

@@ -1,9 +1,10 @@
 import { faFileUpload as importIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useElementRef, useToggle } from '@shlinkio/shlink-frontend-kit';
+import { Button } from '@shlinkio/shlink-frontend-kit/tailwind';
 import type { ChangeEvent, PropsWithChildren } from 'react';
 import { useCallback, useRef, useState } from 'react';
-import { Button, UncontrolledTooltip } from 'reactstrap';
+import { UncontrolledTooltip } from 'reactstrap';
 import type { FCWithDeps } from '../../container/utils';
 import { componentFactory, useDependencies } from '../../container/utils';
 import type { ServerData, ServersMap, ServerWithId } from '../data';
@@ -83,7 +84,7 @@ const ImportServersBtn: FCWithDeps<ImportServersBtnConnectProps, ImportServersBt
 
   return (
     <>
-      <Button outline id="importBtn" className={className} onClick={() => ref.current?.click()}>
+      <Button variant="secondary" id="importBtn" className={className} onClick={() => ref.current?.click()}>
         <FontAwesomeIcon icon={importIcon} fixedWidth /> {children ?? 'Import from file'}
       </Button>
       <UncontrolledTooltip placement={tooltipPlacement} target="importBtn">

src/servers/helpers/ServerError.tsx

@@ -1,4 +1,4 @@
-import { Message } from '@shlinkio/shlink-frontend-kit';
+import { Message } from '@shlinkio/shlink-frontend-kit/tailwind';
 import type { FC } from 'react';
 import { Link } from 'react-router';
 import { NoMenuLayout } from '../../common/NoMenuLayout';
@@ -25,7 +25,7 @@ const ServerError: FCWithDeps<ServerErrorProps, ServerErrorDeps> = ({ servers, s
   return (
     <NoMenuLayout>
       <div className="server-error__container flex-column">
-        <Message className="w-100 mb-3 mb-md-5" type="error" fullWidth>
+        <Message className="w-100 mb-3 mb-md-5" variant="error">
           {!isServerWithId(selectedServer) && 'Could not find this Shlink server.'}
           {isServerWithId(selectedServer) && (
             <>

src/servers/helpers/ServerForm.tsx

@@ -1,4 +1,4 @@
-import { InputFormGroup, SimpleCard } from '@shlinkio/shlink-frontend-kit';
+import { LabelledInput, SimpleCard } from '@shlinkio/shlink-frontend-kit/tailwind';
 import type { FC, PropsWithChildren, ReactNode } from 'react';
 import { useState } from 'react';
 import { handleEventPreventingDefault } from '../../utils/utils';
@@ -18,13 +18,19 @@ export const ServerForm: FC<ServerFormProps> = ({ onSubmit, initialValues, child
 
   return (
     <form className="server-form" name="serverForm" onSubmit={handleSubmit}>
-      <SimpleCard className="mb-3" title={title}>
-        <InputFormGroup value={name} onChange={setName}>Name</InputFormGroup>
-        <InputFormGroup type="url" value={url} onChange={setUrl}>URL</InputFormGroup>
-        <InputFormGroup value={apiKey} onChange={setApiKey}>API key</InputFormGroup>
+      <SimpleCard className="tw:mb-4" bodyClassName="tw:flex tw:flex-col tw:gap-y-3" title={title}>
+        <LabelledInput label="Name" value={name} onChange={(e) => setName(e.target.value)} required />
+        <LabelledInput label="URL" type="url" value={url} onChange={(e) => setUrl(e.target.value)} required />
+        <LabelledInput
+          label="API key"
+          type="password"
+          value={apiKey}
+          onChange={(e) => setApiKey(e.target.value)}
+          required
+        />
       </SimpleCard>
 
-      <div className="text-end">{children}</div>
+      <div className="tw:flex tw:items-center tw:justify-end tw:gap-x-2">{children}</div>
     </form>
   );
 };

src/servers/helpers/withSelectedServer.tsx

@@ -1,4 +1,4 @@
-import { Message } from '@shlinkio/shlink-frontend-kit';
+import { Message } from '@shlinkio/shlink-frontend-kit/tailwind';
 import type { FC } from 'react';
 import { useEffect } from 'react';
 import { useParams } from 'react-router';