fix arrows

client/assets/styles/styles.css

@@ -405,6 +405,10 @@ header {
     justify-content: center;
 }
 
+.spawn-btn.menu-construct:hover {
+    border: 1px solid whitesmoke;
+}
+
 .spawn-btn input {
     flex: 1 1 100%;
     width: 100%;
@@ -430,7 +434,7 @@ header {
     flex: 1;
 }
 
-.menu-intances .menu-construct {
+.menu-instances .menu-construct {
     flex: 1 0 33%;
 }
 

client/src/components/login.jsx

@@ -30,7 +30,6 @@ class Login extends Component {
     }
 
     nameInput(event) {
-        console.log(event.target.value);
         this.setState({ name: event.target.value });
     }
 
@@ -61,12 +60,14 @@ class Login extends Component {
                         class="login-input"
                         type="email"
                         placeholder="username"
+                        value={this.state.name}
                         onInput={this.nameInput}
                     />
                     <input
                         class="login-input"
                         type="password"
                         placeholder="password"
+                        value={this.state.password}
                         onInput={this.passwordInput}
                     />
                     <button

client/src/components/svgs/triangle.jsx

@@ -5,9 +5,9 @@ module.exports = function triangle(colours) {
         return (
             <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
                  viewBox="0 0 200 200" >
-                <rect x="10" y="10" class={colours[0]} width="180" height="180"/>
+                <polygon class={colours[0]} points="10,190    100,10   190,190"/>
-                <rect x="40" y="40" class={colours[0]} width="120" height="120"/>
+                <polygon class={colours[0]} points="40,170    100,50   160,170"/>
-                <rect x="70" y="70" class={colours[0]} width="60" height="60"/>
+                <polygon class={colours[0]} points="70,150    100,90   130,150"/>
             </svg>
         );
     }