From f04817b48438cf842fb8d75c683a66757c9d6508 Mon Sep 17 00:00:00 2001
From: Shaban Kamel <ideasoftwaretech@gmail.com>
Date: Sun, 15 Sep 2024 16:55:55 +0300
Subject: [PATCH] Solara

---
 .../lib/core/dashboard/brand/BrandDetailView.js   |  1 +
 solara/lib/core/dashboard/brand/brand.html        | 15 ++++++++++++++-
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/solara/lib/core/dashboard/brand/BrandDetailView.js b/solara/lib/core/dashboard/brand/BrandDetailView.js
index 9fc3233..0921d1a 100644
--- a/solara/lib/core/dashboard/brand/BrandDetailView.js
+++ b/solara/lib/core/dashboard/brand/BrandDetailView.js
@@ -247,6 +247,7 @@ class BrandDetailView {
 
         sectionElements.forEach(sectionElement => {
             const newItem = document.createElement('li');
+            newItem.classList.add('index-item');
             newItem.innerHTML = `<a href="#${sectionElement.id}">${sectionElement.dataset.name}</a>`;
             indexElement.appendChild(newItem);
         });
diff --git a/solara/lib/core/dashboard/brand/brand.html b/solara/lib/core/dashboard/brand/brand.html
index 782cd9c..ce7b721 100644
--- a/solara/lib/core/dashboard/brand/brand.html
+++ b/solara/lib/core/dashboard/brand/brand.html
@@ -58,7 +58,7 @@
             }
 
             .index {
-                margin-left: 20px;
+                margin: 40px;
             }
             .index a {
                 color: #0066cc;
@@ -67,6 +67,19 @@
             .index a:hover {
                 text-decoration: underline;
             }
+            .index-item {
+                list-style: none; /* Remove default list styling */
+                padding: 10px; /* Add some padding */
+                margin: 5px 0; /* Space between items */
+                background-color: white; /* Background color for contrast */
+                border-radius: 5px; /* Rounded corners */
+                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Shadow effect */
+                transition: box-shadow 0.3s; /* Smooth transition for shadow */
+            }
+
+            .index-item:hover {
+                box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Darker shadow on hover */
+            }
             .sections {
                 max-width: 1000px;
                 margin: 0 auto;