Merge pull request #23 from dlv237/design

New Design

src/common/ButtonBuscarVuelos.jsx

@@ -0,0 +1,16 @@
+import "./whitenavbarbutton.css";
+import { Link } from "react-router-dom";
+
+const ButtonBuscarVuelos = () => {
+  return (
+    <div className="center-button-wb">
+      <Link to="/search" className="btnwb-link">
+        <button className="btnwb">
+          <span class="text-wb">Buscar Vuelos</span>
+        </button>
+      </Link>
+    </div>
+  );
+};
+
+export default ButtonBuscarVuelos;

src/common/ButtonMisVuelos.jsx

@@ -0,0 +1,16 @@
+import "./whitenavbarbutton.css";
+import { Link } from "react-router-dom";
+
+const ButtonMisVuelos = () => {
+  return (
+    <div className="center-button-wb">
+      <Link to="/my_flights" className="btnwb-link">
+        <button className="btnwb">
+          <span class="text-wb">Mis Vuelos</span>
+        </button>
+      </Link>
+    </div>
+  );
+};
+
+export default ButtonMisVuelos;

src/common/ButtonRecomendaciones.jsx

@@ -0,0 +1,16 @@
+import "./whitenavbarbutton.css";
+import { Link } from "react-router-dom";
+
+const ButtonRecomendaciones = () => {
+  return (
+    <div className="center-button-wb">
+      <Link to="/recomendations" className="btnwb-link">
+        <button className="btnwb">
+          <span class="text-wb">¿No sabes a donde ir?</span>
+        </button>
+      </Link>
+    </div>
+  );
+};
+
+export default ButtonRecomendaciones;

src/common/FlightsBookingButton.jsx

@@ -0,0 +1,16 @@
+import "./flightsbookingbutton.css";
+import { Link } from "react-router-dom";
+
+const FlightsBookingButton = () => {
+  return (
+    <div className="center-button-fb">
+      <Link to="/" className="btnfb-link">
+        <button className="btnfb">
+          <span class="text-fb">FLIGHTS BOOKING</span>
+        </button>
+      </Link>
+    </div>
+  );
+};
+
+export default FlightsBookingButton;

src/common/LoginButton.jsx

