tweaks on rewards

[jenn-rhim]

• header top padding
• darker description
• toggle

[NejcZdovc]

can you please update snapshots, so that travis will not fail

[petemill]

I’d be happy to help clean up tweak PRs like this through review

[jenn-rhim]

@petemill that would be helpful!

[petemill]

Left comments about changing the Toggle component separately, since it's a library component, and colors. I also think we can achieve perfect alignment more simply than shifting padding pixel values, as these items still aren't aligned even with these changes. I'll give it a go.

[petemill]

@jenn-rhim changes to the Toggle component have wider implications that the rewards header, so should be done separately so we can test and make sure it's what the rest of the team wants. Even in the rewards container this creates alignment issues because the content is wider than 36px, so the width cannot be made smaller simply by changing that one value.

[jenn-rhim]

ok. @pete. we can wait.

[pete]

There's no need to wait on my account.

[petemill]

@jenn-rhim I've got a different solution that I'd prefer because it cleans this up a bit and simplifies the code: It essentially just says here's the graphic, title and toggle and asks the browser to "please vertically center them" :-) Then it can use your explicit consistent top and bottom padding of 18px.

This also allows the 'off' version to keep that padding instead of inherit the padding values that were only there to push the 'on' content to the center.

This PR can then remain to change the rewards box text color default.

We still need confirmation that the Toggle needs to change on every Layout we have. Perhaps that can be explained in a different medium, i.e. does the current Toggle implementation width and border-radius differ from the Sketch library? We can certainly fix it.

@jenn-rhim can you take a look at the below and confirm:

• Is the vertical alignment 👍
• Which TM position is best, or any changes on my offering?
• In my version, is the logo vertical centering bothering you? If so, the actual graphic needs to change so that the desired center point of the graphic is in the middle.

Before

With this PR

With simplified vertical centering PR

Consistent 18px top and bottom padding with rest of height defined by tallest item (bat logo told to have 66px height)

note that the logo is actually centered

[jenn-rhim]

I think this is good and a better solution. I didn't touch the logo because the storybook structure didn't make it clear how and where I can do that in my Visual Studio. Wanted to do it at a later time and actually thought I'd just express the design intent of centering the logo. So, thank you, you killed both birds!

[petemill]

Ok let's go with that other PR and remove the vertical alignment from this PR. And since we need to do the general Toggle component changes in another PR, that just leaves the box text color for this one

removed everything else