some wip. still broken

This commit is contained in:
Danny Coates 2018-10-09 18:17:40 -07:00
parent 5b939d2c95
commit 2b81ff1fb3
No known key found for this signature in database
GPG Key ID: 4C442633C62E00CB
28 changed files with 305 additions and 391 deletions

View File

@ -31,20 +31,13 @@ html {
}
body {
display: grid;
grid-template-columns: minmax(500px, 1080px);
grid-template-rows: 54px 700px 54px;
align-content: center;
align-items: center;
justify-items: stretch;
justify-content: center;
font-family: Futura, -apple-system, BlinkMacSystemFont, 'SF Pro Text',
'segoe ui', 'helvetica neue', helvetica, ubuntu, roboto, noto, arial,
sans-serif;
display: flex;
flex-direction: column;
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'segoe ui',
'helvetica neue', helvetica, ubuntu, roboto, noto, arial, sans-serif;
height: 100vh;
background: #f9f9fa;
margin: 0;
padding: var(--grid-basis);
background-color: #f8f9fa;
}
input,
@ -60,12 +53,41 @@ a {
}
.main {
flex: 1 1 auto;
background: var(--pageBGColor);
box-shadow: var(--large-box-shadow);
display: grid;
grid-template-columns: minmax(400px, 1fr) 1fr;
width: 100%;
width: 90%;
height: 100%;
max-width: 960px;
max-height: 600px;
align-self: center;
margin: auto 0;
}
.split {
display: flex;
flex-direction: row;
justify-content: space-between;
height: 100%;
}
.split__left {
height: 100%;
width: 360px;
margin: 0;
border-right: 1px solid #d7d7db;
display: flex;
flex-direction: column;
text-align: center;
}
.split__right {
flex: 1;
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
position: relative;
}
.noscript {
@ -74,30 +96,6 @@ a {
border-radius: 6px;
}
.main__file-manager,
.main__context {
padding: calc(var(--grid-basis) * 2);
}
.main__file-manager {
border-right: 2px solid black;
}
.main__context {
display: flex;
flex-direction: column;
}
.main__context-footer,
.main__signup-promo {
display: flex;
justify-content: flex-end;
}
.main__file-list {
flex: 1;
}
.footer__mozLogo {
width: 112px;
height: 32px;
@ -107,11 +105,10 @@ a {
.btn {
display: flex;
width: 100%;
height: 70px;
line-height: 1.2;
align-items: center;
justify-content: center;
padding: 0 10px;
padding: 16px;
font-size: 17px;
font-weight: 500;
text-transform: uppercase;
@ -190,7 +187,9 @@ a {
.page {
height: 100%;
margin: 0;
width: 75%;
margin: 0 auto;
padding: 24px;
display: flex;
flex-direction: column;
text-align: center;
@ -226,13 +225,6 @@ a {
}
}
.goBackButton {
position: absolute;
top: 0;
left: 0;
margin: 18px;
}
.error {
color: var(--errorColor);
font-weight: 600;
@ -261,6 +253,10 @@ a {
visibility: visible !important;
}
.invisible {
visibility: hidden;
}
.noDisplay {
display: none !important;
}
@ -269,39 +265,34 @@ a {
flex: 1;
}
@media (max-device-width: 750px), (max-width: 750px) {
.description {
margin: 0 auto 25px;
@media (max-device-width: 720px), (max-width: 720px) {
body {
height: unset;
}
.main {
flex-direction: column;
height: 100%;
box-shadow: none;
align-items: center;
max-height: none;
width: 100%;
}
.spacer {
flex: none;
height: 0;
.split {
flex-direction: column-reverse;
align-items: center;
}
.stripedBox {
margin-top: 72px;
min-height: 400px;
flex: 1;
.split__left {
border: none;
height: 600px;
}
.description {
margin: 0 auto 25px;
}
.uploads {
flex: none;
padding-top: 6px;
}
.footer {
margin: 15px;
}
}
@media (max-device-width: 700px), (max-width: 700px) {
.stripedBox {
margin-top: 72px;
}
}

View File

@ -2,12 +2,12 @@
@import './pages/share/share.css';
@import './pages/signin/signin.css';
@import './pages/unsupported/unsupported.css';
@import './pages/welcome/welcome.css';
@import './templates/downloadButton/downloadButton.css';
@import './templates/downloadPassword/downloadPassword.css';
@import './templates/file/file.css';
@import './templates/fileIcon/fileIcon.css';
@import './templates/fileList/fileList.css';
@import './templates/fileManager/fileManager.css';
@import './templates/footer/footer.css';
@import './templates/fxPromo/fxPromo.css';
@import './templates/header/header.css';

View File

@ -1,14 +1,10 @@
const html = require('choo/html');
const raw = require('choo/html/raw');
const assets = require('../../common/assets');
const title = require('../templates/title');
module.exports = function(state) {
return html`
<div>
<a href="/" class="goBackButton">
<img src="${assets.get('back-arrow.svg')}"/>
</a>
<div class="page">
${title(state)}
<div class="title">${state.translate('legalHeader')}</div>
${raw(

View File

@ -1,7 +1,7 @@
const html = require('choo/html');
const titleSection = require('../../templates/title');
const downloadButton = require('../../templates/downloadButton');
const downloadedFiles = require('../../templates/uploadedFileList');
const split = require('../split');
module.exports = function(state, emit) {
const fileInfo = state.fileInfo;
@ -21,18 +21,16 @@ module.exports = function(state, emit) {
const bottomLink =
state.transfer.state === 'downloading' ? cancelButton : trySendLink;
return html`
<div class="page">
${titleSection(state)}
${downloadedFiles(fileInfo, state, emit)}
return split(
state,
downloadedFiles(fileInfo, state, emit),
html`
<div class="copySection">
<div class="description">${state.translate('downloadMessage2')}</div>
${downloadButton(state, emit)}
${bottomLink}
</div>
`;
</div>`
);
function cancel() {
if (state.transfer.state === 'downloading') {

View File

@ -1,11 +1,11 @@
const html = require('choo/html');
const raw = require('choo/html/raw');
const assets = require('../../../common/assets');
const notFound = require('../notFound');
const deletePopup = require('../../templates/popup');
const uploadedFileList = require('../../templates/uploadedFileList');
const timeLimitText = require('../../templates/timeLimitText');
const { allowedCopy, delay, fadeOut } = require('../../utils');
const { allowedCopy, delay } = require('../../utils');
const split = require('../split');
module.exports = function(state, emit) {
const file = state.storage.getFileById(state.params.id);
@ -17,16 +17,13 @@ module.exports = function(state, emit) {
? ''
: 'passwordReminder--hidden';
return html`
<div class="page effect--fadeIn" id="shareWrapper">
<a href="/" class="goBackButton">
<img src="${assets.get('back-arrow.svg')}"/>
</a>
${expireInfo(file, state.translate)}
${uploadedFileList(file, state, emit)}
return split(
state,
uploadedFileList(file, state, emit),
html`
<div class="copySection">
<div class="sharePage__copyText">
${expireInfo(file, state.translate)}
${state.translate('copyUrlLabel')}
<div class="sharePage__passwordReminder ${passwordReminderClass}">(don't forget the password too)</div>
</div>
@ -58,10 +55,8 @@ module.exports = function(state, emit) {
title="${state.translate('deleteFileButton')}"
onclick=${showDeletePopup}>${state.translate('deleteFileButton')}
</button>
</div>
`;
</div>`
);
function showDeletePopup() {
const popup = document.querySelector('.popup');
@ -91,7 +86,6 @@ module.exports = function(state, emit) {
async function deleteFile() {
emit('delete', { file, location: 'success-screen' });
await fadeOut('#shareWrapper');
emit('pushState', '/');
}
};

View File

@ -22,17 +22,15 @@
}
.shareTitle {
color: var(--textColor);
margin: 8px auto 15px;
text-align: center;
font-family: 'SF Pro Text', sans-serif;
font-size: 12px;
font-style: italic;
width: 280px;
}
.copySection {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
margin: 24px auto;
width: 80%;
}
.copySection__url {
@ -48,6 +46,7 @@
letter-spacing: 0;
line-height: 18px;
font-weight: 500;
width: 100%;
}
.copySection__url:disabled {

View File

@ -7,9 +7,6 @@ const bytes = require('../../utils').bytes;
module.exports = function(state, emit) {
return html`
<div class="page signInPage">
<a href="/" class="goBackButton">
<img src="${assets.get('back-arrow.svg')}"/>
</a>
${title(state)}
<div class="signIn__info flexible">
${state.translate('accountBenefitTitle')}

18
app/pages/split.js Normal file
View File

@ -0,0 +1,18 @@
const html = require('choo/html');
const title = require('../templates/title');
const signupPromo = require('../templates/signupPromo');
module.exports = function(state, a, b) {
return html`
<div class="split">
<div class="split__left">
${title(state)}
${a}
</div>
<div class="split__right">
${signupPromo(state)}
${b}
</div>
</div>
`;
};

View File

@ -1,163 +1,6 @@
const html = require('choo/html');
const assets = require('../../../common/assets');
const title = require('../../templates/title');
const signupPromo = require('../../templates/signupPromo');
const fileList = require('../../templates/fileList');
const setPasswordSection = require('../../templates/setPasswordSection');
const uploadBox = require('../../templates/uploadedFileList');
const expireInfo = require('../../templates/expireInfo');
const fileManager = require('../../templates/fileManager');
const split = require('../split');
module.exports = function(state, emit) {
// the page flickers if both the server and browser set 'effect--fadeIn'
const fade = state.layout ? '' : 'effect--fadeIn';
const hasAnUpload = state.archive && state.archive.numFiles > 0;
const optionClass = state.uploading ? 'uploadOptions--faded' : '';
const btnUploading = state.uploading ? 'btn--stripes' : '';
const cancelVisible = state.uploading ? '' : 'noDisplay';
const faded = hasAnUpload ? 'uploadArea--faded' : '';
const selectFileClass = hasAnUpload > 0 ? 'btn--hidden' : '';
const sendFileClass = hasAnUpload > 0 ? '' : 'btn--hidden';
let btnText = '';
if (state.encrypting) {
btnText = state.translate('encryptingFile');
} else if (state.uploading) {
btnText = `sending... ${Math.floor(state.transfer.progressRatio * 100)}%`;
} else {
//default pre-upload text
btnText = state.translate('uploadSuccessConfirmHeader');
}
return html`
<div class="${fade} welcome">
${title(state)}
<div class="welcome__file-manager">
</div>
<div class="welcome__context">
<div class="welcome__signup-promo">
${signupPromo(state)}
</div>
<div class="welcome__file-list">
${fileList(state)}
</div>
<div class="welcome__context-footer">
<a
href="https://www.mozilla.org"
class="socialSection__link">
<img
class="footer__mozLogo"
src="${assets.get('mozilla-logo.svg')}"
alt="mozilla"/>
</a>
</div>
</div>
<label class="uploadArea"
ondragover=${dragover}
ondragleave=${dragleave}>
${uploadBox(state.archive, state, emit)}
<div class="uploadedFilesWrapper ${faded}">
<img
class="uploadArea__icon"
src="${assets.get('addfile.svg')}"
title="${state.translate('uploadSvgAlt')}"/>
<div class="uploadArea__msg">
${state.translate('uploadDropDragMessage')}
</div>
<span class="uploadArea__clickMsg">
${state.translate('uploadDropClickMessage')}
</span>
</div>
<input id="file-upload"
class="inputFile fileBox"
type="file"
multiple
name="fileUploaded"
onfocus=${onfocus}
onblur=${onblur}
onchange=${addFiles} />
</label>
<div class="uploadOptions ${optionClass}">
${expireInfo(state, emit)}
${setPasswordSection(state)}
</div>
<label for="file-upload"
class="btn btn--file ${selectFileClass}"
title="${state.translate('uploadPageBrowseButton1')}">
${state.translate('uploadPageBrowseButton1')}
</label>
<button
class="btn ${btnUploading} ${sendFileClass}"
onclick=${state.uploading ? noop : upload}
title="${btnText}">
${btnText}
</button>
<button class="btn--cancel uploadCancel ${cancelVisible}"
onclick=${cancel}>
${state.translate('uploadingPageCancel')}
</button>
</div>
`;
function noop() {}
function dragover(event) {
const div = document.querySelector('.uploadArea');
div.classList.add('uploadArea--dragging');
}
function dragleave(event) {
const div = document.querySelector('.uploadArea');
div.classList.remove('uploadArea--dragging');
}
function onfocus(event) {
event.target.classList.add('inputFile--focused');
}
function onblur(event) {
event.target.classList.remove('inputFile--focused');
}
function cancel(event) {
if (state.uploading) {
emit('cancel');
const cancelBtn = document.querySelector('.uploadCancel');
cancelBtn.innerHTML = state.translate('uploadCancelNotification');
}
}
function addFiles(event) {
event.preventDefault();
const newFiles = Array.from(event.target.files);
emit('addFiles', { files: newFiles });
}
function upload(event) {
event.preventDefault();
event.target.disabled = true;
if (!state.uploading) {
emit('upload', {
type: 'click',
dlimit: state.downloadCount || 1,
password: state.password
});
}
}
return split(state, fileManager(state, emit));
};

View File

@ -31,17 +31,6 @@ module.exports = function() {
${banner(state, emit)}
${header(state, emit)}
<main class="main">
<noscript>
<div class="noscript">
<h2>${state.translate('javascriptRequired')}</h2>
<p>
<a class="link" href="https://github.com/mozilla/send/blob/master/docs/faq.md#why-does-firefox-send-require-javascript">
${state.translate('whyJavascript')}
</a>
</p>
<p>${state.translate('enableJavascript')}</p>
</div>
</noscript>
${page(state, emit)}
</main>
${footer(state)}

View File

@ -4,7 +4,7 @@
pointer-events: none;
margin: 8px;
color: #fff;
background-image: url('../assets/red_file.svg');
background-image: url('../assets/blue_file.svg');
width: 22px;
height: 32px;
overflow: hidden;

View File

@ -1,15 +1,19 @@
.fileManager {
display: flex;
flex-direction: column;
height: 100%;
}
.uploadArea {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
border: 2px dashed rgba(12, 12, 13, 0.2);
margin: 0 0 10px;
height: 400px;
overflow: scroll;
transition: transform 150ms;
flex: 1;
min-height: 90px;
}
.uploadArea__msg {
@ -70,6 +74,7 @@
top: 0;
left: 0;
flex: none;
height: 100%;
width: 100%;
border: none;
z-index: 1;
@ -79,6 +84,7 @@
text-align: left;
font-size: 13px;
color: var(--lightTextColor);
margin: 24px;
}
.uploadOptions--faded {

View File

@ -0,0 +1,129 @@
const html = require('choo/html');
const assets = require('../../../common/assets');
const setPasswordSection = require('../setPasswordSection');
const uploadBox = require('../uploadedFileList');
const expireInfo = require('../expireInfo');
module.exports = function(state, emit) {
const hasAnUpload = state.archive && state.archive.numFiles > 0;
const optionClass = state.uploading ? 'uploadOptions--faded' : '';
const btnUploading = state.uploading ? 'btn--stripes' : '';
const cancelVisible = state.uploading ? '' : 'noDisplay';
const faded = hasAnUpload ? 'noDisplay' : '';
const selectFileClass = hasAnUpload > 0 ? 'btn--hidden' : '';
const sendFileClass = hasAnUpload > 0 ? 'btn--file' : 'btn--hidden';
let btnText = '';
if (state.encrypting) {
btnText = state.translate('encryptingFile');
} else if (state.uploading) {
btnText = `sending... ${Math.floor(state.transfer.progressRatio * 100)}%`;
} else {
//default pre-upload text
btnText = state.translate('uploadSuccessConfirmHeader');
}
return html`<div class="fileManager">
<label class="uploadArea"
ondragover=${dragover}
ondragleave=${dragleave}>
${uploadBox(state.archive, state, emit)}
<div class="uploadedFilesWrapper ${faded}">
<img
src="${assets.get('addfile.svg')}"
title="${state.translate('uploadSvgAlt')}"/>
<div class="uploadArea__msg">
${state.translate('uploadDropDragMessage')}
</div>
<span class="uploadArea__clickMsg">
${state.translate('uploadDropClickMessage')}
</span>
</div>
<input id="file-upload"
class="inputFile fileBox"
type="file"
multiple
name="fileUploaded"
onfocus=${onfocus}
onblur=${onblur}
onchange=${addFiles} />
</label>
<div class="uploadOptions ${optionClass}">
${expireInfo(state, emit)}
${setPasswordSection(state)}
</div>
<label for="file-upload"
class="btn btn--file ${selectFileClass}"
title="${state.translate('uploadPageBrowseButton1')}">
${state.translate('uploadPageBrowseButton1')}
</label>
<button
class="btn ${btnUploading} ${sendFileClass}"
onclick=${state.uploading ? noop : upload}
title="${btnText}">
${btnText}
</button>
<button class="btn--cancel uploadCancel ${cancelVisible}"
onclick=${cancel}>
${state.translate('uploadingPageCancel')}
</button>
</div>`;
function noop() {}
function dragover(event) {
const div = document.querySelector('.uploadArea');
div.classList.add('uploadArea--dragging');
}
function dragleave(event) {
const div = document.querySelector('.uploadArea');
div.classList.remove('uploadArea--dragging');
}
function onfocus(event) {
event.target.classList.add('inputFile--focused');
}
function onblur(event) {
event.target.classList.remove('inputFile--focused');
}
function cancel(event) {
if (state.uploading) {
emit('cancel');
const cancelBtn = document.querySelector('.uploadCancel');
cancelBtn.innerHTML = state.translate('uploadCancelNotification');
}
}
function addFiles(event) {
event.preventDefault();
const newFiles = Array.from(event.target.files);
emit('addFiles', { files: newFiles });
}
function upload(event) {
event.preventDefault();
event.target.disabled = true;
if (!state.uploading) {
emit('upload', {
type: 'click',
dlimit: state.downloadCount || 1,
password: state.password
});
}
}
};

View File

@ -1,14 +1,11 @@
.footer {
margin: 0 auto;
flex: none;
margin: 24px;
font-size: 12px;
font-weight: 600;
display: flex;
flex-direction: row;
box-sizing: border-box;
justify-content: flex-end;
align-items: center;
padding-top: var(--grid-basis);
width: 100%;
}
.legalSection {
@ -33,19 +30,13 @@
margin: 0 0 -5px calc(var(--grid-basis) * 2);
}
.dropDownArrow {
display: none;
}
.dropdown__only {
display: none;
}
@media (max-device-width: 750px), (max-width: 750px) {
@media (max-device-width: 720px), (max-width: 720px) {
.footer {
align-items: flex-end;
margin: 0;
min-width: 455px;
justify-content: flex-start;
}
.footer_hiddenIcon {
@ -56,20 +47,9 @@
display: block;
}
.dropDownArrow {
display: initial;
float: right;
}
.legalSection {
flex: 0;
background-color: #fff;
display: block;
border-radius: 4px;
border: 1px solid rgba(12, 12, 13, 0.1);
box-sizing: border-box;
flex-direction: column;
text-align: left;
margin-right: auto;
}
.legalSection__link {
@ -93,8 +73,4 @@
color: var(--primaryControlFGColor);
background-color: var(--primaryControlBGColor);
}
.footer__noDisplay {
display: none;
}
}

View File

@ -3,18 +3,11 @@ const assets = require('../../../common/assets');
module.exports = function(state) {
const footer = html`<footer class="footer">
<div class="legalSection"
onmouseover=${showDropDown}
onmouseout=${hideDropDown}>
<div class="legalSection__menu">
<img class="dropDownArrow" src="${assets.get('dropdown-arrow.svg')}"/>
<div class="legalSection">
<a class="legalSection__link"
href="https://www.mozilla.org/about/legal">
${state.translate('footerLinkLegal')}
</a>
</div>
<a
href="https://testpilot.firefox.com/about"
class="legalSection__link footer__dropdown footer__noDisplay">
@ -71,18 +64,4 @@ module.exports = function(state) {
return target && target.nodeName && target.nodeName === 'FOOTER';
};
return footer;
function showDropDown() {
const menus = document.querySelectorAll('.footer__dropdown');
menus.forEach(element => {
element.classList.remove('footer__noDisplay');
});
}
function hideDropDown() {
const menus = document.querySelectorAll('.footer__dropdown');
menus.forEach(element => {
element.classList.add('footer__noDisplay');
});
}
};

View File

@ -10,10 +10,6 @@
align-content: center;
align-items: center;
justify-content: center;
position: fixed;
top: 0;
right: 0;
left: 0;
}
.fxPromo > div {

View File

@ -1,16 +1,27 @@
.header {
align-items: flex-end;
flex: none;
display: flex;
flex-direction: row;
height: calc(var(--grid-basis) * 4);
align-items: center;
justify-content: space-between;
width: 100%;
height: 64px;
background-color: white;
box-shadow: 0 -1px 0 0 #d7d7db7f, 0 2px 6px 0 #0000001e;
}
.header h1 {
margin: 0;
}
.header__controls {
justify-self: end;
display: grid;
grid-auto-flow: column;
grid-gap: 8px;
align-items: center;
}
.feedback {
background-color: #979797;
background-image: url('../assets/feedback.svg');
@ -26,6 +37,4 @@
text-indent: 2px;
transition: all 250ms ease-in-out;
white-space: nowrap;
margin-left: calc(var(--grid-basis) * 2);
margin-bottom: 8px;
}

View File

@ -9,7 +9,8 @@ module.exports = function(state, emit) {
const header = html`
<header class="header">
<h1>Firefox Send</h1>
<h1><a href="/">Firefox Send</a></h1>
<div class="header__controls">
${userAccount(state, emit)}
<a href="${feedbackUrl}"
rel="noreferrer noopener"
@ -17,6 +18,7 @@ module.exports = function(state, emit) {
alt="Feedback"
target="_blank">${state.translate('siteFeedback')}
</a>
</div>
</header>`;
// HACK
// We only want to render this once because we

View File

@ -3,7 +3,7 @@ const passwordInput = require('../passwordInput');
module.exports = function(state) {
const checked = state.password ? 'checked' : '';
const label = state.password ? 'addPasswordLabel' : 'addPasswordMessage';
const label = state.password ? '' : 'addPasswordMessage';
return html`
<div class="setPasswordSection">
@ -15,7 +15,7 @@ module.exports = function(state) {
autocomplete="off"
onchange=${togglePasswordInput}/>
<label class="checkbox__label" for="add-password">
${state.translate(label)}
${label && state.translate(label)}
</label>
</div>
@ -32,7 +32,7 @@ module.exports = function(state) {
const label = document.querySelector('.checkbox__label');
if (boxChecked) {
label.innerHTML = state.translate('addPasswordLabel');
label.innerHTML = ''; //state.translate('addPasswordLabel');
unlockInput.focus();
} else {
label.innerHTML = state.translate('addPasswordMessage');

View File

@ -5,7 +5,6 @@
}
.checkbox {
flex: auto;
height: 24px;
}

View File

@ -4,6 +4,7 @@ module.exports = function(state) {
if (state.user.loggedIn || !state.capabilities.account) {
return null;
}
return html`
<a href="/signin" class="signupPromo">
<div class="signupPromo__title">${state.translate('signInPromoText')}</div>

View File

@ -9,6 +9,10 @@
text-align: center;
justify-content: center;
transition: background 100ms;
margin: 24px;
position: absolute;
top: 0;
right: 0;
}
.signupPromo:hover {

View File

@ -1,10 +1,9 @@
.boxTitle {
margin: -2px 0 9px;
text-align: left;
margin: 24px;
text-align: center;
font-weight: bold;
}
.boxSubtitle {
text-align: left;
font-weight: normal;
}

View File

@ -4,19 +4,11 @@ const bytes = require('../../utils').bytes;
const fileIcon = require('../fileIcon');
module.exports = function(file, index, state, emit, hasPassword) {
const transfer = state.transfer;
const transferState = transfer ? transfer.state : null;
const share = state.route.includes('share/');
const complete = share ? 'uploadedFile--completed' : '';
const cancelVisible =
state.route === '/' && !state.uploading
? 'uploadedFile__cancel--visible'
: '';
const stampClass =
share || transferState === 'complete' ? 'uploadedFile__stamp--visible' : '';
function cancel(event) {
event.preventDefault();
if (state.route === '/') {
@ -25,8 +17,7 @@ module.exports = function(file, index, state, emit, hasPassword) {
}
return html`
<li class="uploadedFile ${complete}" id="${file.id}"
>
<li class="uploadedFile" id="${file.id}">
${fileIcon(file.name, hasPassword)}
@ -43,9 +34,6 @@ module.exports = function(file, index, state, emit, hasPassword) {
<span>${bytes(file.size)}</span>
</p>
</div>
<img src="${assets.get('sent-done.svg')}"
class="uploadedFile__stamp ${stampClass}"/>
</li>
`;
};

View File

@ -13,10 +13,6 @@
position: relative;
}
.uploadedFile--completed {
background-color: #e8f2fe;
}
.uploadedFile__fileData {
margin: 8px 16px 8px 44px;
}

View File

@ -1,7 +1,5 @@
.uploadedFiles {
border: 1px solid rgba(12, 12, 13, 0.1);
border-radius: 4px;
box-sizing: border-box;
background: rgba(132, 193, 255, 0.1);
margin: 0;
padding: 0;
align-content: center;

View File

@ -1,6 +1,5 @@
.account {
padding: 0;
margin-bottom: var(--grid-basis);
}
.account__avatar {
@ -12,9 +11,6 @@
.account_dropdown {
z-index: 2;
position: absolute;
top: 30px;
left: -15px;
min-width: 150px;
list-style-type: none;
border: 1px solid #ccc;
border-radius: 4px;

View File

@ -73,6 +73,17 @@ module.exports = function(state, body = '') {
<script defer src="${assets.get('cryptofill.js')}"></script>
<script defer src="${assets.get('app.js')}"></script>
</head>
<noscript>
<div class="noscript">
<h2>${state.translate('javascriptRequired')}</h2>
<p>
<a class="link" href="https://github.com/mozilla/send/blob/master/docs/faq.md#why-does-firefox-send-require-javascript">
${state.translate('whyJavascript')}
</a>
</p>
<p>${state.translate('enableJavascript')}</p>
</div>
</noscript>
${body}
${initScript(state)}
</html>