Adicionando toat a tela de importar dados

Co-authored-by: yaskisoba <[email protected]>

frontend/src/pages/CreateEletivas/index.js

@@ -240,8 +240,6 @@ const CreateEletivas = () => {
 
               <ButtonCadastrar Text="Cadastrar" onClick={formik.handleSubmit}></ButtonCadastrar>              </Center>
 
-
-
             </FormControl>
           </Box>
 
@@ -250,7 +248,6 @@ const CreateEletivas = () => {
         </Flex>
     </ChakraProvider>
 
-
   );
 };
 

frontend/src/pages/SendStudents/index.js

@@ -1,81 +1,95 @@
 import React, { useState } from 'react';
 import axios from 'axios';
-import { Container, Flex, Box, Text, Button, Input, Center } from "@chakra-ui/react";
+import { Container, Flex, Box, Text, Button, Input, Center, useToast } from "@chakra-ui/react";
 import Header from "../../components/Header/index.js";
 import Footer from "../../components/Footer/index.js";
 import { ChakraProvider } from "@chakra-ui/react";
 import { Link } from "react-router-dom";
 
 const SendStudent = () => {
-    
-    const [selectedFile, setSelectedFile] = useState(null);
+  const [selectedFile, setSelectedFile] = useState(null);
+  const toast = useToast();
 
-    const handleFileChange = (event) => {
-        setSelectedFile(event.target.files[0]);
-    }
+  const handleFileChange = (event) => {
+    setSelectedFile(event.target.files[0]);
+  }
 
-    const handleUpload = () => {
-        const formData = new FormData();
-        formData.append('arquivo', selectedFile);
+  const handleUpload = () => {
+    const formData = new FormData();
+    formData.append('arquivo', selectedFile);
 
-        axios.post('http://localhost:3001/send-file/extract-students', formData)
-        .then(response => {
-            console.log('Resposta do servidor:', response.data);
-        })
-        .catch(error => {
-            console.error('Erro ao enviar arquivo:', error);
-        })
-    }
+    axios.post('http://localhost:3001/send-file/extract-students', formData)
+      .then(response => {
+        console.log('Resposta do servidor:', response.data);
+        // Exibir Toast de confirmação
+        toast({
+          title: "Arquivo enviado com sucesso!",
+          status: "success",
+          duration: 3000,
+          isClosable: true,
+        });
+      })
+      .catch(error => {
+        console.error('Erro ao enviar arquivo:', error);
+        // Exibir Toast de erro, se necessário
+        toast({
+          title: "Erro ao enviar arquivo",
+          status: "error",
+          duration: 3000,
+          isClosable: true,
+        });
+      })
+  }
 
   return (
     <ChakraProvider>
       <Flex direction="column" minH="100vh">
         <Header />
         <Container flex="1">
           <Center>
-          <Box
-            bg="#red"
-            borderRadius="30px"
-            p="4"
-            mt="8"
-            w="100%"
-            maxW="400px"
-            textAlign="center"
-          >
-            <Text color="#243A69" fontWeight="bold" fontSize="xl" mb="4">
-              Importar dados
-            </Text>
-            <Input
-              type="file"
-              onChange={handleFileChange}
-              display="none"
-              id="fileInput"
-            />
-            <label htmlFor="fileInput">
+            <Box
+              backgroundColor='#F4F4F2'
+              borderRadius="30px"
+              p="4"
+              mt="8"
+              w="100%"
+              maxW="400px"
+              textAlign="center"
+            >
+              <Text color="#243A69" fontWeight="bold" fontSize="xl" mb="4">
+                Importar dados
+              </Text>
+              <Input
+                type="file"
+                onChange={handleFileChange}
+                display="none"
+                id="fileInput"
+              />
+              <label htmlFor="fileInput">
+                <Button
+                  as="span"
+                  bg="#D2D2D2"
+                  color="#243A69"
+                  borderRadius="6px"
+                  p="2"
+                  cursor="pointer"
+                  _hover={{ bg: "#C4C4C4" }}
+                >
+                  Selecionar arquivo
+                </Button>
+              </label>
               <Button
-                as="span"
-                bg="#D2D2D2"
-                color="#243A69"
-                borderRadius="6px"
+                onClick={handleUpload}
+                bg="#243A69"
+                color="#FFFFFF"
+                borderRadius="10px"
                 p="2"
-                cursor="pointer"
-                _hover={{ bg: "#C4C4C4" }}
+                mt="4"
+                _hover={{ bg: "#1B2D4A" }}
               >
-                Selecionar arquivo
+                Enviar arquivo
               </Button>
-            </label>
-            <Button
-              onClick={handleUpload}
-              bg="#243A69"
-              color="#FFFFFF"
-              borderRadius="10px"
-              p="2"
-              mt="4"
-              _hover={{ bg: "#1B2D4A" }}
-            >
-              Enviar arquivo
-            </Button>
-          </Box>
+            </Box>
           </Center>
         </Container>
         <Footer />

frontend/src/styles/global.js

@@ -6,7 +6,7 @@ const GlobalStyle = createGlobalStyle`
     margin: 0;
     padding: 0;
     box-sizing: border-box;
-    border: 1px solid hotpink;
+    //border: 1px solid hotpink;
   }
 
   body {