From 8045fa88862e0e8e27fd779047b546030f19765f Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Mon, 12 Jul 2021 12:05:33 +0200
Subject: [PATCH] Added more improvements to landing page

---
 src/common/Home.tsx                   | 20 ++++++++++++++------
 src/servers/ServersDropdown.tsx       |  2 +-
 test/common/Home.test.tsx             |  2 +-
 test/servers/ServersDropdown.test.tsx |  2 +-
 4 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/common/Home.tsx b/src/common/Home.tsx
index 60e5b36d..76a65b6a 100644
--- a/src/common/Home.tsx
+++ b/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>
diff --git a/src/servers/ServersDropdown.tsx b/src/servers/ServersDropdown.tsx
index 81045e42..284643f6 100644
--- a/src/servers/ServersDropdown.tsx
+++ b/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>
   );
 
diff --git a/test/common/Home.test.tsx b/test/common/Home.test.tsx
index 5fffdf93..22a88cda 100644
--- a/test/common/Home.test.tsx
+++ b/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');
diff --git a/test/servers/ServersDropdown.test.tsx b/test/servers/ServersDropdown.test.tsx
index acc2eb45..2730979b 100644
--- a/test/servers/ServersDropdown.test.tsx
+++ b/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');
   });
 });