Merge pull request #406 from acelaya-forks/feature/reduce-margins

Feature/reduce margins
shlinkio · Mar 29, 2021 · 2952ac8 · 2952ac8
2 parents c3d6c83 + cf4fc4f
commit 2952ac8
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 23 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,7 +4,7 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org).
 
-## [Unreleased]
+## [3.1.0] - 2021-03-29
 ### Added
 * [#379](https://github.com/shlinkio/shlink-web-client/issues/379) and [#384](https://github.com/shlinkio/shlink-web-client/issues/384) Improved QR code modal, including controls to customize size, format and margin, as well as a button to copy the link to the clipboard.
 * [#385](https://github.com/shlinkio/shlink-web-client/issues/385) Added setting to determine if "validate URL" should be enabled or disabled by default.

diff --git 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
@@ -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,21 +79,21 @@ 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)}
             </CardText>
           </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
@@ -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
@@ -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/utils/DateInput.scss b/src/utils/DateInput.scss
@@ -71,6 +71,11 @@
   color: inherit;
 }
 
+.react-datepicker__day--disabled.react-datepicker__day--disabled {
+  cursor: default;
+  color: var(--border-color) !important;
+}
+
 .react-datepicker__day--keyboard-selected.react-datepicker__day--keyboard-selected,
 .react-datepicker__month-text--keyboard-selected.react-datepicker__month-text--keyboard-selected,
 .react-datepicker__quarter-text--keyboard-selected.react-datepicker__quarter-text--keyboard-selected,

diff --git 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,15 +273,15 @@ 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}
                 />
               )}
             </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>
     </>