fixed some styling with desktop login page need more with mobile

Author: Derek Roode

react-app/src/components/Atoms/LoginPageVideo/LoginPageVideo.module.css

@@ -1,9 +1,12 @@
 .login__background_video{
   position: absolute;
   top: 0;
-  left: 0;
-  width: 100%;
-  height: auto;
+  left: 50%;
+  /* remove the item in the left positioning */
+  transform: translateX(-50%);
+  width: auto;
+  height: 100%;
+  overflow: hidden;
   /* background-image: url("http://cdn.shopify.com/s/files/1/2510/5836/articles/Mike_Rashid_Heavyweight_Boxer_Training_1200x1200.png?v=1610545981"); */
   background-size: cover;
   background-position: center;
@@ -19,6 +22,8 @@
     background-position: center;
     background-repeat: no-repeat;
     z-index: -1;
+
+ 
   }
   .login__background_video{
     display: none;

react-app/src/components/Molecules/LoginPageDisplayBlock/LoginPageDisplayBlock.module.css

@@ -5,35 +5,56 @@
   align-items: center;
   width: 100%;
   height: 100%;
+  overflow: hidden;
+
+  
 
 }
 .login__background{
   z-index: -1;
   height: 100vh;
   width: auto;
   overflow: hidden;
+
+
 }
 
 
 
 @media screen and (max-width: 768px) {
   .login__background{
-    background-image: url("https://www.oxfordmail.co.uk/resources/images/10763753/");
-    /* background-color: red; */
+
+    /* set linear gradient on top and bottom */
+    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.151) 0%,rgba(0, 0, 0, 0.171) 10%), url("https://www.oxfordmail.co.uk/resources/images/10763753/");
+    background-blend-mode: multiply;
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     z-index: -1;
     height: 100vh;
     width: auto;
     overflow: hidden;
+
+    /* translate to transparency on top of image */
+    /* background-image: linear-gradient(
+      to right bottom,
+      rgba(0,0,0, 0.8),
+      rgba(0,0,0, 0.8)
+    ), */
+
+
+
+
+
+    
   }
 
   .login__container_login{
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
+    overflow: hidden;
 
 
   }