Merge pull request #65 from Lambda-School-Labs/searchtest

fixes some styling in the user dashboard

src/App.js

@@ -1,10 +1,11 @@
 import React, { useEffect } from 'react';
 import './App.css';
 // import ReactGa from 'react-ga';
-import Navbar from './components/Navbar.js';
-import Footer from './components/Footer.js';
-import Routes from './components/Routes.js';
+import Navbar from './components/Nav/Navbar.js';
+import Footer from './components/Landing/Footer.js';
+import Routes from './components/Routes/Routes.js';
 import MockEvents from './components/MockEvents';
+import Panel from './components/Landing/Carosel/Panels'
 
 function App() {
   // useEffect(() => {

src/components/Login.js → src/components/Authorized/Login.js

@@ -1,10 +1,10 @@
 import React, { useState } from 'react';
-import { ModalStyle, getModalStyle } from '../styles/ModalFormStyles.js';
+import { ModalStyle, getModalStyle } from '../../styles/ModalFormStyles.js';
 import { withRouter } from 'react-router-dom';
 import Modal from '@material-ui/core/Modal';
 import TextField from '@material-ui/core/TextField';
 import Button from '@material-ui/core/Button';
-import { axiosWithAuth } from '../utils/axiosWithAuth.js';
+import { axiosWithAuth } from '../../utils/axiosWithAuth.js';
 
 const useStyles = ModalStyle;
 

src/components/Registration.js → src/components/Authorized/Registration.js

@@ -3,8 +3,8 @@ import { withRouter } from 'react-router-dom';
 import Modal from '@material-ui/core/Modal';
 import TextField from '@material-ui/core/TextField';
 import Button from '@material-ui/core/Button';
-import { axiosWithAuth } from '../utils/axiosWithAuth.js';
-import { ModalStyle, getModalStyle } from '../styles/ModalFormStyles.js';
+import { axiosWithAuth } from '../../utils/axiosWithAuth.js';
+import { ModalStyle, getModalStyle } from '../../styles/ModalFormStyles.js';
 
 const useStyles = ModalStyle;
 

src/components/Calendar/CalComponents/Event.js

@@ -21,7 +21,7 @@ const Event = (props) => {
   const classes = useStyles();
 
   return (
-    <Grid item xs={12} sm={6} md={4} className={classes.grid}>
+    <Grid item xs={props.xs} sm={props.sm} md={props.md} className={classes.grid}>
       <Card className={classes.root}>
         <CardHeader
           avatar={

src/components/CTApage.js → src/components/Landing/CTApage.js

@@ -8,8 +8,8 @@ import CssBaseline from '@material-ui/core/CssBaseline';
 import Grid from '@material-ui/core/Grid';
 import Typography from '@material-ui/core/Typography';
 import Container from '@material-ui/core/Container';
-import CTAStyles from '../styles/CTAStyles';
-import Registration from './Registration.js';
+import CTAStyles from '../../styles/CTAStyles';
+import Registration from '../Authorized/Registration.js';
 
 
 const tiers = [

src/components/Landing/Carosel/Panels.js

@@ -0,0 +1,67 @@
+import React from "react";
+import MockEventStyles from '../../../styles/MockEventsStyles';
+import ExpansionPanel from '@material-ui/core/ExpansionPanel';
+import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
+import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
+import Typography from '@material-ui/core/Typography';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import Button from '@material-ui/core/Button';
+import CardMedia from '@material-ui/core/CardMedia';
+import CardActionArea from '@material-ui/core/CardActionArea';
+
+import Wine from '../../../images/carousel1blurrparty.jpg'
+import Marathn from '../../../images/carousel2marathon.jpg'
+import Museum from '../../../images/carousel3couplepark.jpg'
+
+
+export default function MockEvents(){ 
+  const useStyles = MockEventStyles;
+  const classes = useStyles();
+  const data = [
+        {img: `${Wine}`,
+        title: "Wine And Beer Aficionados", 
+        content: "Whether you are new to wine tasting or beer sampling or a long time connoisseur, please join us for a fun filled night of connecting with new friends or reuniting with past friends sampling local varieties and enjoying a live local band."},
+        {img: `${Marathn}`,
+        title: "Marathon And New Runner Enthusiasts", 
+        content: "Whether you are new to marathons or running as a sport or a long time member, please join us for a fun filled night of connecting with new friends or reuniting with past friends sampling nutrition supplements, trying out new training equipment."},
+        {img: `${Museum}`,
+        title: "Movies, Parks, Museums, OH MY!", 
+        content: "Whether you are new to attending Movie Premiers, Specialty Parks or Museums  or you are a long time fan, please join us for a fun filled night. Connect with new friends or reunite with past friends by watching new movie trailers, video tours of the best parks and museums while enjoying light snacks and beverages."}
+    ]  
+    return(
+       <div className={classes.root}>
+           {data.map(i => (
+        <ExpansionPanel>
+            <ExpansionPanelSummary
+            expandIcon={<ExpandMoreIcon />}
+            aria-controls="panel1a-content"
+            id="panel1a-header">
+                 <Typography className={classes.heading}>{i.title}</Typography>
+            </ExpansionPanelSummary>
+                 <ExpansionPanelDetails>
+
+                    <Typography>{i.content}
+                    <div>
+                    <Button  variant="outlined" href="/events" >
+                        More about the event here</Button>
+                    </div>
+                    </Typography>
+                    <CardActionArea>
+
+                    <CardMedia
+                        className={classes.media}
+                        image={i.img}
+                        title={i.title}
+                    />
+
+                    </CardActionArea>
+
+        </ExpansionPanelDetails>
+      </ExpansionPanel>
+           ))}
+
+
+
+       </div> 
+    )
+};

src/components/Landing/Carosel/Sel.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import Panel from './Panels'
+
+const Sel = () => {
+    // need to bring in the card domponent as an array not sure how yet
+    let part = 0
+    //the count of component index
+    const handle = () => {
+        if (direction == 'forward')
+         part = (part + 1) % comp.length
+        else 
+        part = (part -1 + comp.length) % comp.length
+    }
+    return (
+        <div>
+
+        </div>
+    )
+}
+
+export default Sel

src/components/Footer.js → src/components/Landing/Footer.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import Terms from './Terms.js';
-import '../styles/Footer.css';
-import Facebook from '../images/facebook.png';
-import Twitter from '../images/twitter.png';
-import YouTube from '../images/youtube.png';
-import Instagram from '../images/instagram.png';
+import '../../styles/Footer.css';
+import Facebook from '../../images/facebook.png';
+import Twitter from '../../images/twitter.png';
+import YouTube from '../../images/youtube.png';
+import Instagram from '../../images/instagram.png';
 
 const Footer = () => {
 

src/components/LandingPage.js → src/components/Landing/LandingPage.js

@@ -1,12 +1,13 @@
 import React from "react";
 import { makeStyles } from "@material-ui/core/styles";
-import HowToBar from "../images/howtobarphoenixlanding.png";
-import LandingPagePeople from "../images/LandingPagePeople.jpg";
-import Calendar from "../images/Calendar.png";
+import HowToBar from "../../images/howtobarphoenixlanding.png";
+import LandingPagePeople from "../../images/LandingPagePeople.jpg";
+import Calendar from "../../images/calTrans.png";
 import CTAbutton from "./CTAbutton";
-import LandPageCarousel from "../components/LandPageCarousel";
-import MockEvents from "../components/MockEvents";
-import LandingPageTestimony from "../components/LandingPageTestimony";
+import LandPageCarousel from "../LandPageCarousel";
+import MockEvents from "../MockEvents";
+import LandingPageTestimony from "./LandingPageTestimony";
+import Panels from '../Landing/Carosel/Panels'
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -19,11 +20,14 @@ const useStyles = makeStyles((theme) => ({
   cta: {
     display: "flex",
     flexDirection: "row",
-    margin: "0 0 0 13.5rem",
+    justifyContent: "center",
+    margin: "50px 0 0 13.5rem",
     [theme.breakpoints.up('md')]: {},
   },
   firstthird: {
+    maxWidth: "80%",
     display: "flex",
+    justifyContent: "center",
     flexDirection: "row",
     [theme.breakpoints.up('md')]: {},
   },
@@ -57,38 +61,56 @@ const useStyles = makeStyles((theme) => ({
     },
   },
 
-  bannerDivRight: {},
+  bannerDivRight: {
+    margin: "100px 0",
+    alignItems: "center",
+  },
   svg: {
-    width: "45%",
+    width: "20%",
+    height: "150px",
+    maxWidth: "25%",
+    maxHeight: "10%",
     paddingTop: "3rem",
+    // opacity: "0.5",
     [theme.breakpoints.down("sm")]: {},
   },
+  caltrans: {
+    maxWidth: "80%",
+  }
+
 }));
 
 export default function PrimarySearchAppBar() {
   const classes = useStyles();
 
   return (
     <main className={classes.root}>
+      <img src={HowToBar} alt="how to bar" className={classes.howtobar} />
       <div className={classes.firstthird}>
-        <LandPageCarousel />
-        <MockEvents />
+        <Panels/>
       </div>
       <div className={classes.cta}>
         <CTAbutton />
       </div>
-      <img src={HowToBar} alt="how to bar" className={classes.howtobar} />
-
+      <div>
+      </div>
       <div className={classes.banner}>
         <div style={{ display: "flex", justifyContent: "flex-center" }}>
           <LandingPageTestimony />
-        </div>
-        <div className={classes.bannerDivRight}>
+          <div>
           <img
             src={LandingPagePeople}
             alt="inclusive svg people"
             className={classes.svg}
           />
+          {/* <img
+                src={Calendar}
+                alt="inclusive svg people"
+                className={classes.caltrans}
+              /> */}
+          </div>
+        </div>
+        <div className={classes.bannerDivRight}>
         </div>
       </div>
     </main>

src/components/LandingPageTestimony.js → src/components/Landing/LandingPageTestimony.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { makeStyles } from "@material-ui/core/styles";
 import { Typography } from "@material-ui/core";
-import LandingPageTestimonyStyles from "../styles/LandingPageTestimonyStyles";
+import LandingPageTestimonyStyles from "../../styles/LandingPageTestimonyStyles";
 
 
 export default function LandingPageTestimony() {

src/components/Terms.js → src/components/Landing/Terms.js

@@ -4,14 +4,14 @@ import Button from "@material-ui/core/Button";
 import Modal from "@material-ui/core/Modal";
 import Checkbox from "@material-ui/core/Checkbox";
 import { useForm, Controller } from "react-hook-form";
-import Section1 from './Terms/Section1.js';
-import Section2 from './Terms/Section2.js';
-import Section3 from './Terms/Section3.js';
-import Section4 from './Terms/Section4.js';
-import Section5 from './Terms/Section5.js';
-import Section6 from './Terms/Section6.js';
-import Section7 from './Terms/Section7.js';
-import Section8 from './Terms/Section8.js';
+import Section1 from '../Terms/Section1.js';
+import Section2 from '../Terms/Section2.js';
+import Section3 from '../Terms/Section3.js';
+import Section4 from '../Terms/Section4.js';
+import Section5 from '../Terms/Section5.js';
+import Section6 from '../Terms/Section6.js';
+import Section7 from '../Terms/Section7.js';
+import Section8 from '../Terms/Section8.js';
 
 function rand() {
   return Math.round(Math.random() * 10);