Merge branch '5-style-the-error-message' into 'develop'

Added simple styling to the error message and the corresponding select element.

Closes #5

See merge request !15

src/app/app.component.css

@@ -11,7 +11,7 @@
 .arrow_box {
     position: relative;
     background: #fff;
-    border: 1px solid #ddd;
+    border: 1px solid #aaa;
 }
 
 .arrow_box:focus {
@@ -41,8 +41,8 @@
 }
 
 .arrow_box:before {
-    border-color: rgba(221, 221, 221, 0);
-    border-top-color: #ddd;
+    border-color: rgba(170, 170, 170, 0);
+    border-top-color: #aaa;
     border-width: calc(1em + 1px);
     margin-left: calc(-1em - 1px);
 }
@@ -100,6 +100,19 @@
     /*    font-family: "ABeeZee", sans-serif;*/
 }
 
-.errormessage {
-    /*    font-family: "ABeeZee", sans-serif;*/
+.selectwrapper.error > .arrow_box {
+    border-color: red;
+}
+
+.selectwrapper.error > .arrow_box:before {
+    border-top-color: red;
+}
+
+.selectwrapper.error select {
+    color: red;
+}
+
+.errormessage {
+    color: red;
+    text-align: center;
 }

src/app/app.component.html

@@ -3,7 +3,7 @@
         <textarea class="textinput" (keyup)="update(step)" placeholder="Please enter your input ..."
                   [(ngModel)]="step.content">{{step.content}}</textarea>
     </div>
-    <div class="selectwrapper">
+    <div [ngClass]="{selectwrapper: true, error: step.error}">
         <div class="arrow_box">
             <select class="select" (change)="convert(step, $event)">
                 <option id="undefined">Select conversion ...</option>