After talking with Ayman about the new specs, the 'Add attachment' button should be moved to the top bar.

I'm gonna need a new attachment icon for the bar, as the current one is on gray color [https://github.com/mozilla-b2g/gaia/blob/master/apps/sms/style/images/paperclip-button.png]

(In reply to Fernando Campo (:fcampo) from comment #0) > After talking with Ayman about the new specs, the 'Add attachment' button > should be moved to the top bar. Is there a visual spec for this? Thanks!

Hey Rick, right now we are working on non-yet-finished specs, so we have also a non-yet-finished visuals. Basically I'm developing it a little on the dark, to make changes as the specs and visuals are updated, but it can be mostly inferred from the wf.

Ok, then let's hold off on actual changes to the app UI until the designs are finalized.

Assets sent offline.

Final wireframes and visuals are being published on bug 885680

Hi Rick, will you have some free cycles to review this one? If you are busy I could assign the review to borja, steve, or someone else from bocoup maybe?

(In reply to Fernando Campo (:fcampo) from comment #7) > Hi Rick, will you have some free cycles to review this one? > If you are busy I could assign the review to borja, steve, or someone else > from bocoup maybe? It looks like the wrong image has been used?

Yeah, I saw that too, it looks like a lower resolution image. But checking the assets that UX passed on (https://github.com/fcampo/gaia/tree/3a2d688aa1efa7eb91a8613038da3369e4fe280b/shared/style/headers/images/icons/attachment.png, https://github.com/fcampo/gaia/blob/3a2d688aa1efa7eb91a8613038da3369e4fe280b/shared/style/headers/images/icons/attachment%401.5x.png, https://github.com/fcampo/gaia/blob/3a2d688aa1efa7eb91a8613038da3369e4fe280b/shared/style/headers/images/icons/attachment%402x.png), I would say they seem ok. ni victoria just in case.

Hey, the originals look ok, I think some code might be resizing it accidentally... I am needing info from Peter La to check if this is the good / final icon.

Hey, the originals look ok, I think some code might be resizing it accidentally... I am needing info from Peter La to check if this is the good / final icon.

(In reply to Victoria Gerchinhoren from comment #13) > Hey, the originals look ok, I think some code might be resizing it > accidentally... > > I am needing info from Peter La to check if this is the good / final icon. Good call! I tracked it down to this, in shared/style/headers.css: section[role="region"] > header:first-child .icon { position: relative; float: none; display: inline-block; vertical-align: top; width: 3rem; height: 4.9rem; margin: 0 -1rem; background: transparent no-repeat center center / 3rem auto; font-size: 0; overflow: hidden; } Specifically: background: transparent no-repeat center center / 3rem auto; So in shared/style/headers.css, change: section[role="region"] > header:first-child .icon.icon-attachment { background-image: url(headers/images/icons/attachment.png); } To: section[role="region"] > header:first-child .icon.icon-attachment { background: url("headers/images/icons/attachment.png") no-repeat center center; }

Hi, The following are the correct icons @1x and @1.5x resolutions.

Comment on attachment 820531 [details] Attachment Action Icons @1x and @1.5x Apologies. In my haste, I mistook this for a 1.2 item, and thus this icon is not up to date. We are in the process of updating some of the header icons for 1.3. Will post it as soon as we have a final design (soon).

(In reply to Rick Waldron [:rwaldron] from comment #14) > (In reply to Victoria Gerchinhoren from comment #13) > > Hey, the originals look ok, I think some code might be resizing it > > accidentally... > > > > I am needing info from Peter La to check if this is the good / final icon. > > Good call! I tracked it down to this, in shared/style/headers.css: > > section[role="region"] > header:first-child .icon { > position: relative; > float: none; > display: inline-block; > vertical-align: top; > width: 3rem; > height: 4.9rem; > margin: 0 -1rem; > background: transparent no-repeat center center / 3rem auto; > font-size: 0; > overflow: hidden; > } > > > Specifically: > > background: transparent no-repeat center center / 3rem auto; > > > So in shared/style/headers.css, change: > > section[role="region"] > header:first-child .icon.icon-attachment { > background-image: url(headers/images/icons/attachment.png); > } > > To: > > section[role="region"] > header:first-child .icon.icon-attachment { > background: url("headers/images/icons/attachment.png") no-repeat center > center; > } Hi Rick, I've been investigating this a little further, and after talking with Arnau, he recommended to not include the icon in the building blocks (better to overwrite the behaviour on sms.css for this specific icon). He also discovered an error on the icon asset that provokes the weird looks that we were seeing. I'll update the pr later today, when I have a moment from koi bugs. (In reply to Peter La from comment #17) > Created attachment 823349 [details] > Attachment Icon @1 and @1.5 Sizes Cool! I'll update them too

PR updated with new icons and modified css. Checked on unagi and peak, and I see the problem solved, can you check on your device Rick?

Comment on attachment 814134 [details] Link to PR - https://github.com/mozilla-b2g/gaia/pull/12714 r=me with a rebase, thanks!!

rebased and merged on master d4bd7c8a97d508c4c1adffad5f8c32a00b531ea5 Thanks to all!