From 3c473529469ebb95ab68716c5fbb596c923df399 Mon Sep 17 00:00:00 2001
From: vardhan0604 <harsh062004@gmail.com>
Date: Sun, 11 May 2025 23:07:25 +0530
Subject: [PATCH 1/2] initial commit


From 827d82901761b75998c8f40a3cb432ab0ec8fd6d Mon Sep 17 00:00:00 2001
From: vardhan0604 <harsh062004@gmail.com>
Date: Mon, 12 May 2025 11:15:07 +0530
Subject: [PATCH 2/2] update

---
 src/components/AggregationPanel/AggregationPanel.js  |  2 +-
 .../AggregationPanel/AggregationPanel.scss           | 12 +++++++-----
 .../AggregationPanel/AggregationPanelComponents.js   |  4 ++--
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/components/AggregationPanel/AggregationPanel.js b/src/components/AggregationPanel/AggregationPanel.js
index 5cd5a0440b..227124b0ee 100644
--- a/src/components/AggregationPanel/AggregationPanel.js
+++ b/src/components/AggregationPanel/AggregationPanel.js
@@ -47,7 +47,7 @@ const AggregationPanel = ({
       ) : shouldShowAggregatedData ? (
         data.panel.segments.map((segment, index) => (
           <div key={index}>
-            <h2 className={styles.heading}>{segment.title}</h2>
+            <h2 className={styles.heading} style={{'--fontColor': segment.titleFontColor || undefined, '--backgroundColor': segment.titleBackgroundColor || undefined }}>{segment.title}</h2>
             <div className={styles.segmentItems}>
               {segment.items.map((item, idx) => {
                 switch (item.type) {
diff --git a/src/components/AggregationPanel/AggregationPanel.scss b/src/components/AggregationPanel/AggregationPanel.scss
index 2bfda14147..cab0069342 100644
--- a/src/components/AggregationPanel/AggregationPanel.scss
+++ b/src/components/AggregationPanel/AggregationPanel.scss
@@ -5,8 +5,8 @@
     margin-top: 0;
     padding: 8px;
     padding-left: 10px;
-    background-color: $blue;
-    color: $white;
+    background-color: var(--backgroundColor, $blue);  
+    color: var(--fontColor, $white);                
 }
 
 .segmentItems {
@@ -24,6 +24,8 @@
     font-size: 14px;
     display: flex;
     gap: 10px;
+    background-color: var(--backgroundColor, inherit); 
+    color: var(--fontColor, inherit);     
 }
 
 .video {
@@ -66,10 +68,10 @@
     text-overflow: ellipsis;
     cursor: pointer;
     margin-bottom: 15px;
-    background-color: $blue;
+    background-color:var(--backgroundColor, $blue);  
     padding: 3px 13px;
     border: none;
-    color: $white;
+    color:var(--fontColor, $white);    
     line-height: 28px;
     outline: 0;
     text-decoration: none;
@@ -78,7 +80,7 @@
     font-size: 14px;
     &:hover,
     &:focus {
-        background-color: $darkBlue;
+        background-color: var(--onhoverBackgroundColor, $blue); 
     }
 }
 
diff --git a/src/components/AggregationPanel/AggregationPanelComponents.js b/src/components/AggregationPanel/AggregationPanelComponents.js
index 2f876c17d0..ef9b611a29 100644
--- a/src/components/AggregationPanel/AggregationPanelComponents.js
+++ b/src/components/AggregationPanel/AggregationPanelComponents.js
@@ -10,7 +10,7 @@ export const TextElement = ({ text }) => (
 
 // Key-Value Element Component
 export const KeyValueElement = ({ item }) => (
-  <div className={styles.keyValue}>
+  <div className={styles.keyValue} style={{'--fontColor': item.fontColor || undefined, '--backgroundColor': item.backgroundColor || undefined }}>
     {item.key}:
     {item.url ? <a href={item.url} target="_blank">{item.value}</a> : <span>{item.value}</span>}
   </div>
@@ -89,7 +89,7 @@ export const ButtonElement = ({ item, showNote }) => {
 
   return (
     <div className={styles.buttonContainer}>
-      <button onClick={handleClick} className={styles.button}>
+      <button onClick={handleClick} className={styles.button} style={{'--fontColor': item.fontColor || undefined, '--backgroundColor': item.backgroundColor || undefined , '--onhoverBackgroundColor' : item.onhoverBackgroundColor || undefined}}>
         {item.text}
       </button>
     </div>