1218405 - Change the standalone background for the visual refresh/latest designs

Status: VERIFIED FIXED

(Hello (Loop) :: Client, defect, P1)

Description

[Mark Banner (:standard8)]

The standalone background needs changing per the mock-ups. This is needed for a release fairly soon, as the contrast of the Hello logo and the background is a bit strange.

Alongside this, there's a few extra fixes:

- Make the logo a little bit smaller, and don't repeat the background
- Invert the help icon
- Change the colour of the info-area text

Comment 1

[Mark Banner (:standard8)]

Attachment: Change Loop's standalone background for the visual refresh/latest designs.

Changes as per comment 0.

Comment 2

[Dan Mosedale (:dmosedale, :dmose)]

Comment on attachment 8678879 [details] [diff] [review]
Change Loop's standalone background for the visual refresh/latest designs.

Review of attachment 8678879 [details] [diff] [review]:
-----------------------------------------------------------------

::: browser/components/loop/content/shared/img/svg/glyph-help-16x16.svg
@@ +1,1 @@
> +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><circle fill="#fff" cx="8" cy="8" r="8"/><path fill="#5a5a5a" d="M10.716 5.643c0 1.943-2.158 1.812-2.158 3.154v.3H6.83v-.37C6.83 6.65 8.74 6.793 8.74 5.81c0-.43-.312-.683-.84-.683-.49 0-.972.24-1.403.73l-1.21-.934C5.966 4.12 6.854 3.64 8.09 3.64c1.75 0 2.626.936 2.626 2.003zm-1.92 5.625c0 .6-.478 1.092-1.078 1.092s-1.08-.492-1.08-1.092c0-.588.48-1.08 1.08-1.08s1.08.492 1.08 1.08z"/></svg>
\ No newline at end of file

I notice that this version no longer has the initial line with the encoding="utf-8".  Not sure if that matters, but calling it out just to be sure it's intentional.

::: browser/components/loop/standalone/content/css/webapp.css
@@ +59,5 @@
>  
>  .standalone-overlay-wrapper > .hello-logo {
> +  width: 120px;
> +  height: 19px;
> +  background: url("../shared/img/hello_logo.svg") 0%/contain no-repeat;

The / syntax is unusual enough that it took me a good 10s mins of poking around on MDN to find the documentation showing me how to review it.  Is there some reason not to just leave this as a separate, more obviously readable background-size property?

It's still not clear to me what the 0%/contain is supposed to represent.  If I'm reading https://developer.mozilla.org/en-US/docs/Web/CSS/background-size correctly, it kinda looks like "contain" can be used by itself, or as part of multiple images, but this usage doesn't look like either of those.

Comment 3

[Mark Banner (:standard8)]

(In reply to Dan Mosedale (:dmose) - use needinfo flag for response from comment #2)
> Comment on attachment 8678879 [details] [diff] [review]
> Change Loop's standalone background for the visual refresh/latest designs.
> 
> Review of attachment 8678879 [details] [diff] [review]:
> -----------------------------------------------------------------
> 
> ::: browser/components/loop/content/shared/img/svg/glyph-help-16x16.svg
> @@ +1,1 @@
> > +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><circle fill="#fff" cx="8" cy="8" r="8"/><path fill="#5a5a5a" d="M10.716 5.643c0 1.943-2.158 1.812-2.158 3.154v.3H6.83v-.37C6.83 6.65 8.74 6.793 8.74 5.81c0-.43-.312-.683-.84-.683-.49 0-.972.24-1.403.73l-1.21-.934C5.966 4.12 6.854 3.64 8.09 3.64c1.75 0 2.626.936 2.626 2.003zm-1.92 5.625c0 .6-.478 1.092-1.078 1.092s-1.08-.492-1.08-1.092c0-.588.48-1.08 1.08-1.08s1.08.492 1.08 1.08z"/></svg>
> \ No newline at end of file
> 
> I notice that this version no longer has the initial line with the
> encoding="utf-8".  Not sure if that matters, but calling it out just to be
> sure it's intentional.

This is what svgo produced as output, so I'm going to assume it doesn't really matter.

> ::: browser/components/loop/standalone/content/css/webapp.css
> @@ +59,5 @@
> >  
> >  .standalone-overlay-wrapper > .hello-logo {
> > +  width: 120px;
> > +  height: 19px;
> > +  background: url("../shared/img/hello_logo.svg") 0%/contain no-repeat;
> 
> The / syntax is unusual enough that it took me a good 10s mins of poking
> around on MDN to find the documentation showing me how to review it.  Is
> there some reason not to just leave this as a separate, more obviously
> readable background-size property?

Yeah we can keep it separate.

> It's still not clear to me what the 0%/contain is supposed to represent.

Its basically `background-position: 0%; background-size: contain`.

Comment 4

[Mark Banner (:standard8)]

Attachment: Change Loop's standalone background for the visual refresh/latest designs. v2

Comment 5

[Dan Mosedale (:dmosedale, :dmose)]

Comment on attachment 8678897 [details] [diff] [review]
Change Loop's standalone background for the visual refresh/latest designs. v2

Review of attachment 8678897 [details] [diff] [review]:
-----------------------------------------------------------------

Looks good, r=dmose

Comment 6

[Pulsebot]

https://hg.mozilla.org/integration/fx-team/rev/582bfbe86c0d

Comment 7

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/mozilla-central/rev/582bfbe86c0d

Comment 8

[Bogdan Maris, Desktop QA]

Verified that the Standalone background is the same as mockups point and also the extra fixes from comment 0 look good across platforms (Windows 10 64-bit, Windows 7 64-bit, Mac OS X 10.11.1 and Ubuntu 14.04 32-bit) using latest Developer Edition 44.0a2.