dylan.derr/Send
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update ui

Browse source
This commit is contained in:
Mark Liang 2018-11-02 17:27:59 +08:00
parent 5ebe869c26
commit cacb3a898d
21 changed files with 298 additions and 212 deletions
Download patch file Download diff file Expand all files Collapse all files

52
app/main.css
View file

@ -32,18 +32,42 @@ progress::-webkit-progress-value {
}
.main {
min-height: calc(100vh - 6rem);
display: flex;
max-width: 1024px;
width: 100%;
}
.main > section {
@apply bg-white;
@apply shadow;
}
.header-logo {
background-image: url('../assets/send_logo.svg');
background-position: left;
background-repeat: no-repeat;
background-size: 2rem;
padding-left: 2.5rem;
background-size: 1.8rem;
padding-left: 2.4rem;
text-decoration: none;
}
.header-logo h1 {
font-size: 1.5rem;
}
.mozilla-logo {
background-image: url('../assets/mozilla-logo.svg');
background-repeat: no-repeat;
background-size: 100px, 32px;
overflow: hidden;
text-indent: 120%;
white-space: nowrap;
display: inline-block;
height: 32px;
width: 100px;
flex-shrink: 0;
}
.feedback-link {
background-color: #000;
background-image: url('../assets/feedback.svg');
@ -59,6 +83,14 @@ progress::-webkit-progress-value {
white-space: nowrap;
}
.bg-shades {
background-color: rgba(255, 255, 255, 0.8);
}
.border-modal {
box-shadow: 0 0 5rem 5rem white;
}
.checkbox {
@apply leading-normal;
@apply select-none;
@ -116,15 +148,23 @@ progress::-webkit-progress-value {
content: '\200b';
}
.max-h-half {
max-height: 50vh;
}
@screen md {
.main {
@apply flex-1;
@apply self-center;
@apply bg-white;
@apply shadow-md;
@apply m-auto;
@apply items-center;
@apply my-10;
width: calc(100% - 48px);
min-height: 30rem;
max-height: 40rem;
}
.main > section {
@apply shadow-md;
}
}

2
app/routes.js
View file

@ -16,7 +16,7 @@ function banner(state, emit) {
function body(main) {
return function(state, emit) {
const b = html`<body class="flex flex-col items-center font-sans bg-blue-lightest md:h-screen md:bg-grey-lightest">
const b = html`<body class="flex flex-col items-center font-sans bg-blue-lightest md:h-screen md:bg-grey-lightest justify-between">
${banner(state, emit)}
${header(state, emit)}
${main(state, emit)}

4
app/ui/account.js
View file

@ -1,6 +1,6 @@
const html = require('choo/html');
const itemClass =
'block p-2 text-grey-darkest hover:bg-blue hover:text-white cursor-pointer';
'block px-4 py-2 text-grey-darkest hover:bg-blue hover:text-white cursor-pointer';
module.exports = function(state, emit) {
if (!state.capabilities.account) {
@ -22,7 +22,7 @@ module.exports = function(state, emit) {
)}</a></li>`
);
}
return html`<div class="relative">
return html`<div class="relative h-8">
<input
type="image"
alt="${user.email}"

100
app/ui/archiveTile.js
View file

@ -21,7 +21,7 @@ function password(state) {
return html`
<div class="my-2">
<div class="checkbox">
<div class="checkbox inline-block mr-3">
<input
id="add-password"
type="checkbox"
@ -36,7 +36,7 @@ function password(state) {
id="password-input"
class="${
state.password ? '' : 'invisible'
} border rounded-sm focus:border-blue leading-normal mt-2"
} border rounded-sm focus:border-blue leading-normal mt-2 py-1 px-2 h-8"
autocomplete="off"
maxlength="${MAX_LENGTH}"
type="password"
@ -93,11 +93,13 @@ function password(state) {
function fileInfo(file, action) {
return html`
<article class="flex flex-row items-start p-3">
<article class="flex flex-row items-center p-3">
<img class="" src="${assets.get('blue_file.svg')}"/>
<p class="ml-3 w-full">
<h1 class="text-base font-semibold">${file.name}</h1>
<div class="text-sm font-light">${bytes(file.size)}</div>
<p class="ml-4 w-full">
<h1 class="text-sm font-medium">${file.name}</h1>
<div class="text-xs font-normal opacity-75 pt-1">${bytes(
file.size
)}</div>
<div class="hidden">${file.type}</div>
</p>
${action}
@ -129,7 +131,7 @@ module.exports = function(state, emit, archive) {
return html`
<article
id="${archive.id}"
class="flex flex-col items-start border border-grey-light bg-white p-3">
class="flex flex-col items-start border border-grey-light bg-white p-4">
<p class="w-full">
<img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/>
<input
@ -138,18 +140,20 @@ module.exports = function(state, emit, archive) {
alt="Delete"
src="${assets.get('close-16.svg')}"
onclick=${del}/>
<h1 class="text-base font-semibold">${archive.name}</h1>
<div class="text-sm font-light">${bytes(archive.size)}</div>
<h1 class="text-sm font-medium">${archive.name}</h1>
<div class="text-xs font-normal opacity-75 pt-1">${bytes(
archive.size
)}</div>
</p>
<div class="text-xs text-grey-dark w-full mt-2 mb-2">
${expiryInfo(state.translate, archive)}
</div>
${archiveDetails(state.translate, archive)}
<hr class="w-full border-t">
<hr class="w-full border-t my-4">
<button
class="text-blue self-end"
class="text-blue self-end font-medium flex items-center"
onclick=${copy}>
<img src="${assets.get('copy-16.svg')}" class="mr-1"/>
<img src="${assets.get('copy-16.svg')}" class="mr-2"/>
${state.translate('copyUrlHover')}
</button>
</article>`;
@ -173,12 +177,13 @@ module.exports = function(state, emit, archive) {
module.exports.wip = function(state, emit) {
return html`
<article class="h-full flex flex-col bg-white border border-grey-light p-2 z-20">
<article class="h-full flex flex-col bg-white z-20">
${list(
state.archive.files.map(f => fileInfo(f, remove(f))),
'list-reset h-full overflow-y-scroll'
'list-reset h-full overflow-y-scroll p-4 bg-blue-lightest max-h-half',
'bg-white px-2 mb-3 border border-grey-light rounded'
)}
<div class="flex-grow border border-dashed border-blue-light mb-2">
<div class="flex-grow p-4 bg-blue-lightest mb-6 font-medium">
<input
id="file-upload"
class="hidden"
@ -187,9 +192,9 @@ module.exports.wip = function(state, emit) {
onchange=${add} />
<label
for="file-upload"
class="flex flex-row items-center w-full h-full text-blue p-2"
class="flex flex-row items-center w-full h-full p-2 cursor-pointer"
title="${state.translate('addFilesButton')}">
<img src="${assets.get('addfile.svg')}" class="w-6 h-6 mr-2"/>
<img src="${assets.get('addfiles.svg')}" class="w-6 h-6 mr-2"/>
${state.translate('addFilesButton')}
</label>
</div>
@ -197,10 +202,10 @@ module.exports.wip = function(state, emit) {
${password(state, emit)}
<button
id="upload-btn"
class="flex-none border rounded bg-blue text-white mt-2 py-2 px-6"
title="${state.translate('uploadFilesButton')}"
class="rounded bg-blue hover\:bg-blue-dark focus\:bg-blue-darker cursor-pointer text-center text-white py-2 px-6 h-12 mt-4 flex flex-no-shrink items-center justify-center font-semibold"
title="${state.translate('uploadSuccessConfirmHeader')}"
onclick=${upload}>
${state.translate('uploadFilesButton')}
${state.translate('uploadSuccessConfirmHeader')}
</button>
</article>`;
@ -227,7 +232,7 @@ module.exports.wip = function(state, emit) {
return html`
<input
type="image"
class="self-center text-white"
class="self-center text-white ml-4"
alt="Delete"
src="${assets.get('close-16.svg')}"
onclick=${del}/>`;
@ -245,11 +250,13 @@ module.exports.uploading = function(state, emit) {
return html`
<article
id="${archive.id}"
class="z-20 flex flex-col items-start border border-grey-light bg-white p-3">
class="z-20 flex flex-col items-start border border-grey-light bg-white p-4">
<p class="w-full">
<img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/>
<h1 class="text-base font-semibold">${archive.name}</h1>
<div class="text-sm font-light">${bytes(archive.size)}</div>
<h1 class="text-sm font-medium">${archive.name}</h1>
<div class="text-xs font-normal opacity-75 pt-1">${bytes(
archive.size
)}</div>
</p>
<div class="text-xs text-grey-dark w-full mt-2 mb-2">
${expiryInfo(state.translate, {
@ -258,10 +265,10 @@ module.exports.uploading = function(state, emit) {
expiresAt: Date.now() + 500 + state.timeLimit * 1000
})}
</div>
<div class="text-blue text-sm font-medium">${progressPercent}</div>
<progress class="mb-1" value="${progress}">${progressPercent}</progress>
<div class="text-blue text-sm font-medium mt-2">${progressPercent}</div>
<progress class="my-3" value="${progress}">${progressPercent}</progress>
<button
class="text-blue self-end"
class="text-blue self-end font-medium"
onclick=${cancel}>
${state.translate('uploadingPageCancel')}
</button>
@ -276,8 +283,14 @@ module.exports.uploading = function(state, emit) {
module.exports.empty = function(state, emit) {
return html`
<article class="flex flex-col items-center justify-center border border-dashed border-blue-light p-16 h-full">
<div class="p-1">${state.translate('uploadDropDragMessage')}</div>
<article class="flex flex-col items-center justify-center border border-dashed border-blue-light px-6 py-16 h-full">
<img src="${assets.get('addfiles.svg')}" width="48" height="48"/>
<div class="pt-6 pb-2 text-center text-lg font-bold uppercase tracking-wide">${state.translate(
'uploadDropDragMessage'
)}</div>
<div class="pb-6 text-center text-base italic">${state.translate(
'uploadDropClickMessage'
)}</div>
<input
id="file-upload"
class="hidden"
@ -286,7 +299,7 @@ module.exports.empty = function(state, emit) {
onchange=${add} />
<label
for="file-upload"
class="border rounded bg-blue text-white py-2 px-6"
class="rounded bg-blue hover\:bg-blue-dark focus\:bg-blue-darker cursor-pointer text-center text-white py-2 px-6 h-12 mt-4 flex flex-no-shrink items-center justify-center font-semibold"
title="${state.translate('addFilesButton')}">
${state.translate('addFilesButton')}
</label>
@ -306,17 +319,18 @@ module.exports.preview = function(state, emit) {
archive.open = true;
}
return html`
<article class="flex flex-col max-h-full bg-white border border-grey-light p-2 z-20">
<p class="flex-none w-full mb-4">
<article class="flex flex-col bg-white border border-grey-light p-4 z-20">
<p class="w-full mb-4">
<img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/>
<h1 class="text-base font-semibold">${archive.name}</h1>
<div class="text-sm font-light">${bytes(archive.size)}</div>
<h1 class="text-sm font-medium">${archive.name}</h1>
<div class="text-xs font-normal opacity-75 pt-1">${bytes(
archive.size
)}</div>
</p>
${archiveDetails(state.translate, archive)}
<hr class="w-full border-t">
<button
id="download-btn"
class="flex-none border rounded bg-blue text-white mt-2 py-2 px-6"
class="rounded bg-blue hover\:bg-blue-dark focus\:bg-blue-darker cursor-pointer text-center text-white mt-4 py-2 px-6 h-12 w-full flex flex-no-shrink items-center justify-center font-semibold"
title="${state.translate('downloadButtonLabel')}"
onclick=${download}>
${state.translate('downloadButtonLabel')}
@ -335,16 +349,18 @@ module.exports.downloading = function(state, emit) {
const progress = state.transfer.progressRatio;
const progressPercent = percent(progress);
return html`
<article class="flex flex-col bg-white border border-grey-light p-2 z-20">
<article class="flex flex-col bg-white border border-grey-light p-4 z-20">
<p class="w-full mb-4">
<img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/>
<h1 class="text-base font-semibold">${archive.name}</h1>
<div class="text-sm font-light">${bytes(archive.size)}</div>
<h1 class="text-sm font-medium">${archive.name}</h1>
<div class="text-xs font-normal opacity-75 pt-1">${bytes(
archive.size
)}</div>
</p>
<div class="text-blue text-sm font-medium">${progressPercent}</div>
<progress class="" value="${progress}">${progressPercent}</progress>
<div class="text-blue text-sm font-medium mt-2">${progressPercent}</div>
<progress class="my-3" value="${progress}">${progressPercent}</progress>
<button
class="border rounded bg-grey-dark text-white mt-2 py-2 px-6"
class="border rounded bg-grey-dark text-white mt-2 text-center py-2 px-6 h-12 w-full flex flex-no-shrink items-center justify-center font-semibold"
title="${state.translate('downloadCancel')}"
onclick=${cancel}>
${state.translate('downloadCancel')}

12
app/ui/copyDialog.js
View file

@ -4,17 +4,17 @@ const { copyToClipboard } = require('../utils');
module.exports = function(name, url) {
return function(state, emit, close) {
return html`
<div class="flex flex-col items-center text-center p-4 max-w-md">
<h1 class="font-normal my-4">${state.translate('notifyUploadDone')}</h1>
<p class="font-light text-grey-darker">${state.translate(
<div class="flex flex-col items-center text-center p-4 max-w-sm">
<h1 class="font-bold my-4">${state.translate('notifyUploadDone')}</h1>
<p class="font-normal leading-normal text-grey-darker">${state.translate(
'copyUrlFormLabelWithName',
{ filename: name }
)}</p>
<input type="text" id="share-url" class="w-full my-4 border rounded leading-loose" value=${url} readonly="true"/>
<button class="border rounded bg-blue text-white leading-loose w-full" onclick=${copy}>
<input type="text" id="share-url" class="w-full my-4 border rounded leading-loose h-12 px-2 py-1" value=${url} readonly="true"/>
<button class="rounded bg-blue hover\:bg-blue-dark focus\:bg-blue-darker cursor-pointer text-center text-white py-2 px-6 h-12 w-full flex flex-no-shrink items-center justify-center font-semibold" onclick=${copy}>
${state.translate('copyUrlFormButton')}
</button>
<a class="text-blue my-2 cursor-pointer" onclick=${close}>${state.translate(
<a class="text-blue my-4 font-medium cursor-pointer" onclick=${close}>${state.translate(
'okButton'
)}</a>
</div>`;

18
app/ui/download.js
View file

@ -11,7 +11,7 @@ function password(state, emit) {
<div class="h-full flex flex-col items-center justify-center border border-grey-light bg-white py-8">
<label
id="password-error"
class="${invalid ? '' : 'invisible'} text-red"
class="${invalid ? '' : 'invisible'} text-red my-4"
for="password-input">
${state.translate('passwordTryAgain')}
</label>
@ -20,7 +20,7 @@ function password(state, emit) {
<input id="password-input"
class="w-full border rounded ${
invalid ? 'border-red' : 'border-grey'
} leading-loose"
} leading-loose px-2 py-1"
maxlength="32"
autocomplete="off"
placeholder="${state.translate('unlockInputPlaceholder')}"
@ -88,9 +88,11 @@ module.exports = function(state, emit) {
case 'complete':
content = html`
<div id="download-complete" class="flex flex-col items-center justify-center h-full bg-white border border-grey-light p-2">
<h1 class="text-center">${state.translate('downloadFinish')}</h1>
<p class="">
<a href="/" class="text-blue">${state.translate(
<h1 class="text-center font-bold my-4 text-2xl">${state.translate(
'downloadFinish'
)}</h1>
<p class="mb-4">
<a href="/" class="text-blue font-medium">${state.translate(
'sendYourFilesLink'
)}</a>
</p>
@ -104,9 +106,9 @@ module.exports = function(state, emit) {
}
return html`
<main class="main container">
<section class="relative h-full w-full px-6 md:flex md:flex-row">
<div class="py-4 md:mr-6 md:w-1/2">${content}</div>
<div class="py-4 md:w-1/2">${intro(state)}</div>
<section class="relative h-full w-full p-6 md:flex md:flex-row">
<div class="md:mr-6 md:w-1/2 overflow-y-scroll">${content}</div>
<div class="md:w-1/2 mt-6 md:mt-0">${intro(state)}</div>
</section>
</main>`;
};

18
app/ui/error.js
View file

@ -4,15 +4,15 @@ const assets = require('../../common/assets');
module.exports = function(state) {
return html`
<main class="main container">
<div class="flex flex-col items-center text-center bg-white m-6 p-4 border border-grey-light md:border-none md:px-12">
<h1 class="">${state.translate('errorPageHeader')}</h1>
<img class="my-8" src="${assets.get('illustration_error.svg')}"/>
<p class="">
${state.translate('uploadPageExplainer')}
</p>
<a class="text-blue mt-4" href="/">
${state.translate('sendYourFilesLink')}
</a>
<div class="flex flex-col items-center bg-white m-6 p-6 border border-grey-light md:border-none md:px-12 md:py-16 shadow w-full md:h-full">
<h1 class="text-2xl">${state.translate('errorPageHeader')}</h1>
<img class="my-16" src="${assets.get('illustration_error.svg')}"/>
<p class="max-w-md leading-normal">
${state.translate('uploadPageExplainer')}
</p>
<a class="text-blue my-10 font-medium" href="/">
${state.translate('sendYourFilesLink')}
</a>
</div>
</main>`;
};

6
app/ui/footer.js
View file

@ -5,7 +5,11 @@ const { browserName } = require('../utils');
module.exports = function(state) {
const browser = browserName();
const feedbackUrl = `https://qsurvey.mozilla.com/s3/txp-firefox-send?ver=${version}&browser=${browser}`;
const footer = html`<footer class="w-full flex-none self-start p-2 bg-white font-medium text-xs text-grey-dark">
const footer = html`<footer class="flex flex-col md:flex-row items-start w-full flex-none self-start p-6 font-medium text-xs text-grey-dark md:items-center justify-between bg-grey-lightest">
<a class="mozilla-logo pb-10 md:pb-0 m-2"
href="https://www.mozilla.org/">
Mozilla
</a>
<ul class="list-reset flex flex-col md:flex-row items-start md:items-center md:justify-end">
<li class="m-2"><a
href="https://www.mozilla.org/about/legal">

2
app/ui/header.js
View file

@ -3,7 +3,7 @@ const account = require('./account');
module.exports = function(state, emit) {
const header = html`
<header class="relative flex-none flex flex-row items-center justify-between bg-white w-full px-4 h-12 md:shadow-md">
<header class="relative flex-none flex flex-row items-center justify-between bg-white w-full px-6 h-16 shadow z-20">
<a
class="header-logo"
href="/">

10
app/ui/home.js
View file

@ -20,14 +20,14 @@ module.exports = function(state, emit) {
const right =
archives.length < 1
? intro(state)
: list(archives, 'list-reset h-full overflow-y-scroll', 'pb-4');
: list(archives, 'list-reset h-full overflow-y-scroll', 'mb-3');
return html`
<main class="main container md:relative">
<main class="main md:relative">
${state.modal && modal(state, emit)}
<section class="h-full w-full px-6 md:flex md:flex-row">
<div class="pt-4 md:pb-4 md:mr-6 md:w-1/2">${left}</div>
<div class="py-4 md:w-1/2">${right}</div>
<section class="h-full w-full p-6 md:flex md:flex-row z-10">
<div class="md:mr-6 md:w-1/2">${left}</div>
<div class="md:w-1/2 overflow-y-scroll mt-6 md:mt-0">${right}</div>
</section>
</main>`;
};

14
app/ui/intro.js
View file

@ -3,13 +3,17 @@ const assets = require('../../common/assets');
module.exports = function intro(state) {
return html`
<article class="flex flex-col items-center justify-center h-full bg-white border border-grey-light p-2">
<article class="flex flex-col items-center justify-between bg-white border border-grey-light md:border-none px-6 md:py-10 py-6 md:mb-0 mb-6">
<p class="text-center">
<div class="font-semibold">${state.translate('uploadPageHeader')}</div>
<div class="italic">${state.translate('pageHeaderCredits')}</div>
<div class="font-semibold leading-normal">${state.translate(
'uploadPageHeader'
)}</div>
<div class="italic text-sm opacity-75 leading-normal">${state.translate(
'pageHeaderCredits'
)}</div>
</p>
<img src="${assets.get('illustration_download.svg')}"/>
<p class="m-4 max-w-sm text-sm font-light">${state.translate(
<img class="my-6" src="${assets.get('illustration_download.svg')}"/>
<p class="md:mx-6 max-w-sm text-sm opacity-50 leading-normal">${state.translate(
'uploadPageExplainer'
)}</p>
</article>`;

6
app/ui/legal.js
View file

@ -4,8 +4,8 @@ const raw = require('choo/html/raw');
module.exports = function(state) {
return html`
<main class="main container">
<div class="flex flex-col items-center bg-white m-6 p-4 border border-grey-light md:border-none md:px-12">
<h1 class="">${state.translate('legalHeader')}</h1>
<div class="flex flex-col items-center bg-white m-6 p-6 border border-grey-light md:border-none md:px-12 md:py-16 shadow w-full md:h-full">
<h1 class="text-2xl">${state.translate('legalHeader')}</h1>
${raw(
replaceLinks(state.translate('legalNoticeTestPilot'), [
'https://testpilot.firefox.com/terms',
@ -29,5 +29,5 @@ function replaceLinks(str, urls) {
/<a>([^<]+)<\/a>/g,
(m, v) => `<a class="text-blue" href="${urls[i++]}">${v}</a>`
);
return `<p class="m-4">${s}</p>`;
return `<p class="mt-10 max-w-md leading-normal">${s}</p>`;
}

8
app/ui/modal.js
View file

@ -2,9 +2,11 @@ const html = require('choo/html');
module.exports = function(state, emit) {
return html`
<div class="absolute pin flex items-center justify-center overflow-hidden z-40 bg-cloud" onclick=${close}>
<div class="shadow-cloud bg-white" onclick=${e => e.stopPropagation()}>
${state.modal(state, emit, close)}
<div class="absolute pin flex items-center justify-center overflow-hidden z-40 bg-shades" onclick=${close}>
<div class="h-full max-h-screen absolute pin-t flex items-center">
<div class="border-modal bg-white" onclick=${e => e.stopPropagation()}>
${state.modal(state, emit, close)}
</div>
</div>
</div>`;

14
app/ui/notFound.js
View file

@ -4,13 +4,17 @@ const assets = require('../../common/assets');
module.exports = function(state) {
return html`
<main class="main container">
<div class="flex flex-col items-center text-center bg-white m-6 p-4 border border-grey-light md:border-none md:px-12">
<h1 class="text-pink-dark">${state.translate('expiredPageHeader')}</h1>
<img src="${assets.get('illustration_expired.svg')}" id="expired-img">
<p class="">
<div class="flex flex-col items-center bg-white m-6 p-6 border border-grey-light md:border-none md:px-12 md:py-16 shadow w-full md:h-full">
<h1 class="text-pink-dark text-2xl">${state.translate(
'expiredPageHeader'
)}</h1>
<img class="my-16" src="${assets.get(
'illustration_expired.svg'
)}" id="expired-img">
<p class="max-w-md leading-normal">
${state.translate('uploadPageExplainer')}
</p>
<a class="text-blue mt-4" href="/">
<a class="text-blue my-10 font-medium" href="/">
${state.translate('sendYourFilesLink')}
</a>
</div>

4
app/ui/okDialog.js
View file

@ -4,8 +4,8 @@ module.exports = function(message) {
return function(state, emit, close) {
return html`
<div class="flex flex-col max-w-xs p-4">
<div class="text-center m-8">${message}</div>
<button class="border rounded bg-blue text-white leading-loose w-full" onclick=${close}>${state.translate(
<div class="text-center m-8 leading-normal">${message}</div>
<button class="rounded bg-blue hover\:bg-blue-dark focus\:bg-blue-darker cursor-pointer text-center text-white py-2 px-6 h-12 w-full flex flex-no-shrink items-center justify-center font-semibold" onclick=${close}>${state.translate(
'okButton'
)}</button>
</div>`;

2
app/ui/selectbox.js
View file

@ -4,7 +4,7 @@ module.exports = function(selected, options, translate, changed) {
let x = selected;
return html`
<select class="appearance-none cursor-pointer border rounded-sm bg-blue-lightest hover:border-blue focus:border-blue p-1" onchange=${choose}>
<select class="appearance-none cursor-pointer border rounded-sm bg-blue-lightest hover:border-blue focus:border-blue px-2 py-1 mx-1 h-8" onchange=${choose}>
${options.map(
i =>
html`<option value="${i}" ${

8
app/ui/signupDialog.js
View file

@ -8,7 +8,7 @@ module.exports = function() {
<div class="flex flex-col p-4">
<p class="p-8">
${state.translate('accountBenefitTitle')}
<ul class="my-2">
<ul class="my-2 leading-normal">
<li>${state.translate('accountBenefitLargeFiles', {
size: bytes(LIMITS.MAX_FILE_SIZE)
})}</li>
@ -22,18 +22,18 @@ module.exports = function() {
<input
id="email-input"
type="text"
class="border rounded w-full px-2 text-lg text-grey-darker leading-loose"
class="border rounded w-full px-2 py-1 h-12 mb-4 text-lg text-grey-darker leading-loose"
placeholder=${state.translate('emailEntryPlaceholder')}/>
<input
class="hidden"
id="email-submit"
type="submit"/>
</form>
<label class="border rounded bg-blue text-white leading-loose text-center my-2" for="email-submit">
<label class="rounded bg-blue hover\:bg-blue-dark focus\:bg-blue-darker cursor-pointer text-center text-white py-2 px-6 h-12 w-full flex flex-no-shrink items-center justify-center font-semibold" for="email-submit">
${state.translate('signInMenuOption')}
</label>
<button
class=""
class="my-4 text-blue font-medium"
title="${state.translate('deletePopupCancel')}"
onclick=${close}>${state.translate('deletePopupCancel')}
</button>

16
app/ui/unsupported.js
View file

@ -17,30 +17,30 @@ module.exports = function(state) {
url =
'https://www.mozilla.org/firefox/new/?utm_campaign=send-acquisition&utm_medium=referral&utm_source=send.firefox.com';
buttonAction = html`
<p class="ml-3 font-bold">
Firefox<br><span class="font-light">${strings.button}</span>
<p class="ml-4 font-bold">
Firefox<br><span class="font-light text-base">${strings.button}</span>
</p>`;
} else {
strings = outdatedStrings(state);
url = 'https://support.mozilla.org/kb/update-firefox-latest-version';
buttonAction = html`
<p class="ml-3">
<p class="ml-4">
${strings.button}
</p>`;
}
return html`
<main class="main container">
<div class="flex flex-col items-center bg-white m-6 p-4 border border-grey-light md:border-none md:px-12">
<h1 class="text-center">${strings.header}</h1>
<p class="my-16">
<div class="flex flex-col items-center bg-white m-6 p-6 border border-grey-light md:border-none md:px-12 md:py-16 shadow w-full md:h-full">
<h1 class="text-center text-2xl">${strings.header}</h1>
<p class="my-10 max-w-md leading-normal">
${strings.description}
</p>
${why}
<a href="${url}" class="border border-green-light rounded bg-green flex items-center justify-center text-2xl text-white my-16 p-2">
<a href="${url}" class="border border-green-light rounded bg-green hover\:bg-green-dark focus\:bg-green-darker flex items-center justify-center text-2xl text-white my-10 py-4 px-6">
<img
src="${assets.get('firefox_logo-only.svg')}"
class="w-16"
class="w-10"
alt="Firefox"/>
${buttonAction}
</a>