ajustes finos layout

AdrienneMota · Oct 10, 2022 · 9c8654c · 9c8654c · vercel · Oct 10, 2022
1 parent 9887f2f
commit 9c8654c
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 15 deletions.
diff --git a/src/Components/App.js b/src/Components/App.js
@@ -27,5 +27,5 @@ export default function App() {
 const PageMain = styled.div`
     width: 375px;
     height: 100%;
-    background-color: #FFEFD5;
+    background-color: white;
 `
diff --git a/src/Components/Header.js b/src/Components/Header.js
@@ -9,7 +9,7 @@ export default function Header(){
 }
 
 const NameApp = styled.div`
-    width: 375px;
+    width: 100%;
     height: 67px;
     position: fixed;
     top: 0;

diff --git a/src/Components/Seats.js b/src/Components/Seats.js
@@ -50,7 +50,7 @@ export default function Seats() {
         const promisse = axios.post("https://mock-api.driven.com.br/api/v5/cineflex/seats/book-many", body)
 
         promisse.then(() => {
-            navegate("/sucess", {state: nameClient, cpf, title, time, day, nameSeat}) 
+            navegate("/sucess", {state: {nameClient, cpf, title, time, day, nameSeat}}) 
         })
 
 
@@ -87,20 +87,23 @@ export default function Seats() {
             <InfostoBuy>
                 <form onSubmit={SubmitForm}>
                     <label htmlFor="Name">Nome</label>
+                    <br/>
                     <input 
                         type="text" 
                         onChange={(e) => setNameclient(e.target.value)}
                         value={nameClient}
                         required
                     />
-                    <br />
+                    <br/>
                     <label htmlFor="Name">Cpf</label>
+                    <br/>
                     <input 
                         type="text" 
                         onChange={(e) => setCpf(e.target.value)}
                         value={cpf}
                         required    
                     />
+                    <br/>
                     <button>Reservar assento</button>
                 </form>
             </InfostoBuy>
@@ -127,8 +130,9 @@ const SelectSeat = styled.div`
     }
 `
 const ConteinerSeat = styled.div`
-    border: 1px solid green;
-    margin: 0px 24px 16px 24px;
+    /* border: 1px solid green; */
+    margin-left: 24px;
+    margin-bottom: 20px;
     display: flex;
     flex-wrap: wrap;    
 `
@@ -151,15 +155,33 @@ const StatusSeat = styled.div`
     }
 `
 const InfostoBuy = styled.div`
-    width: 375px;
+    width: 100%;
     margin-left: 24px;
     margin-top: 41px;
+    margin-bottom: 200px;
+    font-size: 18px;
+    input{
+        width: 327px;
+        height: 45px;
+        margin: 15px;
+        border: 1px solid #AFAFAF;
+    }
+    button{
+        width: 225px;
+        height: 42px;
+        color: white;
+        background-color: #E8833A;
+        border: none;
+        margin-left: 70px;
+        margin-top: 15px;
+        font-size: 18px;
+    }
 `
 const Footer = styled.div`
     position: fixed;
     bottom: 0;
     left: 0;
-    width: 375px;
+    width: 100%;
     height: 117px;
     display: flex;
     align-items: center;

diff --git a/src/Components/Sessions.js b/src/Components/Sessions.js
@@ -22,31 +22,37 @@ export default function Sessions() {
     }, [])
 
     return (
-        <>
+        <Conteiner>
             <SelectTime>
                 <p>Selecione o horário</p>
             </SelectTime>
                 {
                     film?.days?.map((d) => 
                     <ConteinerSession key={d.id}>
                     <div className="weekday">{d.weekday} - {d.date}</div>
+                    <div className="containertime">
                     {
                         d.showtimes.map((t)=>
                             <Link to={`/seats/${t.id}`}>
                                 <div className="times">{t.name}</div>
                             </Link>
                         )
                     }
+                    </div>
                     </ConteinerSession>
                 )} 
             <Footer>
                 <img src={film.posterURL} alt="imagem do filme" />
                 <p>{film.title}</p>
             </Footer>
-        </>
+        </Conteiner>
     )
 }
 
+const Conteiner = styled.div`
+    width: 375px;
+    margin-bottom: 125px;
+`
 const SelectTime = styled.div`
     width: 374px;
     height: 110px;
@@ -61,7 +67,11 @@ const SelectTime = styled.div`
 const ConteinerSession = styled.div`
     font-size: 20px;
     margin-left: 24px;
-    width: 375px;
+    width: 375px; 
+    .containertime{
+        display: flex;
+        margin-bottom: 15px;
+    }
     .weekday{
         font-size: 20px;
     }
@@ -81,7 +91,7 @@ const Footer = styled.div`
     position: fixed;
     bottom: 0;
     left: 0;
-    width: 375px;
+    width: 100%;
     height: 117px;
     display: flex;
     align-items: center;

diff --git a/src/Components/Sucess.js b/src/Components/Sucess.js
@@ -28,7 +28,7 @@ export default function Sucess(){
             </div>            
         </DefaultSucess>
         <Link to="/">
-                <button>Voltar para o início</button>
+            <Button>Voltar para o início</Button>
         </Link>
         </>
     )
@@ -46,14 +46,24 @@ const SucessMsg = styled.div`
         font-size: 24px;
     }
 `
-const DefaultSucess = styled.p`
+const DefaultSucess = styled.div`
     margin-left: 28px;
     font-size: 22px;
     div{
         width: 374px;
         height: 110px;
     }
     p{
-        margin-bottom: 8px;
+        margin: 8px;
     }
 `
+const Button = styled.button`
+        width: 225px;
+        height: 42px;
+        color: white;
+        background-color: #E8833A;
+        border: none;
+        margin-left: 70px;
+        margin-top: 15px;
+        font-size: 18px;
+`