fix: css styles

sauljabin · Nov 25, 2024 · b655f81 · b655f81
1 parent d366c1e
commit b655f81
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 84 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -18,6 +18,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Using records instead of messages
 
+### Fixed
+
+- CSS Styles
+
 ## [2.3.7] - 2024-10-14
 
 ### Added

diff --git a/changelog.lock b/changelog.lock
@@ -18,6 +18,12 @@
                     "entries": [
                         "Using records instead of messages"
                     ]
+                },
+                {
+                    "type": "Fixed",
+                    "entries": [
+                        "CSS Styles"
+                    ]
                 }
             ]
         },

diff --git a/kaskade/admin.py b/kaskade/admin.py
@@ -27,7 +27,7 @@
 from kaskade.utils import notify_error
 
 REFRESH_TABLE_DELAY = 1
-FILTER_TOPICS_SHORTCUT = "/"
+FILTER_TOPICS_SHORTCUT = "ctrl+f"
 BACK_SHORTCUT = "escape"
 ALL_TOPICS_SHORTCUT = BACK_SHORTCUT
 SUBMIT_SHORTCUT = "enter"
@@ -44,18 +44,18 @@
 class AdminShortcuts(Widget):
 
     SHORTCUTS = [
-        ["all:", BACK_SHORTCUT, "show:", SUBMIT_SHORTCUT],
-        ["refresh:", REFRESH_TOPICS_SHORTCUT, "create:", NEW_TOPIC_SHORTCUT],
-        ["filter:", FILTER_TOPICS_SHORTCUT, "edit:", EDIT_TOPIC_SHORTCUT],
-        ["quit:", QUIT_SHORTCUT, "delete:", DELETE_TOPIC_SHORTCUT],
+        [f"<{SUBMIT_SHORTCUT}>", "describe", f"<{BACK_SHORTCUT}>", "show all"],
+        [f"<{REFRESH_TOPICS_SHORTCUT}>", "refresh", f"<{NEW_TOPIC_SHORTCUT}>", "create"],
+        [f"<{FILTER_TOPICS_SHORTCUT}>", "filter", f"<{EDIT_TOPIC_SHORTCUT}>", "edit"],
+        [f"<{DELETE_TOPIC_SHORTCUT}>", "delete", f"<{QUIT_SHORTCUT}>", "quit"],
     ]
 
     def render(self) -> Table:
         table = Table(box=None, show_header=False, padding=(0, 0, 0, 1))
+        table.add_column(style=SECONDARY, justify="right")
+        table.add_column(style=PRIMARY, width=10)
+        table.add_column(style=SECONDARY, justify="right")
         table.add_column(style=PRIMARY)
-        table.add_column(style=SECONDARY)
-        table.add_column(style=PRIMARY)
-        table.add_column(style=SECONDARY)
 
         for shortcuts in self.SHORTCUTS:
             table.add_row(*shortcuts)

diff --git a/kaskade/consumer.py b/kaskade/consumer.py
@@ -20,27 +20,26 @@
 from kaskade.banner import KaskadeBanner
 
 CHUNKS_SHORTCUT = "#"
-NEXT_SHORTCUT = ">"
+NEXT_SHORTCUT = "tab"
 QUIT_SHORTCUT = "ctrl+c"
 SUBMIT_SHORTCUT = "enter"
 BACK_SHORTCUT = "escape"
-FILTER_SHORTCUT = "/"
+FILTER_SHORTCUT = "ctrl+f"
 
 
 class ConsumerShortcuts(Widget):
-
     SHORTCUTS = [
-        ["all:", BACK_SHORTCUT, "show:", SUBMIT_SHORTCUT],
-        ["more:", NEXT_SHORTCUT, "filter:", FILTER_SHORTCUT],
-        ["quit:", QUIT_SHORTCUT, "chunk:", CHUNKS_SHORTCUT],
+        [f"<{NEXT_SHORTCUT}>", "more", f"<{CHUNKS_SHORTCUT}>", "chunk"],
+        [f"<{FILTER_SHORTCUT}>", "filter", f"<{BACK_SHORTCUT}>", "all"],
+        [f"<{SUBMIT_SHORTCUT}>", "show", f"<{QUIT_SHORTCUT}>", "quit"],
     ]
 
     def render(self) -> Table:
         table = Table(box=None, show_header=False, padding=(0, 0, 0, 1))
+        table.add_column(style=SECONDARY, justify="right")
+        table.add_column(style=PRIMARY, width=8)
+        table.add_column(style=SECONDARY, justify="right")
         table.add_column(style=PRIMARY)
-        table.add_column(style=SECONDARY)
-        table.add_column(style=PRIMARY)
-        table.add_column(style=SECONDARY)
 
         for shortcuts in self.SHORTCUTS:
             table.add_row(*shortcuts)
@@ -138,7 +137,6 @@ def on_list_view_selected(self, event: ListView.Selected) -> None:
 
 
 class TopicScreen(ModalScreen):
-
     BINDINGS = [Binding(BACK_SHORTCUT, "close")]
 
     def __init__(self, topic: str, partition: int, offset: int, data: dict[str, Any]):