@@ -6,8 +6,14 @@ const LoginButton = () => {
   if (!isAuthenticated) {
     return (
       <div className="center-button">
-        <button className="login-button" onClick={() => loginWithRedirect()}>
-          Iniciar Sesión
+        <button className="btn" onClick={() => loginWithRedirect()}>
+          <span class="icon">
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="24" fill="currentColor" class="bi bi-airplane-fill" viewBox="0 0 16 16">
+        <path d="M6.428 1.151C6.708.591 7.213 0 8 0s1.292.592 1.572 1.151C9.861 1.73 10 2.431 10 3v3.691l5.17 2.585a1.5 1.5 0 0 1 .83 1.342V12a.5.5 0 0 1-.582.493l-5.507-.918-.375 2.253 1.318 1.318A.5.5 0 0 1 10.5 16h-5a.5.5 0 0 1-.354-.854l1.319-1.318-.376-2.253-5.507.918A.5.5 0 0 1 0 12v-1.382a1.5 1.5 0 0 1 .83-1.342L6 6.691V3c0-.568.14-1.271.428-1.849Z"></path>
+        </svg>
+          </span>
+          <span class="text">Iniciar Sesión</span>
+
         </button>
       </div>
     );

src/common/LogoutButton.jsx

@@ -1,4 +1,4 @@
-import "../common/button.css";
+import "./whitenavbarbutton.css";
 import { useAuth0 } from "@auth0/auth0-react";
 import { Link } from "react-router-dom";
 
@@ -11,16 +11,20 @@ const LogoutButton = () => {
 
   if (isAuthenticated) {
     return (
-      <>
-        <Link to="/">
-          <button className="login-button" onClick={handleLogout}>
-            Cerrar Sesión
+      <div className="center-button-wb">
+        <Link to="/" className="btnwb-link">
+          <button className="btnwb" onClick={handleLogout}>
+            <span class="text-wb">Cerrar Sesión</span>
           </button>
         </Link>
         <br />
-      </>
+      </div>
     );
   }
 };
 
 export default LogoutButton;
+
+
+
+

src/common/flightsbookingbutton.css

@@ -0,0 +1,47 @@
+.btnfb {
+    width: 180px;
+    height: 43px;
+    border: none;
+    transition: all 0.5s ease-in-out;
+    font-size: 18px;
+    font-family: "League Spartan";
+    font-weight: bold;
+    display: flex;
+    align-items: center;
+    background: #040f16;
+    color: #f5f5f5;
+  }
+
+  .btnfb:hover {
+    box-shadow: 0 0 20px 0px #2e2e2e3a;
+  }
+
+  .btnfb .text-fb {
+    transform: translateX(10px);
+    margin-top: 5px;
+    transition: all 0.5s ease-in-out;
+  }
+
+  .btnfb:hover .text-fb {
+    transition: all 0.5s;
+    transform: translateX(10px) scale(1.05);
+  }
+
+  .btnfb:focus {
+    outline: none;
+  }
+
+
+  .btnfb-link {
+    text-decoration: none;
+    color: inherit;
+  }
+
+  .btnfb-link:link,
+  .btnfb-link:visited,
+  .btnfb-link:hover,
+  .btnfb-link:active {
+    text-decoration: none;
+    color: inherit;
+  }
+

src/common/loginbutton.css

@@ -17,4 +17,57 @@
 
 .login-button:hover {
     background-color: #84b6f4;
+}
+
+
+
+
+.btn {
+  width: 180px;
+  height: 43px;
+  border: none;
+  transition: all 0.5s ease-in-out;
+  font-size: 19px;
+  font-family: "League Spartan";
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  background: #040f16;
+  color: #f5f5f5;
+}
+
+.btn:hover {
+  box-shadow: 0 0 20px 0px #2e2e2e3a;
+}
+
+.btn .icon {
+  position: absolute;
+  height: 40px;
+  width: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: all 0.5s;
+}
+
+.btn .text {
+  transform: translateX(45px);
+  margin-top: 4px
+}
+
+.btn:hover .icon {
+  width: 175px;
+}
+
+.btn:hover .text {
+  transition: all 0.5s;
+  opacity: 0;
+}
+
+.btn:focus {
+  outline: none;
+}
+
+.btn:active .icon {
+  transform: scale(0.85);
 }

src/common/navbar.css

@@ -9,6 +9,7 @@ body,
 }
 
 .navbar {
+    height: 42px;
     list-style-type: none;
     margin: 0;
     padding: 0;
@@ -17,7 +18,7 @@ body,
     position: fixed;
     top: 0;
     width: 100%;
-    border-bottom: 2px solid #000035;
+    border-bottom: 1px solid #000035;
     z-index: 1000;
 }
 

src/common/navbar.jsx

@@ -3,6 +3,10 @@ import { Link } from "react-router-dom";
 import LoginButton from "./LoginButton";
 import LogoutButton from "./LogoutButton";
 import { useAuth0 } from "@auth0/auth0-react";
+import FlightsBookingButton from "./FlightsBookingButton";
+import ButtonBuscarVuelos from "./ButtonBuscarVuelos";
+import ButtonRecomendaciones from "./ButtonRecomendaciones";
+import ButtonMisVuelos from "./ButtonMisVuelos";
 
 function Navbar() {
   const { isAuthenticated, user } = useAuth0();
@@ -13,28 +17,20 @@ function Navbar() {
   return (
     <ul className="navbar">
       <li className="navbar-li">
-        <Link to="/" className="navbar-a">
-          FlightsBooking
-        </Link>
+        <FlightsBookingButton className="navbar-a flightsbooking-button"></FlightsBookingButton>
       </li>
       <li className="navbar-li">
-        <Link to="/search" className="navbar-a">
-          Buscar Vuelos
-        </Link>
+        <ButtonBuscarVuelos className="navbar-a flightsbooking-button"></ButtonBuscarVuelos>
       </li>
       <div className="right-container">
         <li className="navbar-li">
           {isAuthenticated ? (
             <>
               <li className="navbar-li">
-                <Link to="/recomendations" className="navbar-a">
-                  ¿No sabes a donde ir?
-                </Link>
+                <ButtonRecomendaciones className="navbar-a flightsbooking-button"></ButtonRecomendaciones>
               </li>
               <li className="navbar-li">
-                <Link to="/my_flights" className="navbar-a">
-                  Mis Vuelos
-                </Link>
+                <ButtonMisVuelos className="navbar-a flightsbooking-button"></ButtonMisVuelos>
               </li>
               {isAdmin && (
               <li className="navbar-li">

src/common/whitenavbarbutton.css

@@ -0,0 +1,49 @@
+.btnwb {
+    height: 42px;
+    border: none;
+    transition: all 0.5s ease-in-out;
+    font-size: 16px;
+    font-family: "League Spartan";
+    font-weight: bold;
+    display: flex;
+    align-items: center;
+    background: #f9fcff;
+    color: #000035;
+    padding: 20px;
+  }
+
+  .btnwb:hover {
+    box-shadow: 0 0 20px 0px #2e2e2e3a;
+    background-color: #040f16;
+    transition: none;
+  }
+
+  .btnwb .text-wb {
+    margin-top: 5px;
+    transition: all 0.5s ease-in-out;
+  }
+
+  .btnwb:hover .text-wb {
+    color: #f5f5f5;
+    transform: scale(1.05);
+    transition: transform 0.5s;
+  }
+
+  .btnwb:focus {
+    outline: none;
+  }
+
+
+  .btnwb-link {
+    text-decoration: none;
+    color: inherit;
+  }
+
+  .btnwb-link:link,
+  .btnwb-link:visited,
+  .btnwb-link:hover,
+  .btnwb-link:active {
+    text-decoration: none;
+    color: inherit;
+  }
+

src/flights/checkout.css

@@ -18,6 +18,7 @@
     text-align: center;
     max-width: 500px;
     width: 100%;
+    animation: fadeIn 2s ease forwards;
   }
 
   .checkout-content h1 {
@@ -52,4 +53,13 @@
     font-size: 15px;
     margin-left: 50px;
   }
-
+
+
+  @keyframes fadeIn {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }