Update app.py

app.py

@@ -767,26 +767,35 @@ def side():
     
     
 
-
-
-
-
-        # Show Trust Builders Section
         trust_buckets = [
-            {"label": "Stability", "icon": "Bucket_STABILITY.png"},
-            {"label": "Development", "icon": "Bucket_DEVELOPMENT.png"},
-            {"label": "Relationship", "icon": "Bucket_RELATIONSHIP.png"},
-            {"label": "Benefit", "icon": "Bucket_BENEFIT.png"},
-            {"label": "Vision", "icon": "Bucket_VISION.png"},
-            {"label": "Competence", "icon": "Bucket_COMPETENCE.png"}
+            "Stability",
+            "Development",
+            "Relationship",
+            "Benefit",
+            "Vision",
+            "Competence",
         ]
+        
+        # Icon filenames (ensure these icons are in the same directory as your script)
+        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):
-            with open(file_path, "rb") as f:
-                return base64.b64encode(f.read()).decode()
-
-
-
-
+            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 the dropdown
         dropdown_html = """
         <style>
             .custom-dropdown {
@@ -795,28 +804,38 @@ def side():
                 margin: 10px auto;
                 font-family: Arial, sans-serif;
             }
-            .custom-dropdown select {
-                width: 100%;
-                padding: 10px;
-                font-size: 16px;
-                border: 1px solid #ccc;
-                border-radius: 5px;
-                background-color: white;
-                appearance: none;
-                -webkit-appearance: none;
-                -moz-appearance: none;
-                cursor: pointer;
-            }
             .custom-dropdown option {
                 display: flex;
                 align-items: center;
                 padding: 10px;
-                background-color: #f9f9f9;
+                font-size: 16px;
             }
         </style>
         <div class="custom-dropdown">
             <select>
         """
+        
+        for bucket in trust_buckets:
+            icon_path = icon_files.get(bucket, "")
+            if icon_path:
+                icon_path = os.path.join(".", icon_path)
+                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>"
+        
+        dropdown_html += """
+            </select>
+        </div>
+        """
         for bucket in trust_buckets:
             icon_path = os.path.join(".", bucket["icon"])  # Adjust the path if your icons are in a subdirectory
             encoded_img = get_base64(icon_path)