mirrors/VogelSocialMedia
1
0
Fork 0
mirror of https://github.com/bubblecup-12/VogelSocialMedia.git synced 2025-07-06 15:18:48 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Changed Images, gap between inputs bigger, and input bordercolor based on states

Browse source
This commit is contained in:
Ilay Eble 2025-06-11 15:10:31 +02:00 • committed by Luisa Bellitto
parent 3ba2e81737
commit af935127b3
3 changed files with 25 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

6
code/frontend/src/App.tsx
View file

@ -1,11 +1,9 @@
import React, { use } from 'react';
import Login from './Login';
import Header from './header';
import LoginSignUpPage from './LoginAndSignUpPage';
function App() {
return (
<Login/>
<LoginSignUpPage/>
);
}

8
code/frontend/src/Login.tsx → code/frontend/src/LoginAndSignUpPage.tsx
View file

@ -1,11 +1,11 @@
//import React, { use } from 'react';
import "./Login.css";
import "./loginAndSignUpPage.css";
import { useState } from 'react'; //, useEffect
import Header from './header';
//import { url } from 'inspector';
function Login(){
function LoginAndSignUpPage(){
const toggleLogin=(event:React.MouseEvent<HTMLElement>)=>{event.preventDefault(); setSignup(!signup)};
const [signup, setSignup]= useState(false);
return(
@ -32,11 +32,11 @@ function Login(){
<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? "Signup": "Login"}></input>
<input type='button' className='login-button' value={signup? "Sign up": "Login"}></input>
<div className='login-signup'>{signup? "Already have an account?": "Don't have an account yet?"} Click <input type="button" className='login-link' onClick={toggleLogin} value={'here'}></input> {signup? "login": "to sign up"}</div>
</div>
</div>
</div>
);
}
export default Login
export default LoginAndSignUpPage

28
code/frontend/src/Login.css → code/frontend/src/loginAndSignUpPage.css
View file

@ -1,11 +1,12 @@
:root {
--Rotkehlchen-gray: #e7ecf2;
--Rotkehlchen-brown1: #a28d7a;
--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{
@ -75,19 +76,28 @@
display: flex;
flex-direction: row;
border-radius: 4px;
border: 2px solid var(--Rotkehlchen-brown-middle);
border: 3px solid var(--Rotkehlchen-brown-dark);
background: #FFF;
width:100%;
height: 32px;
height: 44px;
align-items: center;
justify-content: flex-start;
}
.login-div-input:hover{
border: 3px solid var(--Rotkehlchen-brown-middle);
}
.login-div-input:focus-within{
border: 3px solid var(--Rotkehlchen-orange-default)
}
.login-input{
width: 100%;
height: 28px;
height: 40px;
border: none;
color: var(--Rotkehlchen-brown-middle);
outline: 0 !important;
/* M3/body/large */
font-family: var(--Static-Body-Large-Font, Roboto);
@ -130,7 +140,7 @@
flex-direction: column;
justify-content: center;
align-items: center;
gap: 18px;
gap: 24px;
}
/* Desktop view*/
@ -160,7 +170,7 @@
border-radius: 8px;
border: 5px solid var(--Rotkehlchen-gray-default);
background-image: url("../public/assets/images/BirdLogin.jpg");
background-image: url("../public/assets/images/IceBirdLogin.jpg");
background-size: cover;
background-position: 75%;
}
@ -176,9 +186,9 @@
border-radius: 8px;
border: 5px solid var(--Rotkehlchen-gray-default);
background-image: url("../public/assets/images/OwlSignUp.png");
background-image: url("../public/assets/images/SummerOwlSignup.jpg");
background-size: cover;
background-position: 75%;
/*background-position: 75%;*/
}
.login-part{
@ -189,7 +199,7 @@
flex-direction: column;
justify-content: center;
align-items: center;
gap: 1%;
gap: 24px;
}