From 3b38d17e021d11d248cac5202dc3ae15bec950a6 Mon Sep 17 00:00:00 2001
From: Riku Rouvila <riku.rouvila@gmail.com>
Date: Sat, 8 Jul 2017 18:27:15 +0100
Subject: [PATCH 1/4] start stripe process when user clicks submit, overall
 refactoring

---
 src/config.js                           |   8 +-
 src/js/components/membershipForm.js     |  48 ++----
 src/js/components/membershipInfoForm.js | 210 +++++++++++++-----------
 src/js/components/stripeCheckout.js     |  66 --------
 4 files changed, 133 insertions(+), 199 deletions(-)
 delete mode 100644 src/js/components/stripeCheckout.js

diff --git a/src/config.js b/src/config.js
index 43576a3..84d5d3b 100644
--- a/src/config.js
+++ b/src/config.js
@@ -6,11 +6,11 @@ var development = {
 }
 
 var production = {
-    stripe: {
-      publicKey: "pk_live_xrnwdLNXbt20LMxpIDffJnnC"
-    }
+  stripe: {
+    publicKey: "pk_live_xrnwdLNXbt20LMxpIDffJnnC"
+  }
 }
 
-module.exports = function() {
+module.exports = function () {
   return process.env.ENV == 'development' ? development : production;
 }
diff --git a/src/js/components/membershipForm.js b/src/js/components/membershipForm.js
index d40287c..253bfb8 100644
--- a/src/js/components/membershipForm.js
+++ b/src/js/components/membershipForm.js
@@ -1,50 +1,26 @@
-'use strict';
-
-var classSet = require('classnames');
-var React    = require('react');
-var request  = require('axios');
-
-var MembershipInfoForm = require('./membershipInfoForm.js');
-var StripeCheckout     = require('./stripeCheckout.js');
+import React from 'react';
+import MembershipInfoForm from './membershipInfoForm';
 
 module.exports = React.createClass({
   getInitialState() {
     return {
-      infoFormSuccess: false,
-      paymentSuccess:  false,
-      userInfo:        null
+      paymentSuccess: false
     };
   },
-
   handlePaymentSuccess() {
     this.setState({ paymentSuccess: true });
   },
-
-  handleInfoFormSuccess(userInfo) {
-    this.setState({
-      infoFormSuccess: true,
-      userInfo:        userInfo
-    });
-  },
-
   render() {
-    if(!this.state.infoFormSuccess) {
-      return <MembershipInfoForm onSuccess={ this.handleInfoFormSuccess }></MembershipInfoForm>
-
-    } else if (!this.state.paymentSuccess) {
+    if(!this.state.paymentSuccess) {
       return (
-        <StripeCheckout
-          userInfo         = { this.state.userInfo }
-          onPaymentSuccess = { this.handlePaymentSuccess }>
-        </StripeCheckout>)
-
-    } else {
-      return (
-        <div>
-          <p> Maksu ja rekisteröityminen onnistui.</p>
-          <p> Tervetuloa Koodiklinikka ry:n jäseneksi!</p>
-        </div>
-      )
+        <MembershipInfoForm onPaymentSuccess={this.handlePaymentSuccess} />
+      );
     }
+    return (
+      <div>
+        <p> Maksu ja rekisteröityminen onnistui.</p>
+        <p> Tervetuloa Koodiklinikka ry:n jäseneksi!</p>
+      </div>
+    );
   }
 });
diff --git a/src/js/components/membershipInfoForm.js b/src/js/components/membershipInfoForm.js
index 2363ec3..67fe7db 100644
--- a/src/js/components/membershipInfoForm.js
+++ b/src/js/components/membershipInfoForm.js
@@ -1,21 +1,22 @@
 'use strict';
 
-var _        = require('lodash');
-var request  = require('axios');
-var React    = require('react');
+var _ = require('lodash');
+var request = require('axios');
+var React = require('react');
 var classSet = require('classnames');
 
-var api            = require('../api');
-var StripeCheckout = require('./stripeCheckout.js');
+var api = require('../api');
+var StripeCheckout = require('react-stripe-checkout').default;
+var config = require('../../config.js')();
 
 var fieldNameTranslations = {
-  address:   { fi: "Osoite" },
-  city:      { fi: "Paikkakunta" },
-  email:     { fi: "Sähköpostiosoite" },
-  handle:    { fi: "Slack-käyttäjätunnus "},
-  name:      { fi: "Koko nimi "},
-  postcode:  { fi: "Postinumero" }
-}
+  address: { fi: 'Osoite' },
+  city: { fi: 'Paikkakunta' },
+  email: { fi: 'Sähköpostiosoite' },
+  handle: { fi: 'Slack-käyttäjätunnus ' },
+  name: { fi: 'Koko nimi ' },
+  postcode: { fi: 'Postinumero' }
+};
 
 function validateEmail(email) {
   var 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,}))$/;
