From 63de0053c20129d42a3d0d1b206b9b8057d8bcb9 Mon Sep 17 00:00:00 2001
From: unknown <NiCo_Ñparra201>
Date: Wed, 6 Mar 2024 14:08:35 -0500
Subject: [PATCH] -#94 better visibility for the text in the popularity
 component

---
 force-app/main/default/lwc/popularity/popularity.css |  8 +++++++-
 .../main/default/lwc/popularity/popularity.html      |  2 +-
 force-app/main/default/lwc/popularity/popularity.js  | 12 ++++++------
 3 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/force-app/main/default/lwc/popularity/popularity.css b/force-app/main/default/lwc/popularity/popularity.css
index 53d94d9..4414c5e 100644
--- a/force-app/main/default/lwc/popularity/popularity.css
+++ b/force-app/main/default/lwc/popularity/popularity.css
@@ -1,3 +1,9 @@
 :host {
-  --slds-c-alert-color-background: var(--titleColor);
+  --slds-c-alert-color-background: var(--bannerColor);
+}
+
+.color {
+  color: var(--textColor);
+  font-size: medium;
+  font-weight: 500;
 }
diff --git a/force-app/main/default/lwc/popularity/popularity.html b/force-app/main/default/lwc/popularity/popularity.html
index d3d2b24..e038933 100644
--- a/force-app/main/default/lwc/popularity/popularity.html
+++ b/force-app/main/default/lwc/popularity/popularity.html
@@ -2,7 +2,7 @@
   <template if:true={message}>
     <div class="slds-notify slds-notify_alert" role="alert">
       <span class="slds-assistive-text">{message}</span>
-      <p>{message}</p>
+      <p class="color">{message}</p>
     </div>
   </template>
 </template>
diff --git a/force-app/main/default/lwc/popularity/popularity.js b/force-app/main/default/lwc/popularity/popularity.js
index 2fe8a4f..cbd0d2f 100644
--- a/force-app/main/default/lwc/popularity/popularity.js
+++ b/force-app/main/default/lwc/popularity/popularity.js
@@ -5,20 +5,19 @@ import POPULARITY_FIELD from "@salesforce/schema/Track__c.Popularity__c";
 export default class Popularity extends LightningElement {
   @api recordId;
   message;
-
-  @wire(getRecord, {
-    recordId: "$recordId",
-    fields: [POPULARITY_FIELD]
-  })
+  @wire(getRecord, { recordId: "$recordId", fields: [POPULARITY_FIELD] })
   trackRecord({ data }) {
     if (data) {
       const popularity = getFieldValue(data, POPULARITY_FIELD);
       let color = null;
+      let textColor = "#000000";
+
       if (popularity == null) {
         this.message = null;
       } else if (popularity <= 30) {
         color = "#d62023";
         this.message = "this song is bad according to most people";
+        textColor = "#FDFEFE";
       } else if (popularity <= 50) {
         color = "#d1d62d";
         this.message = "not the best song";
@@ -29,7 +28,8 @@ export default class Popularity extends LightningElement {
         this.message = "this song is fire";
         color = "#40f702";
       }
-      document.documentElement.style.setProperty("--titleColor", color);
+      document.documentElement.style.setProperty("--bannerColor", color);
+      document.documentElement.style.setProperty("--textColor", textColor);
     }
   }
 }