refactor: outsource background images to backgrounds.scss

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) {

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);
-}

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>

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;

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

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;
 }

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) {

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);
-}

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

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);
-}

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);
+}