Fix accentColor issues allowing to pass gradient values

Fix flexbox issue in Helper Navigation

closes #172
closes #173

src/components/Badge.js

@@ -3,8 +3,8 @@ import styled from 'styled-components'
 const Badge = styled.span`
   position: absolute;
   font-family: monospace;
-  background-color: ${props => props.accentColor};
-  background-color: var(--reactour-accent);
+  background: var(--reactour-accent);
+  background: ${props => props.accentColor};
   height: 1.875em;
   line-height: 2;
   padding-left: 0.8125em;

src/components/Dot.js

@@ -4,7 +4,9 @@ const Dot = styled.button`
   counter-increment: dot;
   width: 8px;
   height: 8px;
-  border: 1px solid;
+  border: ${props =>
+    props.current === props.index ? '0' : '1px solid #caccce'};
+
   border-radius: 100%;
   padding: 0;
   display: block;
@@ -13,15 +15,15 @@ const Dot = styled.button`
   cursor: ${props => (props.disabled ? 'not-allowed' : 'pointer')};
   transform: scale(${props => (props.current === props.index ? 1.25 : 1)});
 
-  color: ${props =>
-    props.current === props.index ? props.accentColor : '#caccce'};
-  background-color: ${props =>
-    props.current === props.index ? props.accentColor : 'transparent'};
-    
   color: ${props =>
     props.current === props.index ? 'var(--reactour-accent)' : '#caccce'};
-  background-color: ${props =>
-    props.current === props.index ? 'var(--reactour-accent)' : 'transparent'};
+  background: ${props =>
+    props.current === props.index ? 'var(--reactour-accent)' : 'none'};
+
+  color: ${props =>
+    props.current === props.index ? props.accentColor : '#caccce'};
+  background: ${props =>
+    props.current === props.index ? props.accentColor : 'none'};
 
   &:before {
     content: counter(dot);

src/components/Navigation.js

@@ -5,6 +5,7 @@ const Navigation = styled.nav`
   display: flex;
   justify-content: center;
   align-items: center;
+  flex-wrap: wrap;
 `
 
 export default Navigation

src/demo/App.js

@@ -39,7 +39,7 @@ function App() {
 
   const disableBody = target => disableBodyScroll(target)
   const enableBody = target => enableBodyScroll(target)
-  const accentColor = '#5cb7b7'
+  const accentColor = 'linear-gradient(to right, #1c8f9e, #5cb7b7)'
   return (
     <>
       <GlobalStyle />
@@ -139,6 +139,46 @@ const tourConfig = [
     content: `Keep in mind that you could try and test everything during the Tour.
       For example, try selecting the highlighted text…`,
   },
+  {
+    selector: '[data-tut="reactour__copy"]',
+    content: `Keep in mind that you could try and test everything during the Tour.
+      For example, try selecting the highlighted text…`,
+  },
+  {
+    selector: '[data-tut="reactour__copy"]',
+    content: `Keep in mind that you could try and test everything during the Tour.
+      For example, try selecting the highlighted text…`,
+  },
+  {
+    selector: '[data-tut="reactour__copy"]',
+    content: `Keep in mind that you could try and test everything during the Tour.
+      For example, try selecting the highlighted text…`,
+  },
+  {
+    selector: '[data-tut="reactour__copy"]',
+    content: `Keep in mind that you could try and test everything during the Tour.
+      For example, try selecting the highlighted text…`,
+  },
+  {
+    selector: '[data-tut="reactour__copy"]',
+    content: `Keep in mind that you could try and test everything during the Tour.
+      For example, try selecting the highlighted text…`,
+  },
+  {
+    selector: '[data-tut="reactour__copy"]',
+    content: `Keep in mind that you could try and test everything during the Tour.
+      For example, try selecting the highlighted text…`,
+  },
+  {
+    selector: '[data-tut="reactour__copy"]',
+    content: `Keep in mind that you could try and test everything during the Tour.
+      For example, try selecting the highlighted text…`,
+  },
+  {
+    selector: '[data-tut="reactour__copy"]',
+    content: `Keep in mind that you could try and test everything during the Tour.
+      For example, try selecting the highlighted text…`,
+  },
   {
     selector: '[data-tut="reactour__style"]',
     content: function DemoHelperComponent() {

src/index.js

@@ -1,4 +1,4 @@
 import 'focus-outline-manager'
-import Tour from './TourHooks'
+import Tour from './Tour'
 export default Tour
 export { Arrow, Close, Badge, Controls, Navigation, Dot } from './components'