Fix UI
This commit is contained in:
1 parent
ec2b798839
commit
89d2af34b9
6 files changed
+37
-13
No files matched your search
@@ -24,7 +24,7 @@ function LoginForm({ className }) {
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={`${className} ${"glassCard"}`}>
|
<div className={`${className} glassCard ${styles.inputContainer}`}>
|
||||||
<div className={styles.formgroup}>
|
<div className={styles.formgroup}>
|
||||||
<Input
|
<Input
|
||||||
type="email"
|
type="email"
|
||||||
|
|||||||
@@ -28,6 +28,10 @@ input::placeholder{
|
|||||||
margin-top:23px;
|
margin-top:23px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.inputContainer {
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
/* style scoped (module) */
|
/* style scoped (module) */
|
||||||
.loginButton {
|
.loginButton {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|||||||
@@ -3,15 +3,14 @@ import LoginForm from "../../components/loginform/loginForm.jsx";
|
|||||||
import Background from "../../components/background/background.jsx";
|
import Background from "../../components/background/background.jsx";
|
||||||
|
|
||||||
function LoginPage() {
|
function LoginPage() {
|
||||||
return <Background>
|
return (
|
||||||
|
<Background>
|
||||||
<div className={styles.container}>
|
<div className={styles.container}>
|
||||||
|
<h1 className={styles.title}>Connexion</h1>
|
||||||
<LoginForm />
|
<LoginForm />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</Background>
|
</Background>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default LoginPage;
|
export default LoginPage;
|
||||||
|
|
||||||
|
|
||||||
@@ -1,16 +1,23 @@
|
|||||||
.container {
|
.container {
|
||||||
position: relative;
|
position: absolute;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
width: 600px;
|
width: 600px;
|
||||||
overflow: hidden;
|
|
||||||
max-height: 80%;
|
max-height: 80%;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
margin-left: 33.3%;
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 36px;
|
||||||
|
color: white;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
text-shadow: 0 2px 8px rgba(0,0,0,0.3);
|
||||||
|
}
|
||||||
@@ -30,9 +30,9 @@ function RegisterPage() {
|
|||||||
|
|
||||||
<div className={styles.container}>
|
<div className={styles.container}>
|
||||||
|
|
||||||
<div className={"glassCard"}>
|
<h1 className={styles.title}>Créer un compte</h1>
|
||||||
|
|
||||||
<h1>Créer un compte</h1>
|
<div className={`glassCard ${styles.inputContainer}`}>
|
||||||
|
|
||||||
<div className={styles.formGroup}>
|
<div className={styles.formGroup}>
|
||||||
<Input
|
<Input
|
||||||
|
|||||||
@@ -2,6 +2,7 @@
|
|||||||
position: relative;
|
position: relative;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
width: 30%;
|
width: 30%;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -9,6 +10,15 @@
|
|||||||
border-radius:12px;
|
border-radius:12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 36px;
|
||||||
|
color: white;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
text-shadow: 0 2px 8px rgba(0,0,0,0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
:global(.glassCard) {
|
:global(.glassCard) {
|
||||||
--glass-bg: #ffffff9f;
|
--glass-bg: #ffffff9f;
|
||||||
}
|
}
|
||||||
@@ -27,3 +37,7 @@ h1 {
|
|||||||
overflow: visible;
|
overflow: visible;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.inputContainer {
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
Reference in new issue
Block a user