From 143a05cab12afbb6d7313b0a3c1483c002fafb82 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Sat, 12 Dec 2020 10:56:10 +0100
Subject: [PATCH 1/7] Restyled cards, background and shadows

---
 src/common/AsideMenu.scss         |  3 ++-
 src/index.scss                    | 13 +++++++++++++
 src/servers/Overview.tsx          |  6 +++---
 src/servers/ServersListGroup.scss |  1 +
 src/short-urls/Paginator.scss     |  2 +-
 src/short-urls/ShortUrls.tsx      |  5 +++--
 src/short-urls/ShortUrlsTable.tsx |  2 +-
 src/tags/TagCard.scss             |  4 ----
 src/utils/Message.tsx             |  2 +-
 src/visits/VisitsHeader.tsx       |  2 +-
 10 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/src/common/AsideMenu.scss b/src/common/AsideMenu.scss
index dda916e9..af1935b7 100644
--- a/src/common/AsideMenu.scss
+++ b/src/common/AsideMenu.scss
@@ -4,7 +4,8 @@
 $asideMenuMobileWidth: 280px;
 
 .aside-menu {
-  background-color: #f7f7f7;
+  background-color: white;
+  box-shadow: rgba(0, 0, 0, .05) 0 8px 15px;
   position: fixed !important;
   padding-top: 13px;
   padding-bottom: 10px;
diff --git a/src/index.scss b/src/index.scss
index aa734ab8..c7973396 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -6,6 +6,7 @@ html,
 body,
 #root {
   height: 100%;
+  background: #f5f6fe;
 }
 
 * {
@@ -16,6 +17,18 @@ body,
   background-color: $mainColor !important;
 }
 
+.card {
+  box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
+}
+
+.card-header {
+  background-color: white;
+}
+
+.card-footer {
+  background-color: rgba(255, 255, 255, .5);
+}
+
 .dropdown-item:not(:disabled) {
   cursor: pointer;
 }
