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 {