Update app.py

app.py

@@ -768,79 +768,71 @@ def side():
     
 
         trust_buckets = [
-            "Stability",
-            "Development",
-            "Relationship",
-            "Benefit",
-            "Vision",
-            "Competence",
+            {"name": "Stability", "color": "rgb(7, 55, 99)"},
+            {"name": "Development", "color": "rgb(241, 194, 50)"},
+            {"name": "Relationship", "color": "rgb(204, 0, 0)"},
+            {"name": "Benefit", "color": "rgb(56, 118, 29)"},
+            {"name": "Vision", "color": "rgb(255, 153, 0)"},
+            {"name": "Competence", "color": "rgb(111, 168, 220)"},
         ]
         
-        # Map bucket names to icon filenames
-        icon_files = {
-            "Stability": "Bucket_STABILITY.png",
-            "Development": "Bucket_DEVELOPMENT.png",
-            "Relationship": "Bucket_RELATIONSHIP.png",
-            "Benefit": "Bucket_BENEFIT.png",
-            "Vision": "Bucket_VISION.png",
-            "Competence": "Bucket_COMPETENCE.png",
-        }
-        
-        # Function to encode local images as Base64
-        def get_base64(file_path):
-            try:
-                with open(file_path, "rb") as f:
-                    return base64.b64encode(f.read()).decode()
-            except FileNotFoundError:
-                st.error(f"File not found: {file_path}")
-                return ""
-        
-        # Generate HTML for dropdown
-        dropdown_html = """
-        <style>
-            .custom-dropdown {
-                width: 100%;
-                max-width: 400px;
-                margin: 10px auto;
-                font-family: Arial, sans-serif;
+        # Inject CSS styles for the scrollable dropdown
+        st.markdown(
+            """
+            <style>
+            .scrollable-dropdown {
+                max-height: 200px;
+                overflow-y: auto;
+                border: 1px solid #ccc;
+                border-radius: 5px;
+                padding: 5px;
+                background-color: #f9f9f9;
             }
-            .custom-dropdown option {
-                display: flex;
-                align-items: center;
-                padding: 10px;
+            .dropdown-item {
+                padding: 8px 12px;
                 font-size: 16px;
+                font-weight: bold;
+                cursor: pointer;
+                border-bottom: 1px solid #ddd;
             }
-        </style>
-        <div class="custom-dropdown">
-            <select>
-        """
+            .dropdown-item:hover {
+                background-color: #e6f7ff;
+            }
+            .stability { color: rgb(7, 55, 99); }
+            .development { color: rgb(241, 194, 50); }
+            .relationship { color: rgb(204, 0, 0); }
+            .benefit { color: rgb(56, 118, 29); }
+            .vision { color: rgb(255, 153, 0); }
+            .competence { color: rgb(111, 168, 220); }
+            </style>
+            """,
+            unsafe_allow_html=True,
+        )
         
+        # Scrollable Dropdown with colored items
+        st.markdown('<div class="scrollable-dropdown">', unsafe_allow_html=True)
+        selected_bucket = None
         for bucket in trust_buckets:
-            if bucket in icon_files:
-                icon_path = os.path.join(".", icon_files[bucket])  # Adjust path if icons are in a subdirectory
-                encoded_img = get_base64(icon_path)
-                dropdown_html += f"""
-                    <option style="background-image: url('data:image/png;base64,{encoded_img}');
-                                    background-repeat: no-repeat;
-                                    background-size: 20px 20px;
-                                    background-position: left center;
-                                    padding-left: 40px;">
-                        {bucket}
-                    </option>
-                """
-            else:
-                dropdown_html += f"<option>{bucket}</option>"
+            # Display each item with its unique color
+            if st.button(bucket["name"], key=bucket["name"]):
+                selected_bucket = bucket["name"]
+                st.session_state["selected_bucket_color"] = bucket["color"]
         
-        dropdown_html += """
-            </select>
-        </div>
-        """
+        st.markdown("</div>", unsafe_allow_html=True)
+
+
 
 
 
         st.subheader("Show My TrustBuilders®")
         search_query = st.text_input("Search by keyword", key="search_query")
-        st.markdown(dropdown_html, unsafe_allow_html=True)
+        if selected_bucket:
+            st.markdown(
+                f'<p style="font-size: 18px; color: {st.session_state.get("selected_bucket_color", "#000")};">'
+                f"<strong>Selected Trust Bucket:</strong> {selected_bucket}</p>",
+                unsafe_allow_html=True,
+            )
+