styling 99% done

mollycarroll · Mar 19, 2021 · d8eaa0a · d8eaa0a
1 parent be34a3a
commit d8eaa0a
Show file tree

Hide file tree

Showing 10 changed files with 220 additions and 92 deletions.
diff --git a/src/App.js b/src/App.js
@@ -84,8 +84,10 @@ class App extends Component {
 
 						<Route exact path='/:id' render={(props) => <Event cities ={this.state.cities}/>} />
 					</Switch>
-      			</div>
-	  		</Router>
+				</div>
+				<Footer />
+			</Router>
+
 		)
 	}
 }

diff --git a/src/assets/calendar.ics b/src/assets/calendar.ics
@@ -0,0 +1,8 @@
+BEGIN:VCALENDAR
+VERSION:2.0
+BEGIN:VEVENT
+DTSTART:20300319
+DTEND:20300320
+SUMMARY:Let's Gather!
+END:VEVENT
+END:VCALENDAR
diff --git a/src/components/Confirm.jsx b/src/components/Confirm.jsx
@@ -1,8 +1,12 @@
+// eslint-disable-next-line
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Modal from 'react-bootstrap/Modal';
+// eslint-disable-next-line
 import ModalHeader from 'react-bootstrap/ModalHeader';
+// eslint-disable-next-line
 import ModalBody from 'react-bootstrap/ModalBody';
+// eslint-disable-next-line
 import ModalFooter from 'react-bootstrap/ModalFooter';
 import Button from 'react-bootstrap/Button';
 

diff --git a/src/components/EditForm.jsx b/src/components/EditForm.jsx
@@ -1,18 +1,23 @@
+// eslint-disable-next-line
 import axios from 'axios'
+// eslint-disable-next-line
 import React, { Component } from 'react'
 import { Redirect } from 'react-router-dom'
 import Form from 'react-bootstrap/Form';
+// eslint-disable-next-line
 import FormControl from 'react-bootstrap/FormControl';
-import Button from 'react-bootstrap/Button';
 import Col from 'react-bootstrap/Col'
+// eslint-disable-next-line
 import Select from 'react-select';
+// eslint-disable-next-line
 import Moment from 'moment';
 
 let baseURL = ''
 
 if(process.env.NODE_ENV === 'development') {
 	baseURL = 'http://localhost:3003'
 } else {
+	// eslint-disable-next-line
 	baseURL = 'https://pure-waters-81977.herokuapp.com'
 }
 
