mirror of
https://github.com/bubblecup-12/VogelSocialMedia.git
synced 2025-07-06 15:18:48 +00:00
Fixed link Login/Signup, cursor on button
This commit is contained in:
parent
af935127b3
commit
2d1a4b590b
3 changed files with 23 additions and 10 deletions
|
@ -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() {
|
||||
return (
|
||||
<LoginSignUpPage/>
|
||||
<div className="App">
|
||||
<LoginAndSignUpPage></LoginAndSignUpPage>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -10,7 +10,7 @@ function LoginAndSignUpPage(){
|
|||
const [signup, setSignup]= useState(false);
|
||||
return(
|
||||
<div className='login-display'>
|
||||
<Header></Header>
|
||||
<Header/>
|
||||
<div className="login-login">
|
||||
<div className='login-part'>
|
||||
<div className={signup? 'signup-image': 'login-image'}></div>
|
||||
|
@ -33,7 +33,7 @@ function LoginAndSignUpPage(){
|
|||
<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'>{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>
|
||||
|
|
|
@ -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);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 300px;
|
||||
min-height: 400px;
|
||||
|
||||
}
|
||||
|
||||
.login-text{
|
||||
|
@ -55,6 +54,7 @@
|
|||
gap: 10px;
|
||||
width: 150px;
|
||||
height: 32px;
|
||||
cursor: pointer;
|
||||
|
||||
border-radius: 10px;
|
||||
border: 2px solid var(--Rotkehlchen-orange-default);
|
||||
|
@ -107,11 +107,12 @@
|
|||
line-height: var(--Static-Body-Large-Line-Height, 24px); /* 150% */
|
||||
letter-spacing: var(--Static-Body-Large-Tracking, 0.5px);
|
||||
}
|
||||
.login-link{
|
||||
.login-here{
|
||||
color: var(--Rotkehlchen-orange-default, #E79A0E);
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
/* Body-M */
|
||||
font-family: Inter;
|
||||
font-size: 16px;
|
||||
|
@ -124,6 +125,7 @@
|
|||
.login-signup{
|
||||
color: #FFF;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
|
||||
/* Body-M */
|
||||
font-family: Inter;
|
||||
|
@ -145,6 +147,10 @@
|
|||
|
||||
/* Desktop view*/
|
||||
@media only screen and (min-width: 768px) {
|
||||
.login-display{
|
||||
min-width: 850px;
|
||||
min-height: 800px;
|
||||
}
|
||||
.login-login{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
@ -155,8 +161,8 @@
|
|||
justify-content: start;
|
||||
width: 50vw;
|
||||
height: 60vh;
|
||||
min-height: 300px;
|
||||
min-width: 400px;
|
||||
min-height: 400px;
|
||||
min-width: 500px;
|
||||
}
|
||||
|
||||
.login-image{
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue