From 30cc89fe25dbea5385847cec03961a8d1c39a276 Mon Sep 17 00:00:00 2001
From: dpschen <dpschen@noreply.kolaente.de>
Date: Sat, 13 Nov 2021 14:16:14 +0000
Subject: [PATCH] feat: add vite-svg-loader and add Logo component (#971)

Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/971
Reviewed-by: konrad <k@knt.li>
Co-authored-by: dpschen <dpschen@noreply.kolaente.de>
Co-committed-by: dpschen <dpschen@noreply.kolaente.de>
---
 cypress/integration/misc/menu.spec.js    |  4 +-
 package.json                             |  1 +
 src/assets/logo-full-pride.svg           |  2 +-
 src/assets/logo-full.svg                 |  2 +-
 src/components/home/Logo.vue             | 11 +++
 src/components/home/MenuButton.vue       | 75 +++++++++++++++++++
 src/components/home/PoweredByLink.vue    | 20 ++++++
 src/components/home/contentAuth.vue      | 28 +++++++-
 src/components/home/contentLinkShare.vue | 60 +++++++---------
 src/components/home/contentNoAuth.vue    | 13 ++--
 src/components/home/navigation.vue       | 43 ++++++-----
 src/components/home/topNavigation.vue    | 62 +++++++---------
 src/i18n/lang/en.json                    |  4 +-
 src/styles/theme/_index.scss             |  1 -
 src/styles/theme/navigation.scss         | 92 ------------------------
 src/styles/theme/theme.scss              |  9 ---
 src/types/vite-svg-loader.d.ts           |  1 +
 src/views/migrator/MigrateService.vue    | 10 +--
 src/views/migrator/migrators.ts          |  8 +--
 src/views/tasks/ShowTasks.vue            | 38 +++++-----
 vite.config.js                           |  6 ++
 yarn.lock                                | 83 ++++++++++++++++++++-
 22 files changed, 335 insertions(+), 238 deletions(-)
 create mode 100644 src/components/home/Logo.vue
 create mode 100644 src/components/home/MenuButton.vue
 create mode 100644 src/components/home/PoweredByLink.vue
 delete mode 100644 src/styles/theme/navigation.scss
 create mode 100644 src/types/vite-svg-loader.d.ts

diff --git a/cypress/integration/misc/menu.spec.js b/cypress/integration/misc/menu.spec.js
index 98e228f2f..86e3ab57f 100644
--- a/cypress/integration/misc/menu.spec.js
+++ b/cypress/integration/misc/menu.spec.js
@@ -7,7 +7,7 @@ describe('The Menu', () => {
 	})
 
 	it('Can be hidden on desktop', () => {
-		cy.get('a.menu-show-button:visible')
+		cy.get('button.menu-show-button:visible')
 			.click()
 		cy.get('.namespace-container')
 			.should('not.have.class', 'is-active')
@@ -21,7 +21,7 @@ describe('The Menu', () => {
 
 	it('Is can be shown on mobile', () => {
 		cy.viewport('iphone-8')
-		cy.get('a.menu-show-button:visible')
+		cy.get('button.menu-show-button:visible')
 			.click()
 		cy.get('.namespace-container')
 			.should('have.class', 'is-active')
diff --git a/package.json b/package.json
index 72d4a3623..1fea18f54 100644
--- a/package.json
+++ b/package.json
@@ -81,6 +81,7 @@
     "vite": "2.6.14",
     "vite-plugin-pwa": "0.11.3",
     "vue-tsc": "0.29.4",
+    "vite-svg-loader": "^3.1.0",
     "wait-on": "6.0.0",
     "workbox-cli": "6.3.0"
   },
diff --git a/src/assets/logo-full-pride.svg b/src/assets/logo-full-pride.svg
index f79358778..f7d6527f6 100644
--- a/src/assets/logo-full-pride.svg
+++ b/src/assets/logo-full-pride.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="855" height="250.3" xml:space="preserve"><defs><clipPath id="a" clipPathUnits="userSpaceOnUse"><path fill="#196aff" stroke-width=".2" d="M-494.6 2401.2c-4 23-8.4 45.2-12.9 66.7-46.5 222.2-109.9 344.6-178.3 344.6-66.2 0-128.3-117-175.1-329.5-5.8-26.2-11.2-53.5-16.3-81.8-36.4-200.7-56.2-450.3-56.2-713.7 0-300.5 25.7-583 72.5-795.4 46.8-212.5 109-329.5 175-329.5 66.2 0 128.4 117 175.1 329.5 46.8 212.5 72.6 495 72.6 795.4 0 256.9-20.4 512.4-56.4 713.7"/></clipPath></defs><g fill-rule="evenodd" clip-path="url(#a)" transform="matrix(.50338 0 0 -.11079 479.9 311.6)"><path fill="#e40303" d="M-933.4 2812.6h495.1v-375h-495.1z"/><path fill="#ff8c00" d="M-933.4 2437.6h495.1v-375h-495.1z"/><path fill="#ffed00" d="M-933.4 2062.6h495.1v-375h-495.1z"/><path fill="#008026" d="M-933.4 1687.6h495.1v-375h-495.1z"/><path fill="#004dff" d="M-933.4 1312.6h495.1v-375h-495.1z"/><path fill="#750787" d="M-933.4 937.6h495.1v-375h-495.1z"/></g><path fill="#fff" d="M173.2 157.8c4.6-13.6 12.3-17.8 13.2-38.7.4-7.4-1.9-30.8-1.9-30.8s3.7-9.4-3.3-19.8c-10.9-16.2-33.2-17.3-44.9-17.3-11.7 0-33.8 1-44.6 17.3-7 10.4-3.4 19.8-3.4 19.8L86.2 111c-.3 2.5 0 12.3.3 14.7.5 4.3 1.9 8.5 3.3 12.5 1.9 5.2 4.8 10.4 7 15.7 6.8 16 1.1 35.8 1.5 53.1.3 12.2-2.6 24.7-3.7 36.6a124.3 124.3 0 0 0 84.8-1.7c-2.6-15-5.7-29.2-6.2-34.6-1.4-16.4-5.4-33.8 0-49.5"/><path fill="#fff" d="M87.4 62.2c.2 2.5.4 5 1 7.3.3.8.6 2.6 1.6 2.9 1.1.3 3.3-1.1 4.2-1.7l4.7-3.6 3.1-2.2a25.9 25.9 0 0 0 5.6-6.7c.7-1 4.8-1.7 5.5-2.7.7-1 .1-2.4.1-3.7 0-9.7.6-19.2.8-28.6.2-6.5 2.8-14.2-7-11.2-20.7 6.5-20.5 35.3-19.6 50.2M179.1 75.8l-.8-.7a27 27 0 0 1-3.3-2.7l-3.6-3.8-3.3-3.3-1.9-2.4-.7-1.4c-.3-.6-5.2-1.3-4.7-2 .8-1 2.7-2 3.1-3.2 2.2-6.3 3.2-31.7 3.5-38.2.7-16.6 15.3.8 17.8 7.5 7.4 19.4 3 33.6-6 50.2"/><path fill="#f1e6d3" d="M159.3 139.6c0-9.6-1.2-13.4-6.6-18.1-3.3-3-7.2-4-13.4-4a17.7 17.7 0 0 0-14 5.2c-4.8 5-6.1 8-6.1 17.6 0 5.2 5.5 16.6 7.2 19.3 2.8 4.7 7.9 6.3 12.9 6 5 .3 10-1.3 12.8-6a55 55 0 0 0 7.2-20"/><path fill="#f1d7d4" d="M95.7 71c-1.3-11.1-5-31.1 8-43 1.4-1.3 1.8 3.2 2 5 .4 2.4 0 9.5 0 12 .2 4.7 1.1 7.1.7 9.3-1.3 5.8-2.3 5.4-3.5 9-2.3 7-6.9 10.8-7.2 7.7M176.8 68.8c1.4 2.4 4.8-10.4 6-16 1-5.2 2.3-12.1.5-17.3-1-2.8-7-11-7.6-8.2-.3 1-.4 9.2-1.1 13.1-.8 4.8-2.3 9.6-2.3 14.5 0 11 3.2 11.4 4.5 14"/><path fill="#faeee0" d="M134 200.4c-.2.8-2.4 1.5-3.2 1.7-2 .6-3.6-.9-4.7-2.2-1.5-1.7-1.5-4.6-2.1-6.7-.4-1.2-2.5-1.4-3.2-.2-2.1 3.8-10.5-3.5-8.6-5.9 1.3-1.6-1.8-3-3-1.4-3.8 4.7 6.3 13.4 12.1 11 .3 1.2.5 2.4 1 3.5 1 2.2 3.2 3.6 5.4 4.8 3 1.6 8.8-1.2 9.7-4 .6-1.8-2.7-2.5-3.4-.6M160.7 172c.3 1.3.4 5.7-2 3.3-1-1-3-.4-3 1-.3 3-3.3 3-6 2.1-2-.7-3.1 2.2-1 2.9 3.8 1.3 8 .6 9.7-2.3 1.3.6 2.8.8 4-.4 2-2 2.3-4.7 1.7-7.2-.4-1.9-3.8-1.3-3.4.6M166.9 235.5c-1 1.9-2.6 1.7-4.4 1-1.3-.6-3 .3-2.5 1.7.8 2.6-2.6 3.4-4.9 2.5-2-.9-3.7 1.7-1.7 2.6 4.1 1.7 9.3.2 10-3.4 2.7.4 5.2-.3 6.5-2.9.9-1.8-2.1-3.3-3-1.5M140.2 92.2c-.4 2.6-5.3-.5-6.5-1.3-1-.7-2.5-.3-2.6 1-.2 1.6-2.4 1.1-3.4 1-2-.5-3.6-1.7-3.6-3.5 0-1.7 1-3.6 1.6-5.2.4-1-1.1-2.2-2.2-1.5-2 1.3-11.5 2.4-7.7-1.8 1.2-1.3-1-3.2-2.2-1.8-1.7 1.9-3 6.3.9 7.2 2 .5 4.9.5 7.3 0-1 3.2-1.2 6.3 3 8.4 3 1.4 6.9 1.4 8.6-.8 3.5 1.9 9 3.7 9.8-1 .2-1.7-2.7-2.4-3-.7"/><path fill="#494949" d="M123.8 152.9c5 .4 10.2 1.6 15.4 1.4 3.3-.1 6.7-.6 10-1 2.3-.4 5.2-.8 6.8-2.6.1 5.9-12 7.7-16.8 7.8a24 24 0 0 1-15.4-5.6"/><path fill="#494949" d="M137.6 140.7c-.6 3.7-.7 7.6-.4 11.3.1 1-.1 3.4 1.2 3.9 1 .4 2.4-.4 2.5-1.4.3-1.6-.4-3.6-.4-5.3 0-1.9 0-3.8.2-5.8.1-1.1.8-2.7-.6-3.5-1-.6-2.3-.3-2.5.8"/><path fill="#494949" d="M147.5 131.6c-3 .1-5.9 1.8-8.2 3.5-2-1.4-5.2-2.7-7.9-2-1.5.5-.1 1 .5 1.4 1.2.8 2.2 1.8 3.1 3 1.4 1.5 2.6 3.3 4 4.8 1-.7 2-1.4 2.8-2.2l4.2-5.6 1-1.4c.4-.4 1.5-1.2.5-1.5"/><path fill="#2c3844" d="M108.7 110.8c1.5-4 3.1-9 7.3-8.1 3.1.7 7.3 11.2 4.6 10.1-1.4-.5-2.6-5.3-5.3-6-1.8-.3-4.2 5.7-6.5 6.3-1.2.3-.6-1.3-.1-2.3M153.3 110.8c1.5-4 3.2-9 7.3-8.1 3.2.7 7.4 11.2 4.7 10.1-1.5-.5-2.6-5.3-5.4-6-1.7-.3-4.1 5.7-6.5 6.3-1 .3-.5-1.3 0-2.3"/><g fill="#252626" stroke-width="29.1" aria-label="Vikunja" font-family="Quicksand" font-size="1163.4" font-weight="700" letter-spacing="0" style="line-height:1.25" word-spacing="0"><path d="M3302.3-1549.4c3.4 2.3 8.1 5.8 10.4 7h1.2s1.2 0 1.2 1.1c2.3 0 7 1.2 9.3 2.4h2.3c3.5 1.1 8.1 1.1 11.6 1.1s7 0 11.7-1.1h2.3c3.5-1.2 5.8-2.4 9.3-2.4 1.1-1.1 1.1-1.1 2.3-1.1 3.5-1.2 7-4.7 9.3-5.8l2.3-1.2c2.4-2.3 4.7-3.5 7-5.8 1.2-1.2 1.2-1.2 2.4-3.5 1.1-2.3 4.6-4.7 5.8-7 1.1 0 1.1 0 1.1-1.2 2.4-2.3 3.5-7 4.7-9.3l287.3-679.4a63.9 63.9 0 0 0-34.9-82.6 64 64 0 0 0-83.7 33.8l-226.9 538.6-226.8-538.6a62.7 62.7 0 0 0-82.6-33.8 62 62 0 0 0-35 82.6l285 679.4c2.4 2.4 4.7 7 5.9 9.3 0 1.2 1.2 1.2 1.2 1.2 1.1 2.3 3.5 4.7 5.8 7 0 2.3 1.1 2.3 1.1 3.5 3.5 2.3 5.9 3.5 8.2 5.8h1.2zM3936.8-2118.3a62.1 62.1 0 0 0-62.8 64v453.7c0 35 28 62.8 62.8 62.8 36.1 0 62.9-27.9 62.9-62.8v-453.7c0-37.2-26.8-64-62.9-64zm62.9-171a61.8 61.8 0 0 0-62.9-62.8c-34.9 0-62.8 27.9-62.8 62.8v24.4c0 35 28 64 62.8 64 36.1 0 62.9-29 62.9-64zM4264-1537.8c36.1 0 65.2-29 65.2-64V-1704l64-64 171 207a61.7 61.7 0 0 0 48.9 23.3c14 0 29-4.6 40.7-15.1a64.5 64.5 0 0 0 9.3-90.7L4483.9-1859l174.5-174.5a63.2 63.2 0 0 0 0-90.7 65.3 65.3 0 0 0-90.7 0l-238.5 238.5v-402.6c0-34.9-29-64-65.2-64-36 0-64 29.1-64 64v686.4c0 35 28 64 64 64zM5316.6-1779.8v-278c0-32.6-30.2-61.7-62.8-61.7a61 61 0 0 0-60.5 61.7v278a120.7 120.7 0 0 1-122.1 118.7 117.7 117.7 0 0 1-118.7-118.7v-278a62 62 0 0 0-61.6-61.7c-33.8 0-61.7 29.1-61.7 61.7v278c0 132.7 109.3 242 242 242 133.8 0 245.4-109.3 245.4-242zM5769-2119.5c-45.3 0-88.4 14-123.3 36.1a63 63 0 0 0-57-36c-34.9 0-61.7 27.9-61.7 61.6v458.3a61.3 61.3 0 0 0 61.7 61.7 63.6 63.6 0 0 0 61.7-50c2.3-4.7 2.3-8.1 2.3-11.6v-278c0-65.2 51.2-117.6 116.3-117.6 66.3 0 121 52.4 121 117.5v278c0 33.8 29.1 61.7 61.7 61.7a61 61 0 0 0 60.5-61.6v-278c0-131.5-108.2-242-243.2-242zM6255.6-2199.7a64.3 64.3 0 0 0 62.9-64v-23.3c0-37.2-28-64-62.9-64a63 63 0 0 0-64 64v23.3c0 33.7 29.1 64 64 64zm-65.1 867.8c69.8 0 125.6-57 125.6-125.6v-598c0-36-26.7-64-62.8-64-33.7 0-62.8 28-62.8 64v598c-37.2 0-64 28-64 61.7 0 37.2 26.8 64 64 64zM6998.5-2056.6c0-35-28-62.9-61.7-62.9-30.2 0-53.5 22.1-60.5 51.2a265.2 265.2 0 0 0-154.7-51.2 268 268 0 0 0-197.8 87.3c-50 52.3-79 124.5-79 204.7 0 79.2 29 151.3 79 204.8 50 52.4 118.7 85 197.8 85 58.2 0 110.5-18.7 154.7-50.1 7 28 30.3 50 60.5 50a62 62 0 0 0 61.7-61.6v-228zm-168.7 349c-28 29-67.5 45.3-108.2 45.3-41.9 0-81.4-16.2-108.2-45.3-28-30.3-44.2-72.2-44.2-119.9 0-48.8 16.3-90.7 44.2-119.8a140.3 140.3 0 0 1 108.2-47.7c40.7 0 80.3 16.3 108.2 47.7 28 29.1 45.4 71 45.4 119.8 0 47.7-17.5 89.6-45.4 119.9z" style="-inkscape-font-specification:'Quicksand Bold'" transform="translate(-63.6 371.7) scale(.12982)"/></g></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 855 250.3" width="855" height="250.3" xml:space="preserve"><defs><clipPath id="a" clipPathUnits="userSpaceOnUse"><path fill="#196aff" stroke-width=".2" d="M-494.6 2401.2c-4 23-8.4 45.2-12.9 66.7-46.5 222.2-109.9 344.6-178.3 344.6-66.2 0-128.3-117-175.1-329.5-5.8-26.2-11.2-53.5-16.3-81.8-36.4-200.7-56.2-450.3-56.2-713.7 0-300.5 25.7-583 72.5-795.4 46.8-212.5 109-329.5 175-329.5 66.2 0 128.4 117 175.1 329.5 46.8 212.5 72.6 495 72.6 795.4 0 256.9-20.4 512.4-56.4 713.7"/></clipPath></defs><g fill-rule="evenodd" clip-path="url(#a)" transform="matrix(.50338 0 0 -.11079 479.9 311.6)"><path fill="#e40303" d="M-933.4 2812.6h495.1v-375h-495.1z"/><path fill="#ff8c00" d="M-933.4 2437.6h495.1v-375h-495.1z"/><path fill="#ffed00" d="M-933.4 2062.6h495.1v-375h-495.1z"/><path fill="#008026" d="M-933.4 1687.6h495.1v-375h-495.1z"/><path fill="#004dff" d="M-933.4 1312.6h495.1v-375h-495.1z"/><path fill="#750787" d="M-933.4 937.6h495.1v-375h-495.1z"/></g><path fill="#fff" d="M173.2 157.8c4.6-13.6 12.3-17.8 13.2-38.7.4-7.4-1.9-30.8-1.9-30.8s3.7-9.4-3.3-19.8c-10.9-16.2-33.2-17.3-44.9-17.3-11.7 0-33.8 1-44.6 17.3-7 10.4-3.4 19.8-3.4 19.8L86.2 111c-.3 2.5 0 12.3.3 14.7.5 4.3 1.9 8.5 3.3 12.5 1.9 5.2 4.8 10.4 7 15.7 6.8 16 1.1 35.8 1.5 53.1.3 12.2-2.6 24.7-3.7 36.6a124.3 124.3 0 0 0 84.8-1.7c-2.6-15-5.7-29.2-6.2-34.6-1.4-16.4-5.4-33.8 0-49.5"/><path fill="#fff" d="M87.4 62.2c.2 2.5.4 5 1 7.3.3.8.6 2.6 1.6 2.9 1.1.3 3.3-1.1 4.2-1.7l4.7-3.6 3.1-2.2a25.9 25.9 0 0 0 5.6-6.7c.7-1 4.8-1.7 5.5-2.7.7-1 .1-2.4.1-3.7 0-9.7.6-19.2.8-28.6.2-6.5 2.8-14.2-7-11.2-20.7 6.5-20.5 35.3-19.6 50.2M179.1 75.8l-.8-.7a27 27 0 0 1-3.3-2.7l-3.6-3.8-3.3-3.3-1.9-2.4-.7-1.4c-.3-.6-5.2-1.3-4.7-2 .8-1 2.7-2 3.1-3.2 2.2-6.3 3.2-31.7 3.5-38.2.7-16.6 15.3.8 17.8 7.5 7.4 19.4 3 33.6-6 50.2"/><path fill="#f1e6d3" d="M159.3 139.6c0-9.6-1.2-13.4-6.6-18.1-3.3-3-7.2-4-13.4-4a17.7 17.7 0 0 0-14 5.2c-4.8 5-6.1 8-6.1 17.6 0 5.2 5.5 16.6 7.2 19.3 2.8 4.7 7.9 6.3 12.9 6 5 .3 10-1.3 12.8-6a55 55 0 0 0 7.2-20"/><path fill="#f1d7d4" d="M95.7 71c-1.3-11.1-5-31.1 8-43 1.4-1.3 1.8 3.2 2 5 .4 2.4 0 9.5 0 12 .2 4.7 1.1 7.1.7 9.3-1.3 5.8-2.3 5.4-3.5 9-2.3 7-6.9 10.8-7.2 7.7M176.8 68.8c1.4 2.4 4.8-10.4 6-16 1-5.2 2.3-12.1.5-17.3-1-2.8-7-11-7.6-8.2-.3 1-.4 9.2-1.1 13.1-.8 4.8-2.3 9.6-2.3 14.5 0 11 3.2 11.4 4.5 14"/><path fill="#faeee0" d="M134 200.4c-.2.8-2.4 1.5-3.2 1.7-2 .6-3.6-.9-4.7-2.2-1.5-1.7-1.5-4.6-2.1-6.7-.4-1.2-2.5-1.4-3.2-.2-2.1 3.8-10.5-3.5-8.6-5.9 1.3-1.6-1.8-3-3-1.4-3.8 4.7 6.3 13.4 12.1 11 .3 1.2.5 2.4 1 3.5 1 2.2 3.2 3.6 5.4 4.8 3 1.6 8.8-1.2 9.7-4 .6-1.8-2.7-2.5-3.4-.6M160.7 172c.3 1.3.4 5.7-2 3.3-1-1-3-.4-3 1-.3 3-3.3 3-6 2.1-2-.7-3.1 2.2-1 2.9 3.8 1.3 8 .6 9.7-2.3 1.3.6 2.8.8 4-.4 2-2 2.3-4.7 1.7-7.2-.4-1.9-3.8-1.3-3.4.6M166.9 235.5c-1 1.9-2.6 1.7-4.4 1-1.3-.6-3 .3-2.5 1.7.8 2.6-2.6 3.4-4.9 2.5-2-.9-3.7 1.7-1.7 2.6 4.1 1.7 9.3.2 10-3.4 2.7.4 5.2-.3 6.5-2.9.9-1.8-2.1-3.3-3-1.5M140.2 92.2c-.4 2.6-5.3-.5-6.5-1.3-1-.7-2.5-.3-2.6 1-.2 1.6-2.4 1.1-3.4 1-2-.5-3.6-1.7-3.6-3.5 0-1.7 1-3.6 1.6-5.2.4-1-1.1-2.2-2.2-1.5-2 1.3-11.5 2.4-7.7-1.8 1.2-1.3-1-3.2-2.2-1.8-1.7 1.9-3 6.3.9 7.2 2 .5 4.9.5 7.3 0-1 3.2-1.2 6.3 3 8.4 3 1.4 6.9 1.4 8.6-.8 3.5 1.9 9 3.7 9.8-1 .2-1.7-2.7-2.4-3-.7"/><path fill="#494949" d="M123.8 152.9c5 .4 10.2 1.6 15.4 1.4 3.3-.1 6.7-.6 10-1 2.3-.4 5.2-.8 6.8-2.6.1 5.9-12 7.7-16.8 7.8a24 24 0 0 1-15.4-5.6"/><path fill="#494949" d="M137.6 140.7c-.6 3.7-.7 7.6-.4 11.3.1 1-.1 3.4 1.2 3.9 1 .4 2.4-.4 2.5-1.4.3-1.6-.4-3.6-.4-5.3 0-1.9 0-3.8.2-5.8.1-1.1.8-2.7-.6-3.5-1-.6-2.3-.3-2.5.8"/><path fill="#494949" d="M147.5 131.6c-3 .1-5.9 1.8-8.2 3.5-2-1.4-5.2-2.7-7.9-2-1.5.5-.1 1 .5 1.4 1.2.8 2.2 1.8 3.1 3 1.4 1.5 2.6 3.3 4 4.8 1-.7 2-1.4 2.8-2.2l4.2-5.6 1-1.4c.4-.4 1.5-1.2.5-1.5"/><path fill="#2c3844" d="M108.7 110.8c1.5-4 3.1-9 7.3-8.1 3.1.7 7.3 11.2 4.6 10.1-1.4-.5-2.6-5.3-5.3-6-1.8-.3-4.2 5.7-6.5 6.3-1.2.3-.6-1.3-.1-2.3M153.3 110.8c1.5-4 3.2-9 7.3-8.1 3.2.7 7.4 11.2 4.7 10.1-1.5-.5-2.6-5.3-5.4-6-1.7-.3-4.1 5.7-6.5 6.3-1 .3-.5-1.3 0-2.3"/><g fill="#252626" stroke-width="29.1" aria-label="Vikunja" font-family="Quicksand" font-size="1163.4" font-weight="700" letter-spacing="0" style="line-height:1.25" word-spacing="0"><path d="M3302.3-1549.4c3.4 2.3 8.1 5.8 10.4 7h1.2s1.2 0 1.2 1.1c2.3 0 7 1.2 9.3 2.4h2.3c3.5 1.1 8.1 1.1 11.6 1.1s7 0 11.7-1.1h2.3c3.5-1.2 5.8-2.4 9.3-2.4 1.1-1.1 1.1-1.1 2.3-1.1 3.5-1.2 7-4.7 9.3-5.8l2.3-1.2c2.4-2.3 4.7-3.5 7-5.8 1.2-1.2 1.2-1.2 2.4-3.5 1.1-2.3 4.6-4.7 5.8-7 1.1 0 1.1 0 1.1-1.2 2.4-2.3 3.5-7 4.7-9.3l287.3-679.4a63.9 63.9 0 0 0-34.9-82.6 64 64 0 0 0-83.7 33.8l-226.9 538.6-226.8-538.6a62.7 62.7 0 0 0-82.6-33.8 62 62 0 0 0-35 82.6l285 679.4c2.4 2.4 4.7 7 5.9 9.3 0 1.2 1.2 1.2 1.2 1.2 1.1 2.3 3.5 4.7 5.8 7 0 2.3 1.1 2.3 1.1 3.5 3.5 2.3 5.9 3.5 8.2 5.8h1.2zM3936.8-2118.3a62.1 62.1 0 0 0-62.8 64v453.7c0 35 28 62.8 62.8 62.8 36.1 0 62.9-27.9 62.9-62.8v-453.7c0-37.2-26.8-64-62.9-64zm62.9-171a61.8 61.8 0 0 0-62.9-62.8c-34.9 0-62.8 27.9-62.8 62.8v24.4c0 35 28 64 62.8 64 36.1 0 62.9-29 62.9-64zM4264-1537.8c36.1 0 65.2-29 65.2-64V-1704l64-64 171 207a61.7 61.7 0 0 0 48.9 23.3c14 0 29-4.6 40.7-15.1a64.5 64.5 0 0 0 9.3-90.7L4483.9-1859l174.5-174.5a63.2 63.2 0 0 0 0-90.7 65.3 65.3 0 0 0-90.7 0l-238.5 238.5v-402.6c0-34.9-29-64-65.2-64-36 0-64 29.1-64 64v686.4c0 35 28 64 64 64zM5316.6-1779.8v-278c0-32.6-30.2-61.7-62.8-61.7a61 61 0 0 0-60.5 61.7v278a120.7 120.7 0 0 1-122.1 118.7 117.7 117.7 0 0 1-118.7-118.7v-278a62 62 0 0 0-61.6-61.7c-33.8 0-61.7 29.1-61.7 61.7v278c0 132.7 109.3 242 242 242 133.8 0 245.4-109.3 245.4-242zM5769-2119.5c-45.3 0-88.4 14-123.3 36.1a63 63 0 0 0-57-36c-34.9 0-61.7 27.9-61.7 61.6v458.3a61.3 61.3 0 0 0 61.7 61.7 63.6 63.6 0 0 0 61.7-50c2.3-4.7 2.3-8.1 2.3-11.6v-278c0-65.2 51.2-117.6 116.3-117.6 66.3 0 121 52.4 121 117.5v278c0 33.8 29.1 61.7 61.7 61.7a61 61 0 0 0 60.5-61.6v-278c0-131.5-108.2-242-243.2-242zM6255.6-2199.7a64.3 64.3 0 0 0 62.9-64v-23.3c0-37.2-28-64-62.9-64a63 63 0 0 0-64 64v23.3c0 33.7 29.1 64 64 64zm-65.1 867.8c69.8 0 125.6-57 125.6-125.6v-598c0-36-26.7-64-62.8-64-33.7 0-62.8 28-62.8 64v598c-37.2 0-64 28-64 61.7 0 37.2 26.8 64 64 64zM6998.5-2056.6c0-35-28-62.9-61.7-62.9-30.2 0-53.5 22.1-60.5 51.2a265.2 265.2 0 0 0-154.7-51.2 268 268 0 0 0-197.8 87.3c-50 52.3-79 124.5-79 204.7 0 79.2 29 151.3 79 204.8 50 52.4 118.7 85 197.8 85 58.2 0 110.5-18.7 154.7-50.1 7 28 30.3 50 60.5 50a62 62 0 0 0 61.7-61.6v-228zm-168.7 349c-28 29-67.5 45.3-108.2 45.3-41.9 0-81.4-16.2-108.2-45.3-28-30.3-44.2-72.2-44.2-119.9 0-48.8 16.3-90.7 44.2-119.8a140.3 140.3 0 0 1 108.2-47.7c40.7 0 80.3 16.3 108.2 47.7 28 29.1 45.4 71 45.4 119.8 0 47.7-17.5 89.6-45.4 119.9z" style="-inkscape-font-specification:'Quicksand Bold'" transform="translate(-63.6 371.7) scale(.12982)"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/logo-full.svg b/src/assets/logo-full.svg
index 12b4369da..c5e728a3a 100644
--- a/src/assets/logo-full.svg
+++ b/src/assets/logo-full.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="872.6" height="256.8" xml:space="preserve"><path fill="#196aff" d="M226.9 46.8A126 126 0 0 0 128 0a127.2 127.2 0 0 0-99 46.8A127 127 0 0 0 0 128c0 34.2 13.3 66.3 37.5 90.5A127.2 127.2 0 0 0 128 256c34.2 0 66.3-13.3 90.5-37.5A127.2 127.2 0 0 0 256 128a130 130 0 0 0-29.1-81.2"/><path fill="#fff" d="M167.6 162.1c4.8-14 12.6-18.2 13.6-39.8.4-7.5-2-31.6-2-31.6s3.8-9.6-3.4-20.3c-11.1-16.7-34-17.8-46-17.8-12.1 0-34.8 1.1-45.9 17.8-7.2 10.7-3.4 20.3-3.4 20.3L78.2 114a60.8 60.8 0 0 0 3.8 28c1.9 5.3 4.9 10.7 7.2 16.1 6.9 16.5 1.1 36.8 1.5 54.6.3 12.6-2.7 25.3-3.9 37.6a127.6 127.6 0 0 0 87.2-1.7c-2.7-15.4-5.9-30-6.4-35.6-1.4-16.9-5.5-34.7 0-50.9"/><path fill="#fff" d="M79.5 64c.2 2.4.4 5 1.1 7.4.2.8.6 2.6 1.5 3 1.2.3 3.5-1.2 4.3-1.8l4.9-3.7 3.2-2.2c1.1-.9 2-2 2.9-3 1.1-1.2 2-2.5 2.8-3.9.7-1 5-1.8 5.7-2.8.7-1.1 0-2.5 0-3.8 0-10 .7-19.7 1-29.4.2-6.6 2.8-14.5-7.2-11.4C78.3 19 78.6 48.5 79.5 63.9M173.7 77.8l-.9-.6c-1.2-1-2.3-1.8-3.3-2.9l-3.8-3.8-3.3-3.5-2-2.4-.7-1.4c-.3-.7-5.3-1.4-4.8-2 .8-1.1 2.7-2 3.2-3.3 2.3-6.5 3.3-32.6 3.5-39.3.8-17 15.7.8 18.3 7.7 7.6 20 3.1 34.5-6.1 51.5"/><path fill="#f1e6d3" d="M153.3 143.4c0-9.9-1.2-13.8-6.7-18.6-3.4-3-7.4-4.2-13.8-4-6.4-.2-11 1.7-14.3 5.2-5 5.2-6.4 8.3-6.4 18.1 0 5.3 5.7 17 7.5 19.8 2.8 4.8 8 6.5 13.2 6.2 5.1.3 10.3-1.4 13.2-6.2a56.4 56.4 0 0 0 7.3-20.5"/><path fill="#f1d7d4" d="M88 73c-1.3-11.5-5.1-32 8.2-44.2 1.5-1.4 1.9 3.2 2.1 5 .4 2.6 0 9.9 0 12.4.2 4.8 1.2 7.3.7 9.5-1.3 6-2.3 5.7-3.5 9.3-2.5 7.3-7.1 11.1-7.5 8M171.4 70.7c1.3 2.4 4.9-10.7 6-16.4 1-5.4 2.4-12.5.5-17.9-1-2.8-7-11.2-7.7-8.4-.3 1.2-.5 9.5-1.2 13.5-.8 5-2.3 9.9-2.4 14.9 0 11.3 3.4 11.7 4.8 14.3"/><path fill="#faeee0" d="M127.4 205.8c-.3.9-2.5 1.5-3.3 1.8-2 .6-3.8-1-4.9-2.3-1.5-1.8-1.5-4.7-2.1-6.8-.4-1.3-2.6-1.5-3.3-.3-2.2 4-10.8-3.5-8.8-6 1.3-1.7-1.9-3.1-3.2-1.5-3.8 4.8 6.6 13.8 12.5 11.4l1 3.5c1 2.3 3.3 3.7 5.5 5 3.1 1.6 9.1-1.3 10-4.1.7-2-2.8-2.6-3.4-.7M154.8 176.7c.3 1.3.4 5.8-2.1 3.4-1-1-3-.4-3.1.9-.2 3.1-3.3 3.2-6 2.2-2.2-.7-3.3 2.3-1.2 3 4 1.4 8.3.6 10-2.4 1.3.7 2.8.8 4-.3 2.2-2 2.5-4.9 1.9-7.5-.5-2-4-1.3-3.5.7M161.1 241.9c-1 1.9-2.6 1.8-4.5 1-1.3-.6-3 .3-2.6 1.7.9 2.7-2.6 3.5-5 2.6-2-.9-3.8 1.8-1.7 2.7 4.2 1.7 9.6.2 10.3-3.5 2.7.4 5.3-.3 6.6-3 1-1.8-2.2-3.4-3-1.5M133.8 94.7c-.5 2.7-5.5-.5-6.8-1.3-1-.8-2.5-.3-2.6 1-.2 1.6-2.5 1.1-3.5 1-2-.5-3.7-1.7-3.7-3.5s1-3.7 1.6-5.4c.4-1.1-1.1-2.3-2.2-1.6-2 1.3-11.9 2.5-8-1.8 1.3-1.3-1-3.3-2.2-1.9-1.8 2-3 6.5.9 7.5 2 .5 5 .4 7.6-.1-1 3.4-1.3 6.5 3 8.6 3 1.5 7 1.5 8.8-.8 3.6 2 9.3 3.9 10-1 .3-1.7-2.7-2.5-3-.7"/><path fill="#494949" d="M116.9 157c5.2.5 10.5 1.7 15.8 1.5 3.3-.2 6.8-.6 10.2-1.1 2.4-.4 5.4-.8 7-2.6.2 6-12.3 7.9-17.2 8-5.6.1-11.9-2.3-15.8-5.8"/><path fill="#494949" d="M131 144.5c-.6 3.9-.7 7.8-.3 11.6 0 1-.2 3.5 1.2 4 1 .4 2.4-.4 2.6-1.4.3-1.6-.4-3.7-.5-5.4 0-2 0-4 .2-6 .2-1.2.8-2.8-.5-3.6-1-.6-2.5-.4-2.7.8"/><path fill="#494949" d="M141.3 135.1c-3.2.2-6.1 2-8.5 3.6-2.1-1.4-5.4-2.7-8-2-1.7.5-.2 1 .4 1.4a15 15 0 0 1 3.2 3c1.4 1.7 2.6 3.5 4 5 1.1-.6 2-1.4 3-2.2l4.3-5.7 1-1.5c.4-.5 1.5-1.2.6-1.6"/><path fill="#2c3844" d="M101.3 113.8c1.6-4 3.3-9.2 7.5-8.3 3.3.6 7.6 11.4 4.8 10.4-1.5-.6-2.7-5.5-5.5-6.1-1.8-.4-4.3 5.8-6.7 6.4-1.1.3-.5-1.4 0-2.4M147.2 113.8c1.6-4 3.2-9.2 7.5-8.3 3.2.6 7.6 11.4 4.8 10.4-1.5-.6-2.7-5.5-5.5-6.1-1.8-.4-4.3 5.8-6.7 6.4-1.1.3-.6-1.4-.1-2.4"/><g fill="#252626" stroke-width="29.1" aria-label="Vikunja" font-family="Quicksand" font-size="1163.4" font-weight="700" letter-spacing="0" style="line-height:1.25" word-spacing="0"><path d="M3302.3-1549.4c3.4 2.3 8.1 5.8 10.4 7h1.2s1.2 0 1.2 1.1c2.3 0 7 1.2 9.3 2.4h2.3c3.5 1.1 8.1 1.1 11.6 1.1s7 0 11.7-1.1h2.3c3.5-1.2 5.8-2.4 9.3-2.4 1.1-1.1 1.1-1.1 2.3-1.1 3.5-1.2 7-4.7 9.3-5.8l2.3-1.2c2.4-2.3 4.7-3.5 7-5.8 1.2-1.2 1.2-1.2 2.4-3.5 1.1-2.3 4.6-4.7 5.8-7 1.1 0 1.1 0 1.1-1.2 2.4-2.3 3.5-7 4.7-9.3l287.3-679.4a63.9 63.9 0 0 0-34.9-82.6 64 64 0 0 0-83.7 33.8l-226.9 538.6-226.8-538.6a62.7 62.7 0 0 0-82.6-33.8 62 62 0 0 0-35 82.6l285 679.4c2.4 2.4 4.7 7 5.9 9.3 0 1.2 1.2 1.2 1.2 1.2 1.1 2.3 3.5 4.7 5.8 7 0 2.3 1.1 2.3 1.1 3.5 3.5 2.3 5.9 3.5 8.2 5.8h1.2zM3936.8-2118.3a62.1 62.1 0 0 0-62.8 64v453.7c0 35 28 62.8 62.8 62.8 36.1 0 62.9-27.9 62.9-62.8v-453.7c0-37.2-26.8-64-62.9-64zm62.9-171a61.8 61.8 0 0 0-62.9-62.8c-34.9 0-62.8 27.9-62.8 62.8v24.4c0 35 28 64 62.8 64 36.1 0 62.9-29 62.9-64zM4264-1537.8c36.1 0 65.2-29 65.2-64V-1704l64-64 171 207a61.7 61.7 0 0 0 48.9 23.3c14 0 29-4.6 40.7-15.1a64.5 64.5 0 0 0 9.3-90.7L4483.9-1859l174.5-174.5a63.2 63.2 0 0 0 0-90.7 65.3 65.3 0 0 0-90.7 0l-238.5 238.5v-402.6c0-34.9-29-64-65.2-64-36 0-64 29.1-64 64v686.4c0 35 28 64 64 64zM5316.6-1779.8v-278c0-32.6-30.2-61.7-62.8-61.7a61 61 0 0 0-60.5 61.7v278a120.7 120.7 0 0 1-122.1 118.7 117.7 117.7 0 0 1-118.7-118.7v-278a62 62 0 0 0-61.6-61.7c-33.8 0-61.7 29.1-61.7 61.7v278c0 132.7 109.3 242 242 242 133.8 0 245.4-109.3 245.4-242zM5769-2119.5c-45.3 0-88.4 14-123.3 36.1a63 63 0 0 0-57-36c-34.9 0-61.7 27.9-61.7 61.6v458.3a61.3 61.3 0 0 0 61.7 61.7 63.6 63.6 0 0 0 61.7-50c2.3-4.7 2.3-8.1 2.3-11.6v-278c0-65.2 51.2-117.6 116.3-117.6 66.3 0 121 52.4 121 117.5v278c0 33.8 29.1 61.7 61.7 61.7a61 61 0 0 0 60.5-61.6v-278c0-131.5-108.2-242-243.2-242zM6255.6-2199.7a64.3 64.3 0 0 0 62.9-64v-23.3c0-37.2-28-64-62.9-64a63 63 0 0 0-64 64v23.3c0 33.7 29.1 64 64 64zm-65.1 867.8c69.8 0 125.6-57 125.6-125.6v-598c0-36-26.7-64-62.8-64-33.7 0-62.8 28-62.8 64v598c-37.2 0-64 28-64 61.7 0 37.2 26.8 64 64 64zM6998.5-2056.6c0-35-28-62.9-61.7-62.9-30.2 0-53.5 22.1-60.5 51.2a265.2 265.2 0 0 0-154.7-51.2 268 268 0 0 0-197.8 87.3c-50 52.3-79 124.5-79 204.7 0 79.2 29 151.3 79 204.8 50 52.4 118.7 85 197.8 85 58.2 0 110.5-18.7 154.7-50.1 7 28 30.3 50 60.5 50a62 62 0 0 0 61.7-61.6v-228zm-168.7 349c-28 29-67.5 45.3-108.2 45.3-41.9 0-81.4-16.2-108.2-45.3-28-30.3-44.2-72.2-44.2-119.9 0-48.8 16.3-90.7 44.2-119.8a140.3 140.3 0 0 1 108.2-47.7c40.7 0 80.3 16.3 108.2 47.7 28 29.1 45.4 71 45.4 119.8 0 47.7-17.5 89.6-45.4 119.9z" style="-inkscape-font-specification:'Quicksand Bold'" transform="matrix(.13333 0 0 .13333 -75.5 381.8)"/></g></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 872.6 256.8" width="872.6" height="256.8" xml:space="preserve"><path fill="#196aff" d="M226.9 46.8A126 126 0 0 0 128 0a127.2 127.2 0 0 0-99 46.8A127 127 0 0 0 0 128c0 34.2 13.3 66.3 37.5 90.5A127.2 127.2 0 0 0 128 256c34.2 0 66.3-13.3 90.5-37.5A127.2 127.2 0 0 0 256 128a130 130 0 0 0-29.1-81.2"/><path fill="#fff" d="M167.6 162.1c4.8-14 12.6-18.2 13.6-39.8.4-7.5-2-31.6-2-31.6s3.8-9.6-3.4-20.3c-11.1-16.7-34-17.8-46-17.8-12.1 0-34.8 1.1-45.9 17.8-7.2 10.7-3.4 20.3-3.4 20.3L78.2 114a60.8 60.8 0 0 0 3.8 28c1.9 5.3 4.9 10.7 7.2 16.1 6.9 16.5 1.1 36.8 1.5 54.6.3 12.6-2.7 25.3-3.9 37.6a127.6 127.6 0 0 0 87.2-1.7c-2.7-15.4-5.9-30-6.4-35.6-1.4-16.9-5.5-34.7 0-50.9"/><path fill="#fff" d="M79.5 64c.2 2.4.4 5 1.1 7.4.2.8.6 2.6 1.5 3 1.2.3 3.5-1.2 4.3-1.8l4.9-3.7 3.2-2.2c1.1-.9 2-2 2.9-3 1.1-1.2 2-2.5 2.8-3.9.7-1 5-1.8 5.7-2.8.7-1.1 0-2.5 0-3.8 0-10 .7-19.7 1-29.4.2-6.6 2.8-14.5-7.2-11.4C78.3 19 78.6 48.5 79.5 63.9M173.7 77.8l-.9-.6c-1.2-1-2.3-1.8-3.3-2.9l-3.8-3.8-3.3-3.5-2-2.4-.7-1.4c-.3-.7-5.3-1.4-4.8-2 .8-1.1 2.7-2 3.2-3.3 2.3-6.5 3.3-32.6 3.5-39.3.8-17 15.7.8 18.3 7.7 7.6 20 3.1 34.5-6.1 51.5"/><path fill="#f1e6d3" d="M153.3 143.4c0-9.9-1.2-13.8-6.7-18.6-3.4-3-7.4-4.2-13.8-4-6.4-.2-11 1.7-14.3 5.2-5 5.2-6.4 8.3-6.4 18.1 0 5.3 5.7 17 7.5 19.8 2.8 4.8 8 6.5 13.2 6.2 5.1.3 10.3-1.4 13.2-6.2a56.4 56.4 0 0 0 7.3-20.5"/><path fill="#f1d7d4" d="M88 73c-1.3-11.5-5.1-32 8.2-44.2 1.5-1.4 1.9 3.2 2.1 5 .4 2.6 0 9.9 0 12.4.2 4.8 1.2 7.3.7 9.5-1.3 6-2.3 5.7-3.5 9.3-2.5 7.3-7.1 11.1-7.5 8M171.4 70.7c1.3 2.4 4.9-10.7 6-16.4 1-5.4 2.4-12.5.5-17.9-1-2.8-7-11.2-7.7-8.4-.3 1.2-.5 9.5-1.2 13.5-.8 5-2.3 9.9-2.4 14.9 0 11.3 3.4 11.7 4.8 14.3"/><path fill="#faeee0" d="M127.4 205.8c-.3.9-2.5 1.5-3.3 1.8-2 .6-3.8-1-4.9-2.3-1.5-1.8-1.5-4.7-2.1-6.8-.4-1.3-2.6-1.5-3.3-.3-2.2 4-10.8-3.5-8.8-6 1.3-1.7-1.9-3.1-3.2-1.5-3.8 4.8 6.6 13.8 12.5 11.4l1 3.5c1 2.3 3.3 3.7 5.5 5 3.1 1.6 9.1-1.3 10-4.1.7-2-2.8-2.6-3.4-.7M154.8 176.7c.3 1.3.4 5.8-2.1 3.4-1-1-3-.4-3.1.9-.2 3.1-3.3 3.2-6 2.2-2.2-.7-3.3 2.3-1.2 3 4 1.4 8.3.6 10-2.4 1.3.7 2.8.8 4-.3 2.2-2 2.5-4.9 1.9-7.5-.5-2-4-1.3-3.5.7M161.1 241.9c-1 1.9-2.6 1.8-4.5 1-1.3-.6-3 .3-2.6 1.7.9 2.7-2.6 3.5-5 2.6-2-.9-3.8 1.8-1.7 2.7 4.2 1.7 9.6.2 10.3-3.5 2.7.4 5.3-.3 6.6-3 1-1.8-2.2-3.4-3-1.5M133.8 94.7c-.5 2.7-5.5-.5-6.8-1.3-1-.8-2.5-.3-2.6 1-.2 1.6-2.5 1.1-3.5 1-2-.5-3.7-1.7-3.7-3.5s1-3.7 1.6-5.4c.4-1.1-1.1-2.3-2.2-1.6-2 1.3-11.9 2.5-8-1.8 1.3-1.3-1-3.3-2.2-1.9-1.8 2-3 6.5.9 7.5 2 .5 5 .4 7.6-.1-1 3.4-1.3 6.5 3 8.6 3 1.5 7 1.5 8.8-.8 3.6 2 9.3 3.9 10-1 .3-1.7-2.7-2.5-3-.7"/><path fill="#494949" d="M116.9 157c5.2.5 10.5 1.7 15.8 1.5 3.3-.2 6.8-.6 10.2-1.1 2.4-.4 5.4-.8 7-2.6.2 6-12.3 7.9-17.2 8-5.6.1-11.9-2.3-15.8-5.8"/><path fill="#494949" d="M131 144.5c-.6 3.9-.7 7.8-.3 11.6 0 1-.2 3.5 1.2 4 1 .4 2.4-.4 2.6-1.4.3-1.6-.4-3.7-.5-5.4 0-2 0-4 .2-6 .2-1.2.8-2.8-.5-3.6-1-.6-2.5-.4-2.7.8"/><path fill="#494949" d="M141.3 135.1c-3.2.2-6.1 2-8.5 3.6-2.1-1.4-5.4-2.7-8-2-1.7.5-.2 1 .4 1.4a15 15 0 0 1 3.2 3c1.4 1.7 2.6 3.5 4 5 1.1-.6 2-1.4 3-2.2l4.3-5.7 1-1.5c.4-.5 1.5-1.2.6-1.6"/><path fill="#2c3844" d="M101.3 113.8c1.6-4 3.3-9.2 7.5-8.3 3.3.6 7.6 11.4 4.8 10.4-1.5-.6-2.7-5.5-5.5-6.1-1.8-.4-4.3 5.8-6.7 6.4-1.1.3-.5-1.4 0-2.4M147.2 113.8c1.6-4 3.2-9.2 7.5-8.3 3.2.6 7.6 11.4 4.8 10.4-1.5-.6-2.7-5.5-5.5-6.1-1.8-.4-4.3 5.8-6.7 6.4-1.1.3-.6-1.4-.1-2.4"/><g fill="#252626" stroke-width="29.1" aria-label="Vikunja" font-family="Quicksand" font-size="1163.4" font-weight="700" letter-spacing="0" style="line-height:1.25" word-spacing="0"><path d="M3302.3-1549.4c3.4 2.3 8.1 5.8 10.4 7h1.2s1.2 0 1.2 1.1c2.3 0 7 1.2 9.3 2.4h2.3c3.5 1.1 8.1 1.1 11.6 1.1s7 0 11.7-1.1h2.3c3.5-1.2 5.8-2.4 9.3-2.4 1.1-1.1 1.1-1.1 2.3-1.1 3.5-1.2 7-4.7 9.3-5.8l2.3-1.2c2.4-2.3 4.7-3.5 7-5.8 1.2-1.2 1.2-1.2 2.4-3.5 1.1-2.3 4.6-4.7 5.8-7 1.1 0 1.1 0 1.1-1.2 2.4-2.3 3.5-7 4.7-9.3l287.3-679.4a63.9 63.9 0 0 0-34.9-82.6 64 64 0 0 0-83.7 33.8l-226.9 538.6-226.8-538.6a62.7 62.7 0 0 0-82.6-33.8 62 62 0 0 0-35 82.6l285 679.4c2.4 2.4 4.7 7 5.9 9.3 0 1.2 1.2 1.2 1.2 1.2 1.1 2.3 3.5 4.7 5.8 7 0 2.3 1.1 2.3 1.1 3.5 3.5 2.3 5.9 3.5 8.2 5.8h1.2zM3936.8-2118.3a62.1 62.1 0 0 0-62.8 64v453.7c0 35 28 62.8 62.8 62.8 36.1 0 62.9-27.9 62.9-62.8v-453.7c0-37.2-26.8-64-62.9-64zm62.9-171a61.8 61.8 0 0 0-62.9-62.8c-34.9 0-62.8 27.9-62.8 62.8v24.4c0 35 28 64 62.8 64 36.1 0 62.9-29 62.9-64zM4264-1537.8c36.1 0 65.2-29 65.2-64V-1704l64-64 171 207a61.7 61.7 0 0 0 48.9 23.3c14 0 29-4.6 40.7-15.1a64.5 64.5 0 0 0 9.3-90.7L4483.9-1859l174.5-174.5a63.2 63.2 0 0 0 0-90.7 65.3 65.3 0 0 0-90.7 0l-238.5 238.5v-402.6c0-34.9-29-64-65.2-64-36 0-64 29.1-64 64v686.4c0 35 28 64 64 64zM5316.6-1779.8v-278c0-32.6-30.2-61.7-62.8-61.7a61 61 0 0 0-60.5 61.7v278a120.7 120.7 0 0 1-122.1 118.7 117.7 117.7 0 0 1-118.7-118.7v-278a62 62 0 0 0-61.6-61.7c-33.8 0-61.7 29.1-61.7 61.7v278c0 132.7 109.3 242 242 242 133.8 0 245.4-109.3 245.4-242zM5769-2119.5c-45.3 0-88.4 14-123.3 36.1a63 63 0 0 0-57-36c-34.9 0-61.7 27.9-61.7 61.6v458.3a61.3 61.3 0 0 0 61.7 61.7 63.6 63.6 0 0 0 61.7-50c2.3-4.7 2.3-8.1 2.3-11.6v-278c0-65.2 51.2-117.6 116.3-117.6 66.3 0 121 52.4 121 117.5v278c0 33.8 29.1 61.7 61.7 61.7a61 61 0 0 0 60.5-61.6v-278c0-131.5-108.2-242-243.2-242zM6255.6-2199.7a64.3 64.3 0 0 0 62.9-64v-23.3c0-37.2-28-64-62.9-64a63 63 0 0 0-64 64v23.3c0 33.7 29.1 64 64 64zm-65.1 867.8c69.8 0 125.6-57 125.6-125.6v-598c0-36-26.7-64-62.8-64-33.7 0-62.8 28-62.8 64v598c-37.2 0-64 28-64 61.7 0 37.2 26.8 64 64 64zM6998.5-2056.6c0-35-28-62.9-61.7-62.9-30.2 0-53.5 22.1-60.5 51.2a265.2 265.2 0 0 0-154.7-51.2 268 268 0 0 0-197.8 87.3c-50 52.3-79 124.5-79 204.7 0 79.2 29 151.3 79 204.8 50 52.4 118.7 85 197.8 85 58.2 0 110.5-18.7 154.7-50.1 7 28 30.3 50 60.5 50a62 62 0 0 0 61.7-61.6v-228zm-168.7 349c-28 29-67.5 45.3-108.2 45.3-41.9 0-81.4-16.2-108.2-45.3-28-30.3-44.2-72.2-44.2-119.9 0-48.8 16.3-90.7 44.2-119.8a140.3 140.3 0 0 1 108.2-47.7c40.7 0 80.3 16.3 108.2 47.7 28 29.1 45.4 71 45.4 119.8 0 47.7-17.5 89.6-45.4 119.9z" style="-inkscape-font-specification:'Quicksand Bold'" transform="matrix(.13333 0 0 .13333 -75.5 381.8)"/></g></svg>
\ No newline at end of file
diff --git a/src/components/home/Logo.vue b/src/components/home/Logo.vue
new file mode 100644
index 000000000..cea2d0f04
--- /dev/null
+++ b/src/components/home/Logo.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import LogoFull from '@/assets/logo-full.svg?component'
+import LogoFullPride from '@/assets/logo-full-pride.svg?component'
+
+const Logo = computed(() => new Date().getMonth() === 5 ? LogoFullPride : LogoFull)
+</script>
+
+<template>
+	<Logo alt="Vikunja" />
+</template>
\ No newline at end of file
diff --git a/src/components/home/MenuButton.vue b/src/components/home/MenuButton.vue
new file mode 100644
index 000000000..ec5caeeac
--- /dev/null
+++ b/src/components/home/MenuButton.vue
@@ -0,0 +1,75 @@
+<template>
+    <button
+        type="button"
+        @click="$store.commit('toggleMenu')"
+        class="menu-show-button"
+        @shortkey="() => $store.commit('toggleMenu')"
+        v-shortkey="['ctrl', 'e']"
+        :aria-label="menuActive ? $t('misc.hideMenu') : $t('misc.showMenu')"
+    />
+</template>
+
+<script setup>
+import { computed} from 'vue'
+import {store} from '@/store'
+
+const menuActive = computed(() => store.menuActive)
+</script>
+
+<style lang="scss" scoped>
+$lineWidth: 2rem;
+$size: $lineWidth + 1rem;
+
+.menu-show-button {
+	// FIXME: create general button component
+	appearance: none;
+	background-color: transparent;
+	border: 0;
+
+	min-height: $size;
+	width: $size;
+
+	position: relative;
+
+	$transformX: translateX(-50%);
+	&::before,
+	&::after {
+		content: '';
+		display: block;
+		position: absolute;
+		height: 3px;
+		width: $lineWidth;
+		left: 50%;
+		transform: $transformX;
+		background-color: $grey-400;
+		border-radius: 2px;
+		transition: all $transition;
+	}
+
+	&::before {
+		top: 50%;
+		transform: $transformX translateY(-0.4rem)
+	}
+
+	&::after {
+		bottom: 50%;
+		transform: $transformX translateY(0.4rem)
+	}
+
+	&:hover,
+	&:focus {
+		&::before,
+		&::after {
+			background-color: $grey-600;
+		}
+
+		&::before {
+			transform: $transformX translateY(-0.5rem);
+		}
+
+		&::after {
+			transform: $transformX translateY(0.5rem)
+		}
+	}
+}
+</style>
\ No newline at end of file
diff --git a/src/components/home/PoweredByLink.vue b/src/components/home/PoweredByLink.vue
new file mode 100644
index 000000000..e174ba691
--- /dev/null
+++ b/src/components/home/PoweredByLink.vue
@@ -0,0 +1,20 @@
+<template>
+    <a class="menu-bottom-link" :href="poweredByUrl" target="_blank" rel="noreferrer noopener nofollow">
+        {{ $t('misc.poweredBy') }}
+    </a>
+</template>
+
+<script setup lang="ts">
+import {POWERED_BY as poweredByUrl} from '@/urls'
+</script>
+
+<style lang="scss">
+.menu-bottom-link {
+	color: $grey-300;
+	text-align: center;
+	display: block;
+	padding-top: 1rem;
+	padding-bottom: 1rem;
+	font-size: .8rem;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/home/contentAuth.vue b/src/components/home/contentAuth.vue
index d68cdb43f..e0fda1201 100644
--- a/src/components/home/contentAuth.vue
+++ b/src/components/home/contentAuth.vue
@@ -1,7 +1,7 @@
 <template>
 	<div>
 		<a @click="$store.commit('menuActive', false)" class="menu-hide-button" v-if="menuActive">
-			<icon icon="times"></icon>
+			<icon icon="times" />
 		</a>
 		<div
 			:class="{'has-background': background}"
@@ -134,6 +134,32 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.menu-hide-button {
+	position: fixed;
+	top: 0.5rem;
+	right: 0.5rem;
+	z-index: 31;
+	width: 3rem;
+	height: 3rem;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	font-size: 2rem;
+	color: $grey-400;
+	line-height: 1;
+	transition: all $transition;
+
+	@media screen and (min-width: $tablet) {
+		display: none;
+	}
+
+	&:hover,
+	&:focus {
+		height: 1rem;
+		color: $grey-600;
+	}
+}
+
 .app-container {
   min-height: calc(100vh - 65px);
 
diff --git a/src/components/home/contentLinkShare.vue b/src/components/home/contentLinkShare.vue
index 7dff2fbb9..355b6d35f 100644
--- a/src/components/home/contentLinkShare.vue
+++ b/src/components/home/contentLinkShare.vue
@@ -6,7 +6,7 @@
 	>
 		<div class="container has-text-centered link-share-view">
 			<div class="column is-10 is-offset-1">
-				<img alt="Vikunja" class="logo" :src="logoUrl" />
+				<Logo class="logo" />
 				<h1
 					:style="{ 'opacity': currentList.title === '' ? '0': '1' }"
 					class="title">
@@ -14,9 +14,7 @@
 				</h1>
 				<div class="box has-text-left view">
 					<router-view/>
-					<a class="menu-bottom-link" href="https://vikunja.io" target="_blank" rel="noreferrer noopener nofollow">
-						{{ $t('misc.poweredBy') }}
-					</a>
+					<PoweredByLink />
 				</div>
 			</div>
 		</div>
@@ -25,51 +23,45 @@
 
 <script>
 import {mapState} from 'vuex'
-import {CURRENT_LIST} from '@/store/mutation-types'
 
-import logoUrl from '@/assets/logo-full.svg'
+import Logo from '@/components/home/Logo.vue'
+import PoweredByLink from './PoweredByLink.vue'
 
 export default {
 	name: 'contentLinkShare',
-	data() {
-		return {
-			logoUrl,
-		}
+	components: {
+		Logo,
+		PoweredByLink,
 	},
-	computed: mapState({
-		currentList: CURRENT_LIST,
-		background: 'background',
-	}),
+	computed: mapState([
+		'currentList',
+		'background',
+	]),
 }
 </script>
 
 <style lang="scss" scoped>
 .link-share-container.has-background .view {
-  background: transparent;
+  background-color: transparent;
   border: none;
-
-  .logout .button {
-    box-shadow: none;
-  }
 }
 
-.link-share-view {
-  .logo {
-    max-width: 300px;
-    width: 90%;
-    margin: 2rem 0 1.5rem;
-  }
+.logo {
+	max-width: 300px;
+	width: 90%;
+	margin: 2rem 0 1.5rem;
+}
 
-  .column {
-    max-width: 100%;
-  }
+.column {
+	max-width: 100%;
+}
 
-  .card {
-    background: $white;
-  }
-
-  .title {
+.title {
     text-shadow: 0 0 1rem $white;
-  }
+}
+
+// FIXME: this should be defined somewhere deep
+.link-share-view .card {
+    background-color: $white;
 }
 </style>
diff --git a/src/components/home/contentNoAuth.vue b/src/components/home/contentNoAuth.vue
index b95739067..38b945ee4 100644
--- a/src/components/home/contentNoAuth.vue
+++ b/src/components/home/contentNoAuth.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="no-auth-wrapper">
 		<div class="noauth-container">
-			<img alt="Vikunja" :src="logoUrl" width="400" height="117" />
+			<Logo width="400" height="117" />
 			<div class="message is-info" v-if="motd !== ''">
 				<div class="message-header">
 					<p>{{ $t('misc.info') }}</p>
@@ -18,16 +18,13 @@
 <script>
 import {mapState} from 'vuex'
 
-import logoUrl from '@/assets/logo-full.svg'
+import Logo from '@/components/home/Logo.vue'
+
 import { saveLastVisited } from '@/helpers/saveLastVisited'
 
 export default {
 	name: 'contentNoAuth',
-	data() {
-		return {
-			logoUrl,	
-		}
-	},
+	components: { Logo },
 	computed: {
 		routeName() {
 			return this.$route.name
@@ -68,7 +65,7 @@ export default {
 
 <style lang="scss" scoped>
 .no-auth-wrapper {
-  background: url('@/assets/llama.svg') no-repeat bottom left fixed $light-background;
+  background: url('@/assets/llama.svg?url') no-repeat bottom left fixed $light-background;
   min-height: 100vh;
 }
 
diff --git a/src/components/home/navigation.vue b/src/components/home/navigation.vue
index b41a7c781..9f5cfd11d 100644
--- a/src/components/home/navigation.vue
+++ b/src/components/home/navigation.vue
@@ -2,7 +2,7 @@
 	<div :class="{'is-active': menuActive}" class="namespace-container">
 		<div class="menu top-menu">
 			<router-link :to="{name: 'home'}" class="logo">
-				<img alt="Vikunja" :src="logoUrl" width="164" height="48"/>
+				<Logo width="164" height="48" />
 			</router-link>
 			<ul class="menu-list">
 				<li>
@@ -146,25 +146,34 @@
 				</div>
 			</template>
 		</aside>
-		<a class="menu-bottom-link" :href="poweredByUrl" target="_blank" rel="noreferrer noopener nofollow">
-			{{ $t('misc.poweredBy') }}
-		</a>
+		<PoweredByLink />
 	</div>
 </template>
 
 <script>
 import {mapState} from 'vuex'
-import {CURRENT_LIST, MENU_ACTIVE, LOADING, LOADING_MODULE} from '@/store/mutation-types'
+import draggable from 'vuedraggable'
+
 import ListSettingsDropdown from '@/components/list/list-settings-dropdown.vue'
 import NamespaceSettingsDropdown from '@/components/namespace/namespace-settings-dropdown.vue'
-import draggable from 'vuedraggable'
-import {calculateItemPosition} from '@/helpers/calculateItemPosition'
-import {POWERED_BY} from '@/urls'
+import PoweredByLink from '@/components/home/PoweredByLink.vue'
+import Logo from '@/components/home/Logo.vue'
+
+import {CURRENT_LIST, MENU_ACTIVE, LOADING, LOADING_MODULE} from '@/store/mutation-types'
+import {calculateItemPosition} from '@/helpers/calculateItemPosition'
 
-import logoUrl from '@/assets/logo-full.svg'
 
 export default {
 	name: 'navigation',
+
+	components: {
+		ListSettingsDropdown,
+		NamespaceSettingsDropdown,
+		draggable,
+		Logo,
+		PoweredByLink,
+	},
+
 	data() {
 		return {
 			listsVisible: {},
@@ -174,15 +183,8 @@ export default {
 				ghostClass: 'ghost',
 			},
 			listUpdating: {},
-			logoUrl,
-			poweredByUrl: POWERED_BY,
 		}
 	},
-	components: {
-		ListSettingsDropdown,
-		NamespaceSettingsDropdown,
-		draggable,
-	},
 	computed: {
 		...mapState({
 			namespaces: state => state.namespaces.namespaces.filter(n => !n.isArchived),
@@ -517,10 +519,13 @@ $vikunja-nav-selected-width: 0.4rem;
 		}
 
 		.logo {
-			display: none;
+			display: block;
 
-			@media screen and (max-width: $tablet) {
-				display: block;
+			padding-left: 2rem;
+			margin-right: 1rem;
+
+			@media screen and (min-width: $tablet) {
+				display: none;
 			}
 		}
 
diff --git a/src/components/home/topNavigation.vue b/src/components/home/topNavigation.vue
index 063152574..f397d65f2 100644
--- a/src/components/home/topNavigation.vue
+++ b/src/components/home/topNavigation.vue
@@ -5,24 +5,11 @@
 		class="navbar main-theme is-fixed-top"
 		role="navigation"
 	>
-		<div class="navbar-brand">
-			<router-link :to="{name: 'home'}" class="navbar-item logo">
-				<img width="164" height="48" alt="Vikunja" :src="logoUrl" />
-			</router-link>
-			<a
-				@click="$store.commit('toggleMenu')"
-				class="menu-show-button"
-				@shortkey="() => $store.commit('toggleMenu')"
-				v-shortkey="['ctrl', 'e']"
-			>
-			</a>
-		</div>
-		<a
-			@click="$store.commit('toggleMenu')"
-			class="menu-show-button"
-		>
-		</a>
-		<div class="list-title" ref="listTitle" :style="{'display': currentList.id ? '': 'none'}">
+		<router-link :to="{name: 'home'}" class="logo">
+			<Logo width="164" height="48" />
+		</router-link>
+		<MenuButton class="menu-button" />
+		<div class="list-title" ref="listTitle" v-show="currentList.id">
 			<template v-if="currentList.id">
 				<h1
 					:style="{ 'opacity': currentList.title === '' ? '0': '1' }"
@@ -101,9 +88,8 @@ import Update from '@/components/home/update.vue'
 import ListSettingsDropdown from '@/components/list/list-settings-dropdown.vue'
 import Dropdown from '@/components/misc/dropdown.vue'
 import Notifications from '@/components/notifications/notifications.vue'
-
-import logoUrl from '@/assets/logo-full.svg'
-import logoFullPrideUrl from '@/assets/logo-full-pride.svg'
+import Logo from '@/components/home/Logo.vue'
+import MenuButton from '@/components/home/MenuButton.vue'
 
 export default {
 	name: 'topNavigation',
@@ -112,11 +98,10 @@ export default {
 		Dropdown,
 		ListSettingsDropdown,
 		Update,
+		Logo,
+		MenuButton,
 	},
 	computed: {
-		logoUrl() {
-			return (new Date()).getMonth() === 5 ? logoFullPrideUrl : logoUrl
-		},
 		...mapState({
 			userInfo: state => state.auth.info,
 			userAvatar: state => state.auth.avatarUrl,
@@ -155,19 +140,26 @@ $vikunja-nav-logo-full-width: 164px;
 
 .navbar {
 	z-index: 4 !important;
+}
 
-	.navbar-brand {
+.logo {
+	display: none;
+
+	@media screen and (min-width: $tablet) {
+		align-self: stretch;
 		display: flex;
 		align-items: center;
-
-		.logo img {
-			width: $vikunja-nav-logo-full-width;
-		}
+		padding-left: 2rem;
+		margin-right: 1.5rem;
 	}
-	&.is-dark .navbar-brand > .navbar-item {
-		@media screen and (max-width: $tablet) {
-			margin: 0 auto;
-		}
+}
+
+.menu-button {
+	align-self: stretch;
+	margin-right: auto;
+
+	@media screen and (max-width: $tablet) {
+		margin-left: $hamburger-menu-icon-spacing;
 	}
 }
 
@@ -197,10 +189,6 @@ $vikunja-nav-logo-full-width: 164px;
 	}
 
 	@media screen and (max-width: $tablet) {
-		.navbar-brand {
-			display: none;
-		}
-
 		.user {
 			width: $user-dropdown-width-mobile;
 			display: flex;
diff --git a/src/i18n/lang/en.json b/src/i18n/lang/en.json
index e8fd95bd1..2f3dfe28f 100644
--- a/src/i18n/lang/en.json
+++ b/src/i18n/lang/en.json
@@ -449,7 +449,9 @@
     "saved": "Saved!",
     "default": "Default",
     "close": "Close",
-    "download": "Download"
+    "download": "Download",
+    "showMenu": "Show the menu",
+    "hideMenu": "Hide the menu"
   },
   "input": {
     "resetColor": "Reset Color",
diff --git a/src/styles/theme/_index.scss b/src/styles/theme/_index.scss
index f56ea1d08..2c1a5b44b 100644
--- a/src/styles/theme/_index.scss
+++ b/src/styles/theme/_index.scss
@@ -7,5 +7,4 @@
 @import "form";
 @import "link-share";
 @import "loading";
-@import "navigation";
 @import "notification";
\ No newline at end of file
diff --git a/src/styles/theme/navigation.scss b/src/styles/theme/navigation.scss
deleted file mode 100644
index 894ef2e12..000000000
--- a/src/styles/theme/navigation.scss
+++ /dev/null
@@ -1,92 +0,0 @@
-// FIXME: create <MenuButton> component
-
-.menu-hide-button,
-.menu-show-button {
-	display: none;
-	z-index: 31;
-	font-weight: bold;
-	font-size: 2rem;
-	color: $grey-400;
-	line-height: 1;
-	transition: all $transition;
-
-	&:hover,
-	&:focus {
-		height: 1rem;
-		color: $grey-600;
-	}
-}
-
-.menu-show-button {
-	height: .75rem;
-	width: 2rem;
-
-	@media screen and (max-width: $tablet) {
-		display: block;
-		margin-left: $hamburger-menu-icon-spacing;
-	}
-
-	// menu line icon and animationanimation // START
-	&::before,
-	&::after {
-		display: block;
-		content: '';
-		border-top: 3px solid $grey-400;
-		border-radius: $radius;
-		transition: all $transition;
-	}
-
-	&::before {
-		margin-bottom: .5rem;
-	}
-
-	&::after {
-		margin-top: .5rem;
-	}
-
-	&:hover,
-	&:focus {
-		&::before {
-			margin-bottom: .75rem;
-		}
-
-		&::after {
-			margin-top: .75rem;
-		}
-	}
-	// menu line animation // END
-}
-
-.menu-hide-button {
-	position: fixed;
-
-	@media screen and (max-width: $tablet) {
-		display: block;
-		top: $hamburger-menu-icon-spacing;
-		right: $hamburger-menu-icon-spacing;
-	}
-
-	&:hover,
-	&:focus {
-		color: $text;
-	}
-}
-
-.navbar-brand .menu-show-button {
-	display: block;
-}
-
-@media screen and (max-width: $tablet) {
-	.navbar.is-dark .navbar-brand > .navbar-item {
-		margin: 0 auto;
-	}
-}
-
-.menu-bottom-link {
-	width: 100%;
-	color: $grey-300;
-	text-align: center;
-	display: block;
-	margin: 1rem 0;
-	font-size: .8rem;
-}
diff --git a/src/styles/theme/theme.scss b/src/styles/theme/theme.scss
index b2549db73..b674dfaed 100644
--- a/src/styles/theme/theme.scss
+++ b/src/styles/theme/theme.scss
@@ -33,15 +33,6 @@ h6 {
   font-weight: 400 !important;
 }
 
-.logo {
-  padding-left: 2rem !important;
-
-  img {
-    max-height: 3rem !important;
-    margin-right: 1rem;
-  }
-}
-
 // FIXME: create <ProgressBar> component. used in
 // - attachments.vue
 // - kanban-card.vue
diff --git a/src/types/vite-svg-loader.d.ts b/src/types/vite-svg-loader.d.ts
new file mode 100644
index 000000000..53b8d1d6d
--- /dev/null
+++ b/src/types/vite-svg-loader.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite-svg-loader" />
\ No newline at end of file
diff --git a/src/views/migrator/MigrateService.vue b/src/views/migrator/MigrateService.vue
index ae6d762bb..b4703c564 100644
--- a/src/views/migrator/MigrateService.vue
+++ b/src/views/migrator/MigrateService.vue
@@ -41,7 +41,7 @@
 					<div class="progress-dots">
 						<span v-for="i in progressDotsCount" :key="i" />
 					</div>
-					<img alt="Vikunja" :src="logoUrl" />
+					<Logo alt="Vikunja" />
 				</div>
 				<p>{{ $t('migrate.inProgress') }}</p>
 			</div>
@@ -70,14 +70,17 @@
 <script>
 import AbstractMigrationService from '@/services/migrator/abstractMigration'
 import AbstractMigrationFileService from '@/services/migrator/abstractMigrationFile'
-import {MIGRATORS} from './migrators'
+import Logo from '@/assets/logo.svg?component'
 
-import logoUrl from '@/assets/logo.svg'
+import {MIGRATORS} from './migrators'
 
 const PROGRESS_DOTS_COUNT = 8
 
 export default {
 	name: 'MigrateService',
+
+	components: { Logo },
+
 	data() {
 		return {
 			progressDotsCount: PROGRESS_DOTS_COUNT,
@@ -87,7 +90,6 @@ export default {
 			message: '',
 			migratorAuthCode: '',
 			migrationService: null,
-			logoUrl,
 		}
 	},
 
diff --git a/src/views/migrator/migrators.ts b/src/views/migrator/migrators.ts
index f0885950d..08e7ca8f9 100644
--- a/src/views/migrator/migrators.ts
+++ b/src/views/migrator/migrators.ts
@@ -1,8 +1,8 @@
 import wunderlistIcon from './icons/wunderlist.jpg'
-import todoistIcon from './icons/todoist.svg'
-import trelloIcon from './icons/trello.svg'
-import microsoftTodoIcon from './icons/microsoft-todo.svg'
-import vikunjaFileIcon from './icons/vikunja-file.png'
+import todoistIcon from './icons/todoist.svg?url'
+import trelloIcon from './icons/trello.svg?url'
+import microsoftTodoIcon from './icons/microsoft-todo.svg?url'
+import vikunjaFileIcon from './icons/vikunja-file.png?url'
 
 export interface Migrator {
 	id: string
diff --git a/src/views/tasks/ShowTasks.vue b/src/views/tasks/ShowTasks.vue
index 9da80d15b..d2bd27aef 100644
--- a/src/views/tasks/ShowTasks.vue
+++ b/src/views/tasks/ShowTasks.vue
@@ -38,7 +38,7 @@
 		</div>
 		<template v-if="!loading && (!tasks || tasks.length === 0) && showNothingToDo">
 			<h3 class="nothing">{{ $t('task.show.noTasks') }}</h3>
-			<img alt="" :src="llamaCoolUrl" />
+			<LlamaCool class="llama-cool" />
 		</template>
 		<div :class="{ 'is-loading': loading}" class="spinner"></div>
 
@@ -64,7 +64,7 @@ import 'flatpickr/dist/flatpickr.css'
 import Fancycheckbox from '../../components/input/fancycheckbox'
 import {LOADING, LOADING_MODULE} from '../../store/mutation-types'
 
-import llamaCoolUrl from '@/assets/llama-cool.svg'
+import LlamaCool from '@/assets/llama-cool.svg?component'
 
 export default {
 	name: 'ShowTasks',
@@ -72,6 +72,7 @@ export default {
 		Fancycheckbox,
 		SingleTaskInList,
 		flatPickr,
+		LlamaCool,
 	},
 	data() {
 		return {
@@ -83,7 +84,6 @@ export default {
 			cEndDate: null,
 
 			showNothingToDo: false,
-			llamaCoolUrl,
 		}
 	},
 	props: {
@@ -256,28 +256,22 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.show-tasks {
-	h3 {
-		text-align: left;
+h3 {
+	text-align: left;
 
-		&.nothing {
-			text-align: center;
-			margin-top: 3rem;
-		}
-
-		:deep(.input) {
-			width: 190px;
-			vertical-align: middle;
-			margin: .5rem 0;
-		}
+	&.nothing {
+		text-align: center;
+		margin-top: 3rem;
 	}
 
-	img {
-		margin-top: 2rem;
-	}
-
-	.user img {
-		margin: 0;
+	:deep(.input) {
+		width: 190px;
+		vertical-align: middle;
+		margin: .5rem 0;
 	}
 }
+
+.llama-cool {
+	margin-top: 2rem;
+}
 </style>
\ No newline at end of file
diff --git a/vite.config.js b/vite.config.js
index b22ab63a5..417ccfd88 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -4,6 +4,7 @@ import legacyFn from '@vitejs/plugin-legacy'
 const {VitePWA} = require('vite-plugin-pwa')
 const path = require('path')
 const {visualizer} = require('rollup-plugin-visualizer')
+import svgLoader from 'vite-svg-loader'
 
 const pathSrc = path.resolve(__dirname, './src')
 
@@ -42,6 +43,11 @@ export default defineConfig({
 			},
 		}),
 		legacy,
+		svgLoader({
+			// Since the svgs are already manually optimized via https://jakearchibald.github.io/svgomg/
+			// we don't need to optimize them again.
+			svgo: false,
+		}),
 		VitePWA({
 			srcDir: 'src',
 			filename: 'sw.js',
diff --git a/yarn.lock b/yarn.lock
index e91b509a2..5368a2af4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3052,6 +3052,11 @@
   resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-1.1.2.tgz#ccb91445360179a04e7fe6aff78c00ffc1eeaf82"
   integrity sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==
 
+"@trysound/sax@0.2.0":
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/@trysound/sax/-/sax-0.2.0.tgz#cccaab758af56761eb7bf37af6f03f326dd798ad"
+  integrity sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==
+
 "@tsconfig/node10@^1.0.7":
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/@tsconfig/node10/-/node10-1.0.8.tgz#c1e4e80d6f964fbecb3359c43bd48b40f7cadad9"
@@ -3577,7 +3582,7 @@
     "@vue/compiler-core" "3.2.21"
     "@vue/shared" "3.2.21"
 
-"@vue/compiler-sfc@3.2.21":
+"@vue/compiler-sfc@3.2.21", "@vue/compiler-sfc@^3.2.20":
   version "3.2.21"
   resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.2.21.tgz#42639ee49e725afb7d8f1d1940e75dc17a56002c"
   integrity sha512-+yDlUSebKpz/ovxM2vLRRx7w/gVfY767pOfYTgbIhAs+ogvIV2BsIt4fpxlThnlCNChJ+yE0ERUNoROv2kEGEQ==
@@ -4387,6 +4392,11 @@ body-parser@1.19.0:
     raw-body "2.4.0"
     type-is "~1.6.17"
 
+boolbase@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
+  integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
+
 boxen@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/boxen/-/boxen-4.2.0.tgz#e411b62357d6d6d36587c8ac3d5d974daa070e64"
@@ -5408,6 +5418,37 @@ crypto-random-string@^2.0.0:
   resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-2.0.0.tgz#ef2a7a966ec11083388369baa02ebead229b30d5"
   integrity sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==
 
+css-select@^4.1.3:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/css-select/-/css-select-4.1.3.tgz#a70440f70317f2669118ad74ff105e65849c7067"
+  integrity sha512-gT3wBNd9Nj49rAbmtFHj1cljIAOLYSX1nZ8CB7TBO3INYckygm5B7LISU/szY//YmdiSLbJvDLOx9VnMVpMBxA==
+  dependencies:
+    boolbase "^1.0.0"
+    css-what "^5.0.0"
+    domhandler "^4.2.0"
+    domutils "^2.6.0"
+    nth-check "^2.0.0"
+
+css-tree@^1.1.2, css-tree@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.1.3.tgz#eb4870fb6fd7707327ec95c2ff2ab09b5e8db91d"
+  integrity sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==
+  dependencies:
+    mdn-data "2.0.14"
+    source-map "^0.6.1"
+
+css-what@^5.0.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/css-what/-/css-what-5.1.0.tgz#3f7b707aadf633baf62c2ceb8579b545bb40f7fe"
+  integrity sha512-arSMRWIIFY0hV8pIxZMEfmMI47Wj3R/aWpZDDxWYCPEiOMv6tfOrnpDtgxBYPEQD4V0Y/958+1TdC3iWTFcUPw==
+
+csso@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/csso/-/csso-4.2.0.tgz#ea3a561346e8dc9f546d6febedd50187cf389529"
+  integrity sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==
+  dependencies:
+    css-tree "^1.1.2"
+
 cssom@^0.4.4:
   version "0.4.4"
   resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.4.4.tgz#5a66cf93d2d0b661d80bf6a44fb65f5c2e4e0a10"
@@ -5923,7 +5964,7 @@ dompurify@2.3.3:
   resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-2.3.3.tgz#c1af3eb88be47324432964d8abc75cf4b98d634c"
   integrity sha512-dqnqRkPMAjOZE0FogZ+ceJNM2dZ3V/yNOuFB7+39qpO93hHhfRpHw3heYQC7DPK9FqbQTfBKUJhiSfz4MvXYwg==
 
-domutils@^2.8.0:
+domutils@^2.6.0, domutils@^2.8.0:
   version "2.8.0"
   resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.8.0.tgz#4437def5db6e2d1f5d6ee859bd95ca7d02048135"
   integrity sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==
@@ -9579,6 +9620,11 @@ md5-hex@^3.0.1:
   dependencies:
     blueimp-md5 "^2.10.0"
 
+mdn-data@2.0.14:
+  version "2.0.14"
+  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50"
+  integrity sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==
+
 media-typer@0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
@@ -10296,6 +10342,13 @@ npmlog@^5.0.1:
     gauge "^3.0.0"
     set-blocking "^2.0.0"
 
+nth-check@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-2.0.1.tgz#2efe162f5c3da06a28959fbd3db75dbeea9f0fc2"
+  integrity sha512-it1vE95zF6dTT9lBsYbxvqh0Soy4SPowchj0UBGj/V6cTPnXXtQOPUbhZ6CmGzAD/rW22LQK6E96pcdJXk4A4w==
+  dependencies:
+    boolbase "^1.0.0"
+
 number-is-nan@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
@@ -12132,6 +12185,11 @@ sshpk@^1.7.0:
     safer-buffer "^2.0.2"
     tweetnacl "~0.14.0"
 
+stable@^0.1.8:
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/stable/-/stable-0.1.8.tgz#836eb3c8382fe2936feaf544631017ce7d47a3cf"
+  integrity sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==
+
 stack-generator@^2.0.3:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/stack-generator/-/stack-generator-2.0.5.tgz#fb00e5b4ee97de603e0773ea78ce944d81596c36"
@@ -12410,6 +12468,19 @@ supports-hyperlinks@^2.0.0, supports-hyperlinks@^2.1.0:
     has-flag "^4.0.0"
     supports-color "^7.0.0"
 
+svgo@^2.7.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/svgo/-/svgo-2.8.0.tgz#4ff80cce6710dc2795f0c7c74101e6764cfccd24"
+  integrity sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg==
+  dependencies:
+    "@trysound/sax" "0.2.0"
+    commander "^7.2.0"
+    css-select "^4.1.3"
+    css-tree "^1.1.3"
+    csso "^4.2.0"
+    picocolors "^1.0.0"
+    stable "^0.1.8"
+
 symbol-observable@^1.1.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
@@ -13173,6 +13244,14 @@ vite-plugin-pwa@0.11.3:
     workbox-build "^6.3.0"
     workbox-window "^6.3.0"
 
+vite-svg-loader@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/vite-svg-loader/-/vite-svg-loader-3.1.0.tgz#58d4ed5785583afce10059125467f8bf803e3183"
+  integrity sha512-dcxLJPQXC3e2/HYrKjOi0fEIzP+Wcny1PhOTsYhnZcqLIhyjAHkMeZwWl9jXC3u+QpUZy4TyLgVnBPuiok3BUA==
+  dependencies:
+    "@vue/compiler-sfc" "^3.2.20"
+    svgo "^2.7.0"
+
 vite@2.6.14:
   version "2.6.14"
   resolved "https://registry.yarnpkg.com/vite/-/vite-2.6.14.tgz#35c09a15e4df823410819a2a239ab11efb186271"