feat: improve modal styles

README.md

@@ -51,16 +51,18 @@ pipx install memotica
 
 ## Usage
 
+### TUI
+
 Once memotica is installed, you should have the `memotica` command available. To start the TUI simply run:
 
 ```bash
 memotica
 ```
 
-Or, if you want to see the help message and other available commands, run:
+Or
 
 ```bash
-memotica --help
+memotica run
 ```
 
 Once the TUI is displayed, you can:
@@ -71,6 +73,20 @@ Once the TUI is displayed, you can:
 
 After you've added some flashcards, select a deck in the deck tree and press `ctrl+s` to begin the review process.
 
+### Other commands
+
+memotica provides commands to export and import your flashcards, decks and review information in the form of CSV files. To see all the available options run:
+
+```bash
+memotica export --help
+```
+
+And
+
+```bash
+memotica import --help
+```
+
 ## Help is Welcome
 
 If you have any suggestions or would like to contribute to this project, please feel free to open an issue. Thank for your interest!

pyproject.toml

@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "memotica"
-version = "0.4.8"
+version = "0.4.9"
 description = "An easy, fast, and minimalist space repition application for the terminal."
 authors = ["dnlzrgz <24715931+dnlzrgz@users.noreply.github.com>"]
 license = "MIT"

src/memotica/global.tcss

@@ -23,9 +23,9 @@ FlashcardsTable {
   width: 1fr;
 
   & > .datatable--header {
-    text-style: bold;
     background: $background;
     color: $secondary;
+    text-style: bold;
   }
 
   & > .datatable--hover {
@@ -61,6 +61,7 @@ FlashcardModal,
 HelpModal,
 ConfirmationModal {
   align: center middle;
+  background: $panel 70%;
 }
 
 .modal {
@@ -81,6 +82,10 @@ ConfirmationModal {
 .modal--confirm {
   height: 12;
   width: 60;
+
+  & > Static {
+    padding: 1;
+  }
 }
 
 .modal--flashcard {
@@ -89,10 +94,6 @@ ConfirmationModal {
   grid-rows: auto 1fr auto;
 }
 
-.modal--confirm Static {
-  padding: 1;
-}
-
 .modal--help {
   height: 1fr;
   max-height: 12;
@@ -101,15 +102,16 @@ ConfirmationModal {
 }
 
 .modal__reversible {
-  layout: grid;
   grid-columns: auto auto;
-  grid-size: 2 1;
   grid-gutter: 1;
-}
+  grid-size: 2 1;
+  layout: grid;
+  width: auto;
 
-.modal__reversible Static {
-  content-align: center middle;
-  height: 3;
+  & > Static {
+    content-align: center middle;
+    height: 3;
+  }
 }
 
 .modal__options {
@@ -128,10 +130,6 @@ ConfirmationModal {
   width: 100%;
 }
 
-.modal__reversible {
-  width: auto;
-}
-
 .modal__options Select {
   width: 1fr;
 }
@@ -147,11 +145,10 @@ ConfirmationModal {
 .modal__front,
 .modal__back {
   margin-bottom: 1;
-}
 
-.modal__front Static,
-.modal__back Static {
-  padding-left: 1;
+  & > Static {
+    padding-left: 1;
+  }
 }
 
 .modal__buttons {

src/memotica/modals/deck_modal.py

@@ -67,7 +67,6 @@ def compose(self) -> ComposeResult:
                     ),
                 ],
                 validate_on=["submitted"],
-                classes="input-field",
             ).focus()
 
     def action_quit(self) -> None: