Created new section to manage servers

src/servers/helpers/ImportServersBtn.tsx

@@ -1,13 +1,17 @@
 import { useRef, RefObject, ChangeEvent, MutableRefObject } from 'react';
-import { UncontrolledTooltip } from 'reactstrap';
+import { Button, UncontrolledTooltip } from 'reactstrap';
+import { faFileUpload as importIcon } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import ServersImporter from '../services/ServersImporter';
 import { ServerData } from '../data';
+import './ImportServersBtn.scss';
 
 type Ref<T> = RefObject<T> | MutableRefObject<T>;
 
 export interface ImportServersBtnProps {
   onImport?: () => void;
   onImportError?: (error: Error) => void;
+  tooltipPlacement?: 'top' | 'bottom';
 }
 
 interface ImportServersBtnConnectProps extends ImportServersBtnProps {
@@ -20,6 +24,7 @@ const ImportServersBtn = ({ importServersFromFile }: ServersImporter) => ({
   fileRef,
   onImport = () => {},
   onImportError = () => {},
+  tooltipPlacement = 'bottom',
 }: ImportServersBtnConnectProps) => {
   const ref = fileRef ?? useRef<HTMLInputElement>();
   const onChange = async ({ target }: ChangeEvent<HTMLInputElement>) =>
@@ -34,19 +39,14 @@ const ImportServersBtn = ({ importServersFromFile }: ServersImporter) => ({
 
   return (
     <>
-      <button
-        type="button"
-        className="btn btn-outline-secondary mr-2"
-        id="importBtn"
-        onClick={() => ref.current?.click()}
-      >
-        Import from file
-      </button>
-      <UncontrolledTooltip placement="top" target="importBtn">
+      <Button outline id="importBtn" onClick={() => ref.current?.click()}>
+        <FontAwesomeIcon icon={importIcon} fixedWidth /> Import from file
+      </Button>
+      <UncontrolledTooltip placement={tooltipPlacement} target="importBtn">
         You can create servers by importing a CSV file with columns <b>name</b>, <b>apiKey</b> and <b>url</b>.
       </UncontrolledTooltip>
 
-      <input type="file" accept="text/csv" className="create-server__csv-select" ref={ref} onChange={onChange} />
+      <input type="file" accept="text/csv" className="import-servers-btn__csv-select" ref={ref} onChange={onChange} />
     </>
   );
 };