Merge branch 'feature/branding' into 'master'

Add ability to change the branding

See merge request timvisee/send!23
This commit is contained in:
Tim Visée 2022-05-12 19:52:46 +00:00
commit dda964ebf9
28 changed files with 275 additions and 201 deletions

View File

@ -7,7 +7,7 @@ const experiments = {
return true; return true;
}, },
variant: function() { variant: function() {
return ['white-blue', 'blue', 'white-violet', 'violet'][ return ['white-primary', 'primary', 'white-violet', 'violet'][
Math.floor(Math.random() * 4) Math.floor(Math.random() * 4)
]; ];
}, },

View File

@ -39,7 +39,7 @@ body {
} }
.btn { .btn {
@apply bg-blue-60; @apply bg-primary;
@apply text-white; @apply text-white;
@apply cursor-pointer; @apply cursor-pointer;
@apply py-4; @apply py-4;
@ -48,11 +48,11 @@ body {
} }
.btn:hover { .btn:hover {
@apply bg-blue-70; @apply bg-primary_accent;
} }
.btn:focus { .btn:focus {
@apply bg-blue-70; @apply bg-primary_accent;
} }
.checkbox { .checkbox {
@ -82,16 +82,16 @@ body {
} }
.checkbox > label:hover::before { .checkbox > label:hover::before {
@apply border-blue-50; @apply border-primary;
} }
.checkbox > input:focus + label::before { .checkbox > input:focus + label::before {
@apply border-blue-50; @apply border-primary;
} }
.checkbox > input:checked + label::before { .checkbox > input:checked + label::before {
@apply bg-blue-50; @apply bg-primary;
@apply border-blue-50; @apply border-primary;
background-image: url('../assets/lock.svg'); background-image: url('../assets/lock.svg');
background-position: center; background-position: center;
@ -104,8 +104,8 @@ body {
} }
.checkbox > input:disabled + label::before { .checkbox > input:disabled + label::before {
@apply bg-blue-50; @apply bg-primary;
@apply border-blue-50; @apply border-primary;
background-image: url('../assets/lock.svg'); background-image: url('../assets/lock.svg');
background-position: center; background-position: center;
@ -153,16 +153,16 @@ footer li a:hover {
white-space: nowrap; white-space: nowrap;
} }
.link-blue { .link-primary {
@apply text-blue-60; @apply text-primary;
} }
.link-blue:hover { .link-primary:hover {
@apply text-blue-70; @apply text-primary_accent;
} }
.link-blue:focus { .link-primary:focus {
@apply text-blue-70; @apply text-primary_accent;
} }
.main-header img { .main-header img {
@ -212,7 +212,7 @@ progress::-webkit-progress-value {
rgba(255, 255, 255, 0.4) 80%, rgba(255, 255, 255, 0.4) 80%,
transparent 80% transparent 80%
), ),
-webkit-linear-gradient(left, #0a84ff, #0a84ff); -webkit-linear-gradient(left, var(--color-primary), var(--color-primary));
/* stylelint-enable */ /* stylelint-enable */
border-radius: 2px; border-radius: 2px;
background-size: 21px 20px, 100% 100%, 100% 100%; background-size: 21px 20px, 100% 100%, 100% 100%;
@ -232,7 +232,7 @@ progress::-moz-progress-bar {
rgba(255, 255, 255, 0.4) 80%, rgba(255, 255, 255, 0.4) 80%,
transparent 80% transparent 80%
), ),
-moz-linear-gradient(left, #0a84ff, #0a84ff); -moz-linear-gradient(left, var(--color-primary), var(--color-primary));
/* stylelint-enable */ /* stylelint-enable */
border-radius: 2px; border-radius: 2px;
background-size: 21px 20px, 100% 100%, 100% 100%; background-size: 21px 20px, 100% 100%, 100% 100%;
@ -283,28 +283,28 @@ select {
} }
.btn { .btn {
@apply bg-blue-40; @apply bg-primary;
@apply text-white; @apply text-white;
} }
.btn:hover { .btn:hover {
@apply bg-blue-50; @apply bg-primary_accent;
} }
.btn:focus { .btn:focus {
@apply bg-blue-50; @apply bg-primary_accent;
} }
.link-blue { .link-primary {
@apply text-blue-40; @apply text-primary;
} }
.link-blue:hover { .link-primary:hover {
@apply text-blue-50; @apply text-primary_accent;
} }
.link-blue:focus { .link-primary:focus {
@apply text-blue-50; @apply text-primary_accent;
} }
.main > section { .main > section {
@ -363,20 +363,20 @@ select {
/* begin signin button color experiment */ /* begin signin button color experiment */
.white-blue { .white-primary {
@apply border-blue-60; @apply border-primary;
@apply border-2; @apply border-2;
@apply text-blue-60; @apply text-primary;
} }
.white-blue:hover, .white-primary:hover,
.white-blue:focus { .white-primary:focus {
@apply bg-blue-60; @apply bg-primary;
@apply text-white; @apply text-white;
} }
.blue { .primary {
@apply bg-blue-60; @apply bg-primary;
@apply text-white; @apply text-white;
} }

View File

@ -69,7 +69,7 @@ class Account extends Component {
return html` return html`
<send-account> <send-account>
<button <button
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" class="px-4 py-2 md:px-8 md:py-4 focus:outline signin border-2 link-primary border-primary hover:border-primary dark:border-primary dark:hover:border-primary"
onclick="${e => this.login(e)}" onclick="${e => this.login(e)}"
title="${translate('signInOnlyButton')}" title="${translate('signInOnlyButton')}"
> >
@ -83,7 +83,7 @@ class Account extends Component {
<input <input
type="image" type="image"
alt="${user.email}" alt="${user.email}"
class="w-8 h-8 rounded-full border text-blue-50 md:text-white focus:outline" class="w-8 h-8 rounded-full border text-primary md:text-white focus:outline"
src="${user.avatar}" src="${user.avatar}"
onclick="${e => this.avatarClick(e)}" onclick="${e => this.avatarClick(e)}"
/> />
@ -95,7 +95,7 @@ class Account extends Component {
<li class="p-2 text-grey-60 dark:text-grey-50">${user.email}</li> <li class="p-2 text-grey-60 dark:text-grey-50">${user.email}</li>
<li> <li>
<button <button
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" class="block w-full text-left px-4 py-2 text-grey-80 dark:text-grey-30 hover:bg-primary hover:text-white cursor-pointer focus:outline"
onclick="${e => this.logout(e)}" onclick="${e => this.logout(e)}"
title="${translate('signOut')}" title="${translate('signOut')}"
> >

View File

@ -53,7 +53,7 @@ function password(state) {
id="password-input" id="password-input"
class="${state.archive.password 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" autocomplete="off"
maxlength="${MAX_LENGTH}" maxlength="${MAX_LENGTH}"
type="password" type="password"
@ -150,7 +150,7 @@ function password(state) {
function fileInfo(file, action) { function fileInfo(file, action) {
return html` return html`
<send-file class="flex flex-row items-center p-3 w-full"> <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"/> <use xlink:href="${assets.get('blue_file.svg')}#icon"/>
</svg> </svg>
<p class="ml-4 w-full"> <p class="ml-4 w-full">
@ -166,7 +166,7 @@ function fileInfo(file, action) {
function archiveInfo(archive, action) { function archiveInfo(archive, action) {
return html` return html`
<p class="w-full flex items-center"> <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"/> <use xlink:href="${assets.get('blue_file.svg')}#icon"/>
</svg> </svg>
<p class="flex-grow"> <p class="flex-grow">
@ -188,7 +188,7 @@ function archiveDetails(translate, archive) {
ontoggle="${toggled}" ontoggle="${toggled}"
> >
<summary <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 <svg
class="fill-current w-4 h-4 mr-1" class="fill-current w-4 h-4 mr-1"
@ -218,7 +218,7 @@ module.exports = function(state, emit, archive) {
state.capabilities.share || platform() === 'android' state.capabilities.share || platform() === 'android'
? html` ? html`
<button <button
class="link-blue self-end flex items-start" class="link-primary self-end flex items-start"
onclick=${share} onclick=${share}
title="Share link" title="Share link"
> >
@ -230,7 +230,7 @@ module.exports = function(state, emit, archive) {
` `
: html` : html`
<button <button
class="link-blue focus:outline self-end flex items-center" class="link-primary focus:outline self-end flex items-center"
onclick=${copy} onclick=${copy}
title="${state.translate('copyLinkButton')}" title="${state.translate('copyLinkButton')}"
> >
@ -244,7 +244,7 @@ module.exports = function(state, emit, archive) {
platform() === 'web' platform() === 'web'
? html` ? html`
<a <a
class="flex items-baseline link-blue" class="flex items-baseline link-primary"
href="${archive.url}" href="${archive.url}"
title="${state.translate('downloadButtonLabel')}" title="${state.translate('downloadButtonLabel')}"
tabindex="0" tabindex="0"
@ -358,7 +358,7 @@ module.exports.wip = function(state, emit) {
class="flex items-center cursor-pointer" class="flex items-center cursor-pointer"
title="${state.translate('addFilesButton')}" 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" /> <use xlink:href="${assets.get('addfiles.svg')}#plus" />
</svg> </svg>
${state.translate('addFilesButton')} ${state.translate('addFilesButton')}
@ -448,12 +448,12 @@ module.exports.uploading = function(state, emit) {
expiresAt: Date.now() + 500 + state.archive.timeLimit * 1000 expiresAt: Date.now() + 500 + state.archive.timeLimit * 1000
})} })}
</div> </div>
<div class="link-blue text-sm font-medium mt-2"> <div class="link-primary text-sm font-medium mt-2">
${progressPercent} ${progressPercent}
</div> </div>
<progress class="my-3" value="${progress}">${progressPercent}</progress> <progress class="my-3" value="${progress}">${progressPercent}</progress>
<button <button
class="link-blue self-end font-medium" class="link-primary self-end font-medium"
onclick=${cancel} onclick=${cancel}
title="${state.translate('deletePopupCancel')}" title="${state.translate('deletePopupCancel')}"
> >
@ -475,7 +475,7 @@ module.exports.empty = function(state, emit) {
? '' ? ''
: html` : html`
<button <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 => { onclick="${event => {
event.stopPropagation(); event.stopPropagation();
emit('signup-cta', 'drop'); 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" /> <use xlink:href="/${assets.get('addfiles.svg')}#plus" />
</svg> </svg>
<div class="pt-6 pb-2 text-center text-lg font-bold tracking-wide"> <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) { function focus(event) {
event.target.nextElementSibling.classList.add('bg-blue-70', 'outline'); event.target.nextElementSibling.classList.add('bg-primary', 'outline');
} }
function blur(event) { function blur(event) {
event.target.nextElementSibling.classList.remove('bg-blue-70', 'outline'); event.target.nextElementSibling.classList.remove('bg-primary', 'outline');
} }
function add(event) { 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" 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)} ${archiveInfo(archive)}
<div class="link-blue text-sm font-medium mt-2"> <div class="link-primary text-sm font-medium mt-2">
${progressPercent} ${progressPercent}
</div> </div>
<progress class="my-3" value="${progress}">${progressPercent}</progress> <progress class="my-3" value="${progress}">${progressPercent}</progress>

View File

@ -42,7 +42,7 @@ module.exports = function(name, url) {
${state.translate('copyLinkButton')} ${state.translate('copyLinkButton')}
</button> </button>
<button <button
class="link-blue my-4 font-medium cursor-pointer focus:outline" class="link-primary my-4 font-medium cursor-pointer focus:outline"
onclick="${close}" onclick="${close}"
title="${state.translate('okButton')}" title="${state.translate('okButton')}"
> >

View File

@ -11,7 +11,9 @@ module.exports = function(state) {
<h1 class="text-center text-3xl font-bold my-2"> <h1 class="text-center text-3xl font-bold my-2">
${state.translate('downloadFinish')} ${state.translate('downloadFinish')}
</h1> </h1>
<img src="${assets.get('completed.svg')}" class="my-8 h-48" /> <svg class="my-8 h-48 text-primary">
<use xlink:href="${assets.get('completed.svg')}#Page-1" />
</svg>
<p <p
class="text-grey-80 leading-normal dark:text-grey-40 ${state.user class="text-grey-80 leading-normal dark:text-grey-40 ${state.user
.loggedIn .loggedIn

View File

@ -13,7 +13,9 @@ module.exports = function(state, emit) {
<h1 class="text-center text-3xl font-bold my-2"> <h1 class="text-center text-3xl font-bold my-2">
${state.translate('errorPageHeader')} ${state.translate('errorPageHeader')}
</h1> </h1>
<img class="my-12 h-48" src="${assets.get('error.svg')}" /> <svg class="text-primary my-12 h-48">
<use xlink:href="${assets.get('error.svg')}#svg114" />
</svg>
<p <p
class="max-w-md text-center text-grey-80 leading-normal dark:text-grey-40 ${state class="max-w-md text-center text-grey-80 leading-normal dark:text-grey-40 ${state
.user.loggedIn .user.loggedIn

View File

@ -1,9 +1,11 @@
/*global WEB_UI*/
const { platform } = require('../utils'); const { platform } = require('../utils');
const assets = require('../../common/assets'); const assets = require('../../common/assets');
const size = 32; const size = 32;
const loaderWidth = 5; const loaderWidth = 5;
const loaderColor = '#0090ed'; const loaderColor = WEB_UI.COLORS.PRIMARY;
function drawCircle(canvas, context, color, lineWidth, outerWidth, percent) { function drawCircle(canvas, context, color, lineWidth, outerWidth, percent) {
canvas.width = canvas.height = outerWidth; canvas.width = canvas.height = outerWidth;
@ -32,7 +34,10 @@ module.exports.updateFavicon = function(progressRatio) {
const progress = progressRatio * 100; const progress = progressRatio * 100;
if (progress === 0 || progress === 100) { if (progress === 0 || progress === 100) {
link.type = 'image/png'; link.type = 'image/png';
link.href = assets.get('favicon-32x32.png'); link.href =
WEB_UI.CUSTOM_ASSETS.favicon_32px !== ''
? WEB_UI.CUSTOM_ASSETS.favicon_32px
: assets.get('favicon-32x32.png');
return; return;
} }

View File

@ -18,13 +18,26 @@ class Header extends Component {
} }
createElement() { createElement() {
let assetMap = {};
if (this.state.ui !== undefined) assetMap = this.state.ui.assets;
else
assetMap = {
icon:
this.state.WEB_UI.CUSTOM_ASSETS.icon !== ''
? this.state.WEB_UI.CUSTOM_ASSETS.icon
: assets.get('icon.svg'),
wordmark:
this.state.WEB_UI.CUSTOM_ASSETS.wordmark !== ''
? this.state.WEB_UI.CUSTOM_ASSETS.wordmark
: assets.get('wordmark.svg') + '#logo'
};
const title = const title =
platform() === 'android' platform() === 'android'
? html` ? html`
<a class="flex flex-row items-center"> <a class="flex flex-row items-center">
<img src="${assets.get('icon.svg')}" /> <img src="${assetMap.icon}" />
<svg class="w-48"> <svg class="w-48">
<use xlink:href="${assets.get('wordmark.svg')}#logo" /> <use xlink:href="${assetMap.wordmark}" />
</svg> </svg>
</a> </a>
` `
@ -32,10 +45,10 @@ class Header extends Component {
<a class="flex flex-row items-center" href="/"> <a class="flex flex-row items-center" href="/">
<img <img
alt="${this.state.translate('title')}" alt="${this.state.translate('title')}"
src="${assets.get('icon.svg')}" src="${assetMap.icon}"
/> />
<svg viewBox="66 0 340 64" class="w-48 md:w-64"> <svg viewBox="66 0 340 64" class="w-48 md:w-64">
<use xlink:href="${assets.get('wordmark.svg')}#logo" /> <use xlink:href="${assetMap.wordmark}" />
</svg> </svg>
</a> </a>
`; `;

View File

@ -19,7 +19,7 @@ module.exports = function(state, emit) {
<form class="md:w-128" onsubmit=${submit}> <form class="md:w-128" onsubmit=${submit}>
<fieldset class="border rounded p-4 my-4" onchange=${optionChanged}> <fieldset class="border rounded p-4 my-4" onchange=${optionChanged}>
<div class="flex items-center mb-2"> <div class="flex items-center mb-2">
<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"/> <use xlink:href="${assets.get('blue_file.svg')}#icon"/>
</svg> </svg>
<p class="flex-grow"> <p class="flex-grow">

View File

@ -13,7 +13,9 @@ module.exports = function(state, emit) {
<h1 class="text-center text-3xl font-bold my-2"> <h1 class="text-center text-3xl font-bold my-2">
${state.translate('expiredTitle')} ${state.translate('expiredTitle')}
</h1> </h1>
<img src="${assets.get('notFound.svg')}" class="my-12" /> <svg class="text-primary my-12">
<use xlink:href="${assets.get('notFound.svg')}#svg124" />
</svg>
<p <p
class="max-w-md text-center text-grey-80 leading-normal dark:text-grey-40 ${state class="max-w-md text-center text-grey-80 leading-normal dark:text-grey-40 ${state
.user.loggedIn .user.loggedIn

View File

@ -3,15 +3,22 @@ const html = require('choo/html');
module.exports = function(selected, options, translate, changed, htmlId) { module.exports = function(selected, options, translate, changed, htmlId) {
function choose(event) { function choose(event) {
if (event.target.value != selected) { if (event.target.value != selected) {
console.log('Selected new value from dropdown', htmlId, ':', selected, '->', event.target.value) console.log(
'Selected new value from dropdown',
htmlId,
':',
selected,
'->',
event.target.value
);
changed(event.target.value); changed(event.target.value);
} }
} }
return html` return html`
<select <select
id="${htmlId}" id="${htmlId}"
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" class="appearance-none cursor-pointer border rounded bg-grey-10 hover:border-primary focus:border-primary pl-1 pr-8 py-1 my-1 h-8 dark:bg-grey-80"
data-selected="${selected}" data-selected="${selected}"
onchange="${choose}" onchange="${choose}"
> >

View File

@ -30,7 +30,7 @@ module.exports = function(name, url) {
${state.translate('shareLinkButton')} ${state.translate('shareLinkButton')}
</button> </button>
<button <button
class="link-blue my-4 font-medium cursor-pointer focus:outline" class="link-primary my-4 font-medium cursor-pointer focus:outline"
onclick="${close}" onclick="${close}"
title="${state.translate('okButton')}" title="${state.translate('okButton')}"
> >

View File

@ -50,7 +50,7 @@ module.exports = function() {
? '' ? ''
: html` : html`
<button <button
class="my-3 link-blue font-medium" class="my-3 link-primary font-medium"
title="${state.translate('deletePopupCancel')}" title="${state.translate('deletePopupCancel')}"
onclick=${cancel} onclick=${cancel}
> >

View File

@ -30,7 +30,7 @@ module.exports = function() {
Give feedback Give feedback
</a> </a>
<button <button
class="link-blue font-medium cursor-pointer focus:outline" class="link-primary font-medium cursor-pointer focus:outline"
onclick="${close}" onclick="${close}"
title="Skip" title="Skip"
> >

View File

@ -10,7 +10,7 @@ module.exports = function(state, emit) {
strings = unsupportedStrings(state); strings = unsupportedStrings(state);
why = html` why = html`
<a <a
class="text-blue" class="text-primary"
href="https://github.com/timvisee/send/blob/master/docs/faq.md#why-is-my-browser-not-supported" href="https://github.com/timvisee/send/blob/master/docs/faq.md#why-is-my-browser-not-supported"
> >
${state.translate('notSupportedLink')} ${state.translate('notSupportedLink')}

View File

@ -1,26 +1,24 @@
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<!--
This would be the elegant way, but chrome cannot handle masks in external SVGs.
See https://bugs.chromium.org/p/chromium/issues/detail?id=109212
-->
<!--
<symbol id="icon" viewBox="0 0 26 32"> <symbol id="icon" viewBox="0 0 26 32">
<defs> <g id="Fire-Icon">
<path d="M21.848475,31.6653183 L2.89005487,31.6653183 C1.32717435,31.6653183 0.104050469,30.3742431 0.104050469,28.8793139 L0.104050469,2.7860044 C0.104050469,1.22312388 1.39512568,0 2.89005487,0 L14.7135857,0 C15.4610503,0 16.2085149,0.271805307 16.6841742,0.815415921 L23.8190635,7.95030523 C24.3626741,8.49391584 24.6344794,9.17342911 24.6344794,9.9208937 L24.6344794,28.8793139 C24.6344794,30.3742431 23.4113555,31.6653183 21.848475,31.6653183 Z" id="path-1"></path> <mask id="mask">
</defs> <rect x="0" y="0" width="100" height="100" fill="white"/>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <path d="M7.2830232,8.93885547 L8.91906464,8.93885547" stroke="black" stroke-width="2" stroke-linecap="round"/>
<g id="Send_Ready_to_Send-Spec" transform="translate(-277.000000, -206.000000)"> <path d="M7.2830232,15.7798836 L17.5412669,15.7798836" stroke="black" stroke-width="2" stroke-linecap="round"/>
<g id="List-Item-1" transform="translate(253.000000, 192.000000)"> <path d="M7.2830232,22.6209117 L17.5412669,22.6209117" stroke="black" stroke-width="2" stroke-linecap="round"/>
<g id="Locked-File-Icon" transform="translate(24.000000, 14.000000)"> <path d="M24.3031318,10.6474633 L16.7826187,10.6474633 C15.2742552,10.6474633 14.051485,9.42469306 14.051485,7.91632957 L14.051485,0.395816478" id="Path" stroke-linecap="square" stroke="black" stroke-width="2" fill="none"/>
<g id="File-Icon"> </mask>
<mask id="mask-2" fill="white"> <path d="M21.848475,31.6653183 L2.89005487,31.6653183 C1.32717435,31.6653183 0.104050469,30.3742431 0.104050469,28.8793139 L0.104050469,2.7860044 C0.104050469,1.22312388 1.39512568,0 2.89005487,0 L14.7135857,0 C15.4610503,0 16.2085149,0.271805307 16.6841742,0.815415921 L23.8190635,7.95030523 C24.3626741,8.49391584 24.6344794,9.17342911 24.6344794,9.9208937 L24.6344794,28.8793139 C24.6344794,30.3742431 23.4113555,31.6653183 21.848475,31.6653183 Z" id="path-1" fill="currentColor" mask="url(#mask)" />
<use xlink:href="#path-1"></use>
</mask>
<use id="Mask" fill="#45a1ff" xlink:href="#path-1"></use>
<path d="M24.3031318,10.6474633 L16.7826187,10.6474633 C15.2742552,10.6474633 14.051485,9.42469306 14.051485,7.91632957 L14.051485,0.395816478" id="Path" stroke="currentColor" stroke-width="2" stroke-linecap="round" mask="url(#mask-2)"></path>
<path d="M7.2830232,8.93885547 L8.91906464,8.93885547" id="Path" stroke="currentColor" stroke-width="2" stroke-linecap="round" mask="url(#mask-2)"></path>
<path d="M7.2830232,15.7798836 L17.5412669,15.7798836" id="Path" stroke="currentColor" stroke-width="2" stroke-linecap="round" mask="url(#mask-2)"></path>
<path d="M7.2830232,22.6209117 L17.5412669,22.6209117" id="Path" stroke="currentColor" stroke-width="2" stroke-linecap="round" mask="url(#mask-2)"></path>
</g>
</g>
</g>
</g> </g>
</g>
</symbol> </symbol>
</svg> -->
<symbol id="icon" viewBox="0 0 26 32">
<path d="m 15 0 c 0.7 0.1 1.233 0.331 1.7 0.8 l 7.1 7.1 c 0.5 0.5 0.8 1.1 0.8 1.8 h -7.9 c -1 0 -1.7 -0.8 -1.7 -1.7 V 0.4 z M 24.65 11.647 v 17.23 c 0 1.5 -1.2 2.8 -2.8 2.8 h -19 c -1.234 -0.017 -2.694 -1.094 -2.7 -2.8 V 2.8 C 0.1 1.2 1.4 0 2.9 0 h 10.15 v 7.5 c -0.135 2.533 1.669 4.119 3.7 4.15 h 7.9 z M 6.3 8.9 c 0 0.6 0.4 1 1 1 h 1.6 c 0.5 0 1 -0.4 1 -1 c 0 -0.5 -0.5 -1 -1 -1 H 7.3 C 6.7 7.9 6.3 8.4 6.3 8.9 z M 18.5 22.6 c 0 -0.5 -0.4 -1 -1 -1 H 7.3 c -0.6 0 -1 0.5 -1 1 s 0.4 1 1 1 h 10.3 C 18.1 23.6 18.5 23.2 18.5 22.6 z M 18.5 15.8 c 0 -0.6 -0.4 -1 -1 -1 H 7.3 c -0.6 0 -1 0.4 -1 1 s 0.4 1 1 1 h 10.3 C 18.1 16.8 18.5 16.3 18.5 15.8 z" fill="currentColor" />
</symbol>
</svg>

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB

View File

@ -253,7 +253,7 @@
<path <path
id="cloud-check" id="cloud-check"
d="m 240.12048,110.31165 a 39.582604,39.582604 0 0 1 -10.23938,26.55813 33.935974,33.935974 0 0 1 -20.28366,10.27635 39.949372,39.949372 0 0 0 0.80301,-16.48404 16.944722,16.944722 0 0 0 7.65405,-4.47239 23.665469,23.665469 0 0 0 6.1311,-15.87805 26.589359,26.589359 0 0 0 -26.55812,-26.558123 c -0.87568,0 -5.3742,0.56186 -8.11085,0.91445 a 2.6398778,2.6398778 0 0 1 -2.83769,-1.77451 l -1.08155,-3.155106 A 32.772357,32.772357 0 0 0 158.37085,57.356128 31.757517,31.757517 0 0 0 124.14114,96.347867 l 1.13419,4.851433 a 2.6558127,2.6558127 0 0 1 -1.8179,3.14687 l -4.77313,1.44232 a 15.788381,15.788381 0 0 0 -11.35445,15.14642 10.699791,10.699791 0 0 0 2.19933,6.52543 12.871343,12.871343 0 0 0 9.50281,4.09782 h 7.25749 a 40.137987,40.137987 0 0 0 1.02966,15.93487 h -8.28715 A 28.433555,28.433555 0 0 1 96.535402,136.68302 26.739094,26.739094 0 0 1 91.39497,120.93491 31.54075,31.54075 0 0 1 107.53217,93.318597 c -0.13492,-1.42644 -0.20238,-2.84772 -0.20238,-4.25345 a 47.786197,47.786197 0 0 1 90.59848,-21.246498 42.542454,42.542454 0 0 1 42.19216,42.493001 z m -39.83719,26.55813 a 31.869752,31.869752 0 1 1 -31.86975,-31.86975 31.869752,31.869752 0 0 1 31.86975,31.86975 z m -15.15067,-11.86394 -2.71673,-2.01199 a 1.5763311,1.5763311 0 0 0 -2.00127,0.14182 l -16.73162,15.72576 -9.38033,-4.48657 a 1.7144864,1.7144864 0 0 0 -2.00221,0.5062 l -2.30275,2.94497 a 1.576756,1.576756 0 0 0 0.14182,2.00158 l 11.86234,11.8768 a 4.410933,4.410933 0 0 0 6.89242,-0.53116 l 16.51629,-24.2992 a 1.346922,1.346922 0 0 0 -0.27833,-1.86831 z" d="m 240.12048,110.31165 a 39.582604,39.582604 0 0 1 -10.23938,26.55813 33.935974,33.935974 0 0 1 -20.28366,10.27635 39.949372,39.949372 0 0 0 0.80301,-16.48404 16.944722,16.944722 0 0 0 7.65405,-4.47239 23.665469,23.665469 0 0 0 6.1311,-15.87805 26.589359,26.589359 0 0 0 -26.55812,-26.558123 c -0.87568,0 -5.3742,0.56186 -8.11085,0.91445 a 2.6398778,2.6398778 0 0 1 -2.83769,-1.77451 l -1.08155,-3.155106 A 32.772357,32.772357 0 0 0 158.37085,57.356128 31.757517,31.757517 0 0 0 124.14114,96.347867 l 1.13419,4.851433 a 2.6558127,2.6558127 0 0 1 -1.8179,3.14687 l -4.77313,1.44232 a 15.788381,15.788381 0 0 0 -11.35445,15.14642 10.699791,10.699791 0 0 0 2.19933,6.52543 12.871343,12.871343 0 0 0 9.50281,4.09782 h 7.25749 a 40.137987,40.137987 0 0 0 1.02966,15.93487 h -8.28715 A 28.433555,28.433555 0 0 1 96.535402,136.68302 26.739094,26.739094 0 0 1 91.39497,120.93491 31.54075,31.54075 0 0 1 107.53217,93.318597 c -0.13492,-1.42644 -0.20238,-2.84772 -0.20238,-4.25345 a 47.786197,47.786197 0 0 1 90.59848,-21.246498 42.542454,42.542454 0 0 1 42.19216,42.493001 z m -39.83719,26.55813 a 31.869752,31.869752 0 1 1 -31.86975,-31.86975 31.869752,31.869752 0 0 1 31.86975,31.86975 z m -15.15067,-11.86394 -2.71673,-2.01199 a 1.5763311,1.5763311 0 0 0 -2.00127,0.14182 l -16.73162,15.72576 -9.38033,-4.48657 a 1.7144864,1.7144864 0 0 0 -2.00221,0.5062 l -2.30275,2.94497 a 1.576756,1.576756 0 0 0 0.14182,2.00158 l 11.86234,11.8768 a 4.410933,4.410933 0 0 0 6.89242,-0.53116 l 16.51629,-24.2992 a 1.346922,1.346922 0 0 0 -0.27833,-1.86831 z"
style="fill:#45a1ff;fill-opacity:1;stroke-width:5.31163" /> style="fill-opacity:1;stroke-width:5.31163" fill="currentColor" />
</g> </g>
</g> </g>
</g> </g>

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 21 KiB

View File

@ -5,8 +5,6 @@
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
width="356px"
height="210px"
viewBox="0 0 356 210" viewBox="0 0 356 210"
version="1.1" version="1.1"
id="svg114"> id="svg114">
@ -256,5 +254,5 @@
<path <path
id="cloud-alert" id="cloud-alert"
d="m 254.54362,110.61709 a 41.858804,41.858804 0 0 1 -10.8282,28.08534 35.887465,35.887465 0 0 1 -21.45007,10.8673 42.246663,42.246663 0 0 0 0.84918,-17.43196 17.919131,17.919131 0 0 0 8.09421,-4.72957 25.026353,25.026353 0 0 0 6.48366,-16.79111 28.118382,28.118382 0 0 0 -28.08535,-28.085359 c -0.92602,0 -5.68324,0.594174 -8.57727,0.967035 a 2.7916842,2.7916842 0 0 1 -3.0008,-1.876551 l -1.14369,-3.336147 A 34.656989,34.656989 0 0 0 168.09302,54.616462 33.58368,33.58368 0 0 0 131.89488,95.850311 l 1.19942,5.130409 a 2.8085354,2.8085354 0 0 1 -1.92244,3.32783 l -5.04762,1.52526 a 16.696293,16.696293 0 0 0 -12.00739,16.01742 11.315083,11.315083 0 0 0 2.32581,6.90069 13.611511,13.611511 0 0 0 10.04928,4.33345 h 7.67482 a 42.446125,42.446125 0 0 0 1.08887,16.85122 h -8.76369 A 30.06863,30.06863 0 0 1 102.70166,138.50495 28.276728,28.276728 0 0 1 97.265633,121.85123 33.354503,33.354503 0 0 1 114.33081,92.64684 c -0.14268,-1.508465 -0.21401,-3.01148 -0.21401,-4.498037 a 50.534146,50.534146 0 0 1 95.80834,-22.468284 44.988861,44.988861 0 0 1 44.61843,44.936571 z m -42.12804,28.08534 a 33.702425,33.702425 0 1 1 -33.70241,-33.70242 33.702425,33.702425 0 0 1 33.70241,33.70242 z m -28.08535,14.04269 a 2.8085354,2.8085354 0 0 0 -2.80853,-2.80853 h -5.61707 a 2.8085354,2.8085354 0 0 0 -2.80853,2.80853 v 5.61706 a 2.8085354,2.8085354 0 0 0 2.80853,2.80855 h 5.61707 a 2.8085354,2.8085354 0 0 0 2.80853,-2.80855 z m 0,-33.70243 a 2.8166239,2.8166239 0 0 0 -2.80853,-2.80853 h -5.61707 a 2.8166239,2.8166239 0 0 0 -2.80853,2.80853 v 11.23415 a 22.144684,22.144684 0 0 0 0.83447,5.49022 l 2.24351,7.21126 a 2.0333796,2.0333796 0 0 0 1.82117,1.34118 h 1.43583 a 2.0333796,2.0333796 0 0 0 1.82118,-1.34118 l 2.2435,-7.21126 a 22.144684,22.144684 0 0 0 0.83447,-5.49022 z" d="m 254.54362,110.61709 a 41.858804,41.858804 0 0 1 -10.8282,28.08534 35.887465,35.887465 0 0 1 -21.45007,10.8673 42.246663,42.246663 0 0 0 0.84918,-17.43196 17.919131,17.919131 0 0 0 8.09421,-4.72957 25.026353,25.026353 0 0 0 6.48366,-16.79111 28.118382,28.118382 0 0 0 -28.08535,-28.085359 c -0.92602,0 -5.68324,0.594174 -8.57727,0.967035 a 2.7916842,2.7916842 0 0 1 -3.0008,-1.876551 l -1.14369,-3.336147 A 34.656989,34.656989 0 0 0 168.09302,54.616462 33.58368,33.58368 0 0 0 131.89488,95.850311 l 1.19942,5.130409 a 2.8085354,2.8085354 0 0 1 -1.92244,3.32783 l -5.04762,1.52526 a 16.696293,16.696293 0 0 0 -12.00739,16.01742 11.315083,11.315083 0 0 0 2.32581,6.90069 13.611511,13.611511 0 0 0 10.04928,4.33345 h 7.67482 a 42.446125,42.446125 0 0 0 1.08887,16.85122 h -8.76369 A 30.06863,30.06863 0 0 1 102.70166,138.50495 28.276728,28.276728 0 0 1 97.265633,121.85123 33.354503,33.354503 0 0 1 114.33081,92.64684 c -0.14268,-1.508465 -0.21401,-3.01148 -0.21401,-4.498037 a 50.534146,50.534146 0 0 1 95.80834,-22.468284 44.988861,44.988861 0 0 1 44.61843,44.936571 z m -42.12804,28.08534 a 33.702425,33.702425 0 1 1 -33.70241,-33.70242 33.702425,33.702425 0 0 1 33.70241,33.70242 z m -28.08535,14.04269 a 2.8085354,2.8085354 0 0 0 -2.80853,-2.80853 h -5.61707 a 2.8085354,2.8085354 0 0 0 -2.80853,2.80853 v 5.61706 a 2.8085354,2.8085354 0 0 0 2.80853,2.80855 h 5.61707 a 2.8085354,2.8085354 0 0 0 2.80853,-2.80855 z m 0,-33.70243 a 2.8166239,2.8166239 0 0 0 -2.80853,-2.80853 h -5.61707 a 2.8166239,2.8166239 0 0 0 -2.80853,2.80853 v 11.23415 a 22.144684,22.144684 0 0 0 0.83447,5.49022 l 2.24351,7.21126 a 2.0333796,2.0333796 0 0 0 1.82117,1.34118 h 1.43583 a 2.0333796,2.0333796 0 0 0 1.82118,-1.34118 l 2.2435,-7.21126 a 22.144684,22.144684 0 0 0 0.83447,-5.49022 z"
style="stroke-width:5.61707;fill:#45a1ff;fill-opacity:1" /> style="stroke-width:5.61707;fill:currentColor;fill-opacity:1" />
</svg> </svg>

Before

Width:  |  Height:  |  Size: 24 KiB

After

Width:  |  Height:  |  Size: 24 KiB

View File

@ -5,8 +5,6 @@
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
width="348px"
height="210px"
viewBox="0 0 348 210" viewBox="0 0 348 210"
version="1.1" version="1.1"
id="svg124"> id="svg124">
@ -272,5 +270,5 @@
<path <path
id="cloud-off" id="cloud-off"
d="M 232.66609,50.155807 A 8.2118103,8.2118103 0 0 0 221.05286,38.54253 l -24.58739,24.587284 a 49.087021,49.087021 0 0 0 -82.69072,35.970548 c 0,1.448998 0.0696,2.914018 0.20861,4.384368 a 32.511588,32.511588 0 0 0 -16.633903,28.46635 27.562135,27.562135 0 0 0 5.298643,16.23286 22.799931,22.799931 0 0 0 4.2838,4.4793 l -7.176402,7.17673 a 8.2118072,8.2118072 0 1 0 11.613272,11.61322 z M 118.72657,140.86955 a 8.5946237,8.5946237 0 0 1 -2.68479,-2.19217 11.029135,11.029135 0 0 1 -2.26703,-6.7263 16.274355,16.274355 0 0 1 11.70415,-15.61263 l 4.92005,-1.48644 a 2.738162,2.738162 0 0 0 1.8737,-3.24418 l -1.16893,-5.00059 a 32.735029,32.735029 0 0 1 35.28314,-40.191861 31.860268,31.860268 0 0 1 18.36694,8.426592 z m 131.92616,-19.86871 a 40.800975,40.800975 0 0 1 -10.55455,27.3756 35.587128,35.587128 0 0 1 -25.2904,10.95024 h -71.10166 l 16.42536,-16.42536 h 54.6763 a 19.17354,19.17354 0 0 0 13.09966,-5.53393 24.393903,24.393903 0 0 0 6.31993,-16.36655 27.319807,27.319807 0 0 0 -25.05414,-27.140158 l 13.61114,-13.61313 a 43.833807,43.833807 0 0 1 27.86836,40.753288 z" d="M 232.66609,50.155807 A 8.2118103,8.2118103 0 0 0 221.05286,38.54253 l -24.58739,24.587284 a 49.087021,49.087021 0 0 0 -82.69072,35.970548 c 0,1.448998 0.0696,2.914018 0.20861,4.384368 a 32.511588,32.511588 0 0 0 -16.633903,28.46635 27.562135,27.562135 0 0 0 5.298643,16.23286 22.799931,22.799931 0 0 0 4.2838,4.4793 l -7.176402,7.17673 a 8.2118072,8.2118072 0 1 0 11.613272,11.61322 z M 118.72657,140.86955 a 8.5946237,8.5946237 0 0 1 -2.68479,-2.19217 11.029135,11.029135 0 0 1 -2.26703,-6.7263 16.274355,16.274355 0 0 1 11.70415,-15.61263 l 4.92005,-1.48644 a 2.738162,2.738162 0 0 0 1.8737,-3.24418 l -1.16893,-5.00059 a 32.735029,32.735029 0 0 1 35.28314,-40.191861 31.860268,31.860268 0 0 1 18.36694,8.426592 z m 131.92616,-19.86871 a 40.800975,40.800975 0 0 1 -10.55455,27.3756 35.587128,35.587128 0 0 1 -25.2904,10.95024 h -71.10166 l 16.42536,-16.42536 h 54.6763 a 19.17354,19.17354 0 0 0 13.09966,-5.53393 24.393903,24.393903 0 0 0 6.31993,-16.36655 27.319807,27.319807 0 0 0 -25.05414,-27.140158 l 13.61114,-13.61313 a 43.833807,43.833807 0 0 1 27.86836,40.753288 z"
style="fill:#45a1ff;fill-opacity:1;stroke-width:5.47512" /> style="fill:currentColor;fill-opacity:1;stroke-width:5.47512" />
</svg> </svg>

Before

Width:  |  Height:  |  Size: 24 KiB

After

Width:  |  Height:  |  Size: 24 KiB

View File

@ -77,6 +77,26 @@ Redis is used as the metadata database for the backend and is required no matter
*Note: more options can be found here: https://github.com/timvisee/send/blob/master/server/config.js* *Note: more options can be found here: https://github.com/timvisee/send/blob/master/server/config.js*
## Branding
To change the look the colors aswell as some graphics can be changed via environment variables.
See the table below for the variables and their default values.
| Name | Default | Description |
|---|---|---|
| UI_COLOR_PRIMARY | #0a84ff | The primary color |
| UI_COLOR_ACCENT | #003eaa | The accent color (eg. for hover-effects) |
| UI_CUSTOM_ASSETS_ANDROID_CHROME_192PX | | A custom icon for Android (192x192px) |
| UI_CUSTOM_ASSETS_ANDROID_CHROME_512PX | | A custom icon for Android (512x512px) |
| UI_CUSTOM_ASSETS_APPLE_TOUCH_ICON | | A custom icon for Apple |
| UI_CUSTOM_ASSETS_FAVICON_16PX | | A custom favicon (16x16px) |
| UI_CUSTOM_ASSETS_FAVICON_32PX | | A custom favicon (32x32px) |
| UI_CUSTOM_ASSETS_ICON | | A custom icon (Logo on the top-left of the UI) |
| UI_CUSTOM_ASSETS_SAFARI_PINNED_TAB | | A custom icon for Safari |
| UI_CUSTOM_ASSETS_FACEBOOK | | A custom header image for Facebook |
| UI_CUSTOM_ASSETS_TWITTER | | A custom header image for Twitter |
| UI_CUSTOM_ASSETS_WORDMARK | | A custom wordmark (Text next to the logo) |
## Examples ## Examples
**Run using an Amazon Elasticache for the Redis DB, Amazon S3 for the storage backend, and Sentry for error reporting.** **Run using an Amazon Elasticache for the Redis DB, Amazon S3 for the storage backend, and Sentry for error reporting.**
@ -115,6 +135,18 @@ Then open http://localhost:1443 to view the UI. (change the `localhost` to your
To run with HTTPS, you will need to set up a reverse proxy with SSL termination in front of the backend. See Docker Compose below for an example setup. To run with HTTPS, you will need to set up a reverse proxy with SSL termination in front of the backend. See Docker Compose below for an example setup.
**Run with custom branding.**
```bash
$ docker run -p 1443:1443 \
-v $PWD/custom_assets:/app/dist/custom_assets \
-e 'UI_COLOR_PRIMARY=#f00' \
-e 'UI_COLOR_ACCENT=#a00' \
-e 'UI_CUSTOM_ASSETS_ICON=custom_assets/logo.svg' \
registry.gitlab.com/timvisee/send:latest
```
## Docker Compose ## Docker Compose
For a Docker compose configuration example, see: For a Docker compose configuration example, see:

View File

@ -12,7 +12,12 @@ module.exports = {
FOOTER_DONATE_URL: config.footer_donate_url, FOOTER_DONATE_URL: config.footer_donate_url,
FOOTER_CLI_URL: config.footer_cli_url, FOOTER_CLI_URL: config.footer_cli_url,
FOOTER_DMCA_URL: config.footer_dmca_url, FOOTER_DMCA_URL: config.footer_dmca_url,
FOOTER_SOURCE_URL: config.footer_source_url FOOTER_SOURCE_URL: config.footer_source_url,
COLORS: {
PRIMARY: config.ui_color_primary,
ACCENT: config.ui_color_accent
},
CUSTOM_ASSETS: config.ui_custom_assets
}, },
DEFAULTS: { DEFAULTS: {
DOWNLOADS: config.default_downloads, DOWNLOADS: config.default_downloads,

View File

@ -242,6 +242,68 @@ const conf = convict({
format: String, format: String,
default: 'https://github.com/timvisee/send', default: 'https://github.com/timvisee/send',
env: 'SEND_FOOTER_SOURCE_URL' env: 'SEND_FOOTER_SOURCE_URL'
},
ui_color_primary: {
format: String,
default: '#0a84ff',
env: 'UI_COLOR_PRIMARY'
},
ui_color_accent: {
format: String,
default: '#003eaa',
env: 'UI_COLOR_ACCENT'
},
ui_custom_assets: {
android_chrome_192px: {
format: String,
default: '',
env: 'UI_CUSTOM_ASSETS_ANDROID_CHROME_192PX'
},
android_chrome_512px: {
format: String,
default: '',
env: 'UI_CUSTOM_ASSETS_ANDROID_CHROME_512PX'
},
apple_touch_icon: {
format: String,
default: '',
env: 'UI_CUSTOM_ASSETS_APPLE_TOUCH_ICON'
},
favicon_16px: {
format: String,
default: '',
env: 'UI_CUSTOM_ASSETS_FAVICON_16PX'
},
favicon_32px: {
format: String,
default: '',
env: 'UI_CUSTOM_ASSETS_FAVICON_32PX'
},
icon: {
format: String,
default: '',
env: 'UI_CUSTOM_ASSETS_ICON'
},
safari_pinned_tab: {
format: String,
default: '',
env: 'UI_CUSTOM_ASSETS_SAFARI_PINNED_TAB'
},
facebook: {
format: String,
default: '',
env: 'UI_CUSTOM_ASSETS_FACEBOOK'
},
twitter: {
format: String,
default: '',
env: 'UI_CUSTOM_ASSETS_TWITTER'
},
wordmark: {
format: String,
default: '',
env: 'UI_CUSTOM_ASSETS_WORDMARK'
}
} }
}); });

View File

@ -21,20 +21,20 @@ module.exports = function(state, body = '') {
<meta property="og:description" content="${state.description}" /> <meta property="og:description" content="${state.description}" />
<meta name="twitter:description" content="${state.description}" /> <meta name="twitter:description" content="${state.description}" />
<meta name="twitter:card" content="summary" /> <meta name="twitter:card" content="summary" />
<meta <meta property="og:image" content="${state.ui.assets.facebook}" />
property="og:image" <meta name="twitter:image" content="${state.ui.assets.twitter}" />
content="${state.baseUrl}/${assets.get('send-fb.jpg')}"
/>
<meta
name="twitter:image"
content="${state.baseUrl}/${assets.get('send-twitter.jpg')}"
/>
<meta property="og:url" content="${state.baseUrl}" /> <meta property="og:url" content="${state.baseUrl}" />
<meta name="theme-color" content="#220033" /> <meta name="theme-color" content="#220033" />
<meta name="msapplication-TileColor" content="#220033" /> <meta name="msapplication-TileColor" content="#220033" />
<link rel="manifest" href="/app.webmanifest" /> <link rel="manifest" href="/app.webmanifest" />
<link rel="stylesheet" type="text/css" href="/inter.css" /> <link rel="stylesheet" type="text/css" href="/inter.css" />
<style nonce=${state.cspNonce}>
:root {
--color-primary: ${state.ui.colors.primary};
--color-primary-accent: ${state.ui.colors.accent};
}
</style>
<link <link
rel="stylesheet" rel="stylesheet"
type="text/css" type="text/css"
@ -43,23 +43,23 @@ module.exports = function(state, body = '') {
<link <link
rel="apple-touch-icon" rel="apple-touch-icon"
sizes="180x180" sizes="180x180"
href="${assets.get('apple-touch-icon.png')}" href="${state.ui.assets.apple_touch_icon}"
/> />
<link <link
rel="icon" rel="icon"
type="image/png" type="image/png"
sizes="32x32" sizes="32x32"
href="${assets.get('favicon-32x32.png')}" href="${state.ui.assets.favicon_32px}"
/> />
<link <link
rel="icon" rel="icon"
type="image/png" type="image/png"
sizes="16x16" sizes="16x16"
href="${assets.get('favicon-16x16.png')}" href="${state.ui.assets.favicon_16px}"
/> />
<link <link
rel="mask-icon" rel="mask-icon"
href="${assets.get('safari-pinned-tab.svg')}" href="${state.ui.assets.safari_pinned_tab}"
color="#838383" color="#838383"
/> />
<script defer src="${assets.get('app.js')}"></script> <script defer src="${assets.get('app.js')}"></script>

View File

@ -50,6 +50,12 @@ module.exports = function(app) {
return `'nonce-${req.cspNonce}'`; return `'nonce-${req.cspNonce}'`;
} }
], ],
styleSrc: [
"'self'",
function(req) {
return `'nonce-${req.cspNonce}'`;
}
],
formAction: ["'none'"], formAction: ["'none'"],
frameAncestors: ["'none'"], frameAncestors: ["'none'"],
objectSrc: ["'none'"], objectSrc: ["'none'"],

View File

@ -1,18 +1,20 @@
const assets = require('../../common/assets'); const state = require('../state');
module.exports = async function(req, res) {
const appState = await state(req);
module.exports = function(req, res) {
const manifest = { const manifest = {
name: 'Send', name: 'Send',
short_name: 'Send', short_name: 'Send',
lang: req.language, lang: req.language,
icons: [ icons: [
{ {
src: assets.get('android-chrome-192x192.png'), src: appState.ui.assets.android_chrome_192px,
type: 'image/png', type: 'image/png',
sizes: '192x192' sizes: '192x192'
}, },
{ {
src: assets.get('android-chrome-512x512.png'), src: appState.ui.assets.android_chrome_512px,
type: 'image/png', type: 'image/png',
sizes: '512x512' sizes: '512x512'
} }

View File

@ -24,6 +24,22 @@ module.exports = async function(req) {
prefs.surveyUrl = config.survey_url; prefs.surveyUrl = config.survey_url;
} }
const baseUrl = config.deriveBaseUrl(req); const baseUrl = config.deriveBaseUrl(req);
const uiAssets = {
android_chrome_192px: assets.get('android-chrome-192x192.png'),
android_chrome_512px: assets.get('android-chrome-512x512.png'),
apple_touch_icon: assets.get('apple-touch-icon.png'),
favicon_16px: assets.get('favicon-16x16.png'),
favicon_32px: assets.get('favicon-32x32.png'),
icon: assets.get('icon.svg'),
safari_pinned_tab: assets.get('safari-pinned-tab.svg'),
facebook: baseUrl + '/' + assets.get('send-fb.jpg'),
twitter: baseUrl + '/' + assets.get('send-twitter.jpg'),
wordmark: assets.get('wordmark.svg') + '#logo'
};
Object.keys(uiAssets).forEach(index => {
if (config.ui_custom_assets[index] !== '')
uiAssets[index] = config.ui_custom_assets[index];
});
return { return {
archive: { archive: {
numFiles: 0 numFiles: 0
@ -35,7 +51,13 @@ module.exports = async function(req) {
description: description:
'Encrypt and send files with a link that automatically expires to ensure your important documents dont stay online forever.', 'Encrypt and send files with a link that automatically expires to ensure your important documents dont stay online forever.',
baseUrl, baseUrl,
ui: {}, ui: {
colors: {
primary: config.ui_color_primary,
accent: config.ui_color_accent
},
assets: uiAssets
},
storage: { storage: {
files: [] files: []
}, },

View File

@ -1,5 +1,7 @@
const colors = { const colors = {
transparent: 'transparent', transparent: 'transparent',
primary: 'var(--color-primary)',
primary_accent: 'var(--color-primary-accent)',
black: '#000000', black: '#000000',
'grey-90': '#0c0c0d', 'grey-90': '#0c0c0d',
@ -16,88 +18,6 @@ const colors = {
'grey-10': '#f9f9fa', 'grey-10': '#f9f9fa',
white: '#ffffff', white: '#ffffff',
'red-90': '#3e0200',
'red-80': '#5a0002',
'red-70': '#a4000f',
'red-60': '#d70022',
red: '#d70022',
'red-50': '#ff0039',
// unspec
'red-40': '#ff3363',
'red-30': '#ff99aa',
'orange-90': '#3e1300',
'orange-80': '#712b00',
'orange-70': '#a44900',
'orange-60': '#d76e00',
'orange-50': '#ff9400',
// unspec
'orange-40': '#ffb24c',
'orange-30': '#ffd399',
'yellow-90': '#3e2800',
'yellow-80': '#715100',
'yellow-70': '#a47f00',
'yellow-60': '#d7b600',
yellow: '#d7b600',
'yellow-50': '#ffe900',
'yellow-40': '#ffed4c',
'yellow-30': '#fff599',
// 'green-darkest': '#003706',
// 'green-darker': '#006504',
// 'green-dark': '#058b00',
// green: '#12bc00',
// 'green-light': '#51d88a',
// 'green-lighter': '#a2f5bf',
// 'green-lightest': '#e3fcec',
// 'teal-darkest': '#0d3331',
// 'teal-darker': '#20504f',
// 'teal-dark': '#38a89d',
// teal: '#4dc0b5',
// 'teal-light': '#64d5ca',
// 'teal-lighter': '#a0f0ed',
// 'teal-lightest': '#e8fffe',
'blue-90': '#000f40',
'blue-80': '#002275',
'blue-70': '#003eaa',
'blue-60': '#0060df',
'blue-50': '#0a84ff',
blue: '#0a84ff',
'blue-40': '#45a1ff',
'blue-30': '#99ccff',
'blue-20': '#cce6ff',
'ink-90': '#0f1126',
'ink-80': '#202340',
'ink-70': '#363959',
// 'indigo-darkest': '#191e38',
// 'indigo-darker': '#2f365f',
// 'indigo-dark': '#5661b3',
// indigo: '#6574cd',
// 'indigo-light': '#7886d7',
// 'indigo-lighter': '#b2b7ff',
// 'indigo-lightest': '#e6e8ff',
'purple-90': '#25003e',
'purple-80': '#440071',
'purple-70': '#6200a4',
'purple-60': '#8000d7',
'purple-50': '#9400ff',
'purple-40': '#ad3bff',
'purple-30': '#c069ff',
'purple-20': '#d7a3ff',
// 'pink-darkest': '#451225',
// 'pink-darker': '#6f213f',
// 'pink-dark': '#eb5286',
// pink: '#f66d9b',
// 'pink-light': '#fa7ea8',
// 'pink-lighter': '#ffbbca',
// 'pink-lightest': '#ffebef',
cloud: 'rgba(255, 255, 255, 0.8)', cloud: 'rgba(255, 255, 255, 0.8)',
violet: 'hsl(258, 57%, 35%)' violet: 'hsl(258, 57%, 35%)'
}; };