added notification component and message reducer, added SignUp. foxed…

… lint erros. WIP

package.json

@@ -17,7 +17,7 @@
     "glamorous": "^4.11.0",
     "history": "^4.7.2",
     "intl": "^1.2.5",
-    "material-ui": "^0.19.4",
+    "material-ui": "^0.20.0",
     "node-sass": "^4.5.3",
     "open": "^0.0.5",
     "prop-types": "^15.6.0",
@@ -53,7 +53,7 @@
     "compression-webpack-plugin": "^1.0.1",
     "copy-webpack-plugin": "^4.2.0",
     "css-loader": "0.25.0",
-    "eslint": "3.19.0",
+    "eslint": "^4.15.0",
     "eslint-config-airbnb": "15.0.1",
     "eslint-config-airbnb-base": "11.2.0",
     "eslint-plugin-import": "2.7.0",

src/components/EmptyState/index.js

@@ -0,0 +1,19 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Wrapper, Heading, SubHeading } from './indexStyles'
+
+const EmptyState = ({ heading = '', subheading = '', body }) => (
+	<Wrapper>
+		<Heading>{heading}</Heading>
+		<SubHeading>{subheading}</SubHeading>
+		{body}
+	</Wrapper>
+)
+
+EmptyState.propTypes = {
+	heading: PropTypes.any,
+	subheading: PropTypes.any,
+	body: PropTypes.any
+}
+
+export default EmptyState

src/components/EmptyState/indexStyles.js

@@ -0,0 +1,21 @@
+import glamorous from 'glamorous'
+
+const Wrapper = glamorous.div({
+	marginTop: 100,
+	marginBottom: 100,
+	textAlign: 'center'
+})
+
+const Heading = glamorous.h2({
+	margin: '0 0 30px'
+})
+
+const SubHeading = glamorous.p({
+	margin: '-30px 0 15px'
+})
+
+export {
+	Heading,
+	SubHeading,
+	Wrapper
+}

src/components/FileInput/index.js

