♻️ modified button sendMessage

leksansilva · May 28, 2023 · 6d55c84 · 6d55c84
1 parent 410bc49
commit 6d55c84
Show file tree

Hide file tree

Showing 9 changed files with 162 additions and 79 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -5,7 +5,6 @@
     "@testing-library/react": "^12.1.5",
     "@testing-library/user-event": "^13.5.0",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2",
     "react-icons": "^4.8.0",
     "react-responsive-carousel": "^3.2.23",
     "react-scripts": "5.0.0",

diff --git a/src/App.jsx b/src/App.jsx
@@ -4,6 +4,7 @@ import styled, { css, ThemeProvider } from "styled-components";
 import theme from "./styles/theme";
 
 import About from "./components/About";
+import AboutMe from "./components/AboutMe";
 import Contact from "./components/Contact";
 import Intro from "./components/Intro";
 import Navbar from "./components/Navbar";
@@ -40,34 +41,6 @@ const IntroShape = styled.div`
   background-color: ${({ theme }) => theme.color.shadow.secondary};
 `;
 
-const IntroShapeContainer = styled.div`
-  display: flex;
-  justify-content: center;
-  height: 100%;
-  padding: 20px;
-  font-size: 24px;
-  width: 50%;
-  gap: 10px;
-  .quote {
-    margin-top: 20px;
-    font-style: italic;
-    font-weight: 300;
-  }
-  .click-me {
-    margin-top: 20px;
-    span {
-      border: solid 1px white;
-      padding: 10px 15px;
-      background-color: #4da6ff;
-      font-weight: bold;
-      border-radius: 10px;
-      color: white;
-    }
-  }
-  flex-direction: column;
-  color: white;
-`;
-
 const AboutShape = styled.div`
   ${Shape}
   clip-path: polygon(0 0, 48% 0, 30% 100%, 0 100%);
@@ -114,17 +87,6 @@ const App = () => {
     element.scrollIntoView();
     setActiveMenuItem(id);
   };
-  const yearsOld = () => {
-    if (new Date().getMonth() < new Date("2000-06-15T03:24:00").getMonth())
-      return (
-        new Date().getFullYear() -
-        new Date("2000-06-15T03:24:00").getFullYear() -
-        1
-      );
-    return (
-      new Date().getFullYear() - new Date("2000-06-15T03:24:00").getFullYear()
-    );
-  };
 
   window.addEventListener("scroll", toggleVisible);
 
@@ -138,18 +100,7 @@ const App = () => {
         />
         <Intro navigateTo={navigateTo} showMore={showMore} />
         <IntroShape showMore={showMore}>
-          <IntroShapeContainer>
-            <h1>Alex Santos da Silva, {yearsOld()} anos </h1>
-            <p>Salvador-BA</p>
-            <div className="quote">
-              "Pensamentos levam a sentimentos, sentimentos levam a ações e
-              ações levam a resultados"
-              <sub> - T. Harv Eker</sub>
-            </div>
-            <div className="click-me">
-              Clique no botão e saiba <span>MAIS SOBRE MIM</span>
-            </div>
-          </IntroShapeContainer>
+          <AboutMe />
         </IntroShape>
       </Container>
       <Container id="about">

diff --git a/src/components/AboutMe.jsx b/src/components/AboutMe.jsx
@@ -0,0 +1,61 @@
+import styled from "styled-components";
+
+const Container = styled.div`
+  display: flex;
+  justify-content: center;
+  height: 100%;
+  padding: 20px;
+  font-size: 24px;
+  width: 50%;
+  gap: 10px;
+  .quote {
+    margin-top: 20px;
+    font-style: italic;
+    font-weight: 300;
+  }
+  .click-me {
+    margin-top: 20px;
+    span {
+      border: solid 1px white;
+      padding: 10px 15px;
+      background-color: #4da6ff;
+      font-weight: bold;
+      border-radius: 10px;
+      color: white;
+    }
+  }
+  flex-direction: column;
+  color: white;
+`;
+const yearsOld = () => {
+  if (new Date().getMonth() < new Date("2000-06-15T03:24:00").getMonth())
+    return (
+      new Date().getFullYear() -
+      new Date("2000-06-15T03:24:00").getFullYear() -
+      1
+    );
+  return (
+    new Date().getFullYear() - new Date("2000-06-15T03:24:00").getFullYear()
+  );
+};
+
+const age = yearsOld();
+
+const AboutMe = () => {
+  return (
+    <Container>
+      <h1>Alex Santos da Silva, {age} anos </h1>
+      <p>Salvador-BA</p>
+      <div className="quote">
+        "Pensamentos levam a sentimentos, sentimentos levam a ações e ações
+        levam a resultados"
+        <sub> - T. Harv Eker</sub>
+      </div>
+      <div className="click-me">
+        Clique no botão e saiba <span>MAIS SOBRE MIM</span>
+      </div>
+    </Container>
+  );
+};
+
+export default AboutMe;
diff --git a/src/components/Contact.jsx b/src/components/Contact.jsx
@@ -1,6 +1,9 @@
 import { useState } from "react";
+import { AiOutlineLoading } from "react-icons/ai";
+import { BsCheckLg } from "react-icons/bs";
+import { IoMdSend } from "react-icons/io";
 import Reaptcha from "reaptcha";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import Business from "../assets/img/Business.png";
 
 const Container = styled.div`
@@ -32,7 +35,7 @@ const Title = styled.h1``;
 const Card = styled.div`
   height: max-content;
   margin: 20px auto;
-  width: 500px;
+  width: 550px;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -88,8 +91,9 @@ const FormControl = styled.div`
         color: ${({ theme }) => theme.color.main};
         top: -2px;
         font-size: 12px;
