Further neatening

Author: 1317421

src/components/Card.js

@@ -34,7 +34,7 @@ export default class Card extends Component {
         onClick = {clickFunction}
         onContextMenu = {this.props.discard}
         className = {"card " + this.state.player + "-card noselect animated flipInX"}>
-        <div className="unique">{this.state.name}</div>
+        <div className="card-name">{this.state.name}</div>
         <div className="center">
           <div className="stat attack">{this.state.attack}</div>
           <div className="stat health">{this.state.health}</div>

src/components/Dialog.js

@@ -3,9 +3,7 @@ import '../css/Dialog.css';
 
 function generateName(){
   let choices_array = ['mage','wizard','knight','strange man','strange woman','mysterious old woman','mysterious old man'];
-
   let choice = Math.floor(Math.random()*choices_array.length);
-
   return choices_array[choice];
 }
 
@@ -27,9 +25,12 @@ export default class Card extends Component {
     return (
       <div onClick={this.props.restart} className="dialog animated slideInLeft">
         <div className="descriptor">A {this.state.character} walks in and croaks </div>
+
         I need a potion with at least <span className="dialog-stat text-attack">{this.state.attack}</span> as well as 
         <span className="dialog-stat text-health"> {this.state.cost}</span> but please, dont exceed <span className="dialog-stat text-agility">{this.state.cost}</span>.
+        
         <br/><br/>
+
         Times are tough for a {this.state.character} like me.
       </div>
     );

src/components/Engine.js

@@ -334,7 +334,7 @@ export default class Arena extends Component {
         </div>
 
         <div className="hand-container items center">
-          <div className="instruction-header">Click on a card to add ingredients to your potion</div>
+          <div className="instruction-header">Click on an ingredient card to add it to your potion</div>
           <br/>
           <div className="hand white-hand item animated flipInX">
             {this.state.whiteCards}

src/css/Card.css

@@ -34,12 +34,10 @@
   border: 5px solid #1B3F66;
 }
 
-.unique {
+.card-name {
   font-size: 15px;
   font-weight: 'bold';
   color: '#222';
-  justify-content: 'space-around';
-  top: 5;
   margin-top: 10px;
   margin-bottom: 40px;
   height: 25px;

src/css/Engine.css

@@ -156,7 +156,7 @@ body {
 	background-color: #222;
 	margin: 15px;
 	padding: 5px;
-	padding-top: 25px;
+	padding-top: 15px;
 	max-width: 200px;
 	float: right;
 	border-radius: 5px;