Dark theme
This commit is contained in:
Danny Coates
parent
ea1ea2aa68
commit
c71c246959
37 changed files with 363 additions and 215 deletions
97
app/main.css
97
app/main.css
|
|
@ -39,7 +39,7 @@ body {
|
|||
}
|
||||
|
||||
.btn {
|
||||
@apply bg-blue-dark;
|
||||
@apply bg-blue-60;
|
||||
@apply text-white;
|
||||
@apply cursor-pointer;
|
||||
@apply py-4;
|
||||
|
|
@ -48,11 +48,11 @@ body {
|
|||
}
|
||||
|
||||
.btn:hover {
|
||||
@apply bg-blue-darker;
|
||||
@apply bg-blue-70;
|
||||
}
|
||||
|
||||
.btn:focus {
|
||||
@apply bg-blue-darker;
|
||||
@apply bg-blue-70;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
|
|
@ -70,7 +70,7 @@ body {
|
|||
}
|
||||
|
||||
.checkbox > label::before {
|
||||
/* @apply bg-grey-lightest; */
|
||||
/* @apply bg-grey-10; */
|
||||
@apply border;
|
||||
@apply rounded-sm;
|
||||
|
||||
|
|
@ -82,16 +82,16 @@ body {
|
|||
}
|
||||
|
||||
.checkbox > label:hover::before {
|
||||
@apply border-blue-dark;
|
||||
@apply border-blue-50;
|
||||
}
|
||||
|
||||
.checkbox > input:focus + label::before {
|
||||
@apply border-blue-dark;
|
||||
@apply border-blue-50;
|
||||
}
|
||||
|
||||
.checkbox > input:checked + label::before {
|
||||
@apply bg-blue-dark;
|
||||
@apply border-blue-dark;
|
||||
@apply bg-blue-50;
|
||||
@apply border-blue-50;
|
||||
|
||||
background-image: url('../assets/lock.svg');
|
||||
background-position: center;
|
||||
|
|
@ -104,8 +104,8 @@ body {
|
|||
}
|
||||
|
||||
.checkbox > input:disabled + label::before {
|
||||
@apply bg-blue-dark;
|
||||
@apply border-blue-dark;
|
||||
@apply bg-blue-50;
|
||||
@apply border-blue-50;
|
||||
|
||||
background-image: url('../assets/lock.svg');
|
||||
background-position: center;
|
||||
|
|
@ -153,9 +153,21 @@ footer li:hover {
|
|||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.link-blue {
|
||||
@apply text-blue-60;
|
||||
}
|
||||
|
||||
.link-blue:hover {
|
||||
@apply text-blue-70;
|
||||
}
|
||||
|
||||
.link-blue:focus {
|
||||
@apply text-blue-70;
|
||||
}
|
||||
|
||||
.main-header img {
|
||||
height: 32px;
|
||||
width: 170px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.intro {
|
||||
|
|
@ -193,14 +205,14 @@ footer li:hover {
|
|||
}
|
||||
|
||||
progress {
|
||||
@apply bg-grey-light;
|
||||
@apply bg-grey-30;
|
||||
@apply rounded-sm;
|
||||
@apply w-full;
|
||||
@apply h-1;
|
||||
}
|
||||
|
||||
progress::-webkit-progress-bar {
|
||||
@apply bg-grey-light;
|
||||
@apply bg-grey-30;
|
||||
@apply rounded-sm;
|
||||
@apply w-full;
|
||||
@apply h-1;
|
||||
|
|
@ -290,6 +302,55 @@ select {
|
|||
}
|
||||
}
|
||||
|
||||
@screen dark {
|
||||
body {
|
||||
@apply text-grey-10;
|
||||
|
||||
background-image: unset;
|
||||
}
|
||||
|
||||
.btn {
|
||||
@apply bg-blue-40;
|
||||
@apply text-white;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
@apply bg-blue-50;
|
||||
}
|
||||
|
||||
.btn:focus {
|
||||
@apply bg-blue-50;
|
||||
}
|
||||
|
||||
.link-blue {
|
||||
@apply text-blue-40;
|
||||
}
|
||||
|
||||
.link-blue:hover {
|
||||
@apply text-blue-50;
|
||||
}
|
||||
|
||||
.link-blue:focus {
|
||||
@apply text-blue-50;
|
||||
}
|
||||
|
||||
.main > section {
|
||||
@apply bg-grey-90;
|
||||
}
|
||||
|
||||
.mozilla-logo {
|
||||
background-color: white;
|
||||
border: 1px solid white;
|
||||
}
|
||||
|
||||
@screen md {
|
||||
.main > section {
|
||||
@apply border;
|
||||
@apply border-grey-80;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@tailwind utilities;
|
||||
|
||||
@responsive {
|
||||
|
|
@ -325,8 +386,6 @@ select {
|
|||
|
||||
.signin:hover,
|
||||
.signin:focus {
|
||||
@apply shadow-btn;
|
||||
|
||||
transform: scale(1.0625);
|
||||
}
|
||||
|
||||
|
|
@ -337,19 +396,19 @@ select {
|
|||
/* begin signin button color experiment */
|
||||
|
||||
.white-blue {
|
||||
@apply border-blue-dark;
|
||||
@apply border-blue-60;
|
||||
@apply border-2;
|
||||
@apply text-blue-dark;
|
||||
@apply text-blue-60;
|
||||
}
|
||||
|
||||
.white-blue:hover,
|
||||
.white-blue:focus {
|
||||
@apply bg-blue-dark;
|
||||
@apply bg-blue-60;
|
||||
@apply text-white;
|
||||
}
|
||||
|
||||
.blue {
|
||||
@apply bg-blue-dark;
|
||||
@apply bg-blue-60;
|
||||
@apply text-white;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -64,8 +64,7 @@ class Account extends Component {
|
|||
return html`
|
||||
<send-account>
|
||||
<button
|
||||
class="px-4 py-2 md:px-8 md:py-4 focus:outline signin ${this
|
||||
.buttonClass}"
|
||||
class="px-4 py-2 md:px-8 md:py-4 focus:outline signin border-2 link-blue border-blue-60 hover:border-blue-70 dark:border-blue-40 dark:hover:border-blue-50"
|
||||
onclick="${e => this.login(e)}"
|
||||
title="${translate('signInOnlyButton')}"
|
||||
>
|
||||
|
|
@ -79,19 +78,19 @@ class Account extends Component {
|
|||
<input
|
||||
type="image"
|
||||
alt="${user.email}"
|
||||
class="w-8 h-8 rounded-full border text-blue md:text-white focus:outline"
|
||||
class="w-8 h-8 rounded-full border text-blue-50 md:text-white focus:outline"
|
||||
src="${user.avatar}"
|
||||
onclick="${e => this.avatarClick(e)}"
|
||||
/>
|
||||
<ul
|
||||
id="accountMenu"
|
||||
class="invisible absolute top-0 right-0 mt-10 pt-2 pb-2 bg-white shadow-md whitespace-no-wrap outline-none z-50"
|
||||
class="invisible absolute top-0 right-0 mt-10 pt-2 pb-2 bg-white shadow-md whitespace-no-wrap outline-none z-50 dark:bg-grey-80"
|
||||
onblur="${e => this.hideMenu(e)}"
|
||||
>
|
||||
<li class="p-2 text-grey-dark">${user.email}</li>
|
||||
<li class="p-2 text-grey-60 dark:text-grey-50">${user.email}</li>
|
||||
<li>
|
||||
<button
|
||||
class="block w-full text-left px-4 py-2 text-grey-darkest hover:bg-blue hover:text-white cursor-pointer focus:outline"
|
||||
class="block w-full text-left px-4 py-2 text-grey-80 dark:text-grey-30 hover:bg-blue-50 hover:text-white cursor-pointer focus:outline"
|
||||
onclick="${e => this.logout(e)}"
|
||||
title="${translate('signOut')}"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ function password(state) {
|
|||
id="password-input"
|
||||
class="${state.archive.password
|
||||
? ''
|
||||
: 'invisible'} border rounded focus:border-blue-dark leading-normal my-1 py-1 px-2 h-8"
|
||||
: 'invisible'} border rounded focus:border-blue-60 leading-normal my-1 py-1 px-2 h-8 dark:bg-grey-80"
|
||||
autocomplete="off"
|
||||
maxlength="${MAX_LENGTH}"
|
||||
type="password"
|
||||
|
|
@ -58,7 +58,7 @@ function password(state) {
|
|||
<label
|
||||
id="password-msg"
|
||||
for="password-input"
|
||||
class="block text-xs text-grey-darker"
|
||||
class="block text-xs text-grey-70"
|
||||
></label>
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -106,7 +106,9 @@ function password(state) {
|
|||
function fileInfo(file, action) {
|
||||
return html`
|
||||
<send-file class="flex flex-row items-center p-3 w-full">
|
||||
<img class="h-8" src="${assets.get('blue_file.svg')}"/>
|
||||
<svg class="h-8 w-8 text-white dark:text-grey-90">
|
||||
<use xlink:href="${assets.get('blue_file.svg')}#icon"/>
|
||||
</svg>
|
||||
<p class="ml-4 w-full">
|
||||
<h1 class="text-base font-medium word-break-all">${file.name}</h1>
|
||||
<div class="text-sm font-normal opacity-75 pt-1">${bytes(
|
||||
|
|
@ -120,7 +122,9 @@ function fileInfo(file, action) {
|
|||
function archiveInfo(archive, action) {
|
||||
return html`
|
||||
<p class="w-full flex items-center">
|
||||
<img class="mr-3 flex-shrink-0" src="${assets.get('blue_file.svg')}"/>
|
||||
<svg class="h-8 w-6 mr-3 flex-shrink-0 text-white dark:text-grey-90">
|
||||
<use xlink:href="${assets.get('blue_file.svg')}#icon"/>
|
||||
</svg>
|
||||
<p class="flex-grow">
|
||||
<h1 class="text-base font-medium word-break-all">${archive.name}</h1>
|
||||
<div class="text-sm font-normal opacity-75 pt-1">${bytes(
|
||||
|
|
@ -140,7 +144,7 @@ function archiveDetails(translate, archive) {
|
|||
ontoggle="${toggled}"
|
||||
>
|
||||
<summary
|
||||
class="flex items-center text-blue-dark text-sm cursor-pointer outline-none"
|
||||
class="flex items-center link-blue text-sm cursor-pointer outline-none"
|
||||
>
|
||||
<svg
|
||||
class="fill-current w-4 h-4 mr-1"
|
||||
|
|
@ -170,20 +174,25 @@ module.exports = function(state, emit, archive) {
|
|||
state.capabilities.share || platform() === 'android'
|
||||
? html`
|
||||
<button
|
||||
class="text-blue-dark hover:text-blue-darker focus:text-blue-darker self-end flex items-end"
|
||||
class="link-blue self-end flex items-start"
|
||||
onclick=${share}
|
||||
title="Share link"
|
||||
>
|
||||
<img src="${assets.get('share-24.svg')}" class="mr-2" />Share link
|
||||
<svg class="h-4 w-4 mr-2">
|
||||
<use xlink:href="${assets.get('share-24.svg')}#icon" />
|
||||
</svg>
|
||||
Share link
|
||||
</button>
|
||||
`
|
||||
: html`
|
||||
<button
|
||||
class="text-blue-dark hover:text-blue-darker focus:text-blue-darker focus:outline self-end flex items-center"
|
||||
class="link-blue focus:outline self-end flex items-center"
|
||||
onclick=${copy}
|
||||
title="${state.translate('copyLinkButton')}"
|
||||
>
|
||||
<img src="${assets.get('copy-16.svg')}" class="mr-2" />
|
||||
<svg class="h-4 w-4 mr-2">
|
||||
<use xlink:href="${assets.get('copy-16.svg')}#icon" />
|
||||
</svg>
|
||||
${state.translate('copyLinkButton')}
|
||||
</button>
|
||||
`;
|
||||
|
|
@ -191,12 +200,14 @@ module.exports = function(state, emit, archive) {
|
|||
platform() === 'web'
|
||||
? html`
|
||||
<a
|
||||
class="flex items-baseline text-blue-dark hover:text-blue-darker focus:text-blue-darker"
|
||||
class="flex items-baseline link-blue"
|
||||
href="${archive.url}"
|
||||
title="${state.translate('downloadButtonLabel')}"
|
||||
tabindex="0"
|
||||
>
|
||||
<img src="${assets.get('dl.svg')}" class="mr-2" />
|
||||
<svg class="h-4 w-3 mr-2">
|
||||
<use xlink:href="${assets.get('dl.svg')}#icon" />
|
||||
</svg>
|
||||
${state.translate('downloadButtonLabel')}
|
||||
</a>
|
||||
`
|
||||
|
|
@ -206,7 +217,7 @@ module.exports = function(state, emit, archive) {
|
|||
return html`
|
||||
<send-archive
|
||||
id="archive-${archive.id}"
|
||||
class="flex flex-col items-start rounded shadow-light bg-white p-4 w-full"
|
||||
class="flex flex-col items-start rounded shadow-light bg-white p-4 w-full dark:bg-grey-90 dark:border dark:border-grey-70"
|
||||
>
|
||||
${archiveInfo(
|
||||
archive,
|
||||
|
|
@ -225,7 +236,7 @@ module.exports = function(state, emit, archive) {
|
|||
${expiryInfo(state.translate, archive)}
|
||||
</div>
|
||||
${archiveDetails(state.translate, archive)}
|
||||
<hr class="w-full border-t my-4" />
|
||||
<hr class="w-full border-t my-4 dark:border-grey-70" />
|
||||
<div class="flex justify-between w-full">
|
||||
${dl} ${copyOrShare}
|
||||
</div>
|
||||
|
|
@ -269,18 +280,21 @@ module.exports = function(state, emit, archive) {
|
|||
|
||||
module.exports.wip = function(state, emit) {
|
||||
return html`
|
||||
<send-upload-area class="flex flex-col bg-white h-full w-full" id="wip">
|
||||
<send-upload-area
|
||||
class="flex flex-col bg-white h-full w-full dark:bg-grey-90"
|
||||
id="wip"
|
||||
>
|
||||
${list(
|
||||
Array.from(state.archive.files)
|
||||
.reverse()
|
||||
.map(f =>
|
||||
fileInfo(f, remove(f, state.translate('deleteButtonHover')))
|
||||
),
|
||||
'flex-shrink bg-grey-lightest rounded-t overflow-y-auto px-6 py-4 md:h-full md:max-h-half-screen',
|
||||
'bg-white px-2 my-2 shadow-light rounded'
|
||||
'flex-shrink bg-grey-10 rounded-t overflow-y-auto px-6 py-4 md:h-full md:max-h-half-screen dark:bg-black',
|
||||
'bg-white px-2 my-2 shadow-light rounded dark:bg-grey-90 dark:border dark:border-grey-80'
|
||||
)}
|
||||
<div
|
||||
class="flex-shrink-0 flex-grow flex items-end p-4 bg-grey-lightest rounded-b mb-1 font-medium"
|
||||
class="flex-shrink-0 flex-grow flex items-end p-4 bg-grey-10 rounded-b mb-1 font-medium dark:bg-grey-90"
|
||||
>
|
||||
<input
|
||||
id="file-upload"
|
||||
|
|
@ -300,10 +314,12 @@ module.exports.wip = function(state, emit) {
|
|||
class="flex items-center cursor-pointer"
|
||||
title="${state.translate('addFilesButton')}"
|
||||
>
|
||||
<img src="${assets.get('addfiles.svg')}" class="w-6 h-6 mr-2" />
|
||||
<svg class="w-6 h-6 mr-2 link-blue">
|
||||
<use xlink:href="${assets.get('addfiles.svg')}#plus" />
|
||||
</svg>
|
||||
${state.translate('addFilesButton')}
|
||||
</label>
|
||||
<div class="font-normal text-sm text-grey-darker">
|
||||
<div class="font-normal text-sm text-grey-70 dark:text-grey-40">
|
||||
${state.translate('totalSize', {
|
||||
size: bytes(state.archive.size)
|
||||
})}
|
||||
|
|
@ -378,22 +394,22 @@ module.exports.uploading = function(state, emit) {
|
|||
return html`
|
||||
<send-upload-area
|
||||
id="${archive.id}"
|
||||
class="flex flex-col items-start rounded shadow-light bg-white p-4 w-full"
|
||||
class="flex flex-col items-start rounded shadow-light bg-white p-4 w-full dark:bg-grey-90"
|
||||
>
|
||||
${archiveInfo(archive)}
|
||||
<div class="text-xs text-grey-dark w-full mt-2 mb-2">
|
||||
<div class="text-xs opacity-75 w-full mt-2 mb-2">
|
||||
${expiryInfo(state.translate, {
|
||||
dlimit: state.archive.dlimit,
|
||||
dtotal: 0,
|
||||
expiresAt: Date.now() + 500 + state.archive.timeLimit * 1000
|
||||
})}
|
||||
</div>
|
||||
<div class="text-blue-dark text-sm font-medium mt-2">
|
||||
<div class="link-blue text-sm font-medium mt-2">
|
||||
${progressPercent}
|
||||
</div>
|
||||
<progress class="my-3" value="${progress}">${progressPercent}</progress>
|
||||
<button
|
||||
class="text-blue-dark hover:text-blue-darker focus:text-blue-darker self-end font-medium"
|
||||
class="link-blue self-end font-medium"
|
||||
onclick=${cancel}
|
||||
title="${state.translate('deletePopupCancel')}"
|
||||
>
|
||||
|
|
@ -415,7 +431,7 @@ module.exports.empty = function(state, emit) {
|
|||
? ''
|
||||
: html`
|
||||
<button
|
||||
class="center font-medium text-sm text-blue-dark hover:text-blue-darker focus:text-blue-darker mt-4 mb-2"
|
||||
class="center font-medium text-sm link-blue mt-4 mb-2"
|
||||
onclick="${event => {
|
||||
event.stopPropagation();
|
||||
emit('signup-cta', 'drop');
|
||||
|
|
@ -428,14 +444,16 @@ module.exports.empty = function(state, emit) {
|
|||
`;
|
||||
return html`
|
||||
<send-upload-area
|
||||
class="flex flex-col items-center justify-center border-2 border-dashed border-grey-transparent rounded px-6 py-16 h-full w-full"
|
||||
class="flex flex-col items-center justify-center border-2 border-dashed border-grey-transparent rounded px-6 py-16 h-full w-full dark:border-grey-60"
|
||||
onclick="${e => {
|
||||
if (e.target.tagName !== 'LABEL') {
|
||||
document.getElementById('file-upload').click();
|
||||
}
|
||||
}}"
|
||||
>
|
||||
<img src="${assets.get('addfiles.svg')}" width="48" height="48" />
|
||||
<svg class="w-10 h-10 link-blue">
|
||||
<use xlink:href="/${assets.get('addfiles.svg')}#plus" />
|
||||
</svg>
|
||||
<div class="pt-6 pb-2 text-center text-lg font-bold tracking-wide">
|
||||
${state.translate('dragAndDropFiles')}
|
||||
</div>
|
||||
|
|
@ -469,14 +487,11 @@ module.exports.empty = function(state, emit) {
|
|||
`;
|
||||
|
||||
function focus(event) {
|
||||
event.target.nextElementSibling.classList.add('bg-blue-darker', 'outline');
|
||||
event.target.nextElementSibling.classList.add('bg-blue-70', 'outline');
|
||||
}
|
||||
|
||||
function blur(event) {
|
||||
event.target.nextElementSibling.classList.remove(
|
||||
'bg-blue-darker',
|
||||
'outline'
|
||||
);
|
||||
event.target.nextElementSibling.classList.remove('bg-blue-70', 'outline');
|
||||
}
|
||||
|
||||
function add(event) {
|
||||
|
|
@ -501,8 +516,10 @@ module.exports.preview = function(state, emit) {
|
|||
</div>
|
||||
`;
|
||||
return html`
|
||||
<send-archive class="flex flex-col max-h-full bg-white p-4 w-full md:w-128">
|
||||
<div class="border rounded py-3 px-6">
|
||||
<send-archive
|
||||
class="flex flex-col max-h-full bg-white p-4 w-full md:w-128 dark:bg-grey-90"
|
||||
>
|
||||
<div class="border rounded py-3 px-6 dark:border-grey-70">
|
||||
${archiveInfo(archive)} ${details}
|
||||
</div>
|
||||
<button
|
||||
|
|
@ -529,10 +546,10 @@ module.exports.downloading = function(state) {
|
|||
const progressPercent = percent(progress);
|
||||
return html`
|
||||
<send-archive
|
||||
class="flex flex-col bg-white rounded shadow-light p-4 w-full max-w-sm md:w-128"
|
||||
class="flex flex-col bg-white rounded shadow-light p-4 w-full max-w-sm md:w-128 dark:bg-grey-90"
|
||||
>
|
||||
${archiveInfo(archive)}
|
||||
<div class="text-blue-dark text-sm font-medium mt-2">
|
||||
<div class="link-blue text-sm font-medium mt-2">
|
||||
${progressPercent}
|
||||
</div>
|
||||
<progress class="my-3" value="${progress}">${progressPercent}</progress>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ module.exports = function body(main) {
|
|||
return function(state, emit) {
|
||||
const b = html`
|
||||
<body
|
||||
class="flex flex-col items-center font-sans md:h-screen md:bg-grey-lightest"
|
||||
class="flex flex-col items-center font-sans md:h-screen md:bg-grey-10 dark:bg-black"
|
||||
>
|
||||
${banner(state, emit)} ${state.cache(Header, 'header').render()}
|
||||
${main(state, emit)} ${state.cache(Footer, 'footer').render()}
|
||||
|
|
|
|||
|
|
@ -10,14 +10,16 @@ module.exports = function(name, url) {
|
|||
<h1 class="text-3xl font-bold my-4">
|
||||
${state.translate('notifyUploadEncryptDone')}
|
||||
</h1>
|
||||
<p class="font-normal leading-normal text-grey-darkest word-break-all">
|
||||
<p
|
||||
class="font-normal leading-normal text-grey-80 word-break-all dark:text-grey-40"
|
||||
>
|
||||
${state.translate('copyLinkDescription')} <br />
|
||||
${name}
|
||||
</p>
|
||||
<input
|
||||
type="text"
|
||||
id="share-url"
|
||||
class="w-full my-4 border rounded-lg leading-loose h-12 px-2 py-1"
|
||||
class="w-full my-4 border rounded-lg leading-loose h-12 px-2 py-1 dark:bg-grey-80"
|
||||
value="${url}"
|
||||
readonly="true"
|
||||
/>
|
||||
|
|
@ -29,7 +31,7 @@ module.exports = function(name, url) {
|
|||
${state.translate('copyLinkButton')}
|
||||
</button>
|
||||
<button
|
||||
class="text-blue-dark hover:text-blue-darker focus:text-blue-darker my-4 font-medium cursor-pointer focus:outline"
|
||||
class="link-blue my-4 font-medium cursor-pointer focus:outline"
|
||||
onclick="${close}"
|
||||
title="${state.translate('okButton')}"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -41,7 +41,9 @@ function preview(state, emit) {
|
|||
<h1 class="text-3xl font-bold mb-4">
|
||||
${state.translate('downloadTitle')}
|
||||
</h1>
|
||||
<p class="w-full text-grey-darkest text-center leading-normal">
|
||||
<p
|
||||
class="w-full text-grey-80 text-center leading-normal dark:text-grey-40"
|
||||
>
|
||||
${state.translate('downloadDescription')}
|
||||
</p>
|
||||
${archiveTile.preview(state, emit)}
|
||||
|
|
|
|||
|
|
@ -5,13 +5,13 @@ module.exports = function(state) {
|
|||
return html`
|
||||
<div
|
||||
id="download-complete"
|
||||
class="flex flex-col items-center justify-center h-full w-full bg-white p-2"
|
||||
class="flex flex-col items-center justify-center h-full w-full bg-white p-2 dark:bg-grey-90"
|
||||
>
|
||||
<h1 class="text-center text-3xl font-bold my-2">
|
||||
${state.translate('downloadFinish')}
|
||||
</h1>
|
||||
<img src="${assets.get('completed.svg')}" class="my-12 h-48" />
|
||||
<p class="text-grey-darkest leading-normal">
|
||||
<p class="text-grey-80 leading-normal dark:text-grey-40">
|
||||
${state.translate('trySendDescription')}
|
||||
</p>
|
||||
<p class="my-5">
|
||||
|
|
|
|||
|
|
@ -6,12 +6,14 @@ module.exports = function(state, emit) {
|
|||
|
||||
const div = html`
|
||||
<div
|
||||
class="h-full w-full flex flex-col items-center justify-center bg-white py-8 max-w-md mx-auto"
|
||||
class="h-full w-full flex flex-col items-center justify-center bg-white py-8 max-w-md mx-auto dark:bg-grey-90"
|
||||
>
|
||||
<h1 class="text-3xl font-bold mb-4">
|
||||
${state.translate('downloadTitle')}
|
||||
</h1>
|
||||
<p class="w-full mb-4 text-center text-grey-darkest leading-normal">
|
||||
<p
|
||||
class="w-full mb-4 text-center text-grey-80 dark:text-grey-40 leading-normal"
|
||||
>
|
||||
${state.translate('downloadDescription')}
|
||||
</p>
|
||||
<form
|
||||
|
|
@ -22,8 +24,8 @@ module.exports = function(state, emit) {
|
|||
<input
|
||||
id="password-input"
|
||||
class="w-full border-l border-t border-b rounded-l-lg rounded-r-none ${invalid
|
||||
? 'border-red'
|
||||
: 'border-grey'} leading-loose px-2 py-1"
|
||||
? 'border-red dark:border-red-40'
|
||||
: 'border-grey'} leading-loose px-2 py-1 dark:bg-grey-80"
|
||||
maxlength="32"
|
||||
autocomplete="off"
|
||||
placeholder="${state.translate('unlockInputPlaceholder')}"
|
||||
|
|
@ -34,7 +36,7 @@ module.exports = function(state, emit) {
|
|||
type="submit"
|
||||
id="password-btn"
|
||||
class="btn rounded-r-lg rounded-l-none ${invalid
|
||||
? 'bg-red hover:bg-red focus:bg-red'
|
||||
? 'bg-red hover:bg-red focus:bg-red dark:bg-red-40'
|
||||
: ''}"
|
||||
value="${state.translate('unlockButtonLabel')}"
|
||||
title="${state.translate('unlockButtonLabel')}"
|
||||
|
|
@ -42,7 +44,7 @@ module.exports = function(state, emit) {
|
|||
</form>
|
||||
<label
|
||||
id="password-error"
|
||||
class="${invalid ? '' : 'invisible'} text-red my-4"
|
||||
class="${invalid ? '' : 'invisible'} text-red dark:text-red-40 my-4"
|
||||
for="password-input"
|
||||
>
|
||||
${state.translate('passwordTryAgain')}
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ module.exports = function(state, emit) {
|
|||
${state.translate('errorPageHeader')}
|
||||
</h1>
|
||||
<img class="my-12 h-48" src="${assets.get('error.svg')}" />
|
||||
<p class="max-w-md text-center text-grey-darkest leading-normal">
|
||||
<p class="max-w-md text-center text-grey-80 leading-normal">
|
||||
${state.translate('trySendDescription')}
|
||||
</p>
|
||||
<p class="my-5">
|
||||
|
|
|
|||
|
|
@ -19,12 +19,9 @@ class Footer extends Component {
|
|||
const feedbackUrl = `https://qsurvey.mozilla.com/s3/Firefox-Send-Product-Feedback?ver=${version}&browser=${browser}`;
|
||||
return html`
|
||||
<footer
|
||||
class="flex flex-col md:flex-row items-start w-full flex-none self-start p-6 md:p-8 font-medium text-xs text-grey-dark md:items-center justify-between"
|
||||
class="flex flex-col md:flex-row items-start w-full flex-none self-start p-6 md:p-8 font-medium text-xs text-grey-60 dark:text-grey-40 md:items-center justify-between"
|
||||
>
|
||||
<a
|
||||
class="mozilla-logo pb-10 md:pb-0 m-2"
|
||||
href="https://www.mozilla.org/"
|
||||
>
|
||||
<a class="mozilla-logo m-2" href="https://www.mozilla.org/">
|
||||
Mozilla
|
||||
</a>
|
||||
<ul
|
||||
|
|
|
|||
|
|
@ -16,15 +16,27 @@ class Header extends Component {
|
|||
this.account.render();
|
||||
return false;
|
||||
}
|
||||
|
||||
createElement() {
|
||||
const title =
|
||||
platform() === 'android'
|
||||
? html`
|
||||
<a class=""><img src="${assets.get('logo.svg')}"/></a>
|
||||
<a class="flex flex-row items-center">
|
||||
<img src="${assets.get('icon.svg')}" />
|
||||
<svg class="w-48">
|
||||
<use xlink:href="${assets.get('wordmark.svg')}#logo" />
|
||||
</svg>
|
||||
</a>
|
||||
`
|
||||
: html`
|
||||
<a class="" href="/"><img src="${assets.get('logo.svg')}"/></a>
|
||||
<a class="flex flex-row items-center" href="/">
|
||||
<img
|
||||
alt="${this.state.translate('title')}"
|
||||
src="${assets.get('icon.svg')}"
|
||||
/>
|
||||
<svg class="w-48 md:w-64">
|
||||
<use xlink:href="${assets.get('wordmark.svg')}#logo" />
|
||||
</svg>
|
||||
</a>
|
||||
`;
|
||||
return html`
|
||||
<header
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ const assets = require('../../common/assets');
|
|||
module.exports = function intro(state) {
|
||||
return html`
|
||||
<send-intro
|
||||
class="flex flex-col items-center justify-center bg-white px-6 md:py-0 py-6 mb-0 h-full w-full"
|
||||
class="flex flex-col items-center justify-center bg-white px-6 md:py-0 py-6 mb-0 h-full w-full dark:bg-grey-90"
|
||||
>
|
||||
<div class="mt-12 flex flex-col h-full">
|
||||
<h1 class="text-3xl font-bold md:pb-2">
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ module.exports = function(state, emit) {
|
|||
<main class="main">
|
||||
${state.modal && modal(state, emit)}
|
||||
<div
|
||||
class="flex flex-col items-center bg-white m-4 px-6 py-8 border border-grey-light md:border-none md:px-12 md:py-16 shadow w-full md:h-full"
|
||||
class="flex flex-col items-center bg-white m-4 px-6 py-8 border border-grey-30 md:border-none md:px-12 md:py-16 shadow w-full md:h-full dark:bg-grey-90"
|
||||
>
|
||||
<h1 class="text-center text-3xl font-bold">
|
||||
${state.translate('legalTitle')}
|
||||
|
|
@ -19,7 +19,7 @@ module.exports = function(state, emit) {
|
|||
href="https://www.mozilla.org/privacy/"
|
||||
target="__blank"
|
||||
rel="noopener noreferrer"
|
||||
class="text-blue-dark hover:underline"
|
||||
class="link-blue hover:underline"
|
||||
>Mozilla Privacy Policy</a
|
||||
>
|
||||
<span
|
||||
|
|
@ -31,7 +31,7 @@ module.exports = function(state, emit) {
|
|||
href="https://github.com/mozilla/send/blob/master/docs/metrics.md"
|
||||
target="__blank"
|
||||
rel="noopener noreferrer"
|
||||
class="text-blue-dark hover:underline"
|
||||
class="link-blue hover:underline"
|
||||
>here</a
|
||||
>.
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -3,13 +3,12 @@ const html = require('choo/html');
|
|||
module.exports = function(state, emit) {
|
||||
return html`
|
||||
<send-modal
|
||||
class="absolute inset-0 flex items-center justify-center overflow-hidden z-40 bg-white md:rounded-xl md:my-8"
|
||||
onclick="${close}"
|
||||
class="absolute inset-0 flex items-center justify-center overflow-hidden z-40 bg-white md:rounded-xl md:my-8 dark:bg-grey-90"
|
||||
>
|
||||
<div
|
||||
class="h-full w-full max-h-screen absolute top-0 flex items-center justify-center"
|
||||
>
|
||||
<div class="w-full" onclick="${e => e.stopPropagation()}">
|
||||
<div class="w-full">
|
||||
${state.modal(state, emit, close)}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ module.exports = function(state, emit) {
|
|||
'downloadTitle'
|
||||
)}</h1>
|
||||
<p
|
||||
class="w-full p-2 border border-yellow-light rounded md:w-4/5 text-orange-dark bg-yellow-lighter text-center leading-normal"
|
||||
class="w-full p-2 border border-yellow-50 rounded md:w-4/5 text-orange-60 bg-yellow-40 text-center leading-normal"
|
||||
>
|
||||
⚠️ ${state.translate('noStreamsWarning')} ⚠️
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ module.exports = function(state, emit) {
|
|||
${state.translate('expiredTitle')}
|
||||
</h1>
|
||||
<img src="${assets.get('notFound.svg')}" class="my-12" />
|
||||
<p class="max-w-md text-center text-grey-darkest leading-normal">
|
||||
<p class="max-w-md text-center text-grey-80 leading-normal">
|
||||
${state.translate('trySendDescription')}
|
||||
</p>
|
||||
<p class="my-5">
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ class Promo extends Component {
|
|||
createElement() {
|
||||
return html`
|
||||
<send-promo
|
||||
class="w-full flex-row items-center content-center justify-center bg-white text-grey-darkest px-4 py-3 flex border-b border-grey-banner leading-normal"
|
||||
class="w-full flex-row items-center content-center justify-center bg-white text-grey-80 px-4 py-3 flex border-b border-grey-banner leading-normal dark:bg-grey-90 dark:text-grey-20 dark:border-grey-80"
|
||||
>
|
||||
<div class="flex items-center mx-auto">
|
||||
<img
|
||||
|
|
@ -26,7 +26,7 @@ class Promo extends Component {
|
|||
<span class="ml-2 sm:ml-4 text-xs sm:text-base">
|
||||
${this.state.translate('trailheadPromo')}${' '}
|
||||
<a
|
||||
class="underline text-blue-dark"
|
||||
class="underline link-blue"
|
||||
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
|
||||
>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ module.exports = function(selected, options, translate, changed, htmlId) {
|
|||
return html`
|
||||
<select
|
||||
id="${htmlId}"
|
||||
class="appearance-none cursor-pointer border rounded bg-grey-lightest hover:border-blue-dark focus:border-blue-dark pl-1 pr-8 py-1 my-1 h-8"
|
||||
class="appearance-none cursor-pointer border rounded bg-grey-10 hover:border-blue-50 focus:border-blue-50 pl-1 pr-8 py-1 my-1 h-8 dark:bg-grey-80"
|
||||
onchange="${choose}"
|
||||
>
|
||||
${options.map(
|
||||
|
|
|
|||
|
|
@ -9,14 +9,16 @@ module.exports = function(name, url) {
|
|||
<h1 class="text-3xl font-bold my-4">
|
||||
${state.translate('notifyUploadEncryptDone')}
|
||||
</h1>
|
||||
<p class="font-normal leading-normal text-grey-darkest word-break-all">
|
||||
<p
|
||||
class="font-normal leading-normal text-grey-80 word-break-all dark:text-grey-40"
|
||||
>
|
||||
${state.translate('shareLinkDescription')}<br />
|
||||
${name}
|
||||
</p>
|
||||
<input
|
||||
type="text"
|
||||
id="share-url"
|
||||
class="w-full my-4 border rounded-lg leading-loose h-12 px-2 py-1"
|
||||
class="w-full my-4 border rounded-lg leading-loose h-12 px-2 py-1 dark:bg-grey-80"
|
||||
value="${url}"
|
||||
readonly="true"
|
||||
/>
|
||||
|
|
@ -28,7 +30,7 @@ module.exports = function(name, url) {
|
|||
${state.translate('shareLinkButton')}
|
||||
</button>
|
||||
<button
|
||||
class="text-blue-dark hover:text-blue-darker focus:text-blue-darker my-4 font-medium cursor-pointer focus:outline"
|
||||
class="link-blue my-4 font-medium cursor-pointer focus:outline"
|
||||
onclick="${close}"
|
||||
title="${state.translate('okButton')}"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ module.exports = function(trigger) {
|
|||
${state.translate('accountBenefitTitle')}
|
||||
</h1>
|
||||
<ul
|
||||
class="leading-normal text-grey-darkest my-2 mt-4 pl-4 md:self-center"
|
||||
class="leading-normal list-disc text-grey-80 my-2 mt-4 pl-4 md:self-center dark:text-grey-40"
|
||||
>
|
||||
<li>
|
||||
${state.translate('accountBenefitLargeFiles', {
|
||||
|
|
@ -42,7 +42,7 @@ module.exports = function(trigger) {
|
|||
<input
|
||||
id="email-input"
|
||||
type="email"
|
||||
class="${hidden} border rounded-lg w-full px-2 py-1 h-12 mb-3 text-lg text-grey-darker leading-loose"
|
||||
class="${hidden} border rounded-lg w-full px-2 py-1 h-12 mb-3 text-lg text-grey-70 leading-loose dark:bg-grey-80 dark:text-white"
|
||||
placeholder=${state.translate('emailPlaceholder')}
|
||||
/>
|
||||
<input
|
||||
|
|
@ -54,7 +54,7 @@ module.exports = function(trigger) {
|
|||
/>
|
||||
</form>
|
||||
<button
|
||||
class="my-3 text-blue-dark hover:text-blue-darker focus:text-blue-darker font-medium"
|
||||
class="my-3 link-blue font-medium"
|
||||
title="${state.translate('deletePopupCancel')}"
|
||||
onclick=${cancel}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ module.exports = function() {
|
|||
<h1 class="text-3xl font-bold my-4">
|
||||
Tell us what you think.
|
||||
</h1>
|
||||
<p class="font-normal leading-normal text-grey-darkest px-4">
|
||||
<p class="font-normal leading-normal text-grey-80 px-4">
|
||||
Love Firefox Send? Take a quick survey to let us know how we can make
|
||||
it better.
|
||||
</p>
|
||||
|
|
@ -30,7 +30,7 @@ module.exports = function() {
|
|||
Give feedback
|
||||
</a>
|
||||
<button
|
||||
class="text-blue-dark hover:text-blue-darker focus:text-blue-darker font-medium cursor-pointer focus:outline"
|
||||
class="link-blue font-medium cursor-pointer focus:outline"
|
||||
onclick="${close}"
|
||||
title="Skip"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ module.exports = function(state, emit) {
|
|||
<main class="main">
|
||||
${state.modal && modal(state, emit)}
|
||||
<section
|
||||
class="flex flex-col items-center justify-center text-center bg-white m-6 px-6 py-8 border border-grey-light md:border-none md:px-12 md:py-16 shadow w-full md:h-full"
|
||||
class="flex flex-col items-center justify-center text-center bg-white m-6 px-6 py-8 border border-grey-30 md:border-none md:px-12 md:py-16 shadow w-full md:h-full dark:bg-grey-90"
|
||||
>
|
||||
<h1 class="text-3xl font-bold">${strings.header}</h1>
|
||||
<p class="mt-4 mb-8 max-w-md leading-normal">${strings.description}</p>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue