Added various css things

- Designed login and register buttons
- removed some unnecessary css things
- changed some small things in the design

frontend/src/components/Button.js

@@ -2,7 +2,6 @@ import React from "react";
 import "./Button.css";
 import { Link } from "react-router-dom";
 
-const newTo = (props) => "#";
 
 const STYLES = ["btn--primary", "btn--outline"];
 

frontend/src/components/Input.css

@@ -1,11 +1,27 @@
 .input-field {
-    width: auto;
+  width: auto;
 }
 
-.input-field p{
-    font-size: 36px;
+.input-field p {
+  font-size: 1.5em;
 }
+
 .input-field input {
-    width: 100%;
-    border-color: var(--primary);
+  width: 100%;
+  border-color: var(--primary);
+  background-color: var(--secondary);
+  padding: 0.25em 0.5em;
+  border: 3px solid var(--primary);
+  border-radius: 10.5em;
+}
+
+.input-field input[type="submit"] {
+  margin-top: 1em;
+  border-radius: 10.5em;
+  background-color: var(--primary);
+  color: var(--secondary);
+}
+
+.input-field input[type="submit"]:hover {
+    background-color: var(--primary-contr);
 }

frontend/src/components/InputField.js

@@ -5,7 +5,7 @@ function InputField(props) {
   return (
     <label className="input-field">
       <p>{props.LabelName}</p>
-      <input name={props.InputName} onChange={props.onChange} type={props.InputType} />
+      <input name={props.InputName} onChange={props.onChange} type={props.InputType} placeholder={props.InputPlaceHolder}/>
     </label>
   );
 }

frontend/src/components/Navbar.css

@@ -29,11 +29,6 @@
   align-items: center;
 }
 
-.fa-typo3 {
-  margin-left: 0.5rem;
-  font-size: 1.8rem;
-}
-
 .nav-menu {
   display: grid;
   grid-template-columns: repeat(4, auto);
@@ -59,14 +54,10 @@
 }
 
 .nav-links:hover {
-  border-bottom: 4px solid var(--secondary);
+  border-bottom: 4px dotted var(--secondary);
   transition: all 0.2s ease-out;
 }
 
-.fa-bars {
-  color: var(--secondary);
-}
-
 .nav-links-mobile {
   display: none;
 }
@@ -109,7 +100,7 @@
 
   .nav-links:hover {
     background-color: var(--secondary);
-    color: #000;
+    color: var(--primary);
     border-radius: 0;
   }
 

frontend/src/components/SubmitField.js

@@ -5,7 +5,7 @@ import "./Button.css"
 function SubmitField(props) {
   const InputValue = props.LabelName;
   return (
-    <label className="input-field" className="btn btn--primary btn--medium">
+    <label className="input-field">
       <input type="submit" onClick={props.onClick} value={InputValue} />
     </label>
   );

frontend/src/components/pages/Login.js

@@ -1,10 +1,10 @@
 import React from "react";
-import { useState, useEffect } from "react/cjs/react.development";
+import { useState } from "react/cjs/react.development";
 import "../../App.css";
 import Footer from "../../Footer";
 import InputField from "../InputField";
 import SubmitField from "../SubmitField";
-import { login, authFetch, useAuth, logout } from "../../auth/AuthProvider";
+import { login, useAuth, logout } from "../../auth/AuthProvider";
 import Secret from "./Secret";
 
 export default function Login() {
@@ -49,24 +49,26 @@ export default function Login() {
         {!logged ? (
           <form action="#">
             <InputField
-              LabelName="Benutzername / Kennung"
+              LabelName="Benutzername"
               onChange={handleUsernameChange}
               InputType="text"
               InputName="username"
+              InputPlaceHolder="Benutzername"
             />
             <InputField
               LabelName="Passwort"
               InputType="password"
               onChange={handlePasswordChange}
               InputName="password"
+              InputPlaceHolder="Passwort"
             />
             <br />
             <SubmitField onClick={onSubmitClick} LabelName="Einloggen" />
           </form>
         ) : (
           <>
-          <Secret/>
-          <button onClick={() => logout()}>Logout</button>
+            <Secret />
+            <button onClick={() => logout()}>Logout</button>
           </>
         )}
       </div>

frontend/src/components/pages/Manual.js

@@ -1,15 +1,13 @@
-import React, {useState, useEffect} from "react";
+import React from "react";
 import "../../App.css";
 import Footer from "../../Footer";
 
 export default function Manual() {
-  const [currentTime, setCurrentTime] = useState(0);
-
   return (
     <>
-    <div className="sitePage">
-      <h1> Anleitung / Bedienungshinweise</h1>
-    </div>
+      <div className="sitePage">
+        <h1> Anleitung / Bedienungshinweise</h1>
+      </div>
       <Footer />
     </>
   );

frontend/src/components/pages/Register.js

@@ -36,7 +36,7 @@ export default function Login() {
         <h1>Registrierung</h1>
         <form>
           <InputField
-            LabelName="Benutzername / Kennung"
+            LabelName="Benutzername"
             InputType="text"
             onChange={handleUsernameChange}
             InputName="username"