Restyled cards, background and shadows

src/common/AsideMenu.scss

@@ -4,7 +4,8 @@
 $asideMenuMobileWidth: 280px;
 
 .aside-menu {
-  background-color: #f7f7f7;
+  background-color: white;
+  box-shadow: rgba(0, 0, 0, .05) 0 8px 15px;
   position: fixed !important;
   padding-top: 13px;
   padding-bottom: 10px;

src/index.scss

@@ -6,6 +6,7 @@ html,
 body,
 #root {
   height: 100%;
+  background: #f5f6fe;
 }
 
 * {
@@ -16,6 +17,18 @@ body,
   background-color: $mainColor !important;
 }
 
+.card {
+  box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
+}
+
+.card-header {
+  background-color: white;
+}
+
+.card-footer {
+  background-color: rgba(255, 255, 255, .5);
+}
+
 .dropdown-item:not(:disabled) {
   cursor: pointer;
 }

src/servers/Overview.tsx

@@ -49,13 +49,13 @@ export const Overview = (
     <>
       <div className="row mb-3">
         <div className="col-sm-4">
-          <Card className="overview__card mb-2" body color="light">
+          <Card className="overview__card mb-2" body>
             <CardTitle tag="h5" className="overview__card-title">Visits</CardTitle>
             <CardText tag="h2">{loadingVisits ? 'Loading...' : prettify(visitsCount)}</CardText>
           </Card>
         </div>
         <div className="col-sm-4">
-          <Card className="overview__card mb-2" body color="light">
+          <Card className="overview__card mb-2" body>
             <CardTitle tag="h5" className="overview__card-title">Short URLs</CardTitle>
             <CardText tag="h2">
               {loading ? 'Loading...' : prettify(shortUrls?.pagination.totalItems ?? 0)}
@@ -63,7 +63,7 @@ export const Overview = (
           </Card>
         </div>
         <div className="col-sm-4">
-          <Card className="overview__card mb-2" body color="light">
+          <Card className="overview__card mb-2" body>
             <CardTitle tag="h5" className="overview__card-title">Tags</CardTitle>
             <CardText tag="h2">{loadingTags ? 'Loading...' : prettify(tagsList.tags.length)}</CardText>
           </Card>

src/servers/ServersListGroup.scss

@@ -3,6 +3,7 @@
 .servers-list__list-group {
   width: 100%;
   max-width: 400px;
+  box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
 }
 
 .servers-list__server-item.servers-list__server-item {

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) {

src/tags/TagCard.scss

@@ -2,10 +2,6 @@
   margin-bottom: .5rem;
 }
 
-.tag-card__header.tag-card__header {
-  background-color: #eeeeee;
-}
-
 .tag-card__header.tag-card__header,
 .tag-card__body.tag-card__body {
   padding: .75rem;

src/utils/Message.tsx

@@ -30,7 +30,7 @@ interface MessageProps {
 }
 
 const Message: FC<MessageProps> = ({ children, loading = false, noMargin = false, type = 'default' }) => {
-  const cardClasses = classNames('bg-light', getClassForType(type), { 'mt-4': !noMargin });
+  const cardClasses = classNames(getClassForType(type), { 'mt-4': !noMargin });
 
   return (
     <div className="col-md-10 offset-md-1">

src/visits/VisitsHeader.tsx

@@ -15,7 +15,7 @@ interface VisitsHeaderProps {
 
 const VisitsHeader: FC<VisitsHeaderProps> = ({ visits, goBack, shortUrl, children, title }) => (
   <header>
-    <Card className="bg-light" body>
+    <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}>
           <FontAwesomeIcon icon={faArrowLeft} />