WV-3226 Look and Feel Changes (#5434)

* Look and feel changes * Fixed linting * Review changes * Fixed e2e tests * Further review comments * Weight and checkbox fixes * Fixed checkbox check height * Spacing and background feedback * Changes from review meeting
nasa-gibs · Sep 5, 2024 · 2c63758 · 2c63758
1 parent 37e4216
commit 2c63758
Show file tree

Hide file tree

Showing 41 changed files with 334 additions and 140 deletions.
diff --git a/e2e/features/animation/animation-test.spec.js b/e2e/features/animation/animation-test.spec.js
@@ -64,8 +64,8 @@ test('Disable playback when max frames exceeded', async () => {
   const { playButton, yearStartInput } = selectors
   await page.goto(animationGeostationary)
   await closeModal(page)
-  const animateYearDown = page.locator('.wv-date-range-selector > div > div > div:nth-child(3) > svg > .downarrow').first()
-  const animateYearUp = page.locator('.wv-date-range-selector > div > div > div > svg > .uparrow').first()
+  const animateYearDown = page.locator('.wv-date-range-selector > div > div > div:nth-child(3) > svg.downarrow').first()
+  const animateYearUp = page.locator('.wv-date-range-selector > div > div > div > svg.uparrow').first()
   await animateYearDown.click()
   await expect(playButton).toHaveClass(/disabled/)
   // Playback re-enabled when frames within the max

diff --git a/e2e/features/share/share-test.spec.js b/e2e/features/share/share-test.spec.js
@@ -54,7 +54,7 @@ test('Share link clipboard with no time query string param in the page url will
   const queryString = 'http://localhost:3000/'
   await page.goto(queryString)
   await closeModal(page)
-  await page.getByRole('button', { name: '×' }).click()
+  await page.locator('.tour-close-btn').click()
   await shareToolbarButton.click()
   const minutesOffset = 40 * 60000 // 40 minutes
   let date = new Date(new Date().getTime() - minutesOffset)

diff --git a/e2e/features/timeline/date-selector-test.spec.js b/e2e/features/timeline/date-selector-test.spec.js
@@ -50,7 +50,7 @@ test('Left timeline arrow will not be disabled by default', async () => {
   const queryString = 'http://localhost:3000/'
   await page.goto(queryString)
   await closeModal(page)
-  await page.getByRole('button', { name: '×' }).click()
+  await page.locator('.tour-close-btn').click()
   const leftArrow = await page.locator('#left-arrow-group')
   await expect(leftArrow).not.toHaveClass(/button-disabled/)
 })
@@ -59,7 +59,7 @@ test('Left timeline arrow will not be disabled by default', async () => {
 // test.only('Right timeline arrow will be disabled by default', async () => {
 //   const queryString = 'http://localhost:3000/'
 //   await page.goto(queryString)
-//   await page.getByRole('button', { name: '×' }).click()
+//   await page.locator('.tour-close-btn').click()
 //   const rightArrow = await page.locator('#right-arrow-group')
 //   await expect(rightArrow).toHaveClass(/button-disabled/)
 // })
@@ -68,7 +68,7 @@ test('Left timeline arrow will not be disabled by default', async () => {
 // test('Now button will be disabled by default', async () => {
 //   const queryString = 'http://localhost:3000/'
 //   await page.goto(queryString)
-//   await page.getByRole('button', { name: '×' }).click()
+//   await page.locator('.tour-close-btn').click()
 //   const nowButton = page.locator('#now-button-group')
 //   await expect(nowButton).toHaveClass(/button-disabled/)
 // })

diff --git a/e2e/test-utils/global-variables/selectors.js b/e2e/test-utils/global-variables/selectors.js
@@ -15,8 +15,8 @@ module.exports = (page) => ({
   animationButtonCase: page.locator('#timeline-header .animate-button'),
   animationButton: page.locator('.animate-button'),
   playButton: page.locator('#play-button'),
-  animateYearUp: page.locator('.wv-date-range-selector > div > div:nth-child(2) > div > svg > .uparrow'),
-  animateYearDown: page.locator('.wv-date-range-selector > div > div > div:nth-child(3) > svg > .downarrow'),
+  animateYearUp: page.locator('.wv-date-range-selector > div > div:nth-child(2) > div > svg.uparrow'),
+  animateYearDown: page.locator('.wv-date-range-selector > div > div > div:nth-child(3) > svg.downarrow'),
   yearStartInput: page.locator('#year-animation-widget-start'),
   monthStartInput: page.locator('#month-animation-widget-start'),
   dayStartInput: page.locator('#day-animation-widget-start'),

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -146,6 +146,7 @@
     "yargs": "^17.7.2"
   },
   "dependencies": {
+    "@edsc/earthdata-react-icons": "^0.0.2",
     "@elastic/react-search-ui": "^1.21.5",
     "@elastic/react-search-ui-views": "^1.21.2",
     "@fortawesome/fontawesome-svg-core": "^6.6.0",

diff --git a/web/.eslintrc b/web/.eslintrc
@@ -25,7 +25,11 @@
     },
     "import/resolver": {
       "webpack": {}
-    }
+    },
+    "import/core-modules": [
+      "@edsc/earthdata-react-icons/horizon-design-system/earthdata/ui",
+      "@edsc/earthdata-react-icons/horizon-design-system/hds/ui"
+    ]
   },
   "rules": {
     // The following rules are cases where our base rules

diff --git a/web/fonts/Inter/Inter-Light.ttf b/web/fonts/Inter/Inter-Light.ttf
diff --git a/web/fonts/Inter/Inter-Medium.ttf b/web/fonts/Inter/Inter-Medium.ttf
diff --git a/web/fonts/PublicSans/PublicSans-Regular.ttf b/web/fonts/PublicSans/PublicSans-Regular.ttf
diff --git a/web/fonts/PublicSans/PublicSans-VariableFont_wght.ttf b/web/fonts/PublicSans/PublicSans-VariableFont_wght.ttf
diff --git a/web/js/components/layer/product-picker/search/search-layer-row.js b/web/js/components/layer/product-picker/search/search-layer-row.js
@@ -3,6 +3,7 @@ import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Button, UncontrolledTooltip } from 'reactstrap';
+import { Check } from '@edsc/earthdata-react-icons/horizon-design-system/hds/ui';
 import {
   addLayer as addLayerAction,
   removeLayer as removeLayerAction,
@@ -129,14 +130,17 @@ class SearchLayerRow extends React.Component {
         onMouseEnter={() => this.toggleDeleteIcon(true)}
         onMouseLeave={() => this.toggleDeleteIcon(false)}
       >
-        <div className={checkboxClass}>
+        <div className={checkboxClass + (!isMetadataShowing ? ' gray' : '')}>
           <input
             type="checkbox"
             id={`${encodedId}-checkbox`}
             name={`${encodedId}-checkbox`}
             checked={isEnabled}
             onChange={this.toggleEnabled}
           />
+          {isEnabled && (
+            <Check class="check" size="15px" />
+          )}
         </div>
         {layerNotices && (
           <div className="layer-notice-wrapper">

diff --git a/web/js/components/layer/settings/associated-layers-toggle.js b/web/js/components/layer/settings/associated-layers-toggle.js
@@ -38,6 +38,7 @@ function AssociatedLayersToggle(props) {
           <Checkbox
             id={id}
             key={id}
+            color="gray"
             title="Enable/disable this layer"
             checked={isEnabled}
             onCheck={onCheck}

diff --git a/web/js/components/layer/settings/palette.js b/web/js/components/layer/settings/palette.js
@@ -59,6 +59,9 @@ function PaletteSelect (props) {
           name="wv-palette-radio"
           onClick={() => onChangePalette(id)}
         />
+        {isSelected && (
+          <span class="dot" />
+        )}
         <label htmlFor={`wv-palette-radio-${id}`}>
           <span
             className={isInvisible ? 'checkerbox-bg wv-palettes-class' : 'wv-palettes-class'}
@@ -98,6 +101,9 @@ function PaletteSelect (props) {
           name="wv-palette-radio"
           onClick={() => onChangePalette(id)}
         />
+        {isSelected && (
+          <span class="dot" />
+        )}
         <label htmlFor={`wv-palette-radio-${id}`}>
           <img src={dataURL} />
           <span className="wv-palette-label">{legend.name || 'Default'}</span>

diff --git a/web/js/components/layer/settings/vector-style.js b/web/js/components/layer/settings/vector-style.js
@@ -123,6 +123,9 @@ class VectorStyleSelect extends React.Component {
           name="wv-palette-radio"
           onClick={() => this.onChangeVectorStyle(vectorStyleId)}
         />
+        {isSelected && (
+          <span class="dot" />
+        )}
         <label htmlFor={`wv-palette-radio-${vectorStyleId}`}>
           <span
             className="wv-palettes-class"

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 {
@@ -84,7 +85,7 @@ class DateChangeArrows extends PureComponent {
     const rightArrowUp = () => this.onArrowUp('right');
 
     return (
-      <div>
+      <div className="arrow-group">
         {arrowDown && !tilesPreloaded && (
           <LoadingIndicator
             title="Loading ..."
@@ -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/tour/content-intro.js b/web/js/components/tour/content-intro.js
@@ -1,18 +1,21 @@
 /* eslint-disable react/destructuring-assignment */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { ArrowLineRightCircleFill } from '@edsc/earthdata-react-icons/horizon-design-system/earthdata/ui';
 
 function TourIntro(props) {
   return (
     <div className="tour-intro">
       <p className="intro">
         Visually explore the past and the present of this dynamic planet from a satellite&apos;s perspective.
-        Select from an array of stories below to learn more about @NAME@, the satellite imagery we provide and events occurring around the world.
+        Select from an array of stories below to learn more about @NAME@ (a part of
         {' '}
-        <a href="#" title="Start using @NAME@" onClick={props.toggleModalStart}>
+        <a href="https://www.earthdata.nasa.gov/" target="_blank" rel="noreferrer">NASA Earthdata</a>
+        ), the satellite imagery we provide and events occurring around the world.
+        {' '}
+        <a href="#" title="Start using @NAME@" onClick={props.toggleModalStart} className="start-link">
           Start using @NAME@
-          <FontAwesomeIcon icon="arrow-right" />
+          <ArrowLineRightCircleFill class="intro-arrow" size="16px" />
         </a>
       </p>
     </div>

diff --git a/web/js/components/tour/modal-tour-complete.js b/web/js/components/tour/modal-tour-complete.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import {
   Modal, ModalHeader, ModalBody, ModalFooter,
 } from 'reactstrap';
+import { Close } from '@edsc/earthdata-react-icons/horizon-design-system/hds/ui';
 
 function ModalComplete(props) {
   const {
@@ -11,7 +12,7 @@ function ModalComplete(props) {
   const { readMoreLinks } = currentStory;
   const closeBtn = (
     <button className="tour-close-btn" onClick={endTour} type="button">
-      &times;
+      <Close class="add-plus" size="14px" />
     </button>
   );
   let list;

diff --git a/web/js/components/tour/modal-tour-in-progress.js b/web/js/components/tour/modal-tour-in-progress.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import {
   Modal, ModalHeader, ModalBody, ModalFooter,
 } from 'reactstrap';
+import { Close } from '@edsc/earthdata-react-icons/horizon-design-system/hds/ui';
 import Steps from './widget-steps';
 
 class ModalInProgress extends React.Component {
@@ -26,7 +27,7 @@ class ModalInProgress extends React.Component {
     } = this.props;
     const closeBtn = (
       <button className={isKioskModeActive ? 'd-none' : 'end-tour-close-btn'} onClick={endTour} type="button">
-        &times;
+        <Close class="add-plus" size="14px" />
       </button>
     );
     return (

diff --git a/web/js/components/tour/modal-tour-start.js b/web/js/components/tour/modal-tour-start.js
@@ -8,6 +8,7 @@ import {
   InputGroup,
   InputGroupText,
 } from 'reactstrap';
+import { Close } from '@edsc/earthdata-react-icons/horizon-design-system/hds/ui';
 import Checkbox from '../util/checkbox';
 import TourIntro from './content-intro';
 import TourBoxes from './tour-boxes';
@@ -44,7 +45,7 @@ class ModalStart extends React.Component {
     const { checked } = this.state;
     const closeBtn = (
       <button className="tour-close-btn" onClick={endTour} type="button">
-        &times;
+        <Close class="add-plus" size="14px" />
       </button>
     );
     return (
@@ -58,7 +59,7 @@ class ModalStart extends React.Component {
         keyboard={false}
       >
         <ModalHeader toggle={endTour} close={closeBtn}>
-          Welcome to @NAME@!
+          Welcome to NASA @NAME@
         </ModalHeader>
 
         <Scrollbars style={{ maxHeight: `${height - 200}px` }}>

diff --git a/web/js/components/tour/tour-box.js b/web/js/components/tour/tour-box.js
@@ -67,6 +67,8 @@ class TourBox extends React.Component {
         onClick={(e) => selectTour(e, story, index, storyId)}
       >
         <div className="tour-box-content">
+          <i className="tour-box-icon" aria-hidden="true" />
+          <div className="tour-box-gradient" />
           <div className="tour-box-header">
             <h3 className="tour-box-title">{title}</h3>
           </div>

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/components/util/checkbox.js b/web/js/components/util/checkbox.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { Check } from '@edsc/earthdata-react-icons/horizon-design-system/hds/ui';
 import HoverTooltip from './hover-tooltip';
 /*
  * A checkbox component
@@ -33,6 +34,9 @@ export default function Checkbox (props) {
           onChange={showDisabledToolTip ? () => null : onCheck}
           tabIndex="0"
         />
+        {checked && (
+          <Check class="check" size="15px" />
+        )}
         {children}
         <label htmlFor={id}>
           <span>{label}</span>

diff --git a/web/js/containers/sidebar/footer-content.js b/web/js/containers/sidebar/footer-content.js
@@ -8,6 +8,7 @@ import {
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { isMobileOnly, isTablet } from 'react-device-detect';
 import googleTagManager from 'googleTagManager';
+import { Plus } from '@edsc/earthdata-react-icons/horizon-design-system/hds/ui';
 import ChartingInfo from '../../components/charting/charting-info';
 import Button from '../../components/util/button';
 import CompareModeOptions from '../../components/sidebar/compare-mode-options';
@@ -97,7 +98,12 @@ const FooterContent = React.forwardRef((props, ref) => {
           id="layers-add"
           aria-label="Add layers"
           className="layers-add red"
-          text="+ Add Layers"
+          text={(
+            <>
+              <Plus class="add-plus" size="10px" />
+              Add Layers
+            </>
+          )}
           onClick={onClickAddLayers}
         />
         )}