Added short URL title to visits header

src/index.scss

@@ -61,7 +61,8 @@ body,
 .dropdown-divider,
 .dropdown-menu,
 .list-group-item,
-.modal-content {
+.modal-content,
+hr {
   border-color: var(--border-color);
 }
 

src/utils/base.scss

@@ -18,7 +18,7 @@ $mediumGrey: #dee2e6;
 $textPlaceholder: #6c757d;
 
 // Misc
-$headerHeight: 57px;
+$headerHeight: 56px;
 $asideMenuWidth: 260px;
 $footer-height: 2.3rem;
 $footer-margin: .8rem;

src/visits/ShortUrlVisitsHeader.tsx

@@ -17,6 +17,7 @@ const ShortUrlVisitsHeader = ({ shortUrlDetail, shortUrlVisits, goBack }: ShortU
   const { visits } = shortUrlVisits;
   const shortLink = shortUrl?.shortUrl ?? '';
   const longLink = shortUrl?.longUrl ?? '';
+  const title = shortUrl?.title;
 
   const renderDate = () => !shortUrl ? <small>Loading...</small> : (
     <span>
@@ -39,9 +40,9 @@ const ShortUrlVisitsHeader = ({ shortUrlDetail, shortUrlVisits, goBack }: ShortU
       <hr />
       <div>Created: {renderDate()}</div>
       <div>
-        Long URL:{' '}
+        {`${title ? 'Title' : 'Long URL'}: `}
         {loading && <small>Loading...</small>}
-        {!loading && <ExternalLink href={longLink} />}
+        {!loading && <ExternalLink href={longLink}>{title ?? longLink}</ExternalLink>}
       </div>
     </VisitsHeader>
   );