From d3202f7688372ab701d3abf87ec01c23aba6bfe8 Mon Sep 17 00:00:00 2001 From: C-Rodg Date: Wed, 29 Nov 2017 12:40:36 -0800 Subject: [PATCH] Created UI and basic state management --- src/components/App.js | 9 ++- src/components/Card.js | 120 ++++++++++++++++++++++++++++++++++++ src/components/Header.js | 16 ++++- src/components/TextInput.js | 90 +++++++++++++++++++++++++++ src/styles/default.css | 10 +-- 5 files changed, 239 insertions(+), 6 deletions(-) create mode 100644 src/components/Card.js create mode 100644 src/components/TextInput.js diff --git a/src/components/App.js b/src/components/App.js index 8516f85..a11e943 100644 --- a/src/components/App.js +++ b/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 (
-
Config
+
+ +
); } diff --git a/src/components/Card.js b/src/components/Card.js new file mode 100644 index 0000000..c8911f9 --- /dev/null +++ b/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 ( + +
Create a Preview
+
+
+ + +
+ {this.state.error && ( + + There seems to be an issue with your configuration.. + + )} +
+
+ Create +
+
+
+ + ); + } +} + +export default Card; diff --git a/src/components/Header.js b/src/components/Header.js index af462ed..55bc055 100644 --- a/src/components/Header.js +++ b/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
Validar Preview Generator
; + return ( + Validar Preview Generator + ); }; export default Header; diff --git a/src/components/TextInput.js b/src/components/TextInput.js new file mode 100644 index 0000000..19a298c --- /dev/null +++ b/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 ( + + valChange(tag, ev)} + /> + +
+ + ); +}; + +export default TextInput; diff --git a/src/styles/default.css b/src/styles/default.css index 0386b6f..2ebb066 100644 --- a/src/styles/default.css +++ b/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; }