Final Form

ipti · Sep 27, 2023 · ad4a604 · ad4a604
1 parent 9478d51
commit ad4a604
Show file tree

Hide file tree

Showing 22 changed files with 267 additions and 658 deletions.
diff --git a/src/Components/Calculator/index.tsx b/src/Components/Calculator/index.tsx
diff --git a/src/Components/Calculator/style.ts b/src/Components/Calculator/style.ts
diff --git a/src/Components/ErrorMessage/style.ts b/src/Components/ErrorMessage/style.ts
@@ -13,16 +13,19 @@ export const ErrorMessageContainer = styled.div<{ type?: "error" | "confirmation
     p {
       color: red;
       padding: 10px;
-      background-color: #f8d7da;
       border-color:#f5c6cb
       width: 100%;
       border-radius:3%;
       text-align: center;
       
 
-    //   @media only screen and (max-width: 1070px) {
-    //     margin-right: 70px;
-    //  }
+      @media only screen and (max-width: 1070px) {
+        margin-right: 70px;
+     }
+     
+     @media only screen and (max-width: 700px) {
+      text-align: center;
+   }
     }
   `}
 

diff --git a/src/Components/Feedback/index.tsx b/src/Components/Feedback/index.tsx
@@ -14,7 +14,7 @@ import {
     Title,
     Title2,
 } from "./style";
-
+import { useLocation } from "react-router-dom";
 import ButtonCalculator from "../Buttons/ButtonsCalculator";
 import ButtonsNextProx from "../Buttons/ButtonsNextProx";
 
@@ -50,6 +50,9 @@ const Feedback: React.FC = () => {
     const nome_but = "Próximo Mundo";
     const navigate = useNavigate();
 
+    const location = useLocation();
+    const { nome } = location.state || {};
+
     const [errorMessage, setErrorMessage] = useState<string | null>(null);
     const [messageType, setMessageType] = useState("error"); // Inicialize com "error" como valor padrão
 
@@ -212,19 +215,16 @@ const Feedback: React.FC = () => {
 
     const handleSubmit = () => {
         if (
-            questionTwentyFive !== undefined &&
+            questionTwentyFive !== undefined ||
             questionTwentySix !== undefined
         ) {
-            // alert("Enviando " + questionOne + ", " + questionTwo);
             setErrorMessage("Respostas enviadas com sucesso!");
             setMessageType("confirmation");
-            // navigate("/tasks");
-
 
             setTimeout(() => {
                 const questionsData = getAllQuestions();
-                navigate("/tasks", { state: { questions: questionsData } });
-            }, 3000); // 2000 milissegundos (2 segundos)
+                navigate("/tasks", { state: { nome, questions: questionsData } });
+            }, 2000); // 2000 milissegundos (2 segundos)
         } else {
             setMessageType("error");
             setErrorMessage("Por favor, preencha todos os campos antes de avançar.");
@@ -280,9 +280,8 @@ const Feedback: React.FC = () => {
 
     return (
         <Container>
-            {/* <Padding padding="32px" /> */}
             <Row style={{ justifyContent: "center" }}>
-                <Title>Autoavaliação</Title>
+                <Title>Autoavaliação </Title>
             </Row>
             <Padding padding="32px" />
             <Sheet>
@@ -319,11 +318,6 @@ const Feedback: React.FC = () => {
                                     })()}
                                 </Title>
                             </Row>
-                            {/* <Padding padding="16px" /> */}
-
-                            {/* <Activity questions={getAllQuestions()} /> */}
-
-
                             {step === 1 && (
                                 <>
                                     <Note
@@ -506,7 +500,6 @@ const Feedback: React.FC = () => {
 
                             <Row id="center">
 
-                                {/* <ErrorMessage errorMessage={errorMessage} type="error" /> */}
                                 <ErrorMessage errorMessage={errorMessage} type={messageType as "error" | "confirmation"} />
 
 

diff --git a/src/Components/Feedback/style.ts b/src/Components/Feedback/style.ts
@@ -1,7 +1,8 @@
 import { styled } from "styled-components";
 import backgroundBody2 from "../../assets/images/SubtractAutoAvaliacao.png";
+import backgroundLogin from "../../assets/images/SubtractLogin.png";
 import styles from "../../Style";
-
+import frontImg from "../../assets/images/SubtractTop.png"
 
 export const Sheet = styled.div`
     border-radius: 49px;
@@ -19,13 +20,48 @@ export const Sheet = styled.div`
     }
 `;
 
+
+export const SheetLogin = styled.div`
+    border-radius: 49px;
+    background: url(${backgroundLogin});
+    background-repeat: no-repeat;
+    // height: 30vw;
+    height: 50vw;
+    margin: auto;
+    width: 50%;
+    background-size: 100%;
+    object-fit: cover;
+
+    @media only screen and (max-width: 1050px) {
+    background: #f8fae4;
+       width: 50%;
+       height: auto;
+    }
+
+    @media only screen and (max-width: 750px) {
+           width: auto;
+           margin: 0px 20px;
+        }
+
+    // &::before {
+    //     content: '';
+    //     position: absolute;
+    //     top: 0;
+    //     left: 0;
+    //     width: 100%;
+    //     height: 10px;
+    //     background: url(${frontImg});
+        
+    // }
+`;
+
+
 export const Title = styled.div`
     font-family: ${styles.typography.types.daleRegular};
     color: #4F5683;
     font-size: 45.022px;
     font-style: normal;
     font-weight: 400;
-    // line-height: 42.766px; /* 75% */
     letter-spacing: 0.285px;
 
     @media only screen and (max-width: 1100px) {
@@ -54,8 +90,31 @@ export const Title2 = styled.div`
        font-size: 22px;
     }
 `;
+export const Title3 = styled.div`
+    font-family: ${styles.typography.types.daleRegular};
+    color: #4F5683;
+    font-size: 25.022px;
+    font-style: normal;
+    font-weight: 400;
+    letter-spacing: 0.285px;
+    margin-left: 30px;
+    margin-top: 50px;
+
+
+
+    @media only screen and (max-width: 1444px) {
+        margin-top: 20px;
+     }
 
 
+    @media only screen and (max-width: 1100px) {
+       display: flex;
+       flex-direction: column;
+       font-size: 22px;
+       margin-top: 0px;
+    }
+`;
+
 
 export const Container = styled.div`
     height: auto;