Carousel - tidy up spaces and CSS per feedback

Author: Seth Lemmons

20-carousel/a-carousel/src/Carousel.css

@@ -70,7 +70,7 @@
   background-color: #b5b5b5;
 }
 .nav-strip .nav.active .nav-dot {
-  background-color: #1e8bfb !important;
+  background-color: #1e8bfb;
 }
 
 .carousel .card {

20-carousel/a-carousel/src/Carousel.js

@@ -18,15 +18,18 @@ class Carousel extends Component {
   }
 
   render () {
-    const { children, className, position } = this.props;
+    let { className } = this.props;
+    className = className ? ` ${className}` : '';
+
+    const { children, position } = this.props;
     const { activecard } = this.state;
     const xPositions = ['top', 'bottom'],
           axis = xPositions.includes(position) ? 'x' : 'y';
 
     return (
       <div
         {...this.props}
-        className = {`${className} carousel ${position}`}
+        className = {`carousel ${position}${className}`}
       >
         <div className={`nav-strip`}>
           {React.Children.map(children, (child, i) => {
@@ -47,15 +50,17 @@ class Carousel extends Component {
           axis={axis}
         >
           {React.Children.map(children, (child, i) => {
-            const { className } = child.props,
-                  isActive  = (i === activecard) ? 'active' : '',
-                  cardProps = {
-                    ...child.props,
-                    style     : {flex: 1},
-                    className : `${className} card ${isActive}`,
-                    cardindex : i,
-                    activecard
-                  };
+            let { className } = child.props;
+            className = className ? ` ${className}` : '';
+
+            const isActive  = (i === activecard) ? ' active' : '';
+            const cardProps = {
+              ...child.props,
+              style     : {flex: 1},
+              className : ` card${isActive}${className}`,
+              cardindex : i,
+              activecard
+            };
 
             return React.cloneElement(child, cardProps);
           })}