created login page

src/app/components/login-form/login-form.component.html

@@ -1,17 +1,13 @@
 <form [formGroup]="loginForm">
-    <ion-item>
-        <ion-label>Pseudo</ion-label>
+    <ion-item lines="none">
+        <ion-label position="stacked">Pseudo</ion-label>
         <ion-input placeholder="Nom d'utilisateur" formControlName="username"></ion-input>
     </ion-item>
 
-    <ion-item>
-        <ion-label>Mot de passe</ion-label>
+    <ion-item lines="none">
+        <ion-label position="stacked">Mot de passe</ion-label>
         <ion-input type="password" placeholder="MotDePasse1234" formControlName="password">
             <ion-input-password-toggle slot="end"></ion-input-password-toggle>
         </ion-input>
     </ion-item>
-
-    <ion-button class="flex flex-col items-center justify-center mt-6">
-        <p class="text-white font-bold m-0">Se connecter</p>
-    </ion-button>
 </form>

src/app/components/login-form/login-form.component.scss

@@ -0,0 +1,28 @@
+/* Style global des items */
+ion-item {
+  --background: #ffffff;
+  margin-bottom: 4px;
+}
+
+/* Label */
+ion-label {
+  font-size: 13px;
+  color: #666;
+  margin-bottom: 4px;
+}
+
+/* Input */
+ion-input{
+  --padding-start: 10px;
+  --padding-end: 10px;
+  --padding-top: 0;
+  --padding-bottom: 0;
+  border: solid 1px #000;
+  border-radius: 10px;
+  font-size: 14px;
+}
+
+/* Button */
+ion-button:active {
+  transform: scale(0.98);
+}

src/app/components/login-form/login-form.component.ts

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 import {FormControl, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
-import {IonButton, IonInput, IonInputPasswordToggle, IonItem, IonLabel} from "@ionic/angular/standalone";
+import {IonicModule} from "@ionic/angular";
 
 @Component({
     selector: 'app-login-form',
@@ -8,11 +8,7 @@ import {IonButton, IonInput, IonInputPasswordToggle, IonItem, IonLabel} from "@i
     styleUrls: ['./login-form.component.scss'],
     imports: [
         ReactiveFormsModule,
-        IonButton,
-        IonInput,
-        IonInputPasswordToggle,
-        IonItem,
-        IonLabel
+        IonicModule
     ]
 })
 export class LoginFormComponent {

src/app/pages/login/login.component.html

@@ -1,23 +1,27 @@
 <div class="flex flex-col items-center justify-center min-h-screen p-6 space-y-4 bg-white">
-    <img src="BeReady.png" alt="BeReady-Logo" class="w-1/4 max-w-xs">
+    <img src="BeReady.png" alt="BeReady-Logo" class="w-1/3 max-w-xs">
 
-    <p class="text-3xl font-extrabold text-center text-black">
-        BeReady
-    </p>
+<!--    <p class="text-3xl font-extrabold text-center text-black">-->
+<!--        BeReady-->
+<!--    </p>-->
 
     <p class="text-gray-500 text-sm text-center w-3/5 leading-snug">
         Prêt à défier tes potes et prouver que t’es le meilleur ?
     </p>
 
-    <app-login-form></app-login-form>
+    <app-login-form class="mb-9"></app-login-form>
 
-    <div class="flex items-center w-full">
+    <ion-button class="w-10/12 mt-0 border-0" color="primary">
+        <p class="text-white font-bold m-0">Se connecter</p>
+    </ion-button>
+
+    <div class="flex items-center w-10/12">
         <div class="flex-1 border-b border-gray-400"></div>
-        <span class="px-2 text-gray-500 font-bold">ou</span>
+        <span class="px-2 text-gray-400 font-bold">ou</span>
         <div class="flex-1 border-b border-gray-400"></div>
     </div>
 
-    <ion-button class="w-full mt-0" style="border: 1px solid black; border-radius: 15px" color="secondary">
+    <ion-button class="w-10/12 mt-0" color="secondary">
         <p class="text-black font-bold m-0">Créer un compte</p>
     </ion-button>
 </div>

src/app/pages/login/login.component.scss

@@ -0,0 +1,3 @@
+ion-button:active {
+  transform: scale(0.98);
+}