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

Fixed link Login/Signup, cursor on button

Browse source
This commit is contained in:
Ilay Eble 2025-06-11 16:05:07 +02:00 • committed by Luisa Bellitto
parent af935127b3
commit 2d1a4b590b
3 changed files with 23 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,9 +1,16 @@
import LoginSignUpPage from './LoginAndSignUpPage'; 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';
import LoginAndSignUpPage from './LoginAndSignUpPage';
function App() { function App() {
return ( return (
<LoginSignUpPage/> <div className="App">
<LoginAndSignUpPage></LoginAndSignUpPage>
</div>
); );
} }

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

@ -10,7 +10,7 @@ function LoginAndSignUpPage(){
const [signup, setSignup]= useState(false); const [signup, setSignup]= useState(false);
return( return(
<div className='login-display'> <div className='login-display'>
<Header></Header> <Header/>
<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>
@ -33,7 +33,7 @@ function LoginAndSignUpPage(){
<input type='password' className='login-input'placeholder='Password'></input> <input type='password' className='login-input'placeholder='Password'></input>
</div> </div>
<input type='button' className='login-button' value={signup? "Sign up": "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 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>
</div> </div>
</div> </div>
</div> </div>

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

@ -18,8 +18,7 @@
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, 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);
align-items: center; align-items: center;
justify-content: center; justify-content: center;
min-width: 300px;
min-height: 400px;
} }
.login-text{ .login-text{
@ -55,6 +54,7 @@
gap: 10px; gap: 10px;
width: 150px; width: 150px;
height: 32px; height: 32px;
cursor: pointer;
border-radius: 10px; border-radius: 10px;
border: 2px solid var(--Rotkehlchen-orange-default); border: 2px solid var(--Rotkehlchen-orange-default);
@ -107,11 +107,12 @@
line-height: var(--Static-Body-Large-Line-Height, 24px); /* 150% */ line-height: var(--Static-Body-Large-Line-Height, 24px); /* 150% */
letter-spacing: var(--Static-Body-Large-Tracking, 0.5px); letter-spacing: var(--Static-Body-Large-Tracking, 0.5px);
} }
.login-link{ .login-here{
color: var(--Rotkehlchen-orange-default, #E79A0E); color: var(--Rotkehlchen-orange-default, #E79A0E);
background-color: transparent; background-color: transparent;
border: none; border: none;
text-decoration: underline; text-decoration: underline;
cursor: pointer;
/* Body-M */ /* Body-M */
font-family: Inter; font-family: Inter;
font-size: 16px; font-size: 16px;
@ -124,6 +125,7 @@
.login-signup{ .login-signup{
color: #FFF; color: #FFF;
text-align: center; text-align: center;
cursor: pointer;
/* Body-M */ /* Body-M */
font-family: Inter; font-family: Inter;
@ -145,6 +147,10 @@
/* Desktop view*/ /* Desktop view*/
@media only screen and (min-width: 768px) { @media only screen and (min-width: 768px) {
.login-display{
min-width: 850px;
min-height: 800px;
}
.login-login{ .login-login{
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -155,8 +161,8 @@
justify-content: start; justify-content: start;
width: 50vw; width: 50vw;
height: 60vh; height: 60vh;
min-height: 300px; min-height: 400px;
min-width: 400px; min-width: 500px;
} }
.login-image{ .login-image{