From 9588fe9d386caf378c242ee3bf1fdeb908dff3ff Mon Sep 17 00:00:00 2001
From: Fernanda-Farias <contato.ffarias@gmail.com>
Date: Thu, 8 Aug 2024 02:09:04 -0300
Subject: [PATCH] new form-control

---
 .../atualiza-produto.component.css            | 54 ++++++++++++++----
 .../atualiza-produto.component.html           | 49 +++++++++-------
 .../cadastro-produto.component.css            | 57 +++++++++++++++----
 .../cadastro-produto.component.html           | 37 ++++++------
 4 files changed, 138 insertions(+), 59 deletions(-)

diff --git a/src/app/components/restrito/atualiza-produto/atualiza-produto.component.css b/src/app/components/restrito/atualiza-produto/atualiza-produto.component.css
index 9f4e231..7b41bf2 100644
--- a/src/app/components/restrito/atualiza-produto/atualiza-produto.component.css
+++ b/src/app/components/restrito/atualiza-produto/atualiza-produto.component.css
@@ -1,20 +1,54 @@
+/* Estiliza o main */
 main {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
+    background-color: #21224e;
+    font-family: Arial, sans-serif;
+    padding: 20px;
 }
 
 h1 {
+    color: white;
     margin-top: 20px;
+    text-align: center;
 }
 
 #section-cadastro {
-    height: 100%;
-    width: 700px;
-    border-radius: 10px;
-    border: 2px solid black;
+    max-width: 700px;
+    margin: 50px auto;
+    padding: 20px;
+    border-radius: 15px;
+    border: 2px solid #1e1e1e;
+    background-color: #2e2e2e;
+}
+
+.form-group {
+    margin-bottom: 15px;
+}
+
+.form-group label {
+    color: white;
+    display: block;
+    margin-bottom: 5px;
+}
+
+.form-control {
+    width: 100%;
+    padding: 10px;
+    border-radius: 5px;
+    border: 1px solid #444;
+    background-color: #ffffff;
+    color: rgb(0, 0, 0);
+}
+
+.btn-primary {
+    background-color: #00a000;
+    color: #fff;
     padding: 10px 20px;
-    margin-top: 50px;
-    margin-bottom: 10px;
+    border-radius: 5px;
+    border: none;
+    display: block;
+    margin: 20px auto;
+}
+
+.btn-primary:hover {
+    background-color: #007a00;
 }
\ No newline at end of file
diff --git a/src/app/components/restrito/atualiza-produto/atualiza-produto.component.html b/src/app/components/restrito/atualiza-produto/atualiza-produto.component.html
index 95b834a..6719778 100644
--- a/src/app/components/restrito/atualiza-produto/atualiza-produto.component.html
+++ b/src/app/components/restrito/atualiza-produto/atualiza-produto.component.html
@@ -1,33 +1,38 @@
 <main>
-    <h1>Atualiza jogo</h1>
     <section id="section-cadastro">
+        <h1> Atualizar Produto</h1>
         <form *ngIf="produto">
+            <div class="form-group">
+                <label for="id">ID</label>
+                <input type="text" class="form-control" id="id" name="id" [(ngModel)]="produto.id" readonly>
+            </div>
 
-            <label for="produto">Id</label>
-            <input type="text" class="form-control" name="id" [(ngModel)]="produto.id" readonly>
-            <br>
+            <div class="form-group">
+                <label for="nome">Nome</label>
+                <input type="text" class="form-control" id="nome" name="nome" [(ngModel)]="produto.nome" placeholder="Informe o nome do jogo">
+            </div>
 
-            <label for="produto">Nome</label>
-            <input type="text" class="form-control" name="produto" [(ngModel)]="produto.nome">
-            <br>
+            <div class="form-group">
+                <label for="pasta">Pasta</label>
+                <input type="text" class="form-control" id="pasta" name="pasta" [(ngModel)]="produto.pasta" placeholder="Informe a pasta do jogo">
+            </div>
 
-            <label for="pasta">Pasta</label>
-            <input type="text" class="form-control" name="pasta" [(ngModel)]="produto.pasta">
-            <br>
+            <div class="form-group">
+                <label for="foto">Foto</label>
+                <input type="text" class="form-control" id="foto" name="foto" [(ngModel)]="produto.foto" placeholder="Informe o nome da imagem">
+            </div>
 
-            <label for="foto">Foto</label>
-            <input type="text" class="form-control" name="foto" [(ngModel)]="produto.foto">
-            <br>
+            <div class="form-group">
+                <label for="preco">Preço</label>
+                <input type="number" class="form-control" id="preco" name="preco" [(ngModel)]="produto.preco" placeholder="Informe o preço do jogo">
+            </div>
 
