Review changes

nasa-gibs · Sep 3, 2024 · 548ff0c · 548ff0c
1 parent d5546c7
commit 548ff0c
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 27 deletions.
diff --git a/web/js/components/timeline/timeline-controls/date-change-arrows.js b/web/js/components/timeline/timeline-controls/date-change-arrows.js
@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
+import { ArrowChevronLeft, ArrowChevronRight } from '@edsc/earthdata-react-icons/horizon-design-system/hds/ui';
 import HoverTooltip from '../../util/hover-tooltip';
 import LoadingIndicator from '../../animation-widget/loading-indicator';
 import {
@@ -107,12 +108,7 @@ class DateChangeArrows extends PureComponent {
             placement="top"
             target="left-arrow-group"
           />
-          <svg width="24" height="30">
-            <path
-              d="M 10.240764,0 24,15 10.240764,30 0,30 13.759236,15 0,0 10.240764,0 z"
-              className="arrow"
-            />
-          </svg>
+          <ArrowChevronLeft class="arrow" size="30px" />
         </div>
 
         {/* RIGHT ARROW */}
@@ -130,12 +126,7 @@ class DateChangeArrows extends PureComponent {
             placement="top"
             target="right-arrow-group"
           />
-          <svg width="24" height="30">
-            <path
-              d="M 10.240764,0 24,15 10.240764,30 0,30 13.759236,15 0,0 10.240764,0 z"
-              className="arrow"
-            />
-          </svg>
+          <ArrowChevronRight class="arrow" size="30px" />
         </div>
 
         {/* NOW BUTTON */}

diff --git a/web/js/components/util/arrow.js b/web/js/components/util/arrow.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { ArrowFilledUp } from '@edsc/earthdata-react-icons/horizon-design-system/hds/ui';
 
 /*
  * @function Arrow Up/Down
@@ -16,9 +17,7 @@ function Arrow({
       className={isKioskModeActive ? 'd-none' : containerClassName}
       data-interval={type}
     >
-      <svg width="25" height="8">
-        <path d="M 12.5,0 25,8 0,8 z" className={arrowClassName} />
-      </svg>
+      <ArrowFilledUp className={arrowClassName} size="18px" />
     </div>
   );
 }

diff --git a/web/js/containers/sidebar/footer-content.js b/web/js/containers/sidebar/footer-content.js
@@ -98,7 +98,12 @@ const FooterContent = React.forwardRef((props, ref) => {
           id="layers-add"
           aria-label="Add layers"
           className="layers-add red"
-          text={`${<Plus class="add-plus" size="10px" />} Add Layers`}
+          text={(
+            <>
+              <Plus class="add-plus" size="10px" />
+              Add Layers
+            </>
+          )}
           onClick={onClickAddLayers}
         />
         )}

diff --git a/web/scss/components/checkbox.scss b/web/scss/components/checkbox.scss
@@ -19,7 +19,7 @@
     position: absolute;
     color: #fff;
     left: 1px;
-    top: 4.5px;
+    top: 4px;
     pointer-events: none;
   }
 
@@ -44,6 +44,7 @@
   min-width: 16px;
   text-align: center;
   border-radius: 2px;
+  margin-top: 3px;
 }
 
 .wv-checkbox.gray label {

diff --git a/web/scss/features/sidebar-panel.scss b/web/scss/features/sidebar-panel.scss
@@ -584,7 +584,7 @@ li.item.productsitem.inmotion,
 .productsitem.layer-hidden .layer-info h4,
 .productsitem.layer-hidden .layer-info p {
   color: #D1D1D1;
-  font-weight: 100;
+  font-weight: 300;
 }
 
 .sidebar-panel .layer-main h4,

diff --git a/web/scss/features/timeline.scss b/web/scss/features/timeline.scss
@@ -135,7 +135,7 @@ button:focus {
 
   & input {
     width: 100%;
-    height: 40px;
+    height: 36px;
     color: #fff;
     opacity: 1;
     font-size: 24px;
@@ -217,18 +217,22 @@ button:focus {
 
   & .date-arrows {
     display: block;
-    height: 10px;
+    height: 12px;
     max-width: inherit;
+    width: 35px;
+    margin: auto;
+    text-align: center;
   }
 
   & .date-arrows svg {
     vertical-align: top;
-    display: block;
     margin: 0 auto;
+    margin-top: -3px;
+    display: inline-block;
   }
 
   & .date-arrows svg path {
-    fill: #666;
+    fill: #cfcfcf;
   }
 
   & .input-wrapper:hover .date-arrows:hover svg path {
@@ -241,6 +245,12 @@ button:focus {
     filter: 'FlipV';
   }
 
+  & .date-arrows,
+  & > .button-action-group,
+  & .button-action-group {
+    background-color: #17171b;
+  }
+
   & .date-arrows:hover,
   & > .button-action-group:hover,
   & .button-action-group:hover {
@@ -250,7 +260,7 @@ button:focus {
 
   & > .button-action-group .button-disabled:hover,
   & .button-disabled:hover {
-    background-color: transparent;
+    background-color: #17171b;
     cursor: default;
   }
 
@@ -262,8 +272,12 @@ button:focus {
     margin-left: -12px;
   }
 
-  & #left-arrow-group {
-    transform: scaleX(-1);
+  & #left-arrow-group .arrow {
+    margin-left: -15px;
+  }
+
+  & #right-arrow-group .arrow {
+    margin-left: -14px;
   }
 
   & #left-arrow-group svg {
@@ -274,10 +288,10 @@ button:focus {
   & #now-button-group {
     width: 34px;
     height: 34px;
-    top: -2px;
 
     svg {
       left: 15px;
+      margin-top: -18px;
     }
   }
 
@@ -289,7 +303,8 @@ button:focus {
   }
 
   & > .button-action-group.button-disabled .arrow,
-  & #zoom-buttons-group .button-disabled .arrow {
+  & #zoom-buttons-group .button-disabled .arrow,
+  & #zoom-buttons-group .button-disabled .arrow path {
     fill: #4d4d4d;
   }
 
@@ -309,6 +324,7 @@ button:focus {
     width: 37px;
     top: 16px;
     right: 4px;
+    background-color: transparent;
 
     & svg {
       top: 5px;