From c8927557595f19e724ed7f0ee1b6bbbe9545ed16 Mon Sep 17 00:00:00 2001
From: KevinMidboe <kevin.midboe@gmail.com>
Date: Sat, 5 Aug 2017 17:05:15 +0200
Subject: [PATCH] Created function for creating a HTML object that is returned
 to the caller.

---
 client/app/components/MovieObject.jsx | 25 +++++++++++++++++++++----
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/client/app/components/MovieObject.jsx b/client/app/components/MovieObject.jsx
index e12f725..8f44073 100644
--- a/client/app/components/MovieObject.jsx
+++ b/client/app/components/MovieObject.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import '../app.css';
+require('../app.scss');
 
 class MovieObject {
 	constructor(object) {
@@ -24,6 +24,23 @@ class MovieObject {
 	}
 
 	getElement() {
+		var movie_wrapper = {
+			display: 'flex',
+			alignContent: 'center',
+			width: '30%',
+			backgroundColor: '#ffffff',
+			height: '231px',
+			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'
+		}
+
+
 		var posterPath = 'https://image.tmdb.org/t/p/w154' + this.poster;
 		var buttonState;
 		if (this.matchedInPlex) {
@@ -33,10 +50,10 @@ class MovieObject {
 		}
 
 		return (
-		<div key={this.id} className='movie_wrapper'>
+		<div key={this.id} style={movie_wrapper}>
 			<img src={posterPath}></img>
-			<div className='movie_content'>
-				<span className='movie_header'>{this.title} ({this.year})</span>
+			<div style={movie_content}>
+				<span style={movie_header}>{this.title} ({this.year})</span>
 				<br></br>
 				{buttonState}
 				<br></br>