GrossesMitaines/grosses-mitaines-ui/src/components/PaymentForm.js

@@ -1,6 +1,6 @@
 import React, { useState, useContext, useEffect } from "react"
 import { CardElement, useElements, useStripe } from "@stripe/react-stripe-js"
-import { Button, Form } from "react-bootstrap"
+import { Row, Col, Button, Form } from "react-bootstrap"
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
 import { CartContext } from "../components/Cart";
@@ -185,8 +185,11 @@ const PaymentForm = ({ cost, invoice }) => {
     return (
         <>
             {
+                <Col xl={4}>
                     <form onSubmit={handleSubmit(onSubmit)}>
-                    <div style={{"borderRadius": "5px"}} className="form-container">
+                        <div style={{ "borderRadius": "5px" }} className="form-container">
+
+
                             <h4 className="text-center">Adresse de Facturation</h4>
                             <div className="Error_color">
                                 <div className="formulaire-address">
@@ -270,6 +273,7 @@ const PaymentForm = ({ cost, invoice }) => {
                                 </div>
                             </div>
                         </div>
+                        <Col md={12}>
                             <fieldset className="FormGroup">
                                 <input className="FormRow cardholder-info" placeholder="Nom sur la carte" id="cardholder-name" type="text" value={cardName} onChange={e => setCardName(e.target.value)} />
                                 <input className="FormRow cardholder-info" placeholder="Téléphone de facturation" id="cardholder-phone" type="text" value={cardPhone} onChange={e => setCardPhone(e.target.value)} />
@@ -284,7 +288,9 @@ const PaymentForm = ({ cost, invoice }) => {
                                     isLoading && <div>Paiement en cours...</div>
                                 }
                             </div>
+                        </Col>
                     </form>
+                </Col>
             }
         </>
     )

GrossesMitaines/grosses-mitaines-ui/src/pages/ReviewInvoice.js

@@ -129,7 +129,7 @@ const ReviewInvoice = () => {
         <>
             <Row>
                 <h2 className="confirmer-infos">Veuillez confirmer les informations ci-dessous!</h2>
-                <Col xs={6} md={4}>
+                <Col xs={6} xl={4}>
 
                     <div className="review-invoice-info">
                         <div>
@@ -185,12 +185,12 @@ const ReviewInvoice = () => {
                         </Col>
                     </Row>
                 </Col>
-                <Col xs={6} md={8}>
+                <Col xs={6} xl={4}>
                     <ReviewProdList
                     />
                 </Col>
-            </Row>
                 <StripeContainer cost={total} invoice={thisInvoice} />
+            </Row>
         </>
 
     );