Fix button styling consistency issues

app.py

@@ -1246,6 +1246,18 @@ with main_tab1:
         
         # Process button - flush left with similar padding as file browser
         with left_col:
+            # Add CSS to ensure process button styling remains consistent
+            st.markdown("""
+            <style>
+            /* Ensure primary buttons stay blue */
+            button[data-testid="baseButton-primary"] {
+                background-color: rgb(19, 119, 187) !important;
+                color: rgb(255, 255, 255) !important;
+                border-color: rgb(19, 119, 187) !important;
+            }
+            </style>
+            """, unsafe_allow_html=True)
+            
             # Make the button more clear about its function
             if st.session_state.processed_document_active:
                 process_button = st.button("Process Document Again")
@@ -2065,22 +2077,39 @@ with main_tab1:
                 # Set processed_document_active to True when a new document is processed
                 st.session_state.processed_document_active = True
                 
-                # Add CSS for styling close buttons
+                # Add global CSS for consistent button styling
                 st.markdown("""
                 <style>
+                /* Apply to all Streamlit buttons to maintain consistent styling */
+                button[data-testid="baseButton-secondary"],
+                button[data-testid="baseButton-primary"] {
+                    opacity: 1 !important;
+                }
+                
+                /* Fix for buttons turning white after clicking */
+                .stButton button:active, 
+                .stButton button:focus,
+                .stButton button:hover {
+                    opacity: 0.8 !important;
+                    color: inherit !important;
+                    background-color: inherit !important;
+                    border-color: inherit !important;
+                }
+                
+                /* Close button specific styling */
                 .close-button {
-                    background-color: #e7e7e7;
-                    color: #666;
-                    border: none;
-                    border-radius: 4px;
-                    padding: 0.25rem 0.5rem;
-                    font-size: 0.8rem;
-                    cursor: pointer;
-                    transition: all 0.2s ease;
+                    background-color: #e7e7e7 !important;
+                    color: #666 !important;
+                    border: none !important;
+                    border-radius: 4px !important;
+                    padding: 0.25rem 0.5rem !important;
+                    font-size: 0.8rem !important;
+                    cursor: pointer !important;
+                    transition: all 0.2s ease !important;
                 }
                 .close-button:hover {
-                    background-color: #d7d7d7;
-                    color: #333;
+                    background-color: #d7d7d7 !important;
+                    color: #333 !important;
                 }
                 </style>
                 """, unsafe_allow_html=True)
@@ -2090,15 +2119,26 @@ with main_tab1:
                 with success_cols[0]:
                     metadata_placeholder.success("**Document processed successfully**")
                 with success_cols[1]:
-                    # Use a more visually distinctive close button
+                    # Use a more visually distinctive close button - applying !important to override Streamlit's styles
                     st.markdown("""
                     <style>
-                    div[data-testid="stButton"] button {
-                        background-color: #f8f9fa;
-                        border: 1px solid #dee2e6;
-                        padding: 0.25rem 0.5rem;
-                        font-size: 0.875rem;
-                        border-radius: 0.2rem;
+                    /* Style for the Close Document button */
+                    div[data-testid="stButton"] button[kind="secondary"] {
+                        background-color: #f8f9fa !important;
+                        border: 1px solid #dee2e6 !important;
+                        padding: 0.25rem 0.5rem !important;
+                        font-size: 0.875rem !important;
+                        border-radius: 0.2rem !important;
+                        color: #333333 !important;
+                    }
+                    
+                    /* Maintain styling on hover/focus/active states */
+                    div[data-testid="stButton"] button[kind="secondary"]:hover,
+                    div[data-testid="stButton"] button[kind="secondary"]:focus,
+                    div[data-testid="stButton"] button[kind="secondary"]:active {
+                        background-color: #e9ecef !important;
+                        border-color: #dee2e6 !important;
+                        color: #333333 !important;
                     }
                     </style>
                     """, unsafe_allow_html=True)
@@ -2363,6 +2403,27 @@ with main_tab1:
         if selected_sample > 0:
             selected_url = sample_urls[selected_sample]
             
+            # Add CSS to ensure the Load Sample Document button maintains its styling
+            st.markdown("""
+            <style>
+            /* Ensure primary buttons stay blue even after clicking */
+            button[data-testid="baseButton-primary"] {
+                background-color: rgb(19, 119, 187) !important;
+                color: rgb(255, 255, 255) !important;
+                border-color: rgb(19, 119, 187) !important;
+            }
+            
+            /* Maintain styling on hover/focus/active states */
+            button[data-testid="baseButton-primary"]:hover,
+            button[data-testid="baseButton-primary"]:focus,
+            button[data-testid="baseButton-primary"]:active {
+                background-color: rgba(19, 119, 187, 0.8) !important;
+                color: rgb(255, 255, 255) !important;
+                border-color: rgb(19, 119, 187) !important;
+            }
+            </style>
+            """, unsafe_allow_html=True)
+            
             # Add process button for the sample document
             if st.button("Load Sample Document"):
                 try: