From 448a56470685fed035fcaf43237ba378be058929 Mon Sep 17 00:00:00 2001
From: mjrode <mike.rode@malauzai.com>
Date: Sat, 6 Apr 2019 16:46:20 -0500
Subject: [PATCH] Additional card styling

---
 client/src/components/Header.js             |  1 -
 client/src/components/Hero.js               |  2 +-
 client/src/components/MediaCard.js          |  6 +++---
 client/src/components/Modal.js              |  4 ++--
 client/src/components/plex/PlexTokenForm.js | 11 +++++++----
 client/src/reducers/index.js                |  2 +-
 client/src/reducers/plexReducer.js          |  2 +-
 7 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/client/src/components/Header.js b/client/src/components/Header.js
index 03ad4bb..d1b42cb 100644
--- a/client/src/components/Header.js
+++ b/client/src/components/Header.js
@@ -4,7 +4,6 @@ import {Link} from 'react-router-dom';
 
 class Header extends Component {
   renderContent() {
-    console.log('this.props.auth--', this.props.auth);
     switch (this.props.auth) {
       case null:
         return;
diff --git a/client/src/components/Hero.js b/client/src/components/Hero.js
index 8291fa6..b09aa18 100644
--- a/client/src/components/Hero.js
+++ b/client/src/components/Hero.js
@@ -19,7 +19,7 @@ class Hero extends Component {
     }
     return (
       <a href="/api/auth/google" className="waves-effect waves-light btn-large">
-        <i className="material-icons left">live_tv</i> Login with Google
+        <i className="material-icons left">group</i> Login with Google
       </a>
     );
   };
diff --git a/client/src/components/MediaCard.js b/client/src/components/MediaCard.js
index 48ac03f..00b084d 100644
--- a/client/src/components/MediaCard.js
+++ b/client/src/components/MediaCard.js
@@ -10,9 +10,6 @@ class MediaCard extends Component {
     const show = this.props.media;
     return (
       <div className="col s12 ">
-        <div className="header">
-          <Header text={show.title} />
-        </div>
         <div className="card medium horizontal">
           <div className="card-image">
             <img
@@ -23,6 +20,9 @@ class MediaCard extends Component {
           </div>
           <div className="card-stacked">
             <div className="card-content">
+              <div className="header">
+                <Header text={show.title} />
+              </div>
               <p>{show.summary}</p>
             </div>
             <div className="card-action">
diff --git a/client/src/components/Modal.js b/client/src/components/Modal.js
index 9ed0a4b..75e87e1 100644
--- a/client/src/components/Modal.js
+++ b/client/src/components/Modal.js
@@ -91,8 +91,8 @@ class CustomizedDialogDemo extends React.Component {
           <DialogContent>
             <Typography gutterBottom>
               We need to make a request to fetch a token which will allow us to
-              get a list of your most watched media. We will never store you
-              Plex password or make any changes to your plex server. This is an
+              get a list of your most watched media. We will never store your
+              Plex password or make any changes to your Plex server. This is an
               open source project and you can view the code&nbsp;
               <a href="https://github.com/mjrode/recommend"> here.</a>
             </Typography>
diff --git a/client/src/components/plex/PlexTokenForm.js b/client/src/components/plex/PlexTokenForm.js
index 21b7c3c..88f41a2 100644
--- a/client/src/components/plex/PlexTokenForm.js
+++ b/client/src/components/plex/PlexTokenForm.js
@@ -6,6 +6,7 @@ import {connect} from 'react-redux';
 import {withStyles} from '@material-ui/core/styles';
 import './PlexTokenForm.css';
 import Modal from '../Modal';
+import TextHeader from '../helpers/Header';
 import styles from '../css';
 
 class PlexTokenForm extends React.Component {
@@ -18,7 +19,6 @@ class PlexTokenForm extends React.Component {
 
   getPlexToken = async params => {
     const res = await axios.get('/api/plex/token', {params});
-    console.log('plex-tok---', res);
     window.location.reload();
   };
 
@@ -28,7 +28,7 @@ class PlexTokenForm extends React.Component {
       return (
         <div>
           <div>
-            <h2>You need to be logged in to do that.</h2>
+            <TextHeader text="You need to be logged in to do that" />
           </div>
         </div>
       );
@@ -39,10 +39,13 @@ class PlexTokenForm extends React.Component {
           <div className={classes.heroUnit}>
             <div className={classes.heroContentSmall}>
               <div className="section center-align">
-                <h3 className={classes.shrinkTopMargin}>Fetch Plex Token</h3>
-                <div className="center">
+                <div className="center right">
                   <Modal />
                 </div>
+                <h3 className={classes.shrinkTopMargin}>
+                  <TextHeader text="Fetch Plex Token" />
+                </h3>
+                <hr />
               </div>
               <div className="section center-align">
                 <div className="row">
diff --git a/client/src/reducers/index.js b/client/src/reducers/index.js
index 76ed8b1..08623be 100644
--- a/client/src/reducers/index.js
+++ b/client/src/reducers/index.js
@@ -4,5 +4,5 @@ import plexReducer from './plexReducer';
 
 export default combineReducers({
   auth: authReducer,
-  media: plexReducer,
+  plex: plexReducer,
 });
diff --git a/client/src/reducers/plexReducer.js b/client/src/reducers/plexReducer.js
index 92e5b42..1363706 100644
--- a/client/src/reducers/plexReducer.js
+++ b/client/src/reducers/plexReducer.js
@@ -6,7 +6,7 @@ export default function(state = '', action) {
     case FETCH_PLEX_TOKEN:
       return action.payload || false;
     case FETCH_MEDIA:
-      return action.payload;
+      return action.payload || false;
     default:
       return state;
   }