diff --git a/src/common/AsideMenu.scss b/src/common/AsideMenu.scss
index dda916e9..af1935b7 100644
--- a/src/common/AsideMenu.scss
+++ b/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;
diff --git a/src/index.scss b/src/index.scss
index aa734ab8..c7973396 100644
--- a/src/index.scss
+++ b/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;
}
diff --git a/src/servers/Overview.tsx b/src/servers/Overview.tsx
index d3726638..a209693b 100644
--- a/src/servers/Overview.tsx
+++ b/src/servers/Overview.tsx
@@ -49,13 +49,13 @@ export const Overview = (
<>
-
+
Visits
{loadingVisits ? 'Loading...' : prettify(visitsCount)}
-
+
Short URLs
{loading ? 'Loading...' : prettify(shortUrls?.pagination.totalItems ?? 0)}
@@ -63,7 +63,7 @@ export const Overview = (
-
+
Tags
{loadingTags ? 'Loading...' : prettify(tagsList.tags.length)}
diff --git a/src/servers/ServersListGroup.scss b/src/servers/ServersListGroup.scss
index 9f869468..478fb19d 100644
--- a/src/servers/ServersListGroup.scss
+++ b/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 {
diff --git a/src/short-urls/Paginator.scss b/src/short-urls/Paginator.scss
index 0e8142e2..03b784d0 100644
--- a/src/short-urls/Paginator.scss
+++ b/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);
}
diff --git a/src/short-urls/ShortUrls.tsx b/src/short-urls/ShortUrls.tsx
index 0b86f35d..d6dea6bc 100644
--- a/src/short-urls/ShortUrls.tsx
+++ b/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) => (pro
return (
<>
-
+
>
);
};
diff --git a/src/short-urls/ShortUrlsTable.tsx b/src/short-urls/ShortUrlsTable.tsx
index 2c799020..c1a1fb77 100644
--- a/src/short-urls/ShortUrlsTable.tsx
+++ b/src/short-urls/ShortUrlsTable.tsx
@@ -30,7 +30,7 @@ export const ShortUrlsTable = (ShortUrlsRow: FC
) => ({
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) {
diff --git a/src/tags/TagCard.scss b/src/tags/TagCard.scss
index 4bff8b45..ce6849aa 100644
--- a/src/tags/TagCard.scss
+++ b/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;
diff --git a/src/utils/Message.tsx b/src/utils/Message.tsx
index cc7c71da..5a452045 100644
--- a/src/utils/Message.tsx
+++ b/src/utils/Message.tsx
@@ -30,7 +30,7 @@ interface MessageProps {
}
const Message: FC = ({ 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 (
diff --git a/src/visits/VisitsHeader.tsx b/src/visits/VisitsHeader.tsx
index 102a62f4..29e531aa 100644
--- a/src/visits/VisitsHeader.tsx
+++ b/src/visits/VisitsHeader.tsx
@@ -15,7 +15,7 @@ interface VisitsHeaderProps {
const VisitsHeader: FC = ({ visits, goBack, shortUrl, children, title }) => (