Now with new styling, still need to do cleanup, but added a big bulk of the grutt.

client/app/components/MovieObject.jsx

@@ -18,48 +18,124 @@ class MovieObject {
 	}
 
 	requestMovie(id) {
-		fetch('http://localhost:31459/api/v1/plex/request/' + id, {
+		fetch('https://apollo.kevinmidboe.com/api/v1/plex/request/' + id, {
 		  method: 'POST'
 		});
 	}
 
 	getElement() {
-		var movie_wrapper = {
+		// TODO move this to separate files.
-			display: 'flex',
+		var resultItem = {
-			alignContent: 'center',
+			maxWidth: '95%',
-			width: '30%',
+			margin: '0 auto',
-			backgroundColor: '#ffffff',
+			minHeight: '230px'
-			height: '231px',
-			margin: '20px',
-			boxShadow: '0px 0px 5px 1px rgba(0,0,0,0.15)'
 		}
 		var movie_content = {
 			marginLeft: '15px'
 		}
-		var movie_header = {
+		var resultTitle = {
-			fontSize: '1.6' + 'em'
+			color: 'black',
+			fontSize: '2em',
 		}
 
+		var resultPoster = {
+			float: 'left',
+			zIndex: '3',
+			position: 'relative',
+			marginRight: '30px'
+		}
 
-		var posterPath = 'https://image.tmdb.org/t/p/w154' + this.poster;
+		var resultPosterImg = {
-		var buttonState;
+			border: '2px none',
-		if (this.matchedInPlex) {
+		    borderRadius: '2px',
-			buttonState = <button onClick={() => {this.requestExisting(this)}}>Request anyway</button>;
+		    width: '150px'
+		}
+
+		var buttons = {
+			paddingTop: '20px'
+		}
+
+		var requestButton = {
+			color: '#e9a131',
+			marginRight: '10px',
+			background: 'white',
+			border: '#e9a131 2px solid',
+			borderRadius: '4px',
+			textAlign: 'center',
+			padding: '10px',
+			width: '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',
+			width: '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'
 		} else {
-			buttonState = <button onClick={() => {this.requestMovie(this.id)}}>Request</button>;
+			var posterPath = 'https://image.tmdb.org/t/p/w154' + this.poster;
+		}
+		var foundInPlex;
+		if (this.matchedInPlex) {
+			foundInPlex = <button onClick={() => {this.requestExisting(this)}} 
+			style={requestButton}><span>Request Anyway</span></button>;
+		} else {
+			foundInPlex = <button onClick={() => {this.requestMovie(this.id)}} 
+			style={requestButton}><span>&#x0002B; Request</span></button>;
 		}
 
 		return (
-		<div key={this.id} style={movie_wrapper}>
+		<div>
-			<img src={posterPath}></img>
+			<div key={this.id} style={resultItem}>
-			<div style={movie_content}>
+				<div style={resultPoster}>
-				<span style={movie_header}>{this.title} ({this.year})</span>
+					<img style={resultPosterImg} id='poster' src={posterPath}></img>
-				<br></br>
+				</div>
-				{buttonState}
+				<div>
+					<span style={resultTitle}>{this.title} ({this.year})</span>
 					<br></br>
 						<span>{this.overview}</span>
+					<br></br>
+
+					<span className='imdbLogo'>
+					</span>
+
+					<div style={buttons}>
+						{foundInPlex}
+						<button style={tmdbButton}><span>Info</span></button>
+					</div>
+				</div>
+			</div>
+			<div style={row}>
+				<div style={itemDivider}></div>
 			</div>
 		</div>)
+
 	}
 }