792680 - Improve the visual style of Marketplace Developers

Status: RESOLVED FIXED

(Marketplace Graveyard :: Developer Pages, defect, P3)

Description

[Bram Pitoyo [:bram]]

Currently, the appearance of our pages are inconsistent:
* Both Helvetica and Open Sans are used
* Multiple shades of grey
* Use of color that matches the styleguide, but not exactly

This bug aims to provide CSS code snippets we can copy and paste to make the typography, size and color consistent across the page. It’s not gamebreaking, though, so more high priority bugs can be addressed first.

Comment 1

[Bram Pitoyo [:bram]]

body {
    font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif; /* make body text default to Open Sans */
    font-style: normal;
    font-size: 13px;
    color: #333; /* set a consistent default for all body text color */
}

h1, h2, h3, h4, h5 {
	color: #484848; /* set a consistent default for all heading color */
}

h1, h2, h3 {
	font-weight: 300; /* large headings should be set in Open Sans Light */	
}

pre, code, kbd, tt, samp, tt {
    font-family: Menlo, "Ubuntu Mono", "Andale Mono", monospace; /* Menlo for Mac, and Ubuntu Mono for Linux */
}

#sorter {
	/* we don’t need a separate font declaration */
}

#sorter li.selected a {
    color: #333; /* selected sorter list item should be colored dark gray, like the rest of the text */
    font-weight: 700;
    pointer-events: none;
    text-decoration: none;
}

.manage .refinements .selected a, .devhub-form .refinements .selected a {
    background: rgba(174,164,134,0.2); /* darken background color of selected item, so they look more distinct */
    color: #333; /* selected refinement sidebar item should be colored dark gray, like the rest of the text */
    font-weight: 700;
}

.item-actions {
	/* we don’t need a separate font declaration */
}

