From ea24b570001d8b2f715ac5dd7802e40ff956f9a9 Mon Sep 17 00:00:00 2001
From: Manolo Carrasco <manolo@apache.org>
Date: Fri, 16 Feb 2018 17:41:59 +0100
Subject: [PATCH] Overide iron-icon styles for `vaadin:` icons to look better

Jira: BFF-634
---
 .../frontend/src/components/search-bar.html   |  6 +++---
 .../views/storefront/order-details-full.html  |  8 ++++----
 .../webapp/frontend/styles/shared-styles.html | 19 +++++++++++++++----
 3 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/src/main/webapp/frontend/src/components/search-bar.html b/src/main/webapp/frontend/src/components/search-bar.html
index 1855794bb..27c2a62f0 100644
--- a/src/main/webapp/frontend/src/components/search-bar.html
+++ b/src/main/webapp/frontend/src/components/search-bar.html
@@ -90,15 +90,15 @@
 
     <div class="row">
       <vaadin-text-field id="field" class="field" placeholder="[[fieldPlaceholder]]" value="{{fieldValue}}" focused="{{_fieldFocused}}" on-value-changed="_filterChanged">
-        <iron-icon icon="[[fieldIcon]]" slot="prefix"></iron-icon>
+        <iron-icon icon$="[[fieldIcon]]" slot="prefix"></iron-icon>
       </vaadin-text-field>
       <vaadin-checkbox class="checkbox" checked="{{checkboxChecked}}" focused="{{_checkboxFocused}}" hidden$="[[!_desktopView]]">[[checkboxText]]</vaadin-checkbox>
       <vaadin-button id="clear" class="extra-filter" theme="tertiary">
         [[clearText]]
       </vaadin-button>
       <vaadin-button id="action" class="extra-action" theme="primary">
-        <iron-icon icon="[[buttonIcon]]"></iron-icon>
-        <span>[[buttonText]]</span>
+        <iron-icon icon$="[[buttonIcon]]" slot="prefix"></iron-icon>
+        [[buttonText]]
       </vaadin-button>
     </div>
 
diff --git a/src/main/webapp/frontend/src/views/storefront/order-details-full.html b/src/main/webapp/frontend/src/views/storefront/order-details-full.html
index 193099724..88fac36aa 100644
--- a/src/main/webapp/frontend/src/views/storefront/order-details-full.html
+++ b/src/main/webapp/frontend/src/views/storefront/order-details-full.html
@@ -215,10 +215,10 @@ <h3>[[item.customer.phoneNumber]]</h3>
 
       <div slot="info" class="total">Total [[item.totalPrice]]</div>
 
-      <vaadin-button slot="right" id="save" theme="primary success" class="edit-button" hidden="[[!review]]">Place Order ✓</vaadin-button>
-      <vaadin-button slot="right" id="edit" theme="primary" class="edit-button" hidden="[[review]]">
-        <span>Edit order</span>
-        <iron-icon icon="vaadin:edit"></iron-icon>
+      <vaadin-button slot="right" id="save" theme="primary success" hidden="[[!review]]">Place Order ✓</vaadin-button>
+      <vaadin-button slot="right" id="edit" theme="primary" hidden="[[review]]">
+        Edit order
+        <iron-icon icon="vaadin:edit" slot="suffix"></iron-icon>
       </vaadin-button>
     </buttons-bar>
   </template>
diff --git a/src/main/webapp/frontend/styles/shared-styles.html b/src/main/webapp/frontend/styles/shared-styles.html
index c74ec4dae..ec0d887e4 100644
--- a/src/main/webapp/frontend/styles/shared-styles.html
+++ b/src/main/webapp/frontend/styles/shared-styles.html
@@ -102,6 +102,21 @@
   </template>
 </dom-module>
 
+<!-- Theme for icons inside text-field and buttons, 'vaadin:' icons have custom rules 
+  in lumo theme that make icons look wrong, by overriding width and height but not 
+  padding the look ok -->
+<dom-module id="bakery-text-buttons-theme-icons" theme-for="vaadin-text-field vaadin-button">
+  <template>
+    <style>
+      [part="input-field"] ::slotted(iron-icon[icon^="vaadin:"]) ,
+      :host ::slotted(iron-icon[icon^="vaadin:"]) {
+        width: var(--iron-icon-width, 24px);
+        height: var(--iron-icon-height, 24px);
+      }
+    </style>
+  </template>
+</dom-module>
+
 <!-- Theme for the vaadin-grid -->
 <dom-module id="bakery-grid-theme" theme-for="vaadin-grid">
   <template>
@@ -173,10 +188,6 @@
         box-sizing: border-box;
       }
 
-      iron-icon {
-        box-sizing: content-box;
-      }
-
       :host([hidden]),
       [hidden] {
         display: none !important;