updated styles

This commit is contained in:
Danny Coates 2019-02-26 14:52:37 -08:00
parent 4cb6646cce
commit 0b8eae11de
No known key found for this signature in database
GPG Key ID: 4C442633C62E00CB
5 changed files with 45 additions and 25 deletions

View File

@ -108,8 +108,8 @@ function fileInfo(file, action) {
<send-file class="flex flex-row items-center p-3 w-full">
<img class="h-8" src="${assets.get('blue_file.svg')}"/>
<p class="ml-4 w-full">
<h1 class="text-sm font-medium word-break-all">${file.name}</h1>
<div class="text-xs font-normal opacity-75 pt-1">${bytes(
<h1 class="text-base font-medium word-break-all">${file.name}</h1>
<div class="text-sm font-normal opacity-75 pt-1">${bytes(
file.size
)}</div>
<div class="hidden">${file.type}</div>
@ -203,12 +203,12 @@ module.exports = function(state, emit, archive) {
title="${state.translate('deleteButtonHover')}"
src="${assets.get('close-16.svg')}"
onclick=${del}/>
<h1 class="text-sm font-medium word-break-all">${archive.name}</h1>
<div class="text-xs font-normal opacity-75 pt-1">${bytes(
<h1 class="text-base font-medium word-break-all">${archive.name}</h1>
<div class="text-sm font-normal opacity-75 pt-1">${bytes(
archive.size
)}</div>
</p>
<div class="text-xs text-grey-dark w-full mt-2 mb-2">
<div class="text-sm opacity-75 w-full mt-2 mb-2">
${expiryInfo(state.translate, archive)}
</div>
${archiveDetails(state.translate, archive)}
@ -388,11 +388,17 @@ module.exports.empty = function(state, emit) {
const upsell = state.user.loggedIn
? ''
: html`
<p class="center font-medium text-xs text-grey-dark mt-4 mb-2">
<button
class="center font-medium text-sm text-blue-dark hover:text-blue-darker focus:text-blue-darker mt-4 mb-2"
onclick="${event => {
event.stopPropagation();
emit('signup-cta');
}}"
>
${state.translate('signInSizeBump', {
size: bytes(state.LIMITS.MAX_FILE_SIZE, 0)
})}
</p>
</button>
`;
return html`
<send-upload-area
@ -462,19 +468,25 @@ module.exports.preview = function(state, emit) {
if (archive.open === undefined) {
archive.open = true;
}
const single = archive.manifest.files.length === 1;
const details = single
? ''
: html`
<div class="mt-4 h-full md:h-48 overflow-y-auto">
${archiveDetails(state.translate, archive)}
</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">
<p class="w-full mb-4">
<p class="w-full">
<img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/>
<h1 class="text-sm font-medium word-break-all">${archive.name}</h1>
<div class="text-xs font-normal opacity-75 pt-1">${bytes(
archive.size
)}</div>
</p>
<div class="h-full md:h-48 overflow-y-auto">
${archiveDetails(state.translate, archive)}
</div>
${details}
</div>
<button
id="download-btn"
@ -497,7 +509,7 @@ module.exports.downloading = function(state) {
const progress = state.transfer.progressRatio;
const progressPercent = percent(progress);
return html`
<send-archive class="flex flex-col bg-white rounded shadow-light p-4 w-full md:w-4/5">
<send-archive class="flex flex-col bg-white rounded shadow-light p-4 w-full max-w-sm md:w-128">
<p class="w-full mb-4">
<img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/>
<h1 class="text-sm font-medium word-break-all">${archive.name}</h1>

View File

@ -10,7 +10,7 @@ module.exports = function(name, url) {
<h1 class="font-bold my-4">
${state.translate('notifyUploadEncryptDone')}
</h1>
<p class="font-normal leading-normal text-grey-darker word-break-all">
<p class="font-normal leading-normal text-grey-darkest word-break-all">
${state.translate('copyUrlFormLabel')} <br />
${name}
</p>

View File

@ -111,7 +111,9 @@ module.exports = function(state, emit) {
case 'downloading':
case 'decrypting':
content = html`
<div class="flex flex-col w-full h-full items-center mt-8">
<div
class="flex flex-col w-full h-full items-center md:justify-center md:-mt-8"
>
<h1 class="mb-4">${state.translate('downloadingTitle')}</h1>
${archiveTile.downloading(state, emit)}
</div>
@ -126,7 +128,9 @@ module.exports = function(state, emit) {
<h1 class="text-center font-bold my-4 text-2xl">
${state.translate('downloadFinish')}
</h1>
<p class="pb-2">${state.translate('downloadFinishText')}</p>
<p class="pb-2 text-grey-darkest leading-normal">
${state.translate('downloadFinishText')}
</p>
<p class="mb-4">
<a
href="/"
@ -142,7 +146,9 @@ module.exports = function(state, emit) {
content = html`
<div class="flex flex-col w-full h-full items-center justify-center">
<h1 class="mb-4">${state.translate('downloadFilesTitle')}</h1>
<p class="w-full md:w-4/5 font-light text-center">
<p
class="w-full md:w-4/5 font-light text-grey-darkest text-center leading-normal"
>
${state.translate('downloadMessage')}
</p>
${archiveTile.preview(state, emit)}

View File

@ -9,7 +9,7 @@ module.exports = function(state, emit) {
<div
class="flex flex-col items-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"
>
<h1 class="text-pink-dark text-2xl text-center">
<h1 class="text-2xl text-center">
${state.translate('expiredPageHeaderUpdate')}
</h1>
<img
@ -17,7 +17,9 @@ module.exports = function(state, emit) {
src="${assets.get('illustration_expired.svg')}"
id="expired-img"
/>
<p class="pb-2">${state.translate('downloadFinishText')}</p>
<p class="pb-2 text-grey-darkest">
${state.translate('downloadFinishText')}
</p>
<p class="mb-4">
<a
href="/"

View File

@ -46,7 +46,7 @@ const colors = {
transparent: 'transparent',
black: '#22292f',
'grey-darkest': '#3d4852',
'grey-darkest': '#4a4a4f',
'grey-darker': '#606f7b',
'grey-dark': '#8795a1',
grey: '#B1B1B3',