Migrated all inline styles to App.css

eloisebarrow · Aug 27, 2019 · 73bdc6a · 73bdc6a
1 parent 7b28de8
commit 73bdc6a
Show file tree

Hide file tree

Showing 10 changed files with 139 additions and 136 deletions.
diff --git a/src/App.css b/src/App.css
@@ -23,11 +23,116 @@
   color: #61dafb;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+html, body, #root {
+  height: 100%;
+}
+
+.App {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.main-div-styles {
+  flex: 1 0 auto;
+}
+
+.header-styles {
+  background-color: rgb(0,219,0);
+  color: #FFFFFF;
+  padding: 1% 0;
+}
+
+.ul-styles{
+  display: flex;
+  list-style: none;
+  justify-content: space-between;
+  margin: 3% 10%;
+}
+
+.link-styles {
+  color: #FFFFFF;
+  text-decoration: none;
+  font-size: 1.4rem;
+}
+
+.h3-styles {
+  font-style: italic;
+}
+
+.about {
+  display: flex;
+  justify-content: center;
+}
+
+.about-content {
+  width: 50%;
+  align-self: center;
+  line-height: 1.9rem;
+  font-size: 1.3rem;
+}
+
+.borough-dropdown {
+  margin: 1% 0;
+  font-size: 0.9rem;
+}
+
+.boroughs-main {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+}
+
+.borough-data-styles {
+  margin: 2%;
+  width: 20%;
+  border: 1px solid black;
+  border-radius: 2%;
+}
+
+.borough-content {
+  padding: 0 6%;
+}
+
+.borough-category {
+  font-weight: bold;
+}
+
+.mapboxgl-marker {
+  width: 15px;
+  height: 15px;
+  border-radius: 50%;
+  border: 1px solid gray;
+  background-color: lightblue;
+}
+
+.map {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.geolocator {
+  position: absolute;
+  margin: 5px;
+}
+
+.footer-styles {
+  background-color: rgb(0,219,0);
+  height: 60px;
+  display: flex;
+  justify-content: center;
+  margin-top: 3%;
+  flex-shrink: 0;
+}
+
+#p-footer {
+  align-self: center;
+  color: #FFFFFF;
+  text-decoration: none;
+  font-size: 1.4rem;
+}
+
+#p-footer:hover {
+  cursor: pointer;
 }
