Update app.py

app.py

@@ -776,62 +776,29 @@ def side():
             {"name": "Competence", "color": "rgb(111, 168, 220)"},
         ]
         
-        # Inject CSS styles for the scrollable dropdown
+        # Extract bucket names for the selectbox
+        bucket_names = [bucket["name"] for bucket in trust_buckets]
+        
+        # Add a dropdown for selecting a Trust Bucket
+        selected_bucket = st.selectbox("Select Trust Bucket", bucket_names)
+        
+        # Find the corresponding color for the selected Trust Bucket
+        selected_color = next(
+            (bucket["color"] for bucket in trust_buckets if bucket["name"] == selected_bucket),
+            "black",
+        )
+        
+        # Display the selected Trust Bucket with its color
         st.markdown(
-            """
-            <style>
-            .scrollable-dropdown {
-                max-height: 200px;
-                overflow-y: auto;
-                border: 1px solid #ccc;
-                border-radius: 5px;
-                padding: 5px;
-                background-color: #f9f9f9;
-            }
-            .dropdown-item {
-                padding: 8px 12px;
-                font-size: 16px;
-                font-weight: bold;
-                cursor: pointer;
-                border-bottom: 1px solid #ddd;
-            }
-            .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>
-            """,
+            f'<p style="font-size: 18px; color: {selected_color};"><strong>Selected Trust Bucket:</strong> {selected_bucket}</p>',
             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:
-            # 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"]
-        
-        st.markdown("</div>", unsafe_allow_html=True)
-
-
-
 
 
         st.subheader("Show My TrustBuilders®")
         search_query = st.text_input("Search by keyword", key="search_query")
-        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,
-            )
+