From 33158167d5692fb5e68f2b3a2f2e9bf5eec41ed9 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Mon, 20 Dec 2021 22:06:45 +0100
Subject: [PATCH] chore: make background fade in reusable

---
 src/components/home/contentAuth.vue        | 2 +-
 src/components/list/partials/list-card.vue | 7 ++++---
 src/styles/theme/background.scss           | 3 +++
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/home/contentAuth.vue b/src/components/home/contentAuth.vue
index fa8165968..65287e456 100644
--- a/src/components/home/contentAuth.vue
+++ b/src/components/home/contentAuth.vue
@@ -10,7 +10,7 @@
 		>
 			<div
 				:class="{'is-visible': background}"
-				class="app-container-background"
+				class="app-container-background background-fade-in"
 				:style="{'background-image': background && `url(${background})`}"></div>
 			<navigation/>
 			<div
diff --git a/src/components/list/partials/list-card.vue b/src/components/list/partials/list-card.vue
index 9599943ab..2a0443be6 100644
--- a/src/components/list/partials/list-card.vue
+++ b/src/components/list/partials/list-card.vue
@@ -12,9 +12,10 @@
 		class="list-card"
 		v-if="list !== null && (showArchived ? true : !list.isArchived)"
 	>
-		<div v-if="background !== null"
-			 class="list-background"
-			 :style="{'background-image': background !== null ? `url(${background})` : false}"></div>
+		<div
+			class="list-background background-fade-in"
+			:class="{'is-visible': background}"
+			:style="{'background-image': background !== null ? `url(${background})` : false}"></div>
 		<div class="list-content">
 			<div class="is-archived-container">
 			<span class="is-archived" v-if="list.isArchived">
diff --git a/src/styles/theme/background.scss b/src/styles/theme/background.scss
index cec5302ed..73f911b8b 100644
--- a/src/styles/theme/background.scss
+++ b/src/styles/theme/background.scss
@@ -43,6 +43,9 @@
   height: 100vh;
   position: fixed;
   z-index: 0;
+}
+
+.background-fade-in {
   opacity: 0;
   transition: opacity $transition;
   transition-delay: $transition-duration * 2; // To fake an appearing background