add: amélioration du style form start quiz

src/app/modules/home/form-play-quiz/form-play-quiz.component.html

@@ -6,6 +6,6 @@
     <app-form-start-quiz *ngIf="showStartQuiz"></app-form-start-quiz>
     <app-form-create-quiz *ngIf="showCreateQuiz"></app-form-create-quiz>
 </div>
-<div class="play-button">
+<!-- <div class="play-button">
     <button>Play</button>
-</div>
+</div> -->

src/app/modules/home/form-quiz/form-start-quiz/form-start-quiz.component.css

 .container {
-    padding: 1rem;
-    background-color: #f9f9f9;
-    border: 0.1rem solid #e0e0e0;
-    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
-    background-color: aqua; 
-    height: 100vh;
+    height: 100%;
+    width: 100%;
+    background-color: #1FA9FF;
     display: flex;
-    flex-direction: column;
+    justify-content: center;
+    align-items: center;
 }
 
 form {
     display: flex;
     flex-direction: column;
-    gap: 130%; /* Espacement vertical */
+    width: 80%;
+}
+
+input {
+    width: 100%;
+    height: 5%;
+    border: 4px solid #1FA9FF;
+    border-radius: 10px;
+    padding: 1rem;
+    font-size: 2vmin;
+
 }
 
 .erreur {
@@ -21,45 +29,20 @@ form {
     font-weight: bold;
 }
 
-.infos {
-    font-size: 24;
-    font-weight: bold;
-}
-
-input {
-    width: 98%;
-    height: 10%;
-    border-radius: 10px;
-    border-color: #1FA9FF;
-    padding: 1%
-}
-
 .containerInfo{
+    width: 100%;
     background-color: #ffffff;
     border-radius: 10px;
     padding: 1rem;
 }
 
-button {
-    width: 100%;
-    height: 20%;
-    border-radius: 10px;
-    background-color: #2B73FE;
-    color: #ffffff;
-    font-size: 120%;
+.infos {
+    font-size: 2vmin;
     font-weight: bold;
-    border-color: #2B73FE;
 }
 
-button:hover {
-    width: 100%;
-    height: 20%;
-    border-radius: 10px;
-    background-color: #255fd3;
-    color: #ffffff;
-    font-size: 120%;
-    font-weight: bold;
-    border-color: #2B73FE;
-}
+
+
+
 
 

src/app/modules/home/form-quiz/form-start-quiz/form-start-quiz.component.html

 <div class="container">
     <form [formGroup]="form" (ngSubmit)="submitForm()">
-        <div>
-            <p class="erreur">{{erreur}}</p>
-            <input type="text" placeholder="Type ID..." formControlName="code" maxlength="6" (ngModelChange)="modelChangeFn($event)">
-        </div>
+        <p class="erreur">{{erreur}}</p> <!-- changer ng if -->
+        <input type="text" placeholder="Type ID..." formControlName="code" maxlength="6" (ngModelChange)="modelChangeFn($event)">
         <div class="containerInfo">
             <p class="infos">About this quiz</p>
             <hr>
@@ -11,6 +9,6 @@
             <p class="infos">Question : {{question}}</p> 
             <p class="infos">Score : {{score}}</p>
         </div>
-        <button type="submit">PLAY</button>
+        <button type="submit" class="blueButton">PLAY</button>
     </form> 
 </div>  
\ No newline at end of file

src/app/modules/home/form-quiz/form-start-quiz/form-start-quiz.component.ts

@@ -7,7 +7,7 @@ import { FormQuizService } from '../../../../services/form-quiz.service';
 @Component({
   selector: 'app-form-start-quiz',
   templateUrl: './form-start-quiz.component.html',
-  styleUrl: './form-start-quiz.component.css'
+  styleUrls: ['./form-start-quiz.component.css','../../../../../styles.css'],
 })
 export class FormStartQuizComponent implements OnInit{
 
@@ -22,7 +22,6 @@ export class FormStartQuizComponent implements OnInit{
     private formQuizService: FormQuizService,
     private fb: FormBuilder,
     private router: Router,
-    // private dialogRef: MatDialogRef<FormStartQuizComponent>,
   ) {}
 
   ngOnInit(): void {
@@ -46,7 +45,6 @@ export class FormStartQuizComponent implements OnInit{
                 
             },
         });
-        // this.dialogRef.close();
     }
   }