merge create activity card after missing things..

Author: Emmanuelle BONOLI

public/activities/tempActivitiesData.json

@@ -22,10 +22,10 @@
     "id": 2,
     "title": "Collecte alimentaire",
     "description": "Aidez-nous à collecter et distribuer des denrées aux personnes dans le besoin.",
-    "image": ["/activities/tempImageData/maraude.png"],
+    "image": ["/activities/tempImageData/collecteAlimentaire.png"],
     "organization": {
       "name": "Les Restos du Cœur",
-      "logo": "/activities/tempImageData/logoCroixRouge.png",
+      "logo": "/activities/tempImageData/restoDuCoeur.png",
       "isFollow": true
     },
     "location": "Lyon",
@@ -41,10 +41,10 @@
     "id": 3,
     "title": "Soutien scolaire",
     "description": "Nous recherchons des bénévoles pour aider des enfants en difficulté scolaire.",
-    "image": ["/activities/tempImageData/maraude.png"],
+    "image": ["/activities/tempImageData/soutienScolaire.jpg"],
     "organization": {
       "name": "Éducation Pour Tous",
-      "logo": "/activities/tempImageData/logoCroixRouge.png",
+      "logo": "/activities/tempImageData/educationPourTous.png",
       "isFollow": true
     },
     "location": "Paris",
@@ -63,7 +63,7 @@
     "image": ["/activities/tempImageData/SPA.png"],
     "organization": {
       "name": "SPA",
-      "logo": "/activities/tempImageData/logoCroixRouge.png",
+      "logo": "/activities/tempImageData/logoSPA.png",
       "isFollow": false
     },
     "location": "Marseille",

public/activities/tempImageData/educationPourTous.png

@@ -4,9 +4,8 @@
     <div class="header-description">
       <h3>{{ activity.title }}</h3>
       @if (activity) {
-      <app-inscription-badge [participants]="activity.participants"></app-inscription-badge>
+        <app-inscription-badge [participants]="activity.participants"></app-inscription-badge>
       }
-      <!-- TODO: changer pour le composant réutilisable -->
     </div>
     <p>
       {{ activity.description }}
@@ -21,15 +20,13 @@ <h3>{{ activity.title }}</h3>
         <div class="footer-details">
           <div class="location">
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
-              <!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
               <path
                 d="M215.7 499.2C267 435 384 279.4 384 192C384 86 298 0 192 0S0 86 0 192c0 87.4 117 243 168.3 307.2c12.3 15.3 35.1 15.3 47.4 0zM192 128a64 64 0 1 1 0 128 64 64 0 1 1 0-128z" />
             </svg>
             <p class="mini-p">{{ activity.location }}</p>
           </div>
           <div class="date">
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
-              <!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
               <path
                 d="M128 0c17.7 0 32 14.3 32 32l0 32 128 0 0-32c0-17.7 14.3-32 32-32s32 14.3 32 32l0 32 48 0c26.5 0 48 21.5 48 48l0 48L0 160l0-48C0 85.5 21.5 64 48 64l48 0 0-32c0-17.7 14.3-32 32-32zM0 192l448 0 0 272c0 26.5-21.5 48-48 48L48 512c-26.5 0-48-21.5-48-48L0 192zm64 80l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16l-32 0c-8.8 0-16 7.2-16 16zm128 0l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16l-32 0c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16l-32 0zM64 400l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16l-32 0c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16l-32 0zm112 16l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16l-32 0c-8.8 0-16 7.2-16 16z" />
             </svg>

public/activities/tempImageData/logoSPA.png

@@ -11,6 +11,7 @@
   .activity-image {
     width: 100%;
     filter: brightness(80%);
+    border-radius: var(--border-radius) var(--border-radius) 0 0;
   }
 
   h3 {
@@ -26,7 +27,7 @@
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    padding: 5% 5% 0% 5%;
+    padding: 5% 5% 0 5%;
 
     .header-description {
       display: flex;
@@ -38,6 +39,10 @@
       display: flex;
       align-items: center;
       gap: 2%;
+
+      img {
+        width: 25px;
+      }
     }
 
     .push-footer {

public/activities/tempImageData/restoDuCoeur.png

@@ -1,9 +1,9 @@
 @if (participants) {
-<div class="badge-container">
-  @if (participants.current === participants.max) {
-  <p class="badge full">Complet</p>
-  } @else {
-  <p class="badge">{{ participants.current }} / {{ participants.max }} pers.</p>
-  }
-</div>
+  <div class="badge-container">
+    @if (participants.current === participants.max) {
+      <p class="badge full">Complet</p>
+    } @else {
+      <p class="badge">{{ participants.current }} / {{ participants.max }} pers.</p>
+    }
+  </div>
 }

src/app/features/activity/components/activity-card/activity-card.component.html

@@ -1,6 +1,7 @@
 .badge-container {
   width: 75px;
   height: 30px;
+
   .badge {
     border-radius: 8px;
     display: flex;
@@ -10,12 +11,13 @@
     text-align: center;
     width: 75px;
     height: 30px;
-    background-color: var(--secondaryValidateColor);
-    color: white;
-    font-size: var(--fontSizePMini);
-    font-family: var(--fontFamilyP);
+    background-color: var(--secondary-validate-color);
+    color: var(--background-color-white);
+    font-size: var(--font-size-p-mini);
+    font-family: var(--font-family-p);
+
     &.full {
-      background-color: var(--secondaryCompleteColor);
+      background-color: var(--secondary-complete-color);
     }
   }
 }

src/app/features/activity/components/activity-card/activity-card.component.scss

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <title>to_rename</title>
+    <title>A l'asso</title>
     <base href="/" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />