Restyled cards, background and shadows

src/short-urls/Paginator.scss

@@ -1,7 +1,7 @@
 .short-urls-paginator {
   position: sticky;
   bottom: 0;
-  background-color: rgba(white, .8);
+  background-color: rgba(255, 255, 255, .5);
   padding: .75rem 0;
   border-top: 1px solid rgba(black, .125);
 }

src/short-urls/ShortUrls.tsx

@@ -1,4 +1,5 @@
 import { FC, useEffect, useState } from 'react';
+import { Card } from 'reactstrap';
 import Paginator from './Paginator';
 import { ShortUrlsListProps } from './ShortUrlsList';
 
@@ -17,10 +18,10 @@ const ShortUrls = (SearchBar: FC, ShortUrlsList: FC<ShortUrlsListProps>) => (pro
   return (
     <>
       <div className="form-group"><SearchBar /></div>
-      <div>
+      <Card body className="pb-1">
         <ShortUrlsList {...props} key={urlsListKey} />
         <Paginator paginator={pagination} serverId={serverId} />
-      </div>
+      </Card>
     </>
   );
 };

src/short-urls/ShortUrlsTable.tsx

@@ -30,7 +30,7 @@ export const ShortUrlsTable = (ShortUrlsRow: FC<ShortUrlsRowProps>) => ({
   const orderableColumnsClasses = classNames('short-urls-table__header-cell', {
     'short-urls-table__header-cell--with-action': !!orderByColumn,
   });
-  const tableClasses = classNames('table table-striped table-hover', className);
+  const tableClasses = classNames('table table-hover', className);
 
   const renderShortUrls = () => {
     if (error) {