Moved all styling to a separate file in ./style

client/app/components/MovieObject.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 // StyleComponents
+import movieStyle from './styles/movieObjectStyle.jsx';
 
 class MovieObject {
 	constructor(object) {
@@ -26,77 +27,6 @@ class MovieObject {
 	}
 
 	getElement() {
-		// TODO move this to separate files.
-		var resultItem = {
-			maxWidth: '95%',
-			margin: '0 auto',
-			minHeight: '230px'
-		}
-		var movie_content = {
-			marginLeft: '15px'
-		}
-		var resultTitle = {
-			color: 'black',
-			fontSize: '2em',
-		}
-
-		var resultPoster = {
-			float: 'left',
-			zIndex: '3',
-			position: 'relative',
-			marginRight: '30px'
-		}
-
-		var resultPosterImg = {
-			border: '2px none',
-		    borderRadius: '2px',
-		    width: '150px'
-		}
-
-		var buttons = {
-			paddingTop: '20px'
-		}
-
-		var requestButton = {
-			color: '#e9a131',
-			marginRight: '10px',
-			background: 'white',
-			border: '#e9a131 2px solid',
-			borderRadius: '4px',
-			textAlign: 'center',
-			padding: '10px',
-			minWidth: '100px',
-			float: 'left',
-			fontSize: '13px',
-			fontWeight: '800',
-			cursor: 'pointer'
-		}
-
-		var tmdbButton = {
-			color: '#00d17c',
-			marginRight: '10px',
-			background: 'white',
-			border: '#00d17c 2px solid',
-			borderRadius: '4px',
-			textAlign: 'center',
-			padding: '10px',
-			minWidth: '100px',
-			float: 'left',
-			fontSize: '13px',
-			fontWeight: '800',
-			cursor: 'pointer'
-		}
-
-		var row = {
-			width: '100%'
-		}
-
-		var itemDivider = {
-			width: '90%',
-			borderBottom: '1px solid grey',
-			margin: '2rem auto'
-		}
-
 		// TODO set the poster image async by updating the dom after this is returned
 		if (this.poster == null || this.poster == undefined) {
 			var posterPath = 'https://openclipart.org/image/2400px/svg_to_png/211479/Simple-Image-Not-Found-Icon.png'
@@ -106,10 +36,10 @@ class MovieObject {
 		var foundInPlex;
 		if (this.matchedInPlex) {
 			foundInPlex = <button onClick={() => {this.requestExisting(this)}} 
-			style={requestButton}><span>Request Anyway</span></button>;
+			style={movieStyle.requestButton}><span>Request Anyway</span></button>;
 		} else {
 			foundInPlex = <button onClick={() => {this.requestMovie()}} 
-			style={requestButton}><span>&#x0002B; Request</span></button>;
+			style={movieStyle.requestButton}><span>&#x0002B; Request</span></button>;
 		}
 
 		var themoviedbLink = 'https://www.themoviedb.org/movie/' + this.id
@@ -117,12 +47,12 @@ class MovieObject {
 
 		return (
 		<div>
-			<div style={resultItem} key={this.id}>
-				<div style={resultPoster}>
-					<img style={resultPosterImg} id='poster' src={posterPath}></img>
+			<div style={movieStyle.resultItem} key={this.id}>
+				<div style={movieStyle.resultPoster}>
+					<img style={movieStyle.resultPosterImg} id='poster' src={posterPath}></img>
 				</div>
 				<div>
-					<span style={resultTitle}>{this.title} ({this.year})</span>
+					<span style={movieStyle.resultTitle}>{this.title} ({this.year})</span>
 					<br></br>
 						<span>{this.summary}</span>
 					<br></br>
@@ -130,14 +60,16 @@ class MovieObject {
 					<span className='imdbLogo'>
 					</span>
 
-					<div style={buttons}>
+					<div style={movieStyle.buttons}>
 						{foundInPlex}
-						<a href={themoviedbLink}><button style={tmdbButton}><span>Info</span></button></a>
+						<a href={themoviedbLink}>
+							<button style={movieStyle.tmdbButton}><span>Info</span></button>
+						</a>
 					</div>
 				</div>
 			</div>
-			<div style={row}>
-				<div style={itemDivider}></div>
+			<div style={movieStyle.row}>
+				<div style={movieStyle.itemDivider}></div>
 			</div>
 		</div>)