removing css and working on form screen

package.json

@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
+    "react-input-mask": "^2.0.4",
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
     "styled-components": "^5.3.5",

src/assets/index.js

@@ -1,2 +1,3 @@
-export { default as Backg } from './backg.png';
-export { default as Close } from './icon/close.svg';
+export { default as Backg } from "./backg.png";
+export { default as Close } from "./icon/close.svg";
+export { default as Drop } from "./icon/drop.svg";

src/components/Background/styles.js

@@ -4,21 +4,32 @@ import Img from "../../assets/US001.png";
 import { colors } from '../../styles/Theme';
 
 export const ContainerImg = styled.div`
+    position: relative;
   width: 100%;
   display: flex;
   justify-content: space-around;
 `;
 
 export const BackgIa = styled.div`
   width: 650px;
-  height: 850px;
+  height: 832px;
   background-size: cover;
   background-image: url(${Img});
   position: absolute;
+  right: 180px;
   bottom: 0;
+
   @media (max-width: 1440px) {
     width: 610px;
     height: 800px;
+    right: 80px;
+  }
+
+  @media (max-width: 1240px) {
+    right: 0;
+    width: 33.125rem;
+    height: 43.563rem;
+    /* width: 500px; */
   }
 `;
 

src/components/BoxBalloon/styles.js

@@ -28,6 +28,10 @@ export const Box = styled.div`
   @media (max-width: 1440px) {
     width: 55.5vh;
   }
+
+  @media (max-width: 1124px) {
+    width: 90%;
+  }
 `;
 
 export const BoxVi = styled.div`

src/components/Buttons/BtnCadastro/index.js

@@ -5,9 +5,17 @@ import { useNavigate } from "react-router-dom";
 import styled from "styled-components";
 
 const ContainerBtn = styled.div`
-  width: 41rem;
+  width: 61.5vh; /*mesmo do boxBallon */
   margin-top: 2rem;
   display: flex;
+
+  @media (max-width: 1440px) {
+    width: 55.5vh;
+  }
+
+  @media (max-width: 1124px) {
+    width: 90%;
+  }
 `;
 
 const BoxButton = styled.div`
@@ -36,7 +44,6 @@ export default function BtnCadastro() {
   const navigate = useNavigate();
 
   const handleClick = () => {
-    console.log("handleClick");
     navigate("/cadastro-da-organizacao");
   };
 

src/components/Buttons/BtnProx/BtnProx.js

@@ -1,13 +1,13 @@
 import React from 'react'
-import './BtnProx.css'
 
-const BtnProx = () =>{
-    return(
-        <>
-            <a href="#"><button id="enviar">Próximo</button></a>
-        </>
-    );
+import * as S from "./styles";
 
+const BtnProx = ({ onClick }) => {
+  return (
+
+    <S.BtnProx button onClick={onClick}>Próximo</S.BtnProx>
+
+  );
 }
 
 export default BtnProx;

src/components/Buttons/BtnProx/BtnProx.css → src/components/Buttons/BtnProx/styles.js

@@ -1,19 +1,16 @@
-a{
-    text-decoration: none;
-}
+import styled from "styled-components";
 
-#enviar{
-    width: 9em;
+export const BtnProx = styled.button `
+
+width: 9em;
     padding: 15px 0;
     background: #2C5FA1;
     color:#ffffff;
     font-size: 20px;
-    font-weight:530;
+    font-weight: 700;
     letter-spacing: 2.5px;
     border:none;
     border-radius: 25px;
     cursor:pointer;
     text-transform: uppercase;
-}
-
-
+`

src/components/Buttons/index.js

@@ -0,0 +1,11 @@
+import React from 'react'
+
+import * as S from "./styles";
+
+const BtnProx = ({ onClick }) => {
+  return (
+    <S.Button id="enviar" onClick={onClick}>Próximo</S.Button>
+  );
+}
+
+export default BtnProx;

src/components/Buttons/styles.js

@@ -0,0 +1,14 @@
+import styled from "styled-components";
+import { colors } from '../../styles/Theme';
+
+export const Button = styled.button`
+  margin-bottom: 10px;
+  width: 100%;
+  height: auto;
+  display: flex;
+  justify-content: center;
+  /* margin-top: -5rem; */
+  align-items: center;
+  flex-direction: column;
+  color: ${colors.black};
+`;

src/components/Header/index.js

@@ -15,9 +15,9 @@ const Header = () => {
 
   return (
     <S.HeaderContainer>
-      <S.ContentBtnBack>
+      <S.ContentBtnBack onClick={handleGoBack}>
         <S.IconBack alt="Seta" src={Seta}/>
-        <S.Btn type="button" onClick={handleGoBack}>
+        <S.Btn type="button">
           Voltar
         </S.Btn>
       </S.ContentBtnBack>

src/components/Header/styles.js

@@ -15,6 +15,7 @@ export const ContentBtnBack = styled.div`
 
 export const IconBack = styled.img`
   width: 20px;
+  cursor: pointer;
 `;
 
 export const Btn = styled.button`

src/components/Inputs/input/Input.css

@@ -2,23 +2,34 @@
     color: black;
   }
 
-#InputText{
+#InputText2::placeholder {
+    color: black;
+}  
+
+#InputText3::placeholder {
+    color: black;
+}  
+
+#InputText, #InputText2, #InputText3{
     font-family: "Montserrat", sans-serif;
     border: 0;
-    width: 20rem;
+    width: 23rem;
     outline: 0;
     font-size: 1.2rem;
     letter-spacing: 1px;
     padding: 2px 0;
     background: transparent;
     font-weight: 540;
+    border-bottom: 2.5px solid #C4C4C4;
+    outline: 0;
 }
 
+#InputText2{
+    width: 15rem;
+}
 
-
-#InputText:focus{
-    box-shadow: 0 0 0 0;
-    border: 0 none;
-    outline: 0;
+#InputText3{
+    width: 25rem;
 }
 
+