Created UI and basic state management

src/components/App.js

@@ -2,13 +2,20 @@ import React, { Component } from "react";
 import axios from "axios";
 
 import Header from "./Header";
+import Card from "./Card";
 
 class App extends Component {
+	createPreview = () => {
+		// send to node backend
+	};
+
 	render() {
 		return (
 			<div className="app">
 				<Header />
-				<div>Config</div>
+				<main className="container">
+					<Card onCreatePreview={this.createPreview} />
+				</main>
 			</div>
 		);
 	}

src/components/Card.js

@@ -0,0 +1,120 @@
+import React, { Component } from "react";
+import styled from "styled-components";
+
+import TextInput from "./TextInput";
+
+const StyledError = styled.div`
+	color: #ed4135;
+	font-size: 0.9rem;
+	text-align: center;
+	margin-bottom: 15px;
+`;
+
+const StyledCard = styled.div`
+	margin: 0;
+	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+	background-color: #fff;
+	max-width: 400px;
+	border-radius: 2px;
+	box-sizing: border-box;
+	position: relative;
+	flex: 1;
+
+	.card-title {
+		font-size: 1.3rem;
+		font-weight: 500;
+		padding: 10px 10px 8px 10px;
+	}
+
+	.card-body {
+		padding: 20px 10px 10px 10px;
+	}
+
+	.card-actions {
+		display: flex;
+		text-transform: uppercase;
+		border-top: 1px solid #e7e7e7;
+
+		.action {
+			background-color: #fff;
+			transition: background-color 0.3s ease;
+			padding: 10px 0;
+			color: #333;
+			font-size: 1.2rem;
+			flex: 1;
+			text-align: center;
+			font-weight: 500;
+			border-radius: 2px;
+			cursor: pointer;
+
+			&:hover {
+				background-color: #e7e7e7;
+			}
+		}
+	}
+`;
+
+class Card extends Component {
+	state = {
+		folderName: "",
+		subfolderName: "V4.0",
+		error: false
+	};
+
+	updateTextValue = (tag, ev) => {
+		this.setState({
+			[tag]: ev.target.value
+		});
+	};
+
+	validateConfig = () => {
+		if (!this.state.folderName || !this.state.subfolderName) {
+			this.setState({
+				error: true
+			});
+		} else {
+			this.props.onCreatePreview({
+				folderName: this.state.folderName,
+				subfolderName: this.state.subfolderName
+			});
+		}
+	};
+
+	render() {
+		return (
+			<StyledCard>
+				<div className="card-title">Create a Preview</div>
+				<form>
+					<div className="card-body">
+						<TextInput
+							val={this.state.folderName}
+							tag="folderName"
+							valChange={this.updateTextValue}
+							label="Preview Folder Name"
+							type="text"
+						/>
+						<TextInput
+							val={this.state.subfolderName}
+							tag="subfolderName"
+							valChange={this.updateTextValue}
+							label="Subfolder Name"
+							type="text"
+						/>
+					</div>
+					{this.state.error && (
+						<StyledError>
+							There seems to be an issue with your configuration..
+						</StyledError>
+					)}
+					<div className="card-actions">
+						<div className="action" onClick={this.validateConfig}>
+							Create
+						</div>
+					</div>
+				</form>
+			</StyledCard>
+		);
+	}
+}
+
+export default Card;

src/components/Header.js

@@ -1,7 +1,21 @@
 import React from "react";
+import styled from "styled-components";
+
+const StyledHeader = styled.div`
+	z-index: 2;
+	background: linear-gradient(to right, #44a08d, #093637);
+	padding: 20px;
+	font-weight: 300;
+	box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px;
+	font-size: 2rem;
+	color: rgba(255, 255, 255, 0.83);
+	text-align: center;
+`;
 
 const Header = () => {
-	return <div classname="header">Validar Preview Generator</div>;
+	return (
+		<StyledHeader classname="header">Validar Preview Generator</StyledHeader>
+	);
 };
 
 export default Header;

src/components/TextInput.js

@@ -0,0 +1,90 @@
+import React from "react";
+import styled from "styled-components";
+
+const StyledInput = styled.div`
+	position: relative;
+	margin-bottom: 25px;
+
+	input {
+		outline: none;
+		position: relative;
+		background: none;
+		width: 100%;
+		height: 45px;
+		border: 0;
+		color: #212121;
+		font-size: 1.1rem;
+		font-weight: 400;
+	}
+
+	label {
+		position: absolute;
+		top: 0;
+		left: 0;
+		color: #757575;
+		font-size: 1.1rem;
+		font-weight: 300;
+		line-height: 45px;
+		transition: all 0.2s ease;
+		pointer-events: none;
+	}
+
+	input:focus ~ label {
+		color: #9d9d9d;
+		transform: translate(-12%, -50%) scale(0.75);
+	}
+
+	.bar {
+		position: absolute;
+		left: 0;
+		bottom: 0;
+		background: #c5c5c5;
+		width: 100%;
+		height: 1px;
+	}
+
+	.bar::before,
+	.bar::after {
+		content: "";
+		position: absolute;
+		background: #22635c;
+		width: 0;
+		height: 2px;
+		transition: width 0.2s ease;
+	}
+
+	.bar::before {
+		left: 50%;
+	}
+
+	.bar::after {
+		right: 50%;
+	}
+
+	input:focus ~ .bar::before,
+	input:focus ~ .bar::after {
+		width: 50%;
+	}
+
+	input:valid ~ label {
+		color: #9d9d9d;
+		transform: translate(-12%, -50%) scale(0.75);
+	}
+`;
+
+const TextInput = ({ val, tag, valChange, label, type }) => {
+	return (
+		<StyledInput>
+			<input
+				required
+				type={type ? type : "text"}
+				value={val}
+				onChange={ev => valChange(tag, ev)}
+			/>
+			<label htmlFor={label}>{label}</label>
+			<div className="bar" />
+		</StyledInput>
+	);
+};
+
+export default TextInput;

src/styles/default.css

@@ -31,13 +31,15 @@ body {
 	flex: 1;
 	display: flex;
 	flex-direction: column;
-	background-color: #0b222e;
-	color: #f5f5f5;
-	overflow: hidden;
+	background-color: #e9e9e9;
+	color: rgba(0, 0, 0, 0.87);
 }
 
 .container {
 	padding: 10px 15px;
 	display: flex;
-	flex-direction: column;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+	flex: 1;
 }