shlinkio/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2025-12-11 02:09:53 -06:00
Code Issues Packages Projects Releases 67 Wiki Activity

Added more improvements to landing page

Browse Source
This commit is contained in:
Alejandro Celaya 2021-07-12 12:05:33 +02:00
parent 0789494a40
commit 8045fa8886
4 changed files with 17 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/common/Home.tsx
View File

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

2
src/servers/ServersDropdown.tsx
View File

@ -15,7 +15,7 @@ const ServersDropdown = (serversExporter: ServersExporter) => ({ servers, select
const serversList = values(servers); const serversList = values(servers);
const createServerItem = ( const createServerItem = (
<DropdownItem tag={Link} to="/server/create"> <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> </DropdownItem>
); );

2
test/common/Home.test.tsx
View File

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

2
test/servers/ServersDropdown.test.tsx
View File

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