Update app.py

app.py

@@ -3,23 +3,42 @@ from markdown import markdown
 from bs4 import BeautifulSoup
 import streamlit.components.v1 as components
 
-# Set page config for light theme
-st.set_page_config(page_title="Markdown Converter", layout="wide", initial_sidebar_state="expanded", page_icon="📝", theme="light")
+# Set page config (without theme parameter)
+st.set_page_config(page_title="Markdown Converter", layout="wide", initial_sidebar_state="expanded", page_icon="📝")
 
 def md_to_text(md_text):
     html = markdown(md_text)
     soup = BeautifulSoup(html, features='html.parser')
     return soup.get_text()
 
-def copy_button(text_to_copy):
+def copy_button(text_to_copy, button_id):
+    # More reliable HTML/JS implementation of copy button
     components.html(
         f"""
-        <textarea id="copyText" style="opacity:0;">{text_to_copy}</textarea>
-        <button onclick="navigator.clipboard.writeText(document.getElementById('copyText').value)">
+        <script>
+        function copyText{button_id}() {{
+            const text = `{text_to_copy.replace('`', '\\`').replace("'", "\\'")}`;
+            navigator.clipboard.writeText(text).then(function() {{
+                console.log('Text copied to clipboard');
+                document.getElementById('copy-button-{button_id}').innerHTML = 'Copied!';
+                setTimeout(function() {{
+                    document.getElementById('copy-button-{button_id}').innerHTML = 'Copy';
+                }}, 2000);
+            }})
+            .catch(function(err) {{
+                console.error('Failed to copy text: ', err);
+            }});
+        }}
+        </script>
+        <button id="copy-button-{button_id}" onclick="copyText{button_id}()" 
+                style="background-color: #4CAF50; color: white; border: none; 
+                       padding: 5px 10px; text-align: center; text-decoration: none; 
+                       display: inline-block; font-size: 14px; margin: 4px 2px; 
+                       cursor: pointer; border-radius: 4px;">
             Copy
         </button>
         """,
-        height=30,
+        height=50,
     )
 
 st.title("Markdown to Plain Text Converter")
@@ -48,15 +67,14 @@ with col2:
         
         # Add copy button
         if st.session_state.converted_text:
-            copy_button(st.session_state.converted_text)
+            copy_button(st.session_state.converted_text, "output")
 
 # Optional: Add preview toggle with copy button
 with st.expander("Preview Original Markdown"):
     if md_input:
         st.markdown(md_input, unsafe_allow_html=True)
         # Add copy button for the preview
-        copy_button(md_input)
-        st.caption("Copy Preview Content")
+        copy_button(md_input, "preview")
     else:
         st.write("No Markdown to preview")
 
@@ -67,4 +85,28 @@ st.sidebar.markdown("""
 2. Click 'Convert' 
 3. Use the 'Copy' button in the right panel
 4. Toggle the preview to see original formatting and copy if needed
-""")
+""")
+
+# Apply light theme using CSS
+st.markdown("""
+<style>
+    .stApp {
+        background-color: white;
+        color: #333333;
+    }
+    .stTextArea textarea {
+        background-color: #f9f9f9;
+        color: #333333;
+    }
+    .stButton button {
+        background-color: #4CAF50;
+        color: white;
+    }
+    .stExpander {
+        background-color: #f9f9f9;
+    }
+    .sidebar .sidebar-content {
+        background-color: #f0f0f0;
+    }
+</style>
+""", unsafe_allow_html=True)