From b0fa14fcfebd6c4d9b7325328ca4a16da7af1781 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Sun, 13 Feb 2022 20:20:20 +0100
Subject: [PATCH 1/5] Extracted nav pills to their own component for
 reusability

---
 src/app/App.tsx                               |  2 +-
 src/common/MainHeader.tsx                     |  2 +-
 src/settings/Settings.tsx                     | 30 +++++++--------
 .../VisitsStats.scss => utils/NavPills.scss}  | 10 ++---
 src/utils/NavPills.tsx                        | 17 +++++++++
 src/visits/VisitsStats.tsx                    | 38 ++++++++-----------
 6 files changed, 54 insertions(+), 45 deletions(-)
 rename src/{visits/VisitsStats.scss => utils/NavPills.scss} (78%)
 create mode 100644 src/utils/NavPills.tsx

diff --git a/src/app/App.tsx b/src/app/App.tsx
index 499841f5..afe7c2e9 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -47,7 +47,7 @@ const App = (
         <div className={classNames('shlink-wrapper', { 'd-flex d-md-block align-items-center': isHome })}>
           <Routes>
             <Route index element={<Home />} />
-            <Route path="/settings" element={<Settings />} />
+            <Route path="/settings/*" element={<Settings />} />
             <Route path="/manage-servers" element={<ManageServers />} />
             <Route path="/server/create" element={<CreateServer />} />
             <Route path="/server/:serverId/edit" element={<EditServer />} />
diff --git a/src/common/MainHeader.tsx b/src/common/MainHeader.tsx
index 4ce52d68..e4dc28b6 100644
--- a/src/common/MainHeader.tsx
+++ b/src/common/MainHeader.tsx
@@ -31,7 +31,7 @@ const MainHeader = (ServersDropdown: FC) => () => {
       <Collapse navbar isOpen={isOpen}>
         <Nav navbar className="ml-auto">
           <NavItem>
-            <NavLink tag={Link} to={settingsPath} active={pathname === settingsPath}>
+            <NavLink tag={Link} to={settingsPath} active={pathname.startsWith(settingsPath)}>
               <FontAwesomeIcon icon={cogsIcon} />&nbsp; Settings
             </NavLink>
           </NavItem>
diff --git a/src/settings/Settings.tsx b/src/settings/Settings.tsx
index c3fce833..751af4a1 100644
--- a/src/settings/Settings.tsx
+++ b/src/settings/Settings.tsx
@@ -1,18 +1,11 @@
 import { FC, ReactNode } from 'react';
-import { Row } from 'reactstrap';
+import { Navigate, Routes, Route } from 'react-router-dom';
 import { NoMenuLayout } from '../common/NoMenuLayout';
+import { NavPills } from '../utils/NavPills';
 
-const SettingsSections: FC<{ items: ReactNode[][] }> = ({ items }) => (
+const SettingsSections: FC<{ items: ReactNode[] }> = ({ items }) => (
   <>
-    {items.map((child, index) => (
-      <Row key={index}>
-        {child.map((subChild, subIndex) => (
-          <div key={subIndex} className={`col-lg-${12 / child.length} mb-3`}>
-            {subChild}
-          </div>
-        ))}
-      </Row>
-    ))}
+    {items.map((child, index) => <div key={index} className="mb-3">{child}</div>)}
   </>
 );
 
@@ -25,13 +18,20 @@ const Settings = (
   Tags: FC,
 ) => () => (
   <NoMenuLayout>
-    <SettingsSections
+    <NavPills
       items={[
-        [ <UserInterface />, <Visits /> ], // eslint-disable-line react/jsx-key
-        [ <ShortUrlCreation />, <ShortUrlsList /> ], // eslint-disable-line react/jsx-key
-        [ <Tags />, <RealTimeUpdates /> ], // eslint-disable-line react/jsx-key
+        { to: 'app', children: 'App' },
+        { to: 'short-urls', children: 'Short URLs' },
+        { to: 'others', children: 'Others' },
       ]}
     />
+
+    <Routes>
+      <Route path="app" element={<SettingsSections items={[ <UserInterface key="one" />, <RealTimeUpdates key="two" /> ]} />} />
+      <Route path="short-urls" element={<SettingsSections items={[ <ShortUrlCreation key="one" />, <ShortUrlsList key="two" /> ]} />} />
+      <Route path="others" element={<SettingsSections items={[ <Tags key="one" />, <Visits key="two" /> ]} />} />
+      <Route path="*" element={<Navigate replace to="app" />} />
+    </Routes>
   </NoMenuLayout>
 );
 
diff --git a/src/visits/VisitsStats.scss b/src/utils/NavPills.scss
similarity index 78%
rename from src/visits/VisitsStats.scss
rename to src/utils/NavPills.scss
index 1caafc6d..33b605ac 100644
--- a/src/visits/VisitsStats.scss
+++ b/src/utils/NavPills.scss
@@ -1,12 +1,12 @@
-@import '../utils/base';
+@import './base';
 
-.visits-stats__nav {
+.nav-pills__nav {
   position: sticky !important;
   top: $headerHeight - 1px;
   z-index: 2;
 }
 
-.visits-stats__nav-link {
+.nav-pills__nav-link {
   border-radius: 0 !important;
   padding-bottom: calc(.5rem - 3px) !important;
   border-bottom: 3px solid transparent;
@@ -19,11 +19,11 @@
   }
 }
 
-.visits-stats__nav-link:hover {
+.nav-pills__nav-link:hover {
   color: $mainColor !important;
 }
 
-.visits-stats__nav-link.active {
+.nav-pills__nav-link.active {
   border-color: $mainColor;
   background-color: var(--primary-color) !important;
   color: $mainColor !important;
diff --git a/src/utils/NavPills.tsx b/src/utils/NavPills.tsx
new file mode 100644
index 00000000..c65d9b89
--- /dev/null
+++ b/src/utils/NavPills.tsx
@@ -0,0 +1,17 @@
+import { FC, ReactNode } from 'react';
+import { Card, Nav, NavLink } from 'reactstrap';
+import { NavLink as RouterNavLink } from 'react-router-dom';
+import './NavPills.scss';
+
+interface NavPillsProps {
+  items: { children: ReactNode; to: string; replace?: boolean }[];
+}
+
+export const NavPills: FC<NavPillsProps> = ({ items }) => (
+  <Card className="nav-pills__nav p-0 overflow-hidden mb-3" body>
+    <Nav pills fill>
+      {items.map(({ children, ...rest }, index) =>
+        <NavLink key={index} className="nav-pills__nav-link" tag={RouterNavLink} {...rest}>{children}</NavLink>)}
+    </Nav>
+  </Card>
+);
diff --git a/src/visits/VisitsStats.tsx b/src/visits/VisitsStats.tsx
index ff52b15c..3a11e779 100644
--- a/src/visits/VisitsStats.tsx
+++ b/src/visits/VisitsStats.tsx
@@ -1,11 +1,10 @@
 import { isEmpty, propEq, values } from 'ramda';
 import { useState, useEffect, useMemo, FC, useRef } from 'react';
-import { Button, Card, Nav, NavLink, Progress, Row } from 'reactstrap';
+import { Button, Progress, Row } from 'reactstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCalendarAlt, faMapMarkedAlt, faList, faChartPie, faFileDownload } from '@fortawesome/free-solid-svg-icons';
 import { IconDefinition } from '@fortawesome/fontawesome-common-types';
-import { Route, Routes, NavLink as RouterNavLink, Navigate } from 'react-router-dom';
-import { Location } from 'history';
+import { Route, Routes, Navigate } from 'react-router-dom';
 import classNames from 'classnames';
 import { DateRangeSelector } from '../utils/dates/DateRangeSelector';
 import Message from '../utils/Message';
@@ -16,6 +15,7 @@ import { Settings } from '../settings/reducers/settings';
 import { SelectedServer } from '../servers/data';
 import { supportsBotVisits } from '../utils/helpers/features';
 import { prettify } from '../utils/helpers/numbers';
+import { NavPills } from '../utils/NavPills';
 import LineChartCard from './charts/LineChartCard';
 import VisitsTable from './VisitsTable';
 import { NormalizedOrphanVisit, NormalizedVisit, VisitsFilter, VisitsInfo, VisitsParams } from './types';
@@ -25,7 +25,6 @@ import { VisitsFilterDropdown } from './helpers/VisitsFilterDropdown';
 import { HighlightableProps, highlightedVisitsToStats } from './types/helpers';
 import { DoughnutChartCard } from './charts/DoughnutChartCard';
 import { SortableBarChartCard } from './charts/SortableBarChartCard';
-import './VisitsStats.scss';
 
 export interface VisitsStatsProps {
   getVisits: (params: VisitsParams, doIntervalFallback?: boolean) => void;
@@ -55,19 +54,6 @@ const sections: Record<Section, VisitsNavLinkProps> = {
 
 let selectedBar: string | undefined;
 
-const VisitsNavLink: FC<VisitsNavLinkProps & { to: string }> = ({ subPath, title, icon, to }) => (
-  <NavLink
-    tag={RouterNavLink}
-    className="visits-stats__nav-link"
-    to={to}
-    isActive={(_: null, { pathname }: Location) => pathname.endsWith(`visits${subPath}`)}
-    replace
-  >
-    <FontAwesomeIcon icon={icon} />
-    <span className="ml-2 d-none d-sm-inline">{title}</span>
-  </NavLink>
-);
-
 const VisitsStats: FC<VisitsStatsProps> = ({
   children,
   visitsInfo,
@@ -157,12 +143,18 @@ const VisitsStats: FC<VisitsStatsProps> = ({
 
     return (
       <>
-        <Card className="visits-stats__nav p-0 overflow-hidden" body>
-          <Nav pills fill>
-            {Object.entries(sections).map(([ section, props ]) =>
-              <VisitsNavLink key={section} {...props} to={buildSectionUrl(props.subPath)} />)}
-          </Nav>
-        </Card>
+        <NavPills
+          items={Object.values(sections).map(({ title, icon, subPath }) => ({
+            replace: true,
+            to: buildSectionUrl(subPath),
+            children: (
+              <>
+                <FontAwesomeIcon icon={icon} />
+                <span className="ml-2 d-none d-sm-inline">{title}</span>
+              </>
+            ),
+          }))}
+        />
         <Row>
           <Routes>
             <Route

From f24c8052a99eb512dbb7a59a54c7f90b3e9c2368 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Mon, 14 Feb 2022 19:58:20 +0100
Subject: [PATCH 2/5] Improved NavPills component and added test

---
 src/settings/Settings.tsx    | 14 ++++++--------
 src/utils/NavPills.tsx       | 24 +++++++++++++++++------
 src/visits/VisitsStats.tsx   | 22 +++++++++------------
 test/utils/NavPills.test.tsx | 37 ++++++++++++++++++++++++++++++++++++
 4 files changed, 70 insertions(+), 27 deletions(-)
 create mode 100644 test/utils/NavPills.test.tsx

diff --git a/src/settings/Settings.tsx b/src/settings/Settings.tsx
index 751af4a1..8415763b 100644
--- a/src/settings/Settings.tsx
+++ b/src/settings/Settings.tsx
@@ -1,7 +1,7 @@
 import { FC, ReactNode } from 'react';
 import { Navigate, Routes, Route } from 'react-router-dom';
 import { NoMenuLayout } from '../common/NoMenuLayout';
-import { NavPills } from '../utils/NavPills';
+import { NavPillItem, NavPills } from '../utils/NavPills';
 
 const SettingsSections: FC<{ items: ReactNode[] }> = ({ items }) => (
   <>
@@ -18,13 +18,11 @@ const Settings = (
   Tags: FC,
 ) => () => (
   <NoMenuLayout>
-    <NavPills
-      items={[
-        { to: 'app', children: 'App' },
-        { to: 'short-urls', children: 'Short URLs' },
-        { to: 'others', children: 'Others' },
-      ]}
-    />
+    <NavPills>
+      <NavPillItem to="app">App</NavPillItem>
+      <NavPillItem to="short-urls">Short URLs</NavPillItem>
+      <NavPillItem to="others">Others</NavPillItem>
+    </NavPills>
 
     <Routes>
       <Route path="app" element={<SettingsSections items={[ <UserInterface key="one" />, <RealTimeUpdates key="two" /> ]} />} />
diff --git a/src/utils/NavPills.tsx b/src/utils/NavPills.tsx
index c65d9b89..e00000c7 100644
--- a/src/utils/NavPills.tsx
+++ b/src/utils/NavPills.tsx
@@ -1,17 +1,29 @@
-import { FC, ReactNode } from 'react';
+import { FC, Children, isValidElement } from 'react';
 import { Card, Nav, NavLink } from 'reactstrap';
 import { NavLink as RouterNavLink } from 'react-router-dom';
 import './NavPills.scss';
 
-interface NavPillsProps {
-  items: { children: ReactNode; to: string; replace?: boolean }[];
+interface NavPillProps {
+  to: string;
+  replace?: boolean;
 }
 
-export const NavPills: FC<NavPillsProps> = ({ items }) => (
+export const NavPillItem: FC<NavPillProps> = ({ children, ...rest }) => (
+  <NavLink className="nav-pills__nav-link" tag={RouterNavLink} {...rest}>
+    {children}
+  </NavLink>
+);
+
+export const NavPills: FC = ({ children }) => (
   <Card className="nav-pills__nav p-0 overflow-hidden mb-3" body>
     <Nav pills fill>
-      {items.map(({ children, ...rest }, index) =>
-        <NavLink key={index} className="nav-pills__nav-link" tag={RouterNavLink} {...rest}>{children}</NavLink>)}
+      {Children.map(children, (child) => {
+        if (!isValidElement(child) || child.type !== NavPillItem) {
+          throw new Error('Only NavPillItem children are allowed inside NavPills.');
+        }
+
+        return child;
+      })}
     </Nav>
   </Card>
 );
diff --git a/src/visits/VisitsStats.tsx b/src/visits/VisitsStats.tsx
index 3a11e779..9c740a5d 100644
--- a/src/visits/VisitsStats.tsx
+++ b/src/visits/VisitsStats.tsx
@@ -15,7 +15,7 @@ import { Settings } from '../settings/reducers/settings';
 import { SelectedServer } from '../servers/data';
 import { supportsBotVisits } from '../utils/helpers/features';
 import { prettify } from '../utils/helpers/numbers';
-import { NavPills } from '../utils/NavPills';
+import { NavPillItem, NavPills } from '../utils/NavPills';
 import LineChartCard from './charts/LineChartCard';
 import VisitsTable from './VisitsTable';
 import { NormalizedOrphanVisit, NormalizedVisit, VisitsFilter, VisitsInfo, VisitsParams } from './types';
@@ -143,18 +143,14 @@ const VisitsStats: FC<VisitsStatsProps> = ({
 
     return (
       <>
-        <NavPills
-          items={Object.values(sections).map(({ title, icon, subPath }) => ({
-            replace: true,
-            to: buildSectionUrl(subPath),
-            children: (
-              <>
-                <FontAwesomeIcon icon={icon} />
-                <span className="ml-2 d-none d-sm-inline">{title}</span>
-              </>
-            ),
-          }))}
-        />
+        <NavPills>
+          {Object.values(sections).map(({ title, icon, subPath }, index) => (
+            <NavPillItem key={index} to={buildSectionUrl(subPath)} replace>
+              <FontAwesomeIcon icon={icon} />
+              <span className="ml-2 d-none d-sm-inline">{title}</span>
+            </NavPillItem>
+          ))}
+        </NavPills>
         <Row>
           <Routes>
             <Route
diff --git a/test/utils/NavPills.test.tsx b/test/utils/NavPills.test.tsx
new file mode 100644
index 00000000..ed21aeb8
--- /dev/null
+++ b/test/utils/NavPills.test.tsx
@@ -0,0 +1,37 @@
+import { shallow } from 'enzyme';
+import { Card, Nav } from 'reactstrap';
+import { NavPillItem, NavPills } from '../../src/utils/NavPills';
+
+describe('<NavPills />', () => {
+  it.each([
+    [ 'Foo' ],
+    [ <span key="1">Hi!</span> ],
+    [[ <NavPillItem key="1" to="" />, <span key="2">Hi!</span> ]],
+  ])('throws error when any of the children is not a NavPillItem', (children) => {
+    expect.assertions(1);
+
+    try {
+      shallow(<NavPills>{children}</NavPills>);
+    } catch (e: any) {
+      expect(e.message).toEqual('Only NavPillItem children are allowed inside NavPills.');
+    }
+  });
+
+  it('renders provided items', () => {
+    const wrapper = shallow(
+      <NavPills>
+        <NavPillItem to="1">1</NavPillItem>
+        <NavPillItem to="2">2</NavPillItem>
+        <NavPillItem to="3">3</NavPillItem>
+      </NavPills>,
+    );
+    const card = wrapper.find(Card);
+    const nav = wrapper.find(Nav);
+
+    expect(card).toHaveLength(1);
+    expect(card.prop('body')).toEqual(true);
+    expect(nav).toHaveLength(1);
+    expect(nav.prop('pills')).toEqual(true);
+    expect(nav.prop('fill')).toEqual(true);
+  });
+});

From ae9e5a0566ef70abc0b91f72aa3f571600ab835e Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Mon, 14 Feb 2022 20:04:38 +0100
Subject: [PATCH 3/5] Fixed tests

---
 test/app/App.test.tsx           |  2 +-
 test/common/MainHeader.test.tsx |  2 ++
 test/settings/Settings.test.tsx | 17 ++++++++++++++---
 3 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/test/app/App.test.tsx b/test/app/App.test.tsx
index 4802a983..1d8ff213 100644
--- a/test/app/App.test.tsx
+++ b/test/app/App.test.tsx
@@ -54,7 +54,7 @@ describe('<App />', () => {
     const routes = wrapper.find(Route);
     const expectedPaths = [
       undefined,
-      '/settings',
+      '/settings/*',
       '/manage-servers',
       '/server/create',
       '/server/:serverId/edit',
diff --git a/test/common/MainHeader.test.tsx b/test/common/MainHeader.test.tsx
index b1fa282e..d472a505 100644
--- a/test/common/MainHeader.test.tsx
+++ b/test/common/MainHeader.test.tsx
@@ -35,6 +35,8 @@ describe('<MainHeader />', () => {
     [ '/foo', false ],
     [ '/bar', false ],
     [ '/settings', true ],
+    [ '/settings/foo', true ],
+    [ '/settings/bar', true ],
   ])('sets link to settings as active only when current path is settings', (currentPath, isActive) => {
     const wrapper = createWrapper(currentPath);
     const settingsLink = wrapper.find(NavLink);
diff --git a/test/settings/Settings.test.tsx b/test/settings/Settings.test.tsx
index ffd9ed39..e71083e6 100644
--- a/test/settings/Settings.test.tsx
+++ b/test/settings/Settings.test.tsx
@@ -1,6 +1,8 @@
 import { shallow } from 'enzyme';
+import { Route } from 'react-router-dom';
 import createSettings from '../../src/settings/Settings';
 import { NoMenuLayout } from '../../src/common/NoMenuLayout';
+import { NavPillItem } from '../../src/utils/NavPills';
 
 describe('<Settings />', () => {
   const Component = () => null;
@@ -9,10 +11,19 @@ describe('<Settings />', () => {
   it('renders a no-menu layout with the expected settings sections', () => {
     const wrapper = shallow(<Settings />);
     const layout = wrapper.find(NoMenuLayout);
-    const sections = wrapper.find('SettingsSections');
+    const sections = wrapper.find(Route);
 
     expect(layout).toHaveLength(1);
-    expect(sections).toHaveLength(1);
-    expect((sections.prop('items') as any[]).flat()).toHaveLength(6);
+    expect(sections).toHaveLength(4);
+  });
+
+  it('renders expected menu', () => {
+    const wrapper = shallow(<Settings />);
+    const items = wrapper.find(NavPillItem);
+
+    expect(items).toHaveLength(3);
+    expect(items.first().prop('to')).toEqual('app');
+    expect(items.at(1).prop('to')).toEqual('short-urls');
+    expect(items.last().prop('to')).toEqual('others');
   });
 });

From 30a71ac8b7a25dafa5b0ca54c3e7fa3f8ed12889 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Mon, 14 Feb 2022 20:28:28 +0100
Subject: [PATCH 4/5] Improved settings section names

---
 src/settings/Settings.tsx              | 10 +++++-----
 src/settings/UserInterfaceSettings.tsx | 25 +++++++++++--------------
 src/utils/NavPills.tsx                 |  4 ++--
 src/visits/VisitsStats.tsx             |  2 +-
 test/settings/Settings.test.tsx        |  4 ++--
 test/utils/NavPills.test.tsx           | 10 +++++++---
 6 files changed, 28 insertions(+), 27 deletions(-)

diff --git a/src/settings/Settings.tsx b/src/settings/Settings.tsx
index 8415763b..68c2b531 100644
--- a/src/settings/Settings.tsx
+++ b/src/settings/Settings.tsx
@@ -19,16 +19,16 @@ const Settings = (
 ) => () => (
   <NoMenuLayout>
     <NavPills>
-      <NavPillItem to="app">App</NavPillItem>
+      <NavPillItem to="general">General</NavPillItem>
       <NavPillItem to="short-urls">Short URLs</NavPillItem>
-      <NavPillItem to="others">Others</NavPillItem>
+      <NavPillItem to="secondary-items">Secondary items</NavPillItem>
     </NavPills>
 
     <Routes>
-      <Route path="app" element={<SettingsSections items={[ <UserInterface key="one" />, <RealTimeUpdates key="two" /> ]} />} />
+      <Route path="general" element={<SettingsSections items={[ <UserInterface key="one" />, <RealTimeUpdates key="two" /> ]} />} />
       <Route path="short-urls" element={<SettingsSections items={[ <ShortUrlCreation key="one" />, <ShortUrlsList key="two" /> ]} />} />
-      <Route path="others" element={<SettingsSections items={[ <Tags key="one" />, <Visits key="two" /> ]} />} />
-      <Route path="*" element={<Navigate replace to="app" />} />
+      <Route path="secondary-items" element={<SettingsSections items={[ <Tags key="one" />, <Visits key="two" /> ]} />} />
+      <Route path="*" element={<Navigate replace to="general" />} />
     </Routes>
   </NoMenuLayout>
 );
diff --git a/src/settings/UserInterfaceSettings.tsx b/src/settings/UserInterfaceSettings.tsx
index cca9e11b..5ca2e462 100644
--- a/src/settings/UserInterfaceSettings.tsx
+++ b/src/settings/UserInterfaceSettings.tsx
@@ -1,7 +1,6 @@
 import { FC } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faSun, faMoon } from '@fortawesome/free-solid-svg-icons';
-import { FormGroup } from 'reactstrap';
 import { SimpleCard } from '../utils/SimpleCard';
 import ToggleSwitch from '../utils/ToggleSwitch';
 import { changeThemeInMarkup, Theme } from '../utils/theme';
@@ -15,19 +14,17 @@ interface UserInterfaceProps {
 
 export const UserInterfaceSettings: FC<UserInterfaceProps> = ({ settings: { ui }, setUiSettings }) => (
   <SimpleCard title="User interface" className="h-100">
-    <FormGroup>
-      <FontAwesomeIcon icon={ui?.theme === 'dark' ? faMoon : faSun} className="user-interface__theme-icon" />
-      <ToggleSwitch
-        checked={ui?.theme === 'dark'}
-        onChange={(useDarkTheme) => {
-          const theme: Theme = useDarkTheme ? 'dark' : 'light';
+    <FontAwesomeIcon icon={ui?.theme === 'dark' ? faMoon : faSun} className="user-interface__theme-icon" />
+    <ToggleSwitch
+      checked={ui?.theme === 'dark'}
+      onChange={(useDarkTheme) => {
+        const theme: Theme = useDarkTheme ? 'dark' : 'light';
 
-          setUiSettings({ ...ui, theme });
-          changeThemeInMarkup(theme);
-        }}
-      >
-        Use dark theme.
-      </ToggleSwitch>
-    </FormGroup>
+        setUiSettings({ ...ui, theme });
+        changeThemeInMarkup(theme);
+      }}
+    >
+      Use dark theme.
+    </ToggleSwitch>
   </SimpleCard>
 );
diff --git a/src/utils/NavPills.tsx b/src/utils/NavPills.tsx
index e00000c7..3d7c3e8e 100644
--- a/src/utils/NavPills.tsx
+++ b/src/utils/NavPills.tsx
@@ -14,9 +14,9 @@ export const NavPillItem: FC<NavPillProps> = ({ children, ...rest }) => (
   </NavLink>
 );
 
-export const NavPills: FC = ({ children }) => (
+export const NavPills: FC<{ fill?: boolean }> = ({ children, fill = false }) => (
   <Card className="nav-pills__nav p-0 overflow-hidden mb-3" body>
-    <Nav pills fill>
+    <Nav pills fill={fill}>
       {Children.map(children, (child) => {
         if (!isValidElement(child) || child.type !== NavPillItem) {
           throw new Error('Only NavPillItem children are allowed inside NavPills.');
diff --git a/src/visits/VisitsStats.tsx b/src/visits/VisitsStats.tsx
index 9c740a5d..b9701765 100644
--- a/src/visits/VisitsStats.tsx
+++ b/src/visits/VisitsStats.tsx
@@ -143,7 +143,7 @@ const VisitsStats: FC<VisitsStatsProps> = ({
 
     return (
       <>
-        <NavPills>
+        <NavPills fill>
           {Object.values(sections).map(({ title, icon, subPath }, index) => (
             <NavPillItem key={index} to={buildSectionUrl(subPath)} replace>
               <FontAwesomeIcon icon={icon} />
diff --git a/test/settings/Settings.test.tsx b/test/settings/Settings.test.tsx
index e71083e6..c39b104b 100644
--- a/test/settings/Settings.test.tsx
+++ b/test/settings/Settings.test.tsx
@@ -22,8 +22,8 @@ describe('<Settings />', () => {
     const items = wrapper.find(NavPillItem);
 
     expect(items).toHaveLength(3);
-    expect(items.first().prop('to')).toEqual('app');
+    expect(items.first().prop('to')).toEqual('general');
     expect(items.at(1).prop('to')).toEqual('short-urls');
-    expect(items.last().prop('to')).toEqual('others');
+    expect(items.last().prop('to')).toEqual('secondary-items');
   });
 });
diff --git a/test/utils/NavPills.test.tsx b/test/utils/NavPills.test.tsx
index ed21aeb8..5f015432 100644
--- a/test/utils/NavPills.test.tsx
+++ b/test/utils/NavPills.test.tsx
@@ -17,9 +17,13 @@ describe('<NavPills />', () => {
     }
   });
 
-  it('renders provided items', () => {
+  it.each([
+    [ undefined ],
+    [ true ],
+    [ false ],
+  ])('renders provided items', (fill) => {
     const wrapper = shallow(
-      <NavPills>
+      <NavPills fill={fill}>
         <NavPillItem to="1">1</NavPillItem>
         <NavPillItem to="2">2</NavPillItem>
         <NavPillItem to="3">3</NavPillItem>
@@ -32,6 +36,6 @@ describe('<NavPills />', () => {
     expect(card.prop('body')).toEqual(true);
     expect(nav).toHaveLength(1);
     expect(nav.prop('pills')).toEqual(true);
-    expect(nav.prop('fill')).toEqual(true);
+    expect(nav.prop('fill')).toEqual(!!fill);
   });
 });

From a6b2f1b385ad4f61a8bbe2b339cc4bf4172cef70 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Mon, 14 Feb 2022 20:30:58 +0100
Subject: [PATCH 5/5] Update changelog

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0bf303b3..7da4f08a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 * [#570](https://github.com/shlinkio/shlink-web-client/pull/570) Added new section to load non-orphan visits all together.
 
 ### Changed
+* [#543](https://github.com/shlinkio/shlink-web-client/pull/543) Redesigned settings section.
 * [#567](https://github.com/shlinkio/shlink-web-client/pull/567) Improved Shlink 3.0.0 compatibility by checking the `INVALID_SHORT_URL_DELETION` error code when deleting short URLs.
 * [#524](https://github.com/shlinkio/shlink-web-client/pull/524) Updated to react-router v6.