frontend/src/App.css

@@ -7,7 +7,7 @@
 
 :root {
   --primary: rgb(41, 63, 87);
-  --secondary: #fff;
+  --secondary: rgb(218,218,218);
   --third: rgb(171, 183, 183);
 }
 
@@ -28,29 +28,24 @@
   font-size: 100px;
 }
 
-.products {
-  background-image: url('images/img-9.jpg');
-  background-position: center;
-  background-size: fill;
-  background-repeat: no-repeat;
-  color: var(--primary);
-  font-size: 100px;
-}
-
 .sign-up {
-  background-image: url('images/img-9.jpg');
+  background-image: url("images/img-9.jpg");
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
-  color: #fff;
+  color: var(--primary);
   font-size: 100px;
 }
 
 .sitePage {
   height: 90vh;
   display: flex;
-  justify-content: center;
+  flex-direction: column;
+  align-content: center;
+  align-items: center;
+  background-color: var(--secondary);
 }
 .sitePage h1 {
   font-size: 80px;
+  margin: 0.7em auto;
 }

frontend/src/components/Input.css

@@ -0,0 +1,6 @@
+.input-field {
+    width: auto;
+}
+.input-field input {
+    border-color: var(--primary);
+}

frontend/src/components/InputField.js

@@ -1,8 +1,9 @@
 import React from "react";
+import "./Input.css";
 
 function InputField(props) {
   return (
-    <label>
+    <label className="input-field">
       <p>{props.LabelName}</p>
       <input name={props.InputName} type={props.InputType} />
     </label>

frontend/src/components/Navbar.css

@@ -146,7 +146,7 @@
     background-color: transparent;
     color: var(--primary);
     padding: 14px 20px;
-    border: 1px solid #fff;
+    border: 1px solid var(--primary);
     transition: all 0.3s ease-out;
   }
 

frontend/src/components/pages/Login.js

@@ -20,6 +20,7 @@ export default function Login() {
             InputType="password"
             InputName="password"
           />
+          <br />
           <SubmitField LabelName="Einloggen" />
         </form>
       </div>