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 LoginSignUpPage from './LoginAndSignUpPage';
import Login from './Login';
import Header from './header';
function App() { function App() {
return ( 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 React, { use } from 'react';
import "./Login.css"; import "./loginAndSignUpPage.css";
import { useState } from 'react'; //, useEffect import { useState } from 'react'; //, useEffect
import Header from './header'; import Header from './header';
//import { url } from 'inspector'; //import { url } from 'inspector';
function Login(){ function LoginAndSignUpPage(){
const toggleLogin=(event:React.MouseEvent<HTMLElement>)=>{event.preventDefault(); setSignup(!signup)}; const toggleLogin=(event:React.MouseEvent<HTMLElement>)=>{event.preventDefault(); setSignup(!signup)};
const [signup, setSignup]= useState(false); const [signup, setSignup]= useState(false);
return( return(
@ -32,11 +32,11 @@ function Login(){
<img className= 'login-icon' src='\assets\icons\password_orange.svg' alt="icon password"></img> <img className= 'login-icon' src='\assets\icons\password_orange.svg' alt="icon password"></img>
<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? "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 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> </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 { :root {
--Rotkehlchen-gray: #e7ecf2; --Rotkehlchen-gray: #e7ecf2;
--Rotkehlchen-brown1: #a28d7a; --Rotkehlchen-brown-light: #a28d7a;
--Rotkehlchen-orange-default: #e79a0e; --Rotkehlchen-orange-default: #e79a0e;
--Rotkehlchen-gray-default: #E7ECF2; --Rotkehlchen-gray-default: #E7ECF2;
--Rotkehlchen-brown-middle: #7F6D6D; --Rotkehlchen-brown-middle: #7F6D6D;
--Rotkehlchen-yellow-default: #FED640; --Rotkehlchen-yellow-default: #FED640;
--Rotkehlchen-yellow-hover: #EAC22A; --Rotkehlchen-yellow-hover: #EAC22A;
--Rotkehlchen-brown-dark: #4C4141;
} }
.login-display{ .login-display{
@ -75,19 +76,28 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
border-radius: 4px; border-radius: 4px;
border: 2px solid var(--Rotkehlchen-brown-middle); border: 3px solid var(--Rotkehlchen-brown-dark);
background: #FFF; background: #FFF;
width:100%; width:100%;
height: 32px; height: 44px;
align-items: center; align-items: center;
justify-content: flex-start; 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{ .login-input{
width: 100%; width: 100%;
height: 28px; height: 40px;
border: none; border: none;
color: var(--Rotkehlchen-brown-middle); color: var(--Rotkehlchen-brown-middle);
outline: 0 !important;
/* M3/body/large */ /* M3/body/large */
font-family: var(--Static-Body-Large-Font, Roboto); font-family: var(--Static-Body-Large-Font, Roboto);
@ -130,7 +140,7 @@
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
gap: 18px; gap: 24px;
} }
/* Desktop view*/ /* Desktop view*/
@ -160,7 +170,7 @@
border-radius: 8px; border-radius: 8px;
border: 5px solid var(--Rotkehlchen-gray-default); 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-size: cover;
background-position: 75%; background-position: 75%;
} }
@ -176,9 +186,9 @@
border-radius: 8px; border-radius: 8px;
border: 5px solid var(--Rotkehlchen-gray-default); 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-size: cover;
background-position: 75%; /*background-position: 75%;*/
} }
.login-part{ .login-part{
@ -189,7 +199,7 @@
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
gap: 1%; gap: 24px;
} }