Merge pull request #356 from acelaya-forks/feature/welcome-ui

Feature/welcome UI

CHANGELOG.md

@@ -19,6 +19,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
     * Date filtering can be now selected through relative times (last 7 days, last 30 days, etc) or absolute dates using date pickers.
     * Only the visits for last 30 days are loaded by default. You can change that at any moment if required.
 
+* [#355](https://github.com/shlinkio/shlink-web-client/issues/355) Improved home page, fixing also its scrolling behavior for mobile devices.
+
 ### Changed
 * [#267](https://github.com/shlinkio/shlink-web-client/issues/267) Added some subtle but important improvements on UI/UX.
 * [#352](https://github.com/shlinkio/shlink-web-client/issues/352) Moved from Scrutinizer to Codecov as the code coverage backend.

package-lock.json

@@ -23075,9 +23075,9 @@
       "dev": true
     },
     "react-external-link": {
-      "version": "1.1.1",
+      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/react-external-link/-/react-external-link-1.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/react-external-link/-/react-external-link-1.2.0.tgz",
-      "integrity": "sha512-e2WnTWkg81cuqxmDfjOalliAE20+Y/uD+lserN4uuwkwu+ciGLB3BMz4m7GnXh2+TowIi4sLtCL7zr7aDnIaqA=="
+      "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;
+  position: relative;
+  padding-top: 15px;
+
+  @media (min-width: $mdMin) {
+    padding-top: 0;
     height: calc(100vh - #{$headerHeight} - #{($footer-height + $footer-margin)});
-  display: flex;
+  }
-  align-items: center;
+}
-  justify-content: center;
+
-  flex-flow: column;
+.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,12 +17,33 @@ const Home = ({ servers }: HomeProps) => {
 
   return (
     <div className="home">
-      <h1 className="home__title">Welcome to Shlink</h1>
+      <Card className="home__main-card">
-      <ServersListGroup servers={serversList}>
+        <Row noGutters>
-        {hasServers && <span>Please, select a server.</span>}
+          <div className="col-md-5 d-none d-md-block">
-        {!hasServers && <span>Please, <Link to="/server/create">add a server</Link>.</span>}
+            <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/MainHeader.tsx

@@ -6,7 +6,7 @@ import { Collapse, Nav, Navbar, NavbarBrand, NavbarToggler, NavItem, NavLink } f
 import classNames from 'classnames';
 import { RouteComponentProps } from 'react-router';
 import { useToggle } from '../utils/helpers/hooks';
-import shlinkLogo from './shlink-logo-white.png';
+import { ShlinkLogo } from './img/ShlinkLogo';
 import './MainHeader.scss';
 
 const MainHeader = (ServersDropdown: FC) => ({ location }: RouteComponentProps) => {
@@ -21,7 +21,7 @@ const MainHeader = (ServersDropdown: FC) => ({ location }: RouteComponentProps)
   return (
     <Navbar color="primary" dark fixed="top" className="main-header" expand="md">
       <NavbarBrand tag={Link} to="/">
-        <img src={shlinkLogo} alt="Shlink" className="main-header__brand-logo" /> Shlink
+        <ShlinkLogo className="main-header__brand-logo" color="white" /> Shlink
       </NavbarBrand>
 
       <NavbarToggler onClick={toggleOpen}>

src/common/img/ShlinkLogo.tsx

@@ -0,0 +1,25 @@
+import { MAIN_COLOR } from '../../utils/theme';
+
+export interface ShlinkLogoProps {
+  color?: string;
+  className?: string;
+}
+
+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
+        d=" M 23.71 85.08 C 17.22 49.81 49.44 14.86 85.08 18.12 C 118.83 19.21 145.72 53.33 139.45 86.37 C 155.64 102.30 171.32 118.83 187.87 134.36 C 198.32 111.73 208.84 89.12 219.57 66.62 C 226.05 53.84 243.47 48.74 255.73 56.27 C 263.76 62.10 270.34 69.69 277.25 76.75 C 286.28 86.61 285.72 102.89 276.31 112.31 C 223.38 165.37 170.38 218.37 117.35 271.34 C 107.72 280.99 91.01 281.25 81.11 271.86 C 74.39 264.94 66.82 258.69 61.24 250.77 C 53.72 238.52 58.85 221.07 71.64 214.62 C 94.11 203.87 116.72 193.38 139.33 182.91 C 123.81 166.36 107.30 150.68 91.37 134.49 C 60.20 140.28 27.37 116.78 23.71 85.08 Z"
+      />
+      <path
+        d=" M 205.21 201.23 C 225.32 181.36 260.88 181.11 281.14 200.86 C 299.25 218.75 317.37 236.65 335.10 254.93 C 356.73 278.01 352.01 318.70 326.03 336.56 C 320.07 330.47 313.73 324.65 308.12 318.28 C 323.86 309.39 328.76 286.18 316.63 272.39 C 301.73 256.95 286.30 242.03 271.24 226.75 C 264.49 219.65 256.80 212.00 246.37 211.52 C 224.65 208.64 205.52 233.36 214.49 253.58 C 221.09 266.81 234.22 275.12 243.62 286.24 C 240.43 295.96 238.09 306.13 238.29 316.46 C 225.55 304.29 213.16 291.73 200.89 279.09 C 180.97 257.57 183.10 220.45 205.21 201.23 Z"
+      />
+      <path
+        d=" M 273.90 352.07 C 252.28 328.99 256.98 288.31 282.96 270.46 C 288.93 276.54 295.26 282.36 300.88 288.72 C 285.14 297.62 280.23 320.82 292.38 334.61 C 307.27 350.05 322.70 364.96 337.75 380.25 C 344.51 387.35 352.20 395.00 362.64 395.48 C 384.35 398.37 403.49 373.64 394.51 353.42 C 387.92 340.18 374.78 331.88 365.38 320.76 C 368.56 311.04 370.91 300.86 370.71 290.54 C 383.45 302.70 395.84 315.27 408.11 327.91 C 428.03 349.43 425.90 386.55 403.78 405.77 C 383.68 425.64 348.13 425.89 327.86 406.14 C 309.75 388.25 291.60 370.37 273.90 352.07 Z"
+      />
+      <path
+        d=" M 422.11 403.83 C 431.96 394.07 441.60 384.06 451.66 374.51 C 460.90 383.74 471.89 392.70 474.89 406.11 C 480.16 429.97 484.08 454.13 488.76 478.12 C 490.00 483.41 484.47 488.29 479.35 486.63 C 454.66 481.52 429.55 478.12 405.14 471.84 C 393.17 467.97 385.20 457.75 376.55 449.27 C 386.39 439.49 396.13 429.60 406.06 419.91 C 416.37 433.45 435.74 414.00 422.11 403.83 Z"
+      />
+    </g>
+  </svg>
+);

src/servers/Overview.tsx

@@ -1,6 +1,6 @@
 import { FC, useEffect } from 'react';
 import { Card, CardBody, CardHeader, CardText, CardTitle } from 'reactstrap';
-import { Link } from 'react-router-dom';
+import { Link, useHistory } from 'react-router-dom';
 import { ShortUrlsListParams } from '../short-urls/reducers/shortUrlsListParams';
 import { ShortUrlsList as ShortUrlsListState } from '../short-urls/reducers/shortUrlsList';
 import { prettify } from '../utils/helpers/numbers';
@@ -40,6 +40,7 @@ export const Overview = (
   const { loading: loadingTags } = tagsList;
   const { loading: loadingVisits, visitsCount } = visitsOverview;
   const serverId = isServerWithId(selectedServer) ? selectedServer.id : '';
+  const history = useHistory();
 
   useEffect(() => {
     listShortUrls({ itemsPerPage: 5, orderBy: { dateCreated: 'DESC' } });
@@ -95,7 +96,12 @@ export const Overview = (
           <Link className="float-right" to={`/server/${serverId}/list-short-urls/1`}>See all &raquo;</Link>
         </CardHeader>
         <CardBody>
-          <ShortUrlsTable shortUrlsList={shortUrlsList} selectedServer={selectedServer} className="mb-0" />
+          <ShortUrlsTable
+            shortUrlsList={shortUrlsList}
+            selectedServer={selectedServer}
+            className="mb-0"
+            onTagClick={(tag) => history.push(`/server/${serverId}/list-short-urls/1?tag=${tag}`)}
+          />
         </CardBody>
       </Card>
     </>

src/servers/ServersListGroup.scss

@@ -1,7 +1,12 @@
+@import '../utils/base';
 @import '../utils/mixins/vertical-align';
+@import '../utils/mixins/thin-scroll';
 
-.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 +17,29 @@
   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;
+
+    @include thin-scroll();
+  }
+
+  .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">
+    {children && <h5 className="mb-md-3">{children}</h5>}
-      <h5>{children}</h5>
-    </div>
     {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/short-urls/ShortUrlsList.tsx

@@ -87,9 +87,8 @@ const ShortUrlsList = (ShortUrlsTable: FC<ShortUrlsTableProps>) => boundToMercur
         orderByColumn={orderByColumn}
         renderOrderIcon={renderOrderIcon}
         selectedServer={selectedServer}
-        refreshList={refreshList}
-        shortUrlsListParams={shortUrlsListParams}
         shortUrlsList={shortUrlsList}
+        onTagClick={(tag) => refreshList({ tags: [ ...shortUrlsListParams.tags ?? [], tag ] })}
       />
     </>
   );

src/short-urls/ShortUrlsTable.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import { SelectedServer } from '../servers/data';
 import { ShortUrlsList as ShortUrlsListState } from './reducers/shortUrlsList';
 import { ShortUrlsRowProps } from './helpers/ShortUrlsRow';
-import { OrderableFields, ShortUrlsListParams } from './reducers/shortUrlsListParams';
+import { OrderableFields } from './reducers/shortUrlsListParams';
 import './ShortUrlsTable.scss';
 
 export interface ShortUrlsTableProps {
@@ -12,8 +12,7 @@ export interface ShortUrlsTableProps {
   renderOrderIcon?: (column: OrderableFields) => ReactNode;
   shortUrlsList: ShortUrlsListState;
   selectedServer: SelectedServer;
-  refreshList?: Function;
+  onTagClick?: (tag: string) => void;
-  shortUrlsListParams?: ShortUrlsListParams;
   className?: string;
 }
 
@@ -21,8 +20,7 @@ export const ShortUrlsTable = (ShortUrlsRow: FC<ShortUrlsRowProps>) => ({
   orderByColumn,
   renderOrderIcon,
   shortUrlsList,
-  refreshList,
+  onTagClick,
-  shortUrlsListParams,
   selectedServer,
   className,
 }: ShortUrlsTableProps) => {
@@ -54,8 +52,7 @@ export const ShortUrlsTable = (ShortUrlsRow: FC<ShortUrlsRowProps>) => ({
         key={shortUrl.shortUrl}
         shortUrl={shortUrl}
         selectedServer={selectedServer}
-        refreshList={refreshList}
+        onTagClick={onTagClick}
-        shortUrlsListParams={shortUrlsListParams}
       />
     ));
   };

src/short-urls/helpers/ShortUrlsRow.tsx

@@ -5,7 +5,6 @@ import { ExternalLink } from 'react-external-link';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCopy as copyIcon } from '@fortawesome/free-regular-svg-icons';
 import CopyToClipboard from 'react-copy-to-clipboard';
-import { ShortUrlsListParams } from '../reducers/shortUrlsListParams';
 import ColorGenerator from '../../utils/services/ColorGenerator';
 import { StateFlagTimeout } from '../../utils/helpers/hooks';
 import Tag from '../../tags/helpers/Tag';
@@ -16,8 +15,7 @@ import { ShortUrlsRowMenuProps } from './ShortUrlsRowMenu';
 import './ShortUrlsRow.scss';
 
 export interface ShortUrlsRowProps {
-  refreshList?: Function;
+  onTagClick?: (tag: string) => void;
-  shortUrlsListParams?: ShortUrlsListParams;
   selectedServer: SelectedServer;
   shortUrl: ShortUrl;
 }
@@ -26,7 +24,7 @@ const ShortUrlsRow = (
   ShortUrlsRowMenu: FC<ShortUrlsRowMenuProps>,
   colorGenerator: ColorGenerator,
   useStateFlagTimeout: StateFlagTimeout,
-) => ({ shortUrl, selectedServer, refreshList, shortUrlsListParams }: ShortUrlsRowProps) => {
+) => ({ shortUrl, selectedServer, onTagClick }: ShortUrlsRowProps) => {
   const [ copiedToClipboard, setCopiedToClipboard ] = useStateFlagTimeout();
   const [ active, setActive ] = useStateFlagTimeout(false, 500);
   const isFirstRun = useRef(true);
@@ -36,14 +34,12 @@ const ShortUrlsRow = (
       return <i className="indivisible"><small>No tags</small></i>;
     }
 
-    const selectedTags = shortUrlsListParams?.tags ?? [];
-
     return tags.map((tag) => (
       <Tag
         colorGenerator={colorGenerator}
         key={tag}
         text={tag}
-        onClick={() => refreshList?.({ tags: [ ...selectedTags, tag ] })}
+        onClick={() => onTagClick?.(tag)}
       />
     ));
   };

src/utils/mixins/thin-scroll.scss

@@ -0,0 +1,16 @@
+@mixin thin-scroll() {
+  /* Forefox scrollbar */
+  scrollbar-color: rgba(0, 0, 0, .2) #f5f5f5;
+  scrollbar-width: thin;
+
+  /* Chrome webkit scrollbar */
+  &::-webkit-scrollbar {
+    width: 6px;
+    background-color: #f5f5f5;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: rgba(0, 0, 0, .2);
+    border-radius: .5rem;
+  }
+}

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)',
+      backgroundColor: HIGHLIGHTED_COLOR_ALPHA,
-      borderColor: '#F77F28',
+      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'),
+      generateDataset(groupedVisits, 'Visits', MAIN_COLOR),
-      highlightedVisits.length > 0 && generateDataset(groupedHighlighted, highlightedLabel, '#F77F28'),
+      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', () => {
+  it.each([
-    const servers = {
+    [
+      {
         '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(p).toHaveLength(expectedParagraphs);
-    expect(span.text()).toContain('Please, select a server.');
   });
 });

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[]) => {
+  const createComponent = (params: { servers?: ServerWithId[]; withChildren?: boolean; embedded?: boolean }) => {
-    wrapped = shallow(<ServersListGroup servers={servers}>The list of servers</ServersListGroup>);
+    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', () => {
+  it('renders title', () => {
-    const wrapped = createComponent([]);
+    const wrapped = createComponent({});
     const title = wrapped.find('h5');
 
     expect(title).toHaveLength(1);
     expect(title.text()).toEqual('The list of servers');
   });
 
-  it('shows servers list', () => {
+  it('does not render title when children is not provided', () => {
-    const servers = [
+    const wrapped = createComponent({ withChildren: false });
-      Mock.of<ServerWithId>({ name: 'foo', id: '123' }),
+    const title = wrapped.find('h5');
-      Mock.of<ServerWithId>({ name: 'bar', id: '456' }),
-    ];
-    const wrapped = createComponent(servers);
 
-    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/short-urls/helpers/ShortUrlsRow.test.tsx

@@ -43,9 +43,7 @@ describe('<ShortUrlsRow />', () => {
   beforeEach(() => {
     const ShortUrlsRow = createShortUrlsRow(ShortUrlsRowMenu, colorGenerator, useStateFlagTimeout);
 
-    wrapper = shallow(
+    wrapper = shallow(<ShortUrlsRow selectedServer={server} shortUrl={shortUrl} onTagClick={mockFunction} />);
-      <ShortUrlsRow shortUrlsListParams={{}} refreshList={mockFunction} selectedServer={server} shortUrl={shortUrl} />,
-    );
   });
   afterEach(() => wrapper.unmount());
 

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(backgroundColor).toEqual(MAIN_COLOR_ALPHA);
-    expect(borderColor).toEqual('rgba(70, 150, 229, 1)');
+    expect(borderColor).toEqual(MAIN_COLOR);
     expect(legend).toEqual({ display: false });
     expect(legendCallback).toEqual(false);
     expect(scales).toEqual({