Merge pull request #331 from UrbanOS-Public/1143-fix-plotly-link-sepa…

…rator-bar

Better looking divider between help links

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smartcitiesdata/react-discovery-ui",
-  "version": "2.1.36",
+  "version": "2.1.37",
   "description": "React component for dataset discovery UI",
   "main": "./lib/ReactDiscoveryUI.js",
   "repository": {

src/pages/dataset-view/dataset-view.js

@@ -96,9 +96,12 @@ export default class extends Component {
               }
               {this.isNotDatasetDetailsTab() &&
                 <>
-                  <a role="link" className='helpLink primary-color' target='_blank' href='https://en.wikipedia.org/wiki/SQL_syntax'>SQL Help&nbsp;&nbsp;</a>
+                  <a role="link" className='helpLink primary-color' target='_blank' href='https://en.wikipedia.org/wiki/SQL_syntax'>SQL Help</a>
                   {this.isVisualizationEnabled() &&
-                    <a role="link" id='plotlyhelp' className='helpLink primary-color' target='_blank' href='https://plotly.com/chart-studio-help/tutorials/#basic'>Plot.ly Help</a>
+                    <>
+                      <p>|</p>
+                      <a role="link" id='plotlyhelp' className='helpLink primary-color' target='_blank' href='https://plotly.com/chart-studio-help/tutorials/#basic'>Plot.ly Help</a>
+                    </>
                   }
 
                 </>}

src/pages/dataset-view/dataset-view.scss

@@ -29,10 +29,6 @@ dataset-view {
     padding-left: 15px;
   }
 
-  .helpLink:first-of-type:after {
-    content: "|";
-  }
-
   .react-tabs__tab-list {
     border-bottom: 0;
     box-shadow: 0px 1px 3px $light-grey;
@@ -96,4 +92,4 @@ dataset-view {
   loading-element {
     @include default-loading-icon();
   }
-}
+}