Merge pull request #345 from acelaya-forks/feature/restyle

Feature/restyle

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*

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;

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>

src/common/NoMenuLayout.scss

@@ -1,3 +1,3 @@
 .no-menu-wrapper {
-  padding: 40px 20px 20px;
+  padding: 30px 20px 20px;
 }

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;

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;
 }

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>

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>

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>

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>
   );

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 {

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>
 );

src/servers/helpers/ServerForm.scss

@@ -0,0 +1,3 @@
+.server-form .form-group:last-child {
+  margin-bottom: 0;
+}

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>

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>
       );
     }
 

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);
 }

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>
     </>
   );
 };

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

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>

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;

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>
+);

src/utils/HorizontalFormGroup.tsx

@@ -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>
-);

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 cardClasses = classNames('bg-light', getClassForType(type), { 'mt-4': !noMargin });
+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 />}

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) => (

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} />

src/visits/VisitsTable.scss

@@ -4,6 +4,7 @@
 .visits-table {
   margin: 1.5rem 0 0;
   position: relative;
+  background-color: white;
 }
 
 .visits-table__header-cell {

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

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');
   });
 });

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);
   });