2097: New TruBudget background (#2099)

Author: pmolnar-dev

frontend/public/Gradient-Background.png

@@ -12,8 +12,19 @@ body {
   font-size: 1rem;
   line-height: 1.5;
   letter-spacing: 0.00938em;
+  background-image: url(/Gradient-Background.png);
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-attachment: fixed;
 }
 
 .noFocus {
   outline: 0;
 }
+
+html,
+body {
+  margin: 0;
+  height: 100%;
+}

frontend/public/app.css

@@ -1,5 +1,5 @@
 .forgot-password-page-container {
-  background-image: url(../../../public/welcome.jpg);
+  background-image: url(../../../public/Gradient-Background.png);
   background-size: cover;
   width: 100%;
   height: 100vh;

frontend/public/welcome.jpg

@@ -1,7 +1,7 @@
 @import "../../mixins.scss";
 
 .login-page-container {
-  background-image: url(../../../public/welcome.jpg);
+  background-image: url(../../../public/Gradient-Background.png);
   background-size: cover;
   width: 100%;
   height: 100vh;

frontend/src/pages/ForgotPassword/ForgotPassword.scss

@@ -56,7 +56,6 @@ const Main = ({ refreshToken, window }) => {
 
   return (
     <div className="main">
-      <div className="main-image" />
       <div className="main-nav">
         <NavbarContainer />
       </div>

frontend/src/pages/Login/LoginPage.scss

@@ -5,20 +5,9 @@
   flex: 1;
   flex-direction: column;
   align-items: center;
-  background-image: linear-gradient(135deg, #5a9bbe 0%, #1b618c 100%);
-  min-height: 100vh;
-}
-
-.main-image {
-  background-image: url(../../../public/navbar_back5edit.jpeg);
-  background-size: cover;
-  position: absolute;
+  position: relative;
+  z-index: 1;
   height: auto;
-  width: 100%;
-  top: 0;
-  left: 0;
-  min-height: 100%;
-  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 70%);
 }
 
 .main-nav {
@@ -27,7 +16,7 @@
 
 .main-container {
   flex: 1;
-  width: 74%;
+  width: 80%;
   margin-top: 3rem;
   margin-bottom: 3rem;
   @include tablet {