diff --git a/kaskade/styles.css b/kaskade/styles.css
@@ -6,6 +6,7 @@ Header {
    height: 6;
    layout: horizontal;
    dock: top;
+   background: $surface;
 }
 
 KaskadeBanner {
@@ -14,13 +15,13 @@ KaskadeBanner {
 }
 
 ConsumerShortcuts {
-    width: 27;
+    width: 33;
     dock: right;
     margin: 1 1 0 0;
 }
 
 AdminShortcuts {
-    width: 31;
+    width: 38;
     dock: right;
     margin: 1 1 0 0;
 }
@@ -41,11 +42,12 @@ DataTable {
 
 DataTable:focus {
     border: $kaskade-green;
+    background-tint: $surface;
 }
 
 DataTable > .datatable--header {
     text-style: bold;
-    background: $surface;
+    background-tint: $surface;
     color: $kaskade-orchid;
 }
 
@@ -60,7 +62,7 @@ DataTable > .datatable--hover {
 }
 
 DataTable > .datatable--cursor {
-    background: $kaskade-green 80%;
+    background: $kaskade-green 70%;
     color: $text;
 }
 
@@ -69,11 +71,6 @@ DataTable > .datatable--fixed {
     color: $text;
 }
 
-DataTable > .datatable--fixed-cursor {
-    background: $kaskade-green 80%;
-    color: $text;
-}
-
 DataTable > .datatable--even-row {
     background: $kaskade-green 5%;
 }
@@ -83,33 +80,17 @@ DeleteTopicScreen {
 }
 
 DeleteTopicScreen > Input {
-    border: solid $kaskade-green;
-    background: $surface;
     width: 60%;
-    padding: 0 0 0 1;
-}
-
-DeleteTopicScreen > Input:focus {
-    border: solid $kaskade-green;
-    background: $surface;
 }
 
 FilterTopicsScreen {
     align: center middle;
 }
 
 FilterTopicsScreen > Input {
-    padding: 0 0 0 1;
-    border: solid $kaskade-green 50%;
-    background: $surface;
     width: 60%;
 }
 
-FilterTopicsScreen > Input:focus {
-    border: $kaskade-green;
-    background: $surface;
-}
-
 .-textual-loading-indicator {
     background: $surface;
     color: $kaskade-orchid;
@@ -127,28 +108,6 @@ CreateTopicScreen > Container {
     padding: 0 1 0 1;
 }
 
-CreateTopicScreen > Container > Input {
-    padding: 0 0 0 1;
-    border: solid $kaskade-green 50%;
-    background: $surface;
-}
-
-CreateTopicScreen > Container > Input:focus {
-    border: $kaskade-green;
-    background: $surface;
-}
-
-CreateTopicScreen > Container > RadioSet {
-    border: solid $kaskade-green 50%;
-    width: 100%;
-    background: $surface;
-}
-
-CreateTopicScreen > Container > RadioSet:focus {
-    border: $kaskade-green;
-    background: $surface;
-}
-
 TopicScreen > ScrollableContainer {
     background: $surface;
     border: $kaskade-green;
@@ -175,25 +134,47 @@ EditTopicScreen > Container {
     padding: 0 1 0 1;
 }
 
-EditTopicScreen > Container > Input {
+Input {
     padding: 0 0 0 1;
     border: solid $kaskade-green 50%;
-    background: $surface;
+    background-tint: $surface;
 }
 
-EditTopicScreen > Container > Input:focus {
+Input:focus {
     border: $kaskade-green;
     background: $surface;
 }
 
-EditTopicScreen > Container > RadioSet {
+RadioSet {
     border: solid $kaskade-green 50%;
     width: 100%;
-    background: $surface;
+    background-tint: $surface;
 }
 
-EditTopicScreen > Container > RadioSet:focus {
+RadioSet:focus {
     border: $kaskade-green;
+    background-tint: $surface;
+}
+
+RadioSet > RadioButton > .toggle--button {
+    background-tint: $surface-lighten-1;
+    color: $surface;
+}
+
+RadioSet > RadioButton.-selected {
+    background-tint: $surface;
+}
+
+RadioSet > RadioButton.-selected .toggle--button {
+    background-tint: $surface-lighten-2;
+}
+
+RadioSet > RadioButton.-on .toggle--button {
+    background-tint: $surface-lighten-3;
+    color: $kaskade-green;
+}
+
+RadioSet > RadioButton:blur:hover > .toggle--label {
     background: $surface;
 }
 
@@ -207,10 +188,11 @@ ChunkSizeScreen > ListView {
     height: 6;
     background: $surface;
     padding: 0 1 0 1;
+    background-tint: $surface;
 }
 
-ChunkSizeScreen > ListView > ListItem.--highlight {
-    background: $kaskade-green 90%;
+ChunkSizeScreen > ListView:focus > ListItem.-highlight > Widget {
+    background: $kaskade-green 70%;
 }
 
 ChunkSizeScreen > ListView > ListItem  {
@@ -228,14 +210,3 @@ FilterRecordScreen > Container {
     background: $surface;
     padding: 0 1 0 1;
 }
-
-FilterRecordScreen > Container > Input {
-    padding: 0 0 0 1;
-    border: solid $kaskade-green 50%;
-    background: $surface;
-}
-
-FilterRecordScreen > Container > Input:focus {
-    border: $kaskade-green;
-    background: $surface;
-}