From 6088b6dfa234f0992186de9692d77612e8f19511 Mon Sep 17 00:00:00 2001
From: Giovanni Marcon <78059243+gmarcon83@users.noreply.github.com>
Date: Tue, 1 Jun 2021 23:13:43 -0300
Subject: [PATCH] Ajustes Estilo

---
 .../my-form2/src/app/app.component.css             |  5 ++---
 .../my-form2/src/app/app.component.html            |  8 ++++----
 .../my-form2/src/app/app.component.ts              |  5 +++--
 .../custom-input-button.component.css              | 10 +++++-----
 .../app/custom-input/custom-input.component.css    | 11 ++++++-----
 Angular Dia 01 - Intro/my-form2/src/styles.css     | 14 ++++++++++----
 6 files changed, 30 insertions(+), 23 deletions(-)

diff --git a/Angular Dia 01 - Intro/my-form2/src/app/app.component.css b/Angular Dia 01 - Intro/my-form2/src/app/app.component.css
index a40c05c..a804200 100644
--- a/Angular Dia 01 - Intro/my-form2/src/app/app.component.css	
+++ b/Angular Dia 01 - Intro/my-form2/src/app/app.component.css	
@@ -10,15 +10,14 @@
 }
 
 .container form {
-  border: 2px solid black;
+  border: 3px solid black;
   width: 35rem;
-  border-radius: 0.5rem;
   display: flex;
   flex-direction: column;
 }
 
 .form-title {
-  border-bottom: 2px solid black;
+  border-bottom: 3px solid black;
   text-align: center;
   padding: 1rem 0;
   margin: 0;
diff --git a/Angular Dia 01 - Intro/my-form2/src/app/app.component.html b/Angular Dia 01 - Intro/my-form2/src/app/app.component.html
index d6a8569..b81f2bc 100644
--- a/Angular Dia 01 - Intro/my-form2/src/app/app.component.html	
+++ b/Angular Dia 01 - Intro/my-form2/src/app/app.component.html	
@@ -1,9 +1,9 @@
 <div class="container">
   <form action="">
-    <h1 class="form-title">Formulário 2</h1>
-    <custom-input [nome]="inputNome" [tipo]="inputTexto"></custom-input>
-    <custom-input [nome]="inputEmail" [tipo]="inputTexto"></custom-input>
-    <custom-input [nome]="inputSenha" [tipo]="inputPassword"></custom-input>
+    <h1 class="form-title">Formulário</h1>
+    <custom-input [nome]="inputNome" [tipo]="inputTipoTexto"></custom-input>
+    <custom-input [nome]="inputEmail" [tipo]="inputTipoEmail"></custom-input>
+    <custom-input [nome]="inputSenha" [tipo]="inputTipoSenha"></custom-input>
     <custom-input-button></custom-input-button>
   </form>
 </div>
\ No newline at end of file
diff --git a/Angular Dia 01 - Intro/my-form2/src/app/app.component.ts b/Angular Dia 01 - Intro/my-form2/src/app/app.component.ts
index 3b9403e..8bc47bc 100644
--- a/Angular Dia 01 - Intro/my-form2/src/app/app.component.ts	
+++ b/Angular Dia 01 - Intro/my-form2/src/app/app.component.ts	
@@ -10,6 +10,7 @@ export class AppComponent {
   inputNome = 'Nome Completo';
   inputEmail = 'Email';
   inputSenha = 'Senha';
-  inputTexto = 'text';
-  inputPassword = 'password';
+  inputTipoTexto = 'text';
+  inputTipoEmail = 'email';
+  inputTipoSenha = 'password';
 }
diff --git a/Angular Dia 01 - Intro/my-form2/src/app/custom-input-button/custom-input-button.component.css b/Angular Dia 01 - Intro/my-form2/src/app/custom-input-button/custom-input-button.component.css
index 393527b..8d45ffb 100644
--- a/Angular Dia 01 - Intro/my-form2/src/app/custom-input-button/custom-input-button.component.css	
+++ b/Angular Dia 01 - Intro/my-form2/src/app/custom-input-button/custom-input-button.component.css	
@@ -1,18 +1,18 @@
 .custom-input-button {
   width: 40%;
   padding: 0.5rem;
-  margin: 0.5rem auto 1rem;
+  margin: 1rem auto;
   display: block;
   border: 0;
   color: black;
-  font-family: "fira code";
-  font-weight: 500;
-  border: 2px solid black;
+  font-family: "press start 2p";
+  border: 3px solid black;
   background-color: transparent;
 }
 
 .custom-input-button:hover {
-  background-color: sienna;
   cursor: pointer;
   outline: none;
+  color: white;
+  background-color: black;
 }
diff --git a/Angular Dia 01 - Intro/my-form2/src/app/custom-input/custom-input.component.css b/Angular Dia 01 - Intro/my-form2/src/app/custom-input/custom-input.component.css
index d14206f..072b62e 100644
--- a/Angular Dia 01 - Intro/my-form2/src/app/custom-input/custom-input.component.css	
+++ b/Angular Dia 01 - Intro/my-form2/src/app/custom-input/custom-input.component.css	
@@ -1,21 +1,22 @@
 .custom-input-group {
   display: flex;
   flex-direction: column;
-  padding: 0.5rem 1rem;
+  padding: 1.5rem 1rem 0;
 }
 
 .custom-input {
+  font-family: "press start 2p";
   margin: 0;
   padding: 0%;
   box-sizing: border-box;
   width: 100%;
-  padding: 0.25rem 0;
-  font-size: 1.2rem;
+  padding: 0.5rem 0 0.25rem;
+  font-size: 1rem;
   border: 0;
-  border-bottom: 2px solid black;
+  border-bottom: 3px solid black;
 }
 
 .custom-input:focus {
   outline: none;
-  border-bottom: 2px solid sienna;
+  border-bottom: 3px dotted black;
 }
diff --git a/Angular Dia 01 - Intro/my-form2/src/styles.css b/Angular Dia 01 - Intro/my-form2/src/styles.css
index 50fcff3..fbe9a13 100644
--- a/Angular Dia 01 - Intro/my-form2/src/styles.css	
+++ b/Angular Dia 01 - Intro/my-form2/src/styles.css	
@@ -1,13 +1,19 @@
-@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap");
+
 html {
   font-size: 16px;
-  font-family: "fira code";
-  font-weight: 500;
+  font-family: "press start 2p";
+  font-weight: 400;
 }
 
 body {
   margin: 0;
   padding: 0;
-  box-sizing: border-box;
   min-height: 100vh;
 }
+
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+}