Using react-interactive we now have hover animations for our buttons.

client/app/components/MovieObject.jsx

@@ -11,6 +11,9 @@ import RequestButton from './buttons/request_button.jsx';
 
 import { fetchJSON } from './http.jsx';
 
+import Interactive from 'react-interactive';
+
+
 class MovieObject {
 	constructor(object) {
 		this.id = object.id;
@@ -42,6 +45,13 @@ class MovieObject {
 		notify.show(this.title + ' requested!', 'success', 3000);
 	}
 
+	invertButtonColors(event) {
+		const event_type = event.type;
+		if (event_type)
+			console.log('test')
+		console.log(event.type)
+	}
+
 	getElement(index) {
 		const element_key = index + this.id;
 
@@ -55,11 +65,26 @@ class MovieObject {
 
 		var foundInPlex;
 		if (this.matchedInPlex) {
-			foundInPlex = <button onClick={() => {this.requestExisting(this)}} 
+			foundInPlex = <Interactive 
-			style={movieStyle.requestButton}><span>Request Anyway</span></button>;
+				as='button'
+				hover={movieStyle.requestButton_hover}
+				focus={movieStyle.requestButton_hover}
+				onClick={() => {this.requestExisting(this)}} 
+				style={movieStyle.requestButton}>
+					
+				<span>Request Anyway</span>
+			</Interactive>;
 		} else {
-			foundInPlex = <button onClick={() => {this.requestMovie()}} 
+			foundInPlex = <Interactive 
-			style={movieStyle.requestButton}><span>&#x0002B; Request</span></button>;
+				as='button'
+				hover={movieStyle.requestButton_hover}
+				focus={movieStyle.requestButton_hover}
+				onClick={() => {this.requestMovie()}} 
+				onMouseOver={() => {this.invertButtonColors(event)}}
+				style={movieStyle.requestButton}>
+
+				<span>&#x0002B; Request</span>
+			</Interactive>;
 		}
 
 		if (this.type === 'movie') 
@@ -105,7 +130,14 @@ class MovieObject {
 					<div style={movieStyle.buttons}>
 						{foundInPlex}
 						<a href={themoviedbLink}>
-							<button style={movieStyle.tmdbButton}><span>Info</span></button>
+							<Interactive 
+								as='button'
+								hover={movieStyle.tmdbButton_hover}
+								focus={movieStyle.tmdbButton_hover}
+								style={movieStyle.tmdbButton}>
+
+								<span>Info</span>
+							</Interactive>
 						</a>
 					</div>
 				</div>

client/app/components/styles/movieObjectStyle.jsx

@@ -62,8 +62,9 @@ export default {
 	requestButton: {
 		color: '#e9a131',
 		marginRight: '10px',
-		background: 'white',
+		backgroundColor: 'white',
 		border: '#e9a131 2px solid',
+		borderColor: '#e9a131',
 		borderRadius: '4px',
 		textAlign: 'center',
 		padding: '10px',
@@ -74,10 +75,15 @@ export default {
 		cursor: 'pointer'
 	},
 
+	requestButton_hover: {
+		backgroundColor: '#e9a131', 
+		color: 'white',
+	},
+
 	tmdbButton: {
 		color: '#00d17c',
 		marginRight: '10px',
-		background: 'white',
+		backgroundColor: 'white',
 		border: '#00d17c 2px solid',
 		borderRadius: '4px',
 		textAlign: 'center',
@@ -89,6 +95,11 @@ export default {
 		cursor: 'pointer'
 	},
 
+	tmdbButton_hover: {
+		backgroundColor: '#00d17c', 
+		color: 'white',
+	},
+
 	row: {
 		width: '100%'
 	},