Added CSS Classes on about_screen.py and new_diary_modal.py and created the classes on the pilgrim.css file

src/pilgrim/ui/styles/pilgrim.css

@@ -1,25 +1,172 @@
-
-.dialog-container{
-    content-align: center top;
+Screen {
+    layout: vertical;
+    background: $surface-darken-1;
+    align: center middle;
+}
+.DiaryListScreen-DiaryListContainer {
+    height: 1fr;
+    width: 100%;
+    layout: vertical;
+    align: center top; /* Alinha no topo para seguir o wireframe */
+    padding: 2 4; /* Mais espaço nas laterais */
+    background: $surface; /* Removendo aquamarine para ficar mais limpo */
 }
 
-.app-title{
-    dock: top;
-    height: 3;
-    content-align: center middle;
-    text-style: bold;
-    color: $accent;
+/* A lista de diários - área principal como no wireframe */
+.DiaryListScreen-DiaryListOptions {
+    border: round $primary-lighten-2;
+    background: $surface;
+    width: 75%; /* Largura generosa como no wireframe */
+    height: 72%; /* Ocupa o espaço disponível */
+    margin: 2 0; /* Margem vertical para separar dos outros elementos */
 }
 
-.actions-buttons{
+.DiaryListScreen-DiaryListOptions:focus {
+    border: round $primary;
+}
+
+/* O contêiner dos botões - logo abaixo da lista */
+.DiaryListScreen-ButtonsGrid {
+    layout: horizontal;
+    align: center middle;
+    width: 79%; /* Mesma largura da lista */
+    height: 20%; /* Aumentando altura para caber o texto dos botões */
+}
+
+/* Botões individuais - garantindo espaço para o texto */
+.DiaryListScreen-NewDiaryButton,
+.DiaryListScreen-EditDiaryButton,
+.DiaryListScreen-OpenDiaryButton {
+    margin: 0 1 1 0; /* Espaço entre os botões */
+    height: 1fr;
+    width: 1fr;
+    border: round grey;
+}
+
+/* As dicas - usando a classe correta */
+.DiaryListScreen-DiaryListTips {
+    width: 100%; /* Largura total quando usando dock */
     height: auto;
-    margin: 1 0;
+    text-style: italic;
+    text-align: center; /* Centraliza o texto dentro do elemento */
+    color: $text-muted;
+    dock: bottom; /* Gruda no fundo da tela */
+    margin: 0 1;
+}
+
+/* Estilos genéricos que não mudaram */
+.option-list--option-highlighted {
+    background: $primary-darken-2;
+}
+
+.option-list--option-selected {
+    text-style: bold;
+    background: $primary;
+}
+
+Header {
+    background: $primary;
+    color: $text;
+}
+
+Footer {
+    background: $primary;
+    color: $text;
+}
+
+AboutScreen {
     align: center middle;
 }
 
-.tips{
-    dock: bottom;
-    height: 4;
-    content-align: center middle;
+.AboutScreen_AboutContainer {
+    align: center middle;
+    width: 85%;
+    height: 95%;
+    border: thick $primary;
+    background: $surface;
+    margin: 1;
+}
+
+.AboutScreen_AboutContainer TextArea {
+    align: center middle;
+    width: 100%;
+    height: 55%;
+    margin: 2;
+    padding: 1;
+}
+
+.AboutScreen_SubContainer {
+    align: center middle;
+    height: 45%;
+    padding: 1 1;
+    margin: 1 1;
+}
+
+.AboutScreen_AboutTitle {
+    color: $accent;
+    text-style: bold;
+    text-align: center;
+    margin-bottom: 1;
+}
+
+.AboutScreen_AboutVersion {
+    color: $warning;
+    text-style: italic;
+    text-align: center;
+    margin-bottom: 1;
+}
+
+.AboutScreen_AboutContent {
+    text-align: center;
+    margin-bottom: 1;
+}
+
+.AboutScreen_AboutContact,
+.AboutScreen_AboutAuthor {
     color: $text-muted;
+    text-align: center;
+    margin-bottom: 1;
+}
+
+.AboutScreen_AboutLicense {
+    height: 60%;
+}
+
+Screen.-modal {
+    background: rgba(0, 0, 0, 0.7); /* Escurece o fundo da tela por baixo */
+    align: center middle; /* Centraliza o conteúdo (sua modal) que está nesta tela modal */
+}
+
+.NewDiaryModal-Dialog {
+    width: 60%; /* Largura do diálogo */
+    height: auto; /* Altura automática */
+    background: $surface; /* Fundo do diálogo */
+    border: thick $accent; /* Borda chamativa */
+    padding: 2 4; /* Espaçamento interno */
+    align: center middle; /* Centraliza conteúdo dentro do diálogo */
+    layout: vertical;
+}
+
+.NewDiaryModal-Dialog .NewDiaryModal-Title{
+    text-align: center;
+    text-style: bold;
+    color: $primary;
+    margin-bottom: 1;
+}
+
+.NewDiaryModal-NameInput{
+    width: 1fr; /* Ocupa a largura disponível */
+    margin-bottom: 2;
+}
+
+.NewDiaryModal-ButtonsContainer{
+    width: 1fr;
+    height: auto;
+    align: center middle;
+    padding-top: 1;
+}
+
+.NewDiaryModal-ButtonsContainer Button{
+    margin: 0 1;
+    width: 1fr;
 }