From f8c627aee555c7e81f4ff57e30e6ffe17428b9be Mon Sep 17 00:00:00 2001
From: Manuel Friedli <manuel@fritteli.ch>
Date: Wed, 15 Mar 2017 01:13:09 +0100
Subject: [PATCH] Added simple styling to the error message and the
 corresponding select element.

---
 src/app/app.component.css  | 23 ++++++++++++++++++-----
 src/app/app.component.html |  2 +-
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/app/app.component.css b/src/app/app.component.css
index 6a42d9d..0555b36 100644
--- a/src/app/app.component.css
+++ b/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;
 }
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 22b15e3..4f399d0 100644
--- a/src/app/app.component.html
+++ b/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>