import React, { Component } from 'react';
import Input from '../components/Input'


export default class LoginForm extends Component {

    constructor(props) {
        super(props);

    }

    render() {
        const inputs = this.props.formData.inputs;

        return (
            <div className="grid grid--justify-center">
                <div className="grid__col-4">
                    <h1>Login</h1>

                    <form className="form" onSubmit={this.props.formData.onSubmit}>

                        {
                            inputs.map((input, index) => {
                                let error = this.props.formData.error.inputID === input.id ? this.props.formData.error.message : false;
                                return <Input key={index} {...input} error={error} />
                            })
                        }

                        <button type="submit" className="btn btn--primary margin-top--1">Log in</button>
                    </form>
                </div>
            </div>
        )
    }
}

import React, { Component } from 'react';
import Input from '../components/Input'


export default class LoginForm extends Component {

    constructor(props) {
        super(props);

    }

    render() {
        const inputs = this.props.formData.inputs;

        return (
            <div className="grid grid--justify-center">
                <div className="grid__col-3">
                    <h1>Login</h1>

                    <form className="form" onSubmit={this.props.formData.onSubmit}>

                        {
                            inputs.map((input, index) => {
                                let error = this.props.formData.error.inputID === input.id ? this.props.formData.error.message : false;
                                return <Input key={index} {...input} error={error} />
                            })
                        }

                        <button type="submit" className="btn btn--primary margin-top--1">Log in</button>
                    </form>
                </div>
            </div>
        )
    }
}

Reduce width of login form
Reduce width of login form


Former-commit-id: a785c93477d60bcd484b689789e532f8b3a6f271
Former-commit-id: 5a1649b0c7a587d5fed9738bafc0433e2218df89
Former-commit-id: dbcaa743a85a4e2f6208e6295ed5d01a0677807e