Improved visits pages titles

src/tags/helpers/Tag.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import './Tag.scss';
 import { colorGeneratorType } from '../../utils/services/ColorGenerator';
+import './Tag.scss';
 
 const propTypes = {
   text: PropTypes.string,
@@ -17,12 +17,12 @@ const Tag = ({
   children,
   clearable,
   colorGenerator,
-  onClick = () => {},
-  onClose = () => {},
+  onClick,
+  onClose,
 }) => (
   <span
     className="badge tag"
-    style={{ backgroundColor: colorGenerator.getColorForKey(text), cursor: clearable ? 'auto' : 'pointer' }}
+    style={{ backgroundColor: colorGenerator.getColorForKey(text), cursor: clearable || !onClick ? 'auto' : 'pointer' }}
     onClick={onClick}
   >
     {children || text}

src/tags/helpers/Tag.scss

@@ -1,6 +1,5 @@
 .tag {
   color: #fff;
-  cursor: pointer;
 }
 
 .tag:not(:last-child) {

src/visits/TagVisits.js

@@ -22,7 +22,7 @@ const propTypes = {
   settings: SettingsType,
 };
 
-const TagVisits = (VisitsStats) => {
+const TagVisits = (VisitsStats, colorGenerator) => {
   const TagVisitsComp = ({
     history,
     match,
@@ -51,7 +51,7 @@ const TagVisits = (VisitsStats) => {
 
     return (
       <VisitsStats getVisits={loadVisits} cancelGetVisits={cancelGetTagVisits} visitsInfo={tagVisits}>
-        <TagVisitsHeader tagVisits={tagVisits} goBack={history.goBack} />
+        <TagVisitsHeader tagVisits={tagVisits} goBack={history.goBack} colorGenerator={colorGenerator} />
       </VisitsStats>
     );
   };

src/visits/TagVisitsHeader.js

@@ -1,5 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import Tag from '../tags/helpers/Tag';
+import { colorGeneratorType } from '../utils/services/ColorGenerator';
 import VisitsHeader from './VisitsHeader';
 import { TagVisitsType } from './reducers/tagVisits';
 import './ShortUrlVisitsHeader.scss';
@@ -7,15 +9,17 @@ import './ShortUrlVisitsHeader.scss';
 const propTypes = {
   tagVisits: TagVisitsType.isRequired,
   goBack: PropTypes.func.isRequired,
+  colorGenerator: colorGeneratorType,
 };
 
-const TagVisitsHeader = ({ tagVisits, goBack }) => {
+const TagVisitsHeader = ({ tagVisits, goBack, colorGenerator }) => {
   const { visits, tag } = tagVisits;
 
   const visitsStatsTitle = (
-    <React.Fragment>
-      Visits for {tag}
-    </React.Fragment>
+    <span className="d-flex align-items-center justify-content-center">
+      <span className="mr-2">Visits for</span>
+      <Tag text={tag} colorGenerator={colorGenerator} />
+    </span>
   );
 
   return <VisitsHeader title={visitsStatsTitle} goBack={goBack} visits={visits} />;

src/visits/VisitsHeader.js

@@ -30,7 +30,7 @@ const VisitsHeader = ({ visits, goBack, shortUrl, children, title }) => (
           <ShortUrlVisitsCount visitsCount={visits.length} shortUrl={shortUrl} />
         </span>
       </h2>
-      <h3 className="text-center d-block d-sm-none mb-0 mt-2">
+      <h3 className="text-center d-block d-sm-none mb-0 mt-3">
         <small>{title}</small>
       </h3>
 

src/visits/services/provideServices.js

@@ -19,7 +19,7 @@ const provideServices = (bottle, connect) => {
     [ 'shortUrlVisits', 'shortUrlDetail', 'mercureInfo', 'settings' ],
     [ 'getShortUrlVisits', 'getShortUrlDetail', 'cancelGetShortUrlVisits', 'createNewVisit', 'loadMercureInfo' ]
   ));
-  bottle.serviceFactory('TagVisits', TagVisits, 'VisitsStats');
+  bottle.serviceFactory('TagVisits', TagVisits, 'VisitsStats', 'ColorGenerator');
   bottle.decorator('TagVisits', connect(
     [ 'tagVisits', 'mercureInfo', 'settings' ],
     [ 'getTagVisits', 'cancelGetTagVisits', 'createNewVisit', 'loadMercureInfo' ]