@@ -24,54 +25,51 @@ function validateEmail(email) {
 
 const fieldNames = ['name', 'email', 'handle', 'address', 'city', 'postcode'];
 
+function getUserInfo(state) {
+  return _.pick(state, fieldNames);
+}
+
 module.exports = React.createClass({
 
   getInitialState() {
     return {
-      address:   '',
-      city:      '',
-      email:     '',
-      errors:    [],
-      handle:    '',
-      name:      '',
-      postcode:  '',
-      sending:   false
+      address: '',
+      city: '',
+      email: '',
+      handle: '',
+      name: '',
+      postcode: '',
+      sending: false,
+      pristineFields: fieldNames
     };
   },
-  onSubmit(e) {
-    e.preventDefault();
-
+  onSubmit(token) {
     this.setState({
       sending: true,
-      errors: []
+      error: null
     });
 
-    if (this.getDataErrors().length) {
-      this.setState({
-        sending: false,
-        errors:  userInfoErrors
+    request.post(api('membership'), {
+      userInfo: getUserInfo(this.state),
+      stripeToken: token.id
+    })
+      .then(() => {
+        this.setState({ sending: false });
+        this.props.onPaymentSuccess();
+      })
+      .catch((err) => {
+        this.setState({ error: err, sending: false });
       });
-    } else {
-      this.props.onSuccess({
-        email:     this.state.email,
-        name:      this.state.name,
-        handle:    this.state.handle,
-        address:   this.state.address,
-        postcode:  this.state.postcode,
-        city:      this.state.city,
-      });
-    }
-  },
-  handleError(err) {
-    this.setState({ error: err, sending: false });
   },
   onChange(e) {
-    if (e.target.value === this.state[e.target.name]) {
+    var name = e.target.name;
+    if (e.target.value === this.state[name]) {
       return;
     }
 
     this.setState({
       [e.target.name]: e.target.value,
+      pristineFields: this.state.pristineFields.filter((fieldName) => fieldName !== name),
       errors: []
     });
   },
@@ -80,84 +78,110 @@ module.exports = React.createClass({
     var foundErrors = [];
 
     fieldNames.forEach((fieldName) => {
-      if(!this.state[fieldName])
-        foundErrors.push({ field: fieldName, type: 'missing' })
-    })
+      if (!this.state[fieldName]) {
+        foundErrors.push({ field: fieldName, type: 'missing' });
+      }
+    });
 
-    if(this.state.email && !validateEmail(this.state.email))
+    if (this.state.email && !validateEmail(this.state.email)) {
       foundErrors.push({ field: 'email', type: 'invalid' });
+    }
 
     return foundErrors;
   },
 
   render() {
+    const inputErrors = this.getDataErrors();
+
     var formClasses = classSet({
-      'form':            true,
+      'form': true,
       'membership-form': true,
-      'has-error':       this.state.errors.length,
-      'sending':         this.state.sending
+      'has-error': inputErrors.length !== 0 || this.state.error,
+      'sending': this.state.sending
     });
 
-
-    /* generate error messages */
-    var feedbackMessages = [];
-    var fieldsWithErrors = [];
-
-    this.state.errors.forEach((err, i) => {
+    function getErrorMessage(err) {
       var feedbackText;
 
-      fieldsWithErrors.push(err.field);
-
-      if(err.type == 'missing') {
-        feedbackText = `${ fieldNameTranslations[err.field].fi } on pakollinen.`
-      } else if (err.type == 'invalid') {
-        feedbackText = `${ fieldNameTranslations[err.field].fi } on virheellinen.`
+      if (err.type === 'missing') {
+        feedbackText = `${fieldNameTranslations[err.field].fi} on pakollinen.`;
+      } else if (err.type === 'invalid') {
+        feedbackText = `${fieldNameTranslations[err.field].fi} on virheellinen.`;
       }
 
-      feedbackMessages.push((<div key={i} className='form--message'>{ feedbackText }</div>))
-    });
+      return <div key={err.field} className='form--message'>{feedbackText}</div>;
+    }
 
+    /* generate error messages */
+    var visibleErrors = inputErrors
+      .filter((error) => this.state.pristineFields.indexOf(error.field) === -1);
 
-    /* generate input fields */
-    var inputFields = [];
+    var fieldsWithErrors = visibleErrors.map(({ field }) => field);
 
-    fieldNames.forEach((fieldName) => {
+    var inputFields = fieldNames.map((fieldName) => {
       var inputClasses = classSet({
         'input': true,
         'has-error': _.includes(fieldsWithErrors, fieldName),
-        'half': fieldName == 'city' || fieldName == 'postcode',
-        'left': fieldName == 'city'
+        'half': fieldName === 'city' || fieldName === 'postcode',
+        'left': fieldName === 'city'
       });
 
-      inputFields.push((
-        <input
-          key         = { fieldName }
-          className   = { inputClasses }
-          type        = { fieldName == 'email' ? 'email' : 'text' }
-          name        = { fieldName }
-          placeholder = { fieldNameTranslations[fieldName].fi }
-          value       = { this.state[fieldName] }
-          onChange    = { this.onChange } />
-      ))
-    })
+      function showsErrorFor(field) {
+        if (fieldName === 'city') {
+          return false;
+        }
+
+        return field === fieldName || fieldName === 'postcode' && field === 'city';
+      }
+
+      return (
+        <span key={fieldName}>
+          <input
+            className={inputClasses}
+            type={fieldName === 'email' ? 'email' : 'text'}
+            name={fieldName}
+            placeholder={fieldNameTranslations[fieldName].fi}
+            value={this.state[fieldName]}
+            onChange={this.onChange} />
+          {
+            visibleErrors
+              .filter(({ field }) => showsErrorFor(field))
+              .map(getErrorMessage)
+
+          }
+        </span>
+      );
+    });
 
     return (
       <div>
-        <form className={ formClasses } onSubmit={ this.onSubmit }>
-          { feedbackMessages }
-          { inputFields }
-          <button
-            className = 'btn btn__submit'
-            type      = 'submit'
-            title     = 'Lähetä'
-            disabled  = { this.state.errors.length || this.state.submitted }>
-            Siirry maksamaan
-          </button>
-          <span
-            className='loader'>
-          </span>
+        <form className={formClasses}>
+          {inputFields}
+          {this.state.error && (
+            <div className='form--message'>
+              Jotain meni pieleen! Ota yhteyttä info@koodiklinikka.fi
+            </div>
+          )}
+          <StripeCheckout
+            amount={1000}
+            currency='EUR'
+            description='Jäsenmaksu'
+            email={this.state.email}
+            image='https://avatars3.githubusercontent.com/u/10520119?v=3&s=200'
+            locale='fi'
+            name='Koodiklinikka ry'
+            stripeKey={config.stripe.publicKey}
+            token={this.onSubmit}
+          >
+            <button
+              type='button'
+              disabled={inputErrors.length !== 0}
+              className='btn btn__submit'>
+              Siirry maksamaan
+            </button>
+          </StripeCheckout>
         </form>
       </div>
-    )
+    );
   }
 });
diff --git a/src/js/components/stripeCheckout.js b/src/js/components/stripeCheckout.js
deleted file mode 100644
index 98da3fb..0000000
--- a/src/js/components/stripeCheckout.js
+++ /dev/null
@@ -1,66 +0,0 @@
-'use strict';
-
-var request  = require('axios');
-var React    = require('react');
-var classSet = require('classnames');
-import StripeCheckout from 'react-stripe-checkout';
-
-var api      = require('../api');
-var config   = require('../../config.js')();
-
-module.exports = React.createClass({
-  getInitialState() {
-    return {
-      error:   null,
-      sending: false
-    };
-  },
-
-  onSubmit(token) {
-    this.setState({
-      error:   null,
-      sending: true
-    });
-
-    request.post(api('membership'), {
-      userInfo:    this.props.userInfo,
-      stripeToken: token.id
-    })
-    .then(() => {
-      this.setState({
-        sending: false
-      });
-      this.props.onPaymentSuccess();
-    })
-    .catch((e) => {
-      this.setState({
-        error: e,
-        sending: false
-      });
-    });
-  },
-
-  render() {
-    if (this.state.error) {
-      return <p>Virhe maksaessa! Ota yhteyttä info@koodiklinikka.fi</p>
-    } else if (this.state.sending) {
-      return <img src="../images/ajax-loader.gif" alt="Odota hetki..." height="42" width="42"></img>
-    } else {
-      return (<StripeCheckout
-        amount      = { 1000 }
-        currency    = 'EUR'
-        description = 'Jäsenmaksu'
-        email       = { this.props.userInfo.email }
-        image       = 'https://avatars3.githubusercontent.com/u/10520119?v=3&s=200'
-        locale      = "en"
-        name        = 'Koodiklinikka ry'
-        stripeKey   = { config.stripe.publicKey }
-        token       = { this.onSubmit }
-      >
-        <button className="btn btn-primary">
-          Maksa kortilla
-        </button>
-      </StripeCheckout>)
-    }
-  }
-});

From 073b2365e08fedc7f7349142ea250214c1276363 Mon Sep 17 00:00:00 2001
From: Riku Rouvila <riku.rouvila@gmail.com>
Date: Sat, 8 Jul 2017 19:25:16 +0100
Subject: [PATCH 2/4] add success icon and new loader animation

---
 src/assets/images/ajax-loader.gif       | Bin 4635 -> 0 bytes
 src/js/components/inviteForm.js         |  10 ++---
 src/js/components/loader.js             |  12 ++++++
 src/js/components/membershipForm.js     |   8 ++++
 src/js/components/membershipInfoForm.js |  12 +++++-
 src/styles/_loader.styl                 |  55 ++++++++++++++++++++++++
 src/styles/style.styl                   |  41 ++++++++----------
 src/yhdistys.jade                       |   1 -
 8 files changed, 107 insertions(+), 32 deletions(-)
 delete mode 100644 src/assets/images/ajax-loader.gif
 create mode 100644 src/js/components/loader.js
 create mode 100644 src/styles/_loader.styl

diff --git a/src/assets/images/ajax-loader.gif b/src/assets/images/ajax-loader.gif
deleted file mode 100644
index c35c95176f48fb3e85362bd1083a4dfdbd73585f..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 4635
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
SHP2MW&!79ua(37ZtodI;EBJK)

diff --git a/src/js/components/inviteForm.js b/src/js/components/inviteForm.js
index 768b235..07317ea 100644
--- a/src/js/components/inviteForm.js
+++ b/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>
-      )
+    );
   }
 });
