From add65e06915457dd262f1e28ad9d77653eb1a6da Mon Sep 17 00:00:00 2001
From: unknown <NiCo_Ñparra201>
Date: Wed, 31 Jan 2024 12:25:51 -0500
Subject: [PATCH] #92 Changes in show the images from Spotify

---
 .../main/default/lwc/getImages/getImages.css  | 23 ++++---------------
 .../main/default/lwc/getImages/getImages.html |  3 ++-
 .../default/lwc/trackPreview/trackPreview.css | 12 +++-------
 .../lwc/trackPreview/trackPreview.html        |  2 +-
 4 files changed, 11 insertions(+), 29 deletions(-)

diff --git a/force-app/main/default/lwc/getImages/getImages.css b/force-app/main/default/lwc/getImages/getImages.css
index 89cc706..243fc3f 100644
--- a/force-app/main/default/lwc/getImages/getImages.css
+++ b/force-app/main/default/lwc/getImages/getImages.css
@@ -1,32 +1,19 @@
 .custom-carousel {
   width: 300px;
   height: 300px;
-  border: px solid #ffffff;
-  border-radius: 5px;
   overflow: hidden;
 }
-
-.custom-carousel-image {
-  width: 600px;
-  height: 470px;
+:host {
+  --sds-c-card-color-background: #1ed760;
 }
 .card {
-  background-color: #f9f9f9; /* Color de fondo */
-  border: 1px solid #ddd; /* Borde con un color más claro */
+  background-color: #ffffff; /* Color de fondo */
+  border: 1px solid #1ed760; /* Borde con un color más claro */
   border-radius: 8px; /* Esquinas redondeadas */
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra suave */
   padding: 15px; /* Relleno interno */
-  margin: 10px; /* Margen externo */
+  margin: 15px; /* Margen externo */
 }
-/* Otros estilos específicos si es necesario */
-.card h2 {
-  color: #333; /* Color del texto del encabezado */
-}
-
-.card p {
-  color: #666; /* Color del texto del párrafo */
-}
-
 /* Estilos cuando el ratón pasa sobre la tarjeta (efecto hover) */
 .card:hover {
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra más pronunciada en hover */
diff --git a/force-app/main/default/lwc/getImages/getImages.html b/force-app/main/default/lwc/getImages/getImages.html
index 5d2a13d..bee1943 100644
--- a/force-app/main/default/lwc/getImages/getImages.html
+++ b/force-app/main/default/lwc/getImages/getImages.html
@@ -7,7 +7,8 @@
             <lightning-carousel-image
               key={imageUrl}
               src={imageUrl}
-              class="custom-carousel-image"
+              header="Image from Spotify"
+              description="This image is grabbed from Spotify documentation."
             ></lightning-carousel-image>
           </template>
         </template>
diff --git a/force-app/main/default/lwc/trackPreview/trackPreview.css b/force-app/main/default/lwc/trackPreview/trackPreview.css
index 9a59cbe..63a2325 100644
--- a/force-app/main/default/lwc/trackPreview/trackPreview.css
+++ b/force-app/main/default/lwc/trackPreview/trackPreview.css
@@ -1,16 +1,10 @@
-.audio-player-container {
-  text-align: center;
-  padding: 20px;
-}
-
 .custom-audio {
   width: 100%;
   max-width: 600px;
-  margin: 0 auto;
+  margin: 0px auto;
   display: block;
-  background-color: #fffefe;
-  border: 1px solid #ffffff;
+  background-color: #1ed760;
+  border: 0px;
   border-radius: 5px;
   padding: 10px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 }
diff --git a/force-app/main/default/lwc/trackPreview/trackPreview.html b/force-app/main/default/lwc/trackPreview/trackPreview.html
index 0d1b1dc..8bcda25 100644
--- a/force-app/main/default/lwc/trackPreview/trackPreview.html
+++ b/force-app/main/default/lwc/trackPreview/trackPreview.html
@@ -1,5 +1,5 @@
 <template>
-  <div class="audio-player-container">
+  <div>
     <c-get-images record-id={recordId} object-api-name={objectApiName}>
     </c-get-images>
     <audio