Improve styling and add loading indicator

webkom · Sep 12, 2019 · 9648fd7 · 9648fd7
1 parent 586d6f0
commit 9648fd7
Show file tree

Hide file tree

Showing 5 changed files with 195 additions and 95 deletions.
diff --git a/app/actions/EventActions.js b/app/actions/EventActions.js
@@ -268,7 +268,7 @@ export function payment(eventId: number) {
   return callAPI({
     types: Event.PAYMENT_QUEUE,
     endpoint: `/events/${eventId}/payment/`,
-    method: 'GET',
+    method: 'POST',
     meta: {
       errorMessage: 'Betaling feilet'
     }

diff --git a/app/routes/events/components/Event.css b/app/routes/events/components/Event.css
@@ -89,3 +89,17 @@
 .registrationSection {
   flex-wrap: wrap-reverse;
 }
+
+.eventPrice {
+  text-align: center;
+  width: 100%;
+  margin-bottom: 20px;
+}
+
+.eventPrice::after {
+  width: 70%;
+  display: block;
+  content: '';
+  margin: 0 auto;
+  border-bottom: 1px solid #6772e585;
+}
diff --git a/app/routes/events/components/JoinEventForm.js b/app/routes/events/components/JoinEventForm.js
@@ -310,7 +310,9 @@ class JoinEventForm extends Component<Props> {
                   {registration && showStripe && (
                     <div style={{ width: '100%' }}>
                       <div className={styles.joinHeader}>Betaling</div>
-                      Du skal betale {event.price / 100},-
+                      <div className={styles.eventPrice}>
+                        Du skal betale {event.price / 100},-
+                      </div>
                       <PaymentRequestForm
                         createPaymentIntent={createPaymentIntent}
                         event={event}

diff --git a/app/routes/events/components/Stripe.css b/app/routes/events/components/Stripe.css
@@ -1,11 +1,13 @@
 @import 'app/styles/variables.css';
+
 .StripeLabel {
   color: #6b7c93;
   font-weight: 300;
   letter-spacing: 0.025em;
 }
 
 .StripeButton {
+  width: 100%;
   white-space: nowrap;
   border: 0;
   outline: 0;
@@ -35,6 +37,27 @@
   box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
 }
 
+.elementsFieldset {
+  margin: 1em 0;
+  padding: 1em;
+  border: 1px solid #6772e585;
+  border-radius: 8px;
+}
+
+.elementsLedgend {
+  text-align: center;
+  padding: 0 1em;
+  color: #6b7c93;
+  font-weight: 300;
+  letter-spacing: 0.025em;
+}
+
+.formSeparator {
+  display: flex;
+  justify-content: center;
+  margin: 10px 0;
+}
+
 .StripeElement {
   display: block;
   margin: 10px 0 20px;
@@ -61,7 +84,7 @@
   background: #c24538;
   color: #fff;
   padding: 5px 10px;
-  margin-top: 3px;
+  margin-bottom: 1em;
   border-radius: 3px;
 }