Add ability to change the branding

This commit is contained in:
Marian Hähnlein 2022-04-12 15:58:58 +02:00
parent 81741dcc76
commit 560747106b
No known key found for this signature in database
GPG key ID: B43047632CA1D3D6
28 changed files with 275 additions and 201 deletions

View file

@ -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>