diff --git a/src/servers/Overview.tsx b/src/servers/Overview.tsx
index d3726638..a209693b 100644
--- a/src/servers/Overview.tsx
+++ b/src/servers/Overview.tsx
@@ -49,13 +49,13 @@ export const Overview = (
     <>
       <div className="row mb-3">
         <div className="col-sm-4">
-          <Card className="overview__card mb-2" body color="light">
+          <Card className="overview__card mb-2" body>
             <CardTitle tag="h5" className="overview__card-title">Visits</CardTitle>
             <CardText tag="h2">{loadingVisits ? 'Loading...' : prettify(visitsCount)}</CardText>
           </Card>
         </div>
         <div className="col-sm-4">
-          <Card className="overview__card mb-2" body color="light">
+          <Card className="overview__card mb-2" body>
             <CardTitle tag="h5" className="overview__card-title">Short URLs</CardTitle>
             <CardText tag="h2">
               {loading ? 'Loading...' : prettify(shortUrls?.pagination.totalItems ?? 0)}
@@ -63,7 +63,7 @@ export const Overview = (
           </Card>
         </div>
         <div className="col-sm-4">
-          <Card className="overview__card mb-2" body color="light">
+          <Card className="overview__card mb-2" body>
             <CardTitle tag="h5" className="overview__card-title">Tags</CardTitle>
             <CardText tag="h2">{loadingTags ? 'Loading...' : prettify(tagsList.tags.length)}</CardText>
           </Card>
diff --git a/src/servers/ServersListGroup.scss b/src/servers/ServersListGroup.scss
index 9f869468..478fb19d 100644
--- a/src/servers/ServersListGroup.scss
+++ b/src/servers/ServersListGroup.scss
@@ -3,6 +3,7 @@
 .servers-list__list-group {
   width: 100%;
   max-width: 400px;
+  box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
 }
 
 .servers-list__server-item.servers-list__server-item {
diff --git a/src/short-urls/Paginator.scss b/src/short-urls/Paginator.scss
index 0e8142e2..03b784d0 100644
--- a/src/short-urls/Paginator.scss
+++ b/src/short-urls/Paginator.scss
@@ -1,7 +1,7 @@
 .short-urls-paginator {
   position: sticky;
   bottom: 0;
-  background-color: rgba(white, .8);
+  background-color: rgba(255, 255, 255, .5);
   padding: .75rem 0;
   border-top: 1px solid rgba(black, .125);
 }
diff --git a/src/short-urls/ShortUrls.tsx b/src/short-urls/ShortUrls.tsx
index 0b86f35d..d6dea6bc 100644
--- a/src/short-urls/ShortUrls.tsx
+++ b/src/short-urls/ShortUrls.tsx
@@ -1,4 +1,5 @@
 import { FC, useEffect, useState } from 'react';
+import { Card } from 'reactstrap';
 import Paginator from './Paginator';
 import { ShortUrlsListProps } from './ShortUrlsList';
 
@@ -17,10 +18,10 @@ const ShortUrls = (SearchBar: FC, ShortUrlsList: FC<ShortUrlsListProps>) => (pro
   return (
     <>
       <div className="form-group"><SearchBar /></div>
-      <div>
+      <Card body className="pb-1">
         <ShortUrlsList {...props} key={urlsListKey} />
         <Paginator paginator={pagination} serverId={serverId} />
-      </div>
+      </Card>
     </>
   );
 };
diff --git a/src/short-urls/ShortUrlsTable.tsx b/src/short-urls/ShortUrlsTable.tsx
index 2c799020..c1a1fb77 100644
--- a/src/short-urls/ShortUrlsTable.tsx
+++ b/src/short-urls/ShortUrlsTable.tsx
@@ -30,7 +30,7 @@ export const ShortUrlsTable = (ShortUrlsRow: FC<ShortUrlsRowProps>) => ({
   const orderableColumnsClasses = classNames('short-urls-table__header-cell', {
     'short-urls-table__header-cell--with-action': !!orderByColumn,
   });
-  const tableClasses = classNames('table table-striped table-hover', className);
+  const tableClasses = classNames('table table-hover', className);
 
   const renderShortUrls = () => {
     if (error) {
diff --git a/src/tags/TagCard.scss b/src/tags/TagCard.scss
index 4bff8b45..ce6849aa 100644
--- a/src/tags/TagCard.scss
+++ b/src/tags/TagCard.scss
@@ -2,10 +2,6 @@
   margin-bottom: .5rem;
 }
 
-.tag-card__header.tag-card__header {
-  background-color: #eeeeee;
-}
-
 .tag-card__header.tag-card__header,
 .tag-card__body.tag-card__body {
   padding: .75rem;
diff --git a/src/utils/Message.tsx b/src/utils/Message.tsx
index cc7c71da..5a452045 100644
--- a/src/utils/Message.tsx
+++ b/src/utils/Message.tsx
@@ -30,7 +30,7 @@ interface MessageProps {
 }
 
 const Message: FC<MessageProps> = ({ children, loading = false, noMargin = false, type = 'default' }) => {
-  const cardClasses = classNames('bg-light', getClassForType(type), { 'mt-4': !noMargin });
+  const cardClasses = classNames(getClassForType(type), { 'mt-4': !noMargin });
 
   return (
     <div className="col-md-10 offset-md-1">
diff --git a/src/visits/VisitsHeader.tsx b/src/visits/VisitsHeader.tsx
index 102a62f4..29e531aa 100644
--- a/src/visits/VisitsHeader.tsx
+++ b/src/visits/VisitsHeader.tsx
@@ -15,7 +15,7 @@ interface VisitsHeaderProps {
 
 const VisitsHeader: FC<VisitsHeaderProps> = ({ visits, goBack, shortUrl, children, title }) => (
   <header>
-    <Card className="bg-light" body>
+    <Card body>
       <h2 className="d-flex justify-content-between align-items-center mb-0">
         <Button color="link" size="lg" className="p-0 mr-3" onClick={goBack}>
           <FontAwesomeIcon icon={faArrowLeft} />

From 1e460d3ef760fd715ad3950761ded388b94baf77 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Sat, 12 Dec 2020 11:07:05 +0100
Subject: [PATCH 2/7] Updated edit URL modal to be large

---
 src/short-urls/helpers/EditShortUrlModal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/short-urls/helpers/EditShortUrlModal.tsx b/src/short-urls/helpers/EditShortUrlModal.tsx
index 868512d8..019ad5bc 100644
--- a/src/short-urls/helpers/EditShortUrlModal.tsx
+++ b/src/short-urls/helpers/EditShortUrlModal.tsx
@@ -18,7 +18,7 @@ const EditShortUrlModal = ({ isOpen, toggle, shortUrl, shortUrlEdition, editShor
   const doEdit = async () => editShortUrl(shortUrl.shortCode, shortUrl.domain, longUrl).then(toggle);
 
   return (
-    <Modal isOpen={isOpen} toggle={toggle} centered>
+    <Modal isOpen={isOpen} toggle={toggle} centered size="lg">
       <ModalHeader toggle={toggle}>
         Edit long URL for <ExternalLink href={url} />
       </ModalHeader>

From bc82e7e7fdbbaee35d3603fec8c2d44dbb6d1f4c Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Sat, 12 Dec 2020 11:11:36 +0100
Subject: [PATCH 3/7] Fixed colors in visits table

---
 src/visits/VisitsTable.scss | 1 +
 src/visits/VisitsTable.tsx  | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/visits/VisitsTable.scss b/src/visits/VisitsTable.scss
index 5634d3c6..54418ddf 100644
--- a/src/visits/VisitsTable.scss
+++ b/src/visits/VisitsTable.scss
@@ -4,6 +4,7 @@
 .visits-table {
   margin: 1.5rem 0 0;
   position: relative;
+  background-color: white;
 }
 
 .visits-table__header-cell {
diff --git a/src/visits/VisitsTable.tsx b/src/visits/VisitsTable.tsx
index 61c7c53c..03985b8f 100644
--- a/src/visits/VisitsTable.tsx
+++ b/src/visits/VisitsTable.tsx
@@ -95,7 +95,7 @@ const VisitsTable = ({
   }, [ searchTerm ]);
 
   return (
-    <table className="table table-striped table-bordered table-hover table-sm table-responsive-sm visits-table">
+    <table className="table table-bordered table-hover table-sm table-responsive-sm visits-table">
       <thead className="visits-table__header">
         <tr>
           <th

From d62edb2249797e26026eccfab5ac514e438d05f8 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Sat, 12 Dec 2020 11:29:15 +0100
Subject: [PATCH 4/7] Moved 'add server' button inside servers dropdown

---
 src/common/MainHeader.tsx             | 10 ++--------
 src/servers/ServersDropdown.tsx       | 16 +++++++++++++---
 test/servers/ServersDropdown.test.tsx | 10 +++++-----
 3 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/src/common/MainHeader.tsx b/src/common/MainHeader.tsx
index 54faa970..be06d9d0 100644
--- a/src/common/MainHeader.tsx
+++ b/src/common/MainHeader.tsx
@@ -1,4 +1,4 @@
-import { faPlus as plusIcon, faChevronDown as arrowIcon, faCogs as cogsIcon } from '@fortawesome/free-solid-svg-icons';
+import { faChevronDown as arrowIcon, faCogs as cogsIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { FC, useEffect } from 'react';
 import { Link } from 'react-router-dom';
@@ -15,7 +15,6 @@ const MainHeader = (ServersDropdown: FC) => ({ location }: RouteComponentProps)
 
   useEffect(close, [ location ]);
 
-  const createServerPath = '/server/create';
   const settingsPath = '/settings';
   const toggleClass = classNames('main-header__toggle-icon', { 'main-header__toggle-icon--opened': isOpen });
 
@@ -32,15 +31,10 @@ const MainHeader = (ServersDropdown: FC) => ({ location }: RouteComponentProps)
       <Collapse navbar isOpen={isOpen}>
         <Nav navbar className="ml-auto">
           <NavItem>
-            <NavLink tag={Link} to={settingsPath} active={pathname === settingsPath}>
+            <NavLink tag={Link} to={'/settings'} active={pathname === settingsPath}>
               <FontAwesomeIcon icon={cogsIcon} />&nbsp; Settings
             </NavLink>
           </NavItem>
-          <NavItem>
-            <NavLink tag={Link} to={createServerPath} active={pathname === createServerPath}>
-              <FontAwesomeIcon icon={plusIcon} />&nbsp; Add server
-            </NavLink>
-          </NavItem>
           <ServersDropdown />
         </Nav>
       </Collapse>
diff --git a/src/servers/ServersDropdown.tsx b/src/servers/ServersDropdown.tsx
index a787c467..81045e42 100644
--- a/src/servers/ServersDropdown.tsx
+++ b/src/servers/ServersDropdown.tsx
@@ -1,6 +1,8 @@
 import { isEmpty, values } from 'ramda';
 import { DropdownItem, DropdownMenu, DropdownToggle, UncontrolledDropdown } from 'reactstrap';
 import { Link } from 'react-router-dom';
+import { faPlus as plusIcon, faFileDownload as exportIcon, faServer as serverIcon } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import ServersExporter from './services/ServersExporter';
 import { isServerWithId, SelectedServer, ServersMap } from './data';
 
@@ -11,10 +13,15 @@ export interface ServersDropdownProps {
 
 const ServersDropdown = (serversExporter: ServersExporter) => ({ servers, selectedServer }: ServersDropdownProps) => {
   const serversList = values(servers);
+  const createServerItem = (
+    <DropdownItem tag={Link} to="/server/create">
+      <FontAwesomeIcon icon={plusIcon} /> <span className="ml-1">Add server</span>
+    </DropdownItem>
+  );
 
   const renderServers = () => {
     if (isEmpty(serversList)) {
-      return <DropdownItem disabled><i>Add a server first...</i></DropdownItem>;
+      return createServerItem;
     }
 
     return (
@@ -30,8 +37,9 @@ const ServersDropdown = (serversExporter: ServersExporter) => ({ servers, select
           </DropdownItem>
         ))}
         <DropdownItem divider />
+        {createServerItem}
         <DropdownItem className="servers-dropdown__export-item" onClick={async () => serversExporter.exportServers()}>
-          Export servers
+          <FontAwesomeIcon icon={exportIcon} /> <span className="ml-1">Export servers</span>
         </DropdownItem>
       </>
     );
@@ -39,7 +47,9 @@ const ServersDropdown = (serversExporter: ServersExporter) => ({ servers, select
 
   return (
     <UncontrolledDropdown nav inNavbar>
-      <DropdownToggle nav caret>Servers</DropdownToggle>
+      <DropdownToggle nav caret>
+        <FontAwesomeIcon icon={serverIcon} /> <span className="ml-1">Servers</span>
+      </DropdownToggle>
       <DropdownMenu right>{renderServers()}</DropdownMenu>
     </UncontrolledDropdown>
   );
diff --git a/test/servers/ServersDropdown.test.tsx b/test/servers/ServersDropdown.test.tsx
index 9d7f285a..acc2eb45 100644
--- a/test/servers/ServersDropdown.test.tsx
+++ b/test/servers/ServersDropdown.test.tsx
@@ -22,8 +22,8 @@ describe('<ServersDropdown />', () => {
   });
   afterEach(() => wrapped.unmount());
 
-  it('contains the list of servers, the divider and the export button', () =>
-    expect(wrapped.find(DropdownItem)).toHaveLength(values(servers).length + 2));
+  it('contains the list of servers, the divider, the create button and the export button', () =>
+    expect(wrapped.find(DropdownItem)).toHaveLength(values(servers).length + 3));
 
   it('contains a toggle with proper title', () =>
     expect(wrapped.find(DropdownToggle)).toHaveLength(1));
@@ -35,14 +35,14 @@ describe('<ServersDropdown />', () => {
     expect(items.filter('.servers-dropdown__export-item')).toHaveLength(1);
   });
 
-  it('shows a message when no servers exist yet', () => {
+  it('shows only create link when no servers exist yet', () => {
     wrapped = shallow(
       <ServersDropdown servers={{}} selectedServer={null} />,
     );
     const item = wrapped.find(DropdownItem);
 
     expect(item).toHaveLength(1);
-    expect(item.prop('disabled')).toEqual(true);
-    expect(item.find('i').text()).toEqual('Add a server first...');
+    expect(item.prop('to')).toEqual('/server/create');
+    expect(item.find('span').text()).toContain('Add server');
   });
 });

From 4d969b994e02625912a37c95349364445e4c7507 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Sat, 12 Dec 2020 11:43:16 +0100
Subject: [PATCH 5/7] Improved server form

---
 src/servers/CreateServer.tsx             |  2 +-
 src/servers/EditServer.tsx               |  6 ++++-
 src/servers/helpers/ServerForm.scss      |  3 +++
 src/servers/helpers/ServerForm.tsx       | 19 +++++++++------
 src/utils/FormGroupContainer.tsx         | 29 ++++++++++++++++++++++
 src/utils/HorizontalFormGroup.tsx        | 31 ------------------------
 src/utils/SimpleCard.tsx                 |  5 ++--
 test/servers/helpers/ServerForm.test.tsx |  4 +--
 8 files changed, 55 insertions(+), 44 deletions(-)
 create mode 100644 src/servers/helpers/ServerForm.scss
 create mode 100644 src/utils/FormGroupContainer.tsx
 delete mode 100644 src/utils/HorizontalFormGroup.tsx

diff --git a/src/servers/CreateServer.tsx b/src/servers/CreateServer.tsx
index ab0e2d5c..7181344b 100644
--- a/src/servers/CreateServer.tsx
+++ b/src/servers/CreateServer.tsx
@@ -44,7 +44,7 @@ const CreateServer = (ImportServersBtn: FC<ImportServersBtnProps>, useStateFlagT
 
   return (
     <NoMenuLayout>
-      <ServerForm onSubmit={handleSubmit}>
+      <ServerForm title={<h5 className="mb-0">Add new server</h5>} onSubmit={handleSubmit}>
         <ImportServersBtn onImport={setServersImported} onImportError={setErrorImporting} />
         <button className="btn btn-outline-primary">Create server</button>
       </ServerForm>
diff --git a/src/servers/EditServer.tsx b/src/servers/EditServer.tsx
index d8871748..40c52c68 100644
--- a/src/servers/EditServer.tsx
+++ b/src/servers/EditServer.tsx
@@ -23,7 +23,11 @@ export const EditServer = (ServerError: FC) => withSelectedServer<EditServerProp
 
   return (
     <NoMenuLayout>
-      <ServerForm initialValues={selectedServer} onSubmit={handleSubmit}>
+      <ServerForm
+        title={<h5 className="mb-0">Edit "{selectedServer.name}"</h5>}
+        initialValues={selectedServer}
+        onSubmit={handleSubmit}
+      >
         <Button outline className="mr-2" onClick={goBack}>Cancel</Button>
         <Button outline color="primary">Save</Button>
       </ServerForm>
diff --git a/src/servers/helpers/ServerForm.scss b/src/servers/helpers/ServerForm.scss
new file mode 100644
index 00000000..97b1ae22
--- /dev/null
+++ b/src/servers/helpers/ServerForm.scss
@@ -0,0 +1,3 @@
+.server-form .form-group:last-child {
+  margin-bottom: 0;
+}
diff --git a/src/servers/helpers/ServerForm.tsx b/src/servers/helpers/ServerForm.tsx
index 8836772f..d0d7bf66 100644
--- a/src/servers/helpers/ServerForm.tsx
+++ b/src/servers/helpers/ServerForm.tsx
@@ -1,14 +1,17 @@
-import { FC, useEffect, useState } from 'react';
-import { HorizontalFormGroup } from '../../utils/HorizontalFormGroup';
+import { FC, ReactNode, useEffect, useState } from 'react';
+import { FormGroupContainer } from '../../utils/FormGroupContainer';
 import { handleEventPreventingDefault } from '../../utils/utils';
 import { ServerData } from '../data';
+import { SimpleCard } from '../../utils/SimpleCard';
+import './ServerForm.scss';
 
 interface ServerFormProps {
   onSubmit: (server: ServerData) => void;
   initialValues?: ServerData;
+  title?: ReactNode;
 }
 
-export const ServerForm: FC<ServerFormProps> = ({ onSubmit, initialValues, children }) => {
+export const ServerForm: FC<ServerFormProps> = ({ onSubmit, initialValues, children, title }) => {
   const [ name, setName ] = useState('');
   const [ url, setUrl ] = useState('');
   const [ apiKey, setApiKey ] = useState('');
@@ -21,10 +24,12 @@ export const ServerForm: FC<ServerFormProps> = ({ onSubmit, initialValues, child
   }, [ initialValues ]);
 
   return (
-    <form onSubmit={handleSubmit}>
-      <HorizontalFormGroup value={name} onChange={setName}>Name</HorizontalFormGroup>
-      <HorizontalFormGroup type="url" value={url} onChange={setUrl}>URL</HorizontalFormGroup>
-      <HorizontalFormGroup value={apiKey} onChange={setApiKey}>API key</HorizontalFormGroup>
+    <form className="server-form" onSubmit={handleSubmit}>
+      <SimpleCard className="mb-4" title={title}>
+        <FormGroupContainer value={name} onChange={setName}>Name</FormGroupContainer>
+        <FormGroupContainer type="url" value={url} onChange={setUrl}>URL</FormGroupContainer>
+        <FormGroupContainer value={apiKey} onChange={setApiKey}>API key</FormGroupContainer>
+      </SimpleCard>
 
       <div className="text-right">{children}</div>
     </form>
diff --git a/src/utils/FormGroupContainer.tsx b/src/utils/FormGroupContainer.tsx
new file mode 100644
index 00000000..9c182291
--- /dev/null
+++ b/src/utils/FormGroupContainer.tsx
@@ -0,0 +1,29 @@
+import { FC } from 'react';
+import { v4 as uuid } from 'uuid';
+import { InputType } from 'reactstrap/lib/Input';
+
+interface FormGroupContainer {
+  value: string;
+  onChange: (newValue: string) => void;
+  id?: string;
+  type?: InputType;
+  required?: boolean;
+}
+
+export const FormGroupContainer: FC<FormGroupContainer> = (
+  { children, value, onChange, id = uuid(), type = 'text', required = true },
+) => (
+  <div className="form-group">
+    <label htmlFor={id} className="create-server__label">
+      {children}:
+    </label>
+    <input
+      className="form-control"
+      type={type}
+      id={id}
+      value={value}
+      required={required}
+      onChange={(e) => onChange(e.target.value)}
+    />
+  </div>
+);
diff --git a/src/utils/HorizontalFormGroup.tsx b/src/utils/HorizontalFormGroup.tsx
deleted file mode 100644
index b46a5d1a..00000000
--- a/src/utils/HorizontalFormGroup.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { FC } from 'react';
-import { v4 as uuid } from 'uuid';
-import { InputType } from 'reactstrap/lib/Input';
-
-interface HorizontalFormGroupProps {
-  value: string;
-  onChange: (newValue: string) => void;
-  id?: string;
-  type?: InputType;
-  required?: boolean;
-}
-
-export const HorizontalFormGroup: FC<HorizontalFormGroupProps> = (
-  { children, value, onChange, id = uuid(), type = 'text', required = true },
-) => (
-  <div className="form-group row">
-    <label htmlFor={id} className="col-lg-1 col-md-2 col-form-label create-server__label">
-      {children}:
-    </label>
-    <div className="col-lg-11 col-md-10">
-      <input
-        className="form-control"
-        type={type}
-        id={id}
-        value={value}
-        required={required}
-        onChange={(e) => onChange(e.target.value)}
-      />
-    </div>
-  </div>
-);
diff --git a/src/utils/SimpleCard.tsx b/src/utils/SimpleCard.tsx
index ccee2de2..e50213e7 100644
--- a/src/utils/SimpleCard.tsx
+++ b/src/utils/SimpleCard.tsx
@@ -1,8 +1,9 @@
 import { CardProps } from 'reactstrap/lib/Card';
 import { Card, CardBody, CardHeader } from 'reactstrap';
+import { ReactNode } from 'react';
 
-interface SimpleCardProps extends CardProps {
-  title?: string;
+interface SimpleCardProps extends Omit<CardProps, 'title'> {
+  title?: ReactNode;
 }
 
 export const SimpleCard = ({ title, children, ...rest }: SimpleCardProps) => (
diff --git a/test/servers/helpers/ServerForm.test.tsx b/test/servers/helpers/ServerForm.test.tsx
index d9c11c58..3c40ed48 100644
--- a/test/servers/helpers/ServerForm.test.tsx
+++ b/test/servers/helpers/ServerForm.test.tsx
@@ -1,6 +1,6 @@
 import { shallow, ShallowWrapper } from 'enzyme';
 import { ServerForm } from '../../../src/servers/helpers/ServerForm';
-import { HorizontalFormGroup } from '../../../src/utils/HorizontalFormGroup';
+import { FormGroupContainer } from '../../../src/utils/FormGroupContainer';
 
 describe('<ServerForm />', () => {
   let wrapper: ShallowWrapper;
@@ -14,7 +14,7 @@ describe('<ServerForm />', () => {
   afterEach(jest.resetAllMocks);
 
   it('renders components', () => {
-    expect(wrapper.find(HorizontalFormGroup)).toHaveLength(3);
+    expect(wrapper.find(FormGroupContainer)).toHaveLength(3);
     expect(wrapper.find('span')).toHaveLength(1);
   });
 

From 526fa14dce33c504d4a07ae692701aa04fd1751d Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Sat, 12 Dec 2020 12:04:20 +0100
Subject: [PATCH 6/7] Improved NoMenuLayout, using a container-xl style

---
 src/common/NoMenuLayout.scss               |  2 +-
 src/common/NoMenuLayout.tsx                |  2 +-
 src/servers/helpers/ServerError.tsx        | 57 ++++++++++++----------
 src/servers/helpers/withSelectedServer.tsx |  7 +--
 src/utils/Message.tsx                      | 11 ++++-
 5 files changed, 45 insertions(+), 34 deletions(-)

diff --git a/src/common/NoMenuLayout.scss b/src/common/NoMenuLayout.scss
index de288432..ffacd0af 100644
--- a/src/common/NoMenuLayout.scss
+++ b/src/common/NoMenuLayout.scss
@@ -1,3 +1,3 @@
 .no-menu-wrapper {
-  padding: 40px 20px 20px;
+  padding: 30px 20px 20px;
 }
diff --git a/src/common/NoMenuLayout.tsx b/src/common/NoMenuLayout.tsx
index ac4f1dcc..dfddde05 100644
--- a/src/common/NoMenuLayout.tsx
+++ b/src/common/NoMenuLayout.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import './NoMenuLayout.scss';
 
-const NoMenuLayout: FC = ({ children }) => <div className="no-menu-wrapper">{children}</div>;
+const NoMenuLayout: FC = ({ children }) => <div className="no-menu-wrapper container-xl">{children}</div>;
 
 export default NoMenuLayout;
diff --git a/src/servers/helpers/ServerError.tsx b/src/servers/helpers/ServerError.tsx
index 73538012..17d14be6 100644
--- a/src/servers/helpers/ServerError.tsx
+++ b/src/servers/helpers/ServerError.tsx
@@ -4,6 +4,7 @@ import Message from '../../utils/Message';
 import ServersListGroup from '../ServersListGroup';
 import { DeleteServerButtonProps } from '../DeleteServerButton';
 import { isServerWithId, SelectedServer, ServersMap } from '../data';
+import NoMenuLayout from '../../common/NoMenuLayout';
 import './ServerError.scss';
 
 interface ServerErrorProps {
@@ -14,32 +15,34 @@ interface ServerErrorProps {
 export const ServerError = (DeleteServerButton: FC<DeleteServerButtonProps>): FC<ServerErrorProps> => (
   { servers, selectedServer },
 ) => (
-  <div className="server-error__container flex-column">
-    <div className="row w-100 mb-3 mb-md-5">
-      <Message type="error">
-        {!isServerWithId(selectedServer) && 'Could not find this Shlink server.'}
-        {isServerWithId(selectedServer) && (
-          <>
-            <p>Oops! Could not connect to this Shlink server.</p>
-            Make sure you have internet connection, and the server is properly configured and on-line.
-          </>
-        )}
-      </Message>
-    </div>
-
-    <ServersListGroup servers={Object.values(servers)}>
-      These are the Shlink servers currently configured. Choose one of
-      them or <Link to="/server/create">add a new one</Link>.
-    </ServersListGroup>
-
-    {isServerWithId(selectedServer) && (
-      <div className="container mt-3 mt-md-5">
-        <h5>
-          Alternatively, if you think you may have miss-configured this server, you
-          can <DeleteServerButton server={selectedServer} className="server-error__delete-btn">remove it</DeleteServerButton> or&nbsp;
-          <Link to={`/server/${selectedServer.id}/edit`}>edit it</Link>.
-        </h5>
+  <NoMenuLayout>
+    <div className="server-error__container flex-column">
+      <div className="row w-100 mb-3 mb-md-5">
+        <Message type="error" fullWidth noMargin>
+          {!isServerWithId(selectedServer) && 'Could not find this Shlink server.'}
+          {isServerWithId(selectedServer) && (
+            <>
+              <p>Oops! Could not connect to this Shlink server.</p>
+              Make sure you have internet connection, and the server is properly configured and on-line.
+            </>
+          )}
+        </Message>
       </div>
-    )}
-  </div>
+
+      <ServersListGroup servers={Object.values(servers)}>
+        These are the Shlink servers currently configured. Choose one of
+        them or <Link to="/server/create">add a new one</Link>.
+      </ServersListGroup>
+
+      {isServerWithId(selectedServer) && (
+        <div className="container mt-3 mt-md-5">
+          <h5>
+            Alternatively, if you think you may have miss-configured this server, you
+            can <DeleteServerButton server={selectedServer} className="server-error__delete-btn">remove it</DeleteServerButton> or&nbsp;
+            <Link to={`/server/${selectedServer.id}/edit`}>edit it</Link>.
+          </h5>
+        </div>
+      )}
+    </div>
+  </NoMenuLayout>
 );
diff --git a/src/servers/helpers/withSelectedServer.tsx b/src/servers/helpers/withSelectedServer.tsx
index d0a08b88..742bf160 100644
--- a/src/servers/helpers/withSelectedServer.tsx
+++ b/src/servers/helpers/withSelectedServer.tsx
@@ -2,6 +2,7 @@ import { FC, useEffect } from 'react';
 import { RouteComponentProps } from 'react-router';
 import Message from '../../utils/Message';
 import { isNotFoundServer, SelectedServer } from '../data';
+import NoMenuLayout from '../../common/NoMenuLayout';
 
 interface WithSelectedServerProps extends RouteComponentProps<{ serverId: string }> {
   selectServer: (serverId: string) => void;
@@ -18,9 +19,9 @@ export function withSelectedServer<T = {}>(WrappedComponent: FC<WithSelectedServ
 
     if (!selectedServer) {
       return (
-        <div className="row">
-          <Message loading />
-        </div>
+        <NoMenuLayout>
+          <Message loading noMargin />
+        </NoMenuLayout>
       );
     }
 
diff --git a/src/utils/Message.tsx b/src/utils/Message.tsx
index 5a452045..70363983 100644
--- a/src/utils/Message.tsx
+++ b/src/utils/Message.tsx
@@ -26,14 +26,21 @@ const getTextClassForType = (type: MessageType) => {
 interface MessageProps {
   noMargin?: boolean;
   loading?: boolean;
+  fullWidth?: boolean;
   type?: MessageType;
 }
 
-const Message: FC<MessageProps> = ({ children, loading = false, noMargin = false, type = 'default' }) => {
+const Message: FC<MessageProps> = (
+  { children, loading = false, noMargin = false, type = 'default', fullWidth = false },
+) => {
   const cardClasses = classNames(getClassForType(type), { 'mt-4': !noMargin });
+  const classes = classNames({
+    'col-md-12': fullWidth,
+    'col-md-10 offset-md-1': !fullWidth,
+  });
 
   return (
-    <div className="col-md-10 offset-md-1">
+    <div className={classes}>
       <Card className={cardClasses} body>
         <h3 className={classNames('text-center mb-0', getTextClassForType(type))}>
           {loading && <FontAwesomeIcon icon={preloader} spin />}

From 2efc5feb3f9c594dee830d258dbcbf330dead49f Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Sat, 12 Dec 2020 12:07:51 +0100
Subject: [PATCH 7/7] Updated changelog

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ad01b43a..d7eaf534 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,7 +14,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 * [#315](https://github.com/shlinkio/shlink-web-client/issues/315) Now you can tell if you want to validate the long URL when using Shlink >=2.4.
 
 ### Changed
-* *Nothing*
+* [#267](https://github.com/shlinkio/shlink-web-client/issues/267) Added some subtle but important improvements on UI/UX.
 
 ### Deprecated
 * *Nothing*