Update app.py

app.py

@@ -16,17 +16,17 @@ class NordTheme(Base):
             font=(fonts.GoogleFont("Inter"), "ui-sans-serif", "system-ui", "sans-serif"),
             font_mono=(fonts.GoogleFont("Fira Code"), "ui-monospace", "monospace"),
         )
+        # only the supported tokens
         self.set(
-            # backgrounds & text
             body_background_fill="#2E3440",
             body_text_color="#ECEFF4",
+
             block_background_fill="#3B4252",
-            block_border_color="#4C566A",
             block_border_width="1px",
+            block_border_color="#4C566A",
             block_label_background_fill="#434C5E",
             block_label_text_color="#ECEFF4",
 
-            # buttons
             button_primary_background_fill="#5E81AC",
             button_primary_background_fill_hover="#81A1C1",
             button_primary_text_color="#ECEFF4",
@@ -34,48 +34,56 @@ class NordTheme(Base):
             button_secondary_background_fill_hover="#5A657A",
             button_secondary_text_color="#ECEFF4",
 
-            # accents & radius
             border_color_accent="#5E81AC",
             block_radius="12px",
-
-            # alert colors (use the correct token names)
-            color_error="#BF616A",
-            color_success="#A3BE8C",
-            color_warning="#EBCB8B",
         )
 
 
+# your CSS overrides, combining everything:
 css_overrides = """
 /* Inputs */
-.gradio-container textarea, 
+.gradio-container textarea,
 .gradio-container input[type="text"],
 .gradio-container input[type="password"],
 .gradio-container .code-input {
     background: #434C5E !important;
     color: #ECEFF4 !important;
     border: none !important;
-    border-radius: 6px;
+    border-radius: 6px !important;
 }
 
-/* Buttons */
-.gradio-container .gr-button.primary {
-    background-color: #5E81AC !important;
-    color: #ECEFF4 !important;
+/* Alerts */
+.gradio-container .gr-alert-error {
+    background-color: #BF616A !important;
+    color: white !important;
 }
-.gradio-container .gr-button.primary:hover {
-    background-color: #81A1C1 !important;
+.gradio-container .gr-alert-success {
+    background-color: #A3BE8C !important;
+    color: white !important;
 }
-.gradio-container .gr-button.secondary {
-    background-color: #4C566A !important;
-    color: #ECEFF4 !important;
+.gradio-container .gr-alert-warning {
+    background-color: #EBCB8B !important;
+    color: black !important;
 }
-.gradio-container .gr-button.secondary:hover {
-    background-color: #5A657A !important;
+
+/* Orange “custom” alert */
+.gradio-container .gr-alert-orange {
+    background-color: #D08770 !important;
+    color: white !important;
+}
+
+/* Layout tweaks */
+.gradio-container {
+    max-width: 1200px !important;
+}
+.code-container {
+    border-radius: 8px !important;
 }
 """
 
 
 
+
 # --- Enhanced Configuration ---
 
 PROGRAMMING_LANGUAGES = sorted([
@@ -404,14 +412,7 @@ def create_footer():
 
 with gr.Blocks(
     theme=NordTheme(),
-    css=css_overrides + """
-        .gradio-container {
-            max-width: 1200px !important;
-        }
-        .code-container {
-            border-radius: 8px !important;
-        }
-    """,
+    css=css_overrides,
     title="CodeVerter Pro"
 ) as app:
     # Header