Add ability to change the branding
This commit is contained in:
parent
81741dcc76
commit
560747106b
28 changed files with 275 additions and 201 deletions
|
@ -53,7 +53,7 @@ function password(state) {
|
|||
id="password-input"
|
||||
class="${state.archive.password
|
||||
? ''
|
||||
: 'invisible'} border rounded focus:border-blue-60 leading-normal my-1 py-1 px-2 h-8 dark:bg-grey-80"
|
||||
: 'invisible'} border rounded focus:border-primary leading-normal my-1 py-1 px-2 h-8 dark:bg-grey-80"
|
||||
autocomplete="off"
|
||||
maxlength="${MAX_LENGTH}"
|
||||
type="password"
|
||||
|
@ -150,7 +150,7 @@ function password(state) {
|
|||
function fileInfo(file, action) {
|
||||
return html`
|
||||
<send-file class="flex flex-row items-center p-3 w-full">
|
||||
<svg class="h-8 w-8 text-white dark:text-grey-90">
|
||||
<svg class="h-8 w-8 text-primary">
|
||||
<use xlink:href="${assets.get('blue_file.svg')}#icon"/>
|
||||
</svg>
|
||||
<p class="ml-4 w-full">
|
||||
|
@ -166,7 +166,7 @@ function fileInfo(file, action) {
|
|||
function archiveInfo(archive, action) {
|
||||
return html`
|
||||
<p class="w-full flex items-center">
|
||||
<svg class="h-8 w-6 mr-3 flex-shrink-0 text-white dark:text-grey-90">
|
||||
<svg class="h-8 w-6 mr-3 flex-shrink-0 text-primary">
|
||||
<use xlink:href="${assets.get('blue_file.svg')}#icon"/>
|
||||
</svg>
|
||||
<p class="flex-grow">
|
||||
|
@ -188,7 +188,7 @@ function archiveDetails(translate, archive) {
|
|||
ontoggle="${toggled}"
|
||||
>
|
||||
<summary
|
||||
class="flex items-center link-blue text-sm cursor-pointer outline-none"
|
||||
class="flex items-center link-primary text-sm cursor-pointer outline-none"
|
||||
>
|
||||
<svg
|
||||
class="fill-current w-4 h-4 mr-1"
|
||||
|
@ -218,7 +218,7 @@ module.exports = function(state, emit, archive) {
|
|||
state.capabilities.share || platform() === 'android'
|
||||
? html`
|
||||
<button
|
||||
class="link-blue self-end flex items-start"
|
||||
class="link-primary self-end flex items-start"
|
||||
onclick=${share}
|
||||
title="Share link"
|
||||
>
|
||||
|
@ -230,7 +230,7 @@ module.exports = function(state, emit, archive) {
|
|||
`
|
||||
: html`
|
||||
<button
|
||||
class="link-blue focus:outline self-end flex items-center"
|
||||
class="link-primary focus:outline self-end flex items-center"
|
||||
onclick=${copy}
|
||||
title="${state.translate('copyLinkButton')}"
|
||||
>
|
||||
|
@ -244,7 +244,7 @@ module.exports = function(state, emit, archive) {
|
|||
platform() === 'web'
|
||||
? html`
|
||||
<a
|
||||
class="flex items-baseline link-blue"
|
||||
class="flex items-baseline link-primary"
|
||||
href="${archive.url}"
|
||||
title="${state.translate('downloadButtonLabel')}"
|
||||
tabindex="0"
|
||||
|
@ -358,7 +358,7 @@ module.exports.wip = function(state, emit) {
|
|||
class="flex items-center cursor-pointer"
|
||||
title="${state.translate('addFilesButton')}"
|
||||
>
|
||||
<svg class="w-6 h-6 mr-2 link-blue">
|
||||
<svg class="w-6 h-6 mr-2 link-primary">
|
||||
<use xlink:href="${assets.get('addfiles.svg')}#plus" />
|
||||
</svg>
|
||||
${state.translate('addFilesButton')}
|
||||
|
@ -448,12 +448,12 @@ module.exports.uploading = function(state, emit) {
|
|||
expiresAt: Date.now() + 500 + state.archive.timeLimit * 1000
|
||||
})}
|
||||
</div>
|
||||
<div class="link-blue text-sm font-medium mt-2">
|
||||
<div class="link-primary text-sm font-medium mt-2">
|
||||
${progressPercent}
|
||||
</div>
|
||||
<progress class="my-3" value="${progress}">${progressPercent}</progress>
|
||||
<button
|
||||
class="link-blue self-end font-medium"
|
||||
class="link-primary self-end font-medium"
|
||||
onclick=${cancel}
|
||||
title="${state.translate('deletePopupCancel')}"
|
||||
>
|
||||
|
@ -475,7 +475,7 @@ module.exports.empty = function(state, emit) {
|
|||
? ''
|
||||
: html`
|
||||
<button
|
||||
class="center font-medium text-sm link-blue mt-4 mb-2"
|
||||
class="center font-medium text-sm link-primary mt-4 mb-2"
|
||||
onclick="${event => {
|
||||
event.stopPropagation();
|
||||
emit('signup-cta', 'drop');
|
||||
|
@ -495,7 +495,7 @@ module.exports.empty = function(state, emit) {
|
|||
}
|
||||
}}"
|
||||
>
|
||||
<svg class="w-10 h-10 link-blue">
|
||||
<svg class="w-10 h-10 link-primary">
|
||||
<use xlink:href="/${assets.get('addfiles.svg')}#plus" />
|
||||
</svg>
|
||||
<div class="pt-6 pb-2 text-center text-lg font-bold tracking-wide">
|
||||
|
@ -531,11 +531,11 @@ module.exports.empty = function(state, emit) {
|
|||
`;
|
||||
|
||||
function focus(event) {
|
||||
event.target.nextElementSibling.classList.add('bg-blue-70', 'outline');
|
||||
event.target.nextElementSibling.classList.add('bg-primary', 'outline');
|
||||
}
|
||||
|
||||
function blur(event) {
|
||||
event.target.nextElementSibling.classList.remove('bg-blue-70', 'outline');
|
||||
event.target.nextElementSibling.classList.remove('bg-primary', 'outline');
|
||||
}
|
||||
|
||||
function add(event) {
|
||||
|
@ -593,7 +593,7 @@ module.exports.downloading = function(state) {
|
|||
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="link-blue text-sm font-medium mt-2">
|
||||
<div class="link-primary text-sm font-medium mt-2">
|
||||
${progressPercent}
|
||||
</div>
|
||||
<progress class="my-3" value="${progress}">${progressPercent}</progress>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue