Feature#369

src/app/core/layout/main-menu/main-menu.component.scss

@@ -7,7 +7,7 @@
   a {
     position: relative;
     width: max-content;
-    color: $black-1;
+    color: $gray-3;
     display: flex;
     align-items: center;
     text-decoration: none;

src/app/core/layout/main/main.component.scss

@@ -35,7 +35,7 @@
     background-color: $white;
     border-radius: 15px;
     width: 100%;
-    height: calc(100% - 80px) !important;
+    height: calc(100% - 60px) !important;
     padding: 20px 50px 20px 50px;
   }
   app-main-menu {

src/app/modules/challenge/components/challenge-info/challenge-info.component.html

@@ -142,7 +142,7 @@ <h3>
       }}</a>
     <ng-template ngbNavContent>
       <!--RESOURCES TAB-->
-      <div class="tab-content info-card w-100">
+      <div class="tab-content info-app-resource-cardcard w-100">
         <section class="title d-flex align-items-baseline">
           <h3 class="title_text">
             {{ "modules.challenge.info.resources" | translate }}

src/app/shared/components/resource-card/resource-card.component.html

@@ -1,23 +1,25 @@
-<div class="d-flex flex-wrap p-2 p-md-0 justify-content-center justify-content-lg-start gap-3">
-  @for (resource of resources; track resource.id) {
-  <a href={{resource.url}} class="resource-list-element d-flex justify-content-start animated align-items-start">
-    <div class="d-flex flex-column justify-content-center">
-      <div class="up-arrow"></div>
-      <h3 class="points text-center">{{resource.voteCount.total}}</h3>
-      <div class="down-arrow"></div>
-    </div>
-    <div class="resource-details d-flex flex-column">
-      <h3 class="title">{{resource.title}}</h3>
-      <p class="description">
-        {{ resource.description }}
-      </p>
-      <div class="user-details d-flex mt-auto align-items-center pt-3">
-        <img class="user-img" [src]="['/assets/img/users/user-1.png']" alt="Nombre Usuario" />
-    <span class="description">
-      {{resource.user.name}}, {{formatResourceDate(resource.createdAt)}}
-    </span>
+<div class="scroll-container">
+  <div class="d-flex flex-wrap p-2 p-md-0 justify-content-center justify-content-lg-start gap-3">
+    @for (resource of resources; track resource.id) {
+    <a href={{resource.url}} class="resource-list-element d-flex justify-content-start animated align-items-start">
+      <div class="d-flex flex-column justify-content-center">
+        <div class="up-arrow"></div>
+        <h3 class="points text-center">{{resource.voteCount.total}}</h3>
+        <div class="down-arrow"></div>
       </div>
-    </div>
-  </a>
-  }
+      <div class="resource-details d-flex flex-column">
+        <h3 class="title">{{resource.title}}</h3>
+        <p class="description">
+          {{ resource.description }}
+        </p>
+        <div class="user-details d-flex mt-auto align-items-center pt-3">
+          <img class="user-img" [src]="['/assets/img/users/user-1.png']" alt="Nombre Usuario" />
+          <span class="description">
+            {{resource.user.name}}, {{resource.createdAt | formatDate}}
+          </span>
+        </div>
+      </div>
+    </a>
+    }
+  </div>
 </div>

src/app/shared/components/resource-card/resource-card.component.scss

@@ -96,4 +96,20 @@ a{
         width:100%;
         max-width: 100%;
     }
-}
+}
+.scroll-container {
+    max-height: 500px; /* Ajusta esto a la altura máxima deseada */
+    overflow-y: auto;
+  }
+
+  /* Estilos para ocultar la barra de desplazamiento en navegadores WebKit (Chrome, Safari) */
+.scroll-container::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+
+  /* Estilos para ocultar la barra de desplazamiento en navegadores Firefox */
+  .scroll-container {
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none;  /* Internet Explorer 10+ */
+  }