modified Preferences container (added new components, modified styles…

…), added PasswordInput, Button, Icon components.WIP

package.json

@@ -14,7 +14,7 @@
     "express": "^4.16.2",
     "firebase": "^4.6.2",
     "glamor": "^2.20.40",
-    "glamorous": "^4.10.0",
+    "glamorous": "^4.11.0",
     "history": "^4.7.2",
     "intl": "^1.2.5",
     "material-ui": "^0.19.4",
@@ -49,7 +49,6 @@
     "babel-preset-react": "6.16.0",
     "babel-preset-react-hmre": "^1.1.1",
     "babel-preset-stage-0": "6.16.0",
-    "baggage-loader": "^1.0.0",
     "circular-dependency-plugin": "^4.2.0",
     "compression-webpack-plugin": "^1.0.1",
     "copy-webpack-plugin": "^4.2.0",

src/components/Button/index.js

@@ -0,0 +1,42 @@
+import React from 'react'
+import glamorous from 'glamorous'
+import RaisedButton from 'material-ui/RaisedButton'
+
+const radiusMap = {
+	topLeft: 'borderTopLeftRadius',
+	topRight: 'borderTopRightRadius',
+	bottomRight: 'borderBottomRightRadius',
+	bottomLeft: 'borderBottomLeftRadius',
+	all: 'borderRadius'
+}
+
+const Button = glamorous(({
+	borderRadius,
+	noRadius = false,
+	radiusDir = 'all',
+	radius = 2,
+	sm = false,
+	...props
+}) => (
+	<RaisedButton
+		buttonStyle={{
+			[radiusMap[radiusDir]]: radius,
+			...!sm && ({
+				height: 50,
+				lineHeight: '50px',
+			}),
+			...noRadius && ({
+				borderRadius: 0
+			})
+		}}
+		style={{
+			...!sm && ({
+				marginTop: 20,
+				height: 50
+			})
+		}}
+		{...props}
+	/>
+))()
+
+export default Button

src/components/FileInput/index.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 
-import { Error, HR, Button, Input } from './styles'
+import { Error, HR, Button, Input } from './indexStyles'
 
 class FileField extends Component {
 	constructor(props) {

src/components/FileInput/styles.js → src/components/FileInput/indexStyles.js

@@ -1,6 +1,5 @@
 import glamorous from 'glamorous'
 import RaisedButton from 'material-ui/RaisedButton'
-import { icons } from 'components/Icon'
 
 const Error = glamorous.div({
 	fontSize: 12,

src/components/Icon/index.js

@@ -1,7 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-
-import { Wrapper, Img } from './styles'
+import { Wrapper, Table, TableCell } from './indexStyles'
 
 const iconNames = [
 	'garbage',
@@ -13,12 +12,6 @@ const iconNames = [
 	'image'
 ]
 
-const cursorTypes = [
-	'auto',
-	'pointer',
-	'default'
-]
-
 export const icons = iconNames.reduce((acc, curr) => ({
 	...acc,
 	[curr]: require(`../Icon/img/${curr}.svg`) // eslint-disable-line
@@ -30,25 +23,25 @@ const Icon = ({
 	md,
 	lg,
 	customSize,
-	fitHeight = true,
-	rotate46 = false,
-	cursor = 'auto',
+	rotate45 = false,
 	onClick
 } = {}) => (
-	<Wrapper {...{ sm, md, lg, cursor, customSize, rotate46, name }} onClick={onClick}>
-		<Img url={icons[name]} fitHeight={fitHeight} alt={icons[name]} />
+	<Wrapper onClick={onClick}>
+		<Table>
+			<TableCell {...{ sm, md, lg, customSize, rotate45, name }}>
+				<img src={icons[name]} alt={icons[name]} />
+			</TableCell>
+		</Table>
 	</Wrapper>
 )
 
 Icon.propTypes = {
 	name: PropTypes.oneOf(iconNames).isRequired,
-	cursor: PropTypes.oneOf(cursorTypes),
 	onClick: PropTypes.func,
 	sm: PropTypes.bool,
 	md: PropTypes.bool,
 	lg: PropTypes.bool,
-	rotate46: PropTypes.bool,
-	fitHeight: PropTypes.bool,
+	rotate45: PropTypes.bool,
 	customSize: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
 }
 

src/components/Icon/indexStyles.js

@@ -0,0 +1,39 @@
+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,
+	':hover': {
+		opacity: 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 } }
+	if (md) { result = { width: 24, height: 24 } }
+	if (lg) { result = { width: 32, height: 32 } }
+	if (customSize) { result = { width: customSize, height: customSize } }
+	return result
+}
+
+export {
+	Wrapper,
+	Table,
+	TableCell
+}

src/components/Img/index.js

@@ -0,0 +1,23 @@
+import React from 'react'
+import glamorous from 'glamorous'
+import RaisedButton from 'material-ui/RaisedButton'
+
+const radiusMap = {
+	topLeft: 'borderTopLeftRadius',
+	topRight: 'borderTopRightRadius',
+	bottomRight: 'borderBottomRightRadius',
+	bottomLeft: 'borderBottomLeftRadius',
+	all: 'borderRadius'
+}
+
+const Img = glamorous.div({
+	backgroundRepeat: 'no-repeat',
+	backgroundSize: 'cover',
+}, ({ url, borderRadius = 2, width = '100%', height = '100%' }) => ({
+	width,
+	height,
+	borderRadius,
+	backgroundImage: `url(${url})`
+}))
+
+export default Img

src/components/PasswordInput/index.js

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

src/components/PasswordInput/indexStyles.js

@@ -0,0 +1,31 @@
+import React from 'react'
+import glamorous from 'glamorous'
+import Checkbox from 'material-ui/Checkbox'
+
+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} />
+))({
+	position: 'absolute !important',
+	top: 30,
+	right: 0,
+	width: 'auto !important'
+})
+
+export {
+	PasswordWrapper,
+	Wrapper,
+	CheckBoxField
+}

src/components/PasswordInput/messages.js

@@ -0,0 +1,8 @@
+import { defineMessages } from 'react-intl'
+
+export default defineMessages({
+	'randomQuotes.components.passwordInput.password': {
+		id: 'randomQuotes.components.passwordInput.password',
+		defaultMessage: 'Password'
+	}
+})

src/components/Spinner/index.js

@@ -1,7 +1,26 @@
-import React from 'react'
+import glamorous from 'glamorous'
+import img from './img/loading.svg'
 
-export const Spinner = () => (
-	<div className='Spinner Spinner--centered' />
-)
+const Spinner = glamorous.div({
+	textAlign: 'center',
+	margin: '0 auto',
+	width: 38,
+	display: 'block',
+	':after': {
+		content: '',
+		display: 'block',
+		paddingBottom: '100%',
+		background: `url(${img}) center center no-repeat`,
+		size: 'cover',
+		animationName: 'spin',
+		animationDuration: '750ms',
+		animationIterationCount: 'infinite',
+		animationTimingFunction: 'linear',
+	}
+}, ({ centered = true }) => ({
+	position: centered ? 'absolute' : 'relative',
+	top: centered ? '50%' : 'auto',
+	left: centered ? '50%' : 'auto'
+}))
 
 export default Spinner