WV-2705: Update GIF close button styling (#4282)

* updating gif close btn * updating close buttons
nasa-gibs · Apr 28, 2023 · 6bd47e4 · 6bd47e4
1 parent 4381568
commit 6bd47e4
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 33 deletions.
diff --git a/web/js/components/animation-widget/gif-post-creation.js b/web/js/components/animation-widget/gif-post-creation.js
@@ -35,6 +35,7 @@ export default class GifResults extends Component {
       screenWidth,
       screenHeight,
       onClose,
+      closeBtn,
     } = this.props;
     const { blob } = gifObject;
     const { size } = gifObject;
@@ -57,7 +58,7 @@ export default class GifResults extends Component {
         className="dynamic-modal"
         toggle={onClose}
       >
-        <ModalHeader toggle={onClose}>GIF Results</ModalHeader>
+        <ModalHeader close={closeBtn}>GIF Results</ModalHeader>
         <ModalBody>
           <div className="gif-results-dialog-case clearfix">
             <img src={blobURL} width={imgElWidth} height={imgElHeight} />

diff --git a/web/js/components/animation-widget/loading-indicator.js b/web/js/components/animation-widget/loading-indicator.js
@@ -25,6 +25,12 @@ export default function LoadingIndicator(props) {
     </div>
   );
 
+  const closeBtn = (
+    <button className="modal-close-btn" onClick={onClose} type="button">
+      &times;
+    </button>
+  );
+
   return (
     <Modal
       isOpen
@@ -33,7 +39,7 @@ export default function LoadingIndicator(props) {
       backdrop={false}
       wrapClassName="clickable-behind-modal"
     >
-      <ModalHeader toggle={onClose}>{title}</ModalHeader>
+      <ModalHeader close={closeBtn}>{title}</ModalHeader>
       <ModalBody>
         {bodyMsg && (
           <div style={msgStyle}>{bodyMsg}</div>

diff --git a/web/js/components/tour/modal-tour-complete.js b/web/js/components/tour/modal-tour-complete.js
@@ -9,6 +9,11 @@ function ModalComplete(props) {
     currentStory, modalComplete, resetTour, endTour,
   } = props;
   const { readMoreLinks } = currentStory;
+  const closeBtn = (
+    <button className="tour-close-btn" onClick={endTour} type="button">
+      &times;
+    </button>
+  );
   let list;
   if (
     readMoreLinks
@@ -40,7 +45,7 @@ function ModalComplete(props) {
         fade={false}
         keyboard
       >
-        <ModalHeader toggle={endTour}>
+        <ModalHeader close={closeBtn}>
           Story Complete
         </ModalHeader>
         <ModalBody>

diff --git a/web/js/components/tour/modal-tour-start.js b/web/js/components/tour/modal-tour-start.js
@@ -20,34 +20,9 @@ class ModalStart extends React.Component {
     this.state = {
       checked: props.checked,
     };
-
-    this.setWrapperRef = this.setWrapperRef.bind(this);
-    this.handleClickOutside = this.handleClickOutside.bind(this);
     this.handleCheck = this.handleCheck.bind(this);
   }
 
-  componentDidMount() {
-    document.addEventListener('mousedown', this.handleClickOutside);
-  }
-
-  componentWillUnmount() {
-    document.removeEventListener('mousedown', this.handleClickOutside);
-  }
-
-  // Set a reference to the inner div for checking clicks outside of the scrollbar
-  setWrapperRef(node) {
-    this.wrapperRef = node;
-  }
-
-  // Use custom clickOutside function since we contained the clickable area with
-  // CSS to have a cleaner looking scrollbar
-  handleClickOutside(e) {
-    const { toggleModalStart } = this.props;
-    if (this.wrapperRef && !this.wrapperRef.contains(e.target)) {
-      toggleModalStart(e);
-    }
-  }
-
   // Handle the show/hide checkbox state
   handleCheck() {
     const { hideTour, showTour } = this.props;
@@ -81,7 +56,6 @@ class ModalStart extends React.Component {
         backdrop
         fade={false}
         keyboard={false}
-        innerRef={this.setWrapperRef}
       >
         <ModalHeader toggle={endTour} close={closeBtn}>
           Welcome to @NAME@!

diff --git a/web/js/containers/gif.js b/web/js/containers/gif.js
@@ -83,6 +83,15 @@ class GIF extends Component {
     };
   }
 
+  renderCloseBtn() {
+    const { onClose } = this.props;
+    return (
+      <button className="modal-close-btn" onClick={onClose} type="button">
+        &times;
+      </button>
+    );
+  }
+
   renderSelectableBox() {
     const {
       increment,
@@ -114,6 +123,9 @@ class GIF extends Component {
       isGeoProjection,
       proj.resolutions,
     );
+
+    const closeBtn = this.renderCloseBtn();
+
     return (
       <Modal
         backdrop={false}
@@ -123,7 +135,7 @@ class GIF extends Component {
         style={this.getStyle()}
         toggle={onClose}
       >
-        <ModalHeader toggle={onClose}>Create An Animated GIF</ModalHeader>
+        <ModalHeader close={closeBtn}>Create An Animated GIF</ModalHeader>
         <ModalBody>
           <GifPanel
             speed={speed}
@@ -351,6 +363,8 @@ class GIF extends Component {
       left: '45%',
     };
 
+    const closeBtn = this.renderCloseBtn();
+
     if (isDownloading) {
       const headerText = progress ? 'Creating GIF' : 'Requesting Imagery';
       return (
@@ -359,13 +373,13 @@ class GIF extends Component {
           toggle={onClose}
           size={progress === 0 ? 'sm' : 'md'}
         >
-          <ModalHeader toggle={onClose}>{headerText}</ModalHeader>
+          <ModalHeader close={closeBtn}>{headerText}</ModalHeader>
           <ModalBody>
             {progress > 0
               ? <Progress value={progress} />
               : (
                 <div style={spinnerStyle}>
-                  <Spinner color="#fff" />
+                  <Spinner color="light" />
                 </div>
               )}
           </ModalBody>
@@ -384,6 +398,7 @@ class GIF extends Component {
           boundaries={boundaries}
           screenWidth={screenWidth}
           screenHeight={screenHeight}
+          closeBtn={closeBtn}
         />
       );
     }

diff --git a/web/scss/components/modal.scss b/web/scss/components/modal.scss
@@ -122,7 +122,10 @@
   color: #ddd;
   background: transparent;
   border: none;
-  font-size: 24px;
+  font-size: 26px;
+  font-weight: 400;
+  padding-bottom: 4px;
+  text-shadow: 1px 1px 1px #000;
 }
 
 .modal-close-btn:hover {