Added various css things

- Designed login and register buttons
- removed some unnecessary css things
- changed some small things in the design
This commit is contained in:
cami 2021-06-23 03:16:09 +02:00
parent f6de850772
commit 04cdc9dd7e
11 changed files with 48 additions and 46 deletions

View file

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

View file

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

View file

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

View file

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

View file

@ -2,10 +2,26 @@
width: auto; width: auto;
} }
.input-field p{ .input-field p {
font-size: 36px; font-size: 1.5em;
} }
.input-field input { .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);
} }

View file

@ -5,7 +5,7 @@ function InputField(props) {
return ( return (
<label className="input-field"> <label className="input-field">
<p>{props.LabelName}</p> <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> </label>
); );
} }

View file

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

View file

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

View file

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

View file

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

View file

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