.gitignore

@@ -1,5 +1,4 @@
 __pycache__
-nohup.out
 shows.db
 .DS_Store
 env_variables.py
@@ -11,3 +10,4 @@ webpage/js/env_variables.js
 client/dist
 src/webserver/access.log
 conf/development.json
+yarn-error.log

client/app/app.scss

@@ -0,0 +1,41 @@
+@font-face {
+    font-family: "din";
+    src: url('/app/DIN-Regular-webfont.woff')
+}
+
+html {
+	font-family: 'din', 'Open Sans', sans-serif;
+	display: inline-block;
+	color:red;
+}
+
+#requestMovieList {
+	display: flex;
+
+	flex-wrap: wrap;
+	justify-content: center;
+}
+
+.movie_wrapper {
+	color:red;
+	display: flex;
+	align-content: center;
+
+	width: 30%;
+	background-color: #ffffff;
+	height: 231px;
+
+	margin: 20px;
+
+	-webkit-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.15);
+    -moz-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.15);
+	box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.15);
+}
+
+.movie_content {
+	margin-left: 15px;
+}
+
+.movie_header {
+	font-size: 1.6em;
+}

client/app/components/App.jsx

@@ -8,11 +8,23 @@ import FetchData from './FetchData.js';
 import ListStrays from './ListStrays.jsx'
 import SearchRequest from './SearchRequest.jsx';
 
