refactor: Small changes in coupon code input appearance.

bin/frontend/controls/CouponCodeInput.css

@@ -11,11 +11,16 @@ div + .quiqqer-coupons-field {
     padding: 5px;
 }
 
-.quiqqer-coupons-couponcodeinput button {
-    border-radius: 0 3px 3px 0;
+.quiqqer-coupons-couponcodeinput-input {
+    min-width: 220px;
+}
+
+.quiqqer-coupons-couponcodeinput-title,
+.quiqqer-coupons-couponcodeinput-input {
+    margin-right: 1rem;
 }
 
 .quiqqer-coupons-couponcodeinput input {
-    border-radius: 3px 0 0 3px;
     line-height: 36px;
+    margin-right: 1rem;
 }
\ No newline at end of file

bin/frontend/controls/CouponCodeInput.html

 <div class="quiqqer-coupons-couponcodeinput">
     <label>
-        <span>{{labelInput}}</span>
-        <input type="text" name="code"/>
+        <span class="quiqqer-coupons-couponcodeinput-title">{{labelInput}}</span>
+        <input class="quiqqer-coupons-couponcodeinput-input" type="text" name="code"
+               placeholder="{{labelInputPlaceholder}}"/>
     </label>
-    <button class="quiqqer-coupons-couponcodeinput-btn">
+    <button class="quiqqer-coupons-couponcodeinput-btn btn btn-success">
         <span>{{submitBtnText}}</span>
     </button>
 </div>
\ No newline at end of file

bin/frontend/controls/CouponCodeInput.js

@@ -53,8 +53,9 @@ define('package/quiqqer/coupons/bin/frontend/controls/CouponCodeInput', [
             this.$Elm.addClass('quiqqer-coupons-field');
 
             this.$Elm.set('html', Mustache.render(template, {
-                labelInput   : QUILocale.get(lg, lgPrefix + 'labelInput'),
-                submitBtnText: QUILocale.get(lg, lgPrefix + 'submitBtnText')
+                labelInput           : QUILocale.get(lg, lgPrefix + 'labelInput'),
+                labelInputPlaceholder: QUILocale.get(lg, lgPrefix + 'labelInputPlaceholder'),
+                submitBtnText        : QUILocale.get(lg, lgPrefix + 'submitBtnText')
             }));
 
             this.Loader.inject(this.$Elm);

locale.xml

@@ -382,6 +382,10 @@
             <de><![CDATA[Gutschein-Code]]></de>
             <en><![CDATA[Coupon code]]></en>
         </locale>
+        <locale name="controls.frontend.CouponCodeInput.template.labelInputPlaceholder">
+            <de><![CDATA[Gutschein-Code eintippen]]></de>
+            <en><![CDATA[Enter coupon code]]></en>
+        </locale>
         <locale name="controls.frontend.CouponCodeInput.template.submitBtnText">
             <de><![CDATA[Einlösen]]></de>
             <en><![CDATA[Redeem]]></en>