From 782c2f6f323ba3dd871c34cb2542c1b59eb6b0cd Mon Sep 17 00:00:00 2001
From: Melvin Valster <melvin.valster@gmail.com>
Date: Mon, 29 Jul 2019 22:40:21 +0200
Subject: [PATCH] Spiff up landing page a little

---
 src/App.scss                    |  2 --
 src/components/Calculator.scss  |  4 ----
 src/components/ClassPicker.scss |  4 ++++
 src/containers/Home.scss        | 16 ++++++++++++++++
 src/containers/Home.tsx         | 22 ++++++++++++++++------
 5 files changed, 36 insertions(+), 12 deletions(-)
 create mode 100644 src/containers/Home.scss

diff --git a/src/App.scss b/src/App.scss
index 766b13a..c6dfb8f 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -36,8 +36,6 @@ a {
   }
 }
 
-
-
 .App {
   min-height: 100vh;
 }
diff --git a/src/components/Calculator.scss b/src/components/Calculator.scss
index 3725933..9a772f7 100644
--- a/src/components/Calculator.scss
+++ b/src/components/Calculator.scss
@@ -14,7 +14,3 @@
     }
   }
 }
-
-.index__class-picker {
-  margin: 2em 0;
-}
\ No newline at end of file
diff --git a/src/components/ClassPicker.scss b/src/components/ClassPicker.scss
index 89c7ba4..d128bc3 100644
--- a/src/components/ClassPicker.scss
+++ b/src/components/ClassPicker.scss
@@ -16,6 +16,10 @@
       opacity: 1;
     }
 
+    &:last-child {
+      margin-right: 0;
+    }
+
     &--active {
       opacity: 1;
     }
diff --git a/src/containers/Home.scss b/src/containers/Home.scss
new file mode 100644
index 0000000..d81d0c8
--- /dev/null
+++ b/src/containers/Home.scss
@@ -0,0 +1,16 @@
+.home {
+  &__class-picker {
+    margin: 2em 0;
+    transform: translateY(0);
+    
+    &--highlight {
+      transition: all .4s ease-out;
+      transform: translateY(35vh);
+    }
+  }
+
+  &__class-picker-title {
+    text-align: center;
+    margin-bottom: 2em;
+  }
+}
\ No newline at end of file
diff --git a/src/containers/Home.tsx b/src/containers/Home.tsx
index 77de22d..a6a444c 100644
--- a/src/containers/Home.tsx
+++ b/src/containers/Home.tsx
@@ -1,3 +1,4 @@
+import './Home.scss'
 import React from 'react'
 import { connect } from 'react-redux'
 import { match } from 'react-router-dom'
@@ -9,6 +10,7 @@ import { AppState } from '../store'
 import { setClass, setPoints } from '../store/calculator/actions'
 import { Points } from '../store/calculator/types'
 import { decodeKnownTalents, encodeKnownTalents } from '../lib/tree'
+import classNames from 'classnames'
 
 interface Props extends RouteComponentProps {
   match: match<{ 
@@ -88,13 +90,21 @@ export class Home extends React.PureComponent<Props> {
       return null
     }
 
+    const classPickerCn = classNames('home__class-picker', { 
+      'home__class-picker--highlight': !selectedClass
+    })
+
     return (
-      <div className="container index">
-        <ClassPicker 
-          className="index__class-picker"
-          center 
-          selected={selectedClass} 
-        />
+      <div className="container home">
+        <div className={classPickerCn}>
+          {!selectedClass &&
+            <h3 className="home__class-picker-title">Choose your class</h3>
+          }
+          <ClassPicker
+            center 
+            selected={selectedClass} 
+          />
+        </div>
   
         {currentClass && 
           <Calculator