Update css button and input in index page

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

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() {