diff --git a/android/pages/error.js b/android/pages/error.js index 76cdd80c..b85d53a4 100644 --- a/android/pages/error.js +++ b/android/pages/error.js @@ -1,10 +1,12 @@ const html = require('choo/html'); export default function error(_state, _emit) { - return html` -
-

Error

-

Sorry, an error occurred.

-
-`; + return html` + +
+

Error

+

Sorry, an error occurred.

+
+ + `; } diff --git a/android/pages/preferences.js b/android/pages/preferences.js index 23bd4ec1..bfc5a5a2 100644 --- a/android/pages/preferences.js +++ b/android/pages/preferences.js @@ -16,21 +16,19 @@ export default function preferences(state, emit) { emit('pushState', '/'); } - return html` -
-
- - done - -
-
- wss url: -
-
- -
-
-
-
-`; + return html` + +
+
+ done +
+
wss url:
+
+ +
+
+
+
+ + `; } diff --git a/android/pages/share.js b/android/pages/share.js index fe4d5caa..220808cb 100644 --- a/android/pages/share.js +++ b/android/pages/share.js @@ -26,8 +26,12 @@ export default function uploadComplete(state, emit) { emit('upload', {}); } - const input = html``; - const copyText = html`Copy link`; + const input = html` + + `; + const copyText = html` + Copy link + `; return html`
diff --git a/android/pages/upload.js b/android/pages/upload.js index 8bf1191b..c98962dd 100644 --- a/android/pages/upload.js +++ b/android/pages/upload.js @@ -12,13 +12,15 @@ export default function progressBar(state, emit) { } emit('pushState', '/'); } - return html` -
-
-
${percent}%
- . -
CANCEL
-
-
-`; + return html` + +
+
+
${percent}%
+ . +
CANCEL
+
+
+ + `; } diff --git a/app/ui/blank.js b/app/ui/blank.js index f6411022..8364ca80 100644 --- a/app/ui/blank.js +++ b/app/ui/blank.js @@ -1,5 +1,7 @@ const html = require('choo/html'); module.exports = function() { - return html`
`; + return html` +
+ `; }; diff --git a/app/ui/copyDialog.js b/app/ui/copyDialog.js index ebd4f368..99df32ab 100644 --- a/app/ui/copyDialog.js +++ b/app/ui/copyDialog.js @@ -4,20 +4,29 @@ const { copyToClipboard } = require('../utils'); module.exports = function(name, url) { return function(state, emit, close) { return html` -
-

${state.translate('notifyUploadDone')}

-

${state.translate( - 'copyUrlFormLabelWithName', - { filename: name } - )}

