Scientia-PF-nuevo · lauty95 · Nov 4, 2021 · Nov 4, 2021 · Nov 4, 2021 · Nov 4, 2021
diff --git a/scientia/src/CourseList/CourseList.css b/scientia/src/CourseList/CourseList.css
@@ -1,7 +1,20 @@
-.div-wrapper-course-list{
+.div-wrapper-course-list {
     margin-left: 20px;
 }
 
 .not-found-course img {
     width: 1000px;
+}
+
+@media (max-width: 600px) {
+
+    .div-container-course-list {
+        padding: 0;
+        margin: 0;
+    }
+
+    .div-wrapper-course-list {
+        margin-left: 20px;
+    }
+
 }
diff --git a/scientia/src/CourseList/CourseList.js b/scientia/src/CourseList/CourseList.js
@@ -102,4 +102,4 @@ const mapStateToProps = (state) => {
     }
 }
 
-export default connect(mapStateToProps, null)(CourseList)
+export default connect(mapStateToProps, null)(CourseList)
diff --git a/scientia/src/components/Cart/Cart.js b/scientia/src/components/Cart/Cart.js
@@ -82,7 +82,7 @@ export function Cart(props) {
     gift
   } = props;
 
-  // const [show, setShow] = useState(false);
+  const [show, setShow] = useState(false);
   const [redirect, setRedirect] = useState(false)
 
   const [checked, setChecked] = React.useState({
@@ -134,8 +134,6 @@ export function Cart(props) {
 
   const [state, setState] = React.useState({ emailGift: "" })
 
-
-
   function validateEmail(email) {
     const re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
     return re.test(email);
@@ -152,8 +150,8 @@ export function Cart(props) {
 
   };
   const handleChangeGift = (e) => setChecked({ ...checked, [e.target.name]: e.target.value })
-  // const handleShow = () => setShow(true);
-  // const handleClose = () => setShow(false);
+  const handleShow = () => setShow(true);
+  const handleClose = () => setShow(false);
 
   let history = useHistory();
 
@@ -164,9 +162,9 @@ export function Cart(props) {
     user.email && getUserInfo(user.email)
   }, [])
 
-  // function mensajeModel() {
-  //   return `Ya posees el/los curso/s!`
-  // }
+  function mensajeModel(id) {
+    return `Ya posees el/los curso/s!`
+  }
 
   var result = 0;
   var taxs = 0;
@@ -213,7 +211,7 @@ export function Cart(props) {
       }
 
       if (sameId) {
-        // handleShow()
+        handleShow()
       } else {
         confirmOrder(userCart)
         clearCart()
@@ -227,7 +225,6 @@ export function Cart(props) {
     }
   }
 
-
   const haddleRemoveItem = (id) => {
     if (login) {
       const data = { id: id, email: user.email }
@@ -290,13 +287,22 @@ export function Cart(props) {
                               textDecoration: "line-through",
                             }}
                           >
+
                             ${course.price !== null && parseFloat(course.price.toFixed(2))}
+
                           </h3>
                           <p>{course.percentageDiscount}% OFF</p>
                           <h3 style={{ color: "green" }}>
                             $
+
                             {course.price !== null &&
-                              parseFloat((course.price -((course.percentageDiscount / 100) * course.price)).toFixed(2))}
+                              parseFloat(
+                                course.price -
+                                (
+                                  (course.percentageDiscount / 100) *
+                                  course.price
+                                ).toFixed(2)
+                              )}
                           </h3>
                         </div>
                       ) : (
@@ -378,17 +384,17 @@ export function Cart(props) {
         </div>
       </div>
 
-      {/* <Modal show={show} onHide={handleClose}>
+      <Modal show={show} onHide={handleClose}>
         <Modal.Header closeButton>
-          <Modal.Title>YA POSEE ESTOS CURSOS</Modal.Title>
+          <Modal.Title>Inicio de Sesión</Modal.Title>
         </Modal.Header>
         <Modal.Body>{mensajeModel()}</Modal.Body>
         <Modal.Footer>
           <Button variant="primary" onClick={handleClose}>
             Ok!
           </Button>
         </Modal.Footer>
-      </Modal> */}
+      </Modal>
 
       {redirect ? <Redirect to="/payment" /> : <></>}
       <Modal show={show2} onHide={handleClose3} style={styles.modal}>

diff --git a/scientia/src/components/CourseCard/CourseCard.css b/scientia/src/components/CourseCard/CourseCard.css
@@ -1,78 +1,41 @@
-.container-course {
-
-  display: inline-flex;
-  border: 1px solid rgb(161, 154, 154);
-  margin: 10px;
-  padding: 10px;
-  width: 1500px;
-  height: 350px;
-
-}
-
-.discount {
-  margin: 5px;
-  margin-top: 10px;
-  width: 110px;
-}
-
-.detaiils-card-container {
-  width: 500px;
-  margin-right: 20px;
-  margin-left: 20px;
-  padding-top: 40px;
-}
-
-.description-container {
-  padding-top: 40px;
-  width: fit-content;
-}
-
-.left-container {
-  width: fit-content;
-}
-
-.course-div-card {
-  width: fit-content;
-}
-
-.course-div-card img {
-  margin: 10px;
-  width: 350px;
-  height: 250px;
-}
-
-.button-container {
-  padding: 8px;
-  padding-top: 20px;
-
+.details-div {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 50px;
 }
 
-.info-cat-div {
+.title-details-div {
   display: flex;
-
+  margin-bottom: 40px;
+  align-items: center;
+  background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(52, 58, 64, 1) 100%);
+  color: aliceblue;
+  height: 120px;
+  margin-top: 5px;
 }
 
-.link {
-  width: 80px;
-  height: 30px;
-  margin-right: 5px;
+.title-details-div h1 {
+  padding-left: 20%;
+  font-size: 50px;
+  color: #fff;
 }
 
-.title-course {
+.details-div .confirm-button-div {
   display: flex;
-  align-items: center;
   justify-content: center;
+  align-items: center;
 }
 
-.detaiils-card-container .confirm-button2 {
+.details-div .confirm-button {
 
   appearance: none;
-  background-color: #a185e2;
+  background-color: #2ea44f;
   border: 1px solid rgba(27, 31, 35, .15);
   border-radius: 6px;
   box-shadow: rgba(27, 31, 35, .1) 0 1px 0;
   box-sizing: border-box;
-  color: rgb(14, 13, 13);
+  color: #fff;
   cursor: pointer;
   display: inline-block;
   font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
@@ -88,57 +51,28 @@
   touch-action: manipulation;
   vertical-align: middle;
   white-space: nowrap;
-  margin-right: 30px;
+  margin-left: 40px;
 }
 
-.detaiils-card-container .confirm-button2:hover {
-  background-color: #6e57a3;
-  color: aliceblue;
+.details-div .confirm-button:hover {
+  background-color: #a0c4aa;
 }
 
-
-.detaiils-card-container .cart-button2 {
-
-  appearance: none;
-  background-color: #0ed11e;
-  border: 1px solid rgba(27, 31, 35, .15);
-  border-radius: 6px;
-  box-shadow: rgba(27, 31, 35, .1) 0 1px 0;
-  box-sizing: border-box;
-  color: rgb(14, 13, 13);
-  cursor: pointer;
-  display: inline-block;
-  font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
-  font-size: 14px;
-  font-weight: 600;
-  line-height: 20px;
-  padding: 6px 16px;
-  position: relative;
-  text-align: center;
-  text-decoration: none;
-  user-select: none;
-  -webkit-user-select: none;
-  touch-action: manipulation;
-  vertical-align: middle;
-  white-space: nowrap;
-  margin-right: 30px;
-}
-
-
-.detaiils-card-container .cart-button2:hover {
-  background-color: #16811f;
-  color: aliceblue;
+.details-div .preview-button-div {
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
-.detaiils-card-container .cart-button-play {
+.details-div .preview-button {
 
   appearance: none;
-  background-color: #d1250e;
+  background-color: #d1d422;
   border: 1px solid rgba(27, 31, 35, .15);
   border-radius: 6px;
   box-shadow: rgba(27, 31, 35, .1) 0 1px 0;
   box-sizing: border-box;
-  color: rgb(14, 13, 13);
+  color: rgb(14, 12, 12);
   cursor: pointer;
   display: inline-block;
   font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
@@ -154,50 +88,14 @@
   touch-action: manipulation;
   vertical-align: middle;
   white-space: nowrap;
-  margin-right: 30px;
-  width: 105px;
+  margin-left: 40px;
 }
 
-
-.detaiils-card-container .cart-button-play:hover {
-  background-color: #f32106;
-  color: aliceblue;
-}
-
-.detaiils-card-container .cart-button-add {
-  appearance: none;
-  background-color: #eaee08;
-  border: 1px solid rgba(27, 31, 35, .15);
-  border-radius: 6px;
-  box-shadow: rgba(27, 31, 35, .1) 0 1px 0;
-  box-sizing: border-box;
-  color: rgb(14, 13, 13);
-  cursor: pointer;
-  display: inline-block;
-  font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
-  font-size: 14px;
-  font-weight: 600;
-  line-height: 20px;
-  padding: 6px 6px;
-  position: relative;
-  text-align: center;
-  text-decoration: none;
-  user-select: none;
-  -webkit-user-select: none;
-  touch-action: manipulation;
-  vertical-align: middle;
-  white-space: nowrap;
-  margin-right: 30px;
-  width: 105px;
-}
-
-
-.detaiils-card-container .cart-button-add:hover {
-  background-color: #dbdf0f;
-  ;
-  color: aliceblue;
+.preview-button:hover {
+  background-color: #dae9de;
 }
 
 @media (max-width: 600px) {
-
-}
+  .title-details-div h1 {
+    padding-left: 5%;
+  }
diff --git a/scientia/src/components/Details/Details.css b/scientia/src/components/Details/Details.css
@@ -93,4 +93,9 @@
 
 .preview-button:hover {
   background-color: #dae9de;
-}
+}
+
+@media (max-width: 600px) {
+  .title-details-div h1 {
+    padding-left: 5%;
+  }
-Original file line number
+Diff line change
@@ Expand Up / @@ -102,4 +102,4 @@ const mapStateToProps = (state) => { @@
         }
     }
-    export default connect(mapStateToProps, null)(CourseList)
+    export default connect(mapStateToProps, null)(CourseList)