get rid of the old design; use a sleek, simple, clean one.

Well ... Perhaps this is subject to change, too.

app/app.component.css

@@ -0,0 +1,127 @@
+@font-face {
+    font-family: "ABeeZee";
+    font-stretch: normal;
+    font-style: normal;
+    font-variant: normal;
+    font-weight: normal;
+    src: local("ABeeZee Regular"),
+    local("ABeeZee-Regular"),
+    local("ABeeZee"),
+    url("../abeezee-regular.woff") format("woff");
+}
+
+@font-face {
+    font-family: "Free Monospaced";
+    src: url("../freemono.eot?") format("eot"),
+    url("../freemono.woff") format("woff"),
+    url("../freemono.ttf") format("truetype"),
+    url("../freemono.svg#FreeMono") format("svg");
+    font-weight: normal;
+    font-style: normal;
+}
+
+.inputwrapper {
+    font-family: "ABeeZee", sans-serif;
+    margin: 0 1em 1em 1em;
+}
+
+.textwrapper {
+    margin: 0 0 1em 0;
+    padding: 0 1em 0 0;
+}
+
+.arrow_box {
+    position: relative;
+    background: #fff;
+    border: 1px solid #ddd;
+}
+
+.arrow_box:focus {
+    border-color: #888;
+}
+
+.arrow_box:hover {
+    border-color: #333;
+}
+
+.arrow_box:after, .arrow_box:before {
+    top: 100%;
+    left: 50%;
+    border: solid transparent;
+    content: " ";
+    height: 0;
+    width: 0;
+    position: absolute;
+    pointer-events: none;
+}
+
+.arrow_box:after {
+    border-color: rgba(255, 255, 255, 0);
+    border-top-color: #fff;
+    border-width: 1em;
+    margin-left: -1em;
+}
+
+.arrow_box:before {
+    border-color: rgba(221, 221, 221, 0);
+    border-top-color: #ddd;
+    border-width: calc(1em + 1px);
+    margin-left: calc(-1em - 1px);
+}
+
+.arrow_box:focus:before {
+    border-color: rgba(136, 136, 136, 0);
+    border-top-color: #888;
+}
+
+.arrow_box:hover:before {
+    border-color: rgba(51, 51, 51, 0);
+    border-top-color: #333;
+}
+
+.selectwrapper > .arrow_box {
+    display: inline-block;
+}
+
+.textinput {
+    background-color: #fff;
+    border: none;
+    color: #000;
+    font-family: "Free Monospaced", monospace;
+    height: 10em;
+    margin: 0;
+    padding: 0.5em;
+    resize: vertical;
+    width: 100%;
+}
+
+.textinput:focus {
+    border-color: #888;
+}
+
+.textinput:hover {
+    border-color: #333;
+}
+
+.selectwrapper {
+    margin: 0 0 1em 0;
+    padding: 0;
+    text-align: center;
+}
+
+.select {
+    background-color: #fff;
+    border: none;
+    color: #000;
+    font-family: "ABeeZee", sans-serif;
+    margin: 0;
+    padding: 0.5em;
+}
+
+.option {
+    /*    font-family: "ABeeZee", sans-serif;*/
+}
+
+.errormessage {
+    /*    font-family: "ABeeZee", sans-serif;*/
+}

app/app.component.html

@@ -1,9 +1,16 @@
-<div *ngFor="let step of steps" class="wrapper">
-    <textarea class="input" (change)="update(step)" placeholder="Please enter your input ..."
-              [(ngModel)]="step.content">{{step.content}}</textarea>
-    <select class="conversion" (change)="convert(step, $event)">
-        <option id="-1">Select conversion ...</option>
-        <option *ngFor="let c of converters" id="{{c.getId()}}">{{c.getDisplayname()}}</option>
-    </select>
-    <div class="message" *ngIf="step.error">{{step.message}}</div>
+<div *ngFor="let step of steps" class="inputwrapper">
+    <div class="textwrapper arrow_box">
+        <textarea class="textinput" (keyup)="update(step)" placeholder="Please enter your input ..."
+                  [(ngModel)]="step.content">{{step.content}}</textarea>
+    </div>
+    <div class="selectwrapper">
+        <div class="arrow_box">
+            <select class="select" (change)="convert(step, $event)">
+                <option id="undefined">Select conversion ...</option>
+                <option class="option" *ngFor="let c of converters" id="{{c.getId()}}">{{c.getDisplayname()}}
+                </option>
+            </select>
+        </div>
+    </div>
+    <div class="errormessage" *ngIf="step.error">{{step.message}}</div>
 </div>