- - - ${state.translate( - 'okButton' - )} -
`; +
+

${state.translate('notifyUploadDone')}

+

+ ${state.translate('copyUrlFormLabelWithName', { filename: name })} +

+ + + ${state.translate('okButton')} +
+ `; function copy(event) { event.stopPropagation(); diff --git a/app/ui/download.js b/app/ui/download.js index a4d89639..06e94804 100644 --- a/app/ui/download.js +++ b/app/ui/download.js @@ -8,31 +8,39 @@ function password(state, emit) { const invalid = fileInfo.password === null; const div = html` -
+
-
- + + oninput="${inputChanged}" + type="password" + /> - + value="${state.translate('unlockInputLabel')}" + />
-
`; +
+ `; if (!(div instanceof String)) { setTimeout(() => document.getElementById('password-input').focus()); @@ -87,16 +95,20 @@ module.exports = function(state, emit) { break; case 'complete': content = html` -
-

${state.translate( - 'downloadFinish' - )}

-

- ${state.translate( - 'sendYourFilesLink' - )} -

-
`; +
+

+ ${state.translate('downloadFinish')} +

+

+ ${state.translate('sendYourFilesLink')} +

+
+ `; break; default: content = archiveTile.preview(state, emit); @@ -105,10 +117,11 @@ module.exports = function(state, emit) { content = password(state, emit); } return html` -
-
-
${content}
-
${intro(state)}
-
-
`; +
+
+
${content}
+
${intro(state)}
+
+
+ `; }; diff --git a/app/ui/error.js b/app/ui/error.js index fa2d0457..0b6591ed 100644 --- a/app/ui/error.js +++ b/app/ui/error.js @@ -3,18 +3,21 @@ const assets = require('../../common/assets'); module.exports = function(state) { return html` -
-
-

${state.translate( - 'errorPageHeader' - )}

- -

- ${state.translate('uploadPageExplainer')} -

- - ${state.translate('sendYourFilesLink')} - -
-
`; +
+
+

+ ${state.translate('errorPageHeader')} +

+ +

+ ${state.translate('uploadPageExplainer')} +

+ + ${state.translate('sendYourFilesLink')} + +
+
+ `; }; diff --git a/app/ui/expiryOptions.js b/app/ui/expiryOptions.js index dbcf20e7..5b638579 100644 --- a/app/ui/expiryOptions.js +++ b/app/ui/expiryOptions.js @@ -7,15 +7,18 @@ const signupDialog = require('./signupDialog'); module.exports = function(state, emit) { const el = html` -
- ${raw( - state.translate('frontPageExpireInfo', { - downloadCount: - '', - timespan: '' - }) - )} -
`; +
+ ${ + raw( + state.translate('frontPageExpireInfo', { + downloadCount: + '', + timespan: '' + }) + ) + } +
+ `; if (el.__encoded) { // we're rendering on the server return el; diff --git a/app/ui/legal.js b/app/ui/legal.js index c8c4ab3c..0f38c465 100644 --- a/app/ui/legal.js +++ b/app/ui/legal.js @@ -3,24 +3,31 @@ const raw = require('choo/html/raw'); module.exports = function(state) { return html` -
-
-

${state.translate('legalHeader')}

- ${raw( - replaceLinks(state.translate('legalNoticeTestPilot'), [ - 'https://testpilot.firefox.com/terms', - 'https://testpilot.firefox.com/privacy', - 'https://testpilot.firefox.com/experiments/send' - ]) - )} - ${raw( - replaceLinks(state.translate('legalNoticeMozilla'), [ - 'https://www.mozilla.org/privacy/websites/', - 'https://www.mozilla.org/about/legal/terms/mozilla/' - ]) - )} -
-
`; +
+
+

${state.translate('legalHeader')}

+ ${ + raw( + replaceLinks(state.translate('legalNoticeTestPilot'), [ + 'https://testpilot.firefox.com/terms', + 'https://testpilot.firefox.com/privacy', + 'https://testpilot.firefox.com/experiments/send' + ]) + ) + } + ${ + raw( + replaceLinks(state.translate('legalNoticeMozilla'), [ + 'https://www.mozilla.org/privacy/websites/', + 'https://www.mozilla.org/about/legal/terms/mozilla/' + ]) + ) + } +
+
+ `; }; function replaceLinks(str, urls) { diff --git a/app/ui/modal.js b/app/ui/modal.js index 9a0b812f..67e90661 100644 --- a/app/ui/modal.js +++ b/app/ui/modal.js @@ -2,13 +2,20 @@ const html = require('choo/html'); module.exports = function(state, emit) { return html` -
-
-
e.stopPropagation()}> - ${state.modal(state, emit, close)} +
+
+
+ ${state.modal(state, emit, close)} +
-
`; + `; function close(event) { if (event) { diff --git a/app/ui/notFound.js b/app/ui/notFound.js index dbc6788c..f95cc6c9 100644 --- a/app/ui/notFound.js +++ b/app/ui/notFound.js @@ -3,20 +3,25 @@ const assets = require('../../common/assets'); module.exports = function(state) { return html` -
-
-

${state.translate( - 'expiredPageHeader' - )}

- -

- ${state.translate('uploadPageExplainer')} -

- - ${state.translate('sendYourFilesLink')} - -
-
`; +
+
+

+ ${state.translate('expiredPageHeader')} +

+ +

+ ${state.translate('uploadPageExplainer')} +

+ + ${state.translate('sendYourFilesLink')} + +
+
+ `; }; diff --git a/app/ui/okDialog.js b/app/ui/okDialog.js index 0bca4442..f76d9439 100644 --- a/app/ui/okDialog.js +++ b/app/ui/okDialog.js @@ -3,11 +3,15 @@ const html = require('choo/html'); module.exports = function(message) { return function(state, emit, close) { return html` -
-
${message}
- -
`; +
+
${message}
+ +
+ `; }; }; diff --git a/app/ui/selectbox.js b/app/ui/selectbox.js index 4b8e0688..e1f7a040 100644 --- a/app/ui/selectbox.js +++ b/app/ui/selectbox.js @@ -4,14 +4,22 @@ module.exports = function(selected, options, translate, changed) { let x = selected; return html` - `; + + `; function choose(event) { const target = event.target; diff --git a/app/ui/unsupported.js b/app/ui/unsupported.js index c7a75425..9233db7d 100644 --- a/app/ui/unsupported.js +++ b/app/ui/unsupported.js @@ -11,41 +11,49 @@ module.exports = function(state) { strings = unsupportedStrings(state); why = html` - ${state.translate('notSupportedLink')} - `; + class="text-blue" + href="https://github.com/mozilla/send/blob/master/docs/faq.md#why-is-my-browser-not-supported" + > + ${state.translate('notSupportedLink')} + + `; url = 'https://www.mozilla.org/firefox/new/?utm_campaign=send-acquisition&utm_medium=referral&utm_source=send.firefox.com'; buttonAction = html`

- Firefox
${strings.button} -

`; + Firefox
${strings.button} +

+ `; } else { strings = outdatedStrings(state); url = 'https://support.mozilla.org/kb/update-firefox-latest-version'; buttonAction = html` -

- ${strings.button} -

`; +

${strings.button}

+ `; } return html`
-
-

${strings.header}

-

- ${strings.description} -

- ${why} - - Firefox - ${buttonAction} - +
+

${strings.header}

+

${strings.description}

+ ${why} + + Firefox + ${buttonAction} +
-
`; + + `; }; function outdatedStrings(state) { diff --git a/server/initScript.js b/server/initScript.js index 599e01ac..9bf1749c 100644 --- a/server/initScript.js +++ b/server/initScript.js @@ -5,10 +5,13 @@ module.exports = function(state) { // return ''; return state.cspNonce ? html` - ` + + ` : ''; }; diff --git a/server/layout.js b/server/layout.js index daa3c2cb..a911fe0a 100644 --- a/server/layout.js +++ b/server/layout.js @@ -5,87 +5,117 @@ const initScript = require('./initScript'); module.exports = function(state, body = '') { const firaTag = state.fira - ? html`` + ? html` + + ` : ''; return html` - - - - - - + + + + + + - - - - - - - - - + + + + + + + + + - ${state.title} + ${state.title} - + - - - - - + + + + + - - + + - - - - + + + + - - - + + + - - + + - - ${firaTag} - - - - - - - - - ${body} - ${initScript(state)} - + ${firaTag} + + + + + + + + + ${body} ${initScript(state)} + `; }; diff --git a/test/frontend/routes.js b/test/frontend/routes.js index 8c51864d..41dcc390 100644 --- a/test/frontend/routes.js +++ b/test/frontend/routes.js @@ -11,37 +11,37 @@ module.exports = function(app) { app.get('/test', function(req, res) { res.send( html` - - - - - - - - - - - - - -
- - - + + + + + + + + + + + + + +
+ + + `.toString() ); });