apply fonts and fix UI bugs

code/frontend/src/App.tsx

@@ -1,15 +1,16 @@
-import React, { use } from 'react';
-import logo from './logo.svg';
-import './App.css';
-import './colors.css';
-import './fonts.css';
-import { useState, useEffect } from 'react';
-import LoginAndSignUpPage from './LoginAndSignUpPage';
+import "./App.css";
+import "./colors.css";
+import "./fonts.css";
+import LoginAndSignUpPage from "./LoginAndSignUpPage";
+import Footer from "./Footer";
+import Header from "./header";
 
 function App() {
   return (
     <div className="App">
-      <LoginAndSignUpPage/>
+      <Header />
+      <LoginAndSignUpPage />
+      <Footer />
     </div>
   );
 }

code/frontend/src/Footer.css

@@ -3,13 +3,14 @@
 .footer {
   display: flex;
   flex-direction: row;
-  align-items:flex-start;
+  align-items: flex-start;
   justify-content: space-between;
   background-color: var(--Rotkehlchen-gray);
   padding: 1rem;
   gap: 2rem;
   text-align: center;
   text-decoration: none;
+
 }
 
 .footer-left {

code/frontend/src/Footer.tsx

@@ -1,33 +1,43 @@
-import React from "react";
 import "./footer.css";
 
 function Footer() {
-
-    
-
   return (
     <footer className="footer">
       <div className="footer-left">
         <a href="" className="footer-link feather">
           <img src="/assets/icons/feather_black.svg" alt="Feather icon" />
-          <span>Feather Feed</span>
+          <span className="small-title">Feather Feed</span>
         </a>
-        <a href="https://github.com/bubblecup-12/VogelSocialMedia" target="_blank " className="footer-link github">
+        <a
+          href="https://github.com/bubblecup-12/VogelSocialMedia"
+          target="_blank "
+          className="footer-link github"
+        >
           <img src="/assets/icons/github-mark.svg" alt="GitHub mark" />
-          
+
           <img src="/assets/icons/GitHub_Logo.png" alt="GitHub logo" />
         </a>
       </div>
 
       <div className="footer-right">
-    
-          <a className="footer-link" href="#">Home</a>
-          <a className="footer-link" href="#">About</a>
-          <a className="footer-link" href="#">Login</a>
-          <a className="footer-link" href="#">Sign up</a>
-          <a className="footer-link" href="#">Create Post</a>
-          <a className="footer-link" href="#">Feed</a>
-       
+        <a className="footer-link" href="#">
+          Home
+        </a>
+        <a className="footer-link" href="#">
+          About
+        </a>
+        <a className="footer-link" href="#">
+          Login
+        </a>
+        <a className="footer-link" href="#">
+          Sign up
+        </a>
+        <a className="footer-link" href="#">
+          Create Post
+        </a>
+        <a className="footer-link" href="#">
+          Feed
+        </a>
       </div>
     </footer>
   );

code/frontend/src/LoginAndSignUpPage.tsx

@@ -1,6 +1,7 @@
 import "./loginAndSignUpPage.css";
 import { useState } from 'react';
 import Header from './header';
+import Footer from "./Footer";
 
 
 function LoginAndSignUpPage(){
@@ -8,13 +9,12 @@ function LoginAndSignUpPage(){
     const [signup, setSignup]= useState(false);
     return(
         <div className='login-display'>
-            <Header/>
             <div className="login-login">
                 <div className='login-part'>
                     <div className={signup? 'signup-image': 'login-image'}></div>
                 </div>
                 <div className='login-part' >
-                    <div className='login-text'>
+                    <div className='login-text small-title'>
                         {signup? "Sign Up": "Login"}
                     </div>
                     <div className='login-div-input'>
@@ -30,8 +30,8 @@ function LoginAndSignUpPage(){
                         <img className= 'login-icon' src='\assets\icons\password_orange.svg' alt="icon password"></img>
                         <input type='password' className='login-input'placeholder='Password'></input>
                     </div>
-                        <input type='button' className='login-button' value={signup? "Sign up": "Login"}></input>
-                        <div className='login-signup' onClick={toggleLogin}>{signup? "Already have an account?": "Don't have an account yet?"} Click <span className='login-here'>here</span> {signup? "login": "to sign up"}</div>
+                        <input type='button' className='login-button body-m' value={signup? "Sign up": "Login"}></input>
+                        <div className='login-signup body-m' onClick={toggleLogin}>{signup? "Already have an account?": "Don't have an account yet?"} Click <span className='login-here body-m'>here</span> {signup? "login.": "to sign up."}</div>
                 </div>
             </div>
         </div>

code/frontend/src/header.css

@@ -11,7 +11,7 @@
   top: 0;
   left: 0;
 }
-.base-header-title {
+.header-title {
   display: flex;
   width: 162px;
   height: 63px;

code/frontend/src/header.tsx

@@ -6,7 +6,7 @@ function Header() {
   return (
       <header className="base-header">
         <div className="base-header-icon"> <img src='/assets/icons/feather_black.svg' alt="featherIcon" /> </div>
-        <p className="base-header-title">
+        <p className="header-title small-title">
           Feather Feed
         </p>
         <div className="base-header-icon"> <img src="/assets/icons/three_menu_stripes_black.svg" alt="menuIcon" /> </div>

code/frontend/src/loginAndSignUpPage.css

@@ -1,21 +1,9 @@
-:root {
-  --Rotkehlchen-gray: #e7ecf2;
-  --Rotkehlchen-brown-light: #a28d7a;
-  --Rotkehlchen-orange-default: #e79a0e;
-  --Rotkehlchen-gray-default: #E7ECF2;
-  --Rotkehlchen-brown-middle: #7F6D6D;
-  --Rotkehlchen-yellow-default: #FED640;
-  --Rotkehlchen-yellow-hover: #EAC22A;
-  --Rotkehlchen-brown-dark: #4C4141;
-}
-
 .login-display{
     display: flex;
     flex-direction: column;
     height: 100vh; /* Full viewport height */
     width: 100vw; /* Full viewport width */
-    position: absolute; 
-    background: var(--gradient-blue-backround-mobile, linear-gradient(270deg, rgba(20, 15, 86, 0.27) 0%, rgba(20, 15, 86, 0.58) 24%, rgba(20, 15, 86, 0.74) 43%, rgba(17, 13, 71, 0.82) 56%, rgba(13, 10, 56, 0.90) 68%), url('../public/assets/images/BirdsSky.jpg') lightgray 50% / cover no-repeat);
+    background: var(--gradient-blue-backround-mobile);
     align-items: center;
     justify-content: center;
     
@@ -28,15 +16,8 @@
     justify-content: center;
     align-items: center;
     gap: 18px;
-    color: var(--Rotkehlchen-gray-default);
+    color: var(--Rotkehlchen-gray);
     text-align: center;
-
-    /* Body-L */
-    font-family: Inter;
-    font-size: 24px;
-    font-style: normal;
-    font-weight: 700;
-    line-height: 40px; /* 166.667% */
 }
 
 .login-icon{
@@ -99,41 +80,19 @@
     color: var(--Rotkehlchen-brown-middle);
     outline: 0 !important;
 
-    /* M3/body/large */
-    font-family: var(--Static-Body-Large-Font, Roboto);
-    font-size: var(--Static-Body-Large-Size, 16px);
-    font-style: normal;
-    font-weight: 400;
-    line-height: var(--Static-Body-Large-Line-Height, 24px); /* 150% */
-    letter-spacing: var(--Static-Body-Large-Tracking, 0.5px);
 }
 .login-here{
-    color: var(--Rotkehlchen-orange-default, #E79A0E);
+    color: var(--Rotkehlchen-orange-default);
     background-color: transparent;
     border: none;
     text-decoration: underline;
     cursor: pointer;
-    /* Body-M */
-    font-family: Inter;
-    font-size: 16px;
-    font-style: normal;
-    font-weight: 600;
-    line-height: 17px;
-    letter-spacing: 0.8px;
 }
 
 .login-signup{
     color: #FFF;
     text-align: center;
     cursor: pointer;
-
-    /* Body-M */
-    font-family: Inter;
-    font-size: 1rem;
-    font-style: normal;
-    font-weight: 600;
-    line-height: 17px; /* 106.25% */
-    letter-spacing: 0.8px;
 }
 
 .login-part{
@@ -175,7 +134,7 @@
         align-items: center;
 
         border-radius: 8px;
-        border: 5px solid var(--Rotkehlchen-gray-default);
+        border: 5px solid var(--Rotkehlchen-gray);
         background-image: url("../public/assets/images/IceBirdLogin.jpg");
         background-size: cover;
         background-position: 75%;
@@ -191,7 +150,7 @@
         align-items: center;
 
         border-radius: 8px;
-        border: 5px solid var(--Rotkehlchen-gray-default);
+        border: 5px solid var(--Rotkehlchen-gray);
         background-image: url("../public/assets/images/SummerOwlSignup.jpg");
         background-size: cover;
         /*background-position: 75%;*/
@@ -206,9 +165,5 @@
         justify-content: center;
         align-items: center;
         gap: 24px;
-    }
-
-    
-
-    
+    }    
 }