Fixed rounded on div in social page

src/app/components/challenge-card/challenge-card.component.html

@@ -1,3 +1,9 @@
-<p>
+<ion-card>
-  challenge-card works!
+    <ion-card-header>
-</p>
+        <ion-card-subtitle>Titre de la carte</ion-card-subtitle>
+    </ion-card-header>
+
+    <ion-card-content>
+        Here's a small text description for the card content. Nothing more, nothing less.
+    </ion-card-content>
+</ion-card>

src/app/components/challenge-card/challenge-card.component.ts

@@ -1,9 +1,13 @@
 import { Component, OnInit } from '@angular/core';
+import {IonicModule} from "@ionic/angular";
 
 @Component({
-  selector: 'app-challenge-card',
+    selector: 'app-challenge-card',
-  templateUrl: './challenge-card.component.html',
+    templateUrl: './challenge-card.component.html',
-  styleUrls: ['./challenge-card.component.scss'],
+    styleUrls: ['./challenge-card.component.scss'],
+    imports: [
+        IonicModule
+    ]
 })
 export class ChallengeCardComponent  implements OnInit {
 

src/app/components/friend-request/friend-request.component.html

@@ -1,5 +1,5 @@
 @if (friendsRequest().length > 0) {
-    <div class="rounded-3xl px-5 m-3 bg-white overflow-auto font-mono border-1 border-gray-300">
+    <div class="rounded-xl px-5 m-3 bg-white overflow-auto font-mono border-1 border-gray-300">
         <ion-list>
             @for (request of friendsRequest(); track request.userId; let i = $index) {
                 @if (i == friendsRequest().length - 1) {

src/app/components/friends/friends-list.component.html

@@ -1,5 +1,5 @@
 @if (friends().length > 0) {
-    <div class="rounded-3xl px-5 m-3 bg-white  font-mono border-1 border-gray-300">
+    <div class="rounded-xl px-5 m-3 bg-white  font-mono border-1 border-gray-300">
         <ion-list>
             @for (friend of friends(); track friend.friendId; let i = $index) {
                 @if (i == friends().length - 1) {

src/app/components/search-friend/search-friend.component.html

@@ -9,7 +9,7 @@
 </ion-searchbar>
 
 @if (isActive()) {
-    <div class="rounded-3xl px-5 ml-3 mr-3 mb-4 bg-white font-mono border-1 border-gray-300 overflow-auto">
+    <div class="rounded-xl px-5 ml-3 mr-3 mb-4 bg-white font-mono border-1 border-gray-300 overflow-auto">
         @if (results().length > 0) {
             <ion-list>
                 @for (result of results(); track result; let i = $index) {