Merge pull request #319 from phlask/V.2-SearchBar-(Desktop)-#302

Task 302: Create V.2 SearchBar (Desktop)
phlask · Jun 21, 2023 · d37255e · d37255e
2 parents 7046c31 + 1f9ce41
commit d37255e
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 22 deletions.
diff --git a/src/components/ReactGoogleMaps/ReactGoogleMaps.js b/src/components/ReactGoogleMaps/ReactGoogleMaps.js
@@ -2,6 +2,7 @@ import { Map, GoogleApiWrapper, Marker } from 'google-maps-react';
 import React, { Component } from 'react';
 import ReactTouchEvents from 'react-touch-events';
 import SearchBar from '../SearchBar/SearchBar';
+import TutorialModal from '../TutorialModal/TutorialModal';
 import styles from './ReactGoogleMaps.module.scss';
 import { connect } from 'react-redux';
 import SelectedTap from '../SelectedTap/SelectedTap';
@@ -23,6 +24,7 @@ import MapMarkersFood from '../MapMarkers/MapMarkersFood';
 import { isMobile } from 'react-device-detect';
 import Toolbar from '../Toolbar/Toolbar';
 import MapMarkersMapper from '../MapMarkers/MapMarkersMapper';
+import Stack from '@mui/material/Stack';
 
 // // Actual Magic: https://stackoverflow.com/a/41337005
 // // Distance calculates the distance between two lat/lon pairs
@@ -248,9 +250,9 @@ export class ReactGoogleMaps extends Component {
   onDragEnd = (_, map) => {
     this.setState({
       currlat: map.center.lat(),
-      currlon: map.center.lng(),
+      currlon: map.center.lng()
     });
-  }
+  };
 
   toggleTapInfo = isExpanded => {
     this.setState({
@@ -341,13 +343,18 @@ export class ReactGoogleMaps extends Component {
             </Map>
           </div>
         </ReactTouchEvents>
-        <div className={styles.searchBarContainer}>
-          <SearchBar
-            className="searchBar"
-            search={location => this.searchForLocation(location)}
-          />
-        </div>
-        <Toolbar />
+        <Stack position="absolute" bottom="0px" height="143px" width="34%">
+          <Stack direction="row" spacing={2}>
+            <SearchBar
+              className="searchBar"
+              search={location => this.searchForLocation(location)}
+            />
+            <TutorialModal
+              showButton={isMobile ? !this.state.isSearchBarShown : true}
+            />
+          </Stack>
+          <Toolbar />
+        </Stack>
         <SelectedTap></SelectedTap>
       </div>
     );

diff --git a/src/components/ReactGoogleMaps/ReactGoogleMaps.module.scss b/src/components/ReactGoogleMaps/ReactGoogleMaps.module.scss
@@ -1,6 +1,7 @@
 .searchBarContainer {
-  position: relative;
-  top: 57px;
+  position: absolute;
+  width: 34%;
+  bottom: 75px;
 }
 
 .mapContainer {

diff --git a/src/components/SearchBar/SearchBar.js b/src/components/SearchBar/SearchBar.js
@@ -12,7 +12,9 @@ import {
   faSearchLocation,
   faChevronLeft
 } from '@fortawesome/free-solid-svg-icons';
-import TutorialModal from '../TutorialModal/TutorialModal';
+import Input from '@mui/material/Input';
+import InputAdornment from '@mui/material/InputAdornment';
+import SearchIcon from '@mui/icons-material/Search';
 
 class SearchBar extends React.Component {
   constructor(props) {
@@ -86,13 +88,18 @@ class SearchBar extends React.Component {
                   }`}
                 >
                   {/* type="search" is only HTML5 compliant */}
-                  <input
+                  <Input
                     {...getInputProps({
-                      placeholder: 'Search For Taps Near...'
+                      placeholder: 'Search For Resources Near...'
                     })}
                     className={`${styles.searchInput} form-control`}
                     type="search"
                     ref={this.state.refSearchBar}
+                    startAdornment={
+                      <InputAdornment position="start">
+                        <SearchIcon />
+                      </InputAdornment>
+                    }
                   />
                   {loading && (
                     <div className={styles.autocompleteDropdown}>
@@ -150,10 +157,6 @@ class SearchBar extends React.Component {
             />
           </button>
         )}
-
-        <TutorialModal
-          showButton={isMobile ? !this.state.isSearchBarShown : true}
-        />
       </>
     );
   }

diff --git a/src/components/SearchBar/SearchBar.module.scss b/src/components/SearchBar/SearchBar.module.scss
@@ -1,7 +1,7 @@
 .desktopSearch {
   display: flex;
   flex-direction: row;
-  width: 100%;
+  width: 84%;
   justify-content: flex-start;
   padding: 1rem 0 0 1rem;
   pointer-events: none;

diff --git a/src/components/TutorialModal/TutorialModal.module.scss b/src/components/TutorialModal/TutorialModal.module.scss
@@ -39,9 +39,9 @@
 .infoButton {
   max-width: 30px;
   max-height: 30px;
-  position: absolute;
-  top: 1rem;
-  right: 1rem;
+  position: relative;
+  top: 1.5rem;
+  right: 0.5rem;
   border-radius: 50%;
   background-color: white;