add success icon and new loader animation

src/js/components/inviteForm.js

@@ -5,7 +5,7 @@ var React = require('react');
 var classSet = require('classnames');
 
 var api = require('../api');
-
+var Loader = require('./loader');
 module.exports = React.createClass({
   getInitialState() {
     return {
@@ -99,11 +99,11 @@ module.exports = React.createClass({
           disabled={this.state.error || this.state.submitted}>
           ⏎
         </button>
-        <span
-          className='loader'>
-        </span>
+        <div className='invite-form__loader'>
+          <Loader />
+        </div>
         {feedbackMessage}
       </form>
-      )
+    );
   }
 });

src/js/components/loader.js

@@ -0,0 +1,12 @@
+const React = require('react');
+
+module.exports = function Loader() {
+  return (
+    <div className='sk-folding-cube'>
+      <div className='sk-cube1 sk-cube'></div>
+      <div className='sk-cube2 sk-cube'></div>
+      <div className='sk-cube4 sk-cube'></div>
+      <div className='sk-cube3 sk-cube'></div>
+    </div>
+  );
+};

src/js/components/membershipForm.js

@@ -18,6 +18,14 @@ module.exports = React.createClass({
     }
     return (
       <div>
+        <svg height='50' width='50' viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'>
+          <path
+            fill='#349c4a'
+            d='M256 6.998c-137.533 0-249 111.467-249 249 0 137.534 111.467 249 249 249s249-111.467 249-249c0-137.534-111.467-249-249-249zm0 478.08c-126.31 0-229.08-102.77-229.08-229.08 0-126.31 102.77-229.08 229.08-229.08 126.31 0 229.08 102.77 229.08 229.08 0 126.31-102.77 229.08-229.08 229.08z' />
+          <path
+            fill='#349c4a'
+            d='M384.235 158.192L216.92 325.518 127.86 236.48l-14.142 14.144 103.2 103.18 181.36-181.47' />
+        </svg>
         <p> Maksu ja rekisteröityminen onnistui.</p>
         <p> Tervetuloa Koodiklinikka ry:n jäseneksi!</p>
       </div>

src/js/components/membershipInfoForm.js

@@ -4,9 +4,10 @@ var _ = require('lodash');
 var request = require('axios');
 var React = require('react');
 var classSet = require('classnames');
+var StripeCheckout = require('react-stripe-checkout').default;
 
 var api = require('../api');
-var StripeCheckout = require('react-stripe-checkout').default;
+var Loader = require('./loader');
 var config = require('../../config.js')();
 
 var fieldNameTranslations = {
@@ -152,9 +153,16 @@ module.exports = React.createClass({
         </span>
       );
     });
-
+    if (this.state.sending) {
+      return (
+        <div className='membership-form__loader'>
+          <Loader />
+        </div>
+      );
+    }
     return (
       <div>
+        <h3>Liity jäseneksi</h3>
         <form className={formClasses}>
           {inputFields}
           {this.state.error && (

src/styles/_loader.styl

@@ -0,0 +1,55 @@
+.sk-folding-cube
+  margin auto
+  width 100%
+  height 100%
+  position relative
+  transform rotateZ(45deg)
+
+.sk-folding-cube .sk-cube
+  float left
+  width 50%
+  height 50%
+  position relative
+  transform scale(1.1)
+
+.sk-folding-cube .sk-cube:before
+  content ''
+  position absolute
+  top 0
+  left 0
+  width 100%
+  height 100%
+  background-color linkColor
+  animation sk-foldCubeAngle 2.4s infinite linear both
+  transform-origin 100% 100%
+
+.sk-folding-cube .sk-cube2
+  transform scale(1.1) rotateZ(90deg)
+
+.sk-folding-cube .sk-cube3
+  transform scale(1.1) rotateZ(180deg)
+
+.sk-folding-cube .sk-cube4
+  transform scale(1.1) rotateZ(270deg)
+
+.sk-folding-cube .sk-cube2:before
+  animation-delay 0.3s
+
+.sk-folding-cube .sk-cube3:before
+  animation-delay 0.6s
+
+.sk-folding-cube .sk-cube4:before
+  animation-delay 0.9s
+
+@keyframes sk-foldCubeAngle
+  0%, 10%
+    transform perspective(140px) rotateX(-180deg)
+    opacity 0
+   25%, 75%
+    transform perspective(140px) rotateX(0deg)
+    opacity 1
+   90%, 100%
+    transform perspective(140px) rotateY(180deg)
+    opacity 0
+
+

src/styles/style.styl

@@ -6,6 +6,7 @@ footerHeight = 50px
 @require '_input'
 @require '_button'
 @require '_header'
+@require '_loader'
 
 body, html
   margin 0
@@ -112,28 +113,16 @@ section:first-child
     &:first-child
       margin-top 0
 
-.loader
-  background transparent url('../images/ajax-loader.gif') no-repeat center center
-  width 28px
-  height 28px
-
 .form
   .btn
     background linkColor
     border-bottom 2px solid #117280
     color rgba(255, 255, 255, 0.9)
-  .loader
-    display none
   &.sending
     .btn
       display none
-    .loader
+    .invite-form__loader
       display block
-      margin-left auto
-      margin-right auto
-      width 28px
-      height 28px
-
 .invite-form
   position relative
   .btn
@@ -146,15 +135,13 @@ section:first-child
     color rgba(255, 255, 255, 0.5)
     &:active
       border-bottom 0
-  .loader
+  .invite-form__loader
+    display none
+    width 20px
+    height 20px
     position absolute
-    right 9px
-    top 9px
-  &.sending
-    .loader
-      display block
-      width 28px
-      height 28px
+    right 14px
+    top 14px
 
 .membership-form
   .input
@@ -162,6 +149,11 @@ section:first-child
   .btn
     margin-top 12px
 
+.membership-form__loader
+  width 70px
+  height 70px
+  margin auto
+
 .stripe-form
   margin 20px 0px
   .name
@@ -353,11 +345,12 @@ footer
 
 .bread-img
   background url('../images/hp3_bw.jpg')
-  background-size 120%
-  background-position-y 80%
-  border-radius 0px
+  background-size cover
+  border-radius 160px
   opacity 0.85
+  width 320px
   height 320px
+  margin auto
 
 @media screen and (max-width: 700px)
   .bread-img

src/yhdistys.jade

@@ -32,7 +32,6 @@ block content
       .row
         .bread
           .column.column1-2
-            h3 Liity jäseneksi
             #membership-form.form
 
           .column.column1-2