Merge pull request #451 from acelaya-forks/feature/improve-landing

Feature/improve landing

CHANGELOG.md

@@ -16,6 +16,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 * [#440](https://github.com/shlinkio/shlink-web-client/pull/440) Added hint of what visits come potentially from a bot, in the visits table, when consuming Shlink >=2.7.
 * [#431](https://github.com/shlinkio/shlink-web-client/pull/431) Added support to filter out visits from potential bots in visits sections, when consuming Shlink >=2.7.
 * [#430](https://github.com/shlinkio/shlink-web-client/pull/430) Added support to set new and existing short URLs as crawlable, when consuming Shlink >=2.7.
+* [#450](https://github.com/shlinkio/shlink-web-client/pull/450) Improved landing page design.
 
 ### Changed
 * [#442](https://github.com/shlinkio/shlink-web-client/pull/442) Visits filtering now goes through the corresponding reducer.

src/common/Home.tsx

@@ -31,11 +31,12 @@ const Home = ({ servers }: HomeProps) => {
             <ServersListGroup embedded servers={serversList}>
               {!hasServers && (
                 <div className="p-4">
-                  <p>This application will help you to manage your Shlink servers.</p>
-                  <p>To start, please, <Link to="/server/create">add your first server</Link>.</p>
-                  <p className="m-0">
-                    You still don&lsquo;t have a Shlink server?
-                    Learn how to <ExternalLink href="https://shlink.io/documentation">get started</ExternalLink>.
+                  <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
+                    </ExternalLink>
                   </p>
                 </div>
               )}

test/common/Home.test.tsx

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