adjusting login layout

net/web/src/App.styled.js

@@ -5,5 +5,4 @@ export const AppWrapper = styled.div`
   position: absolute;
   width: 100vw;
   height: 100vh;
-  padding: 8px;
 `;

net/web/src/login/Login.jsx

@@ -4,6 +4,8 @@ import { AppContext } from 'context/AppContext';
 import { ViewportContext } from 'context/ViewportContext';
 import { LoginWrapper } from './Login.styled';
 
+import login from 'images/login.png'
+
 export function Login() {
 
   const navigate = useNavigate();
@@ -21,10 +23,17 @@ export function Login() {
   return (
     <LoginWrapper>
       { (viewport.state.display === 'large' || viewport.state.display === 'xlarge') && (
-        <div class="split-layout"></div>
+        <div class="split-layout">
+          <div class="left">
+            <img class="splash" src={login} alt={login} />
+          </div>
+          <div class="right">RIGHT</div>
+        </div>
       )}
       { (viewport.state.display === 'medium' || viewport.state.display === 'small') && (
-        <div class="full-layout"></div>
+        <div class="full-layout">
+          <div class="center"></div>
+        </div>
       )}
     </LoginWrapper>
   );

net/web/src/login/Login.styled.js

@@ -7,16 +7,37 @@ export const LoginWrapper = styled.div`
   .full-layout {
     width: 100%;
     height: 100%;
-    border-radius: 4px;
-    background: ${Colors.formBackground};
-  }
+    padding: 8px;
     
-  .split-layout {
-    position: relative;
-    left: 50%;
-    width: 50%;
+    .center {
+      width: 100%;
       height: 100%;
       border-radius: 4px;
       background: ${Colors.formBackground};
     }
+  }
+
+  .split-layout {
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+
+    .left {
+      width: 50%;
+      height: 100%;
+      padding: 32px;
+
+      .splash {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+      }
+    }
+
+    .right {
+      width: 50%;
+      height: 100%;
+      background: ${Colors.formBackground};
+    }
+  }
 `;