Fixed style issues

nasa-gibs · Oct 16, 2024 · c1e0d35 · c1e0d35
1 parent 7cb3cfb
commit c1e0d35
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 2 deletions.
diff --git a/web/js/components/date-selector/date-input-column.js b/web/js/components/date-selector/date-input-column.js
@@ -310,6 +310,7 @@ class DateInputColumn extends Component {
           onClick={isDisabled ? () => {} : () => this.changeDate(1)}
           type={type}
           isKioskModeActive={isKioskModeActive}
+          arrowSize="18px"
         />
         <input
           id={inputId}
@@ -333,6 +334,7 @@ class DateInputColumn extends Component {
           onClick={isDisabled ? () => {} : () => this.changeDate(-1)}
           type={type}
           isKioskModeActive={isKioskModeActive}
+          arrowSize="18px"
         />
       </div>
     );

diff --git a/web/js/components/timeline/timeline-controls/axis-timescale-change-controls.js b/web/js/components/timeline/timeline-controls/axis-timescale-change-controls.js
@@ -39,11 +39,13 @@ class AxisTimeScaleChangeControls extends PureComponent {
           direction="up"
           onClick={this.onClickUp}
           type="zoom-level-up"
+          arrowSize="24px"
         />
         <Arrow
           direction="down"
           onClick={this.onClickDown}
           type="zoom-level-down"
+          arrowSize="24px"
         />
       </div>
     );

diff --git a/web/js/components/util/arrow.js b/web/js/components/util/arrow.js
@@ -6,7 +6,7 @@ import { ArrowFilledUp } from '@edsc/earthdata-react-icons/horizon-design-system
  * @function Arrow Up/Down
  */
 function Arrow({
-  onClick, type, direction, isKioskModeActive,
+  onClick, type, direction, isKioskModeActive, arrowSize,
 }) {
   const containerClassName = `date-arrows date-arrow-${direction}`;
   const arrowClassName = `${direction}arrow`;
@@ -17,7 +17,7 @@ function Arrow({
       className={isKioskModeActive ? 'd-none' : containerClassName}
       data-interval={type}
     >
-      <ArrowFilledUp className={arrowClassName} size="24px" />
+      <ArrowFilledUp className={arrowClassName} size={arrowSize} />
     </div>
   );
 }
@@ -27,6 +27,7 @@ Arrow.propTypes = {
   onClick: PropTypes.func,
   type: PropTypes.string,
   isKioskModeActive: PropTypes.bool,
+  arrowSize: PropTypes.string,
 };
 
 export default Arrow;