Restyled cards, background and shadows

This commit is contained in:
Alejandro Celaya 2020-12-12 10:56:10 +01:00
parent bf1b59c0d8
commit 143a05cab1
10 changed files with 26 additions and 14 deletions

View file

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

View file

@ -6,6 +6,7 @@ html,
body, body,
#root { #root {
height: 100%; height: 100%;
background: #f5f6fe;
} }
* { * {
@ -16,6 +17,18 @@ body,
background-color: $mainColor !important; 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) { .dropdown-item:not(:disabled) {
cursor: pointer; cursor: pointer;
} }

View file

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

View file

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

View file

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

View file

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

View file

@ -30,7 +30,7 @@ export const ShortUrlsTable = (ShortUrlsRow: FC<ShortUrlsRowProps>) => ({
const orderableColumnsClasses = classNames('short-urls-table__header-cell', { const orderableColumnsClasses = classNames('short-urls-table__header-cell', {
'short-urls-table__header-cell--with-action': !!orderByColumn, '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 = () => { const renderShortUrls = () => {
if (error) { if (error) {

View file

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

View file

@ -30,7 +30,7 @@ interface MessageProps {
} }
const Message: FC<MessageProps> = ({ children, loading = false, noMargin = false, type = 'default' }) => { 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 ( return (
<div className="col-md-10 offset-md-1"> <div className="col-md-10 offset-md-1">

View file

@ -15,7 +15,7 @@ interface VisitsHeaderProps {
const VisitsHeader: FC<VisitsHeaderProps> = ({ visits, goBack, shortUrl, children, title }) => ( const VisitsHeader: FC<VisitsHeaderProps> = ({ visits, goBack, shortUrl, children, title }) => (
<header> <header>
<Card className="bg-light" body> <Card body>
<h2 className="d-flex justify-content-between align-items-center mb-0"> <h2 className="d-flex justify-content-between align-items-center mb-0">
<Button color="link" size="lg" className="p-0 mr-3" onClick={goBack}> <Button color="link" size="lg" className="p-0 mr-3" onClick={goBack}>
<FontAwesomeIcon icon={faArrowLeft} /> <FontAwesomeIcon icon={faArrowLeft} />