Fixed more rendering issues after BS5 migration

src/index.scss

@@ -19,10 +19,13 @@ body,
   color: var(--text-color);
 }
 
-a {
+a,
+.btn-link {
   text-decoration: none;
 }
-a:hover {
+
+a:hover,
+.btn-link:hover {
   text-decoration: underline;
 }
 
@@ -105,6 +108,12 @@ hr {
   }
 }
 
+/* Deprecated. Brought from bootstrap 4 */
+.btn-block {
+  display: block;
+  width: 100%;
+}
+
 .dropdown-item,
 .dropdown-item-text {
   color: var(--text-color);
@@ -140,7 +149,7 @@ hr {
 .close,
 .close:hover,
 .table,
-.table-hover tbody tr:hover {
+.table-hover > tbody > tr:hover > * {
   color: var(--text-color);
 }
 

src/servers/ManageServers.tsx

@@ -50,7 +50,7 @@ export const ManageServers = (
             </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>

src/settings/Settings.tsx

@@ -18,7 +18,7 @@ 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>

src/short-urls/helpers/ShortUrlsRow.tsx

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

src/tags/TagsTable.tsx

@@ -44,10 +44,10 @@ export const TagsTable = (TagsTableRow: FC<TagsTableRowProps>) => (
             <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" />

src/tags/TagsTableRow.tsx

@@ -31,17 +31,17 @@ 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="me-1" /> Edit

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;

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 }) => (
+export const NavPills: FC<NavPillsProps> = ({ children, fill = false, className = '' }) => (
-  <Card className="nav-pills__nav p-0 overflow-hidden mb-3" body>
+  <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) {