styles

src/components/app.tsx

@@ -2,15 +2,14 @@ import React, { Component } from 'react';
 import Todos from './todos';
 import Notification from './notification';
 
+import "../styles.css";
+
 class App extends Component {
   render() {
     return (
       <div>
-        <h1>Easy Peasy + Typescript</h1>
-        <p>
-          This is a demonstration of how to utilise the Typescript integration
-          of <a href="https://github.com/ctrlplusb/easy-peasy">Easy Peasy</a>.
-        </p>
+        <h1>Easy Peasy + Typescript + Hook Form <small>Todo List</small></h1>
+
         <Todos />
         <Notification />
       </div>

src/components/todos.tsx

@@ -23,12 +23,12 @@ export default function Todos() {
 
   return (
     <div>
-      <h2>Todo List</h2>
       <ul>
         {items.map((todo, idx) => (
           <li key={idx}>{todo}</li>
         ))}
       </ul>
+      <label>Description</label>
       <input
         name="descriptionRequired"
         ref={register({ required: true })}

src/styles.css

@@ -0,0 +1,128 @@
+body {
+  background: #0e101c;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  color: white;
+}
+
+form {
+  max-width: 500px;
+  margin: 0 auto;
+}
+
+h1 {
+  font-weight: 100;
+  color: white;
+  text-align: center;
+  padding-bottom: 10px;
+  border-bottom: 1px solid rgb(79, 98, 148);
+}
+
+.form {
+  background: #0e101c;
+  max-width: 400px;
+  margin: 0 auto;
+}
+
+span {
+  color: #bf1650;
+}
+
+span::before {
+  display: inline;
+  content: "⚠ ";
+}
+
+button,
+input {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  border-radius: 4px;
+  border: 1px solid white;
+  padding: 10px 15px;
+  margin-bottom: 10px;
+  font-size: 14px;
+}
+
+label {
+  line-height: 2;
+  text-align: left;
+  display: block;
+  margin-bottom: 13px;
+  margin-top: 20px;
+  color: white;
+  font-size: 14px;
+  font-weight: 200;
+}
+
+button {
+  background: #ec5990;
+  color: white;
+  text-transform: uppercase;
+  border: none;
+  margin-top: 40px;
+  padding: 20px;
+  font-size: 16px;
+  font-weight: 100;
+  letter-spacing: 10px;
+}
+
+button:hover {
+  background: #bf1650;
+}
+
+button:active,
+input[type="button"]:active,
+input[type="submit"]:active {
+  transition: 0.3s all;
+  transform: translateY(3px);
+  border: 1px solid transparent;
+  opacity: 0.8;
+}
+
+input:disabled {
+  opacity: 0.4;
+}
+
+input[type="button"]:hover {
+  transition: 0.3s all;
+}
+
+button,
+input[type="button"],
+input[type="submit"] {
+  -webkit-appearance: none;
+}
+
+.App {
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+button[type="button"] {
+  display: block;
+  appearance: none;
+  background: #333;
+  color: white;
+  border: none;
+  text-transform: uppercase;
+  padding: 10px 20px;
+  border-radius: 4px;
+}
+
+hr {
+  margin-top: 30px;
+}
+
+button {
+  display: block;
+  appearance: none;
+  margin-top: 40px;
+  border: 1px solid #333;
+  margin-bottom: 20px;
+  text-transform: uppercase;
+  padding: 10px 20px;
+  border-radius: 4px;
+}