Add css loaders and replace inline css

Author: ¨Alexandra

package.json

@@ -37,7 +37,13 @@
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-2": "^6.24.1",
+    "css-loader": "^0.28.7",
+    "file-loader": "^1.1.5",
+    "less": "^3.0.0-alpha.3",
+    "less-loader": "^4.0.5",
+    "style-loader": "^0.19.0",
     "webpack": "^3.6.0",
+    "webpack-combine-loaders": "^2.0.3",
     "webpack-dev-server": "^2.9.1"
   }
 }

src/app/components/List.js

@@ -1,5 +1,6 @@
 import React from "react";
 import PropTypes from 'prop-types'; // ES6
+import "../styles/components/List.less"
 
 export class List extends React.Component {
 
@@ -23,7 +24,7 @@ export class List extends React.Component {
 								<tr key={i}>
 									<td>
 										{link.shortcode}
-										<p style={{color: 'gray'}}>
+										<p className="url">
 											url: {link.url}
 										</p>
 									</td>

src/app/components/ShortenLink.js

@@ -1,12 +1,8 @@
 import React from "react";
 import PropTypes from 'prop-types'
+import "../styles/components/shortenLink.less"
 
 export class ShortenLink extends React.Component {
-
-	static propTypes = {
-        shortenUrl: PropTypes.func.isRequired,
-    };
-
     state = {
         url: ''
     };
@@ -23,7 +19,7 @@ export class ShortenLink extends React.Component {
 	render() {
 
         return (
-			<div style={{marginBottom: '8%'}}>
+			<div>
 				<form name="shortenUrl" onSubmit={this.handleSubmit} className="form-inline">
 					<div className="form-group">
 						<input type="text"
@@ -32,7 +28,7 @@ export class ShortenLink extends React.Component {
 							   onChange={this.handleChange}
 							   value={this.state.url}
 						/>
-						<button style={{marginLeft: '20px', backgroundColor: '#EB4A42', color:'#FFFFFF'}} className="btn btn-lg" type="submit">
+						<button className="btn btn-lg disabled" type="submit">
 							Shorten url
 						</button>
 					</div>
@@ -41,3 +37,7 @@ export class ShortenLink extends React.Component {
 			)
 	}
 }
+
+ShortenLink.propTypes = {
+    shortenUrl: PropTypes.func.isRequired
+};

src/app/containers/App.js

@@ -7,18 +7,19 @@ import { submitUrl, getShortCodeStats } from "../actions/shortenedLinkActions";
 
 import { ShortenLink } from "../components/ShortenLink";
 import { List } from "../components/List";
+import app from "../styles/containers/App.less"
 
 
 class App extends React.Component {
 
 	render () {
 
 		return (
-			<div style={{color: '#555555'}}>
+			<div style={app}>
 			    <div className="container">
 	                <div className="row">
 	                    <div className="col-xs-10 col-xs-offset-1">
-							<h1 style={{color: '#EB4A42', textDecoration:'underline'}}>Shooooort</h1>
+							<h1>Shooooort</h1>
 							<p> This link shortner with a long name </p>
 						</div>
 					</div>

src/app/styles/components/List.less

@@ -0,0 +1,4 @@
+.url {
+  color: #888888;
+}
+

src/app/styles/components/shortenLink.less

@@ -0,0 +1,16 @@
+
+.btn {
+  margin-left: 20px;
+  background-color: #EB4A42;
+  color: #FFFFFF;
+  &:hover {
+    background-color: lighten(#EB4A42, 20%);
+  }
+  &.active {
+    background-color: #EB4A42;
+  }
+  &.disabled {
+    background-color: #BFBFBF;
+    color: #E0E0E0;
+  }
+}

webpack.config.js

@@ -1,4 +1,6 @@
 var path = require("path");
+var combineLoaders = require('webpack-combine-loaders');
+
 
 var DIST_DIR = path.resolve(__dirname, "dist");
 var SRC_DIR = path.resolve(__dirname, "src");
@@ -20,7 +22,20 @@ var config = {
 				query: {
 					presets: ["react", "es2015", "stage-2"]
 				}
-			}
+			}, {
+                test: /\.less$/,
+                use: [{
+                    loader: "style-loader"
+                }, {
+                    loader: "css-loader"
+                }, {
+                    loader: "less-loader", options: {
+                        paths: [
+                            path.resolve(SRC_DIR, "node_modules")
+                        ]
+                    }
+                }]
+                }
 			]
 	}
 };