Add required level

src/App.scss

@@ -26,6 +26,7 @@ a {
 
 .yellow { color: $color-yellow; }
 .green { color: $quality-2; }
+.subtle { color: $quality-0; }
 
 .tight {
   margin-bottom: 0;
@@ -35,6 +36,8 @@ a {
   }
 }
 
+
+
 .App {
   min-height: 100vh;
 }
@@ -46,7 +49,7 @@ main {
 }
 
 .container {
-  max-width: 900px;
+  max-width: 1000px;
   margin: 0 auto;
   padding: 0 1em;
 }

src/components/Calculator.scss

@@ -1,7 +1,14 @@
 .calculator {
   &__points {
+    padding: 1em;
     color: white;
-    text-align: center;
+    text-align: right;
+    border-radius: 5px;
+    background: #222;
+
+    span {
+      margin-left: 2em;
+    }
   }
 }
 

src/components/Calculator.tsx

@@ -55,7 +55,10 @@ export class Calculator extends React.PureComponent<Props> {
         </div>
 
         <div className="calculator__points">
-          Points: {availablePoints}
+          {availablePoints < 51 && 
+            <span className="subtle">Required level: {60 - availablePoints}</span>
+          }
+          <span>Talent points: {availablePoints}</span>
         </div>
 
         <h4>Quick links</h4>

src/components/TalentTree.scss

@@ -3,6 +3,7 @@
 .trees {
   display: flex;
   justify-content: center;
+  margin-bottom: 1em;
 }
 
 .tree {
@@ -10,7 +11,6 @@
   min-width: 300px;  
   color: white;
   margin-right: 1em;
-  background-color: #111;
 
   .talent {
     position: absolute;
@@ -48,14 +48,23 @@
     top: 1em;
     right: .5em;
     cursor: pointer;
-    color: lighten(red, 20%)
+    color: lighten(red, 20%);
+    animation: fadeIn .2s ease-in-out;
+    transform: scale(1);
+
+    &:hover {
+      color: lighten(red, 30%);
+      transform: scale(1.1);
+    }
   }
 
   &__body {
     position: relative;
     height: 520px;
     border: 1px solid black;
+    background-color: #222;
     background-size: cover;
     background-position: center;
+    border-radius: 5px;
   }
 }

src/components/TalentTree.tsx

@@ -7,6 +7,7 @@ import { talentsBySpec, specNames, talentsById } from '../data/talents'
 import { Arrow } from './Arrow'
 import { resetSpec } from '../store/calculator/actions'
 import { connect } from 'react-redux';
+import { Controller, Tooltip, Trigger } from './Tooltip'
 
 interface Props {
   specId: number
@@ -38,7 +39,12 @@ export const TalentTree: React.FC<Props> = ({ specId, knownTalents, availablePoi
       <div className="tree__header">
         <h3>{specNames[specId]} ({pointsInSpec})</h3>
         {pointsInSpec > 0 && 
-          <div className="tree__reset" onClick={handleResetSpec}>x</div>
+          <Controller>
+            <Trigger>
+              <div className="tree__reset" onClick={handleResetSpec}>x</div>
+            </Trigger>
+            <Tooltip>Reset spec</Tooltip>
+          </Controller>
         }
       </div>