diff --git a/src/js/components/loader.js b/src/js/components/loader.js
new file mode 100644
index 0000000..80f58c2
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/src/js/components/membershipForm.js b/src/js/components/membershipForm.js
index 253bfb8..ceb30be 100644
--- a/src/js/components/membershipForm.js
+++ b/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>
diff --git a/src/js/components/membershipInfoForm.js b/src/js/components/membershipInfoForm.js
index 67fe7db..f9774a4 100644
--- a/src/js/components/membershipInfoForm.js
+++ b/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 && (
diff --git a/src/styles/_loader.styl b/src/styles/_loader.styl
new file mode 100644
index 0000000..71eb8f5
--- /dev/null
+++ b/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
+
+
diff --git a/src/styles/style.styl b/src/styles/style.styl
index d3a67f0..215a882 100644
--- a/src/styles/style.styl
+++ b/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
diff --git a/src/yhdistys.jade b/src/yhdistys.jade
index bc097a9..f7e441a 100644
--- a/src/yhdistys.jade
+++ b/src/yhdistys.jade
@@ -32,7 +32,6 @@ block content
       .row
         .bread
           .column.column1-2
-            h3 Liity jäseneksi
             #membership-form.form
 
           .column.column1-2

From 89ed19c833b85ef71486f9e3dacedd5c252d156b Mon Sep 17 00:00:00 2001
From: Riku Rouvila <riku.rouvila@gmail.com>
Date: Sat, 8 Jul 2017 20:09:02 +0100
Subject: [PATCH 3/4] add notification icon to 'Yhdistys' link

---
 src/styles/_header.styl | 24 ++++++++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/styles/_header.styl b/src/styles/_header.styl
index baddeb7..db74ade 100644
--- a/src/styles/_header.styl
+++ b/src/styles/_header.styl
@@ -35,13 +35,33 @@ headerHeight = 400px
     top 20px
   a
     color white
-    font-size 18px
+    font-size 16px
+    font-weight bold
     margin-left 16px
     text-shadow 0 2px 0 rgba(0,0,0,0.1)
-    @media screen and (max-width: 1030px)
+    position relative
+    @media screen and (max-width: 420px)
       display block
       margin-top 5px
 
+    &:last-child
+      margin-left 1.5em
+      &:before
+        content '!'
+        font-size 11px
+        line-height 15px
+        width 14px
+        height 14px
+        text-align center
+        background #ec3d3d
+        display inline-block
+        margin-right 5px
+        top -5px
+        right -15px
+        border-radius 100%
+        position absolute
+        text-shadow none
+
 .header__headline
   display table-cell
   padding 0 1em

From a8f6e3c61f2671d65a444687aacca25d23391eef Mon Sep 17 00:00:00 2001
From: Riku Rouvila <riku.rouvila@gmail.com>
Date: Sat, 8 Jul 2017 20:09:21 +0100
Subject: [PATCH 4/4] fix nordea logo wrapping

---
 src/styles/style.styl | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/styles/style.styl b/src/styles/style.styl
index 215a882..8538de8 100644
--- a/src/styles/style.styl
+++ b/src/styles/style.styl
@@ -210,7 +210,7 @@ footer
   justify-content space-between
   flex-wrap wrap
   text-align center
-  @media screen and (max-width: 760px)
+  @media screen and (max-width: 940px)
     display block
   i
     margin 0 0.30em
@@ -222,7 +222,7 @@ footer
   display flex
   flex-direction column
   justify-content center
-  @media screen and (max-width: 760px)
+  @media screen and (max-width: 940px)
     margin-top 1em
 
 .sponsors
@@ -243,16 +243,17 @@ footer
   height 40px
   margin-right 1em
   vertical-align middle
-  @media screen and (max-width: 760px)
+  @media screen and (max-width: 940px)
     margin-top 1em
 
-
 .sponsor__futurice, .sponsor__metosin, .sponsor__leonidas
   height 30px
 
 .sponsor__nordea
   height 25px
-  margin-top: -3px
+  margin-top -3px
+  @media screen and (max-width: 940px)
+    margin-top 1em
 
 .feed
   width feedWidth