Merge pull request 'Frontend/Css Things' (#46) from frontend/css-things into main

frontend/src/App.css

@@ -7,8 +7,10 @@
 
 :root {
   --primary: rgb(41, 63, 87);
+  --primary-contr: rgb(9, 11, 46);
   --secondary: rgb(218,218,218);
   --third: rgb(171, 183, 183);
+  --forth: rgb(255,255,255);
 }
 
 .home,
@@ -37,7 +39,7 @@
   color: var(--primary);
 }
 
-.sitePage h1 {
+h1 {
   font-size: 5em;
   margin: 0.7em auto;
 }
@@ -48,7 +50,7 @@
 }
 
 .sitePage p {
-  font-size: 2em;
+  font-size: 1.5em;
   max-width: 60%;
   margin-bottom: 4vh;
 }

frontend/src/Footer.css

@@ -1,5 +1,5 @@
 .footer-container {
-  background-color: rgb(41, 63, 87);
+  background-color: var(--primary);
   padding: 4rem 0 2rem 0;
   display: flex;
   flex-direction: column;
@@ -15,7 +15,7 @@
   text-align: center;
   margin-bottom: 24px;
   padding: 24px;
-  color: #fff;
+  color: var(--secondary);
 }
 
 .footer-subscription > p {
@@ -41,7 +41,7 @@
   border: none;
   font-size: 18px;
   margin-bottom: 16px;
-  border: 1px solid #fff;
+  border: 1px solid var(--secondary);
 }
 
 .footer-links {
@@ -70,11 +70,11 @@
 }
 
 .footer-link-items > h2 {
-  color: #fff;
+  color: var(--secondary);
 }
 
 .footer-link-items a {
-  color: #fff;
+  color: var(--secondary);
   text-decoration: none;
   margin-bottom: 8px;
 }
@@ -94,7 +94,7 @@
 
 /* Social Icons */
 .social-icon-link {
-  color: #fff;
+  color: var(--forth);
   font-size: 24px;
 }
 
@@ -120,7 +120,7 @@
 }
 
 .social-logo {
-  color: #fff;
+  color: var(--forth);
   justify-self: start;
   margin-left: 20px;
   cursor: pointer;
@@ -131,11 +131,6 @@
   margin-bottom: 16px;
 }
 
-.website-rights {
-  color: #fff;
-  margin-bottom: 16px;
-}
-
 @media screen and (max-width: 820px) {
   .footer-links {
     padding-top: 2rem;

frontend/src/auth/PrivateRoute.js

@@ -1,4 +1,3 @@
-import { Component } from "react";
 import { Redirect, Route } from "react-router-dom";
 import { useAuth } from "./AuthProvider";
 

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{
+.input-field p {
-    font-size: 36px;
+  font-size: 1.5em;
 }
+
 .input-field input {
-    width: 100%;
+  width: 100%;
-    border-color: var(--primary);
+  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/>
+            <Secret />
-          <button onClick={() => logout()}>Logout</button>
+            <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">
+      <div className="sitePage">
-      <h1> Anleitung / Bedienungshinweise</h1>
+        <h1> Anleitung / Bedienungshinweise</h1>
-    </div>
+      </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"