diff --git a/src/App.js b/src/App.js
@@ -7,14 +7,8 @@ import { Route } from 'react-router-dom'
 
 class App extends React.Component {
   render() {
-    const bodyStyles = {
-      display: 'flex',
-      flexDirection: 'column',
-      minHeight: '100vh',
-    }
-
     return (
-      <div style={bodyStyles} className="App">
+      <div className="App">
         <Header />
         <Main />
         <Route path="/" render={() => <Footer />}></Route>

diff --git a/src/components/About.js b/src/components/About.js
@@ -1,21 +1,10 @@
 import React from 'react'
+import '../App.css'
 
 const About = () => {
-  const divStyles = {
-    display: 'flex',
-    justifyContent: 'center',
-  }
-
-  const pStyles = {
-    width: '50%',
-    alignSelf: 'center',
-    lineHeight: '1.9rem',
-    fontSize: '1.3rem',
-  }
-
   return (
-    <div style={divStyles}>
-      <p style={pStyles}>Click the links above to find public recycling bins near you. You can also filter listings by borough and find additional resources above.</p>
+    <div className="about">
+      <p className="about-content">Click the links above to find public recycling bins near you. You can also filter listings by borough and find additional resources above.</p>
     </div>
   )
 }

diff --git a/src/components/ByBorough.js b/src/components/ByBorough.js
@@ -1,49 +1,24 @@
 import React from 'react'
+import '../App.css'
 
 const ByBorough = (props) => {
   const [borough, setBorough] = React.useState(null);
 
-  const dropdownStyles = {
-    margin: '1% 0',
-    fontSize: '0.9rem',
-  }
-
-  const divStyles = {
-    display: 'flex',
-    flexWrap: 'wrap',
-    justifyContent: 'space-around',
-  }
-
-  const boroughDataStyles = {
-    margin: '2%',
-    width: '20%',
-    border: '1px solid black',
-  }
-
-  const pStyles = {
-    padding: '0 6%',
-  }
-
-  const categoryStyles = {
-    fontWeight: 'bold',
-  }
-
   const boroughData = props.apiData
     .filter((d) => d.borough === borough)
     .map((d, i) => {
       return (
         <div
         key={i}
-        style={boroughDataStyles}
-        className="borough-boxes" >
-          <p style={pStyles}>{d.borough} <br/><span style={categoryStyles}>Location:</span> {d.park_site_name} <br/><span style={categoryStyles}>Address:</span> {d.address}</p>
+        className="borough-data-styles" >
+          <p className="borough-content">{d.borough} <br/><span className="borough-category">Location:</span> {d.park_site_name} <br/><span className="borough-category">Address:</span> {d.address}</p>
         </div>
       )
   })
   return (
     <div>
       <h2>View recycling bins by borough</h2>
-      <select style={dropdownStyles} onChange={(e) => setBorough(e.target.value)} name="boroughs" id="boroughs">
+      <select className="borough-dropdown" onChange={(e) => setBorough(e.target.value)} name="boroughs" id="boroughs">
         <option value="null">Choose Your Borough</option>
         <option value="Bronx">Bronx</option>
         <option value="Brooklyn">Brooklyn</option>
@@ -52,7 +27,7 @@ const ByBorough = (props) => {
         <option value="Staten Island">Staten Island</option>
       </select>
 
-      <div style={divStyles}>
+      <div className="boroughs-main">
         {boroughData}
       </div>
     </div>

diff --git a/src/components/Footer.js b/src/components/Footer.js
@@ -1,28 +1,14 @@
 import React from 'react'
+import '../App.css';
 
 const Footer = () => {
-  const footerStyles = {
-    backgroundColor: 'rgb(0,219,0)',
-    height: '60px',
-    display: 'flex',
-    justifyContent: 'center',
-    marginTop: '3%',
-  }
-
-  const linkStyles = {
-    alignSelf: 'center',
-    color: '#FFFFFF',
-    textDecoration: 'none',
-    fontSize: '1.4rem',
-  }
-
   const handleClick = () => {
     window.scrollTo(0,0);
   }
 
   return (
-    <footer style={footerStyles}>
-      <p id="p-footer" style={linkStyles} onClick={handleClick} >to top</p>
+    <footer className="footer-styles">
+      <p id="p-footer" onClick={handleClick}>to top</p>
     </footer>
   )
 }

diff --git a/src/components/Header.js b/src/components/Header.js
@@ -1,41 +1,19 @@
 import React from 'react'
+import '../App.css'
 import { Link } from 'react-router-dom'
 
 const Header = () => {
-  const headerStyles = {
-    backgroundColor: 'rgb(0,219,0)',
-    color: '#FFFFFF',
-    padding: '1% 0',
-  }
-
-  const ulStyles = {
-    display: 'flex',
-    listStyle: 'none',
-    justifyContent: 'space-between',
-    margin: '3% 10%',
-  }
-
-  const linkStyles = {
-    color: '#FFFFFF',
-    textDecoration: 'none',
-    fontSize: '1.4rem',
-  }
-
-  const h3Styles = {
-    fontStyle: 'italic',
-  }
-
   return (
-    <header style={headerStyles}>
+    <header className='header-styles'>
       <h1>Recycle NYC</h1>
-      <ul style={ulStyles}>
-        <li><Link style={linkStyles} to="/">home</Link></li>
-        <li><Link style={linkStyles} to="/about">about</Link></li>
-        <li><Link style={linkStyles} to="/resources">resources</Link></li>
-        <li><Link style={linkStyles} to="/by-borough">by borough</Link></li>
-        <li><Link style={linkStyles} to="/near-you">near you</Link></li>
+      <ul className='ul-styles'>
+        <li><Link className='link-styles' to="/">home</Link></li>
+        <li><Link className='link-styles' to="/about">about</Link></li>
+        <li><Link className='link-styles' to="/resources">resources</Link></li>
+        <li><Link className='link-styles' to="/by-borough">by borough</Link></li>
+        <li><Link className='link-styles' to="/near-you">near you</Link></li>
       </ul>
-      <h3 style={h3Styles}>Waste not, want not: find a public recycling bin near you!</h3>
+      <h3 className='h3-styles'>Waste not, want not: find a public recycling bin near you!</h3>
     </header>
   )
 }

diff --git a/src/components/Main.js b/src/components/Main.js
@@ -1,4 +1,5 @@
 import React from 'react'
+import '../App.css';
 import { Route, Switch } from 'react-router-dom'
 import axios from 'axios'
 import About from './About'
@@ -24,11 +25,8 @@ class Main extends React.Component {
   }
 
   render() {
-    const mainStyles = {
-      flex: '1',
-    }
     return (
-      <div style={mainStyles}>
+      <div className="main-div-styles">
         <Switch>
           <Route path="/about" render={() => <About />}></Route>
           <Route path="/resources" render={() => <Resources />}></Route>

diff --git a/src/components/NearYou.js b/src/components/NearYou.js
@@ -1,4 +1,5 @@
 import React from 'react'
+import '../App.css'
 import ReactMapGL, { Marker, GeolocateControl } from 'react-map-gl'
 require('dotenv').config()
 
@@ -30,21 +31,10 @@ class NearYou extends React.Component {
   }
 
   render() {
-    const mapStyles = {
-      'display': 'flex',
-      'flexDirection': 'column',
-      'alignItems': 'center',
-    }
-
-    const geoStyles = {
-      position: 'absolute',
-      margin: '5px',
-    }
-
     const filteredCoords = this.props.apiData.filter( bin => (Math.pow(bin.latitude, 2) * Math.pow(bin.longitude, 2)) > 1);
 
     return (
-      <div style={mapStyles}>
+      <div className="map">
         <h2>Public recycling bins near you:</h2>
         {this.state.located && <ReactMapGL
           mapStyle="mapbox://styles/eloisebarrow/cjzu271jb11xx1ck0q3wwz1je"
@@ -53,7 +43,6 @@ class NearYou extends React.Component {
           onViewportChange={this.setViewport}
            >
            {filteredCoords.map((d,i) => {
-             console.log('lat/long from Marker map', typeof d.latitude, typeof d.longitude)
              let lat = parseFloat(d.latitude);
              let lon = parseFloat(d.longitude);
              return (
@@ -65,7 +54,7 @@ class NearYou extends React.Component {
              )
            }) }
            <GeolocateControl
-           style={geoStyles}
+           className="geolocator"
            positionOptions={{enableHighAccuracy: true}}
            trackUserLocation={true} />
         </ReactMapGL> }

diff --git a/src/components/Resources.js b/src/components/Resources.js
@@ -1,4 +1,5 @@
 import React from 'react'
+import '../App.css'
 
 const Resources = () => {
   return (

diff --git a/src/index.css b/src/index.css
@@ -11,15 +11,3 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
-
-.mapboxgl-marker {
-    width: 15px;
-    height: 15px;
-    border-radius: 50%;
-    border: 1px solid gray;
-    background-color: lightblue;
-}
-
-#p-footer:hover {
-  cursor: pointer;
-}