natty
/
fox-send
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

tweak promo banner to match spec'

This commit is contained in:
John Gruen 2019-05-31 13:48:32 +02:00
parent 1e77d86e8a
commit a3bdcd8478
2 changed files with 5 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/ui/promo.js
View File

@ -15,18 +15,18 @@ class Promo extends Component {
createElement() { createElement() {
return html` return html`
<send-promo <send-promo
class="w-full flex-none flex-row items-center content-center justify-center text-sm bg-grey-light leading-tight text-grey-darkest px-4 py-3 hidden md:flex" class="w-full flex-row items-center content-center justify-center bg-white text-grey-darkest px-4 py-3 flex border-b-default border-grey-banner leading-normal"
> >
<div class="flex items-center mx-auto"> <div class="flex items-center mx-auto">
<img <img
src="${assets.get('master-logo.svg')}" src="${assets.get('master-logo.svg')}"
class="w-6" class="w-6 h-6"
alt="Firefox" alt="Firefox"
/> />
<span class="ml-3"> <span class="ml-3 md:ml-4 text-xs sm:text-base">
${this.state.translate('trailheadPromo')}${' '} ${this.state.translate('trailheadPromo')}${' '}
<a <a
class="text-blue" class="underline text-blue-dark"
href="http://www.mozilla.org/firefox/accounts/?utm_source=send.firefox.com&utm_medium=banner&utm_campaign=trailhead&utm_content=protect-your-privacy" href="http://www.mozilla.org/firefox/accounts/?utm_source=send.firefox.com&utm_medium=banner&utm_campaign=trailhead&utm_content=protect-your-privacy"
>${this.state.translate('learnMore')}</a >${this.state.translate('learnMore')}</a
> >

1
tailwind.js
View File

@ -51,6 +51,7 @@ const colors = {
'grey-dark': '#8795a1', 'grey-dark': '#8795a1',
grey: '#B1B1B3', grey: '#B1B1B3',
'grey-light': '#dae1e7', 'grey-light': '#dae1e7',
'grey-banner': '#f0f0f4',
'grey-transparent': 'hsla(250, 13%, 9%, .2)', 'grey-transparent': 'hsla(250, 13%, 9%, .2)',
'grey-lighter': '#f1f5f8', 'grey-lighter': '#f1f5f8',
'grey-lightest': '#F9F9FA', 'grey-lightest': '#F9F9FA',