+import WebFont from 'webfontloader';
+
+WebFont.load({
+  google: {
+    families: ['Titillium Web:300,400,700', 'sans-serif']
+  }
+});
+	var background = {
+      backgroundColor: '#fafafa'
+    }
+
 export default class App extends React.Component {
+
 	render() {
 		return (
+			<div style={background}>
 				<div>
-				<div style={{textAlign: 'center'}}>
 					<h1>Welcome to Seasoned</h1>
 				</div>
 					<ListStrays />

client/app/components/MovieObject.jsx

@@ -1,5 +1,7 @@
 import React from 'react';
 
+require('../app.scss');
+
 class MovieObject {
 	constructor(object) {
 		this.id = object.id;
@@ -12,36 +14,52 @@ class MovieObject {
 	}
 
 	requestExisting(movie) {
-		console.log('Exists', movie)
+		console.log('Exists', movie);
 	}
 
 	requestMovie(id) {
 		fetch('http://localhost:31459/api/v1/plex/request/' + id, {
 		  method: 'POST'
-		})
+		});
 	}
 
 	getElement() {
-		var returnList = []
+		var movie_wrapper = {
-
+			display: 'flex',
-		returnList.push(<p>{this.title} ({this.year})</p>)
+			alignContent: 'center',
-		
+			width: '30%',
-		var posterPath, buttonState;
+			backgroundColor: '#ffffff',
-		if (this.poster != undefined) {
+			height: '231px',
-			posterPath = 'https://image.tmdb.org/t/p/w150' + this.poster;
+			margin: '20px',
+			boxShadow: '0px 0px 5px 1px rgba(0,0,0,0.15)'
+		}
+		var movie_content = {
+			marginLeft: '15px'
+		}
+		var movie_header = {
+			fontSize: '1.6' + 'em'
 		}
-		returnList.push(<img src={posterPath}></img>);
 
+
+		var posterPath = 'https://image.tmdb.org/t/p/w154' + this.poster;
+		var buttonState;
 		if (this.matchedInPlex) {
-			returnList.push(<button onClick={() => this.requestExisting(this)}>Request anyway</button>)
+			buttonState = <button onClick={() => {this.requestExisting(this)}}>Request anyway</button>;
 		} else {
-			returnList.push(<button onClick={() => this.requestMovie(this.id)}>Request</button>)
+			buttonState = <button onClick={() => {this.requestMovie(this.id)}}>Request</button>;
 		}
 
-		returnList.push(<span>{this.overview}</span>);
+		return (
-
+		<div key={this.id} style={movie_wrapper}>
-		returnList.push(<br></br>);
+			<img src={posterPath}></img>
-		return returnList;
+			<div style={movie_content}>
+				<span style={movie_header}>{this.title} ({this.year})</span>
+				<br></br>
+				{buttonState}
+				<br></br>
+				<span>{this.overview}</span>
+			</div>
+		</div>)
 	}
 }
 

client/app/components/SearchRequest.jsx

@@ -82,8 +82,20 @@ class SearchRequest extends React.Component {
 
 
   render(){
+
+    var body = {
+      fontFamily: "'Roboto', 'Open Sans', sans-serif",
+      display: 'inline-block'
+
+    }
+    var requestMovieList = {
+      display: 'flex',
+      flexWrap: 'wrap',
+      justifyContent: 'center'
+    }
+
     return(
-      <div>
+     <div style={body}>
         <input
           type="text"
           onKeyPress={(event) => this._handleQueryKeyPress(event)}
@@ -94,9 +106,9 @@ class SearchRequest extends React.Component {
           <br></br>
 
           <br></br>
-          <span id='requestMovieList' ref='requestMovieList'>
+          <div id='requestMovieList' ref='requestMovieList' style={requestMovieList}>
             {this.state.responseMovieList}        
-          </span>
+          </div>
       </div>
     )
   }

client/package.json

@@ -9,11 +9,13 @@
     "start": "webpack-dev-server"
   },
   "dependencies": {
+    "css-loader": "^0.28.4",
     "html-webpack-plugin": "^2.28.0",
     "path": "^0.12.7",
     "react": "^15.5.4",
     "react-dom": "^15.5.4",
-    "webpack": "^2.6.1",
+    "webfontloader": "^1.6.28",
+    "webpack": "^3.3.0",
     "webpack-dev-server": "^2.4.5"
   },
   "devDependencies": {

client/webpack.config.js

@@ -26,8 +26,16 @@ module.exports = {
 	module: {
 		loaders: [
 				{ test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
-				{ test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ }
+				{ test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ },
+				{ test: /\.scss$/, loader: 'css-loader', exclude: /node_modules/ },
+				{ test: /\.css$/, loader: 'style-loader!css!scss', exclude: /node_modules/ }
+				// { test: /\.css$/, loader: 'style-loader!css-loader!', exclude: /node_modules/ },
+					// query: {
+		   //        		presets: ['es2015']
+		   //      	}
+		        
+				// { test: /\.css-loader$/, loader: 'style-loader!css-loader', exclude: /node_modules/ }
     	]
   	},
   	plugins: [HtmlWebpackPluginConfig]
-}
+};

conf/development.json

@@ -1,11 +0,0 @@
-{
-	"database": {
-		"host": "shows.db"
-	},
-	"webserver": {
-		"port": 31459
-	},
-	"tmdb": {
-		"apiKey": "9fa154f5355c37a1b9b57ac06e7d6712"
-	}
-}

package.json

@@ -8,13 +8,13 @@
         "body-parser": "~1.0.1",
         "cross-env": "^3.1.3",
         "express": "~4.0.0",
-        "mongoose": "~3.6.13",
+        "mongoose": "^3.6.13",
         "moviedb": "^0.2.7",
         "node-cache": "^4.1.1",
         "nodemailer": "^4.0.1",
         "python-shell": "^0.4.0",
         "request": "^2.81.0",
         "request-promise": "^4.2",
-        "sqlite": "^2.5.0"
+        "sqlite3": "^2.5.0"
     }
 }

src/database/sqliteDatabase.js

@@ -1,19 +1,19 @@
 const fs = require('fs');
 const path = require('path');
-const sqlite = require('sqlite');
+const sqlite3 = require('sqlite3');
 
 class SqliteDatabase {
 
 	constructor(host) {
 		this.host = host;
-		this.connection = sqlite;
+		this.connection = sqlite3;
 
 		// this.schemaDirectory = path.join(__dirname, 'schemas');
 	}
 
 	connect() {
 		return Promise.resolve()
-		.then(() => sqlite.open(this.host))
+		.then(() => new sqlite3.Database(this.host))
 	}
 
 	all(sql, parameters) {

src/plex/mailTemplate.js

@@ -18,7 +18,7 @@ class mailTemplate {
 
 		return `
 			<h1>${info.name} ${info.year}</h1>
-			<img src=${info.poster}>
+			<img src="${info.poster}">
 		`
 	}
 }