.button, button, input[type=submit] {
    position: relative;
    font: bold 13px/1em "Open Sans", "Helvetica Neue", Arial, sans-serif;
    padding: 6px 10px 7px;
    text-align: center;
    text-decoration: none;
    color: #fff;
    cursor: pointer;
    /* make button color consistent */
    background: #3c88cc;
    background-image: -webkit-gradient(linear, left bottom, left top, from(#3c88cc), to(#276195));
    background-image: linear-gradient(#3c88cc, #276195);
    background-image: -moz-linear-gradient(#3c88cc 0%, #276195 100%);
    background-image: -webkit-linear-gradient(#3c88cc, #276195);
    text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    box-shadow: 0 1px rgba(0, 0, 0, .1), 0 -2px rgba(0, 0, 0, .1) inset;
    -moz-box-shadow: 0 1px rgba(0, 0, 0, .1), 0 -2px rgba(0, 0, 0, .1) inset;
    -webkit-box-shadow: 0 1px rgba(0, 0, 0, .1), 0 -2px rgba(0, 0, 0, .1) inset;
    border: 0;
}

.delete-button:hover, .delete-button {
    /* Make button color consistent */
    background: #a91300;
    background: #a91300;
    background-image: -webkit-gradient(linear, left bottom, left top, from(#da5132), to(#a91300));
    background-image: linear-gradient(#da5132, #a91300);
    background-image: -moz-linear-gradient(#da5132, #a91300);
    background-image: -webkit-linear-gradient( #da5132, #a91300);
    border-color: #ad1212;
    text-shadow: 0 -1px #e00;	
}

The style of .delete-button also applies to:
* button.bad, .button.bad, button.manage, .button.manage
* button.bad:active, .button.bad:active, button.manage:active, .button.manage:active (on this one, reverse the color values)

button.good, .button.good {
    /* make button color consistent */
    background: #489615;
    background-image: -webkit-gradient(linear, left bottom, left top, from(#81bc2e), to(#659324));
    background-image: linear-gradient(#81bc2e, #659324);
    background-image: -moz-linear-gradient(#81bc2e, #659324);
    background-image: -webkit-linear-gradient(#81bc2e, #659324);
}

On "button.good:active, .button.good:active", reverse the color values.

".button.premium" and ".button.watch:not(.watching)" have color values that are ever so slightly different from each other. Should we make them the same?

We might also be able to remove all occurrence of this line:
    font-family: "Helvetica Neue", Arial, sans-serif;


That’s about it for now. I’ll continue looking out for visual design inconsistencies.

Comment 2

[Fred Wenzel [:wenzel]]

Thanks Bram! Is this for the developer hub or the submission / dashboard part of the developer pages?

Comment 3

[Christopher Van Wiemeersch [:cvan]]

(In reply to Fred Wenzel [:wenzel] from comment #2)
> Thanks Bram! Is this for the developer hub or the submission / dashboard
> part of the developer pages?

Submission part. Few of the styles overlap with those of dashboard, but it's not a big deal. Minor tweaks. Thanks!

Comment 4

[Bram Pitoyo [:bram]]

It applies mainly to the submission part, but the dashboard interface will be touched, as well!

Please wait before implementing these changes. I’ll have more CSS codes contribute, and am going to do a quick check to make sure that nothing funky is happening in the Dashboard.

Perhaps the biggest visual change we’ll make here is to change all font to Open Sans—and even that’s pretty minor.

Comment 5

[Bram Pitoyo [:bram]]

I have gone through my CSS changes and confirm that they won’t break anything (to the best of my knowledge). Feel free to go ahead and push.

To minimize complexity, I’ll hold off adding anything else to the CSS until it’s been pushed, when I can see it on staging, and make sure that it looks okay.

Comment 6

[Christopher Van Wiemeersch [:cvan]]

(In reply to Bram Pitoyo [:bram] from comment #1)
> h1, h2, h3, h4, h5 {
> 	color: #484848; /* set a consistent default for all heading color */
> }

Aww, I liked the orange.

> .manage .refinements .selected a, .devhub-form .refinements .selected a {
>     background: rgba(174,164,134,0.2); /* darken background color of
> selected item, so they look more distinct */
>     color: #333; /* selected refinement sidebar item should be colored dark
> gray, like the rest of the text */
>     font-weight: 700;
> }

Is this what it's supposed to look like?

http://f.cl.ly/items/0U3X2D0D2k030e1E3V3l/Screen%20shot%202012-09-24%20at%2012.52.09%20AM.png

It looks a bit strange to me.

The rest of the changes look quite nice. Thank you!

Comment 7

[Bram Pitoyo [:bram]]

(In reply to Chris Van Wiemeersch [:cvan] from comment #6)
> Aww, I liked the orange.

You know what. We actually have an orange branding color we can use. Two, actually.

See which one looks better against the background:
* Firefox orange: #E6600
* Firefox light orange: #FF9500

Then we can actually apply whatever orange works best through the rest of the stylesheet. Yay colors!



> It looks a bit strange to me.

That’s weird, because this is how it looked on my machine (attached).

The CSS that I had for this bit was:

.manage .refinements .selected a, .devhub-form .refinements .selected a {
	background: rgba(174,164,134,0.2);
	color: #333;
	font-weight: 700;
}

The changes I made:
* Background opacity bumped up to 0.2
* Color changed to #333

In your screenshot, it’s odd that the non-selected items are the ones which seemed to get the dark-grey, 0.2 opacity treatment. Non-selected items should’ve been colored blue just like every other link, and they shouldn’t have any background color or opacity.

Maybe the CSS got pasted into the wrong class? I was able to reproduce your screenshot by pasting my CSS above into this line:

.manage .refinements li + li a, .devhub-form .refinements li + li a

Thanks!

Comment 8

[Christopher Van Wiemeersch [:cvan]]

(In reply to Bram Pitoyo [:bram] from comment #7) 
> Maybe the CSS got pasted into the wrong class? I was able to reproduce your
> screenshot by pasting my CSS above into this line:
> 
> .manage .refinements li + li a, .devhub-form .refinements li + li a

Thanks, I had applied the rules to `.manage .refinements a`. Looks better now!

Comment 9

[Christopher Van Wiemeersch [:cvan]]

https://github.com/mozilla/zamboni/commit/22b37bd

And on -dev: https://marketplace-dev.allizom.org/developers/submissions