From 124441238bb673b405e90318f7cb89a909277828 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Sun, 12 Jan 2020 12:08:26 +0100
Subject: [PATCH] Moved style to the proper scope

---
 src/index.scss                                      | 4 ++++
 src/short-urls/helpers/ShortUrlVisitsCount.js       | 5 +++--
 src/short-urls/helpers/ShortUrlVisitsCount.scss     | 3 +++
 test/short-urls/helpers/ShortUrlVisitsCount.test.js | 4 ++--
 4 files changed, 12 insertions(+), 4 deletions(-)
 create mode 100644 src/short-urls/helpers/ShortUrlVisitsCount.scss

diff --git a/src/index.scss b/src/index.scss
index 1f4cda05..e3cbf359 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -59,3 +59,7 @@ body,
 .paddingless {
   padding: 0;
 }
+
+.indivisible {
+  white-space: nowrap;
+}
diff --git a/src/short-urls/helpers/ShortUrlVisitsCount.js b/src/short-urls/helpers/ShortUrlVisitsCount.js
index 32447c8a..663b3a0e 100644
--- a/src/short-urls/helpers/ShortUrlVisitsCount.js
+++ b/src/short-urls/helpers/ShortUrlVisitsCount.js
@@ -3,6 +3,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faInfoCircle as infoIcon } from '@fortawesome/free-solid-svg-icons';
 import { UncontrolledTooltip } from 'reactstrap';
 import { shortUrlType } from '../reducers/shortUrlsList';
+import './ShortUrlVisitsCount.scss';
 
 const propTypes = {
   shortUrl: shortUrlType,
@@ -18,9 +19,9 @@ const ShortUrlVisitsCount = ({ shortUrl }) => {
 
   return (
     <React.Fragment>
-      <span>
+      <span className="indivisible">
         {visitsCount}
-        <small id="maxVisitsControl" className="short-urls-row__max-visits-control">
+        <small id="maxVisitsControl" className="short-urls-visits-count__max-visits-control">
           {' '}/ {maxVisits}{' '}
           <sup>
             <FontAwesomeIcon icon={infoIcon} />
diff --git a/src/short-urls/helpers/ShortUrlVisitsCount.scss b/src/short-urls/helpers/ShortUrlVisitsCount.scss
new file mode 100644
index 00000000..b27902fd
--- /dev/null
+++ b/src/short-urls/helpers/ShortUrlVisitsCount.scss
@@ -0,0 +1,3 @@
+.short-urls-visits-count__max-visits-control {
+  cursor: help;
+}
diff --git a/test/short-urls/helpers/ShortUrlVisitsCount.test.js b/test/short-urls/helpers/ShortUrlVisitsCount.test.js
index 2700b38c..9949fa4c 100644
--- a/test/short-urls/helpers/ShortUrlVisitsCount.test.js
+++ b/test/short-urls/helpers/ShortUrlVisitsCount.test.js
@@ -17,7 +17,7 @@ describe('<ShortUrlVisitsCount />', () => {
   it('just returns visits when no maxVisits is provided', () => {
     const visitsCount = 45;
     const wrapper = createWrapper({ visitsCount });
-    const maxVisitsHelper = wrapper.find('.short-urls-row__max-visits-control');
+    const maxVisitsHelper = wrapper.find('.short-urls-visits-count__max-visits-control');
     const maxVisitsTooltip = wrapper.find(UncontrolledTooltip);
 
     expect(wrapper.html()).toEqual(`<span>${visitsCount}</span>`);
@@ -30,7 +30,7 @@ describe('<ShortUrlVisitsCount />', () => {
     const maxVisits = 500;
     const meta = { maxVisits };
     const wrapper = createWrapper({ visitsCount, meta });
-    const maxVisitsHelper = wrapper.find('.short-urls-row__max-visits-control');
+    const maxVisitsHelper = wrapper.find('.short-urls-visits-count__max-visits-control');
     const maxVisitsTooltip = wrapper.find(UncontrolledTooltip);
 
     expect(wrapper.html()).toContain(`/ ${maxVisits}`);