#554 - fixed icon in front of tags input

src/main/resources/static/css/dark/style.css

@@ -277,7 +277,7 @@ textarea {
 /* label chips underline focus color */
 .chips.focus {
     border-bottom: 1px solid #2E79B9 !important;
-    box-shadow: 0 1px 0 0 #CCCCCC !important;
+    box-shadow: 0 1px 0 0 #2E79B9 !important;
 }
 
 .main-card {

src/main/resources/static/css/dark/transactions.css

@@ -15,8 +15,24 @@
     background-color: #2E79B9;
 }
 
-.chips .input {
-    width: auto !important;
+#transaction-chips {
+    margin-top: 0;
+}
+
+.transaction-tags {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.transaction-tags .prefix {
+    margin-right: 1.3rem;
+}
+
+.transaction-tags-input {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
 }
 
 .input-min-width {

src/main/resources/static/css/style.css

@@ -229,7 +229,7 @@ ul.sidenav.sidenav-fixed > li:last-child
 /* label chips underline focus color */
 .chips.focus {
     border-bottom: 1px solid #2E79B9 !important;
-    box-shadow: 0 1px 0 0 #CCCCCC !important;
+    box-shadow: 0 1px 0 0 #2E79B9 !important;
 }
 
 .main-card {

src/main/resources/static/css/transactions.css

@@ -15,8 +15,24 @@
     background-color: #2E79B9;
 }
 
-.chips .input {
-    width: auto !important;
+#transaction-chips {
+    margin-top: 0;
+}
+
+.transaction-tags {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.transaction-tags .prefix {
+    margin-right: 1.3rem;
+}
+
+.transaction-tags-input {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
 }
 
 .input-min-width {
@@ -123,3 +139,8 @@
 #button-new-transaction i {
     line-height: 36px;
 }
+
+.icon-repeating {
+    vertical-align: middle;
+    font-size: 2rem;
+}
\ No newline at end of file

src/main/resources/templates/transactions/newTransactionMacros.ftl

@@ -165,9 +165,14 @@
 <#macro transactionTags transaction>
     <div class="row">
         <div class="col s12 m12 l8 offset-l2">
+            <div class="transaction-tags">
+                <i class="material-icons prefix">local_offer</i>
+                <div class="transaction-tags-input">
                     <label class="input-label" class="chips-label" for="transaction-chips">${locale.getString("transaction.new.label.tags")}</label>
                     <div id="transaction-chips" class="chips chips-placeholder chips-autocomplete"></div>
                 </div>
+            </div>
+        </div>
         <div id="hidden-transaction-tags"></div>
         <script>
             var initialTags = [