Added feedback on button (#1) and some changes

src/App.css

@@ -1,9 +1,17 @@
 .locationIcon {
   width: 32px;
+}
+
+div.mapboxgl-marker {
   margin-top: -16px;
   margin-left: -16px;
 }
 
+div.mapboxgl-marker.gasStation {
+  margin-top: -24px;
+  margin-left: -30px;
+}
+
 div.react-toast-notifications__container {
   z-index: 1031 ;
 }

src/App.js

@@ -113,7 +113,7 @@ class Application extends React.Component {
           toggleAboutModal={this.toggleAboutModal}
         />
         <Map selectedGasType={selectedGasType} userLocation={userLocation} needUpdateUserLocation={needUpdateUserLocation} setNeedUpdateUserLocation={this.setNeedUpdateUserLocation} showGasStation={this.showGasStation} />
-        <Footer selectedGasType={selectedGasType} selectGasType={this.selectGasType} setNeedUpdateUserLocation={this.setNeedUpdateUserLocation} />
+        <Footer selectedGasType={selectedGasType} isLocating={needUpdateUserLocation} selectGasType={this.selectGasType} setNeedUpdateUserLocation={this.setNeedUpdateUserLocation} />
       </ToastProvider>
     );
   }

src/Components/Footer.js

@@ -1,6 +1,11 @@
 import React from 'react';
-import { Navbar, Button } from "react-bootstrap";
+import {
+  Navbar,
+  Button,
+  Spinner 
+} from "react-bootstrap";
 import PropTypes from 'prop-types';
+import { MdGpsFixed } from "react-icons/md";
 
 import GasTypes from "./GasTypes";
 
@@ -9,24 +14,34 @@ const Footer = (props) => {
     selectGasType,
     selectedGasType,
     setNeedUpdateUserLocation,
+    isLocating,
   } = props;
 
   return (
     <Navbar bg="light" variant="light" fixed="bottom">
       <GasTypes selectedGasType={selectedGasType} selectGasType={selectGasType} />
-      <Button
-        variant="link"
-        onClick={() => setNeedUpdateUserLocation(true)}
-        onFocus={() => { }}
-        onBlur={() => { }}
-      >
-        <img src="/gps.png" alt="Géolocalisez moi" />
-      </Button>
+      <div style={{width: "36px", display: "flex", justifyContent: "center", paddingLeft: "1rem"}}>
+        {isLocating ? (
+          <Spinner animation="border" size="sm" role="status">
+            <span className="sr-only">Chargement...</span>
+          </Spinner>
+      ) : ( 
+        <Button
+          variant="link"
+          onClick={() => setNeedUpdateUserLocation(true)}
+          onFocus={() => { }}
+          onBlur={() => { }}
+        >
+          <MdGpsFixed />
+        </Button>
+      )}
+      </div>
     </Navbar>
   );
 };
 
 Footer.propTypes = {
+  isLocating: PropTypes.bool.isRequired,
   selectedGasType: PropTypes.string.isRequired,
   selectGasType: PropTypes.func.isRequired,
   setNeedUpdateUserLocation: PropTypes.func.isRequired,

src/Components/GasStation.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Modal, Button, ListGroup } from "react-bootstrap";
 import PropTypes from 'prop-types';
+import { FaWaze } from "react-icons/fa";
 import { gasTypes } from "../config";
 
 import { capitalizeFirstLetter} from "../helpers";
@@ -69,11 +70,7 @@ class GasStation extends React.Component {
         </Modal.Body>
         <Modal.Footer>
           <Button variant="primary" onClick={() => hideModal(true)}>
-            <img
-              className="locationIcon"
-              src="/waze.png"
-              alt="S'y rendre"
-            />
+            <FaWaze size="2em" />
           </Button>
         </Modal.Footer>
       </Modal>

src/Components/Map.js

@@ -4,6 +4,8 @@ import ReactMapGL, { Marker } from 'react-map-gl';
 import { Button } from "react-bootstrap";
 import { withToastManager } from 'react-toast-notifications';
 import PropTypes from 'prop-types';
+import { MdLocalGasStation } from "react-icons/md";
+import { GiPositionMarker } from "react-icons/gi";
 import { haveSelectedGas } from '../helpers';
 import { mapboxToken, radius, baseApiUrl } from "../config";
 
@@ -215,7 +217,7 @@ class Map extends React.Component {
                 latitude={userLocation.latitude}
                 longitude={userLocation.longitude}
               >
-                <img className="locationIcon" src="/car.png" alt="My position" />
+                <GiPositionMarker size="2em"  />
               </Marker>
             ) : (null)
           }
@@ -224,6 +226,7 @@ class Map extends React.Component {
               key={gasStation.stationId}
               latitude={gasStation.location.coordinates[1]}
               longitude={gasStation.location.coordinates[0]}
+              className="gasStation"
             >
               <Button
                 variant="link"
@@ -231,11 +234,7 @@ class Map extends React.Component {
                 onFocus={() => { }}
                 onBlur={() => { }}
               >
-                <img
-                  className="locationIcon"
-                  src="/gas-station.png"
-                  alt={`${gasStation.stationId}`}
-                />
+                <MdLocalGasStation size="2em" />
               </Button>
 
             </Marker>