From dea3d31f2ceb645a5a1cd5db6dc19c4e2338cc48 Mon Sep 17 00:00:00 2001
From: Chneemann <andre-kempf@mailbox.org>
Date: Sat, 3 May 2025 10:31:15 +0200
Subject: [PATCH] refactor: outsource background images to backgrounds.scss

---
 .../forgot-password.component.html            |  2 +-
 .../forgot-password.component.scss            |  6 +-----
 .../landing-page/landing-page.component.html  |  2 +-
 .../landing-page/landing-page.component.scss  |  6 +-----
 .../auth/login/login.component.html           |  2 +-
 .../auth/login/login.component.scss           |  6 +-----
 .../auth/register/register.component.html     |  2 +-
 .../auth/register/register.component.scss     |  6 +-----
 .../verify-email/verify-email.component.html  |  2 +-
 .../verify-email/verify-email.component.scss  |  6 +-----
 frontend/src/assets/style/backgrounds.scss    | 19 +++++++++++++++++++
 11 files changed, 29 insertions(+), 30 deletions(-)
 create mode 100644 frontend/src/assets/style/backgrounds.scss

diff --git a/frontend/src/app/components/auth/forgot-password/forgot-password.component.html b/frontend/src/app/components/auth/forgot-password/forgot-password.component.html
index a7a7ace..ac55434 100644
--- a/frontend/src/app/components/auth/forgot-password/forgot-password.component.html
+++ b/frontend/src/app/components/auth/forgot-password/forgot-password.component.html
@@ -1,4 +1,4 @@
-<section>
+<section class="login-background">
   <div class="content">
     <div class="headline">Forgot your password?</div>
     @if (!queryEmail && !sendMailSuccess && !queryEmailSuccess) {
diff --git a/frontend/src/app/components/auth/forgot-password/forgot-password.component.scss b/frontend/src/app/components/auth/forgot-password/forgot-password.component.scss
index d330175..2d0ac8a 100644
--- a/frontend/src/app/components/auth/forgot-password/forgot-password.component.scss
+++ b/frontend/src/app/components/auth/forgot-password/forgot-password.component.scss
@@ -1,7 +1,3 @@
+@use "./../../../../assets/style/backgrounds.scss" as *;
 @use "./../../../../assets/style/form.scss" as *;
 @use "./../../../../assets/style/auth-layout.scss" as *;
-
-section {
-  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
-    url(./../../../../assets/img/backgrounds/login.jpeg);
-}
diff --git a/frontend/src/app/components/auth/landing-page/landing-page.component.html b/frontend/src/app/components/auth/landing-page/landing-page.component.html
index 9c165d7..8403cb3 100644
--- a/frontend/src/app/components/auth/landing-page/landing-page.component.html
+++ b/frontend/src/app/components/auth/landing-page/landing-page.component.html
@@ -1,4 +1,4 @@
-<section>
+<section class="home-background">
   <div class="headline">
     <p>Movies, TV shows, and more</p>
     <p>Watch whenever you want wherever you want</p>
diff --git a/frontend/src/app/components/auth/landing-page/landing-page.component.scss b/frontend/src/app/components/auth/landing-page/landing-page.component.scss
index d059e12..4e28842 100644
--- a/frontend/src/app/components/auth/landing-page/landing-page.component.scss
+++ b/frontend/src/app/components/auth/landing-page/landing-page.component.scss
@@ -1,12 +1,8 @@
+@use "./../../../../assets/style/backgrounds.scss" as *;
 @use "./../../../../assets/style/colors.scss" as *;
 @use "./../../../../assets/style/form.scss" as *;
 @use "./../../../../assets/style/auth-layout.scss" as *;
 
-section {
-  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
-    url(./../../../../assets/img/backgrounds/home.jpeg);
-}
-
 .headline {
   p:nth-child(1) {
     font-size: 48px;
diff --git a/frontend/src/app/components/auth/login/login.component.html b/frontend/src/app/components/auth/login/login.component.html
index 506705d..45848c7 100644
--- a/frontend/src/app/components/auth/login/login.component.html
+++ b/frontend/src/app/components/auth/login/login.component.html
@@ -1,4 +1,4 @@
-<section>
+<section class="login-background">
   <div class="content">
     <div class="headline">Log in</div>
     <form
diff --git a/frontend/src/app/components/auth/login/login.component.scss b/frontend/src/app/components/auth/login/login.component.scss
index 2b98c4b..8190545 100644
--- a/frontend/src/app/components/auth/login/login.component.scss
+++ b/frontend/src/app/components/auth/login/login.component.scss
@@ -1,13 +1,9 @@
+@use "./../../../../assets/style/backgrounds.scss" as *;
 @use "./../../../../assets/style/colors.scss" as *;
 @use "./../../../../assets/style/form.scss" as *;
 @use "./../../../../assets/style/auth-layout.scss" as *;
 @use "./../../../../assets/style/checkbox.scss" as *;
 
-section {
-  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
-    url(./../../../../assets/img/backgrounds/login.jpeg);
-}
-
 .content {
   position: relative;
 }
diff --git a/frontend/src/app/components/auth/register/register.component.html b/frontend/src/app/components/auth/register/register.component.html
index 0080e56..b077e87 100644
--- a/frontend/src/app/components/auth/register/register.component.html
+++ b/frontend/src/app/components/auth/register/register.component.html
@@ -1,4 +1,4 @@
-<section>
+<section class="register-background">
   <div class="content">
     <div class="headline">Sign Up</div>
     @if (registrationSuccess) {
diff --git a/frontend/src/app/components/auth/register/register.component.scss b/frontend/src/app/components/auth/register/register.component.scss
index 5fbca29..f261110 100644
--- a/frontend/src/app/components/auth/register/register.component.scss
+++ b/frontend/src/app/components/auth/register/register.component.scss
@@ -1,8 +1,4 @@
+@use "./../../../../assets/style/backgrounds.scss" as *;
 @use "./../../../../assets/style/form.scss" as *;
 @use "./../../../../assets/style/auth-layout.scss" as *;
 @use "./../../../../assets/style/checkbox.scss" as *;
-
-section {
-  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
-    url(./../../../../assets/img/backgrounds/register.jpeg);
-}
diff --git a/frontend/src/app/components/auth/verify-email/verify-email.component.html b/frontend/src/app/components/auth/verify-email/verify-email.component.html
index 16ecf72..e17938b 100644
--- a/frontend/src/app/components/auth/verify-email/verify-email.component.html
+++ b/frontend/src/app/components/auth/verify-email/verify-email.component.html
@@ -1,4 +1,4 @@
-<section>
+<section class="login-background">
   <div class="content">
     <div class="headline">Verify Email</div>
     <div class="note">
diff --git a/frontend/src/app/components/auth/verify-email/verify-email.component.scss b/frontend/src/app/components/auth/verify-email/verify-email.component.scss
index 1c84a76..2d0ac8a 100644
--- a/frontend/src/app/components/auth/verify-email/verify-email.component.scss
+++ b/frontend/src/app/components/auth/verify-email/verify-email.component.scss
@@ -1,7 +1,3 @@
+@use "./../../../../assets/style/backgrounds.scss" as *;
 @use "./../../../../assets/style/form.scss" as *;
 @use "./../../../../assets/style/auth-layout.scss" as *;
-
-section {
-  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
-    url(./../../../../assets/img/backgrounds/login.jpeg);
-}
diff --git a/frontend/src/assets/style/backgrounds.scss b/frontend/src/assets/style/backgrounds.scss
new file mode 100644
index 0000000..4462de4
--- /dev/null
+++ b/frontend/src/assets/style/backgrounds.scss
@@ -0,0 +1,19 @@
+@mixin background-image($path, $opacity) {
+  background-image: linear-gradient(
+      rgba(0, 0, 0, $opacity),
+      rgba(0, 0, 0, $opacity)
+    ),
+    url($path);
+}
+
+.login-background {
+  @include background-image("/assets/img/backgrounds/login.jpeg", 0.3);
+}
+
+.register-background {
+  @include background-image("/assets/img/backgrounds/register.jpeg", 0.3);
+}
+
+.home-background {
+  @include background-image("/assets/img/backgrounds/home.jpeg", 0.4);
+}