interactive : stylistic changes (#1804)

stylistic changes for better code readability

xdsl/interactive/app.py

@@ -9,13 +9,11 @@
 
 from io import StringIO
 
-from rich.style import Style
 from textual import events, on
 from textual.app import App, ComposeResult
 from textual.containers import Horizontal, ScrollableContainer, Vertical
 from textual.reactive import reactive
 from textual.widgets import Button, Footer, Label, ListItem, ListView, TextArea
-from textual.widgets.text_area import TextAreaTheme
 
 from xdsl.dialects.builtin import ModuleOp
 from xdsl.ir import MLContext
@@ -49,16 +47,6 @@ class InputApp(App[None]):
         ("q", "quit_app", "Quit"),
     ]
 
-    # defines a theme for the Input/Output TextArea's
-    _DEFAULT_THEME = TextAreaTheme(
-        name="my_theme_design",
-        base_style=Style(bgcolor="white"),
-        syntax_styles={
-            "string": Style(color="red"),
-            "comment": Style(color="magenta"),
-        },
-    )
-
     current_module = reactive[ModuleOp | Exception | None](None)
     """
     Reactive variable used to save the current state of the modified Input TextArea
@@ -171,10 +159,8 @@ def on_mount(self) -> None:
         """Configure widgets in this application before it is first shown."""
 
         # register's the theme for the Input/Output TextArea's
-        self.input_text_area.register_theme(InputApp._DEFAULT_THEME)
-        self.output_text_area.register_theme(InputApp._DEFAULT_THEME)
-        self.input_text_area.theme = "my_theme_design"
-        self.output_text_area.theme = "my_theme_design"
+        self.input_text_area.theme = "vscode_dark"
+        self.output_text_area.theme = "vscode_dark"
 
         self.query_one("#input_container").border_title = "Input xDSL IR"
         self.query_one("#output_container").border_title = "Output xDSL IR"

xdsl/interactive/app.tcss

@@ -1,7 +1,7 @@
 # ListView
 #passes_list_view{
     border: heavy $accent-darken-1;
-    border-title-color: $warning-lighten-1;
+    border-title-color: $error-darken-3;
     border-title-style: bold;
     border-title-align: center;
     height: 100%;
@@ -17,23 +17,23 @@
 # ScrollableContainer(Label)
 #selected_passes {
     border: heavy $accent-darken-1;
-    border-title-color: $warning-lighten-1;
+    border-title-color: $error-darken-3;
     border-title-style: bold;
     border-title-align: center;
 }
 
 # Vertical(TextArea, Button)
 #input_container {
     border: heavy $accent-darken-1;
-    border-title-color: $warning-lighten-1;
+    border-title-color: $error-darken-3;
     border-title-style: bold;
     border-title-align: center;
 }
 
 # Vertical(TextArea, Button)
 #output_container {
     border: heavy $accent-darken-1;
-    border-title-color: $warning-lighten-1;
+    border-title-color: $error-darken-3;
     border-title-style: bold;
     border-title-align: center;
 }
@@ -42,4 +42,5 @@ Screen {
     layout: grid;
     grid-size: 1 2;
     grid-rows: 45% 55%;
+    background: $surface;
 }