Add background to Home

src/App.scss

@@ -47,7 +47,7 @@ main {
 }
 
 .container {
-  max-width: 1000px;
+  max-width: 960px;
   margin: 0 auto;
   padding: 0 1em;
 }

src/components/Calculator.tsx

@@ -4,7 +4,6 @@ import { Map } from 'immutable'
 import TalentTree from './TalentTree'
 import { calcAvailablePoints } from '../lib/tree'
 import { classById } from '../data/classes'
-import { Link } from 'react-router-dom';
 import { connect } from 'react-redux';
 import { addPoint, removePoint } from '../store/calculator/actions'
 import { Points } from '../store/calculator/types'

src/containers/Home.scss

@@ -1,4 +1,19 @@
 .home {
+  min-height: 85vh;
+
+  &:before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-image: url('../images/home-bg.jpg');
+    background-size: cover;
+    opacity: .05;
+    z-index: -1;
+  }
+
   &__class-picker {
     margin: 2em 0;
     transform: translateY(0);

src/containers/Home.tsx

@@ -41,7 +41,7 @@ export class Home extends React.PureComponent<Props> {
     if (prevParams.selectedClass !== params.selectedClass) {
       // Class changed in route
       this.loadFromUrlParams()
-    } else {
+    } else if (this.props.classId) {
       // Changes within same class
       if (prevParams.pointString !== params.pointString) {
         // Same class but point string changed
@@ -49,11 +49,11 @@ export class Home extends React.PureComponent<Props> {
         if (!this.props.points.equals(decoded)) {
           this.props.setPoints(decoded)
         }
-      } else if (prevProps.points !== this.props.points && this.props.classId) {
+      } else if (prevProps.points !== this.props.points) {
         // Points map changed, update the URL
         this.updateURL(this.props.points)
       }
-    } 
+    }
   }
 
   componentWillUnmount() {
@@ -95,23 +95,25 @@ export class Home extends React.PureComponent<Props> {
     })
 
     return (
-      <div className="container home">
+      <div className="home">
-        <div className={classPickerCn}>
+        <div className="container">
-          {!selectedClass &&
+          <div className={classPickerCn}>
-            <h3 className="home__class-picker-title">Choose your class</h3>
+            {!selectedClass &&
+              <h3 className="home__class-picker-title">Choose your class</h3>
+            }
+            <ClassPicker
+              center 
+              selected={selectedClass} 
+            />
+          </div>
+    
+          {currentClass && 
+            <Calculator 
+              classId={classId}
+              points={this.props.points}
+            />
           }
-          <ClassPicker
-            center 
-            selected={selectedClass} 
-          />
         </div>
-  
-        {currentClass && 
-          <Calculator 
-            classId={classId}
-            points={this.props.points}
-          />
-        }
       </div>
     )
   }