make icons look better

[manolo]

Jira: BFF-634

---

This change is 

[manolo]

ping @jouni why do we need to override styles in lumo, shouldn't 'vaadin:' icons work out-of-the-box ?

[jouni]

I would rather have them work out of the box. I have a fix pending for vaadin-button to use margin instead of padding for the icons, which also works if there’s a global box-sizing: border-box; CSS reset.

[jouni]

I committed fixes for vaadin-button, vaadin-text-field and vaadin-tabs that should fix the issue. Can you try the master versions?

[manolo]

@jouni those fixes work. Thanks

We still need to merge this PR since it does a couple of additional things like setting correctly the icon attribute because the property is not reflected to the attribute, and improvement on how to show/hide the delivered icon.

Also we need to wait for those fixes until there is a new release of the elements and vaadin platform including them.

---

Review status: 0 of 4 files reviewed at latest revision, all discussions resolved, some commit checks failed.

---

Comments from Reviewable

[alexberazouski]

Reviewed 2 of 4 files at r1, 1 of 1 files at r2.
Review status: 3 of 4 files reviewed at latest revision, all discussions resolved.

---

Comments from Reviewable

[alexberazouski]

Review status: 3 of 4 files reviewed at latest revision, 1 unresolved discussion.

---

src/main/webapp/frontend/src/views/storefront/order-status-badge.html, line 81 at r2 (raw file):

      _onStatusChanged(current) {
        this.status = current && current.toLowerCase();

Am I right that this method will be called twice each time status is changed?

---

Comments from Reviewable

[manolo]

Review status: 3 of 4 files reviewed at latest revision, 1 unresolved discussion.

---

src/main/webapp/frontend/src/views/storefront/order-status-badge.html, line 81 at r2 (raw file):

Previously, alexberazouski wrote…

Am I right that this method will be called twice each time status is changed?

Only in the case that status.toLowerCase != status like it was previously as you can see in the removed code line this.status = lowercase . Anyways it's not an issue that this method is called twice.

---

Comments from Reviewable

[alexberazouski]

---

Reviewed 1 of 4 files at r1.
Review status: all files reviewed at latest revision, all discussions resolved.

---

Comments from Reviewable