@@ -27,35 +32,35 @@ export default class EditForm extends Component {
 
 		return (
 
-			<Form onSubmit={ (e) => this.props.handleSubmit(e) }>
-        <Form.Group>
+			<Form className="edit-form" onSubmit={ (e) => this.props.handleSubmit(e) }>
+        <Form.Group className="pt-4 ml-4">
           <Form.Row>
-            <Form.Label column lg={1} htmlFor='creator'>Name:</Form.Label>
-            <Col className="col-sm-2">
+            <Form.Label column lg={3} htmlFor='creator'>Name:</Form.Label>
+            <Col lg={8}>
               <Form.Control type='text' name='creator' id='Creator' value={ this.props.event.Creator } onChange={ (event) => this.props.handleChange(event) } />
             </Col>
           </Form.Row>
         </Form.Group>
-        <Form.Group>
+        <Form.Group className="ml-4">
           <Form.Row>
-            <Form.Label column lg={1} htmlFor='title'>Event Title:</Form.Label>
-            <Col className="col-sm-2">
+            <Form.Label column lg={3} htmlFor='title'>Event Title:</Form.Label>
+            <Col lg={8}>
               <Form.Control type='text' name='title' id='Title' value={ this.props.event.Title } onChange={ (event) => this.props.handleChange(event) } />
             </Col>
           </Form.Row>
         </Form.Group>
-        <Form.Group>
+        <Form.Group className="ml-4">
           <Form.Row>
-            <Form.Label column lg={1} htmlFor='date'>Date:</Form.Label>
-            <Col className="col-sm-2">
+            <Form.Label column lg={3} htmlFor='date'>Date:</Form.Label>
+            <Col lg={8}>
               <Form.Control type='date' name='date' id='Date' value={ this.props.event.Date } onChange={ (event) => this.props.handleChange(event) } />
             </Col>
           </Form.Row>
         </Form.Group>
-        <Form.Group>
+        <Form.Group className="ml-4">
           <Form.Row>
-            <Form.Label column lg={1} htmlFor='category'>Category:</Form.Label>
-            <Col className="col-sm-2">
+            <Form.Label column lg={3} htmlFor='category'>Category:</Form.Label>
+            <Col lg={8}>
               <Form.Control as="select" name='category' id='Category' value={ this.props.event.Category } onChange={ (event) => this.props.handleChange(event) }>
                 <option>Night-out</option>
                 <option>Nature</option>
@@ -67,15 +72,15 @@ export default class EditForm extends Component {
 						</Col>
 					</Form.Row>
 				</Form.Group>
-				<Form.Group>
+				<Form.Group className="ml-4 pb-3 mb-2">
 					<Form.Row>
-						<Form.Label column lg={1} htmlFor='description'>Description:</Form.Label>
-						<Col className="col-sm-2">
+						<Form.Label column lg={3} htmlFor='description'>Description:</Form.Label>
+						<Col lg={8}>
 							<Form.Control as='textarea' rows={6} name='description' id='Description' value={ this.props.event.Description } onChange={ (event) => this.props.handleChange(event) } />
 						</Col>
 					</Form.Row>
 				</Form.Group>
-				<Button type = "submit">Edit Event</Button>
+				<button className="edit-button" type = "submit">Edit Event</button>
 								</Form>
 
 		)

diff --git a/src/components/Event.jsx b/src/components/Event.jsx
@@ -80,44 +80,50 @@ class Event extends Component {
 	}
 
 	render() {
-		const editForm = this.state.editForm
-		return (
-			<div className="for-backgrounds">
-        <h1 className="text-center">Get the Deets</h1>
-        <hr className="my-5 large"></hr>
-        <div className="page-wrapper d-flex">
-          <section className="page-content d-flex flex-wrap justify-content-center">
-            <div className="each-item d-flex flex-column rounded position-relative">
-              <h5 className="each-title text-start">{ this.state.Title }</h5>
-              <p className="each-name text-start"><strong>Added By:</strong> { this.state.Creator }</p>
-              <p className="each-name text-start"><strong>Date(s):</strong> { this.state.Date }</p>
-              <p className="badge rounded-pill text-center position-absolute">{ this.state.Category }<i className="fas fa-glass-cheers ml-1"></i></p>
-              <p className="each-name text-start"><strong>Description:</strong> { this.state.Description }</p>
-							<Confirm onConfirm={() => {
-								this.deleteEvent();
-							}}
-								body="Are you sure you want to delete this?"
-							title="⚠️ Heads Up!">
-								<i className="far fa-trash-alt position-absolute"></i>
-							</Confirm>
-            </div>
-          </section>
-        </div>
-
-				<button onClick={ () => this.toggleEditForm() }>Edit Event</button>
-
-				<div className={editForm ? 'edit-form' : null}>
-					<EditForm
+			const editForm = this.state.editForm
+			return (
+					<div className="container-fluid for-backgrounds full-screen">
+						<Explore className="push"/>
+
+						{/* <Explore cities = {this.props.cities}/> */}
+						<h1 className="slight-push text-center my-4">Get the Deets</h1>
+						<hr className="large push"></hr>
+
+						<div className="container-fluid for-backgrounds">
+							<section className="page-content-show d-flex flex-wrap justify-content-center slight-push">
+								<div className="each-item-show d-flex flex-column rounded position-relative">
+									<h5 className="each-title text-start">{ this.state.Title }</h5>
+									<p className="each-name text-start"><strong>Added By:</strong> { this.state.Creator }</p>
+									<p className="each-name text-start"><strong>Date(s):</strong> { this.state.Date }</p>
+									<p className="rounded-pill position-absolute text-center pt-1">{ this.state.Category }<i className="fas fa-icons ml-2"></i></p>
+									<i class="fas fa-pencil-alt position-absolute" onClick={ () => this.toggleEditForm() }></i>
+									<p className="each-name text-start"><strong>Description:</strong> { this.state.Description }</p>
+									<a href="https://calendar.google.com/calendar/render?action=TEMPLATE&dates=20300319%2F20300320&text=Let%27s%20Gather%21" target="_blank" rel="noreferrer" title="Save Event in my Calendar" ><i class="far fa-calendar-alt position-absolute pt-1"></i></a>
+									<a href="https://www.facebook.com/sharer/sharer.php?u=https://mighty-savannah-40031.herokuapp.com/#/" target="_blank" rel="noreferrer">
+										<i class="fab fa-facebook-f position-absolute pt-1"></i></a>
+									<a href="https://twitter.com/intent/tweet?url=https://mighty-savannah-40031.herokuapp.com/#/&text=" target="-blank" rel="noreferrer"><i class="fab fa-twitter position-absolute pt-1"></i></a>
+									<a href="mailto:[email protected]?&subject=&cc=&bcc=&body=https://mighty-savannah-40031.herokuapp.com/#/%0A" target="_blank" rel="noreferrer"><i class="far fa-envelope position-absolute pt-1"></i></a>
+
+									<Confirm className="container-fluid" onConfirm={() => {
+										this.deleteEvent();
+									}}
+										body="Are you sure you want to delete this?"
+									title="⚠️ Heads Up!">
+										<i className="far fa-trash-alt position-absolute"></i>
+									</Confirm>
+								</div>
+							</section>
+						</div>
+						<div className={editForm ? 'edit-form' : null} className="for-backgrounds container-fluid full-screen">
+							<EditForm className="for-backgrounds container-fluid"
 						event={ this.state }
 						handleChange={ (e) => this.handleChange(e) }
 						handleSubmit={ (e) => this.handleSubmit(e) }
-        	/>
+					/>
 				</div>
 
-				<Explore />
-
-				{/* <Explore cities = {this.props.cities}/> */}
-      </div>
+			<
+			/div>
 		)
 	}
 }

diff --git a/src/components/Explore.jsx b/src/components/Explore.jsx
@@ -1,5 +1,6 @@
 import axios from 'axios'
 import React, { Component } from 'react'
+// eslint-disable-next-line
 import { Redirect } from 'react-router-dom'
 
 let baseURL = ''
@@ -54,12 +55,23 @@ export default class Explore extends Component {
 
 	render() {
 		return (
-			<div>
-				<h3>Gather Here: </h3>
-				<p>City: </p>
 
-				<p>State: </p>
-				<p>Activity: </p>
+
+			<div className="push">
+				<h2 className="text-center">G a t h e r <i class="far fa-map"></i> H e r e</h2>
+
+				<div className="gather-here">
+					{/* after the icon, have it render city, state */}
+					<i class="fas fa-globe-americas mt-4"></i><span>City, State</span>
+					<br></br><br></br>
+					{/* after the icon, have it render activity */}
+					<i class="fas fa-info ml-1"></i><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
+				</div>
+
+
+
+
+
 				{/* <p>City: {this.state.someRandomCity.City} </p>
 
 					<p>State: {this.state.someRandomCity.State} </p>

diff --git a/src/components/Home.jsx b/src/components/Home.jsx
@@ -8,8 +8,8 @@ export default class Home extends Component {
 			<div className="for-backgrounds">
         <div className="container-fluid px-0 mb-5 for-backgrounds">
           <div className="hero">
-            <p className="text-center hero-text mb-0 d-flex justify-content-center real">Gather</p>
-            <p className="text-center hero-text reflection d-flex justify-content-center">Gather</p>
+            <p className="text-center hero-text mb-0 d-flex justify-content-center real">G a t h e r</p>
+            <p className="text-center hero-text reflection d-flex justify-content-center">G a t h e r</p>
           </div>
         </div>
         <EventCard events={ this.props.events }/>

diff --git a/src/components/NewForm.jsx b/src/components/NewForm.jsx
@@ -2,11 +2,13 @@ import axios from 'axios'
 import React, { Component } from 'react'
 import { Redirect } from 'react-router-dom'
 import Form from 'react-bootstrap/Form';
+// eslint-disable-next-line
 import FormControl from 'react-bootstrap/FormControl';
 import Col from 'react-bootstrap/Col'
+// eslint-disable-next-line
 import Select from 'react-select';
+// eslint-disable-next-line
 import Moment from 'moment';
-import Footer from './Footer.jsx'
 
 let baseURL = ''
 
@@ -81,7 +83,7 @@ export default class NewForm extends Component {
 		}
 
 		return (
-			<div className="container-fluid for-backgrounds full-screen">
+			<div className="container-fluid full-screen">
 				<h1 className="slight-push text-center my-4">What's Goin' On?</h1>
 				<hr className="large push"></hr>
 
@@ -135,7 +137,6 @@ export default class NewForm extends Component {
 					</Form.Group>
 					<button type = "submit" className="new-form-button">Create New Event <i class="far fa-hand-peace"></i></button>
 				</Form>
-				<Footer />
 			</div>
 		)
 	}

diff --git a/src/components/header.jsx b/src/components/header.jsx
@@ -7,12 +7,12 @@ class Header extends Component {
 			<div>
         <nav className="navbar navbar-expand-lg">
           <div className="container-fluid">
-            <Link to="/" className="navbar-brand"><i className="fab fa-cotton-bureau"></i><span className="navbar-text ml-2">
-              Gather
+            <Link to="/" className="navbar-brand"><i className="far fa-map in-header"></i><span className="navbar-text ml-2">
+              G a t h e r
             </span></Link>
             <ul className="navbar-nav me-auto mb-2 mb-lg-0">
               <li className="nav-item">
-                <Link to='/create' className='nav-link'>Create</Link>
+                <Link to='/create' className='nav-link'>C r e a t e</Link>
               </li>
             </ul>
           </div>