Update app.py

app.py

@@ -17,12 +17,12 @@ def generate_summary(text):
 # Custom CSS styling
 st.markdown("""<style>
     .main {
-        background-color: #f0f2f6;
-        background-image: linear-gradient(135deg, #e6f7ff 0%, #b3e0ff 100%);
+        background-color: var(--background-primary);
+        color: var(--text-primary);
         font-family: 'Arial', sans-serif;
     }
     .stTextArea textarea {
-        border: 2px solid #0078d4;
+        border: 2px solid var(--primary-color);
         border-radius: 12px;
         padding: 15px;
         font-family: 'Segoe UI', sans-serif;
@@ -31,13 +31,15 @@ st.markdown("""<style>
         max-width: 800px;
         margin: 20px auto;
         font-size: 16px;
+        background-color: var(--background-secondary);
+        color: var(--text-primary);
     }
     .stTextArea textarea:focus {
-        border-color: #0058a3;
-        box-shadow: 0 0 10px #4f8bf9;
+        border-color: var(--primary-color-dark);
+        box-shadow: 0 0 10px var(--primary-color-light);
     }
     .stButton>button {
-        background-color: #29b6f6;
+        background-color: var(--primary-color);
         color: white;
         border-radius: 25px;
         border: none;
@@ -46,31 +48,32 @@ st.markdown("""<style>
         font-weight: bold;
         box-shadow: 0 4px 12px rgba(41, 182, 246, 0.3);
         transition: all 0.3s ease;
-        margin-right: 10px;  # Add margin to separate buttons
+        margin-right: 10px;
     }
     .stButton>button:hover {
-        background-color: #0288d1;
+        background-color: var(--primary-color-dark);
         box-shadow: 0 6px 14px rgba(2, 136, 209, 0.4);
         transform: translateY(-2px);
     }
     .stTitle {
-        color: #0078d4;
+        color: var(--primary-color);
         font-size: 2.5em;
         text-align: center;
         margin-bottom: 20px;
         font-family: 'Segoe UI', sans-serif;
     }
     .summary-container {
-        background-color: #ffffff;
+        background-color: var(--background-secondary);
         border-radius: 12px;
         padding: 20px;
         box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
         margin-top: 20px;
         max-width: 800px;
         margin: 20px auto;
+        color: var(--text-primary);
     }
     .summary-title {
-        color: #0288d1;
+        color: var(--primary-color-dark);
         font-weight: bold;
         font-size: 1.5em;
         margin-bottom: 10px;
@@ -79,16 +82,24 @@ st.markdown("""<style>
         text-align: center;
         margin-top: 50px;
         padding: 20px;
-        color: #0078d4;
+        color: var(--primary-color);
         font-style: italic;
     }
+
+    @media (max-width: 600px) {
+        .stButton>button {
+            width: 100%;
+            margin-right: 0;
+            margin-bottom: 10px;
+        }
+    }
 </style>""", unsafe_allow_html=True)
 
 # Application UI
 st.title(" Text Summarizer App")
 text = st.text_area("Enter the text you want to summarize...", height=200)
 
-col1, col2 = st.columns(2)  # Create two columns for buttons
+col1, col2 = st.columns(2)
 
 with col1:
     if st.button("Generate Summary"):
@@ -102,7 +113,7 @@ with col1:
 
 with col2:
     if st.button("Refresh"):
-        st.experimental_rerun()  # Rerun the app to clear the summary
+        st.experimental_rerun()
 
 # Footer
 st.markdown("""<div class="footer">    Created with hadheedo</div>""", unsafe_allow_html=True)