Standardize button styling throughout the app

app.py

@@ -1206,6 +1206,43 @@ with main_tab1:
     if 'sample_document_processed' not in st.session_state:
         st.session_state.sample_document_processed = False
         
+    # Add global CSS to ensure consistent button styling throughout the app
+    st.markdown("""
+    <style>
+    /* Standard styling for all primary buttons (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;
+    }
+    
+    /* Hover/focus/active states for primary buttons */
+    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;
+    }
+    
+    /* Standard styling for all secondary buttons (gray) */
+    button[data-testid="baseButton-secondary"] {
+        background-color: #f8f9fa !important;
+        border: 1px solid #dee2e6 !important;
+        color: #333333 !important;
+    }
+    
+    /* Hover/focus/active states for secondary buttons */
+    button[data-testid="baseButton-secondary"]:hover,
+    button[data-testid="baseButton-secondary"]:focus,
+    button[data-testid="baseButton-secondary"]:active {
+        background-color: #e9ecef !important;
+        border-color: #dee2e6 !important;
+        color: #333333 !important;
+    }
+    </style>
+    """, unsafe_allow_html=True)
+        
     # Use uploaded_file or sample_document if available
     if 'sample_document' in st.session_state and st.session_state.sample_document is not None:
         # Use the sample document
@@ -1246,17 +1283,7 @@ 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)
+            # Process button styling is now handled by global CSS
             
             # Make the button more clear about its function
             if st.session_state.processed_document_active:
@@ -2077,71 +2104,14 @@ with main_tab1:
                 # Set processed_document_active to True when a new document is processed
                 st.session_state.processed_document_active = True
                 
-                # 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 !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 !important;
-                    color: #333 !important;
-                }
-                </style>
-                """, unsafe_allow_html=True)
+                # Button styling is now handled by global CSS
                 
                 # Display success message with close button for dismissing processed documents
                 success_cols = st.columns([5, 1])
                 with success_cols[0]:
                     metadata_placeholder.success("**Document processed successfully**")
                 with success_cols[1]:
-                    # Use a more visually distinctive close button - applying !important to override Streamlit's styles
-                    st.markdown("""
-                    <style>
-                    /* 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)
+                    # Close button styling is now handled by global CSS
                     
                     if st.button("✕ Close Document", key="close_document_button", help="Clear current document and start over"):
                         # Clear the session state
@@ -2403,26 +2373,7 @@ 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)
+            # Load Sample Document button styling is now handled by global CSS
             
             # Add process button for the sample document
             if st.button("Load Sample Document"):