add some style

johhansantana · Aug 20, 2018 · 431c69a · 431c69a
1 parent 4475817
commit 431c69a
Show file tree

Hide file tree

Showing 4 changed files with 101 additions and 12 deletions.
diff --git a/components/todos.tsx b/components/todos.tsx
@@ -3,9 +3,34 @@ type Props = {
 };
 
 export default (props: Props) => (
-  <ul>
-    {props.todos.map((todo, i) => (
-      <li key={i}>{todo}</li>
-    ))}
+  <ul className="ul">
+    {props.todos.length > 0 ? (
+      props.todos.map((todo, i) => (
+        <div key={i}>
+          <li className="flex-list">
+            <button className="button">Done</button> {todo}
+          </li>
+          <hr />
+        </div>
+      ))
+    ) : (
+      <p>Nothing todo. Add some.</p>
+    )}
+
+    <style jsx>{`
+      .ul {
+        list-style: none;
+        padding-left: 0;
+        font-size: 23px;
+      }
+      .button {
+        margin-right: 5px;
+      }
+      .flex-list {
+        display: flex;
+        justify-content: flex-start;
+        align-items: flex-start;
+      }
+    `}</style>
   </ul>
 );
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,5 +1,6 @@
 import App, { Container } from "next/app";
 import React from "react";
+import Head from "next/head";
 import withReduxStore from "../lib/with-redux-store";
 import { Provider } from "react-redux";
 
@@ -12,6 +13,18 @@ class MyApp extends App<Props> {
     const { Component, pageProps, reduxStore } = this.props;
     return (
       <Container>
+        <Head>
+          <title>Todo List</title>
+          <meta charSet="utf-8" />
+          <meta
+            name="viewport"
+            content="initial-scale=1.0, width=device-width"
+          />
+          <link
+            href="https://fonts.googleapis.com/css?family=Roboto"
+            rel="stylesheet"
+          />
+        </Head>
         <Provider store={reduxStore}>
           <Component {...pageProps} />
         </Provider>

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -28,14 +28,57 @@ class Index extends React.Component<Props, State> {
   render() {
     const { todos } = this.props;
     return (
-      <div>
-        <form>
-          <input type="text" onChange={this.onChange} />
-          <button type="submit" onClick={this.onSubmit}>
-            Add
-          </button>
-        </form>
-        <Todos todos={todos} />
+      <div className="container">
+        <div className="content">
+          <form>
+            <input className="input" type="text" onChange={this.onChange} />
+            <button className="button" type="submit" onClick={this.onSubmit}>
+              Add
+            </button>
+          </form>
+          <Todos todos={todos} />
+        </div>
+        <style jsx>{`
+          :global(body) {
+            margin: 0;
+            padding: 0;
+            background: #f3f3f3;
+            font-family: "Roboto", sans-serif;
+          }
+          .container {
+            width: 100vw;
+            min-height: 100vh;
+            padding-bottom: 25px;
+            padding-top: 25px;
+            display: flex;
+            justify-content: center;
+            align-items: flex-start;
+          }
+          .content {
+            background: white;
+            border: 1px solid #e6e6e6;
+            box-shadow: 0px 3px 15px #c1c1c1;
+            padding: 15px;
+            width: 500px;
+          }
+          .input {
+            width: 80%;
+            height: 30px;
+            font-size: 20px;
+            border: 1px solid gray;
+          }
+          :global(.button) {
+            font-size: 23px;
+            margin-left: 5px;
+            background: none;
+            cursor: pointer;
+          }
+          @media (max-width: 600px) {
+            .content {
+              width: 90%;
+            }
+          }
+        `}</style>
       </div>
     );
   }

diff --git a/typings/styled-jsx.d.ts b/typings/styled-jsx.d.ts
@@ -0,0 +1,8 @@
+import "react";
+
+declare module "react" {
+  interface StyleHTMLAttributes<T> extends React.HTMLAttributes<T> {
+    jsx?: boolean;
+    global?: boolean;
+  }
+}