From 7f6182576832d5b5341870a5b3ea1ec623421261 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Mon, 29 Mar 2021 21:08:48 +0200
Subject: [PATCH] Reduced and standardized overall vertical spacing

---
 src/servers/CreateServer.tsx       |  2 +-
 src/servers/Overview.tsx           | 16 ++++++++--------
 src/servers/helpers/ServerForm.tsx |  2 +-
 src/settings/Settings.tsx          |  2 +-
 src/visits/VisitsStats.tsx         | 22 +++++++++++-----------
 5 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/src/servers/CreateServer.tsx b/src/servers/CreateServer.tsx
index d98d3619..0f87fa0d 100644
--- a/src/servers/CreateServer.tsx
+++ b/src/servers/CreateServer.tsx
@@ -42,7 +42,7 @@ const CreateServer = (ImportServersBtn: FC<ImportServersBtnProps>, useStateFlagT
       </ServerForm>
 
       {(serversImported || errorImporting) && (
-        <div className="mt-4">
+        <div className="mt-3">
           {serversImported && <ImportResult type="success" />}
           {errorImporting && <ImportResult type="error" />}
         </div>
diff --git a/src/servers/Overview.tsx b/src/servers/Overview.tsx
index 703cf717..ea156041 100644
--- a/src/servers/Overview.tsx
+++ b/src/servers/Overview.tsx
@@ -1,5 +1,5 @@
 import { FC, useEffect } from 'react';
-import { Card, CardBody, CardHeader, CardText, CardTitle } from 'reactstrap';
+import { Card, CardBody, CardHeader, CardText, CardTitle, Row } from 'reactstrap';
 import { Link, useHistory } from 'react-router-dom';
 import { ShortUrlsListParams } from '../short-urls/reducers/shortUrlsListParams';
 import { ShortUrlsList as ShortUrlsListState } from '../short-urls/reducers/shortUrlsList';
@@ -51,9 +51,9 @@ export const Overview = (
 
   return (
     <>
-      <div className="row mb-3">
+      <Row>
         <div className="col-md-6 col-xl-3">
-          <Card className="overview__card mb-2" body>
+          <Card className="overview__card mb-3" body>
             <CardTitle tag="h5" className="overview__card-title">Visits</CardTitle>
             <CardText tag="h2">
               <ForServerVersion minVersion="2.2.0">
@@ -66,7 +66,7 @@ export const Overview = (
           </Card>
         </div>
         <div className="col-md-6 col-xl-3">
-          <Card className="overview__card mb-2" body tag={Link} to={`/server/${serverId}/orphan-visits`}>
+          <Card className="overview__card mb-3" body tag={Link} to={`/server/${serverId}/orphan-visits`}>
             <CardTitle tag="h5" className="overview__card-title">Orphan visits</CardTitle>
             <CardText tag="h2">
               <ForServerVersion minVersion="2.6.0">
@@ -79,7 +79,7 @@ export const Overview = (
           </Card>
         </div>
         <div className="col-md-6 col-xl-3">
-          <Card className="overview__card mb-2" body tag={Link} to={`/server/${serverId}/list-short-urls/1`}>
+          <Card className="overview__card mb-3" body tag={Link} to={`/server/${serverId}/list-short-urls/1`}>
             <CardTitle tag="h5" className="overview__card-title">Short URLs</CardTitle>
             <CardText tag="h2">
               {loading ? 'Loading...' : prettify(shortUrls?.pagination.totalItems ?? 0)}
@@ -87,13 +87,13 @@ export const Overview = (
           </Card>
         </div>
         <div className="col-md-6 col-xl-3">
-          <Card className="overview__card mb-2" body tag={Link} to={`/server/${serverId}/manage-tags`}>
+          <Card className="overview__card mb-3" body tag={Link} to={`/server/${serverId}/manage-tags`}>
             <CardTitle tag="h5" className="overview__card-title">Tags</CardTitle>
             <CardText tag="h2">{loadingTags ? 'Loading...' : prettify(tagsList.tags.length)}</CardText>
           </Card>
         </div>
-      </div>
-      <Card className="mb-4">
+      </Row>
+      <Card className="mb-3">
         <CardHeader>
           <span className="d-sm-none">Create a short URL</span>
           <h5 className="d-none d-sm-inline">Create a short URL</h5>
diff --git a/src/servers/helpers/ServerForm.tsx b/src/servers/helpers/ServerForm.tsx
index d0d7bf66..78f04113 100644
--- a/src/servers/helpers/ServerForm.tsx
+++ b/src/servers/helpers/ServerForm.tsx
@@ -25,7 +25,7 @@ export const ServerForm: FC<ServerFormProps> = ({ onSubmit, initialValues, child
 
   return (
     <form className="server-form" onSubmit={handleSubmit}>
-      <SimpleCard className="mb-4" title={title}>
+      <SimpleCard className="mb-3" title={title}>
         <FormGroupContainer value={name} onChange={setName}>Name</FormGroupContainer>
         <FormGroupContainer type="url" value={url} onChange={setUrl}>URL</FormGroupContainer>
         <FormGroupContainer value={apiKey} onChange={setApiKey}>API key</FormGroupContainer>
diff --git a/src/settings/Settings.tsx b/src/settings/Settings.tsx
index 1c9a1b36..294115a0 100644
--- a/src/settings/Settings.tsx
+++ b/src/settings/Settings.tsx
@@ -7,7 +7,7 @@ const SettingsSections: FC<{ items: ReactNode[][] }> = ({ items }) => (
     {items.map((child, index) => (
       <Row key={index}>
         {child.map((subChild, subIndex) => (
-          <div key={subIndex} className="col-lg-6 mb-3 mb-md-4">
+          <div key={subIndex} className="col-lg-6 mb-3">
             {subChild}
           </div>
         ))}
diff --git a/src/visits/VisitsStats.tsx b/src/visits/VisitsStats.tsx
index d94d14bb..ad2e13a1 100644
--- a/src/visits/VisitsStats.tsx
+++ b/src/visits/VisitsStats.tsx
@@ -154,7 +154,7 @@ const VisitsStats: FC<VisitsStatsProps> = (
         <Row>
           <Switch>
             <Route exact path={baseUrl}>
-              <div className="col-12 mt-4">
+              <div className="col-12 mt-3">
                 <LineChartCard
                   title="Visits during time"
                   visits={normalizedVisits}
@@ -166,13 +166,13 @@ const VisitsStats: FC<VisitsStatsProps> = (
             </Route>
 
             <Route exact path={`${baseUrl}${sections.byContext.subPath}`}>
-              <div className={classNames('mt-4 col-lg-6', { 'col-xl-4': !isOrphanVisits })}>
+              <div className={classNames('mt-3 col-lg-6', { 'col-xl-4': !isOrphanVisits })}>
                 <GraphCard title="Operating systems" stats={os} />
               </div>
-              <div className={classNames('mt-4 col-lg-6', { 'col-xl-4': !isOrphanVisits })}>
+              <div className={classNames('mt-3 col-lg-6', { 'col-xl-4': !isOrphanVisits })}>
                 <GraphCard title="Browsers" stats={browsers} />
               </div>
-              <div className={classNames('mt-4', { 'col-xl-4': !isOrphanVisits, 'col-lg-6': isOrphanVisits })}>
+              <div className={classNames('mt-3', { 'col-xl-4': !isOrphanVisits, 'col-lg-6': isOrphanVisits })}>
                 <SortableBarGraph
                   title="Referrers"
                   stats={referrers}
@@ -187,7 +187,7 @@ const VisitsStats: FC<VisitsStatsProps> = (
                 />
               </div>
               {isOrphanVisits && (
-                <div className="mt-4 col-lg-6">
+                <div className="mt-3 col-lg-6">
                   <SortableBarGraph
                     title="Visited URLs"
                     stats={visitedUrls}
@@ -204,7 +204,7 @@ const VisitsStats: FC<VisitsStatsProps> = (
             </Route>
 
             <Route exact path={`${baseUrl}${sections.byLocation.subPath}`}>
-              <div className="col-lg-6 mt-4">
+              <div className="col-lg-6 mt-3">
                 <SortableBarGraph
                   title="Countries"
                   stats={countries}
@@ -217,7 +217,7 @@ const VisitsStats: FC<VisitsStatsProps> = (
                   onClick={highlightVisitsForProp('country')}
                 />
               </div>
-              <div className="col-lg-6 mt-4">
+              <div className="col-lg-6 mt-3">
                 <SortableBarGraph
                   title="Cities"
                   stats={cities}
@@ -258,7 +258,7 @@ const VisitsStats: FC<VisitsStatsProps> = (
     <>
       {children}
 
-      <section className="mt-4">
+      <section className="mt-3">
         <div className="row flex-md-row-reverse">
           <div className="col-lg-7 col-xl-6">
             <div className="d-md-flex">
@@ -273,7 +273,7 @@ const VisitsStats: FC<VisitsStatsProps> = (
               {isOrphanVisits && (
                 <OrphanVisitTypeDropdown
                   text="Filter by type"
-                  className="ml-0 ml-md-2 mt-4 mt-md-0"
+                  className="ml-0 ml-md-2 mt-3 mt-md-0"
                   selected={orphanVisitType}
                   onChange={setOrphanVisitType}
                 />
@@ -281,7 +281,7 @@ const VisitsStats: FC<VisitsStatsProps> = (
             </div>
           </div>
           {visits.length > 0 && (
-            <div className="col-lg-5 col-xl-6 mt-4 mt-lg-0">
+            <div className="col-lg-5 col-xl-6 mt-3 mt-lg-0">
               <div className="d-flex">
                 <Button
                   outline
@@ -305,7 +305,7 @@ const VisitsStats: FC<VisitsStatsProps> = (
         </div>
       </section>
 
-      <section className="mt-4">
+      <section className="mt-3">
         {renderVisitsContent()}
       </section>
     </>