Button fixing

package.json

@@ -16,19 +16,21 @@
     "html2canvas": "^1.3.2",
     "qs": "^6.10.1",
     "react": "^17.0.2",
+    "react-credit-cards": "^0.8.3",
     "react-dom": "^17.0.2",
-    "react-icons": "^4.2.0",
+    "react-icons": "^4.4.0",
     "react-input-mask": "^2.0.4",
     "react-loader-spinner": "^4.0.0",
     "react-router-dom": "^6.3.0",
-    "react-scripts": "4.0.3",
+    "react-scripts": "^5.0.1",
     "react-shimmer-effect": "^1.0.9",
     "react-toastify": "^7.0.4",
     "react-useinterval": "^1.0.2",
     "styled-components": "^5.3.0",
     "web-vitals": "^1.1.2"
   },
   "scripts": {
+    "ssl-start": "react-scripts --openssl-legacy-provider start",
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",

src/App.js

@@ -1,9 +1,4 @@
-import {
-  BrowserRouter as Router,
-  Routes,
-  Route,
-  Navigate
-} from 'react-router-dom';
+import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
 import { ToastContainer } from 'react-toastify';
 
 import Countdown from './pages/Countdown';
@@ -15,6 +10,7 @@ import Payment from './pages/Dashboard/Payment';
 import Hotel from './pages/Dashboard/Hotel';
 import Activities from './pages/Dashboard/Activities';
 import Certificate from './pages/Dashboard/Certificate';
+import Callback from './pages/Callback';
 
 import { EventInfoProvider } from './contexts/EventInfoContext';
 import { UserProvider } from './contexts/UserContext';
@@ -32,7 +28,7 @@ export default function App() {
               <Route path="/" element={<Countdown />} />
               <Route path="/enroll" element={<Enroll />} />
               <Route path="/sign-in" element={<SignIn />} />
-
+              <Route path="/callback" element={<Callback />} />
               <Route
                 path="/dashboard"
                 element={
@@ -63,7 +59,5 @@ function ProtectedRouteGuard({ children }) {
     return <Navigate to="/sign-in" />;
   }
 
-  return <>
-    {children}
-  </>;
+  return <>{children}</>;
 }

src/components/Card.js

@@ -0,0 +1,119 @@
+import React from 'react';
+import Cards from 'react-credit-cards';
+import 'react-credit-cards/es/styles-compiled.css';
+import styled from 'styled-components';
+export default class PaymentForm extends React.Component {
+  state = {
+    cvc: '',
+    expiry: '',
+    focus: '',
+    name: '',
+    number: '',
+  };
+
+  handleInputFocus = (e) => {
+    this.setState({ focus: e.target.name });
+  };
+
+  handleInputChange = (e) => {
+    const { name, value } = e.target;
+
+    this.setState({ [name]: value });
+  };
+
+  render() {
+    return (
+      <div id="PaymentForm">
+        {' '}
+        <CardContainer>
+          <Cards
+            cvc={this.state.cvc}
+            expiry={this.state.expiry}
+            focused={this.state.focus}
+            name={this.state.name}
+            number={this.state.number}
+          />
+          <InputContainer>
+            <form>
+              <Input
+                type="tel"
+                name="number"
+                placeholder="Card Number"
+                onChange={this.handleInputChange}
+                onFocus={this.handleInputFocus}
+              />
+              <Input
+                type="text"
+                name="name"
+                placeholder="Name"
+                onChange={this.handleInputChange}
+                onFocus={this.handleInputFocus}
+              />
+              <Input
+                type="tel"
+                name="expiry"
+                placeholder="Valid Thru"
+                onChange={this.handleInputChange}
+                onFocus={this.handleInputFocus}
+              />
+              <Input
+                type="tel"
+                name="cvc"
+                placeholder="CVC"
+                onChange={this.handleInputChange}
+                onFocus={this.handleInputFocus}
+              />
+            </form>
+          </InputContainer>{' '}
+        </CardContainer>
+      </div>
+    );
+  }
+}
+
+//********** Styled Components
+const CardContainer = styled.div`
+  width: 100%;
+  box-sizing: border-box;
+  margin-bottom: 52px;
+
+  display: flex;
+  flex-wrap: wrap;
+`;
+const InputContainer = styled.div`
+  width: 400px;
+  height: 200px;
+
+  display: flex;
+  flex-direction: column;
+`;
+
+const Input = styled.input`
+  width: 300px;
+  height: 42px;
+  border-radius: 6px;
+
+  &:first-child {
+    padding: 5px;
+    margin-bottom: 32px;
+  }
+
+  &:nth-child(2) {
+    padding: 5px;
+    margin-bottom: 20px;
+  }
+
+
+  &:nth-child(3) {
+    width: 180px;
+    padding: 5px;
+    margin-bottom: 14px;
+    margin-right: 20px;
+  }
+
+  &:nth-child(4) {
+    width: 100px;
+    padding: 5px;
+    margin-bottom: 14px;
+  }
+`;

src/components/Dashboard/Activities/ActivityContainer.js

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+const ActivityContainer = styled.div`
+  margin-top: 27px;
+  display: flex;
+  gap: 17px;
+`;
+
+export default ActivityContainer;

src/components/Dashboard/Activities/DateButton.js

@@ -0,0 +1,19 @@
+import styled from 'styled-components';
+
+const DateButton = styled.button`
+  width: 131px;
+  height: 37px;
+  left: 489px;
+  top: 274px;
+  background-color: ${(props) => (props.selected === false ? '#E0E0E0' : '#FFEED2')};
+  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.25);
+  border-radius: 4px;
+  font-family: 'Roboto';
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 16px;
+  text-align: center;
+  color: #000000;
+`;
+
+export default DateButton;

src/components/Dashboard/Button.js

@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+
+const Button = styled.button`
+  width: 145px;
+  height: 145px;
+  margin-right: 24px;
+  border: ${(props) => (props.selected === false ? '1px solid #cecece' : 'none')};
+  border-radius: 20px;
+  background-color: ${(props) => (props.selected === false ? 'white' : '#FFEED2')};
+  cursor: pointer;
+
+  font-family: 'Arial';
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 16px;
+  text-align: center;
+  color: #000000;
+`;
+
+export default Button;

src/components/Dashboard/HotelsButton.js

@@ -0,0 +1,54 @@
+import styled from 'styled-components';
+
+const HotelButton = styled.button`
+  all: unset;
+  width: 180px;
+  height: 220px;
+  background: #f1f1f1;
+  border-radius: 10px;
+  border: ${(props) => (props.selected === false ? '1px solid #cecece' : 'none')};
+  background-color: ${(props) => (props.selected === false ? 'white' : '#FFEED2')};
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 14px;
+
+  img {
+    width: 178px;
+    height: 109px;
+    border-radius: 5px;
+  }
+`;
+
+const HotelName = styled.p`
+  font-family: 'Arial';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 20px;
+  line-height: 23px;
+
+  color: #343434;
+`;
+
+const InfoType = styled.p`
+  font-family: 'Arial';
+  font-style: normal;
+  font-weight: 700;
+  font-size: 12px;
+  line-height: 14px;
+
+  color: #3c3c3c;
+`;
+
+const Info = styled.p`
+  font-family: 'Arial';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 14px;
+
+  color: #3c3c3c;
+`;
+
+export { HotelButton, HotelName, Info, InfoType };

src/components/Dashboard/NavigationBar/index.js

@@ -29,28 +29,28 @@ export default function NavigationBar() {
       </Link>
 
       <Link to="/dashboard/payment">
-        <NavigationButton active={isActive('/dashboard/paymen')}>
+        <NavigationButton active={isActive('/dashboard/payment')}>
           <FaMoneyBill />
           <span>Pagamento</span>
         </NavigationButton>
       </Link>
 
       <Link to="/dashboard/hotel">
-        <NavigationButton active={isActive('/dashboard/hote')}>
+        <NavigationButton active={isActive('/dashboard/hotel')}>
           <FaBed />
           <span>Hotel</span>
         </NavigationButton>
       </Link>
 
       <Link to="/dashboard/activities">
-        <NavigationButton active={isActive('/dashboard/activitie')}>
+        <NavigationButton active={isActive('/dashboard/activities')}>
           <FaCalendarWeek />
           <span>Atividades</span>
         </NavigationButton>
       </Link>
 
       <Link to="/dashboard/certificate">
-        <NavigationButton active={isActive('/dashboard/certificat')}>
+        <NavigationButton active={isActive('/dashboard/certificate')}>
           <FaCertificate />
           <span>Certificado</span>
         </NavigationButton>

src/components/Dashboard/PageTitle.js

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+
+const PageTitle = styled.h1`
+  font-family: 'Arial';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 34px;
+  line-height: 40px;
+  color: #000000;
+`;
+
+export default PageTitle;