Merge pull request #591 from acelaya-forks/feature/bootstrap5

Feature/bootstrap5
2025-01-10 18:27:25 +03:00 · 2022-03-07 16:34:19 +01:00 · 2022-03-07 16:34:19 +01:00 · ec4b777429
commit ec4b777429
parent 5a713fe92f 61b61bce1c
85 changed files with 1958 additions and 1610 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -12,6 +12,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),

 ### Changed
 * [#543](https://github.com/shlinkio/shlink-web-client/pull/543) Redesigned settings section.
+* [#448](https://github.com/shlinkio/shlink-web-client/pull/448) Updated to bootstrap 5.
 * [#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.
 * [#579](https://github.com/shlinkio/shlink-web-client/pull/579) Replaced react-color with react-colorful.
--- a/babel.config.js
+++ b/babel.config.js
@ -0,0 +1,15 @@
+module.exports = {
+  presets: [
+    [
+      'react-app',
+      {
+        runtime: 'automatic',
+        typescript: true,
+      },
+    ],
+  ],
+  plugins: [
+    '@babel/plugin-proposal-optional-chaining',
+    '@babel/plugin-proposal-nullish-coalescing-operator',
+  ],
+};
--- a/jest.config.js
+++ b/jest.config.js
@ -30,6 +30,8 @@ module.exports = {
  ],
  moduleNameMapper: {
    '^.+\\.module\\.scss$': 'identity-obj-proxy',
+    // Reactstrap module resolution does not work in jest for some reason. Manually mapping it solves the problem
+    'reactstrap': '<rootDir>/node_modules/reactstrap/dist/reactstrap.umd.js',
  },
  moduleFileExtensions: [ 'js', 'ts', 'tsx', 'json' ],
 };
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -29,7 +29,7 @@
    "@fortawesome/free-solid-svg-icons": "^5.15.2",
    "@fortawesome/react-fontawesome": "^0.1.14",
    "axios": "^0.21.2",
-    "bootstrap": "^4.6.0",
+    "bootstrap": "^5.1.3",
    "bottlejs": "^2.0.0",
    "bowser": "^2.11.0",
    "chart.js": "^3.5.1",
@ -54,7 +54,7 @@
    "react-router-dom": "^6.2.1",
    "react-swipeable": "^6.0.1",
    "react-tag-autocomplete": "^6.1.0",
-    "reactstrap": "^8.9.0",
+    "reactstrap": "^9.0.1",
    "redux": "^4.0.5",
    "redux-localstorage-simple": "^2.4.0",
    "redux-thunk": "^2.3.0",
@ -66,16 +66,16 @@
    "workbox-strategies": "^6.1.5"
  },
  "devDependencies": {
-    "@babel/core": "^7.13.8",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.13.8",
-    "@babel/plugin-proposal-optional-chaining": "^7.13.8",
+    "@babel/core": "^7.17.5",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.7",
+    "@babel/plugin-proposal-optional-chaining": "^7.16.7",
    "@shlinkio/eslint-config-js-coding-standard": "~1.2.2",
    "@stryker-mutator/core": "^5.4.1",
    "@stryker-mutator/jest-runner": "^5.4.1",
    "@stryker-mutator/typescript-checker": "^5.4.1",
    "@svgr/webpack": "^5.5.0",
    "@types/classnames": "^2.2.11",
-    "@types/enzyme": "^3.10.10",
+    "@types/enzyme": "^3.10.11",
    "@types/jest": "^27.4.1",
    "@types/leaflet": "^1.5.23",
    "@types/qs": "^6.9.5",
@ -92,9 +92,8 @@
    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.5",
    "adm-zip": "^0.4.16",
    "autoprefixer": "^10.0.2",
-    "babel-core": "7.0.0-bridge.0",
    "babel-jest": "^27.5.1",
-    "babel-loader": "^8.2.1",
+    "babel-loader": "^8.2.3",
    "babel-plugin-named-asset-import": "^0.3.7",
    "babel-preset-react-app": "^10.0.0",
    "babel-runtime": "^6.26.0",
@ -113,7 +112,7 @@
    "fs-extra": "^9.0.1",
    "html-webpack-plugin": "^4.5.0",
    "identity-obj-proxy": "^3.0.0",
-    "jest": "^27.3.1",
+    "jest": "^27.5.1",
    "mini-css-extract-plugin": "^1.3.1",
    "object-assign": "^4.1.1",
    "optimize-css-assets-webpack-plugin": "^5.0.4",
@ -147,20 +146,6 @@
    "whatwg-fetch": "^3.5.0",
    "workbox-webpack-plugin": "^6.1.5"
  },
-  "babel": {
-    "presets": [
-      [
-        "react-app",
-        {
-          "runtime": "automatic"
-        }
-      ]
-    ],
-    "plugins": [
-      "@babel/plugin-proposal-optional-chaining",
-      "@babel/plugin-proposal-nullish-coalescing-operator"
-    ]
-  },
  "browserslist": [
    ">0.2%",
    "not dead",
--- a/src/common/AppUpdateBanner.tsx
+++ b/src/common/AppUpdateBanner.tsx
@ -24,8 +24,8 @@ export const AppUpdateBanner: FC<AppUpdateBannerProps> = ({ isOpen, toggle, forc
      <h4 className="mb-4">This app has just been updated!</h4>
      <p className="mb-0">
        Restart it to enjoy the new features.
-        <Button disabled={isUpdating} className="ml-2" color="secondary" size="sm" onClick={update}>
-          {!isUpdating && <>Restart now <FontAwesomeIcon icon={reloadIcon} className="ml-1" /></>}
+        <Button disabled={isUpdating} className="ms-2" color="secondary" size="sm" onClick={update}>
+          {!isUpdating && <>Restart now <FontAwesomeIcon icon={reloadIcon} className="ms-1" /></>}
          {isUpdating && <>Restarting...</>}
        </Button>
      </p>
--- a/src/common/Home.scss
+++ b/src/common/Home.scss
@ -1,6 +1,10 @@
@import '../utils/base';
@import '../utils/mixins/vertical-align';

+$mainCardWidth: 720px;
+$totalColumns: 12;
+$logoColumns: 5;
+
 .home {
  position: relative;
  padding-top: 15px;
@ -21,12 +25,12 @@
 .home__logo {
  @include vertical-align();

-  width: calc(100% - 3rem);
+  width: calc(#{$mainCardWidth / $totalColumns * $logoColumns} - 3rem);
 }

 .home__main-card {
  margin: 0 auto;
-  max-width: 720px;
+  max-width: $mainCardWidth;

  @media (min-width: $mdMin) {
    @include vertical-align();
--- a/src/common/Home.tsx
+++ b/src/common/Home.tsx
@ -46,14 +46,14 @@ const Home = ({ servers }: HomeProps) => {
                <div className="p-4 text-center">
                  <p className="mb-5">This application will help you manage your Shlink servers.</p>
                  <p>
-                    <Link to="/server/create" className="btn btn-outline-primary btn-lg mr-2">
-                      <FontAwesomeIcon icon={faPlus} /> <span className="ml-1">Add a server</span>
+                    <Link to="/server/create" className="btn btn-outline-primary btn-lg me-2">
+                      <FontAwesomeIcon icon={faPlus} /> <span className="ms-1">Add a server</span>
                    </Link>
                  </p>
                  <p className="mb-0 mt-5">
                    <ExternalLink href="https://shlink.io/documentation">
                      <small>
-                        <span className="mr-1">Learn more about Shlink</span> <FontAwesomeIcon icon={faExternalLinkAlt} />
+                        <span className="me-1">Learn more about Shlink</span> <FontAwesomeIcon icon={faExternalLinkAlt} />
                      </small>
                    </ExternalLink>
                  </p>
--- a/src/common/MainHeader.tsx
+++ b/src/common/MainHeader.tsx
@ -29,7 +29,7 @@ const MainHeader = (ServersDropdown: FC) => () => {
      </NavbarToggler>

      <Collapse navbar isOpen={isOpen}>
-        <Nav navbar className="ml-auto">
+        <Nav navbar className="ms-auto">
          <NavItem>
            <NavLink tag={Link} to={settingsPath} active={pathname.startsWith(settingsPath)}>
              <FontAwesomeIcon icon={cogsIcon} />&nbsp; Settings
--- a/src/common/MenuLayout.scss
+++ b/src/common/MenuLayout.scss
@ -1,13 +1,7 @@
@import '../utils/base';

 .menu-layout__swipeable {
-  $offset: 15px;
-
  height: 100%;
-  margin-right: -$offset;
-  margin-left: -$offset;
-  padding-left: $offset;
-  padding-right: $offset;
 }

 .menu-layout__swipeable-inner {
--- a/src/domains/DomainRow.tsx
+++ b/src/domains/DomainRow.tsx
@ -63,7 +63,7 @@ export const DomainRow: FC<DomainRowProps> = (
      <td className="responsive-table__cell text-lg-center" data-th="Status">
        <DomainStatusIcon status={status} />
      </td>
-      <td className="responsive-table__cell text-right">
+      <td className="responsive-table__cell text-end">
        <span id={!canEditDomain ? 'defaultDomainBtn' : undefined}>
          <Button outline size="sm" disabled={!canEditDomain} onClick={!canEditDomain ? undefined : toggle}>
            <FontAwesomeIcon fixedWidth icon={!canEditDomain ? forbiddenIcon : editIcon} />
--- a/src/domains/DomainSelector.tsx
+++ b/src/domains/DomainSelector.tsx
@ -1,6 +1,5 @@
 import { useEffect } from 'react';
-import { Button, DropdownItem, Input, InputGroup, InputGroupAddon, UncontrolledTooltip } from 'reactstrap';
-import { InputProps } from 'reactstrap/lib/Input';
+import { Button, DropdownItem, Input, InputGroup, UncontrolledTooltip, InputProps } from 'reactstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faUndo } from '@fortawesome/free-solid-svg-icons';
 import { isEmpty, pipe } from 'ramda';
@ -32,24 +31,22 @@ export const DomainSelector = ({ listDomains, value, domainsList, onChange }: Do
  return inputDisplayed ? (
    <InputGroup>
      <Input
-        value={value}
+        value={value ?? ''}
        placeholder="Domain"
        onChange={(e) => onChange(e.target.value)}
      />
-      <InputGroupAddon addonType="append">
-        <Button
-          id="backToDropdown"
-          outline
-          type="button"
-          className="domains-dropdown__back-btn"
-          onClick={pipe(unselectDomain, hideInput)}
-        >
-          <FontAwesomeIcon icon={faUndo} />
-        </Button>
-        <UncontrolledTooltip target="backToDropdown" placement="left" trigger="hover">
-          Existing domains
-        </UncontrolledTooltip>
-      </InputGroupAddon>
+      <Button
+        id="backToDropdown"
+        outline
+        type="button"
+        className="domains-dropdown__back-btn"
+        onClick={pipe(unselectDomain, hideInput)}
+      >
+        <FontAwesomeIcon icon={faUndo} />
+      </Button>
+      <UncontrolledTooltip target="backToDropdown" placement="left" trigger="hover">
+        Existing domains
+      </UncontrolledTooltip>
    </InputGroup>
  ) : (
    <DropdownBtn
@ -63,7 +60,7 @@ export const DomainSelector = ({ listDomains, value, domainsList, onChange }: Do
          onClick={() => onChange(domain)}
        >
          {domain}
-          {isDefault && <span className="float-right text-muted">default</span>}
+          {isDefault && <span className="float-end text-muted">default</span>}
        </DropdownItem>
      ))}
      <DropdownItem divider />
--- a/src/domains/ManageDomains.tsx
+++ b/src/domains/ManageDomains.tsx
@ -45,7 +45,7 @@ export const ManageDomains: FC<ManageDomainsProps> = (

    return (
      <SimpleCard>
-        <table className="table table-hover mb-0">
+        <table className="table table-hover responsive-table mb-0">
          <thead className="responsive-table__header">
            <tr>{headers.map((column, index) => <th key={index}>{column}</th>)}</tr>
          </thead>
--- a/src/domains/helpers/EditDomainRedirectsModal.tsx
+++ b/src/domains/helpers/EditDomainRedirectsModal.tsx
@ -1,7 +1,7 @@
 import { FC, useState } from 'react';
 import { Button, Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
 import { ShlinkDomain, ShlinkDomainRedirects } from '../../api/types';
-import { FormGroupContainer, FormGroupContainerProps } from '../../utils/FormGroupContainer';
+import { InputFormGroup, InputFormGroupProps } from '../../utils/forms/InputFormGroup';
 import { handleEventPreventingDefault, nonEmptyValueOrNull } from '../../utils/utils';
 import { InfoTooltip } from '../../utils/InfoTooltip';

@ -12,8 +12,8 @@ interface EditDomainRedirectsModalProps {
  editDomainRedirects: (domain: string, redirects: Partial<ShlinkDomainRedirects>) => Promise<void>;
 }

-const FormGroup: FC<FormGroupContainerProps & { isLast?: boolean }> = ({ isLast, ...rest }) => (
-  <FormGroupContainer
+const FormGroup: FC<InputFormGroupProps & { isLast?: boolean }> = ({ isLast, ...rest }) => (
+  <InputFormGroup
    {...rest}
    required={false}
    type="url"
@ -42,20 +42,20 @@ export const EditDomainRedirectsModal: FC<EditDomainRedirectsModalProps> = (
        <ModalHeader toggle={toggle}>Edit redirects for <b>{domain.domain}</b></ModalHeader>
        <ModalBody>
          <FormGroup value={baseUrlRedirect} onChange={setBaseUrlRedirect}>
-            <InfoTooltip className="mr-2" placement="bottom">
+            <InfoTooltip className="me-2" placement="bottom">
              Visitors accessing the base url, as in <b>https://{domain.domain}/</b>, will be redirected to this URL.
            </InfoTooltip>
            Base URL
          </FormGroup>
          <FormGroup value={regular404Redirect} onChange={setRegular404Redirect}>
-            <InfoTooltip className="mr-2" placement="bottom">
+            <InfoTooltip className="me-2" placement="bottom">
              Visitors accessing a url not matching a short URL pattern, as in <b>https://{domain.domain}/???/[...]</b>,
              will be redirected to this URL.
            </InfoTooltip>
            Regular 404
          </FormGroup>
          <FormGroup value={invalidShortUrlRedirect} isLast onChange={setInvalidShortUrlRedirect}>
-            <InfoTooltip className="mr-2" placement="bottom">
+            <InfoTooltip className="me-2" placement="bottom">
              Visitors accessing a url matching a short URL pattern, but not matching an existing short code, will be
              redirected to this URL.
            </InfoTooltip>
--- a/src/index.scss
+++ b/src/index.scss
@ -11,6 +11,10 @@
  outline: none !important;
 }

+:root {
+  scroll-behavior: auto;
+}
+
 html,
 body,
 #root {
@ -19,6 +23,17 @@ body,
  color: var(--text-color);
 }

+a,
+.btn-link {
+  text-decoration: none;
+}
+
+/* stylelint-disable-next-line selector-max-pseudo-class */
+a:not(.nav-link):not(.navbar-brand):not(.page-link):not(.highlight-card):not(.btn):hover,
+.btn-link:hover {
+  text-decoration: underline;
+}
+
 .bg-main {
  background-color: $mainColor !important;
 }
@ -74,7 +89,8 @@ hr {
  border-color: var(--table-border-color);
 }

-.page-link:hover {
+.page-link:hover,
+.page-link:focus {
  background-color: var(--secondary-color);
 }

@ -98,6 +114,22 @@ hr {
  }
 }

+/* Deprecated. Brought from bootstrap 4 */
+.btn-block {
+  display: block;
+  width: 100%;
+}
+
+.btn-primary,
+.btn-primary:hover,
+.btn-primary:active,
+.btn-primary.active,
+.btn-outline-primary:hover,
+.btn-outline-primary:active,
+.btn-outline-primary.active, {
+  color: #ffffff;
+}
+
 .dropdown-item,
 .dropdown-item-text {
  color: var(--text-color);
@ -133,10 +165,15 @@ hr {
 .close,
 .close:hover,
 .table,
-.table-hover tbody tr:hover {
+.table-hover > tbody > tr:hover > *,
+.table-hover > tbody > tr > * {
  color: var(--text-color);
 }

+.btn-close {
+  filter: var(--btn-close-filter);
+}
+
 .table-hover tbody tr:hover {
  background-color: var(--secondary-color);
 }
--- a/src/servers/CreateServer.tsx
+++ b/src/servers/CreateServer.tsx
@ -61,7 +61,7 @@ const CreateServer = (ImportServersBtn: FC<ImportServersBtnProps>, useStateFlagT
        {!hasServers &&
          <ImportServersBtn tooltipPlacement="top" onImport={setServersImported} onImportError={setErrorImporting} />}
        {hasServers && <Button outline onClick={goBack}>Cancel</Button>}
-        <Button outline color="primary" className="ml-2">Create server</Button>
+        <Button outline color="primary" className="ms-2">Create server</Button>
      </ServerForm>

      {serversImported && <ImportResult type="success" />}
--- a/src/servers/EditServer.tsx
+++ b/src/servers/EditServer.tsx
@ -29,7 +29,7 @@ export const EditServer = (ServerError: FC) => withSelectedServer<EditServerProp
        initialValues={selectedServer}
        onSubmit={handleSubmit}
      >
-        <Button outline className="mr-2" onClick={goBack}>Cancel</Button>
+        <Button outline className="me-2" onClick={goBack}>Cancel</Button>
        <Button outline color="primary">Save</Button>
      </ServerForm>
    </NoMenuLayout>
--- a/src/servers/ManageServers.tsx
+++ b/src/servers/ManageServers.tsx
@ -45,12 +45,12 @@ export const ManageServers = (
        <div className="col-md-6 d-flex d-md-block mb-2 mb-md-0">
          <ImportServersBtn className="flex-fill" onImportError={setErrorImporting}>Import servers</ImportServersBtn>
          {allServers.length > 0 && (
-            <Button outline className="ml-2 flex-fill" onClick={async () => serversExporter.exportServers()}>
+            <Button outline className="ms-2 flex-fill" onClick={async () => serversExporter.exportServers()}>
              <FontAwesomeIcon icon={exportIcon} fixedWidth /> Export servers
            </Button>
          )}
        </div>
-        <div className="col-md-6 text-md-right d-flex d-md-block">
+        <div className="col-md-6 text-md-end d-flex d-md-block">
          <Button outline color="primary" className="flex-fill" tag={Link} to="/server/create">
            <FontAwesomeIcon icon={plusIcon} fixedWidth /> Add a server
          </Button>
@ -58,7 +58,7 @@ export const ManageServers = (
      </Row>

      <SimpleCard>
-        <table className="table table-hover mb-0">
+        <table className="table table-hover responsive-table mb-0">
          <thead className="responsive-table__header">
            <tr>
              {hasAutoConnect && <th style={{ width: '50px' }} />}
--- a/src/servers/ManageServersRow.tsx
+++ b/src/servers/ManageServersRow.tsx
@ -31,7 +31,7 @@ export const ManageServersRow = (
      <Link to={`/server/${server.id}`}>{server.name}</Link>
    </th>
    <td className="responsive-table__cell" data-th="Base URL">{server.url}</td>
-    <td className="responsive-table__cell text-right">
+    <td className="responsive-table__cell text-end">
      <ManageServersRowDropdown server={server} />
    </td>
  </tr>
--- a/src/servers/Overview.tsx
+++ b/src/servers/Overview.tsx
@ -86,7 +86,7 @@ export const Overview = (
        <CardHeader>
          <span className="d-sm-none">Create a short URL</span>
          <h5 className="d-none d-sm-inline">Create a short URL</h5>
-          <Link className="float-right" to={`/server/${serverId}/create-short-url`}>Advanced options &raquo;</Link>
+          <Link className="float-end" to={`/server/${serverId}/create-short-url`}>Advanced options &raquo;</Link>
        </CardHeader>
        <CardBody>
          <CreateShortUrl basicMode />
@ -96,7 +96,7 @@ export const Overview = (
        <CardHeader>
          <span className="d-sm-none">Recently created URLs</span>
          <h5 className="d-none d-sm-inline">Recently created URLs</h5>
-          <Link className="float-right" to={`/server/${serverId}/list-short-urls/1`}>See all &raquo;</Link>
+          <Link className="float-end" to={`/server/${serverId}/list-short-urls/1`}>See all &raquo;</Link>
        </CardHeader>
        <CardBody>
          <ShortUrlsTable
--- a/src/servers/ServersDropdown.tsx
+++ b/src/servers/ServersDropdown.tsx
@ -17,7 +17,7 @@ const ServersDropdown = ({ servers, selectedServer }: ServersDropdownProps) => {
    if (isEmpty(serversList)) {
      return (
        <DropdownItem tag={Link} to="/server/create">
-          <FontAwesomeIcon icon={plusIcon} /> <span className="ml-1">Add a server</span>
+          <FontAwesomeIcon icon={plusIcon} /> <span className="ms-1">Add a server</span>
        </DropdownItem>
      );
    }
@ -31,7 +31,7 @@ const ServersDropdown = ({ servers, selectedServer }: ServersDropdownProps) => {
        ))}
        <DropdownItem divider />
        <DropdownItem tag={Link} to="/manage-servers">
-          <FontAwesomeIcon icon={serverIcon} /> <span className="ml-1">Manage servers</span>
+          <FontAwesomeIcon icon={serverIcon} /> <span className="ms-1">Manage servers</span>
        </DropdownItem>
      </>
    );
@ -40,9 +40,9 @@ const ServersDropdown = ({ servers, selectedServer }: ServersDropdownProps) => {
  return (
    <UncontrolledDropdown nav inNavbar>
      <DropdownToggle nav caret>
-        <FontAwesomeIcon icon={serverIcon} /> <span className="ml-1">Servers</span>
+        <FontAwesomeIcon icon={serverIcon} /> <span className="ms-1">Servers</span>
      </DropdownToggle>
-      <DropdownMenu right>{renderServers()}</DropdownMenu>
+      <DropdownMenu right style={{ right: 0 }}>{renderServers()}</DropdownMenu>
    </UncontrolledDropdown>
  );
 };
--- a/src/servers/ServersListGroup.scss
+++ b/src/servers/ServersListGroup.scss
@ -17,6 +17,10 @@
  padding: .75rem 2.5rem .75rem 1rem;
 }

+.servers-list__server-item:not(:hover) {
+  color: $mainColor;
+}
+
 .servers-list__server-item:hover {
  background-color: var(--secondary-color);
 }
--- a/src/servers/helpers/ServerForm.scss
+++ b/src/servers/helpers/ServerForm.scss
@ -1,10 +0,0 @@
-@import '../../utils/base';
-
-.server-form .form-group:last-child {
-  margin-bottom: 0;
-}
-
-.server-form__label {
-  font-weight: 700;
-  cursor: pointer;
-}
--- a/src/servers/helpers/ServerForm.tsx
+++ b/src/servers/helpers/ServerForm.tsx
@ -1,9 +1,8 @@
 import { FC, ReactNode, useEffect, useState } from 'react';
-import { FormGroupContainer, FormGroupContainerProps } from '../../utils/FormGroupContainer';
+import { InputFormGroup } from '../../utils/forms/InputFormGroup';
 import { handleEventPreventingDefault } from '../../utils/utils';
 import { ServerData } from '../data';
 import { SimpleCard } from '../../utils/SimpleCard';
-import './ServerForm.scss';

 interface ServerFormProps {
  onSubmit: (server: ServerData) => void;
@ -11,9 +10,6 @@ interface ServerFormProps {
  title?: ReactNode;
 }

-const FormGroup: FC<FormGroupContainerProps> = (props) =>
-  <FormGroupContainer {...props} labelClassName="server-form__label" />;
-
 export const ServerForm: FC<ServerFormProps> = ({ onSubmit, initialValues, children, title }) => {
  const [ name, setName ] = useState('');
  const [ url, setUrl ] = useState('');
@ -29,12 +25,12 @@ export const ServerForm: FC<ServerFormProps> = ({ onSubmit, initialValues, child
  return (
    <form className="server-form" onSubmit={handleSubmit}>
      <SimpleCard className="mb-3" title={title}>
-        <FormGroup value={name} onChange={setName}>Name</FormGroup>
-        <FormGroup type="url" value={url} onChange={setUrl}>URL</FormGroup>
-        <FormGroup value={apiKey} onChange={setApiKey}>API key</FormGroup>
+        <InputFormGroup value={name} onChange={setName}>Name</InputFormGroup>
+        <InputFormGroup type="url" value={url} onChange={setUrl}>URL</InputFormGroup>
+        <InputFormGroup value={apiKey} onChange={setApiKey}>API key</InputFormGroup>
      </SimpleCard>

-      <div className="text-right">{children}</div>
+      <div className="text-end">{children}</div>
    </form>
  );
 };
--- a/src/settings/RealTimeUpdatesSettings.tsx
+++ b/src/settings/RealTimeUpdatesSettings.tsx
@ -2,6 +2,8 @@ import { FormGroup, Input } from 'reactstrap';
 import classNames from 'classnames';
 import ToggleSwitch from '../utils/ToggleSwitch';
 import { SimpleCard } from '../utils/SimpleCard';
+import { FormText } from '../utils/forms/FormText';
+import { LabeledFormGroup } from '../utils/forms/LabeledFormGroup';
 import { Settings } from './reducers/settings';

 interface RealTimeUpdatesProps {
@ -19,15 +21,16 @@ const RealTimeUpdatesSettings = (
    <FormGroup>
      <ToggleSwitch checked={realTimeUpdates.enabled} onChange={toggleRealTimeUpdates}>
        Enable or disable real-time updates.
-        <small className="form-text text-muted">
+        <FormText>
          Real-time updates are currently being <b>{realTimeUpdates.enabled ? 'processed' : 'ignored'}</b>.
-        </small>
+        </FormText>
      </ToggleSwitch>
    </FormGroup>
-    <FormGroup className="mb-0">
-      <label className={classNames({ 'text-muted': !realTimeUpdates.enabled })}>
-        Real-time updates frequency (in minutes):
-      </label>
+    <LabeledFormGroup
+      noMargin
+      label="Real-time updates frequency (in minutes):"
+      labelClassName={classNames('form-label', { 'text-muted': !realTimeUpdates.enabled })}
+    >
      <Input
        type="number"
        min={0}
@ -37,16 +40,16 @@ const RealTimeUpdatesSettings = (
        onChange={({ target }) => setRealTimeUpdatesInterval(Number(target.value))}
      />
      {realTimeUpdates.enabled && (
-        <small className="form-text text-muted">
+        <FormText>
          {realTimeUpdates.interval !== undefined && realTimeUpdates.interval > 0 && (
            <span>
              Updates will be reflected in the UI every <b>{realTimeUpdates.interval}</b> minute{realTimeUpdates.interval > 1 && 's'}.
            </span>
          )}
          {!realTimeUpdates.interval && 'Updates will be reflected in the UI as soon as they happen.'}
-        </small>
+        </FormText>
      )}
-    </FormGroup>
+    </LabeledFormGroup>
  </SimpleCard>
 );

--- a/src/settings/Settings.tsx
+++ b/src/settings/Settings.tsx
@ -18,16 +18,16 @@ const Settings = (
  Tags: FC,
 ) => () => (
  <NoMenuLayout>
-    <NavPills>
+    <NavPills className="mb-3">
      <NavPillItem to="general">General</NavPillItem>
      <NavPillItem to="short-urls">Short URLs</NavPillItem>
-      <NavPillItem to="secondary-items">Secondary items</NavPillItem>
+      <NavPillItem to="other-items">Other items</NavPillItem>
    </NavPills>

    <Routes>
      <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="secondary-items" element={<SettingsSections items={[ <Tags key="one" />, <Visits key="two" /> ]} />} />
+      <Route path="other-items" element={<SettingsSections items={[ <Tags key="one" />, <Visits key="two" /> ]} />} />
      <Route path="*" element={<Navigate replace to="general" />} />
    </Routes>
  </NoMenuLayout>
--- a/src/settings/ShortUrlCreationSettings.tsx
+++ b/src/settings/ShortUrlCreationSettings.tsx
@ -3,6 +3,8 @@ import { DropdownItem, FormGroup } from 'reactstrap';
 import { SimpleCard } from '../utils/SimpleCard';
 import ToggleSwitch from '../utils/ToggleSwitch';
 import { DropdownBtn } from '../utils/DropdownBtn';
+import { FormText } from '../utils/forms/FormText';
+import { LabeledFormGroup } from '../utils/forms/LabeledFormGroup';
 import { Settings, ShortUrlCreationSettings as ShortUrlsSettings, TagFilteringMode } from './reducers/settings';

 interface ShortUrlCreationProps {
@ -31,10 +33,10 @@ export const ShortUrlCreationSettings: FC<ShortUrlCreationProps> = ({ settings,
          onChange={(validateUrls) => setShortUrlCreationSettings({ ...shortUrlCreation, validateUrls })}
        >
          Request validation on long URLs when creating new short URLs.
-          <small className="form-text text-muted">
+          <FormText>
            The initial state of the <b>Validate URL</b> checkbox will
            be <b>{shortUrlCreation.validateUrls ? 'checked' : 'unchecked'}</b>.
-          </small>
+          </FormText>
        </ToggleSwitch>
      </FormGroup>
      <FormGroup>
@ -43,14 +45,13 @@ export const ShortUrlCreationSettings: FC<ShortUrlCreationProps> = ({ settings,
          onChange={(forwardQuery) => setShortUrlCreationSettings({ ...shortUrlCreation, forwardQuery })}
        >
          Make all new short URLs forward their query params to the long URL.
-          <small className="form-text text-muted">
+          <FormText>
            The initial state of the <b>Forward query params on redirect</b> checkbox will
            be <b>{shortUrlCreation.forwardQuery ?? true ? 'checked' : 'unchecked'}</b>.
-          </small>
+          </FormText>
        </ToggleSwitch>
      </FormGroup>
-      <FormGroup className="mb-0">
-        <label>Tag suggestions search mode:</label>
+      <LabeledFormGroup noMargin label="Tag suggestions search mode:">
        <DropdownBtn text={tagFilteringModeText(shortUrlCreation.tagFilteringMode)}>
          <DropdownItem
            active={!shortUrlCreation.tagFilteringMode || shortUrlCreation.tagFilteringMode === 'startsWith'}
@ -65,10 +66,8 @@ export const ShortUrlCreationSettings: FC<ShortUrlCreationProps> = ({ settings,
            {tagFilteringModeText('includes')}
          </DropdownItem>
        </DropdownBtn>
-        <small className="form-text text-muted">
-          {tagFilteringModeHint(shortUrlCreation.tagFilteringMode)}
-        </small>
-      </FormGroup>
+        <FormText>{tagFilteringModeHint(shortUrlCreation.tagFilteringMode)}</FormText>
+      </LabeledFormGroup>
    </SimpleCard>
  );
 };
--- a/src/settings/ShortUrlsListSettings.tsx
+++ b/src/settings/ShortUrlsListSettings.tsx
@ -1,8 +1,8 @@
 import { FC } from 'react';
-import { FormGroup } from 'reactstrap';
 import { OrderingDropdown } from '../utils/OrderingDropdown';
 import { SHORT_URLS_ORDERABLE_FIELDS } from '../short-urls/data';
 import { SimpleCard } from '../utils/SimpleCard';
+import { LabeledFormGroup } from '../utils/forms/LabeledFormGroup';
 import { DEFAULT_SHORT_URLS_ORDERING, Settings, ShortUrlsListSettings as ShortUrlsSettings } from './reducers/settings';

 interface ShortUrlsListProps {
@ -14,13 +14,12 @@ export const ShortUrlsListSettings: FC<ShortUrlsListProps> = (
  { settings: { shortUrlsList }, setShortUrlsListSettings },
 ) => (
  <SimpleCard title="Short URLs list" className="h-100">
-    <FormGroup className="mb-0">
-      <label>Default ordering for short URLs list:</label>
+    <LabeledFormGroup noMargin label="Default ordering for short URLs list:">
      <OrderingDropdown
        items={SHORT_URLS_ORDERABLE_FIELDS}
        order={shortUrlsList?.defaultOrdering ?? DEFAULT_SHORT_URLS_ORDERING}
        onChange={(field, dir) => setShortUrlsListSettings({ defaultOrdering: { field, dir } })}
      />
-    </FormGroup>
+    </LabeledFormGroup>
  </SimpleCard>
 );
--- a/src/settings/TagsSettings.tsx
+++ b/src/settings/TagsSettings.tsx
@ -1,10 +1,11 @@
 import { FC } from 'react';
-import { FormGroup } from 'reactstrap';
 import { SimpleCard } from '../utils/SimpleCard';
 import { TagsModeDropdown } from '../tags/TagsModeDropdown';
 import { capitalize } from '../utils/utils';
 import { OrderingDropdown } from '../utils/OrderingDropdown';
 import { TAGS_ORDERABLE_FIELDS } from '../tags/data/TagsListChildrenProps';
+import { FormText } from '../utils/forms/FormText';
+import { LabeledFormGroup } from '../utils/forms/LabeledFormGroup';
 import { Settings, TagsSettings as TagsSettingsOptions } from './reducers/settings';

 interface TagsProps {
@ -14,22 +15,20 @@ interface TagsProps {

 export const TagsSettings: FC<TagsProps> = ({ settings: { tags }, setTagsSettings }) => (
  <SimpleCard title="Tags" className="h-100">
-    <FormGroup>
-      <label>Default display mode when managing tags:</label>
+    <LabeledFormGroup label="Default display mode when managing tags:">
      <TagsModeDropdown
        mode={tags?.defaultMode ?? 'cards'}
        renderTitle={(tagsMode) => capitalize(tagsMode)}
        onChange={(defaultMode) => setTagsSettings({ ...tags, defaultMode })}
      />
-      <small className="form-text text-muted">Tags will be displayed as <b>{tags?.defaultMode ?? 'cards'}</b>.</small>
-    </FormGroup>
-    <FormGroup className="mb-0">
-      <label>Default ordering for tags list:</label>
+      <FormText>Tags will be displayed as <b>{tags?.defaultMode ?? 'cards'}</b>.</FormText>
+    </LabeledFormGroup>
+    <LabeledFormGroup noMargin label="Default ordering for tags list:">
      <OrderingDropdown
        items={TAGS_ORDERABLE_FIELDS}
        order={tags?.defaultOrdering ?? {}}
        onChange={(field, dir) => setTagsSettings({ ...tags, defaultOrdering: { field, dir } })}
      />
-    </FormGroup>
+    </LabeledFormGroup>
  </SimpleCard>
 );
--- a/src/settings/VisitsSettings.tsx
+++ b/src/settings/VisitsSettings.tsx
@ -1,7 +1,7 @@
-import { FormGroup } from 'reactstrap';
 import { FC } from 'react';
 import { SimpleCard } from '../utils/SimpleCard';
 import { DateIntervalSelector } from '../utils/dates/DateIntervalSelector';
+import { LabeledFormGroup } from '../utils/forms/LabeledFormGroup';
 import { Settings, VisitsSettings as VisitsSettingsConfig } from './reducers/settings';

 interface VisitsProps {
@ -11,13 +11,12 @@ interface VisitsProps {

 export const VisitsSettings: FC<VisitsProps> = ({ settings, setVisitsSettings }) => (
  <SimpleCard title="Visits" className="h-100">
-    <FormGroup className="mb-0">
-      <label>Default interval to load on visits sections:</label>
+    <LabeledFormGroup noMargin label="Default interval to load on visits sections:">
      <DateIntervalSelector
        allText="All visits"
        active={settings.visits?.defaultInterval ?? 'last30Days'}
        onChange={(defaultInterval) => setVisitsSettings({ defaultInterval })}
      />
-    </FormGroup>
+    </LabeledFormGroup>
  </SimpleCard>
 );
--- a/src/short-urls/EditShortUrl.tsx
+++ b/src/short-urls/EditShortUrl.tsx
@ -88,7 +88,7 @@ export const EditShortUrl = (ShortUrlForm: FC<ShortUrlFormProps>) => ({
      <header className="mb-3">
        <Card body>
          <h2 className="d-sm-flex justify-content-between align-items-center mb-0">
-            <Button color="link" size="lg" className="p-0 mr-3" onClick={goBack}>
+            <Button color="link" size="lg" className="p-0 me-3" onClick={goBack}>
              <FontAwesomeIcon icon={faArrowLeft} />
            </Button>
            <span className="text-center">
--- a/src/short-urls/ShortUrlForm.scss
+++ b/src/short-urls/ShortUrlForm.scss
@ -1,6 +1,5 @@
@import '../utils/base';

-.short-url-form .card-body > .form-group:last-child,
 .short-url-form p:last-child {
  margin-bottom: 0;
 }
--- a/src/short-urls/ShortUrlForm.tsx
+++ b/src/short-urls/ShortUrlForm.tsx
@ -1,5 +1,5 @@
 import { FC, useEffect, useState } from 'react';
-import { InputType } from 'reactstrap/lib/Input';
+import { InputType } from 'reactstrap/types/lib/Input';
 import { Button, FormGroup, Input, Row } from 'reactstrap';
 import { cond, isEmpty, pipe, replace, trim, T } from 'ramda';
 import classNames from 'classnames';
@ -86,15 +86,13 @@ export const ShortUrlForm = (
    </FormGroup>
  );
  const renderDateInput = (id: DateFields, placeholder: string, props: Partial<DateInputProps> = {}) => (
-    <div className="form-group">
-      <DateInput
-        selected={shortUrlData[id] ? toDate(shortUrlData[id] as string | Date) : null}
-        placeholderText={placeholder}
-        isClearable
-        onChange={(date) => setShortUrlData({ ...shortUrlData, [id]: date })}
-        {...props}
-      />
-    </div>
+    <DateInput
+      selected={shortUrlData[id] ? toDate(shortUrlData[id] as string | Date) : null}
+      placeholderText={placeholder}
+      isClearable
+      onChange={(date) => setShortUrlData({ ...shortUrlData, [id]: date })}
+      {...props}
+    />
  );
  const basicComponents = (
    <>
@ -110,9 +108,9 @@ export const ShortUrlForm = (
      </FormGroup>
      <Row>
        {isBasicMode && renderOptionalInput('customSlug', 'Custom slug', 'text', { bsSize: 'lg' }, { className: 'col-lg-6' })}
-        <FormGroup className={isBasicMode ? 'col-lg-6' : 'col-12 mb-0'}>
+        <div className={isBasicMode ? 'col-lg-6' : 'col-12 mb-0'}>
          <TagsSelector selectedTags={shortUrlData.tags ?? []} onChange={changeTags} />
-        </FormGroup>
+        </div>
      </Row>
    </>
  );
@ -154,12 +152,10 @@ export const ShortUrlForm = (
                          })}
                        </div>
                      </Row>
-                      <FormGroup>
-                        <DomainSelector
-                          value={shortUrlData.domain}
-                          onChange={(domain?: string) => setShortUrlData({ ...shortUrlData, domain })}
-                        />
-                      </FormGroup>
+                      <DomainSelector
+                        value={shortUrlData.domain}
+                        onChange={(domain?: string) => setShortUrlData({ ...shortUrlData, domain })}
+                      />
                    </>
                  )}
                </SimpleCard>
@ -169,7 +165,9 @@ export const ShortUrlForm = (
            <div className={limitAccessCardClasses}>
              <SimpleCard title="Limit access to the short URL">
                {renderOptionalInput('maxVisits', 'Maximum number of visits allowed', 'number', { min: 1 })}
-                {renderDateInput('validSince', 'Enabled since...', { maxDate: shortUrlData.validUntil ? toDate(shortUrlData.validUntil) : undefined })}
+                <div className="mb-3">
+                  {renderDateInput('validSince', 'Enabled since...', { maxDate: shortUrlData.validUntil ? toDate(shortUrlData.validUntil) : undefined })}
+                </div>
                {renderDateInput('validUntil', 'Enabled until...', { minDate: shortUrlData.validSince ? toDate(shortUrlData.validSince) : undefined })}
              </SimpleCard>
            </div>
@ -189,7 +187,7 @@ export const ShortUrlForm = (
                  <p>
                    <Checkbox
                      inline
-                      className="mr-2"
+                      className="me-2"
                      checked={shortUrlData.findIfExists}
                      onChange={(findIfExists) => setShortUrlData({ ...shortUrlData, findIfExists })}
                    >
--- a/src/short-urls/ShortUrlsFilteringBar.tsx
+++ b/src/short-urls/ShortUrlsFilteringBar.tsx
@ -67,7 +67,7 @@ const ShortUrlsFilteringBar = (colorGenerator: ColorGenerator) => ({ selectedSer
      {selectedTags.length > 0 && (
        <h4 className="mt-3">
          {canChangeTagsMode && selectedTags.length > 1 && (
-            <div className="float-right ml-2 mt-1">
+            <div className="float-end ms-2 mt-1">
              <TooltipToggleSwitch
                checked={tagsMode === 'all'}
                tooltip={{ placement: 'left' }}
@ -77,7 +77,7 @@ const ShortUrlsFilteringBar = (colorGenerator: ColorGenerator) => ({ selectedSer
              </TooltipToggleSwitch>
            </div>
          )}
-          <FontAwesomeIcon icon={tagsIcon} className="short-urls-filtering-bar__tags-icon mr-1" />
+          <FontAwesomeIcon icon={tagsIcon} className="short-urls-filtering-bar__tags-icon me-1" />
          {selectedTags.map((tag) =>
            <Tag colorGenerator={colorGenerator} key={tag} text={tag} clearable onClose={() => removeTag(tag)} />)}
        </h4>
--- a/src/short-urls/ShortUrlsTable.tsx
+++ b/src/short-urls/ShortUrlsTable.tsx
@ -28,7 +28,7 @@ export const ShortUrlsTable = (ShortUrlsRow: FC<ShortUrlsRowProps>) => ({
  const { error, loading, shortUrls } = shortUrlsList;
  const actionableFieldClasses = classNames({ 'short-urls-table__header-cell--with-action': !!orderByColumn });
  const orderableColumnsClasses = classNames('short-urls-table__header-cell', actionableFieldClasses);
-  const tableClasses = classNames('table table-hover', className);
+  const tableClasses = classNames('table table-hover responsive-table', className);
  const supportsTitle = supportsShortUrlTitle(selectedServer);

  const renderShortUrls = () => {
--- a/src/short-urls/helpers/CreateShortUrlResult.tsx
+++ b/src/short-urls/helpers/CreateShortUrlResult.tsx
@ -28,7 +28,7 @@ const CreateShortUrlResult = (useStateFlagTimeout: StateFlagTimeout) => (
  if (error) {
    return (
      <Result type="error" className="mt-3">
-        {canBeClosed && <FontAwesomeIcon icon={closeIcon} className="float-right pointer" onClick={resetCreateShortUrl} />}
+        {canBeClosed && <FontAwesomeIcon icon={closeIcon} className="float-end pointer" onClick={resetCreateShortUrl} />}
        <ShlinkApiError errorData={errorData} fallbackMessage="An error occurred while creating the URL :(" />
      </Result>
    );
@ -42,7 +42,7 @@ const CreateShortUrlResult = (useStateFlagTimeout: StateFlagTimeout) => (

  return (
    <Result type="success" className="mt-3">
-      {canBeClosed && <FontAwesomeIcon icon={closeIcon} className="float-right pointer" onClick={resetCreateShortUrl} />}
+      {canBeClosed && <FontAwesomeIcon icon={closeIcon} className="float-end pointer" onClick={resetCreateShortUrl} />}
      <b>Great!</b> The short URL is <b>{shortUrl}</b>

      <CopyToClipboard text={shortUrl} onCopy={setShowCopyTooltip}>
--- a/src/short-urls/helpers/QrCodeModal.tsx
+++ b/src/short-urls/helpers/QrCodeModal.tsx
@ -3,7 +3,6 @@ import { Modal, FormGroup, ModalBody, ModalHeader, Row, Button } from 'reactstra
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faFileDownload as downloadIcon } from '@fortawesome/free-solid-svg-icons';
 import { ExternalLink } from 'react-external-link';
-import classNames from 'classnames';
 import { ShortUrlModalProps } from '../data';
 import { SelectedServer } from '../../servers/data';
 import { CopyToClipboardIcon } from '../../utils/CopyToClipboardIcon';
@ -56,10 +55,8 @@ const QrCodeModal = (imageDownloader: ImageDownloader, ForServerVersion: FC<Vers
      </ModalHeader>
      <ModalBody>
        <Row>
-          <FormGroup
-            className={classNames({ 'col-md-4': willRenderThreeControls, 'col-md-6': !willRenderThreeControls })}
-          >
-            <label className="mb-0">Size: {size}px</label>
+          <FormGroup className={`d-grid ${willRenderThreeControls ? 'col-md-4' : 'col-md-6'}`}>
+            <label>Size: {size}px</label>
            <input
              type="range"
              className="form-control-range"
@ -71,8 +68,8 @@ const QrCodeModal = (imageDownloader: ImageDownloader, ForServerVersion: FC<Vers
            />
          </FormGroup>
          {capabilities.marginIsSupported && (
-            <FormGroup className={willRenderThreeControls ? 'col-md-4' : 'col-md-6'}>
-              <label className="mb-0">Margin: {margin}px</label>
+            <FormGroup className={`d-grid ${willRenderThreeControls ? 'col-md-4' : 'col-md-6'}`}>
+              <label>Margin: {margin}px</label>
              <input
                type="range"
                className="form-control-range"
@ -106,7 +103,7 @@ const QrCodeModal = (imageDownloader: ImageDownloader, ForServerVersion: FC<Vers
                color="primary"
                onClick={async () => imageDownloader.saveImage(qrCodeUrl, `${shortCode}-qr-code.${format}`)}
              >
-                Download <FontAwesomeIcon icon={downloadIcon} className="ml-1" />
+                Download <FontAwesomeIcon icon={downloadIcon} className="ms-1" />
              </Button>
            </div>
          </ForServerVersion>
--- a/src/short-urls/helpers/ShortUrlFormCheckboxGroup.tsx
+++ b/src/short-urls/helpers/ShortUrlFormCheckboxGroup.tsx
@ -12,7 +12,7 @@ export const ShortUrlFormCheckboxGroup: FC<ShortUrlFormCheckboxGroupProps> = (
  { children, infoTooltip, checked, onChange },
 ) => (
  <p>
-    <Checkbox inline checked={checked} className={infoTooltip ? 'mr-2' : ''} onChange={onChange}>
+    <Checkbox inline checked={checked} className={infoTooltip ? 'me-2' : ''} onChange={onChange}>
      {children}
    </Checkbox>
    {infoTooltip && <InfoTooltip placement="right">{infoTooltip}</InfoTooltip>}
--- a/src/short-urls/helpers/ShortUrlsRow.tsx
+++ b/src/short-urls/helpers/ShortUrlsRow.tsx
@ -59,7 +59,7 @@ const ShortUrlsRow = (
        <span className="indivisible short-urls-row__cell--relative">
          <ExternalLink href={shortUrl.shortUrl} />
          <CopyToClipboardIcon text={shortUrl.shortUrl} onCopy={setCopiedToClipboard} />
-          <span className="badge badge-warning short-urls-row__copy-hint" hidden={!copiedToClipboard}>
+          <span className="badge bg-warning text-black short-urls-row__copy-hint" hidden={!copiedToClipboard}>
            Copied short URL!
          </span>
        </span>
@ -73,7 +73,7 @@ const ShortUrlsRow = (
        </td>
      )}
      <td className="responsive-table__cell short-urls-row__cell" data-th="Tags">{renderTags(shortUrl.tags)}</td>
-      <td className="responsive-table__cell short-urls-row__cell text-lg-right" data-th="Visits">
+      <td className="responsive-table__cell short-urls-row__cell text-lg-end" data-th="Visits">
        <ShortUrlVisitsCount
          visitsCount={shortUrl.visitsCount}
          shortUrl={shortUrl}
--- a/src/tags/TagCard.tsx
+++ b/src/tags/TagCard.tsx
@ -64,14 +64,14 @@ const TagCard = (
            to={`/server/${serverId}/list-short-urls/1?tags=${encodeURIComponent(tag.tag)}`}
            className="btn btn-outline-secondary btn-block d-flex justify-content-between align-items-center mb-1"
          >
-            <span className="text-ellipsis"><FontAwesomeIcon icon={faLink} className="mr-2" />Short URLs</span>
+            <span className="text-ellipsis"><FontAwesomeIcon icon={faLink} className="me-2" />Short URLs</span>
            <b>{prettify(tag.shortUrls)}</b>
          </Link>
          <Link
            to={`/server/${serverId}/tag/${tag.tag}/visits`}
            className="btn btn-outline-secondary btn-block d-flex justify-content-between align-items-center"
          >
-            <span className="text-ellipsis"><FontAwesomeIcon icon={faEye} className="mr-2" />Visits</span>
+            <span className="text-ellipsis"><FontAwesomeIcon icon={faEye} className="me-2" />Visits</span>
            <b>{prettify(tag.visits)}</b>
          </Link>
        </CardBody>
--- a/src/tags/TagsModeDropdown.tsx
+++ b/src/tags/TagsModeDropdown.tsx
@ -14,10 +14,10 @@ interface TagsModeDropdownProps {
 export const TagsModeDropdown: FC<TagsModeDropdownProps> = ({ mode, onChange, renderTitle }) => (
  <DropdownBtn text={renderTitle?.(mode) ?? `Display mode: ${mode}`}>
    <DropdownItem active={mode === 'cards'} onClick={() => onChange('cards')}>
-      <FontAwesomeIcon icon={cardsIcon} fixedWidth className="mr-1" /> Cards
+      <FontAwesomeIcon icon={cardsIcon} fixedWidth className="me-1" /> Cards
    </DropdownItem>
    <DropdownItem active={mode === 'list'} onClick={() => onChange('list')}>
-      <FontAwesomeIcon icon={listIcon} fixedWidth className="mr-1" /> List
+      <FontAwesomeIcon icon={listIcon} fixedWidth className="me-1" /> List
    </DropdownItem>
  </DropdownBtn>
 );
--- a/src/tags/TagsTable.tsx
+++ b/src/tags/TagsTable.tsx
@ -38,16 +38,16 @@ export const TagsTable = (TagsTableRow: FC<TagsTableRowProps>) => (

  return (
    <SimpleCard key={page} bodyClassName={showPaginator ? 'pb-1' : ''}>
-      <table className="table table-hover mb-0">
+      <table className="table table-hover responsive-table mb-0">
        <thead className="responsive-table__header">
          <tr>
            <th className="tags-table__header-cell" onClick={orderByColumn('tag')}>
              Tag <TableOrderIcon currentOrder={currentOrder} field="tag" />
            </th>
-            <th className="tags-table__header-cell text-lg-right" onClick={orderByColumn('shortUrls')}>
+            <th className="tags-table__header-cell text-lg-end" onClick={orderByColumn('shortUrls')}>
              Short URLs <TableOrderIcon currentOrder={currentOrder} field="shortUrls" />
            </th>
-            <th className="tags-table__header-cell text-lg-right" onClick={orderByColumn('visits')}>
+            <th className="tags-table__header-cell text-lg-end" onClick={orderByColumn('visits')}>
              Visits <TableOrderIcon currentOrder={currentOrder} field="visits" />
            </th>
            <th className="tags-table__header-cell" />
--- a/src/tags/TagsTableRow.tsx
+++ b/src/tags/TagsTableRow.tsx
@ -31,23 +31,23 @@ export const TagsTableRow = (
      <th className="responsive-table__cell" data-th="Tag">
        <TagBullet tag={tag.tag} colorGenerator={colorGenerator} /> {tag.tag}
      </th>
-      <td className="responsive-table__cell text-lg-right" data-th="Short URLs">
+      <td className="responsive-table__cell text-lg-end" data-th="Short URLs">
        <Link to={`/server/${serverId}/list-short-urls/1?tags=${encodeURIComponent(tag.tag)}`}>
          {prettify(tag.shortUrls)}
        </Link>
      </td>
-      <td className="responsive-table__cell text-lg-right" data-th="Visits">
+      <td className="responsive-table__cell text-lg-end" data-th="Visits">
        <Link to={`/server/${serverId}/tag/${tag.tag}/visits`}>
          {prettify(tag.visits)}
        </Link>
      </td>
-      <td className="responsive-table__cell text-lg-right">
+      <td className="responsive-table__cell text-lg-end">
        <DropdownBtnMenu toggle={toggleDropdown} isOpen={isDropdownOpen}>
          <DropdownItem onClick={toggleEdit}>
-            <FontAwesomeIcon icon={editIcon} fixedWidth className="mr-1" /> Edit
+            <FontAwesomeIcon icon={editIcon} fixedWidth className="me-1" /> Edit
          </DropdownItem>
          <DropdownItem onClick={toggleDelete}>
-            <FontAwesomeIcon icon={deleteIcon} fixedWidth className="mr-1" /> Delete
+            <FontAwesomeIcon icon={deleteIcon} fixedWidth className="me-1" /> Delete
          </DropdownItem>
        </DropdownBtnMenu>
      </td>
--- a/src/tags/helpers/EditTagModal.tsx
+++ b/src/tags/helpers/EditTagModal.tsx
@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Button, Input, Modal, ModalBody, ModalFooter, ModalHeader, Popover } from 'reactstrap';
+import { Button, Input, Modal, ModalBody, ModalFooter, ModalHeader, Popover, InputGroup } from 'reactstrap';
 import { HexColorPicker } from 'react-colorful';
 import { faPalette as colorIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@ -37,14 +37,14 @@ const EditTagModal = ({ getColorForKey }: ColorGenerator) => (
      <form onSubmit={saveTag}>
        <ModalHeader toggle={toggle}>Edit tag</ModalHeader>
        <ModalBody>
-          <div className="input-group">
-            <div className="input-group-prepend" id="colorPickerBtn" onClick={toggleColorPicker}>
-              <div
-                className="input-group-text edit-tag-modal__color-picker-toggle"
-                style={{ backgroundColor: color, borderColor: color }}
-              >
-                <FontAwesomeIcon icon={colorIcon} className="edit-tag-modal__color-icon" />
-              </div>
+          <InputGroup>
+            <div
+              id="colorPickerBtn"
+              className="input-group-text edit-tag-modal__color-picker-toggle"
+              style={{ backgroundColor: color, borderColor: color }}
+              onClick={toggleColorPicker}
+            >
+              <FontAwesomeIcon icon={colorIcon} className="edit-tag-modal__color-icon" />
            </div>
            <Popover
              isOpen={showColorPicker}
@ -62,7 +62,7 @@ const EditTagModal = ({ getColorForKey }: ColorGenerator) => (
              required
              onChange={({ target }) => setNewTagName(target.value)}
            />
-          </div>
+          </InputGroup>

          {error && (
            <Result type="error" small className="mt-2">
--- a/src/tags/helpers/Tag.scss
+++ b/src/tags/helpers/Tag.scss
@ -3,7 +3,7 @@
 }

 .tag--light-bg {
-    color: #000;
+    color: #222 !important;
 }

 .tag:not(:last-child) {
--- a/src/theme/theme.scss
+++ b/src/theme/theme.scss
@ -4,7 +4,7 @@
 $lightPrimaryColor: #ffffff;
 $lightPrimaryColorAlfa: rgba($lightPrimaryColor, .5);
 $lightSecondaryColor: $lightColor;
-$lightTextColor: #212529;
+$lightTextColor: #232323;
 $lightBorderColor: rgba(0, 0, 0, .125);
 $lightTableBorderColor: $mediumGrey;
 $lightActiveColor: $lightGrey;
@ -44,6 +44,7 @@ html:not([data-theme='dark']) {
  --input-text-color: #{$lightInputTextColor};
  --table-border-color: #{$lightTableBorderColor};
  --table-highlight-color: #{$lightTableHighlightColor};
+  --btn-close-filter: initial;
 }

 html[data-theme='dark'] {
@ -60,4 +61,5 @@ html[data-theme='dark'] {
  --input-text-color: #{$darkInputTextColor};
  --table-border-color: #{$darkTableBorderColor};
  --table-highlight-color: #{$darkTableHighlightColor};
+  --btn-close-filter: invert(1);
 }
--- a/src/utils/BooleanControl.tsx
+++ b/src/utils/BooleanControl.tsx
@ -20,15 +20,15 @@ const BooleanControl: FC<BooleanControlWithTypeProps> = (
  const { current: id } = useRef(uuid());
  const onChecked = (e: ChangeEvent<HTMLInputElement>) => onChange(e.target.checked, e);
  const typeClasses = {
-    'custom-switch': type === 'switch',
-    'custom-checkbox': type === 'checkbox',
+    'form-switch': type === 'switch',
+    'form-checkbox': type === 'checkbox',
  };
  const style = inline ? { display: 'inline-block' } : {};

  return (
-    <span className={classNames('custom-control', typeClasses, className)} style={style}>
-      <input type="checkbox" className="custom-control-input" id={id} checked={checked} onChange={onChecked} />
-      <label className="custom-control-label" htmlFor={id}>{children}</label>
+    <span className={classNames('form-check', typeClasses, className)} style={style}>
+      <input type="checkbox" className="form-check-input" id={id} checked={checked} onChange={onChecked} />
+      <label className="form-check-label" htmlFor={id}>{children}</label>
    </span>
  );
 };
--- a/src/utils/CopyToClipboardIcon.tsx
+++ b/src/utils/CopyToClipboardIcon.tsx
@ -11,6 +11,6 @@ interface CopyToClipboardIconProps {

 export const CopyToClipboardIcon: FC<CopyToClipboardIconProps> = ({ text, onCopy }) => (
  <CopyToClipboard text={text} onCopy={onCopy}>
-    <FontAwesomeIcon icon={copyIcon} className="ml-2 copy-to-clipboard-icon" />
+    <FontAwesomeIcon icon={copyIcon} className="ms-2 copy-to-clipboard-icon" />
  </CopyToClipboard>
 );
--- a/src/utils/FormGroupContainer.tsx
+++ b/src/utils/FormGroupContainer.tsx
@ -1,38 +0,0 @@
-import { FC, useRef } from 'react';
-import { v4 as uuid } from 'uuid';
-import { InputType } from 'reactstrap/lib/Input';
-import { FormGroup } from 'reactstrap';
-
-export interface FormGroupContainerProps {
-  value: string;
-  onChange: (newValue: string) => void;
-  id?: string;
-  type?: InputType;
-  required?: boolean;
-  placeholder?: string;
-  className?: string;
-  labelClassName?: string;
-}
-
-export const FormGroupContainer: FC<FormGroupContainerProps> = (
-  { children, value, onChange, id, type, required, placeholder, className, labelClassName },
-) => {
-  const forId = useRef<string>(id ?? uuid());
-
-  return (
-    <FormGroup className={className ?? ''}>
-      <label htmlFor={forId.current} className={labelClassName ?? ''}>
-        {children}:
-      </label>
-      <input
-        className="form-control"
-        type={type ?? 'text'}
-        id={forId.current}
-        value={value}
-        required={required ?? true}
-        placeholder={placeholder}
-        onChange={(e) => onChange(e.target.value)}
-      />
-    </FormGroup>
-  );
-};
--- a/src/utils/Message.tsx
+++ b/src/utils/Message.tsx
@ -42,7 +42,7 @@ const Message: FC<MessageProps> = ({ className, children, loading = false, type
        <Card className={getClassForType(type)} body>
          <h3 className={classNames('text-center mb-0', getTextClassForType(type))}>
            {loading && <FontAwesomeIcon icon={preloader} spin />}
-            {loading && <span className="ml-2">{children ?? 'Loading...'}</span>}
+            {loading && <span className="ms-2">{children ?? 'Loading...'}</span>}
            {!loading && children}
          </h3>
        </Card>
--- a/src/utils/NavPills.scss
+++ b/src/utils/NavPills.scss
@ -6,13 +6,14 @@
  z-index: 2;
 }

-.nav-pills__nav-link {
+.nav-pills__nav-link.nav-pills__nav-link {
  border-radius: 0 !important;
  padding-bottom: calc(.5rem - 3px) !important;
-  border-bottom: 3px solid transparent;
+  border-bottom: 3px solid transparent !important;
  color: #5d6778;
  font-weight: 700;
  cursor: pointer;
+  text-decoration: none;

  @media (min-width: $smMin) and (max-width: $mdMax) {
    font-size: 89%;
@ -24,7 +25,7 @@
 }

 .nav-pills__nav-link.active {
-  border-color: $mainColor;
+  border-color: $mainColor !important;
  background-color: var(--primary-color) !important;
  color: $mainColor !important;
 }
--- a/src/utils/NavPills.tsx
+++ b/src/utils/NavPills.tsx
@ -3,6 +3,11 @@ import { Card, Nav, NavLink } from 'reactstrap';
 import { NavLink as RouterNavLink } from 'react-router-dom';
 import './NavPills.scss';

+interface NavPillsProps {
+  fill?: boolean;
+  className?: string;
+}
+
 interface NavPillProps {
  to: string;
  replace?: boolean;
@ -14,8 +19,8 @@ export const NavPillItem: FC<NavPillProps> = ({ children, ...rest }) => (
  </NavLink>
 );

-export const NavPills: FC<{ fill?: boolean }> = ({ children, fill = false }) => (
-  <Card className="nav-pills__nav p-0 overflow-hidden mb-3" body>
+export const NavPills: FC<NavPillsProps> = ({ children, fill = false, className = '' }) => (
+  <Card className={`nav-pills__nav p-0 overflow-hidden ${className}`} body>
    <Nav pills fill={fill}>
      {Children.map(children, (child) => {
        if (!isValidElement(child) || child.type !== NavPillItem) {
--- a/src/utils/SimpleCard.tsx
+++ b/src/utils/SimpleCard.tsx
@ -1,5 +1,4 @@
-import { CardProps } from 'reactstrap/lib/Card';
-import { Card, CardBody, CardHeader } from 'reactstrap';
+import { Card, CardBody, CardHeader, CardProps } from 'reactstrap';
 import { ReactNode } from 'react';

 interface SimpleCardProps extends Omit<CardProps, 'title'> {
--- a/src/utils/TooltipToggleSwitch.tsx
+++ b/src/utils/TooltipToggleSwitch.tsx
@ -1,6 +1,5 @@
 import { FC, useRef } from 'react';
-import { UncontrolledTooltip } from 'reactstrap';
-import { UncontrolledTooltipProps } from 'reactstrap/lib/Tooltip';
+import { UncontrolledTooltip, UncontrolledTooltipProps } from 'reactstrap';
 import { BooleanControlProps } from './BooleanControl';
 import ToggleSwitch from './ToggleSwitch';

--- a/src/utils/base.scss
+++ b/src/utils/base.scss
@ -24,6 +24,4 @@ $footer-height: 2.3rem;
 $footer-margin: .8rem;

 // Bootstrap overwrites
-$theme-colors: (
-  'primary': $mainColor
-);
+$primary: $mainColor;
--- a/src/utils/forms/FormText.tsx
+++ b/src/utils/forms/FormText.tsx
@ -0,0 +1,3 @@
+import { FC } from 'react';
+
+export const FormText: FC = ({ children }) => <small className="form-text text-muted d-block">{children}</small>;
--- a/src/utils/forms/InputFormGroup.tsx
+++ b/src/utils/forms/InputFormGroup.tsx
@ -0,0 +1,29 @@
+import { FC } from 'react';
+import { InputType } from 'reactstrap/types/lib/Input';
+import { LabeledFormGroup } from './LabeledFormGroup';
+
+export interface InputFormGroupProps {
+  value: string;
+  onChange: (newValue: string) => void;
+  id?: string;
+  type?: InputType;
+  required?: boolean;
+  placeholder?: string;
+  className?: string;
+  labelClassName?: string;
+}
+
+export const InputFormGroup: FC<InputFormGroupProps> = (
+  { children, value, onChange, type, required, placeholder, className, labelClassName },
+) => (
+  <LabeledFormGroup label={<>{children}:</>} className={className ?? ''} labelClassName={labelClassName}>
+    <input
+      className="form-control"
+      type={type ?? 'text'}
+      value={value}
+      required={required ?? true}
+      placeholder={placeholder}
+      onChange={(e) => onChange(e.target.value)}
+    />
+  </LabeledFormGroup>
+);
--- a/src/utils/forms/LabeledFormGroup.tsx
+++ b/src/utils/forms/LabeledFormGroup.tsx
@ -0,0 +1,17 @@
+import { FC, ReactNode } from 'react';
+
+interface LabeledFormGroupProps {
+  label: ReactNode;
+  noMargin?: boolean;
+  className?: string;
+  labelClassName?: string;
+}
+
+export const LabeledFormGroup: FC<LabeledFormGroupProps> = (
+  { children, label, className = '', labelClassName = '', noMargin = false },
+) => (
+  <div className={`${className} ${noMargin ? '' : 'mb-3'}`}>
+    <label className={`form-label ${labelClassName}`}>{label}</label>
+    {children}
+  </div>
+);
--- a/src/utils/mixins/sticky-cell.scss
+++ b/src/utils/mixins/sticky-cell.scss
@ -2,7 +2,6 @@

@mixin sticky-cell($with-separators: true) {
  z-index: 1;
-  border: none !important;
  position: relative;

  &:before {
--- a/src/utils/table/ResponsiveTable.scss
+++ b/src/utils/table/ResponsiveTable.scss
@ -6,11 +6,18 @@
  }
 }

+.responsive-table.table > :not(:first-child) {
+  @media (max-width: $responsiveTableBreakpoint) {
+    border: none;
+  }
+}
+
 .responsive-table__row {
  @media (max-width: $responsiveTableBreakpoint) {
    display: block;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
+    border-top: 2px solid var(--border-color);
    position: relative;
  }
 }
@ -40,3 +47,10 @@
    }
  }
 }
+
+.responsive-table__cell.responsive-table__cell .btn-sm {
+  @media (max-width: $responsiveTableBreakpoint) {
+    padding: 0.1rem 0.4rem;
+    margin-top: 0.16rem;
+  }
+}
--- a/src/utils/table/TableOrderIcon.tsx
+++ b/src/utils/table/TableOrderIcon.tsx
@ -9,7 +9,7 @@ interface TableOrderIconProps<T> {
 }

 export function TableOrderIcon<T extends string = string>(
-  { currentOrder, field, className = 'ml-1' }: TableOrderIconProps<T>,
+  { currentOrder, field, className = 'ms-1' }: TableOrderIconProps<T>,
 ) {
  if (!currentOrder.dir || currentOrder.field !== field) {
    return null;
--- a/src/utils/theme/index.ts
+++ b/src/utils/theme/index.ts
@ -12,14 +12,8 @@ export const PRIMARY_DARK_COLOR = '#161b22';

 export type Theme = 'dark' | 'light';

-export const changeThemeInMarkup = (theme: Theme) => {
-  const html = document.getElementsByTagName('html');
+export const changeThemeInMarkup = (theme: Theme) =>
+  document.getElementsByTagName('html')?.[0]?.setAttribute('data-theme', theme);

-  html?.[0]?.setAttribute('data-theme', theme);
-};
-
-export const isDarkThemeEnabled = (): boolean => {
-  const html = document.getElementsByTagName('html');
-
-  return html?.[0]?.getAttribute('data-theme') === 'dark';
-};
+export const isDarkThemeEnabled = (): boolean =>
+  document.getElementsByTagName('html')?.[0]?.getAttribute('data-theme') === 'dark';
--- a/src/visits/TagVisitsHeader.tsx
+++ b/src/visits/TagVisitsHeader.tsx
@ -15,7 +15,7 @@ const TagVisitsHeader = ({ tagVisits, goBack, colorGenerator }: TagVisitsHeaderP

  const visitsStatsTitle = (
    <span className="d-flex align-items-center justify-content-center">
-      <span className="mr-2">Visits for</span>
+      <span className="me-2">Visits for</span>
      <Tag text={tag} colorGenerator={colorGenerator} />
    </span>
  );
--- a/src/visits/VisitsHeader.tsx
+++ b/src/visits/VisitsHeader.tsx
@ -17,13 +17,13 @@ const VisitsHeader: FC<VisitsHeaderProps> = ({ visits, goBack, shortUrl, childre
  <header>
    <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}>
+        <Button color="link" size="lg" className="p-0 me-3" onClick={goBack}>
          <FontAwesomeIcon icon={faArrowLeft} />
        </Button>
        <span className="text-center d-none d-sm-block">
          <small>{title}</small>
        </span>
-        <span className="badge badge-main ml-3">
+        <span className="badge badge-main ms-3">
          Visits:{' '}
          <ShortUrlVisitsCount visitsCount={visits.length} shortUrl={shortUrl} />
        </span>
--- a/src/visits/VisitsStats.tsx
+++ b/src/visits/VisitsStats.tsx
@ -147,7 +147,7 @@ const VisitsStats: FC<VisitsStatsProps> = ({
          {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>
+              <span className="ms-2 d-none d-sm-inline">{title}</span>
            </NavPillItem>
          ))}
        </NavPills>
@ -289,7 +289,7 @@ const VisitsStats: FC<VisitsStatsProps> = ({
                />
              </div>
              <VisitsFilterDropdown
-                className="ml-0 ml-md-2 mt-3 mt-md-0"
+                className="ms-0 ms-md-2 mt-3 mt-md-0"
                isOrphanVisits={isOrphanVisits}
                botsSupported={botsSupported}
                selected={visitsFilter}
@ -303,7 +303,7 @@ const VisitsStats: FC<VisitsStatsProps> = ({
                <Button
                  outline
                  disabled={highlightedVisits.length === 0}
-                  className="btn-md-block mr-2"
+                  className="btn-md-block me-2"
                  onClick={() => setSelectedVisits([])}
                >
                  Clear selection {highlightedVisits.length > 0 && <>({prettify(highlightedVisits.length)})</>}
--- a/src/visits/VisitsTable.tsx
+++ b/src/visits/VisitsTable.tsx
@ -87,137 +87,139 @@ const VisitsTable = ({
  }, [ searchTerm ]);

  return (
-    <table className="table table-bordered table-hover table-sm table-responsive-sm visits-table">
-      <thead className="visits-table__header">
-        <tr>
-          <th
-            className={`${headerCellsClass} text-center`}
-            onClick={() => setSelectedVisits(
-              selectedVisits.length < resultSet.total ? resultSet.visitsGroups.flat() : [],
-            )}
-          >
-            <FontAwesomeIcon icon={checkIcon} className={classNames({ 'text-primary': selectedVisits.length > 0 })} />
-          </th>
-          {supportsBots && (
-            <th className={`${headerCellsClass} text-center`} onClick={orderByColumn('potentialBot')}>
-              <FontAwesomeIcon icon={botIcon} />
-              {renderOrderIcon('potentialBot')}
-            </th>
-          )}
-          <th className={headerCellsClass} onClick={orderByColumn('date')}>
-            Date
-            {renderOrderIcon('date')}
-          </th>
-          <th className={headerCellsClass} onClick={orderByColumn('country')}>
-            Country
-            {renderOrderIcon('country')}
-          </th>
-          <th className={headerCellsClass} onClick={orderByColumn('city')}>
-            City
-            {renderOrderIcon('city')}
-          </th>
-          <th className={headerCellsClass} onClick={orderByColumn('browser')}>
-            Browser
-            {renderOrderIcon('browser')}
-          </th>
-          <th className={headerCellsClass} onClick={orderByColumn('os')}>
-            OS
-            {renderOrderIcon('os')}
-          </th>
-          <th className={headerCellsClass} onClick={orderByColumn('referer')}>
-            Referrer
-            {renderOrderIcon('referer')}
-          </th>
-          {isOrphanVisits && (
-            <th className={headerCellsClass} onClick={orderByColumn('visitedUrl')}>
-              Visited URL
-              {renderOrderIcon('visitedUrl')}
-            </th>
-          )}
-        </tr>
-        <tr>
-          <td colSpan={fullSizeColSpan} className="p-0">
-            <SearchField noBorder large={false} onChange={setSearchTerm} />
-          </td>
-        </tr>
-      </thead>
-      <tbody>
-        {!resultSet.visitsGroups[page - 1]?.length && (
+    <div className="table-responsive-md">
+      <table className="table table-bordered table-hover table-sm visits-table">
+        <thead className="visits-table__header">
          <tr>
-            <td colSpan={fullSizeColSpan} className="text-center">
-              No visits found with current filtering
-            </td>
-          </tr>
-        )}
-        {resultSet.visitsGroups[page - 1]?.map((visit, index) => {
-          const isSelected = selectedVisits.includes(visit);
-
-          return (
-            <tr
-              key={index}
-              style={{ cursor: 'pointer' }}
-              className={classNames({ 'table-active': isSelected })}
+            <th
+              className={`${headerCellsClass} text-center`}
              onClick={() => setSelectedVisits(
-                isSelected ? selectedVisits.filter((v) => v !== visit) : [ ...selectedVisits, visit ],
+                selectedVisits.length < resultSet.total ? resultSet.visitsGroups.flat() : [],
              )}
            >
-              <td className="text-center">
-                {isSelected && <FontAwesomeIcon icon={checkIcon} className="text-primary" />}
-              </td>
-              {supportsBots && (
-                <td className="text-center">
-                  {visit.potentialBot && (
-                    <>
-                      <FontAwesomeIcon icon={botIcon} id={`botIcon${index}`} />
-                      <UncontrolledTooltip placement="right" target={`botIcon${index}`}>
-                        Potentially a visit from a bot or crawler
-                      </UncontrolledTooltip>
-                    </>
-                  )}
-                </td>
-              )}
-              <td><Time date={visit.date} /></td>
-              <td>{visit.country}</td>
-              <td>{visit.city}</td>
-              <td>{visit.browser}</td>
-              <td>{visit.os}</td>
-              <td>{visit.referer}</td>
-              {isOrphanVisits && <td>{(visit as NormalizedOrphanVisit).visitedUrl}</td>}
-            </tr>
-          );
-        })}
-      </tbody>
-      {resultSet.total > PAGE_SIZE && (
-        <tfoot>
+              <FontAwesomeIcon icon={checkIcon} className={classNames({ 'text-primary': selectedVisits.length > 0 })} />
+            </th>
+            {supportsBots && (
+              <th className={`${headerCellsClass} text-center`} onClick={orderByColumn('potentialBot')}>
+                <FontAwesomeIcon icon={botIcon} />
+                {renderOrderIcon('potentialBot')}
+              </th>
+            )}
+            <th className={headerCellsClass} onClick={orderByColumn('date')}>
+              Date
+              {renderOrderIcon('date')}
+            </th>
+            <th className={headerCellsClass} onClick={orderByColumn('country')}>
+              Country
+              {renderOrderIcon('country')}
+            </th>
+            <th className={headerCellsClass} onClick={orderByColumn('city')}>
+              City
+              {renderOrderIcon('city')}
+            </th>
+            <th className={headerCellsClass} onClick={orderByColumn('browser')}>
+              Browser
+              {renderOrderIcon('browser')}
+            </th>
+            <th className={headerCellsClass} onClick={orderByColumn('os')}>
+              OS
+              {renderOrderIcon('os')}
+            </th>
+            <th className={headerCellsClass} onClick={orderByColumn('referer')}>
+              Referrer
+              {renderOrderIcon('referer')}
+            </th>
+            {isOrphanVisits && (
+              <th className={headerCellsClass} onClick={orderByColumn('visitedUrl')}>
+                Visited URL
+                {renderOrderIcon('visitedUrl')}
+              </th>
+            )}
+          </tr>
          <tr>
-            <td colSpan={fullSizeColSpan} className="visits-table__footer-cell visits-table__sticky">
-              <div className="row">
-                <div className="col-md-6">
-                  <SimplePaginator
-                    pagesCount={Math.ceil(resultSet.total / PAGE_SIZE)}
-                    currentPage={page}
-                    setCurrentPage={setPage}
-                    centered={isMobileDevice}
-                  />
-                </div>
-                <div
-                  className={classNames('col-md-6', {
-                    'd-flex align-items-center flex-row-reverse': !isMobileDevice,
-                    'text-center mt-3': isMobileDevice,
-                  })}
-                >
-                  <div>
-                    Visits <b>{prettify(start + 1)}</b> to{' '}
-                    <b>{prettify(min(end, resultSet.total))}</b> of{' '}
-                    <b>{prettify(resultSet.total)}</b>
-                  </div>
-                </div>
-              </div>
+            <td colSpan={fullSizeColSpan} className="p-0">
+              <SearchField noBorder large={false} onChange={setSearchTerm} />
            </td>
          </tr>
-        </tfoot>
-      )}
-    </table>
+        </thead>
+        <tbody>
+          {!resultSet.visitsGroups[page - 1]?.length && (
+            <tr>
+              <td colSpan={fullSizeColSpan} className="text-center">
+                No visits found with current filtering
+              </td>
+            </tr>
+          )}
+          {resultSet.visitsGroups[page - 1]?.map((visit, index) => {
+            const isSelected = selectedVisits.includes(visit);
+
+            return (
+              <tr
+                key={index}
+                style={{ cursor: 'pointer' }}
+                className={classNames({ 'table-active': isSelected })}
+                onClick={() => setSelectedVisits(
+                  isSelected ? selectedVisits.filter((v) => v !== visit) : [ ...selectedVisits, visit ],
+                )}
+              >
+                <td className="text-center">
+                  {isSelected && <FontAwesomeIcon icon={checkIcon} className="text-primary" />}
+                </td>
+                {supportsBots && (
+                  <td className="text-center">
+                    {visit.potentialBot && (
+                      <>
+                        <FontAwesomeIcon icon={botIcon} id={`botIcon${index}`} />
+                        <UncontrolledTooltip placement="right" target={`botIcon${index}`}>
+                          Potentially a visit from a bot or crawler
+                        </UncontrolledTooltip>
+                      </>
+                    )}
+                  </td>
+                )}
+                <td><Time date={visit.date} /></td>
+                <td>{visit.country}</td>
+                <td>{visit.city}</td>
+                <td>{visit.browser}</td>
+                <td>{visit.os}</td>
+                <td>{visit.referer}</td>
+                {isOrphanVisits && <td>{(visit as NormalizedOrphanVisit).visitedUrl}</td>}
+              </tr>
+            );
+          })}
+        </tbody>
+        {resultSet.total > PAGE_SIZE && (
+          <tfoot>
+            <tr>
+              <td colSpan={fullSizeColSpan} className="visits-table__footer-cell visits-table__sticky">
+                <div className="row">
+                  <div className="col-md-6">
+                    <SimplePaginator
+                      pagesCount={Math.ceil(resultSet.total / PAGE_SIZE)}
+                      currentPage={page}
+                      setCurrentPage={setPage}
+                      centered={isMobileDevice}
+                    />
+                  </div>
+                  <div
+                    className={classNames('col-md-6', {
+                      'd-flex align-items-center flex-row-reverse': !isMobileDevice,
+                      'text-center mt-3': isMobileDevice,
+                    })}
+                  >
+                    <div>
+                      Visits <b>{prettify(start + 1)}</b> to{' '}
+                      <b>{prettify(min(end, resultSet.total))}</b> of{' '}
+                      <b>{prettify(resultSet.total)}</b>
+                    </div>
+                  </div>
+                </div>
+              </td>
+            </tr>
+          </tfoot>
+        )}
+      </table>
+    </div>
  );
 };

--- a/src/visits/charts/LineChartCard.tsx
+++ b/src/visits/charts/LineChartCard.tsx
@ -232,7 +232,7 @@ const LineChartCard = (
    <Card>
      <CardHeader>
        {title}
-        <div className="float-right">
+        <div className="float-end">
          <UncontrolledDropdown>
            <DropdownToggle caret color="link" className="btn-sm p-0">
              Group by
@ -246,7 +246,7 @@ const LineChartCard = (
            </DropdownMenu>
          </UncontrolledDropdown>
        </div>
-        <div className="float-right mr-2">
+        <div className="float-end me-2">
          <ToggleSwitch checked={skipNoVisits} onChange={toggleSkipNoVisits}>
            <small>Skip dates with no visits</small>
          </ToggleSwitch>
--- a/src/visits/charts/SortableBarChartCard.tsx
+++ b/src/visits/charts/SortableBarChartCard.tsx
@ -95,7 +95,7 @@ export const SortableBarChartCard: FC<SortableBarChartCardProps> = ({
  const computeTitle = () => (
    <>
      {title}
-      <div className="float-right">
+      <div className="float-end">
        <OrderingDropdown
          isButton={false}
          right
@ -108,9 +108,9 @@ export const SortableBarChartCard: FC<SortableBarChartCardProps> = ({
        />
      </div>
      {withPagination && Object.keys(stats).length > 50 && (
-        <div className="float-right">
+        <div className="float-end">
          <PaginationDropdown
-            toggleClassName="btn-sm p-0 mr-3"
+            toggleClassName="btn-sm p-0 me-3"
            ranges={[ 50, 100, 200, 500 ]}
            value={itemsPerPage}
            setValue={(itemsPerPage) => {
@ -121,7 +121,7 @@ export const SortableBarChartCard: FC<SortableBarChartCardProps> = ({
        </div>
      )}
      {extraHeaderContent && (
-        <div className="float-right">
+        <div className="float-end">
          {extraHeaderContent(pagination ? activeCities : undefined)}
        </div>
      )}
--- a/src/visits/helpers/MapModal.tsx
+++ b/src/visits/helpers/MapModal.tsx
@ -40,7 +40,7 @@ const MapModal = ({ toggle, isOpen, title, locations = [] }: MapModalProps) => (
    <ModalBody className="map-modal__modal-body">
      <h3 className="map-modal__modal-title">
        {title}
-        <button type="button" className="close" onClick={toggle}>&times;</button>
+        <button type="button" className="btn-close float-end" onClick={toggle} />
      </h3>
      <MapContainer {...calculateMapProps(locations)}>
        <OpenStreetMapTile />
--- a/src/visits/helpers/VisitsFilterDropdown.tsx
+++ b/src/visits/helpers/VisitsFilterDropdown.tsx
@ -1,4 +1,4 @@
-import { DropdownItem, DropdownItemProps } from 'reactstrap'; // eslint-disable-line import/named
+import { DropdownItem, DropdownItemProps } from 'reactstrap';
 import { OrphanVisitType, VisitsFilter } from '../types';
 import { DropdownBtn } from '../../utils/DropdownBtn';
 import { hasValue } from '../../utils/utils';
@ -26,7 +26,7 @@ export const VisitsFilterDropdown = (
  const onBotsClick = () => onChange({ ...selected, excludeBots: !selected?.excludeBots });

  return (
-    <DropdownBtn text="Filters" dropdownClassName={className} className="mr-3" right minWidth={250}>
+    <DropdownBtn text="Filters" dropdownClassName={className} className="me-3" right minWidth={250}>
      {botsSupported && (
        <>
          <DropdownItem header>Bots:</DropdownItem>
--- a/test/domains/DomainSelector.test.tsx
+++ b/test/domains/DomainSelector.test.tsx
@ -54,7 +54,7 @@ describe('<DomainSelector />', () => {
  });

  it.each([
-    [ 0, 'default.com<span class="float-right text-muted">default</span>' ],
+    [ 0, 'default.com<span class="float-end text-muted">default</span>' ],
    [ 1, 'foo.com' ],
    [ 2, 'bar.com' ],
  ])('shows expected content on every item', (index, expectedContent) => {
--- a/test/servers/helpers/ServerForm.test.tsx
+++ b/test/servers/helpers/ServerForm.test.tsx
@ -1,5 +1,6 @@
 import { shallow, ShallowWrapper } from 'enzyme';
 import { ServerForm } from '../../../src/servers/helpers/ServerForm';
+import { InputFormGroup } from '../../../src/utils/forms/InputFormGroup';

 describe('<ServerForm />', () => {
  let wrapper: ShallowWrapper;
@ -13,7 +14,7 @@ describe('<ServerForm />', () => {
  afterEach(jest.resetAllMocks);

  it('renders components', () => {
-    expect(wrapper.find('FormGroup')).toHaveLength(3);
+    expect(wrapper.find(InputFormGroup)).toHaveLength(3);
    expect(wrapper.find('span')).toHaveLength(1);
  });

--- a/test/settings/RealTimeUpdatesSettings.test.tsx
+++ b/test/settings/RealTimeUpdatesSettings.test.tsx
@ -1,12 +1,14 @@
 import { shallow, ShallowWrapper } from 'enzyme';
 import { Mock } from 'ts-mockery';
 import { Input } from 'reactstrap';
+import { FormText } from '../../src/utils/forms/FormText';
 import {
  RealTimeUpdatesSettings as RealTimeUpdatesSettingsOptions,
  Settings,
 } from '../../src/settings/reducers/settings';
 import RealTimeUpdatesSettings from '../../src/settings/RealTimeUpdatesSettings';
 import ToggleSwitch from '../../src/utils/ToggleSwitch';
+import { LabeledFormGroup } from '../../src/utils/forms/LabeledFormGroup';

 describe('<RealTimeUpdatesSettings />', () => {
  const toggleRealTimeUpdates = jest.fn();
@ -32,31 +34,31 @@ describe('<RealTimeUpdatesSettings />', () => {
  it('renders enabled real time updates as expected', () => {
    const wrapper = createWrapper({ enabled: true });
    const toggle = wrapper.find(ToggleSwitch);
-    const label = wrapper.find('label');
+    const label = wrapper.find(LabeledFormGroup);
    const input = wrapper.find(Input);
-    const small = wrapper.find('small');
+    const formText = wrapper.find(FormText);

    expect(toggle.prop('checked')).toEqual(true);
    expect(toggle.html()).toContain('processed');
    expect(toggle.html()).not.toContain('ignored');
-    expect(label.prop('className')).toEqual('');
+    expect(label.prop('labelClassName')).not.toContain('text-muted');
    expect(input.prop('disabled')).toEqual(false);
-    expect(small).toHaveLength(2);
+    expect(formText).toHaveLength(2);
  });

  it('renders disabled real time updates as expected', () => {
    const wrapper = createWrapper({ enabled: false });
    const toggle = wrapper.find(ToggleSwitch);
-    const label = wrapper.find('label');
+    const label = wrapper.find(LabeledFormGroup);
    const input = wrapper.find(Input);
-    const small = wrapper.find('small');
+    const formText = wrapper.find(FormText);

    expect(toggle.prop('checked')).toEqual(false);
    expect(toggle.html()).not.toContain('processed');
    expect(toggle.html()).toContain('ignored');
-    expect(label.prop('className')).toEqual('text-muted');
+    expect(label.prop('labelClassName')).toContain('text-muted');
    expect(input.prop('disabled')).toEqual(true);
-    expect(small).toHaveLength(1);
+    expect(formText).toHaveLength(1);
  });

  it.each([
@ -79,11 +81,11 @@ describe('<RealTimeUpdatesSettings />', () => {
  it.each([[ undefined ], [ 0 ]])('shows expected children when interval is 0 or undefined', (interval) => {
    const wrapper = createWrapper({ enabled: true, interval });
    const span = wrapper.find('span');
-    const small = wrapper.find('small').at(1);
+    const formText = wrapper.find(FormText).at(1);
    const input = wrapper.find(Input);

    expect(span).toHaveLength(0);
-    expect(small.html()).toContain('Updates will be reflected in the UI as soon as they happen.');
+    expect(formText.html()).toContain('Updates will be reflected in the UI as soon as they happen.');
    expect(input.prop('value')).toEqual('');
  });

--- a/test/settings/Settings.test.tsx
+++ b/test/settings/Settings.test.tsx
@ -24,6 +24,6 @@ describe('<Settings />', () => {
    expect(items).toHaveLength(3);
    expect(items.first().prop('to')).toEqual('general');
    expect(items.at(1).prop('to')).toEqual('short-urls');
-    expect(items.last().prop('to')).toEqual('secondary-items');
+    expect(items.last().prop('to')).toEqual('other-items');
  });
 });
--- a/test/settings/ShortUrlCreationSettings.test.tsx
+++ b/test/settings/ShortUrlCreationSettings.test.tsx
@ -3,6 +3,7 @@ import { Mock } from 'ts-mockery';
 import { DropdownItem } from 'reactstrap';
 import { ShortUrlCreationSettings as ShortUrlsSettings, Settings } from '../../src/settings/reducers/settings';
 import { ShortUrlCreationSettings } from '../../src/settings/ShortUrlCreationSettings';
+import { FormText } from '../../src/utils/forms/FormText';
 import ToggleSwitch from '../../src/utils/ToggleSwitch';
 import { DropdownBtn } from '../../src/utils/DropdownBtn';

@ -46,25 +47,25 @@ describe('<ShortUrlCreationSettings />', () => {
  });

  it.each([
-    [{ validateUrls: true }, 'Validate URL checkbox will be checked' ],
-    [{ validateUrls: false }, 'Validate URL checkbox will be unchecked' ],
-    [ undefined, 'Validate URL checkbox will be unchecked' ],
+    [{ validateUrls: true }, '<b>Validate URL</b> checkbox will be <b>checked</b>' ],
+    [{ validateUrls: false }, '<b>Validate URL</b> checkbox will be <b>unchecked</b>' ],
+    [ undefined, '<b>Validate URL</b> checkbox will be <b>unchecked</b>' ],
  ])('shows expected helper text for URL validation', (shortUrlCreation, expectedText) => {
    const wrapper = createWrapper(shortUrlCreation);
-    const validateUrlText = wrapper.find('.form-text').first();
+    const validateUrlText = wrapper.find(FormText).first();

-    expect(validateUrlText.text()).toContain(expectedText);
+    expect(validateUrlText.html()).toContain(expectedText);
  });

  it.each([
-    [{ forwardQuery: true }, 'Forward query params on redirect checkbox will be checked' ],
-    [{ forwardQuery: false }, 'Forward query params on redirect checkbox will be unchecked' ],
-    [{}, 'Forward query params on redirect checkbox will be checked' ],
+    [{ forwardQuery: true }, '<b>Forward query params on redirect</b> checkbox will be <b>checked</b>' ],
+    [{ forwardQuery: false }, '<b>Forward query params on redirect</b> checkbox will be <b>unchecked</b>' ],
+    [{}, '<b>Forward query params on redirect</b> checkbox will be <b>checked</b>' ],
  ])('shows expected helper text for query forwarding', (shortUrlCreation, expectedText) => {
    const wrapper = createWrapper({ validateUrls: true, ...shortUrlCreation });
-    const forwardQueryText = wrapper.find('.form-text').at(1);
+    const forwardQueryText = wrapper.find(FormText).at(1);

-    expect(forwardQueryText.text()).toContain(expectedText);
+    expect(forwardQueryText.html()).toContain(expectedText);
  });

  it.each([
@ -77,11 +78,11 @@ describe('<ShortUrlCreationSettings />', () => {
    [ undefined, 'Suggest tags starting with input', 'starting with' ],
  ])('shows expected texts for tags suggestions', (shortUrlCreation, expectedText, expectedHint) => {
    const wrapper = createWrapper(shortUrlCreation);
-    const hintText = wrapper.find('.form-text').last();
+    const hintText = wrapper.find(FormText).last();
    const dropdown = wrapper.find(DropdownBtn);

    expect(dropdown.prop('text')).toEqual(expectedText);
-    expect(hintText.text()).toContain(expectedHint);
+    expect(hintText.html()).toContain(expectedHint);
  });

  it.each([[ true ], [ false ]])('invokes setShortUrlCreationSettings when URL validation toggle value changes', (validateUrls) => {
--- a/test/settings/TagsSettings.test.tsx
+++ b/test/settings/TagsSettings.test.tsx
@ -1,11 +1,12 @@
 import { shallow, ShallowWrapper } from 'enzyme';
 import { Mock } from 'ts-mockery';
-import { FormGroup } from 'reactstrap';
 import { Settings, TagsMode, TagsSettings as TagsSettingsOptions } from '../../src/settings/reducers/settings';
 import { TagsModeDropdown } from '../../src/tags/TagsModeDropdown';
 import { TagsSettings } from '../../src/settings/TagsSettings';
 import { OrderingDropdown } from '../../src/utils/OrderingDropdown';
 import { TagsOrder } from '../../src/tags/data/TagsListChildrenProps';
+import { LabeledFormGroup } from '../../src/utils/forms/LabeledFormGroup';
+import { FormText } from '../../src/utils/forms/FormText';

 describe('<TagsSettings />', () => {
  let wrapper: ShallowWrapper;
@ -21,7 +22,7 @@ describe('<TagsSettings />', () => {

  it('renders expected amount of groups', () => {
    const wrapper = createWrapper();
-    const groups = wrapper.find(FormGroup);
+    const groups = wrapper.find(LabeledFormGroup);

    expect(groups).toHaveLength(2);
  });
@ -34,10 +35,10 @@ describe('<TagsSettings />', () => {
  ])('shows expected tags displaying mode', (tags, expectedMode) => {
    const wrapper = createWrapper(tags);
    const dropdown = wrapper.find(TagsModeDropdown);
-    const small = wrapper.find('small');
+    const formText = wrapper.find(FormText);

    expect(dropdown.prop('mode')).toEqual(expectedMode);
-    expect(small.html()).toContain(`Tags will be displayed as <b>${expectedMode}</b>.`);
+    expect(formText.html()).toContain(`Tags will be displayed as <b>${expectedMode}</b>.`);
  });

  it.each([
--- a/test/settings/VisitsSettings.test.tsx
+++ b/test/settings/VisitsSettings.test.tsx
@ -4,6 +4,7 @@ import { Settings } from '../../src/settings/reducers/settings';
 import { VisitsSettings } from '../../src/settings/VisitsSettings';
 import { SimpleCard } from '../../src/utils/SimpleCard';
 import { DateIntervalSelector } from '../../src/utils/dates/DateIntervalSelector';
+import { LabeledFormGroup } from '../../src/utils/forms/LabeledFormGroup';

 describe('<VisitsSettings />', () => {
  let wrapper: ShallowWrapper;
@ -21,7 +22,7 @@ describe('<VisitsSettings />', () => {
    const wrapper = createWrapper();

    expect(wrapper.find(SimpleCard).prop('title')).toEqual('Visits');
-    expect(wrapper.find('label').prop('children')).toEqual('Default interval to load on visits sections:');
+    expect(wrapper.find(LabeledFormGroup).prop('label')).toEqual('Default interval to load on visits sections:');
    expect(wrapper.find(DateIntervalSelector)).toHaveLength(1);
  });

--- a/test/short-urls/helpers/QrCodeModal.test.tsx
+++ b/test/short-urls/helpers/QrCodeModal.test.tsx
@ -95,7 +95,7 @@ describe('<QrCodeModal />', () => {
    const firstCol = wrapper.find(Row).find(FormGroup).first();

    expect(dropdownsLength).toEqual(expectedAmountOfDropdowns);
-    expect(firstCol.prop('className')).toEqual(expectedRangeClass);
+    expect(firstCol.prop('className')).toEqual(`d-grid ${expectedRangeClass}`);
  });

  it('saves the QR code image when clicking the Download button', () => {
--- a/test/short-urls/helpers/ShortUrlFormCheckboxGroup.test.tsx
+++ b/test/short-urls/helpers/ShortUrlFormCheckboxGroup.test.tsx
@ -6,7 +6,7 @@ import { InfoTooltip } from '../../../src/utils/InfoTooltip';
 describe('<ShortUrlFormCheckboxGroup />', () => {
  it.each([
    [ undefined, '', 0 ],
-    [ 'This is the tooltip', 'mr-2', 1 ],
+    [ 'This is the tooltip', 'me-2', 1 ],
  ])('renders tooltip only when provided', (infoTooltip, expectedClassName, expectedAmountOfTooltips) => {
    const wrapper = shallow(<ShortUrlFormCheckboxGroup infoTooltip={infoTooltip} />);
    const checkbox = wrapper.find(Checkbox);
--- a/test/tags/helpers/EditTagModal.test.tsx
+++ b/test/tags/helpers/EditTagModal.test.tsx
@ -103,7 +103,7 @@ describe('<EditTagModal />', () => {
    expect(wrapper.find(Popover).prop('isOpen')).toEqual(false);
    (wrapper.find(Popover).prop('toggle') as Function)();
    expect(wrapper.find(Popover).prop('isOpen')).toEqual(true);
-    wrapper.find('.input-group-prepend').simulate('click');
+    wrapper.find('div').simulate('click');
    expect(wrapper.find(Popover).prop('isOpen')).toEqual(false);
  });
 });
--- a/test/utils/Checkbox.test.tsx
+++ b/test/utils/Checkbox.test.tsx
@ -63,7 +63,7 @@ describe('<Checkbox />', () => {

  it('allows setting inline rendering', () => {
    const wrapped = createComponent({ inline: true });
-    const control = wrapped.find('.custom-control');
+    const control = wrapped.find('.form-check');

    expect(control.prop('style')).toEqual({ display: 'inline-block' });
  });
--- a/test/utils/CopyToClipboardIcon.test.tsx
+++ b/test/utils/CopyToClipboardIcon.test.tsx
@ -22,6 +22,6 @@ describe('<CopyToClipboardIcon />', () => {
    expect(copyToClipboard.prop('onCopy')).toEqual(onCopy);
    expect(icon).toHaveLength(1);
    expect(icon.prop('icon')).toEqual(copyIcon);
-    expect(icon.prop('className')).toEqual('ml-2 copy-to-clipboard-icon');
+    expect(icon.prop('className')).toEqual('ms-2 copy-to-clipboard-icon');
  });
 });
--- a/test/utils/table/TableOrderIcon.test.tsx
+++ b/test/utils/table/TableOrderIcon.test.tsx
@ -36,7 +36,7 @@ describe('<TableOrderIcon />', () => {
  });

  it.each([
-    [ undefined, 'ml-1' ],
+    [ undefined, 'ms-1' ],
    [ 'foo', 'foo' ],
    [ 'bar', 'bar' ],
  ])('renders expected classname', (className, expectedClassName) => {
--- a/test/visits/helpers/MapModal.test.tsx
+++ b/test/visits/helpers/MapModal.test.tsx
@ -38,7 +38,7 @@ describe('<MapModal />', () => {

    expect(modal.prop('toggle')).toEqual(toggle);
    expect(modal.prop('isOpen')).toEqual(isOpen);
-    expect(header.find('.close').prop('onClick')).toEqual(toggle);
+    expect(header.find('.btn-close').prop('onClick')).toEqual(toggle);
    expect(header.text()).toContain(title);
  });

--- a/tsconfig.json
+++ b/tsconfig.json
@ -17,15 +17,14 @@
    "skipLibCheck": true,
    "sourceMap": true,
    "strict": true,
-    "target": "esnext",
+    "target": "es2019",
    "forceConsistentCasingInFileNames": true,
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "isolatedModules": true
  },
  "exclude": [
-    "node_modules",
-    "**/*.spec.*"
+    "node_modules"
  ],
  "include": [
    "*.d.ts",