pushing styling before refactoring components

learncodeacademy · annapanana · Mar 22, 2017 · Mar 22, 2017 · Mar 22, 2017 · Mar 22, 2017
commit df12108c212dd6bb1fee098d0ec9eb711741fe37
diff --git a/3-flux/documentation/Untitled.pdf b/3-flux/documentation/Untitled.pdf
diff --git a/3-flux/documentation/data-flow.pdf b/3-flux/documentation/data-flow.pdf
diff --git a/3-flux/package.json b/3-flux/package.json
@@ -21,7 +21,6 @@
     "webpack": "^1.12.9",
     "webpack-dev-server": "^1.14.1"
   },
-  "devDependencies": {},
   "scripts": {
     "dev": "webpack-dev-server --content-base src --inline --hot"
   },

diff --git a/3-flux/src/assets/icon_trash.svg b/3-flux/src/assets/icon_trash.svg
diff --git a/3-flux/src/index.html b/3-flux/src/index.html
@@ -14,6 +14,7 @@
   <!-- Custom Fonts -->
   <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
   <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
+  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
 </head>
 
 <body>

diff --git a/3-flux/src/js/components/NewTodo.js b/3-flux/src/js/components/NewTodo.js
@@ -0,0 +1,16 @@
+import React from "react";
+
+import * as TodoActions from "../actions/TodoActions";
+
+export default class NewTodo extends React.Component {
+  constructor(props) {
+    super();
+  }
+
+  render() {
+
+    return (
+
+    );
+  }
+}
diff --git a/3-flux/src/js/components/layout/Nav.js b/3-flux/src/js/components/layout/Nav.js
@@ -22,8 +22,13 @@ export default class Nav extends React.Component {
     const settingsClass = location.pathname.match(/^\/settings/) ? "active" : "";
     const navClass = collapsed ? "collapse" : "";
 
+    const navStyle = {
+      backgroundColor: "#3C1053",
+      backgroundImage: "none"
+    };
+
     return (
-      <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
+      <nav style={navStyle} class="navbar navbar-inverse navbar-fixed-top" role="navigation">
         <div class="container">
           <div class="navbar-header">
             <button type="button" class="navbar-toggle" onClick={this.toggleCollapse.bind(this)} >

diff --git a/3-flux/src/js/pages/Layout.js b/3-flux/src/js/pages/Layout.js
@@ -7,7 +7,7 @@ import Nav from "../components/layout/Nav";
 export default class Layout extends React.Component {
   render() {
     const { location } = this.props;
-    
+
     const containerStyle = {
       marginTop: "60px"
     };

diff --git a/3-flux/src/js/pages/Todos.js b/3-flux/src/js/pages/Todos.js
@@ -1,10 +1,10 @@
 import React from "react";
 
 import Todo from "../components/Todo";
+import NewTodo from "../components/Todo";
 import * as TodoActions from "../actions/TodoActions";
 import TodoStore from "../stores/TodoStore";
 
-
 export default class Todos extends React.Component {
   constructor() {
     super();
@@ -35,6 +35,7 @@ export default class Todos extends React.Component {
 
   // Start Anna Code
   addTodo(e) {
+    console.log("??");
     e.preventDefault();
     TodoActions.createTodo(this.state.newTodo);
     this.setState({newTodo: ""});
@@ -57,13 +58,42 @@ export default class Todos extends React.Component {
       paddingLeft: "0"
     };
 
+    const headerStyling = {
+      fontFamily: "Roboto",
+      color: "#3C1053",
+      marginBottom: "20px"
+    };
+
+    const inputStyling = {
+      borderRadius: "10px",
+      borderStyle: "solid",
+      borderWidth: "1px",
+      borderColor: "#B19FBA",
+      marginRight: "20px",
+      minWidth: "200px",
+      backgroundColor: "#D8CFDD",
+      padding: "3px 15px 3px 15px"
+    }
+
+    const formStyling = {
+      paddingBottom: "10px"
+    }
+
+    const standardButton = {
+      borderRadius: "10px",
+      borderStyle: "none",
+      padding: "3px 15px 3px 15px",
+      fontFamily: "Roboto",
+      backgroundColor: "#765786",
+      color: "#FFF"
+    }
+
     return (
       <div>
-        <button onClick={this.reloadTodos.bind(this)}>Reload!</button>
-        <h1>Todos</h1>
-        <form>
-          <input type="text" value={this.state.newTodo} onChange={this.handleChange.bind(this)}/>
-          <button onClick={this.addTodo.bind(this)}>Add Todo</button>
+        <h1 style={headerStyling}>A List of things To Do</h1>
+        <form style={formStyling}>
+          <input style={inputStyling} type="text" value={this.state.newTodo} onChange={this.handleChange.bind(this)}/>
+          <button style={standardButton} onClick={this.addTodo.bind(this)}>Add New</button>
         </form>
         <ul style={customUl}>{TodoComponents}</ul>
       </div>

diff --git a/3-flux/src/js/stores/TodoStore.js b/3-flux/src/js/stores/TodoStore.js
@@ -27,7 +27,7 @@ class TodoStore extends EventEmitter {
       text,
       complete: false,
     });
-    // this.emit("change");
+    this.emit("change");
   }
 
   deleteTodo(id) {

diff --git a/3-flux/webpack.config.js b/3-flux/webpack.config.js
@@ -16,7 +16,8 @@ module.exports = {
           presets: ['react', 'es2015', 'stage-0'],
           plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'],
         }
-      }
+      },
+        { test: /\.css$/, loader: "style-loader!css-loader" }
     ]
   },
   output: {