Improved welcome screen

package-lock.json

@@ -23075,9 +23075,9 @@
       "dev": true
     },
     "react-external-link": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/react-external-link/-/react-external-link-1.1.1.tgz",
-      "integrity": "sha512-e2WnTWkg81cuqxmDfjOalliAE20+Y/uD+lserN4uuwkwu+ciGLB3BMz4m7GnXh2+TowIi4sLtCL7zr7aDnIaqA=="
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/react-external-link/-/react-external-link-1.2.0.tgz",
+      "integrity": "sha512-6Lm0pD6rxrvZGVrWIWda809cAtrIlM3fDsKh9y5bKEVpOI0FTO2nTnxaqEood8+rw3svHJgpJGN6lZHO69ZTAQ=="
     },
     "react-is": {
       "version": "16.7.0",

package.json

@@ -46,7 +46,7 @@
     "react-copy-to-clipboard": "^5.0.2",
     "react-datepicker": "^3.3.0",
     "react-dom": "^17.0.1",
-    "react-external-link": "^1.1.1",
+    "react-external-link": "^1.2.0",
     "react-leaflet": "^3.0.2",
     "react-moment": "^1.0.0",
     "react-redux": "^7.2.2",

src/common/Home.scss

@@ -1,18 +1,41 @@
 @import '../utils/base';
+@import '../utils/mixins/vertical-align';
 
 .home {
-  text-align: center;
-  height: calc(100vh - #{$headerHeight} - #{($footer-height + $footer-margin)});
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-flow: column;
+  position: relative;
+  padding-top: 15px;
+
+  @media (min-width: $mdMin) {
+    padding-top: 0;
+    height: calc(100vh - #{$headerHeight} - #{($footer-height + $footer-margin)});
+  }
+}
+
+.home__logo {
+  @include vertical-align();
+}
+
+.home__main-card {
+  margin: 0 auto;
+  max-width: 720px;
+
+  @media (min-width: $mdMin) {
+    @include vertical-align();
+  }
 }
 
 .home__title {
+  text-align: center;
   font-size: 1.75rem;
+  margin: 0;
 
   @media (min-width: $mdMin) {
     font-size: 2.2rem;
   }
 }
+
+.home__servers-container {
+  @media (min-width: $mdMin) {
+    border-left: 1px solid rgba(0, 0, 0, .125);
+  }
+}

src/common/Home.tsx

@@ -1,8 +1,11 @@
 import { isEmpty, values } from 'ramda';
 import { Link } from 'react-router-dom';
+import { Card, Row } from 'reactstrap';
+import { ExternalLink } from 'react-external-link';
 import ServersListGroup from '../servers/ServersListGroup';
 import './Home.scss';
 import { ServersMap } from '../servers/data';
+import { ShlinkLogo } from './img/ShlinkLogo';
 
 export interface HomeProps {
   servers: ServersMap;
@@ -14,11 +17,32 @@ const Home = ({ servers }: HomeProps) => {
 
   return (
     <div className="home">
-      <h1 className="home__title">Welcome to Shlink</h1>
-      <ServersListGroup servers={serversList}>
-        {hasServers && <span>Please, select a server.</span>}
-        {!hasServers && <span>Please, <Link to="/server/create">add a server</Link>.</span>}
-      </ServersListGroup>
+      <Card className="home__main-card">
+        <Row noGutters>
+          <div className="col-md-5 d-none d-md-block">
+            <div className="p-4">
+              <ShlinkLogo />
+            </div>
+          </div>
+          <div className="col-md-7 home__servers-container">
+            <div className="p-4">
+              <h1 className="home__title">Welcome!</h1>
+            </div>
+            <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>
+                </div>
+              )}
+            </ServersListGroup>
+          </div>
+        </Row>
+      </Card>
     </div>
   );
 };

src/common/img/ShlinkLogo.tsx

@@ -1,9 +1,11 @@
-interface ShlinkLogoProps {
+import { MAIN_COLOR } from '../../utils/theme';
+
+export interface ShlinkLogoProps {
   color?: string;
   className?: string;
 }
 
-export const ShlinkLogo = ({ color = '#4595e3', className }: ShlinkLogoProps) => (
+export const ShlinkLogo = ({ color = MAIN_COLOR, className }: ShlinkLogoProps) => (
   <svg className={className} viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg">
     <g fill={color}>
       <path

src/servers/ServersListGroup.scss

@@ -1,7 +1,11 @@
+@import '../utils/base';
 @import '../utils/mixins/vertical-align';
 
-.servers-list__list-group {
+.servers-list__list-group.servers-list__list-group {
   width: 100%;
+}
+
+.servers-list__list-group:not(.servers-list__list-group--embedded) {
   max-width: 400px;
   box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
 }
@@ -12,8 +16,27 @@
   padding: .75rem 2.5rem .75rem 1rem;
 }
 
+.servers-list__server-item:hover {
+  background-color: $lightColor;
+}
+
 .servers-list__server-item-icon {
   @include vertical-align();
 
   right: 1rem;
 }
+
+.servers-list__list-group--embedded.servers-list__list-group--embedded {
+  border-radius: 0;
+  border-top: 1px solid rgba(0, 0, 0, .125);
+
+  @media (min-width: $mdMin) {
+    max-height: 220px;
+    overflow-x: auto;
+  }
+
+  .servers-list__server-item {
+    border: none;
+    border-bottom: 1px solid rgba(0, 0, 0, .125);
+  }
+}

src/servers/ServersListGroup.tsx

@@ -1,6 +1,7 @@
 import { FC } from 'react';
 import { ListGroup, ListGroupItem } from 'reactstrap';
 import { Link } from 'react-router-dom';
+import classNames from 'classnames';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faChevronRight as chevronIcon } from '@fortawesome/free-solid-svg-icons';
 import { ServerWithId } from './data';
@@ -8,6 +9,7 @@ import './ServersListGroup.scss';
 
 interface ServersListGroup {
   servers: ServerWithId[];
+  embedded?: boolean;
 }
 
 const ServerListItem = ({ id, name }: { id: string; name: string }) => (
@@ -17,13 +19,13 @@ const ServerListItem = ({ id, name }: { id: string; name: string }) => (
   </ListGroupItem>
 );
 
-const ServersListGroup: FC<ServersListGroup> = ({ servers, children }) => (
+const ServersListGroup: FC<ServersListGroup> = ({ servers, children, embedded = false }) => (
   <>
-    <div className="container">
-      <h5>{children}</h5>
-    </div>
+    {children && <h5 className="mb-md-3">{children}</h5>}
     {servers.length > 0 && (
-      <ListGroup className="servers-list__list-group mt-md-3">
+      <ListGroup
+        className={classNames('servers-list__list-group', { 'servers-list__list-group--embedded': embedded })}
+      >
         {servers.map(({ id, name }) => <ServerListItem key={id} id={id} name={name} />)}
       </ListGroup>
     )}

src/utils/theme/index.ts

@@ -0,0 +1,7 @@
+export const MAIN_COLOR = '#4696e5';
+
+export const MAIN_COLOR_ALPHA = 'rgba(70, 150, 229, 0.4)';
+
+export const HIGHLIGHTED_COLOR = '#F77F28';
+
+export const HIGHLIGHTED_COLOR_ALPHA = 'rgba(247, 127, 40, 0.4)';

src/visits/helpers/DefaultChart.tsx

@@ -7,6 +7,7 @@ import { fillTheGaps } from '../../utils/helpers/visits';
 import { Stats } from '../types';
 import { prettify } from '../../utils/helpers/numbers';
 import { pointerOnHover, renderDoughnutChartLabel, renderNonDoughnutChartLabel } from '../../utils/helpers/charts';
+import { HIGHLIGHTED_COLOR, HIGHLIGHTED_COLOR_ALPHA, MAIN_COLOR, MAIN_COLOR_ALPHA } from '../../utils/theme';
 import './DefaultChart.scss';
 
 export interface DefaultChartProps {
@@ -33,7 +34,7 @@ const generateGraphData = (
       title,
       label: highlightedData ? 'Non-selected' : 'Visits',
       data,
-      backgroundColor: isBarChart ? 'rgba(70, 150, 229, 0.4)' : [
+      backgroundColor: isBarChart ? MAIN_COLOR_ALPHA : [
         '#97BBCD',
         '#F7464A',
         '#46BFBD',
@@ -46,15 +47,15 @@ const generateGraphData = (
         '#DCDCDC',
         '#463730',
       ],
-      borderColor: isBarChart ? 'rgba(70, 150, 229, 1)' : 'white',
+      borderColor: isBarChart ? MAIN_COLOR : 'white',
       borderWidth: 2,
     },
     highlightedData && {
       title,
       label: highlightedLabel ?? 'Selected',
       data: highlightedData,
-      backgroundColor: 'rgba(247, 127, 40, 0.4)',
-      borderColor: '#F77F28',
+      backgroundColor: HIGHLIGHTED_COLOR_ALPHA,
+      borderColor: HIGHLIGHTED_COLOR,
       borderWidth: 2,
     },
   ].filter(Boolean) as ChartDataSets[],

src/visits/helpers/LineChartCard.tsx

@@ -19,6 +19,7 @@ import { rangeOf } from '../../utils/utils';
 import ToggleSwitch from '../../utils/ToggleSwitch';
 import { prettify } from '../../utils/helpers/numbers';
 import { pointerOnHover, renderNonDoughnutChartLabel } from '../../utils/helpers/charts';
+import { HIGHLIGHTED_COLOR, MAIN_COLOR } from '../../utils/theme';
 import './LineChartCard.scss';
 
 interface LineChartCardProps {
@@ -173,8 +174,8 @@ const LineChartCard = (
   const data: ChartData = {
     labels,
     datasets: [
-      generateDataset(groupedVisits, 'Visits', '#4696e5'),
-      highlightedVisits.length > 0 && generateDataset(groupedHighlighted, highlightedLabel, '#F77F28'),
+      generateDataset(groupedVisits, 'Visits', MAIN_COLOR),
+      highlightedVisits.length > 0 && generateDataset(groupedHighlighted, highlightedLabel, HIGHLIGHTED_COLOR),
     ].filter(Boolean) as ChartDataSets[],
   };
   const options: ChartOptions = {

test/common/Home.test.tsx

@@ -2,6 +2,7 @@ import { shallow, ShallowWrapper } from 'enzyme';
 import { Mock } from 'ts-mockery';
 import Home, { HomeProps } from '../../src/common/Home';
 import { ServerWithId } from '../../src/servers/data';
+import { ShlinkLogo } from '../../src/common/img/ShlinkLogo';
 
 describe('<Home />', () => {
   let wrapped: ShallowWrapper;
@@ -19,21 +20,26 @@ describe('<Home />', () => {
 
   afterEach(() => wrapped?.unmount());
 
-  it('shows link to create server when no servers exist', () => {
+  it('renders logo and title', () => {
     const wrapped = createComponent();
 
-    expect(wrapped.find('Link')).toHaveLength(1);
+    expect(wrapped.find(ShlinkLogo)).toHaveLength(1);
+    expect(wrapped.find('.home__title')).toHaveLength(1);
   });
 
-  it('asks to select a server when servers exist', () => {
-    const servers = {
-      '1a': Mock.of<ServerWithId>({ name: 'foo', id: '1' }),
-      '2b': Mock.of<ServerWithId>({ name: 'bar', id: '2' }),
-    };
+  it.each([
+    [
+      {
+        '1a': Mock.of<ServerWithId>({ name: 'foo', id: '1' }),
+        '2b': Mock.of<ServerWithId>({ name: 'bar', id: '2' }),
+      },
+      0,
+    ],
+    [{}, 3 ],
+  ])('shows link to create or set-up server only when no servers exist', (servers, expectedParagraphs) => {
     const wrapped = createComponent({ servers });
-    const span = wrapped.find('span');
+    const p = wrapped.find('p');
 
-    expect(span).toHaveLength(1);
-    expect(span.text()).toContain('Please, select a server.');
+    expect(p).toHaveLength(expectedParagraphs);
   });
 });

test/common/img/ShlinkLogo.test.tsx

@@ -0,0 +1,34 @@
+import { shallow, ShallowWrapper } from 'enzyme';
+import { ShlinkLogo, ShlinkLogoProps } from '../../../src/common/img/ShlinkLogo';
+import { MAIN_COLOR } from '../../../src/utils/theme';
+
+describe('<ShlinkLogo />', () => {
+  let wrapper: ShallowWrapper;
+  const createWrapper = (props: ShlinkLogoProps) => {
+    wrapper = shallow(<ShlinkLogo {...props} />);
+
+    return wrapper;
+  };
+
+  afterEach(() => wrapper?.unmount());
+
+  it.each([
+    [ undefined, MAIN_COLOR ],
+    [ 'red', 'red' ],
+    [ 'white', 'white' ],
+  ])('renders expected color', (color, expectedColor) => {
+    const wrapper = createWrapper({ color });
+
+    expect(wrapper.find('g').prop('fill')).toEqual(expectedColor);
+  });
+
+  it.each([
+    [ undefined, undefined ],
+    [ 'foo', 'foo' ],
+    [ 'bar', 'bar' ],
+  ])('renders expected class', (className, expectedClassName) => {
+    const wrapper = createWrapper({ className });
+
+    expect(wrapper.prop('className')).toEqual(expectedClassName);
+  });
+});

test/servers/ServersListGroup.test.tsx

@@ -5,31 +5,58 @@ import ServersListGroup from '../../src/servers/ServersListGroup';
 import { ServerWithId } from '../../src/servers/data';
 
 describe('<ServersListGroup />', () => {
+  const servers = [
+    Mock.of<ServerWithId>({ name: 'foo', id: '123' }),
+    Mock.of<ServerWithId>({ name: 'bar', id: '456' }),
+  ];
   let wrapped: ShallowWrapper;
-  const createComponent = (servers: ServerWithId[]) => {
-    wrapped = shallow(<ServersListGroup servers={servers}>The list of servers</ServersListGroup>);
+  const createComponent = (params: { servers?: ServerWithId[]; withChildren?: boolean; embedded?: boolean }) => {
+    const { servers = [], withChildren = true, embedded } = params;
+
+    wrapped = shallow(
+      <ServersListGroup servers={servers} embedded={embedded}>
+        {withChildren ? 'The list of servers' : undefined}
+      </ServersListGroup>,
+    );
 
     return wrapped;
   };
 
   afterEach(() => wrapped?.unmount());
 
-  it('Renders title', () => {
-    const wrapped = createComponent([]);
+  it('renders title', () => {
+    const wrapped = createComponent({});
     const title = wrapped.find('h5');
 
     expect(title).toHaveLength(1);
     expect(title.text()).toEqual('The list of servers');
   });
 
-  it('shows servers list', () => {
-    const servers = [
-      Mock.of<ServerWithId>({ name: 'foo', id: '123' }),
-      Mock.of<ServerWithId>({ name: 'bar', id: '456' }),
-    ];
-    const wrapped = createComponent(servers);
+  it('does not render title when children is not provided', () => {
+    const wrapped = createComponent({ withChildren: false });
+    const title = wrapped.find('h5');
 
-    expect(wrapped.find(ListGroup)).toHaveLength(1);
+    expect(title).toHaveLength(0);
+  });
+
+  it.each([
+    [ servers ],
+    [[]],
+  ])('shows servers list', (servers) => {
+    const wrapped = createComponent({ servers });
+
+    expect(wrapped.find(ListGroup)).toHaveLength(servers.length ? 1 : 0);
     expect(wrapped.find('ServerListItem')).toHaveLength(servers.length);
   });
+
+  it.each([
+    [ true, 'servers-list__list-group servers-list__list-group--embedded' ],
+    [ false, 'servers-list__list-group' ],
+    [ undefined, 'servers-list__list-group' ],
+  ])('renders proper classes for embedded', (embedded, expectedClasses) => {
+    const wrapped = createComponent({ servers, embedded });
+    const listGroup = wrapped.find(ListGroup);
+
+    expect(listGroup.prop('className')).toEqual(expectedClasses);
+  });
 });

test/visits/helpers/DefaultChart.test.tsx

@@ -3,6 +3,7 @@ import { Doughnut, HorizontalBar } from 'react-chartjs-2';
 import { keys, values } from 'ramda';
 import DefaultChart from '../../../src/visits/helpers/DefaultChart';
 import { prettify } from '../../../src/utils/helpers/numbers';
+import { MAIN_COLOR, MAIN_COLOR_ALPHA } from '../../../src/utils/theme';
 
 describe('<DefaultChart />', () => {
   let wrapper: ShallowWrapper;
@@ -62,8 +63,8 @@ describe('<DefaultChart />', () => {
     const { datasets: [{ backgroundColor, borderColor }] } = horizontal.prop('data') as any;
     const { legend, legendCallback, scales } = horizontal.prop('options') ?? {};
 
-    expect(backgroundColor).toEqual('rgba(70, 150, 229, 0.4)');
-    expect(borderColor).toEqual('rgba(70, 150, 229, 1)');
+    expect(backgroundColor).toEqual(MAIN_COLOR_ALPHA);
+    expect(borderColor).toEqual(MAIN_COLOR);
     expect(legend).toEqual({ display: false });
     expect(legendCallback).toEqual(false);
     expect(scales).toEqual({