iPhone polish (#865)

* fix formatting of refactored donation on iPhone

* push iphone-polish branch to staging

* make braintree CC placeholders easier to read

app/assets/stylesheets/member-facing/form.scss

@@ -69,6 +69,11 @@
     select {
       height: 58px;
     }
+    @media(max-width: 420px) {
+      input:not([type=checkbox]):not([type=radio]) {
+        -webkit-appearance: none;
+      }
+    }
 
     label.checkbox-label, .form__instruction {
       margin: 10px 0 4px;
@@ -145,8 +150,8 @@ label.checkbox-label {
     pointer-events: auto;
     color: rgba(black, 0.4);
     transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
-    transform: scale(1) translate3d(0px, 0px, 0px);
-    transform-origin: left top 0px;
+    @include transform(scale(1) translate3d(0px, 0px, 0px));
+    @include transform-origin(left, top, 0px);
     -webkit-user-select: none;
     font-size: 18px;
     line-height: 28px;
@@ -164,7 +169,7 @@ label.checkbox-label {
       color: rgba(black, 0.6);
     }
     &--active, &--full {
-      transform: perspective(1px) scale(0.6) translate3d(0px, -15px, 0px);
+      @include transform(perspective(1px) scale(0.6) translate3d(0px, -15px, 0px));
       max-width: 170%;
     }
   }

app/frontend/components/Braintree/BraintreeCardFields.js

@@ -62,7 +62,7 @@ class BraintreeCardFields extends Component {
       client,
       styles: {
         input: {
-          color: '#ccc',
+          color: '#333',
           'font-size': '16px',
         },
         ':focus': { color: '#333' },

app/frontend/components/Button/Button.scss

@@ -22,6 +22,10 @@
     font-size: 20px;
   }
 }
+.Button-root > span {
+  margin-left: auto;
+  margin-right: auto;
+}
 
 .Button-root.disabled,
 .Button-root.disabled:hover,

app/frontend/components/Checkbox/Checkbox.scss

@@ -17,5 +17,6 @@
     top: -3px;
     cursor: pointer;
     max-width: 16px;
+    padding: 0;
   }
 }

app/frontend/components/ExpressDonation/ExpressDonation.scss

@@ -47,6 +47,7 @@
 .PaymentMethod input {
   height: 14px;
   width: 14px;
+  padding: 0;
 }
 
 .PaymentMethodWrapper__icon {

app/frontend/components/SweetInput/SweetInput.js

@@ -1,7 +1,6 @@
 // @flow weak
 import React, { Component } from 'react';
 import classnames from 'classnames';
-import './SweetInput.css';
 
 type OwnProps = {
   name: string;

circle.yml

@@ -50,7 +50,7 @@ deployment:
       - ./bin/build.sh
       - ./bin/deploy.sh $CIRCLE_SHA1 'champaign' 'env-production' 'champaign-assets-production' 'logs3.papertrailapp.com:44107' 'actions.sumofus.org'
   staging:
-    branch: development
+    branch: iphone-polish
     commands:
       - ./bin/build.sh
       - ./bin/deploy.sh $CIRCLE_SHA1 'champaign' 'champaign-staging' 'champaign-assets-staging' 'logs3.papertrailapp.com:34848' 'action-staging.sumofus.org'