Adjust time slider styles

src/client/components/facet_results/TemporalMapBarChart.scss

-.bar-chart {
-  &-tooltip {
-    @include style-definition(column, flex-start, null);
-    color: black;
-    background-color: $secondary_color;
-    border-radius: 0.25rem;
-    padding: 0.25rem;
-    font-size: 0.8rem;
-
-    div {
-      b {
-        margin: 0 0.25rem 0 0.25rem;
-      }
-    }
-
-    &--open {
-      display: block;
-    }
-
-    &--close {
-      display: none;
-    }
-  }
-
-  &-svg {
-    rect {
-      transform: scaleY(-1);
-      cursor: crosshair;
-    }
-
-    &-colored {
-      stroke: grey;
-      stroke-width: 1;
-    }
-
-    &-non-colored {
-      stroke: grey;
-      stroke-width: 0.25;
-      margin: 0.25rem;
-
-      &:hover {
-        fill: rgba(255, 255, 255, 0.2);
-      }
-    }
-  }
-}

src/client/components/facet_results/TemporalMapCommon.scss

@@ -142,7 +142,7 @@ $secondary_color: rgb(255, 153, 51);
   }
 
   .bar-chart-container {
-    margin-left: 0.5rem;
+    margin-left: 0.09rem;
   }
 
   .slider {

src/client/components/facet_results/TemporalMapTimeSlider.js

@@ -6,21 +6,28 @@ import iconImg from './icon.png';
 import BarChart from './TemporalMapBarChart';
 
 
-const color = 'rgb(0, 126, 230)';
+const blue = 'rgb(0, 126, 230)';
 
 const styles = () => ({
-  slider: {
-    width: '99%',
+  // slider: {
+  //   color: blue,
+  //   width: '99%',
+  //   margin: '8px 0 30px 0',
+  //   padding: '0 6px 0 6px',
+  // },
+  sliderRoot: {
+    color: blue,
+    width: '98%',
     margin: '8px 0 30px 0',
     padding: '0 6px 0 6px',
-    '& button': {
-      backgroundColor: color,
-      '&:after': {
-        content: '""',
-        borderRight: `3px solid ${color}`,
-        height: '26px',
-        marginTop: '-36px'
-      }
+  },
+  sliderThumb: {
+    backgroundColor: blue,
+    '&:after': {
+      content: '""',
+      borderRight: `3px solid ${blue}`,
+      height: '26px',
+      marginTop: '-36px'
     }
   }
 });
@@ -56,6 +63,7 @@ class TemporalMapTimeSlider extends Component {
       const interval = this.props.dateUniques.length / toSplitIn;
       const target = [];
 
+
       for (let i = 0; i < toSplitIn; i++) {
         target.push(this.props.dateUniques[Math.round(interval * i)]);
       }
@@ -189,7 +197,6 @@ class TemporalMapTimeSlider extends Component {
       doubleSpeedEnabled,
       speedButtonActive
     } = this.state;
-
     return (
       <div className="time-slider">
         <div className="time-slider-button" onClick={this._containerVisibility}>
@@ -236,17 +243,19 @@ class TemporalMapTimeSlider extends Component {
                 <div className="bar-chart-container">
                   <BarChart memory={memory} />
                 </div>
-                <div>
-                  <Slider
-                    className={classes.slider}
-                    value={value}
-                    aria-labelledby="label"
-                    onChange={this._handleSliderChange}
-                    min={0}
-                    max={maxValue}
-                    step={1}
-                  />
-                </div>
+                <Slider
+                  classes={{
+                    root: classes.sliderRoot,
+                    thumb: classes.sliderThumb
+                  }}
+                  value={value}
+                  aria-labelledby="label"
+                  onChange={this._handleSliderChange}
+                  min={0}
+                  max={maxValue}
+                  step={1}
+                  marks={true}
+                />
                 <div className="slider-labels-container">
                   {currentDay && currentDay.map((f, i) => <div key={`label-${i}`}>{f}</div>)}
                 </div>

src/client/components/facet_results/TemporalMapTimeSlider.scss

-.time-slider {
-  &-button {
-    position: absolute;
-    top: 1.5rem;
-    left: 1.5rem;
-
-    img {
-      height: 1.5rem;
-      border-radius: 50%;
-      background-color: $secondary_color;
-      padding: 0.5rem;
-      cursor: pointer;
-
-      &:hover {
-        background-color: darken($secondary_color, 5%);
-      }
-    }
-  }
-
-  &-container {
-    position: absolute;
-    @include style-definition(row, flex-end, center);
-    min-width: 800px;
-    max-width: 815px;
-    left: 2rem;
-    bottom: 2rem;
-    padding: 1rem 1.5rem 0.5rem 1.5rem;
-    background-color: $main_color;
-    border: 1.5px solid $secondary_color;
-    border-radius: 0.25rem;
-
-    &-labels {
-      color: white;
-      font-size: 0.85rem;
-
-      .speed-buttons {
-        @include style-definition(row, flex-end, center);
-        color: lightgrey;
-        font-size: 0.85rem;
-
-        div {
-          cursor: pointer;
-          margin-left: 0.5rem;
-
-          &:hover {
-            color: darken(white, 10%);
-          }
-        }
-      }
-    }
-
-    .control-buttons {
-      margin-top: 2rem;
-      margin-right: 1rem;
-
-      .button {
-        @include style-definition(row, center, center);
-        height: 0.8rem;
-        width: 1.5rem;
-        background-color: lightgrey;
-        padding: 0.5rem;
-        border-radius: 0.25rem;
-        margin-right: 0.15rem;
-        cursor: pointer;
-
-        &:nth-child(1) {
-          border-top-right-radius: 0;
-          border-bottom-right-radius: 0;
-        }
-
-        &:nth-child(2) {
-          border-top-left-radius: 0;
-          border-bottom-left-radius: 0;
-        }
-
-        i {
-          font-size: 0.8em !important;
-          margin: 0 !important;
-        }
-
-        &:hover {
-          background-color: grey;
-        }
-      }
-    }
-  }
-
-  .bar-chart-container {
-    margin-left: 0.5rem;
-  }
-
-  .slider {
-    &-labels-container {
-      @include style-definition(row, space-between, null);
-      margin-top: -10px;
-
-      div {
-        font-size: 0.725rem;
-        color: white;
-      }
-    }
-  }
-
-  .column {
-    @include style-definition(column, null, null);
-    width: 100%;
-  }
-
-  .row {
-    @include style-definition(row, space-between, flex-start);
-  }
-
-  &-speed-button--active {
-    color: white;
-    border-bottom: 1px solid white;
-    padding-bottom: 2px;
-  }
-
-  &--close {
-    display: none;
-  }
-}