make it look nicer

BingoField.py

@@ -21,20 +21,21 @@ class BingoField(Static):
         super().__init__()
         self.text = text
 
-    def on_mount(self) -> None:
+    #def on_mount(self) -> None:
-        self.styles.content_align = ('center', 'middle')
+        #self.styles.content_align = ('center', 'middle')
-        self.styles.border = ('solid', 'green')
+        #self.styles.text_align = 'center'
-        self.styles.height = '100%'
+        #self.styles.border = ('blank', 'green')
-        self.styles.width = '100%'
+        #self.styles.height = '100%'
+        #self.styles.width = '100%'
 
     def on_click(self) -> None:
         self.selected = not self.selected 
         if self.selected:
-            self.styles.animate('background', 'green', duration=0.1)
+        #    self.styles.animate('background', 'green', duration=0.1)
-            self.styles.border = ('solid', 'black')
+            self.add_class('field_selected')
         else:
-            self.styles.animate('background', '#1c1c1c', duration=0.1)
+            self.remove_class('field_selected')
-            self.styles.border = ('solid', 'green')
+            #self.styles.animate('background', '#1c1c1c', duration=0.1)
 
         # The post_message method sends an event to be handled in the DOM
         self.post_message(self.Selected(self.num, self.selected))

bingo.py

@@ -18,6 +18,10 @@ class BingoApp(App):
         yield Header()
         yield BingoDisplay()
 
+    def on_mount(self) -> None:
+        self.title = 'CCC Bingo'
+        self.sub_title = 'GPN22 Edition'
+
     def action_toggle_dark(self) -> None:
         '''An action to toggle dark mode.'''
         self.dark = not self.dark

bingo.tcss

@@ -4,6 +4,19 @@ BingoBoard {
     height: 100%;
 }
 
+BingoField {
+    content-align: center middle;
+    text-align: center;
+    height: 100%;
+    width: 100%;
+    background: $panel;
+    border: thick $background; 
+}
+
+BingoField.field_selected {
+    background: $success;
+}
+
 BingoDisplay {
     layout: vertical;
     height: 100%;
@@ -17,18 +30,12 @@ BingoDisplay {
 .seed_input {
   width: 70%;
   border-title-align: left;
+  background: $background;
 }
 .roll_btn {
   width: 30%;
 }
 
-.box {
-    height: 100%;
-    border: solid green;
-    text-align: center;
-    content-align: center middle;
-}
-
 Input.-valid {
     border: tall $success 60%;
 }