diff --git a/code/frontend/public/assets/icons/github.svg b/code/frontend/public/assets/icons/github.svg new file mode 100644 index 0000000..8903d0e --- /dev/null +++ b/code/frontend/public/assets/icons/github.svg @@ -0,0 +1,3 @@ + + + diff --git a/code/frontend/src/App.tsx b/code/frontend/src/App.tsx index c1d99f1..be310ae 100644 --- a/code/frontend/src/App.tsx +++ b/code/frontend/src/App.tsx @@ -2,45 +2,15 @@ import React, { use } from 'react'; import logo from './logo.svg'; import './App.css'; import { useState, useEffect } from 'react'; +import Footer from './Footer'; +import Header from './header'; function App() { - const [username, setUsername] = useState(''); - const [password, setPassword] = useState(''); - const [mail, setMail] = useState(''); - const [isCreate, setIsCreate] = useState(false); - -useEffect(() => { - console.log(username); -}, [username]); - - - const changeUsername = (event : React.ChangeEvent) => { - if (event.target.value.length > 20) { - alert("Username is too long"); - } - setUsername(event.target.value); - } - const changePassword = (event : React.ChangeEvent) => { - setPassword(event.target.value); - } - const changeMail = (event : React.ChangeEvent) => { - setMail(event.target.value); - } - + return (
- {isCreate?

Create Account

:

Login

} - {isCreate && <> - - -
} - - -
- - -
- setIsCreate(!isCreate)} value={isCreate? "Create" : "login"}/> +
+
); } diff --git a/code/frontend/src/Footer.css b/code/frontend/src/Footer.css new file mode 100644 index 0000000..fb11afb --- /dev/null +++ b/code/frontend/src/Footer.css @@ -0,0 +1,80 @@ +:root { + --Rotkehlchen-gray: #e7ecf2; + --Rotkehlchen-brown1: #a28d7a; + --Rotkehlchen-orange-default: #e79a0e; +} + + + +.footer { + display: flex; + justify-content: space-between; + align-items: center; + background-color: var(--Rotkehlchen-gray); + padding: 1rem 2rem; +} + +.footer-left { + display: flex; + flex-direction: column; + gap: 1rem; + +} + +.footer-link { + display: flex; + align-items: center; + gap: 0.5rem; + color: #000; + font-weight: 500; + text-decoration: none; +} +.footer-link.github img { + width: 20px; + height: 20px; + transform: scale(1.9); +} +.footer-link.feather img { + width: 20px; + height: 20px; + transform: scale(1.5); +} + + +.footer-link img { + width: 20px; + height: 20px; + object-fit:unset; + vertical-align: middle; +} + + + + + +.footer-link.feather span { + color: var(--Rotkehlchen-orange-default); + font-weight: bold; + +} + +.footer-right { + display: flex; + gap: 4rem; +} + +.footer-column { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.footer-column a { + color: black; + text-decoration: none; + font-weight: 500; +} + +.footer-column a:hover { + text-decoration: underline; +} diff --git a/code/frontend/src/Footer.tsx b/code/frontend/src/Footer.tsx new file mode 100644 index 0000000..bcacb80 --- /dev/null +++ b/code/frontend/src/Footer.tsx @@ -0,0 +1,36 @@ +import React from "react"; +import "./Footer.css"; + +function Footer() { + return ( + + ); +} + +export default Footer;