From 20a9259109bafd915e34ac8f50715111c4de0f37 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Tue, 8 Dec 2020 11:39:16 +0100
Subject: [PATCH] Minor style improvements in overview page

---
 src/index.scss                    |  2 ++
 src/index.tsx                     |  2 --
 src/servers/Overview.tsx          | 16 +++++++++-------
 src/short-urls/CreateShortUrl.tsx |  2 +-
 src/utils/base.scss               |  5 +++++
 5 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/src/index.scss b/src/index.scss
index 3d9909de..aa734ab8 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -1,4 +1,6 @@
 @import './utils/base';
+@import 'node_modules/bootstrap/scss/bootstrap.scss';
+@import './common/react-tagsinput.scss';
 
 html,
 body,
diff --git a/src/index.tsx b/src/index.tsx
index 3d85a89f..bea043e5 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -5,10 +5,8 @@ import { homepage } from '../package.json';
 import container from './container';
 import store from './container/store';
 import { fixLeafletIcons } from './utils/helpers/leaflet';
-import 'bootstrap/dist/css/bootstrap.min.css';
 import 'react-datepicker/dist/react-datepicker.css';
 import 'leaflet/dist/leaflet.css';
-import './common/react-tagsinput.scss';
 import './index.scss';
 
 // This overwrites icons used for leaflet maps, fixing some issues caused by webpack while processing the CSS
diff --git a/src/servers/Overview.tsx b/src/servers/Overview.tsx
index f032a39e..d3726638 100644
--- a/src/servers/Overview.tsx
+++ b/src/servers/Overview.tsx
@@ -37,7 +37,7 @@ export const Overview = (
   const { loading, shortUrls } = shortUrlsList;
   const { loading: loadingTags } = tagsList;
   const { loading: loadingVisits, visitsCount } = visitsOverview;
-  const serverId = !isServerWithId(selectedServer) ? '' : selectedServer.id;
+  const serverId = isServerWithId(selectedServer) ? selectedServer.id : '';
 
   useEffect(() => {
     listShortUrls({ itemsPerPage: 5, orderBy: { dateCreated: 'DESC' } });
@@ -49,13 +49,13 @@ export const Overview = (
     <>
       <div className="row mb-3">
         <div className="col-sm-4">
-          <Card className="overview__card mb-2" body>
+          <Card className="overview__card mb-2" body color="light">
             <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>
+          <Card className="overview__card mb-2" body color="light">
             <CardTitle tag="h5" className="overview__card-title">Short URLs</CardTitle>
             <CardText tag="h2">
               {loading ? 'Loading...' : prettify(shortUrls?.pagination.totalItems ?? 0)}
@@ -63,15 +63,16 @@ export const Overview = (
           </Card>
         </div>
         <div className="col-sm-4">
-          <Card className="overview__card mb-2" body>
+          <Card className="overview__card mb-2" body color="light">
             <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>
         </div>
       </div>
       <Card className="mb-4">
         <CardHeader>
-          Create a short URL
+          <span className="d-sm-none">Create a short URL</span>
+          <h5 className="d-none d-sm-inline">Create a short URL</h5>
           <Link className="float-right" to={`/server/${serverId}/create-short-url`}>Advanced options &raquo;</Link>
         </CardHeader>
         <CardBody>
@@ -80,7 +81,8 @@ export const Overview = (
       </Card>
       <Card>
         <CardHeader>
-          Recently created URLs
+          <span className="d-sm-none">Recently created URLs</span>
+          <h5 className="d-none d-sm-inline">Recently created URLs</h5>
           <Link className="float-right" to={`/server/${serverId}/list-short-urls/1`}>See all &raquo;</Link>
         </CardHeader>
         <CardBody>
diff --git a/src/short-urls/CreateShortUrl.tsx b/src/short-urls/CreateShortUrl.tsx
index 65c574a7..d6f65ede 100644
--- a/src/short-urls/CreateShortUrl.tsx
+++ b/src/short-urls/CreateShortUrl.tsx
@@ -106,7 +106,7 @@ const CreateShortUrl = (
         <Input
           bsSize="lg"
           type="url"
-          placeholder="Insert the URL to be shortened"
+          placeholder="URL to be shortened"
           required
           value={shortUrlCreation.longUrl}
           onChange={(e) => setShortUrlCreation({ ...shortUrlCreation, longUrl: e.target.value })}
diff --git a/src/utils/base.scss b/src/utils/base.scss
index 47349bb6..99f65435 100644
--- a/src/utils/base.scss
+++ b/src/utils/base.scss
@@ -19,3 +19,8 @@ $mediumGrey: #dee2e6;
 $headerHeight: 57px;
 $footer-height: 2.3rem;
 $footer-margin: .8rem;
+
+// Bootstrap overwrites
+//$theme-colors: (
+//  'primary': $mainColor
+//);