Added more improvements to landing page

src/common/Home.tsx

@@ -2,6 +2,8 @@ import { isEmpty, values } from 'ramda';
 import { Link } from 'react-router-dom';
 import { Card, Row } from 'reactstrap';
 import { ExternalLink } from 'react-external-link';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faExternalLinkAlt, faPlus } from '@fortawesome/free-solid-svg-icons';
 import ServersListGroup from '../servers/ServersListGroup';
 import { ServersMap } from '../servers/data';
 import { ShlinkLogo } from './img/ShlinkLogo';
@@ -30,12 +32,18 @@ const Home = ({ servers }: HomeProps) => {
             </div>
             <ServersListGroup embedded servers={serversList}>
               {!hasServers && (
-                <div className="p-4">
-                  <p className="mb-4">This application will help you manage your Shlink servers.</p>
-                  <p className="text-center mb-0">
-                    <Link to="/server/create" className="btn btn-outline-primary btn-lg mr-2">Add a server</Link>
-                    <ExternalLink href="https://shlink.io/documentation" className="btn btn-outline-secondary btn-lg">
-                      Learn more
+                <div className="p-4 text-center">
+                  <p className="mb-5">This application will help you manage your Shlink servers.</p>
+                  <p>
+                    <Link to="/server/create" className="btn btn-outline-primary btn-lg mr-2">
+                      <FontAwesomeIcon icon={faPlus} /> <span className="ml-1">Add a server</span>
+                    </Link>
+                  </p>
+                  <p className="mb-0 mt-5">
+                    <ExternalLink href="https://shlink.io/documentation">
+                      <small>
+                        <span className="mr-1">Learn more about Shlink</span> <FontAwesomeIcon icon={faExternalLinkAlt} />
+                      </small>
                     </ExternalLink>
                   </p>
                 </div>

src/servers/ServersDropdown.tsx

@@ -15,7 +15,7 @@ const ServersDropdown = (serversExporter: ServersExporter) => ({ servers, select
   const serversList = values(servers);
   const createServerItem = (
     <DropdownItem tag={Link} to="/server/create">
-      <FontAwesomeIcon icon={plusIcon} /> <span className="ml-1">Add server</span>
+      <FontAwesomeIcon icon={plusIcon} /> <span className="ml-1">Add a server</span>
     </DropdownItem>
   );
 

test/common/Home.test.tsx

@@ -35,7 +35,7 @@ describe('<Home />', () => {
       },
       0,
     ],
-    [{}, 2 ],
+    [{}, 3 ],
   ])('shows link to create or set-up server only when no servers exist', (servers, expectedParagraphs) => {
     const wrapped = createComponent({ servers });
     const p = wrapped.find('p');

test/servers/ServersDropdown.test.tsx

@@ -43,6 +43,6 @@ describe('<ServersDropdown />', () => {
 
     expect(item).toHaveLength(1);
     expect(item.prop('to')).toEqual('/server/create');
-    expect(item.find('span').text()).toContain('Add server');
+    expect(item.find('span').text()).toContain('Add a server');
   });
 });