Improved welcome screen

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 = {