Modify CSS for slider area

Author: xnkevinnguyen

src/view/components/toolbar/GenericSliderComponent.tsx

@@ -13,7 +13,7 @@ interface IProps {
 }
 export const GenericSliderComponent: React.FC<IProps> = props => {
     return (
-        <div className="GenericSliderComponent">
+        <div className="generic-slider-component">
             {props.axisProperties.sliderProps.map(
                 (sliderProperties: ISliderProps, index: number) => {
                     return (

src/view/components/toolbar/InputSlider.tsx

@@ -22,7 +22,7 @@ class InputSlider extends React.Component<ISliderProps, any, any> {
     render() {
         const isInputDisabled = this.context === VIEW_STATE.PAUSE;
         return (
-            <div className="inputSlider">
+            <div className="input-slider">
                 <span>{this.props.axisLabel}</span>
                 <input
                     type="text"
@@ -32,7 +32,7 @@ class InputSlider extends React.Component<ISliderProps, any, any> {
                     defaultValue={this.props.minValue.toLocaleString()}
                     pattern={`^-?[0-9]{0,${
                         this.props.maxValue.toString().length
-                    }}$`}
+                        }}$`}
                     onKeyUp={this.handleOnChange}
                     aria-label={`${this.props.type} sensor input ${this.props.axisLabel}`}
                 />

src/view/styles/ToolBar.css

@@ -167,10 +167,16 @@
     -webkit-appearance: none;
     text-decoration: none;
 }
+
 .gesture-container {
     display: "flex";
     justify-content: "space-between";
     flex-direction: "column";
     align-items: "center";
     height: 750;
+    padding-top:10px;
 }
+
+.generic-slider-component{
+    padding-top:10px;
+}