From 661b9b2cc117ebd40bef3130fb705371fba9d5fb Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Sat, 5 Mar 2022 16:08:30 +0100
Subject: [PATCH] Fixed more rendering issues after BS5 migration

---
 src/index.scss                          | 15 ++++++++++++---
 src/servers/ManageServers.tsx           |  2 +-
 src/settings/Settings.tsx               |  2 +-
 src/short-urls/helpers/ShortUrlsRow.tsx |  2 +-
 src/tags/TagsTable.tsx                  |  4 ++--
 src/tags/TagsTableRow.tsx               |  6 +++---
 src/theme/theme.scss                    |  2 +-
 src/utils/NavPills.tsx                  |  9 +++++++--
 8 files changed, 28 insertions(+), 14 deletions(-)

diff --git a/src/index.scss b/src/index.scss
index c4f8b0b5..b4b02cfe 100644
--- a/src/index.scss
+++ b/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);
 }
 
diff --git a/src/servers/ManageServers.tsx b/src/servers/ManageServers.tsx
index 31dfd69e..75afda13 100644
--- a/src/servers/ManageServers.tsx
+++ b/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>
diff --git a/src/settings/Settings.tsx b/src/settings/Settings.tsx
index 68c2b531..9810eff4 100644
--- a/src/settings/Settings.tsx
+++ b/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>
diff --git a/src/short-urls/helpers/ShortUrlsRow.tsx b/src/short-urls/helpers/ShortUrlsRow.tsx
index 02ecd739..93a223db 100644
--- a/src/short-urls/helpers/ShortUrlsRow.tsx
+++ b/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}
diff --git a/src/tags/TagsTable.tsx b/src/tags/TagsTable.tsx
index 483a2440..48f261a1 100644
--- a/src/tags/TagsTable.tsx
+++ b/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" />
diff --git a/src/tags/TagsTableRow.tsx b/src/tags/TagsTableRow.tsx
index 83f41112..b924e921 100644
--- a/src/tags/TagsTableRow.tsx
+++ b/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
diff --git a/src/theme/theme.scss b/src/theme/theme.scss
index e4f8cc64..6c1f0a07 100644
--- 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;
diff --git a/src/utils/NavPills.tsx b/src/utils/NavPills.tsx
index 3d7c3e8e..f1e9ba67 100644
--- 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) {