Update app.py

app.py

@@ -130,10 +130,9 @@ Sarah
             st.session_state.result_type = ""
             st.rerun()
     
-    # Action buttons with custom styling wrappers
+    # Action buttons
     col_analyze, col_clear = st.columns(2)
     with col_analyze:
-        st.markdown('<div id="analyze-button">', unsafe_allow_html=True)
         if st.button("Analyze Email", key="analyze"):
             if email_body:
                 with st.spinner("Analyzing email..."):
@@ -143,16 +142,13 @@ Sarah
             else:
                 st.session_state.result = "Please enter an email body or select a sample to analyze."
                 st.session_state.result_type = ""
-        st.markdown('</div>', unsafe_allow_html=True)
     
     with col_clear:
-        st.markdown('<div id="clear-button">', unsafe_allow_html=True)
         if st.button("Clear", key="clear"):
             st.session_state.email_body = ""
             st.session_state.result = ""
             st.session_state.result_type = ""
             st.rerun()
-        st.markdown('</div>', unsafe_allow_html=True)
     
     # Display analysis result
     if st.session_state.result:
@@ -165,76 +161,71 @@ Sarah
         else:
             st.write(st.session_state.result)
     
-    # Inject custom CSS for styling
+    # Inject custom CSS without !important, based on your previous working code
     st.markdown("""
         <style>
-        /* Style for Analyze Email button */
-        #analyze-button button {
-            background-color: #FF5733 !important; /* Orange */
-            color: white !important;
-            font-size: 18px !important;
-            padding: 12px 24px !important;
-            border: none !important;
-            border-radius: 5px !important;
-            width: 100% !important;
-            height: 50px !important;
-            box-sizing: border-box !important;
-            text-align: center !important;
-            margin: 0 !important;
+        /* Style for sample buttons (light grey) */
+        div.stButton > button[kind="secondary"]:not([key="clear"]) {
+            font-size: 12px;
+            padding: 5px 10px;
+            background-color: #f0f0f0;
+            color: #333333;
+            border: 1px solid #cccccc;
+            border-radius: 3px;
         }
-        #analyze-button button:hover {
-            background-color: #E74C3C !important; /* Darker orange */
+        /* Analyze Email button (orange) */
+        div.stButton > button[key="analyze"] {
+            background-color: #FF5733;
+            color: white;
+            font-size: 18px;
+            padding: 12px 24px;
+            border: none;
+            border-radius: 5px;
+            width: 100%;
+            height: 50px;
+            box-sizing: border-box;
+            text-align: center;
         }
-        
-        /* Style for Clear button */
-        #clear-button button {
-            background-color: #007BFF !important; /* Blue */
-            color: white !important;
-            font-size: 18px !important;
-            padding: 12px 24px !important;
-            border: none !important;
-            border-radius: 5px !important;
-            width: 100% !important;
-            height: 50px !important;
-            box-sizing: border-box !important;
-            text-align: center !important;
-            margin: 0 !important;
+        div.stButton > button[key="analyze"]:hover {
+            background-color: #E74C3C;
         }
-        #clear-button button:hover {
-            background-color: #0056b3 !important; /* Darker blue */
+        /* Clear button (blue) */
+        div.stButton > button[key="clear"] {
+            background-color: #007BFF;
+            color: white;
+            font-size: 18px;
+            padding: 12px 24px;
+            border: none;
+            border-radius: 5px;
+            width: 100%;
+            height: 50px;
+            box-sizing: border-box;
+            text-align: center;
         }
-        
-        /* Style for sample buttons */
-        div[data-testid="stButton"] button:not([key="analyze"]):not([key="clear"]) {
-            font-size: 12px !important;
-            padding: 5px 10px !important;
-            background-color: #f0f0f0 !important; /* Light gray */
-            color: #333333 !important;
-            border: 1px solid #cccccc !important;
-            border-radius: 3px !important;
+        div.stButton > button[key="clear"]:hover {
+            background-color: #0056b3;
         }
-        
         /* Result boxes */
         .spam-result {
-            background-color: #ff3333 !important; /* Red */
-            color: white !important;
-            padding: 10px !important;
-            border-radius: 5px !important;
-            border: 1px solid #cc0000 !important;
+            background-color: #ff3333;
+            color: white;
+            padding: 10px;
+            border-radius: 5px;
+            border: 1px solid #cc0000;
         }
         .positive-result {
-            background-color: #ff3333 !important; /* Red */
-            color: white !important;
-            padding: 10px !important;
-            border-radius: 5px !important;
-            border: 1px solid #cc0000 !important;
+            background-color: #ff3333;
+            color: white;
+            padding: 10px;
+            border-radius: 5px;
+            border: 1px solid #cc0000;
         }
         .negative-result {
-            background-color: #006633 !important; /* Dark green */
-            color: white !important;
-            padding: 10px !important;
-            border-radius: 5px !important;
-            border: 1px solid #004d26 !important;
+            background-color: #006633;
+            color: white;
+            padding: 10px;
+            border-radius: 5px;
+            border: 1px solid #004d26;
         }
         </style>
     """, unsafe_allow_html=True)