diff --git a/package.json b/package.json index c96d996f6..ff47112dd 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,8 @@ "react-leaflet-heatmap-layer": "^2.0.0", "react-leaflet-markercluster": "^2.0.0-rc3", "react-redux": "^7.1.3", + "react-router": "^5.1.2", + "react-router-dom": "^5.1.2", "react-test-renderer": "^16.12.0", "react-tooltip": "^4.0.3", "react-vis": "^1.11.7", diff --git a/src/App.jsx b/src/App.jsx index 17c2e1b38..902234278 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,8 +1,9 @@ import React, { useEffect } from 'react'; import { connect } from 'react-redux'; +import { BrowserRouter as Router } from 'react-router-dom'; +import Routes from './Routes'; import Header from './components/main/header/Header'; -import Body from './components/main/body/Body'; import Footer from './components/main/footer/Footer'; import Tooltip from './components/main/tooltip/Tooltip'; import SnapshotService, { SnapshotRenderer } from './components/export/SnapshotService'; @@ -16,13 +17,13 @@ const App = () => { }, []); return ( - <> +
- +
- + ); }; diff --git a/src/Routes.jsx b/src/Routes.jsx new file mode 100644 index 000000000..aec28ce97 --- /dev/null +++ b/src/Routes.jsx @@ -0,0 +1,20 @@ +import React from 'react'; +import { + Switch, + Route, +} from 'react-router-dom'; + +import Contact from './components/contact/Contact'; +import About from './components/about/About'; +import Body from './components/main/body/Body'; + +export default function Routes() { + return ( + + + + + + + ); +} diff --git a/src/assets/about311hero860-min.png b/src/assets/about311hero860-min.png new file mode 100644 index 000000000..9a12445f4 Binary files /dev/null and b/src/assets/about311hero860-min.png differ diff --git a/src/assets/dataserver.svg b/src/assets/dataserver.svg new file mode 100644 index 000000000..ab47bd90f --- /dev/null +++ b/src/assets/dataserver.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/datavisualization.svg b/src/assets/datavisualization.svg new file mode 100644 index 000000000..a58b5b50e --- /dev/null +++ b/src/assets/datavisualization.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/assets/growth.svg b/src/assets/growth.svg new file mode 100644 index 000000000..df77c9235 --- /dev/null +++ b/src/assets/growth.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/assets/mobile.svg b/src/assets/mobile.svg new file mode 100644 index 000000000..f81cf020d --- /dev/null +++ b/src/assets/mobile.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/src/components/PinMap/PinMap.jsx b/src/components/PinMap/PinMap.jsx index 52f66f8b7..db8296d9b 100644 --- a/src/components/PinMap/PinMap.jsx +++ b/src/components/PinMap/PinMap.jsx @@ -137,12 +137,11 @@ class PinMap extends Component { address, ncname, } = pinsInfo[srnumber] || {}; - const { color, abbrev } = REQUEST_TYPES.find(req => req.type === requesttype - || req.fullType === requesttype); + const { displayName, color, abbrev } = REQUEST_TYPES[requesttype]; const popup = (

- {requestType} + {displayName}   [ @@ -77,7 +77,7 @@ const PinPopup = ({ export default PinPopup; PinPopup.propTypes = { - requestType: PropTypes.string, + displayName: PropTypes.string, color: PropTypes.string, abbrev: PropTypes.string, address: PropTypes.string, @@ -89,7 +89,7 @@ PinPopup.propTypes = { }; PinPopup.defaultProps = { - requestType: undefined, + displayName: undefined, color: 'black', abbrev: undefined, address: undefined, diff --git a/src/components/Visualizations/Frequency.jsx b/src/components/Visualizations/Frequency.jsx index 104a8f4b9..8da2ac6e2 100644 --- a/src/components/Visualizations/Frequency.jsx +++ b/src/components/Visualizations/Frequency.jsx @@ -15,7 +15,7 @@ const Frequency = ({ const chartData = { labels: bins.slice(0, -1).map(bin => moment(bin).format('MMM D')), datasets: Object.keys(counts).map(key => { - const requestType = REQUEST_TYPES.find(t => t.type === key); + const requestType = REQUEST_TYPES[key]; return { data: counts[key], label: requestType?.abbrev, diff --git a/src/components/Visualizations/Legend.jsx b/src/components/Visualizations/Legend.jsx index befe715fc..8813f93a9 100644 --- a/src/components/Visualizations/Legend.jsx +++ b/src/components/Visualizations/Legend.jsx @@ -6,7 +6,11 @@ import { REQUEST_TYPES } from '@components/common/CONSTANTS'; const Legend = ({ requestTypes, }) => { - const selectedTypes = REQUEST_TYPES.filter(el => requestTypes[el.type]); + const selectedTypes = ( + Object.keys(requestTypes) + .filter(type => type !== 'All' && requestTypes[type]) + .map(type => REQUEST_TYPES[type]) + ); return (

@@ -14,13 +18,13 @@ const Legend = ({
{ selectedTypes.length > 0 - ? selectedTypes.map(({ type, color, abbrev }) => ( + ? selectedTypes.map(({ displayName, color, abbrev }) => (
- { type } + { displayName } {' '} [ {abbrev} diff --git a/src/components/Visualizations/TimeToClose.jsx b/src/components/Visualizations/TimeToClose.jsx index f149ce713..812bd72c1 100644 --- a/src/components/Visualizations/TimeToClose.jsx +++ b/src/components/Visualizations/TimeToClose.jsx @@ -10,7 +10,7 @@ const TimeToClose = ({ // // DATA //// const boxes = Object.keys(timeToClose).map(key => { - const requestType = REQUEST_TYPES.find(t => t.type === key); + const requestType = REQUEST_TYPES[key]; return { abbrev: requestType?.abbrev, color: requestType?.color, diff --git a/src/components/Visualizations/TotalRequests.jsx b/src/components/Visualizations/TotalRequests.jsx index e2966d2ea..cfc9271af 100644 --- a/src/components/Visualizations/TotalRequests.jsx +++ b/src/components/Visualizations/TotalRequests.jsx @@ -15,7 +15,7 @@ const TotalRequests = ({ const chartData = { labels: bins.slice(0, -1).map(bin => moment(bin).format('MMM D')), datasets: Object.keys(counts).map(key => { - const requestType = REQUEST_TYPES.find(t => t.type === key); + const requestType = REQUEST_TYPES[key]; return { data: counts[key], label: requestType?.abbrev, diff --git a/src/components/Visualizations/TypeOfRequest.jsx b/src/components/Visualizations/TypeOfRequest.jsx index 96240887c..bf1ecbf20 100644 --- a/src/components/Visualizations/TypeOfRequest.jsx +++ b/src/components/Visualizations/TypeOfRequest.jsx @@ -8,9 +8,9 @@ const TypeOfRequest = ({ typeCounts, }) => { const sectors = Object.keys(typeCounts).map(key => ({ - label: key, + label: REQUEST_TYPES[key]?.displayName, value: typeCounts[key], - color: REQUEST_TYPES.find(t => t.type === key)?.color, + color: REQUEST_TYPES[key]?.color, })); return ( diff --git a/src/components/about/About.jsx b/src/components/about/About.jsx new file mode 100644 index 000000000..8611bec13 --- /dev/null +++ b/src/components/about/About.jsx @@ -0,0 +1,19 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; +import Button from '@components/common/Button'; +import HeroImage from './HeroImage'; +import WhatIs311Data from './WhatIs311Data'; +import HowItWorks from './HowItWorks'; + +const About = () => ( +
+ + + + +
+); + +export default About; diff --git a/src/components/about/HeroImage.jsx b/src/components/about/HeroImage.jsx new file mode 100644 index 000000000..8af5ece8b --- /dev/null +++ b/src/components/about/HeroImage.jsx @@ -0,0 +1,13 @@ +import React from 'react'; + +const HeroImage = () => ( +
+
+ About  + 311 + DATA +
+
+); + +export default HeroImage; diff --git a/src/components/about/HowItWorks.jsx b/src/components/about/HowItWorks.jsx new file mode 100644 index 000000000..d58d0c383 --- /dev/null +++ b/src/components/about/HowItWorks.jsx @@ -0,0 +1,32 @@ +import React from 'react'; +import mobile from '@assets/mobile.svg'; +import dataserver from '@assets/dataserver.svg'; +import growth from '@assets/growth.svg'; +import datavisualization from '@assets/datavisualization.svg'; + +const HowItWorks = () => ( +
+

How It Works

+
+ + + + +

Community members post reports via the City's easy-to-use mobile application.

+

+ Reports are consolidated and entered into a central database and requests are + assigned to the appropriate department to resolve. +

+

+ Our site draws data from the City’s database to create easy-to-view visualizations and + files to export at the neighborhood level. +

+

+ Communities are empowered and equipped to identify areas of improvement to uplift and + thrive. +

+
+
+); + +export default HowItWorks; diff --git a/src/components/about/WhatIs311Data.jsx b/src/components/about/WhatIs311Data.jsx new file mode 100644 index 000000000..4d7b6a99c --- /dev/null +++ b/src/components/about/WhatIs311Data.jsx @@ -0,0 +1,34 @@ +import React from 'react'; + +const WhatIs311Data = () => ( +
+

What is 311 Data?

+

+ Each day, residents of the City of LA submit thousands of requests to deal with issues + such as illegal dumping and homeless encampments. These requests are received by the + relevant agencies, such as the Police, Building and Safety, or Department of Transportation. + The agency responds to the request, addresses it, and then closes it when resolved. The data + associated with some of these requests is available online, but is difficult to make + actionable at the neighborhood level. +

+

+ That’s where this site comes in. + {' '} + EmpowerLA + {' '} + has partnered with + {' '} + Hack For LA + {' '} + to create the + {' '} + 311 Data project + {' '} + to empower local residents and Neighborhood Councils to make informed decisions about how to + improve their communities using an intuitive app. We make navigating the wealth of 311 data + easier using an open source app built and maintained by volunteers throughout our community. +

+
+); + +export default WhatIs311Data; diff --git a/src/components/common/CONSTANTS.js b/src/components/common/CONSTANTS.js index 82b7d2b6f..263ff9855 100644 --- a/src/components/common/CONSTANTS.js +++ b/src/components/common/CONSTANTS.js @@ -1,91 +1,62 @@ export default {}; -export const YEARS = [ - '2015', - '2016', - '2017', - '2018', - '2019', -]; - -export const MONTHS = [ - 'January', - 'February', - 'March', - 'April', - 'May', - 'June', - 'July', - 'August', - 'September', - 'October', - 'November', - 'December', -]; - -export const REQUEST_TYPES = [ - { - type: 'Dead Animal', - fullType: 'Dead Animal Removal', +export const REQUEST_TYPES = { + 'Dead Animal Removal': { + displayName: 'Dead Animal', abbrev: 'DAN', color: '#4FEFEF', }, - { - type: 'Homeless Encampment', + 'Homeless Encampment': { + displayName: 'Homeless Encampment', abbrev: 'HLE', color: '#ECB800', }, - { - type: 'Single Streetlight', - fullType: 'Single Streetlight Issue', + 'Single Streetlight Issue': { + displayName: 'Single Streetlight', abbrev: 'SSL', color: '#AD7B56', }, - { - type: 'Multiple Streetlight', - fullType: 'Multiple Streetlight Issue', + 'Multiple Streetlight Issue': { + displayName: 'Multiple Streetlight', abbrev: 'MSL', color: '#F7ADAD', }, - { - type: 'Feedback', + Feedback: { + displayName: 'Feedback', abbrev: 'FBK', color: '#FFE6B7', }, - { - type: 'Bulky Items', + 'Bulky Items': { + displayName: 'Bulky Items', abbrev: 'BLK', color: '#FF0000', }, - { - type: 'E-Waste', - fullType: 'Electronic Waste', + 'Electronic Waste': { + displayName: 'E-Waste', abbrev: 'EWT', color: '#DDEC9F', }, - { - type: 'Metal/Household Appliances', + 'Metal/Household Appliances': { + displayName: 'Metal/Household Appliances', abbrev: 'MHA', color: '#B8D0FF', }, - { - type: 'Graffiti', - fullType: 'Graffiti Removal', + 'Graffiti Removal': { + displayName: 'Graffiti', abbrev: 'GFT', color: '#2368D0', }, - { - type: 'Illegal Dumping', - fullType: 'Illegal Dumping Pickup', + 'Illegal Dumping Pickup': { + displayName: 'Illegal Dumping', abbrev: 'ILD', color: '#6A8011', }, - { - type: 'Other', + Other: { + displayName: 'Other', abbrev: 'OTH', color: '#6D7C93', }, -]; +}; export const REQUEST_SOURCES = [ { @@ -114,20 +85,6 @@ export const REQUEST_SOURCES = [ }, ]; -export const REQUESTS = [ - 'Bulky Items', - 'Dead Animal Removal', - 'Electronic Waste', - 'Graffiti Removal', - 'Homeless Encampment', - 'Illegal Dumping Pickup', - 'Metal/Household Appliances', - 'Single Streetlight Issue', - 'Multiple Streetlight Issue', - 'Report Water Waste', - 'Other', -]; - export const COUNCILS = [ 'ARLETA NC', 'ARROYO SECO NC', diff --git a/src/components/contact/Contact.jsx b/src/components/contact/Contact.jsx new file mode 100644 index 000000000..8244e52a0 --- /dev/null +++ b/src/components/contact/Contact.jsx @@ -0,0 +1,9 @@ +import React from 'react'; + +const Contact = () => ( +
+ Contact +
+); + +export default Contact; diff --git a/src/components/main/body/Body.jsx b/src/components/main/body/Body.jsx index 5f57857d1..1f178217f 100644 --- a/src/components/main/body/Body.jsx +++ b/src/components/main/body/Body.jsx @@ -13,17 +13,15 @@ const Body = ({ openErrorModal, error, }) => ( -
+
-
- - - - } - /> -
+ + + + } + />
); diff --git a/src/components/main/footer/Footer.jsx b/src/components/main/footer/Footer.jsx index 6d0accdeb..f1edc2a87 100644 --- a/src/components/main/footer/Footer.jsx +++ b/src/components/main/footer/Footer.jsx @@ -1,14 +1,15 @@ import React from 'react'; import { connect } from 'react-redux'; +import { Switch, Route } from 'react-router-dom'; import propTypes from 'proptypes'; import moment from 'moment'; +import StaticFooter from './StaticFooter'; import COLORS from '../../../styles/COLORS'; const footerTextStyle = { color: COLORS.BACKGROUND, fontWeight: 'bold', - width: '100vw', }; const Footer = ({ @@ -25,14 +26,19 @@ const Footer = ({ zIndex: '20000', }} > -
-
-

- Data Updated Through: -   - {lastUpdated && moment(1000 * lastUpdated).format('MMMM Do YYYY, h:mm:ss a')} -

-
+
+ + + +
+

+ Data Updated Through: +   + {lastUpdated && moment(1000 * lastUpdated).format('MMMM Do YYYY, h:mm:ss a')} +

+
+ +
); diff --git a/src/components/main/footer/StaticFooter.jsx b/src/components/main/footer/StaticFooter.jsx new file mode 100644 index 000000000..b29184096 --- /dev/null +++ b/src/components/main/footer/StaticFooter.jsx @@ -0,0 +1,23 @@ +import React from 'react'; + +const StaticFooter = () => ( + <> +
+ ©2020 311 Data +  |  + All Rights Reserved +  |  + Powered by  + EmpowerLA +
+
+ {/* **** NEED TO REPLACE HREF WITH VALID LINK WHEN AVAILABLE **** */} + Terms & Conditions +   |   + {/* **** NEED TO REPLACE HREF WITH VALID LINK WHEN AVAILABLE **** */} + Privacy Policy +
+ +); + +export default StaticFooter; diff --git a/src/components/main/header/Header.jsx b/src/components/main/header/Header.jsx index d760cb304..4ff27c123 100644 --- a/src/components/main/header/Header.jsx +++ b/src/components/main/header/Header.jsx @@ -1,21 +1,18 @@ import React from 'react'; - +import { Link } from 'react-router-dom'; import COLORS from '../../../styles/COLORS'; const Header = () => { const cta2Style = { color: COLORS.BRAND.CTA2, - fontWeight: 'bold', }; const backgroundStyle = { color: COLORS.BACKGROUND, - fontWeight: 'bold', }; const cta1Style = { color: COLORS.BRAND.CTA1, - fontWeight: 'bold', }; return ( @@ -23,37 +20,32 @@ const Header = () => { className="navbar" role="navigation" aria-label="main navigation" - style={{ - background: COLORS.BRAND.MAIN, - height: '60px', - boxShadow: '0 2px 4px rgba(0, 0, 0, 0.5)', - // Really high z-index here to ensure Header is on top of modal - zIndex: '20000', - }} >
-
-

311

-

Data

-
+ +
+

311

+

DATA

+
+
diff --git a/src/components/main/menu/Menu.jsx b/src/components/main/menu/Menu.jsx index 86cc6d306..2f7461986 100644 --- a/src/components/main/menu/Menu.jsx +++ b/src/components/main/menu/Menu.jsx @@ -5,6 +5,7 @@ import React from 'react'; import PropTypes from 'proptypes'; import { connect } from 'react-redux'; import clx from 'classnames'; +import { Switch, Route } from 'react-router-dom'; import { toggleMenu as reduxToggleMenu, @@ -52,11 +53,20 @@ const Menu = ({ />
-

Filters

- - - - + + +

Comparison Tool

+ + + + +

Filters

+ + + + + +
); diff --git a/src/components/main/menu/RequestTypeSelector.jsx b/src/components/main/menu/RequestTypeSelector.jsx index 58c901bd1..a672c854c 100644 --- a/src/components/main/menu/RequestTypeSelector.jsx +++ b/src/components/main/menu/RequestTypeSelector.jsx @@ -25,18 +25,21 @@ const checkboxStyle = { paddingLeft: '3px', }; +const types = Object.keys(REQUEST_TYPES); + const midIndex = (list => { if (list.length / 2 === 0) { return (list.length / 2); } return Math.floor(list.length / 2); -})(REQUEST_TYPES); +})(types); -const leftColumnItems = REQUEST_TYPES.slice(0, midIndex); -const rightColumnItems = REQUEST_TYPES.slice(midIndex); +const leftColumnItems = types.slice(0, midIndex); +const rightColumnItems = types.slice(midIndex); const RequestItem = ({ type, + displayName, abbrev, selected, color, @@ -66,7 +69,7 @@ const RequestItem = ({ /> - {`${type} [${abbrev}]`} + {`${displayName} [${abbrev}]`} ); @@ -82,16 +85,20 @@ const RequestTypeSelector = ({ selectType(type); }; - const renderRequestItems = items => items.map(item => ( - - )); + const renderRequestItems = items => items.map(type => { + const item = REQUEST_TYPES[type]; + return ( + + ); + }); return (
@@ -166,6 +173,7 @@ export default connect( RequestItem.propTypes = { type: PropTypes.string, + displayName: PropTypes.string, abbrev: PropTypes.string, color: PropTypes.string, selected: PropTypes.bool, @@ -174,6 +182,7 @@ RequestItem.propTypes = { RequestItem.defaultProps = { type: null, + displayName: null, abbrev: null, color: null, selected: false, diff --git a/src/redux/reducers/filters.js b/src/redux/reducers/filters.js index 04def95c1..6cc48846a 100644 --- a/src/redux/reducers/filters.js +++ b/src/redux/reducers/filters.js @@ -1,3 +1,5 @@ +import { REQUEST_TYPES } from '@components/common/CONSTANTS'; + export const types = { UPDATE_START_DATE: 'UPDATE_START_DATE', UPDATE_END_DATE: 'UPDATE_END_DATE', @@ -35,39 +37,19 @@ export const updateNC = council => ({ payload: council, }); +// set all types to either true or false +const allRequestTypes = value => ( + Object.keys(REQUEST_TYPES).reduce((acc, type) => { + acc[type] = value; + return acc; + }, { All: value }) +); + const initialState = { startDate: null, endDate: null, councils: [], - requestTypes: { - All: false, - 'Dead Animal': false, - 'Homeless Encampment': false, - 'Single Streetlight': false, - 'Multiple Streetlight': false, - 'Bulky Items': false, - 'E-Waste': false, - 'Metal/Household Appliances': false, - 'Illegal Dumping': false, - Graffiti: false, - Feedback: false, - Other: false, - }, -}; - -const allRequestTypes = { - All: true, - 'Dead Animal': true, - 'Homeless Encampment': true, - 'Single Streetlight': true, - 'Multiple Streetlight': true, - 'Bulky Items': true, - 'E-Waste': true, - 'Metal/Household Appliances': true, - 'Illegal Dumping': true, - Graffiti: true, - Feedback: true, - Other: true, + requestTypes: allRequestTypes(false), }; export default (state = initialState, action) => { @@ -96,7 +78,7 @@ export default (state = initialState, action) => { case types.SELECT_ALL_REQUEST_TYPES: return { ...state, - requestTypes: allRequestTypes, + requestTypes: allRequestTypes(true), }; case types.DESELECT_ALL_REQUEST_TYPES: return { diff --git a/src/styles/about/_about.scss b/src/styles/about/_about.scss new file mode 100644 index 000000000..5067cab3b --- /dev/null +++ b/src/styles/about/_about.scss @@ -0,0 +1,19 @@ +.about-311 { + position: absolute; + top: 62px; + bottom: 52px; + text-align: center; + padding-bottom: 100px; + overflow-y: auto; + + #btn-about-311 { + background-color: $brand-cta1-color; + color: $brand-text-color; + font-weight: bold; + font-size: 18px; + font-family: $brand-heading-family; + width: 256px; + height: 42px; + text-align: center; + } +} diff --git a/src/styles/about/_heroimage.scss b/src/styles/about/_heroimage.scss new file mode 100644 index 000000000..7aea15c31 --- /dev/null +++ b/src/styles/about/_heroimage.scss @@ -0,0 +1,31 @@ +.about-hero { + height: 55vh; + background-image: url('../assets/about311hero860-min.png'); + background-position: center; + background-repeat: no-repeat; + background-size: cover; + position: relative; +} + +.overlay-text { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + font-size: 40px; + font-weight: bold; + font-family: $brand-heading-family; + + .text-about { + color: $brand-bg-color; + } + + .text-311 { + color: $brand-cta1-color; + } + + .text-data { + color: $brand-cta2-color; + } +} diff --git a/src/styles/about/_howitworks.scss b/src/styles/about/_howitworks.scss new file mode 100644 index 000000000..9675db46a --- /dev/null +++ b/src/styles/about/_howitworks.scss @@ -0,0 +1,21 @@ +.how-it-works{ + margin: 100px 5em 5em 100px; + + h1 { + text-align: center; + } + + p { + text-align: left; + line-height: 19px; + } + + .grid-container { + margin-top: 50px; + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-row-gap: 20px; + grid-column-gap: 75px; + justify-items: center; + } +} diff --git a/src/styles/about/_whatis311data.scss b/src/styles/about/_whatis311data.scss new file mode 100644 index 000000000..0471b62d7 --- /dev/null +++ b/src/styles/about/_whatis311data.scss @@ -0,0 +1,20 @@ +.main-text { + margin-top: 48px; + margin-left: 5em; + margin-right: 5em; + + h1 { + text-align: center; + } + + p { + margin-top: 20px; + text-align: left; + font-size: 16px; + line-height: 19px; + + a { + font-weight: bold; + } + } +} diff --git a/src/styles/main/_header.scss b/src/styles/main/_header.scss new file mode 100644 index 000000000..5cb12fca7 --- /dev/null +++ b/src/styles/main/_header.scss @@ -0,0 +1,17 @@ +.navbar { + font-family: $brand-heading-family; + font-weight: bold; + height: '60px'; + box-shadow: '0 2px 4px rgba(0, 0, 0, 0.5)'; + z-index: '20000'; + background-color: $brand-heading-color; + + .navbar-brand { + font-size: 20px; + } + + .navbar-menu .navbar-item { + font-size: 16px; + margin-right: 46px; + } +} diff --git a/src/styles/main/_map.scss b/src/styles/main/_map.scss index 1505e2c67..f1c8c422d 100644 --- a/src/styles/main/_map.scss +++ b/src/styles/main/_map.scss @@ -14,3 +14,5 @@ height: auto; } } + +@import '~react-leaflet-markercluster/dist/styles.min.css'; diff --git a/src/styles/main/_pinmap.scss b/src/styles/main/_pinmap.scss deleted file mode 100644 index 40c59d950..000000000 --- a/src/styles/main/_pinmap.scss +++ /dev/null @@ -1 +0,0 @@ -@import '~react-leaflet-markercluster/dist/styles.min.css'; \ No newline at end of file diff --git a/src/styles/main/_staticfooter.scss b/src/styles/main/_staticfooter.scss new file mode 100644 index 000000000..f51436427 --- /dev/null +++ b/src/styles/main/_staticfooter.scss @@ -0,0 +1,16 @@ +.static-footer { + color: $brand-bg-color; + font-family: $brand-text-family; + font-size: 20px; + font-weight: normal; + margin-left: 40px; + margin-right: 40px; + + .empowerla { + font-weight: bold; + } + + a { + color: $brand-bg-color; + } +} diff --git a/src/styles/styles.scss b/src/styles/styles.scss index 854f3f3b2..ef59eaa55 100644 --- a/src/styles/styles.scss +++ b/src/styles/styles.scss @@ -4,13 +4,19 @@ @import './bulma'; @import './base'; +@import './main/header'; @import './main/menu'; @import './main/datepicker'; @import './main/tooltip'; @import './main/visualizations'; @import './main/loader'; @import './main/body'; -@import './main/pinmap'; @import './main/pinpopup'; @import './main/export'; @import './main/map'; +@import './main/staticfooter'; + +@import './about/about'; +@import './about/heroimage'; +@import './about/whatis311data'; +@import './about/howitworks'; diff --git a/webpack.config.js b/webpack.config.js index aa841a4c6..5bb7a7078 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -15,6 +15,7 @@ module.exports = { '@components': path.resolve(__dirname, 'src/components'), '@reducers': path.resolve(__dirname, 'src/redux/reducers'), '@styles': path.resolve(__dirname, 'src/styles'), + '@assets': path.resolve(__dirname, 'src/assets'), }, }, module: {