@@ -4,8 +4,8 @@ import PropTypes from 'prop-types'
 import { Error, HR, Button, Input } from './indexStyles'
 
 class FileField extends Component {
-	constructor(props) {
-		super(props)
+	constructor() {
+		super()
 		this.onChange = ::this.onChange
 		this.state = { imagePreviewUrl: '' }
 	}

src/components/Icon/index.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Wrapper, Table, TableCell } from './indexStyles'
+import Wrapper from './indexStyles'
 
 const iconNames = [
 	'garbage',
@@ -17,26 +17,36 @@ export const icons = iconNames.reduce((acc, curr) => ({
 	[curr]: require(`../Icon/img/${curr}.svg`) // eslint-disable-line
 }), {})
 
+const cursors = {
+	default: 'default',
+	pointer: 'pointer'
+}
+
 const Icon = ({
+	className = '',
 	name,
 	sm,
 	md,
 	lg,
 	customSize,
 	rotate45 = false,
-	onClick
+	onClick,
+	cursor
 } = {}) => (
-	<Wrapper onClick={onClick}>
-		<Table>
-			<TableCell {...{ sm, md, lg, customSize, rotate45, name }}>
-				<img src={icons[name]} alt={icons[name]} />
-			</TableCell>
-		</Table>
+	<Wrapper
+		className={className}
+		onClick={onClick}
+		cursor={cursors[cursor]}
+		{...{ sm, md, lg, customSize, rotate45, name }}
+	>
+		<img src={icons[name]} alt={icons[name]} height='100%' width='100%' />
 	</Wrapper>
 )
 
 Icon.propTypes = {
+	className: PropTypes.string,
 	name: PropTypes.oneOf(iconNames).isRequired,
+	cursor: PropTypes.string,
 	onClick: PropTypes.func,
 	sm: PropTypes.bool,
 	md: PropTypes.bool,

src/components/Icon/indexStyles.js

@@ -3,26 +3,18 @@ import glamorous from 'glamorous'
 const Wrapper = glamorous.span({
 	display: 'inline-block',
 	verticalAlign: 'middle',
-})
-
-const Table = glamorous.span({
-	height: '100%',
-	width: '100%',
-	display: 'table'
-})
-
-const TableCell = glamorous.span(({ sm, md, lg, customSize, rotate45, name }) => ({
-	display: 'table-cell',
-	verticalAlign: 'middle',
-	transition: 'all .3s ease-in-out',
-	transform: rotate45 ? 'rotate(45deg) scale(1.1)' : 'none',
-	opacity: name === 'settings' && !rotate45 ? 0.5 : 1,
+	transition: 'transform .15s linear',
 	':hover': {
 		opacity: 1
-	},
-	...getSize(sm, md, lg, customSize),
+	}
+}, ({ cursor, sm, md, lg, customSize, rotate45, name }) => ({
+	cursor,
+	transform: rotate45 ? 'rotate(45deg) scale(1.1)' : 'none',
+	opacity: name === 'settings' && !rotate45 ? 0.5 : 1,
+	...getSize(sm, md, lg, customSize)
 }))
 
+
 const getSize = (sm, md, lg, customSize) => {
 	let result = { width: '100%', height: '100%' }
 	if (sm) { result = { width: 18, height: 18 } }
@@ -32,8 +24,4 @@ const getSize = (sm, md, lg, customSize) => {
 	return result
 }
 
-export {
-	Wrapper,
-	Table,
-	TableCell
-}
+export default Wrapper

src/components/PasswordInput/index.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import { intlShape, injectIntl } from 'react-intl'
 import { Field } from 'redux-form'
 import Visibility from 'material-ui/svg-icons/action/visibility'
@@ -8,23 +9,23 @@ import messages from './messages'
 import { PasswordWrapper, CheckBoxField } from './indexStyles'
 
 class PasswordInput extends Component {
-
 	static propTypes = {
-		intl: intlShape
+		intl: intlShape,
+		style: PropTypes.object
 	}
 
 	constructor() {
 		super()
 		this.handleSetShowPassword = ::this.handleSetShowPassword
-		this.state = { showPassword: false }
+		this.state = { showPassword: false, newVal: undefined }
 	}
 
 	handleSetShowPassword() {
 		this.setState({ showPassword: !this.state.showPassword })
 	}
 
 	render() {
-		const { intl } = this.props
+		const { intl, style } = this.props
 		const { showPassword } = this.state
 		return (
 			<PasswordWrapper>
@@ -33,13 +34,13 @@ class PasswordInput extends Component {
 					component={TextInput}
 					type={showPassword ? 'text' : 'password'}
 					label={intl.formatMessage(messages['randomQuotes.components.passwordInput.password'])}
+					style={style}
 					fullWidth
 				/>
 				<CheckBoxField
 					name='show'
 					type='checkbox'
 					onCheck={this.handleSetShowPassword}
-					iconStyle={{ fill: 'rgba(0, 0, 0, 0.22)', marginRight: 0 }}
 					checkedIcon={<Visibility />}
 					uncheckedIcon={<VisibilityOff />}
 				/>

src/components/PasswordInput/indexStyles.js

@@ -6,26 +6,24 @@ const PasswordWrapper = glamorous.div({
 	position: 'relative'
 })
 
-const Wrapper = glamorous.div({
-	height: '100%',
-	display: 'flex',
-	flexDirection: 'column',
-	justifyContent: 'center',
-	alignContent: 'center',
-	background: '#FFFFFF'
-})
-
 const CheckBoxField = glamorous(props => (
-	<Checkbox {...props} />
+	<Checkbox
+		iconStyle={{
+			fill: 'rgba(0, 0, 0, 0.22)',
+			left: 0,
+			marginRight: 0
+		}}
+		{...props}
+	/>
 ))({
 	position: 'absolute !important',
-	top: 30,
 	right: 0,
+	top: 34,
+	marginRight: 0,
 	width: 'auto !important'
 })
 
 export {
 	PasswordWrapper,
-	Wrapper,
 	CheckBoxField
 }

src/components/Spinner/index.js

@@ -2,25 +2,22 @@ import glamorous from 'glamorous'
 import img from './img/loading.svg'
 
 const Spinner = glamorous.div({
-	textAlign: 'center',
-	margin: '0 auto',
-	width: 38,
-	display: 'block',
-	':after': {
-		content: '',
+	height: '100%',
+	display: 'flex',
+	alignItems: 'center',
+	justifyContent: 'center',
+	'&:after': {
+		content: `''`, // eslint-disable-line
 		display: 'block',
-		paddingBottom: '100%',
 		background: `url(${img}) center center no-repeat`,
-		size: 'cover',
+		backgroundSize: 'contain',
 		animationName: 'spin',
 		animationDuration: '750ms',
 		animationIterationCount: 'infinite',
 		animationTimingFunction: 'linear',
+		width: 38,
+		height: 38
 	}
-}, ({ centered = true }) => ({
-	position: centered ? 'absolute' : 'relative',
-	top: centered ? '50%' : 'auto',
-	left: centered ? '50%' : 'auto'
-}))
+})
 
 export default Spinner

src/components/TextInput/index.js

@@ -1,9 +1,9 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import TextField from 'material-ui/TextField'
+import Wrapper from './indexStyles'
 
 const TextInput = ({ input, label, meta: { touched, error }, ...custom }) => (
-	<TextField
+	<Wrapper
 		hintText={label}
 		floatingLabelText={label}
 		errorText={touched && error}

src/components/TextInput/indexStyles.js

@@ -0,0 +1,9 @@
+import glamorous from 'glamorous'
+import TextField from 'material-ui/TextField'
+
+const Wrapper = glamorous(TextField)(({ type = 'text' }) => ({
+	display: type === 'hidden' && 'none !important',
+	background: '#FFFFFF'
+}))
+
+export default Wrapper

src/containers/App/index.js

@@ -3,15 +3,15 @@ import Switch from 'react-router-dom/Switch'
 import Route from 'react-router-dom/Route'
 import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
 import HomePage from 'containers/HomePage'
-import Login from 'containers/Login'
+import SignInOrSignUp from 'containers/SignInOrSignUp'
 import Wrapper from './indexStyles'
 
 const App = () => (
 	<Wrapper>
 		<MuiThemeProvider>
 			<Switch>
 				<Route exact path='/' component={HomePage} />
-				<Route path='/login' component={Login} />
+				<Route path='/Login' component={SignInOrSignUp} />
 			</Switch>
 		</MuiThemeProvider>
 	</Wrapper>

src/containers/Background/index.js

@@ -5,28 +5,35 @@ import { actions } from 'reducers/backgrounds'
 import Wrapper from './indexStyles'
 
 class Background extends Component {
-
 	static propTypes = {
+		background: PropTypes.object,
 		handleUpdate: PropTypes.func.isRequired,
 		children: PropTypes.node.isRequired,
 		backgrounds: PropTypes.array.isRequired,
-		background: PropTypes.object
+		date: PropTypes.string.isRequired
 	}
 
 	componentDidMount() {
-		this.getBackground()
+		const { background } = this.props
+		if (Object.keys(background).length === 0) {
+			this.getBackground()
+		}
 	}
 
-	getBackground() {
-		const { backgrounds, background } = this.props
-		if (Object.keys(background).length === 0) {
-			const sortBackgrounds = backgrounds.sort((a, b) => a.vcount - b.vcount) // Sort backgrounds according to vcount (number of visualizations)
-			const slicedBackgrounds = sortBackgrounds.slice(0, 5) // get the first 5 backgrounds
-			const chosenBackground = slicedBackgrounds[Math.floor(Math.random() * slicedBackgrounds.length)] // return the randomly chosen background
-			this.handleUpdateBackground({ ...chosenBackground, vcount: chosenBackground.vcount + 1 })
+	componentDidUpdate(prevProps) {
+		if (prevProps.date !== this.props.date) {
+			this.getBackground()
 		}
 	}
 
+	getBackground() {
+		const { backgrounds } = this.props
+		const sortBackgrounds = backgrounds.sort((a, b) => a.vcount - b.vcount) // Sort backgrounds according to vcount (number of visualizations)
+		const slicedBackgrounds = sortBackgrounds.slice(0, 5) // get the first 5 backgrounds
+		const chosenBackground = slicedBackgrounds[Math.floor(Math.random() * slicedBackgrounds.length)] // return the randomly chosen background
+		this.handleUpdateBackground({ ...chosenBackground, vcount: chosenBackground.vcount + 1 })
+	}
+
 	handleUpdateBackground(modifiedBackground) {
 		const { handleUpdate } = this.props
 		handleUpdate(modifiedBackground)