-        padding: 4px;
+        padding: 2px 4px;
         z-index: 2;
+        border-radius: 10px;
       }
     }
   }
@@ -99,14 +103,27 @@ const Button = styled.button`
   margin-top: auto;
   margin-left: auto;
   letter-spacing: 1.5px;
-  padding: 15px 25px;
-  background-color: #0059b3;
+  padding: 15px 30px;
+  width: 160px;
+  height: 50px;
+  background-color: ${({ theme }) => theme.color.main};
   font-weight: bold;
   border-radius: 10px;
-  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: ${({ theme }) => theme.color.text.secondary};
   border: none;
   cursor: pointer;
   outline: none;
+  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
+  ${({ theme, isValid }) =>
+    !isValid &&
+    css`
+      background-color: ${theme.color.text.secondary};
+      color: ${theme.color.main};
+      outline: 1px solid ${({ theme }) => theme.color.main};
+    `}
 `;
 
 const WrapperButtons = styled.div`
@@ -117,6 +134,44 @@ const WrapperButtons = styled.div`
   justify-content: space-between;
 `;
 
+const Loading = styled.div`
+  position: relative;
+  .step-1 {
+    animation: rotation 1s infinite linear;
+    position: relative;
+  }
+  .step-2 {
+    animation: rotation 1.5s infinite linear;
+    position: absolute;
+    z-index: 1;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
+  .step-3 {
+    animation: rotation 2s infinite linear;
+    position: absolute;
+    z-index: 1;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
+  @keyframes rotation {
+    0% {
+      transform: rotate(0);
+    }
+    50% {
+      opacity: 0.5;
+    }
+    100% {
+      transform: rotate(360deg);
+      opacity: 1;
+    }
+  }
+`;
+
 const initialValues = {
   name: {
     label: "Nome",
@@ -130,31 +185,39 @@ const initialValues = {
     w: 1 / 2,
     Input: (props) => <input {...props} />,
   },
-  phoneNumber: {
+  tel: {
     label: "Telefone",
     value: "",
     w: 1 / 2,
     Input: (props) => <input {...props} />,
   },
-  tel: {
+  description: {
     label: "Me diz o que você quer desenvolver",
     value: "",
     w: 1,
-    Input: (props) => <textarea style={{ height: "150px" }} {...props} />,
+    Input: (props) => (
+      <textarea style={{ height: "150px" }} {...props} minLength="25" />
+    ),
   },
 };
 
 const Contact = () => {
   const [values, setValues] = useState(initialValues);
   const [isValid, setIsvalid] = useState(false);
+  const [loading, settLoading] = useState(false);
+  const [itsSend, setItsSend] = useState(false);
 
   const onChangeValue = (ev) => {
     const { name, value } = ev.target;
     setValues({ ...values, [name]: { ...values[name], value } });
   };
 
-  const sendMessage = () => {};
-
+  const sendMessage = () => {
+    settLoading(true);
+    setItsSend(true);
+    console.log("opa");
+  };
+  console.log("opa", isValid);
   return (
     <Container>
       <Left>
@@ -192,8 +255,23 @@ const Contact = () => {
                   sitekey="6Lc4bEcmAAAAAObaTvnBbRpT9hJ1P8aj3iinUhMM"
                   onVerify={() => setIsvalid(true)}
                 />
-                <Button disabled={!isValid} onClick={sendMessage}>
-                  Enviar
+                <Button
+                  isValid={isValid}
+                  disabled={!isValid}
+                  onClick={sendMessage}
+                >
+                  {itsSend ? "Enviado" : loading ? "Enviando" : "Enviar"}
+                  {itsSend ? (
+                    <BsCheckLg size="15" />
+                  ) : loading ? (
+                    <Loading>
+                      <AiOutlineLoading className="step-1" size="15" />
+                      <AiOutlineLoading className="step-2" size="15" />
+                      <AiOutlineLoading className="step-3" size="15" />
+                    </Loading>
+                  ) : (
+                    <IoMdSend size="15" />
+                  )}
                 </Button>
               </WrapperButtons>
             </CardContent>

diff --git a/src/components/Intro.jsx b/src/components/Intro.jsx
@@ -106,11 +106,7 @@ const Intro = ({ navigateTo, showMore }) => {
             Styled Components
           </a>{" "}
           que permite a escrita de CSS em JavaScript usando Tagged Templates
-          Literals e o pacote{" "}
-          <a target="_blank" href="https://reactrouter.com/" rel="noreferrer">
-            React Router
-          </a>{" "}
-          que facilita a criação de várias páginas e a navegação no React.
+          Literals
         </Description>
         <Info>
           <Button onClick={() => navigateTo("portfolio")}>

diff --git a/src/components/TopButton.jsx b/src/components/TopButton.jsx
@@ -1,8 +1,8 @@
 import React, { useState } from "react";
 import styled from "styled-components";
 
-import { MdKeyboardArrowUp } from "react-icons/md";
 import { CgEditBlackPoint } from "react-icons/cg";
+import { MdKeyboardArrowUp } from "react-icons/md";
 import { valuesMenu } from "./Navbar";
 
 const Container = styled.div`
@@ -33,19 +33,16 @@ const MiniMenu = styled.span`
   width: 100%;
   height: 0;
   box-sizing: border-box;
-  background-color: white;
-  box-shadow: 1px 1px 3px gray;
+
   border-radius: 5px;
-  padding-right: 10px;
+  padding-right: 20px;
   transition: height 0.5s ease-in-out, padding 1s;
   ${({ hovering }) =>
     hovering &&
     `
-    padding:10px;
    height:8rem;  
 `};
   gap: 0.5em;
-  margin-bottom: 10px;
 `;
 
 const MenuItem = styled.span`