Update to FownAwesome 7

src/common/Home.tsx

@@ -50,7 +50,7 @@ export const Home = ({ servers }: HomeProps) => {
                 <p>This application will help you manage your Shlink servers.</p>
                 <p>
                   <Button to="/server/create" size="lg" inline>
-                    <FontAwesomeIcon icon={faPlus} /> Add a server
+                    <FontAwesomeIcon icon={faPlus} widthAuto /> Add a server
                   </Button>
                 </p>
                 <p>

src/servers/ManageServers.tsx

@@ -51,12 +51,12 @@ const ManageServers: FCWithDeps<ManageServersProps, ManageServersDeps> = ({ serv
           <ImportServersBtn className="flex-grow" onError={setErrorImporting}>Import servers</ImportServersBtn>
           {filteredServers.length > 0 && (
             <Button variant="secondary" className="flex-grow" onClick={async () => serversExporter.exportServers()}>
-              <FontAwesomeIcon icon={exportIcon} /> Export servers
+              <FontAwesomeIcon icon={exportIcon} widthAuto /> Export servers
             </Button>
           )}
         </div>
         <Button className="md:ml-auto" to="/server/create">
-          <FontAwesomeIcon icon={plusIcon} /> Add a server
+          <FontAwesomeIcon icon={plusIcon} widthAuto /> Add a server
         </Button>
       </div>
 

src/servers/ManageServersRowDropdown.tsx

@@ -38,17 +38,17 @@ const ManageServersRowDropdown: FCWithDeps<ManageServersRowDropdownConnectProps,
     <>
       <RowDropdown menuAlignment="right">
         <RowDropdown.Item to={serverUrl} className="gap-1.5">
-          <FontAwesomeIcon icon={connectIcon} fixedWidth /> Connect
+          <FontAwesomeIcon icon={connectIcon} /> Connect
         </RowDropdown.Item>
         <RowDropdown.Item to={`${serverUrl}/edit`} className="gap-1.5">
-          <FontAwesomeIcon icon={editIcon} fixedWidth /> Edit server
+          <FontAwesomeIcon icon={editIcon} /> Edit server
         </RowDropdown.Item>
         <RowDropdown.Item onClick={() => setAutoConnect(server, !isAutoConnect)} className="gap-1.5">
-          <FontAwesomeIcon icon={autoConnectIcon} fixedWidth /> {isAutoConnect ? 'Do not a' : 'A'}uto-connect
+          <FontAwesomeIcon icon={autoConnectIcon} /> {isAutoConnect ? 'Do not a' : 'A'}uto-connect
         </RowDropdown.Item>
         <RowDropdown.Separator />
         <RowDropdown.Item className="[&]:text-danger gap-1.5" onClick={showModal}>
-          <FontAwesomeIcon icon={deleteIcon} fixedWidth /> Remove server
+          <FontAwesomeIcon icon={deleteIcon} /> Remove server
         </RowDropdown.Item>
       </RowDropdown>
 

src/servers/ServersDropdown.tsx

@@ -15,7 +15,7 @@ export const ServersDropdown = ({ servers, selectedServer }: ServersDropdownProp
   return (
     <NavBar.Dropdown buttonContent={(
       <span className="flex items-center gap-1.5">
-        <FontAwesomeIcon icon={serverIcon} fixedWidth /> Servers
+        <FontAwesomeIcon icon={serverIcon} /> Servers
       </span>
     )}>
       {serversList.length === 0 ? (

src/servers/helpers/ImportServersBtn.tsx

@@ -84,7 +84,7 @@ const ImportServersBtn: FCWithDeps<ImportServersBtnConnectProps, ImportServersBt
   return (
     <>
       <Button variant="secondary" className={className} onClick={() => fileInputRef.current?.click()} {...anchor}>
-        <FontAwesomeIcon icon={importIcon} fixedWidth /> {children ?? 'Import from file'}
+        <FontAwesomeIcon icon={importIcon} widthAuto /> {children ?? 'Import from file'}
       </Button>
       <Tooltip {...tooltip}>
         You can create servers by importing a CSV file with <b>name</b>, <b>apiKey</b> and <b>url</b> columns.