Added titles to each container and changed the styling

Author: kaja-s

tui/components.py

@@ -260,13 +260,14 @@ def _refresh_content(self) -> None:
 
     def on_mount(self) -> None:
         """Initialize default labels on mount."""
-        self.module_text = "Module: "
-        self.functionality_text = "Functionality:"
+        self.module_text = "module: "
+        self.functionality_text = "functionality:"
         self._refresh_content()
 
     def compose(self):
         self.module_widget = Static(self.module_text, classes="rendering-info-row")
         self.functionality_widget = Static(self.functionality_text, classes="rendering-info-row")
+        yield Static("module status", classes="rendering-info-title")
         with Vertical(classes="rendering-info-box"):
             yield self.module_widget
             yield self.functionality_widget
@@ -325,6 +326,7 @@ def on_mount(self) -> None:
         self._refresh_content()
 
     def compose(self):
+        yield Static("latest test scripts", classes="test-scripts-title")
         with Vertical(classes="test-scripts-box"):
             self.unit_widget = Static(self.unit_test_text, classes="test-script-row")
             self.conformance_widget = Static(self.conformance_test_text, classes="test-script-row")

tui/plain2code_tui.py

@@ -175,7 +175,7 @@ def compose(self) -> ComposeResult:
             with Vertical(id=TUIComponents.DASHBOARD_VIEW.value):
                 with VerticalScroll():
                     yield Static(
-                        "[#E0FF6E]*codeplain[/#E0FF6E] [#888888](v0.5.0)[/#888888]\n",
+                        "[#FFFFFF]*codeplain[/#FFFFFF] [#888888](v0.5.0)[/#888888]\n",
                         id="codeplain-header",
                         classes="codeplain-header",
                     )

tui/styles.css

@@ -37,7 +37,6 @@ We might need those at some point, so just commenting them out for now.
 }
 
 #render-status-widget {
-    margin: 0 3;
     height: auto;
 }
 
@@ -62,14 +61,19 @@ RenderingInfoBox {
 
 .rendering-info-box {
     height: auto;
-    border: solid #FFF;
+    border: solid #E0FF6E;
     padding: 0 1;
 }
 
 .rendering-info-row {
     color: #FFF;
 }
 
+.rendering-info-title {
+    color: #E0FF6E;
+    margin-bottom: 0;
+}
+
 ProgressItem {
     height: auto;
 }
@@ -121,10 +125,15 @@ TestScriptsContainer {
 .test-scripts-box {
     height: auto;
     color: #888;
-    border: solid #FFF;
+    border: solid #E0FF6E;
     padding: 0 1;
 }
 
+.test-scripts-title {
+    color: #E0FF6E;
+    margin-bottom: 0;
+}
+
 .test-script-row {
     color: #FFF;
 }