From e9d8204f707eb5fe0e05093b4cd405439fcc5a15 Mon Sep 17 00:00:00 2001
From: Douglas Marcelino <33377432+TheeDouglasAM3@users.noreply.github.com>
Date: Wed, 27 Jan 2021 15:17:34 -0300
Subject: [PATCH] Update css button and input in index page

---
 pages/_app.js  | 10 ++++++++++
 pages/index.js | 41 ++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 50 insertions(+), 1 deletion(-)

diff --git a/pages/_app.js b/pages/_app.js
index 2821026..c978282 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -27,6 +27,16 @@ const GlobalStyle = createGlobalStyle`
     display: flex;
     flex-direction: column;
   }
+  ::placeholder {
+    color: ${({ theme }) => theme.colors.contrastText};
+    opacity: 1; /* Firefox */
+  }
+  :-ms-input-placeholder { /* Internet Explorer 10-11 */
+    color: ${({ theme }) => theme.colors.contrastText};
+  }
+  ::-ms-input-placeholder { /* Microsoft Edge */
+    color: ${({ theme }) => theme.colors.contrastText};
+  }
 `
 
 const { theme } = db
diff --git a/pages/index.js b/pages/index.js
index 208d345..77b31f7 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -12,12 +12,51 @@ import GitHubCorner from '../src/components/GitHubCorner'
 export const QuizContainer = styled.div`
   width: 100%;
   max-width: 350px;
-  padding-top: 45px;
+  padding-top: 15px;
   margin: auto 10%;
   @media screen and (max-width: 500px) {
     margin: auto;
     padding-top: 15px;
   }
+
+  form {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+  }
+
+  form > input {
+    color: ${db.theme.colors.contrastText};
+    border: 1px solid ${db.theme.colors.contrastText};
+    border-radius: 3.5px;
+    background: none;
+    width: 100%;
+    padding: 10px 0px 10px 10px;
+    margin-bottom: 10px;
+    font-family: Lato;
+  }
+
+  form > button {
+    background: ${db.theme.colors.primary};
+    color: ${db.theme.colors.contrastText};
+    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 2px rgba(0, 0, 0, 0.24);
+    border-radius: 4px;
+    width: 100%;
+    padding: 10px 0px 10px 0px;
+    font-family: Lato;
+    text-transform: uppercase;
+    cursor: pointer;
+    font-weight: 400;
+  }
+
+  form > button:hover {
+    background: ${db.theme.colors.primary}DD;
+  }
+
+  form > button:disabled{
+    background: ${db.theme.colors.mainBg};
+    cursor: not-allowed;
+  }
 `
 
 export default function Home() {