-            <label for="preco">Preço</label>
-            <input type="number" class="form-control" name="preco" [(ngModel)]="produto.preco">
-            <br>
-
-            <label for="desconto">Desconto</label>
-            <input type="number" class="form-control" name="desconto" [(ngModel)]="produto.desconto">
-            <br>
-
-            <button type="submit" class="btn btn-primary mb-3" (click)="atualizar(produto.id)">Atualizar</button>
+            <div class="form-group">
+                <label for="desconto">Desconto</label>
+                <input type="number" class="form-control" id="desconto" name="desconto" [(ngModel)]="produto.desconto" placeholder="Informe o desconto em porcentagem">
+            </div>
+            
+            <button type="button" class="btn btn-primary mb-3" (click)="atualizar(produto.id)">Atualizar</button>
         </form>
     </section>
 </main>
\ No newline at end of file
diff --git a/src/app/components/restrito/cadastro-produto/cadastro-produto.component.css b/src/app/components/restrito/cadastro-produto/cadastro-produto.component.css
index 9294936..120129a 100644
--- a/src/app/components/restrito/cadastro-produto/cadastro-produto.component.css
+++ b/src/app/components/restrito/cadastro-produto/cadastro-produto.component.css
@@ -1,20 +1,55 @@
+/* Estiliza o main */
 main {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
+    background-color: #21224e;
+    font-family: Arial, sans-serif;
+    padding: 20px;
+   
 }
 
 h1 {
+    color: white;
     margin-top: 20px;
+    text-align: center;
 }
 
 #section-cadastro {
-    height: 100%;
-    width: 700px;
-    border-radius: 10px;
-    border: 2px solid black;
-    padding: 10px 10px;
-    margin-top: 50px;
-    margin-bottom: 10px;
+    max-width: 700px;
+    margin: 50px auto;
+    padding: 20px;
+    border-radius: 15px;
+    border: 2px solid #1e1e1e;
+    background-color: #2e2e2e;
+}
+
+.form-group {
+    margin-bottom: 15px;
+}
+
+.form-group label {
+    color: white;
+    display: block;
+    margin-bottom: 5px;
+}
+
+.form-control {
+    width: 100%;
+    padding: 10px;
+    border-radius: 5px;
+    border: 1px solid #444;
+    background-color: #ffffff;
+    color: rgb(0, 0, 0);
+}
+
+.btn-primary {
+    background-color: #00a000;
+    color: #fff;
+    padding: 10px 20px;
+    border-radius: 5px;
+    border: none;
+    display: block;
+    margin: 20px auto;
+}
+
+.btn-primary:hover {
+    background-color: #007a00;
 }
\ No newline at end of file
diff --git a/src/app/components/restrito/cadastro-produto/cadastro-produto.component.html b/src/app/components/restrito/cadastro-produto/cadastro-produto.component.html
index 388e8b3..dbee76f 100644
--- a/src/app/components/restrito/cadastro-produto/cadastro-produto.component.html
+++ b/src/app/components/restrito/cadastro-produto/cadastro-produto.component.html
@@ -1,26 +1,31 @@
 <main>
-    <h1>Cadastrar jogo</h1>
     <section id="section-cadastro">
+        <h1> Cadastrar Produto</h1>
         <form>
-            <label for="produto">Nome</label>
-            <input type="text" class="form-control" name="produto" [(ngModel)]="produto.nome">
-            <br>
+            <div class="form-group">
+                <label for="produto">Nome</label>
+                <input type="text" class="form-control" id="produto" name="produto" [(ngModel)]="produto.nome" placeholder="Informe o nome do jogo">
+            </div>
 
-            <label for="pasta">Pasta</label>
-            <input type="text" class="form-control" name="pasta" [(ngModel)]="produto.pasta">
-            <br>
+            <div class="form-group">
+                <label for="pasta">Pasta</label>
+                <input type="text" class="form-control" id="pasta" name="pasta" [(ngModel)]="produto.pasta" placeholder="Informe a pasta do jogo">
+            </div>
 
-            <label for="foto">Foto</label>
-            <input type="text" class="form-control" name="foto" [(ngModel)]="produto.foto">
-            <br>
+            <div class="form-group">
+                <label for="foto">Foto</label>
+                <input type="text" class="form-control" id="foto" name="foto" [(ngModel)]="produto.foto" placeholder="Informe o nome da imagem ">
+            </div>
 
-            <label for="preco">Preço</label>
-            <input type="number" class="form-control" name="preco" [(ngModel)]="produto.preco">
-            <br>
+            <div class="form-group">
+                <label for="preco">Preço</label>
+                <input type="number" class="form-control" id="preco" name="preco" [(ngModel)]="produto.preco" placeholder="Informe o preço do jogo ">
+            </div>
 
-            <label for="desconto">Desconto</label>
-            <input type="number" class="form-control" name="desconto" [(ngModel)]="produto.desconto">
-            <br>
+            <div class="form-group">
+                <label for="desconto">Desconto</label>
+                <input type="number" class="form-control" id="desconto" name="desconto" [(ngModel)]="produto.desconto" placeholder="Informe o desconto em porcentagem">
+            </div>
             
             <button type="button" class="btn btn-primary mb-3" (click)="cadastrar()">Cadastrar</button>
         </form>