Add label to form

PolianaRufatto · Jun 10, 2020 · f9e4672 · f9e4672
1 parent e843f42
commit f9e4672
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 8 deletions.
diff --git a/src/components/Newsletter/index.js b/src/components/Newsletter/index.js
@@ -44,12 +44,16 @@ const Newsletter = () => {
                     })
                   }}
                 >
-                  <input
-                    type="email"
-                    ref={emailRef}
-                    placeholder="quero@evoluir.dev"
-                  />
-                  <input type="submit" value="Me avise!" />
+                  <div>
+                    <S.Label htmlFor="email">E-mail:</S.Label>
+                    <input
+                      id="email"
+                      type="email"
+                      ref={emailRef}
+                      placeholder="quero@evoluir.dev"
+                    />
+                  </div>
+                  <button type="submit">Me avise!</button>
                 </S.Form>
               )
           }

diff --git a/src/components/Newsletter/styles.js b/src/components/Newsletter/styles.js
@@ -24,15 +24,16 @@ export const Form = styled.form`
       font-family: ${theme.font.family};
       font-size: ${theme.font.sizes.xsmall};
       border-radius: ${theme.border.radius};
-      padding: 1.2rem;
+      padding: 1.4rem;
       background: #ececec;
+      width: 100%;
 
       &:focus {
         outline-color: ${theme.colors.primary};
       }
     }
 
-    input[type='submit'] {
+    button[type='submit'] {
       font-family: ${theme.font.family};
       cursor: pointer;
       background: ${theme.colors.primary};
@@ -53,6 +54,15 @@ export const Form = styled.form`
   `}
 `
 
+export const Label = styled.label`
+  position: absolute;
+  width: 0;
+  height: 0;
+  margin: 0;
+  padding: 0;
+  opacity: 0;
+`
+
 export const Thanks = styled.p`
   ${({ theme }) => css`
     color: ${theme.colors.texts};