Improved settings section names

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="secondary-items" element={<SettingsSections items={[ <Tags key="one" />, <Visits key="two" /> ]} />} />
-      <Route path="*" element={<Navigate replace to="app" />} />
+      <Route path="*" element={<Navigate replace to="general" />} />
     </Routes>
   </NoMenuLayout>
 );

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" />
-      <FontAwesomeIcon icon={ui?.theme === 'dark' ? faMoon : faSun} className="user-interface__theme-icon" />
+    <ToggleSwitch
-      <ToggleSwitch
+      checked={ui?.theme === 'dark'}
-        checked={ui?.theme === 'dark'}
+      onChange={(useDarkTheme) => {
-        onChange={(useDarkTheme) => {
+        const theme: Theme = useDarkTheme ? 'dark' : 'light';
-          const theme: Theme = useDarkTheme ? 'dark' : 'light';
 
-          setUiSettings({ ...ui, theme });
+        setUiSettings({ ...ui, theme });
-          changeThemeInMarkup(theme);
+        changeThemeInMarkup(theme);
-        }}
+      }}
-      >
+    >
-        Use dark theme.
+      Use dark theme.
-      </ToggleSwitch>
+    </ToggleSwitch>
-    </FormGroup>
   </SimpleCard>
 );

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

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

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

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