Aram/mui

README.md

@@ -1,3 +1,7 @@
 Frollic
 
 An app for finding accessible venues
+
+<img width="1492" alt="frolic" src="https://user-images.githubusercontent.com/7935556/161449122-d7fa1b72-3100-4a21-94d7-53cd6f4b97b2.png">
+
+Test suite awaiting approval.

client/actions/actions.js

@@ -2,7 +2,6 @@ import * as types from '../constants/actionTypes';
 import axios from 'axios';
 
 export const getResults = (location, radius, categories) => (dispatch) => {
-
   axios({
     method: 'POST',
     url: `/api/search`,

client/components/MainContainer.jsx

@@ -1,13 +1,14 @@
 import React from 'react';
 import Sidebar from './Sidebar.jsx';
 import ResultsContainer from './ResultsContainer.jsx';
+import { Paper } from '@mui/material';
 
 const MainContainer = () => {
     return (
-        <section id="main-container">
+        <Paper id="main-container">
             <Sidebar/>
             <ResultsContainer/>
-        </section>
+        </Paper>
     )
 }
 export default MainContainer;

client/components/Navbar.jsx

@@ -1,23 +1,26 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import * as actions from '../actions/actions';
+import { AppBar, Avatar, Button, Container, Toolbar } from '@mui/material';
 
 const mapDispatchToProps = (dispatch) => ({
-    toggleFavsPage: () => {
-      dispatch(actions.toggleFavsPage());
-    }
-  });
+  toggleFavsPage: () => {
+    dispatch(actions.toggleFavsPage());
+  }
+});
 
 const Navbar = (props) => {
     return (
-    <div id="nav">
-      <a href="/"><img id="logo" alt="frollic-logo" src="/assets/logo.png"></img></a>
-      <div id="profile-container">
-          <button id="profile-icon" onClick={props.toggleFavsPage}>
-              <img src="https://img.icons8.com/small/32/000000/gender-neutral-user.png"/>
-          </button>
-      </div>
-    </div>
+    <AppBar>
+      <Toolbar id="nav">
+        <Button href="/">
+          <img id="logo" alt="frollic-logo" src="/assets/logo.png" />
+        </Button>
+          <Button onClick={props.toggleFavsPage}>
+            <img id="profile-icon" src="https://img.icons8.com/small/32/000000/gender-neutral-user.png"/>
+          </Button>
+      </Toolbar>
+    </AppBar>
     )
 }
 export default connect(null, mapDispatchToProps)(Navbar);

client/components/ResultCard.jsx

@@ -1,29 +1,54 @@
 import React from 'react';
 import {CopyToClipboard} from 'react-copy-to-clipboard';
+import { Button, ButtonGroup, Card, CardActionArea, CardActions, CardContent, CardMedia, Tooltip, Typography } from '@mui/material';
+import { flexbox } from '@mui/system';
+
+const teal = '#22B3A6';
+const gold = '#f0c25f';
+const white = '#FFFCF5';
+const gray = '#D0D7DD';
+const black = '#2A343A';
+const shadow = 'rgb(42, 52, 58, .10)';
 
 const ResultCard = (props) => {
 
   return (
-    <article>
-      <div className="business">
-        <img className="businessImg"src={props.image}></img>
-        <div className="businessDetails">
-          <p className="distance">{props.distance}</p>
-          <p><a className="name" href={props.url}>{props.name}</a></p>
-          <p><span className="price">{props.price}</span><span>&#8226;</span><span className="rating">Rating: {props.rating}</span></p>
-          <p className="Address">{props.address}</p>
-          <p className="phone">{props.phone}</p>
-          <button className="add-comment">Show Comments</button>
-        </div>
-      </div>
-      <div className="buttonContainer">
-        <button className="addFav" onClick={() => props.addFav(props.result)}>Favorite</button>
-        <button className="comment" onClick={props.addComment}>Comment</button>
-        <CopyToClipboard text={props.url}>
-          <button className="share" onClick={(e) => {e.target.innerText = 'Copied!'; setTimeout(() => {e.target.innerText = 'Share'}, 1000) }}>Share</button>
-        </CopyToClipboard>
-      </div>
-    </article>
+    <Card className="card" sx={{display: 'flex', mb: '5px'}}>
+      <CardMedia className="businessImg" component="img" sx={{ width: 200 }} image={props.image}></CardMedia>
+
+      <CardContent className="businessDetails">
+        <Typography className="distance">{props.distance}</Typography>
+        <Typography><a className="name" href={props.url}>{props.name}</a></Typography>
+        <Typography><span className="price">{props.price}</span><span>&#8226;</span><span className="rating">Rating: {props.rating}</span></Typography>
+        <Typography className="Address">{props.address}</Typography>
+        <Typography className="phone">{props.phone}</Typography>
+        {/* <Button className="add-comment" sx={{color: teal, p: '4px 0 0'}}>Show Comments</Button> */}
+      </CardContent>
+
+      <CardActions
+        disableSpacing
+        sx={{display: 'flex', flexDirection: 'column', alignItems: 'stretch'}}
+      >
+        <ButtonGroup orientation="vertical">
+          <Button
+            variant="contained"
+            sx={{backgroundColor: teal, color: white}}
+            onClick={() => props.addFav(props.result)}>Favorite</Button>
+          {/* <Button
+            variant="contained"
+            sx={{backgroundColor: gold, color: black}}
+            onClick={props.addComment}>Comment</Button> */}
+          <CopyToClipboard text={props.url}>
+            {/* <Tooltip title="Copy to clipboard"> */}
+              <Button
+                variant="contained"
+                sx={{backgroundColor: gold, color: black}}
+                onClick={(e) => {e.target.innerText = 'Copied!'; setTimeout(() => {e.target.innerText = 'Share'}, 1000) }}>Share</Button>
+            {/* </Tooltip> */}
+          </CopyToClipboard>
+        </ButtonGroup>
+      </CardActions>
+    </Card>
   );
 }
 

client/components/ResultsContainer.jsx

@@ -2,6 +2,7 @@ import React, { useEffect } from 'react';
 import { connect } from 'react-redux';
 import ResultCard from './ResultCard.jsx'
 import * as actions from '../actions/actions';
+import { Card, Paper, Typography } from '@mui/material';
 
 const mapStateToProps = (state) => ({
   searchResults: state.search.searchResults,
@@ -22,14 +23,19 @@ const ResultsContainer = (props) => {
   if (!props.searchResults.length && !props.firstRender) {
     return (
       <section id="splash">
-        <h2>Sorry, no results found matching your query. <br/>Try expanding your search radius.</h2>
+        <Typography className='h2'>
+          Sorry, no results found matching your query.
+          Try expanding your search radius.
+        </Typography>
       </section>
     )
   } else if (!props.searchResults.length) {
     return (
-      <section id="splash">
-        <h1>fun with frollic</h1>
-      </section>
+      <Card id="splash">
+        <Typography className='h1' sx={{fontSize: '36px', fontWeight: '700'}}>
+          fun with frollic
+        </Typography>
+      </Card>
     )
   }
 
@@ -51,10 +57,10 @@ const ResultsContainer = (props) => {
   });
 
   return (
-    <section id="results-container">
-      <h3 id="result-word">Results: </h3>
+    <Paper id="results-container">
+      <Typography id="result-word">Results: </Typography>
       {resultCards}
-    </section>
+    </Paper>
   );
 }
 

client/components/Sidebar.jsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import * as actions from '../actions/actions';
+import { Button, Checkbox, InputLabel, FormGroup, FormLabel, MenuItem, Paper,
+  Select, Grid, TextField, Typography } from '@mui/material';
 
 const mapDispatchToProps = (dispatch) => ({
   getResults: (location, radius, categories) => {
@@ -12,84 +14,107 @@ const Sidebar = (props) => {
   const handleClick = (e) => {
     e.preventDefault();
     const location = document.querySelector('input[name="location"]').value;
-    const radius = document.querySelector('select[name="radius"]').value;
+    const radius = document.querySelector('input[name="radius"]').value;
     const checkboxes = document.querySelectorAll('input[type=checkbox]:checked');
     let categories = '';
     checkboxes.forEach((el) => categories += ',' + el.name);
     categories = categories.slice(1);
     props.getResults(location, radius, categories);
   }
-  //  onSubmit={() => {return false}}
+
   return (
-    <aside>
-      <form>
-        <div className="location-and-radius">
-        <div className="form-element">
-        <label htmlFor="location" className="side-header">Your Address or Zipcode</label><br/>
-        <input type="text" name="location" placeholder="eg. 123 Main Street, New York, NY, 10036 or 90210"></input><br/>
-        </div>
-
-        <div className="form-element">
-        <label htmlFor="radius" className="side-header">Search Radius</label><br/>
-        <select name="radius">
-          <option value=".5">less than 1 mile</option>
-          <option value="1">1 mile</option>
-          <option value="5">5 miles</option>
-          <option value="10">10 miles</option>
-          <option value="25">25 miles</option>
-        </select><br/>
-        </div>
-        </div>
+    <Paper id="aside">
+      <FormGroup>
+        <FormGroup className="location-and-radius">
+          <FormGroup className="form-element">
+            <InputLabel htmlFor="location" className="side-header">
+              Your Address or Zipcode
+            </InputLabel>
+            {/* <br/> */}
+            <TextField
+              type="text"
+              name="location"
+              placeholder="eg. 123 Main Street, New York, NY, 10036 or 90210"
+            ></TextField>
+            {/* <br/> */}
+          </FormGroup>
+
+          <FormGroup className="form-element" sx={{mt: '10px'}}>
+            <InputLabel
+              htmlFor="radius"
+              className="side-header"
+            >Search Radius</InputLabel>
+            {/* <br/> */}
+            <Select name="radius" defaultValue=".5">
+              <MenuItem value=".5">less than 1 mile</ MenuItem>
+              <MenuItem value="1" >1 mile</           MenuItem>
+              <MenuItem value="5" >5 miles</          MenuItem>
+              <MenuItem value="10">10 miles</         MenuItem>
+              <MenuItem value="25">25 miles</         MenuItem>
+            </Select>
+            {/* <br/> */}
+          </FormGroup>
+        </FormGroup>
 
-        <div className="filters">
-          <p className="side-header">What type of locations are you looking for?</p>
-          <div className="checkboxes">
-            <div className="checkbox">
-            <input type="checkbox" name="galleries"></input>
-            <label htmlFor="Galleries">Art Galleries</label><br/>
-            </div>
+        <FormGroup className="filters" sx={{mt: '10px'}}>
+          <InputLabel className="side-header">
+            What type of locations are you looking for?
+          </InputLabel>
 
-            <div className="checkbox">
-            <input type="checkbox" name="bars"></input>
-            <label htmlFor="Bar">Bar</label><br/>
-            </div>
+          <Grid className="checkboxes">
+            <FormLabel className="checkbox" sx={{display: 'flex', alignItems: 'center'}}>
+              <Checkbox type="checkbox" name="galleries" />
+              <InputLabel htmlFor="Galleries">Art Galleries</InputLabel>
+              {/* <br/> */}
+            </FormLabel>
+
+            <FormLabel className="checkbox" sx={{display: 'flex', alignItems: 'center'}}>
+              <Checkbox type="checkbox" name="bars" />
+              <InputLabel htmlFor="Bar">Bar</InputLabel>
+              {/* <br/> */}
+            </FormLabel>
 
-            <div className="checkbox">
-            <input type="checkbox" name="coffee"></input>
-            <label htmlFor="Coffee &amp; Tea">Coffee &amp; Tea</label><br/>
-            </div>
+            <FormLabel className="checkbox" sx={{display: 'flex', alignItems: 'center'}}>
+              <Checkbox type="checkbox" name="coffee" />
+              <InputLabel htmlFor="Coffee &amp; Tea">Coffee &amp; Tea</InputLabel>
+              {/* <br/> */}
+            </FormLabel>
 
-            <div className="checkbox">
-            <input type="checkbox" name="desserts"></input>
-            <label htmlFor="Desserts">Desserts</label><br/>
-            </div>
+            <FormLabel className="checkbox" sx={{display: 'flex', alignItems: 'center'}}>
+              <Checkbox type="checkbox" name="desserts" />
+              <InputLabel htmlFor="Desserts">Desserts</InputLabel>
+              {/* <br/> */}
+            </FormLabel>
 
-            <div className="checkbox">
-            <input type="checkbox" name="restaurants"></input>
-            <label htmlFor="Restaurants">Restaurants</label><br/>
-            </div>
-
-            <div className="checkbox">
-            <input type="checkbox" name="movietheaters"></input>
-            <label htmlFor="Cinema">Cinema</label><br/>
-            </div>
+            <FormLabel className="checkbox" sx={{display: 'flex', alignItems: 'center'}}>
+              <Checkbox type="checkbox" name="restaurants" />
+              <InputLabel htmlFor="Restaurants">Restaurants</InputLabel>
+              {/* <br/> */}
+            </FormLabel>
 
-            <div className="checkbox">
-            <input type="checkbox" name="musicvenues"></input>
-            <label htmlFor="Music Venues">Music Venues</label><br/>
-            </div>
+            <FormLabel className="checkbox" sx={{display: 'flex', alignItems: 'center'}}>
+              <Checkbox type="checkbox" name="movietheaters" />
+              <InputLabel htmlFor="Cinema">Cinema</InputLabel>
+              {/* <br/> */}
+            </FormLabel>
 
-            <div className="checkbox">
-            <input type="checkbox" name="shopping"></input>
-            <label htmlFor="Shopping">Shopping</label><br/>
-            </div>
+            <FormLabel className="checkbox" sx={{display: 'flex', alignItems: 'center'}}>
+              <Checkbox type="checkbox" name="musicvenues" />
+              <InputLabel htmlFor="Music Venues">Music Venues</InputLabel>
+              {/* <br/> */}
+            </FormLabel>
 
-          </div>
-        </div>
-        <button id="search" onClick={handleClick}>Search</button>
+            <FormLabel className="checkbox" sx={{display: 'flex', alignItems: 'center'}}>
+              <Checkbox type="checkbox" name="shopping" />
+              <InputLabel htmlFor="Shopping">Shopping</InputLabel>
+              {/* <br/> */}
+            </FormLabel>
+          </Grid>
+        </FormGroup>
+        <Button id="search" onClick={handleClick}>Search</Button>
 
-      </form>
-    </aside>
+      </FormGroup>
+    </Paper>
   )
 };
 

client/reducers/mainReducer.js

@@ -13,12 +13,11 @@ const mainReducer = (state = initialState, action) => {
 
   switch (action.type) {
     case types.GET_RESULTS:
-
-    return {
-        ...state,
-        firstRender: false,
-        searchResults: action.payload,
-      }
+      return {
+          ...state,
+          firstRender: false,
+          searchResults: action.payload,
+        }
     case types.ADD_FAV:
       const newFavs = state.favorites.slice();