2-DR2-TP2.13

Author: mattolivr

2-desenvolvimento-front-end/DR2-fundamentos-de-react/DR2-TP2.00-biblioteca-crud/src/App.css

@@ -10,6 +10,42 @@ body {
   font-family: system-ui, -apple-system, sans-serif;
 }
 
+.mensagem {
+  position: fixed;
+  bottom: 24px;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 16px 24px;
+  border-radius: 6px;
+  max-width: 600px;
+  text-align: center;
+  font-weight: 500;
+  animation: slideUp 0.3s ease;
+  z-index: 1000;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+
+.mensagem-success {
+  background-color: #4a9c32;
+  color: white;
+}
+
+.mensagem-info {
+  background-color: #3a7ad6;
+  color: white;
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translate(-50%, 20px);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, 0);
+  }
+}
+
 main {
   padding-block: 32px;
 

2-desenvolvimento-front-end/DR2-fundamentos-de-react/DR2-TP2.00-biblioteca-crud/src/App.jsx

@@ -12,13 +12,21 @@ function App() {
   ]);
 
   const [livroEditando, setLivroEditando] = useState(null);
+  const [mensagem, setMensagem] = useState(null);
+
+  const mostrarMensagem = (texto, tipo = 'success') => {
+    setMensagem({ texto, tipo });
+    setTimeout(() => setMensagem(null), 3000);
+  };
 
   const adicionarLivro = (novoLivro) => {
     setLivros([...livros, novoLivro]);
+    mostrarMensagem('Livro adicionado com sucesso');
   };
 
   const removerLivro = (index) => {
     setLivros(livros.filter((_, i) => i !== index));
+    mostrarMensagem('Livro removido', 'info');
   };
 
   const editarLivro = (index) => {
@@ -30,11 +38,17 @@ function App() {
       i === livroEditando.index ? livroAtualizado : livro
     ));
     setLivroEditando(null);
+    mostrarMensagem('Livro atualizado');
   };
 
   return (
     <>
       <Header />
+      {mensagem && (
+        <div className={`mensagem mensagem-${mensagem.tipo}`}>
+          {mensagem.texto}
+        </div>
+      )}
       <main>
         <BookForm 
           onAddBook={adicionarLivro} 

2-desenvolvimento-front-end/DR2-fundamentos-de-react/DR2-TP2.00-biblioteca-crud/src/components/bookform/styles.css

@@ -18,7 +18,7 @@
   }
 
   button {
-    background-color: #5a7a4a;
+    background-color: #4a9c32;
     color: #f8f4f0;
     border: none;
     padding: 12px 24px;
@@ -29,15 +29,15 @@
     flex: 1;
 
     &:hover {
-      background-color: #6b8f5a;
+      background-color: #5bb844;
     }
   }
 
   .btn-cancelar {
-    background-color: #6b6b6b;
+    background-color: #888888;
 
     &:hover {
-      background-color: #7a7a7a;
+      background-color: #9a9a9a;
     }
   }
 }

2-desenvolvimento-front-end/DR2-fundamentos-de-react/DR2-TP2.00-biblioteca-crud/src/components/booklist/styles.css

@@ -54,7 +54,7 @@ table {
 }
 
 .btn-excluir {
-  background-color: #a84848;
+  background-color: #d63838;
   color: #f8f4f0;
   border: none;
   padding: 8px 16px;
@@ -64,12 +64,12 @@ table {
   font-weight: 500;
 
   &:hover {
-    background-color: #c05555;
+    background-color: #e84545;
   }
 }
 
 .btn-editar {
-  background-color: #4a6aa8;
+  background-color: #3a7ad6;
   color: #f8f4f0;
   border: none;
   padding: 8px 16px;
@@ -80,6 +80,6 @@ table {
   margin-right: 8px;
 
   &:hover {
-    background-color: #5580c0;
+    background-color: #4a8ee8;
   }
 }