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

fix display bugs

Browse source
This commit is contained in:
luisa.bellitto 2025-06-14 14:31:43 +02:00 • committed by Luisa Bellitto
parent ba6ad011a1
commit c94a0e9a62
2 changed files with 88 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

94
code/frontend/src/LoginAndSignUpPage.tsx
View file

@ -1,38 +1,80 @@
import "./loginAndSignUpPage.css"; import "./loginAndSignUpPage.css";
import { useState } from 'react'; import { useState } from "react";
function LoginAndSignUpPage() {
function LoginAndSignUpPage(){ const toggleLogin = (event: React.MouseEvent<HTMLElement>) => {
const toggleLogin=(event:React.MouseEvent<HTMLElement>)=>{event.preventDefault(); setSignup(!signup)}; event.preventDefault();
const [signup, setSignup]= useState(false); setSignup(!signup);
return( };
<div className='login-display'> const [signup, setSignup] = useState(false);
return (
<div className="login-display">
<div className="login-login"> <div className="login-login">
<div className='login-part'> <div className="login-part">
<div className={signup? 'signup-image': 'login-image'}></div> <div className={signup ? "signup-image" : "login-image"}></div>
</div> </div>
<div className='login-part' > <div className="login-part">
<div className='login-text small-title'> <div className="login-text small-title">
{signup? "Sign Up": "Login"} {signup ? "Sign Up" : "Login"}
</div> </div>
<div className='login-div-input'>
<img className= 'login-icon' src='/assets/icons/email_orange.svg' alt="icon username"></img>
<input type='text' className='login-input' placeholder='Username'></input>
</div>
{signup? <div className='login-div-input'>
<img className= 'login-icon' src='\assets\icons\username_orange.svg' alt="icon email"></img>
<input type='email' className='login-input' placeholder='Email'></input>
</div> : ""}
<div className='login-div-input'> <div className="input-fields">
<img className= 'login-icon' src='\assets\icons\password_orange.svg' alt="icon password"></img> <div className="login-div-input">
<input type='password' className='login-input'placeholder='Password'></input> <img
className="login-icon"
src="/assets/icons/email_orange.svg"
alt="icon username"
></img>
<input
type="text"
className="login-input"
placeholder="Username"
></input>
</div>
{signup ? (
<div className="login-div-input">
<img
className="login-icon"
src="\assets\icons\username_orange.svg"
alt="icon email"
></img>
<input
type="email"
className="login-input"
placeholder="Email"
></input>
</div>
) : (
""
)}
<div className="login-div-input">
<img
className="login-icon"
src="\assets\icons\password_orange.svg"
alt="icon password"
></img>
<input
type="password"
className="login-input"
placeholder="Password"
></input>
</div>
</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 ? "to login." : "to sign up."}
</div> </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> </div>
</div> </div>
); );
} }
export default LoginAndSignUpPage export default LoginAndSignUpPage;

14
code/frontend/src/loginAndSignUpPage.css
View file

@ -11,7 +11,7 @@
.login-text{ .login-text{
display: flex; display: flex;
padding: 8px 40px 40px 40px; padding: 40px;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -99,7 +99,7 @@
display: flex; display: flex;
padding: 8px 40px 40px 40px; padding: 8px 40px 40px 40px;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: space-between;
align-items: center; align-items: center;
gap: 24px; gap: 24px;
} }
@ -162,8 +162,16 @@
padding:3%; padding:3%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: space-between;
align-items: center; align-items: center;
gap: 24px; gap: 24px;
} }
.input-fields {
display: flex;
width: 100%;
flex-direction: column;
justify-content: center;
gap: 16px;
}
} }