From bf244e2bfaf8173b5552d36e7721d6e99040d4c5 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Wed, 16 Dec 2015 19:03:01 +0100
Subject: [PATCH] Add padding-bottom to ascribe-property instead of
 ascribe-property-wrapper

Avoids having to style all the collapsible Properties with
`padding-bottom: 0` to center labels when collapsed.
---
 js/components/ascribe_forms/form_consign.js               | 3 +--
 js/components/ascribe_forms/form_copyright_association.js | 5 ++---
 js/components/ascribe_forms/form_loan.js                  | 3 +--
 .../ascribe_forms/form_send_contract_agreement.js         | 3 +--
 js/components/ascribe_forms/form_signup.js                | 5 ++---
 js/components/ascribe_forms/form_submit_to_prize.js       | 3 +--
 .../ascribe_forms/input_contract_agreement_checkbox.js    | 2 +-
 js/components/ascribe_settings/account_settings.js        | 5 ++---
 .../components/pr_forms/pr_register_piece_form.js         | 3 +--
 .../prize/simple_prize/components/prize_register_piece.js | 3 +--
 sass/ascribe_property.scss                                | 8 ++------
 11 files changed, 15 insertions(+), 28 deletions(-)

diff --git a/js/components/ascribe_forms/form_consign.js b/js/components/ascribe_forms/form_consign.js
index 2f0ebf05..c92f4b6f 100644
--- a/js/components/ascribe_forms/form_consign.js
+++ b/js/components/ascribe_forms/form_consign.js
@@ -115,8 +115,7 @@ let ConsignForm = React.createClass({
                 <Property
                     name='contract_agreement'
                     label={getLangText('Consign Contract')}
-                    className="ascribe-property-collapsible-toggle"
-                    style={{paddingBottom: 0}}>
+                    className="ascribe-property-collapsible-toggle">
                     <InputContractAgreementCheckbox
                         createPublicContractAgreement={createPublicContractAgreement}
                         email={email} />
diff --git a/js/components/ascribe_forms/form_copyright_association.js b/js/components/ascribe_forms/form_copyright_association.js
index c378ddba..124a980a 100644
--- a/js/components/ascribe_forms/form_copyright_association.js
+++ b/js/components/ascribe_forms/form_copyright_association.js
@@ -48,8 +48,7 @@ let CopyrightAssociationForm = React.createClass({
                     <Property
                         name="copyright_association"
                         className="ascribe-property-collapsible-toggle"
-                        label={getLangText('Copyright Association')}
-                        style={{paddingBottom: 0}}>
+                        label={getLangText('Copyright Association')}>
                         <select defaultValue={selectedState} name="contract">
                             <option
                                 name={0}
@@ -77,4 +76,4 @@ let CopyrightAssociationForm = React.createClass({
     }
 });
 
-export default CopyrightAssociationForm;
\ No newline at end of file
+export default CopyrightAssociationForm;
diff --git a/js/components/ascribe_forms/form_loan.js b/js/components/ascribe_forms/form_loan.js
index 53a3bb80..15052f4a 100644
--- a/js/components/ascribe_forms/form_loan.js
+++ b/js/components/ascribe_forms/form_loan.js
@@ -202,8 +202,7 @@ let LoanForm = React.createClass({
                 <Property
                     name='contract_agreement'
                     label={getLangText('Loan Contract')}
-                    className="ascribe-property-collapsible-toggle"
-                    style={{paddingBottom: 0}}>
+                    className="ascribe-property-collapsible-toggle">
                     <InputContractAgreementCheckbox
                         createPublicContractAgreement={createPublicContractAgreement}
                         email={email} />
diff --git a/js/components/ascribe_forms/form_send_contract_agreement.js b/js/components/ascribe_forms/form_send_contract_agreement.js
index 6f5f74d7..9703571f 100644
--- a/js/components/ascribe_forms/form_send_contract_agreement.js
+++ b/js/components/ascribe_forms/form_send_contract_agreement.js
@@ -128,8 +128,7 @@ let SendContractAgreementForm = React.createClass({
                     <Property
                         name='appendix'
                         checkboxLabel={getLangText('Add appendix to the contract')}
-                        expanded={false}
-                        style={{paddingBottom: 0}}>
+                        expanded={false}>
                         <span>{getLangText('Appendix')}</span>
                         {/* We're using disabled on a form here as PropertyCollapsible currently
                         does not support the disabled + overrideForm functionality */}
diff --git a/js/components/ascribe_forms/form_signup.js b/js/components/ascribe_forms/form_signup.js
index 22f3e120..c0c8ef8d 100644
--- a/js/components/ascribe_forms/form_signup.js
+++ b/js/components/ascribe_forms/form_signup.js
@@ -57,7 +57,7 @@ let SignupForm = React.createClass({
         if (response.user) {
             let notification = new GlobalNotificationModel(getLangText('Sign up successful'), 'success', 50000);
             GlobalNotificationActions.appendGlobalNotification(notification);
-            
+
             // Refactor this to its own component
             this.props.handleSuccess(getLangText('We sent an email to your address') + ' ' + response.user.email + ', ' + getLangText('please confirm') + '.');
         } else {
@@ -131,8 +131,7 @@ let SignupForm = React.createClass({
                 {this.props.children}
                 <Property
                     name="terms"
-                    className="ascribe-property-collapsible-toggle"
-                    style={{paddingBottom: 0}}>
+                    className="ascribe-property-collapsible-toggle">
                     <InputCheckbox>
                         <span>
                             {' ' + getLangText('I agree to the Terms of Service of ascribe') + ' '}
diff --git a/js/components/ascribe_forms/form_submit_to_prize.js b/js/components/ascribe_forms/form_submit_to_prize.js
index 5818a9ce..43f28e2a 100644
--- a/js/components/ascribe_forms/form_submit_to_prize.js
+++ b/js/components/ascribe_forms/form_submit_to_prize.js
@@ -66,8 +66,7 @@ let PieceSubmitToPrizeForm = React.createClass({
                 </Property>
                 <Property
                     name="terms"
-                    className="ascribe-property-collapsible-toggle"
-                    style={{paddingBottom: 0}}>
+                    className="ascribe-property-collapsible-toggle">
                     <InputCheckbox>
                         <span>
                             {' ' + getLangText('I agree to the Terms of Service the art price') + ' '}
diff --git a/js/components/ascribe_forms/input_contract_agreement_checkbox.js b/js/components/ascribe_forms/input_contract_agreement_checkbox.js
index 61235631..7008fe31 100644
--- a/js/components/ascribe_forms/input_contract_agreement_checkbox.js
+++ b/js/components/ascribe_forms/input_contract_agreement_checkbox.js
@@ -156,7 +156,7 @@ const InputContractAgreementCheckbox = React.createClass({
                 return (
                     <div
                         className="notification-contract-pdf"
-                        style={{paddingBottom: '1em'}}>
+                        style={{paddingBottom: '0.25em'}}>
                         <embed
                             className="embed-form"
                             src={contractUrl}
diff --git a/js/components/ascribe_settings/account_settings.js b/js/components/ascribe_settings/account_settings.js
index c650358c..57d66171 100644
--- a/js/components/ascribe_settings/account_settings.js
+++ b/js/components/ascribe_settings/account_settings.js
@@ -35,7 +35,7 @@ let AccountSettings = React.createClass({
     getFormDataProfile(){
         return {'email': this.props.currentUser.email};
     },
-    
+
     render() {
         let content = <AscribeSpinner color='dark-blue' size='lg'/>;
         let profile = null;
@@ -78,8 +78,7 @@ let AccountSettings = React.createClass({
                         getFormData={this.getFormDataProfile}>
                         <Property
                             name="hash_locally"
-                            className="ascribe-property-collapsible-toggle"
-                            style={{paddingBottom: 0}}>
+                            className="ascribe-property-collapsible-toggle">
                             <InputCheckbox
                                 defaultChecked={this.props.currentUser.profile.hash_locally}>
                                 <span>
diff --git a/js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js b/js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js
index a8d946b5..e1f7023c 100644
--- a/js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js
+++ b/js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js
@@ -379,8 +379,7 @@ const PRRegisterPieceForm = React.createClass({
                     className="ascribe-form-bordered">
                     <Property
                         name="terms"
-                        className="ascribe-property-collapsible-toggle"
-                        style={{paddingBottom: 0}}>
+                        className="ascribe-property-collapsible-toggle">
                         <span>
                             {getLangText('By submitting this form, you agree to the') + ' '}
                             <a
diff --git a/js/components/whitelabel/prize/simple_prize/components/prize_register_piece.js b/js/components/whitelabel/prize/simple_prize/components/prize_register_piece.js
index ca4e8fa9..26d517c2 100644
--- a/js/components/whitelabel/prize/simple_prize/components/prize_register_piece.js
+++ b/js/components/whitelabel/prize/simple_prize/components/prize_register_piece.js
@@ -71,8 +71,7 @@ let PrizeRegisterPiece = React.createClass({
                         </Property>
                         <Property
                             name="terms"
-                            className="ascribe-property-collapsible-toggle"
-                            style={{paddingBottom: 0}}>
+                            className="ascribe-property-collapsible-toggle">
                             <InputCheckbox>
                                 <span>
                                     {' ' + getLangText('I agree to the Terms of Service the art price') + ' '}
diff --git a/sass/ascribe_property.scss b/sass/ascribe_property.scss
index d214c57e..ee12f413 100644
--- a/sass/ascribe_property.scss
+++ b/sass/ascribe_property.scss
@@ -3,7 +3,6 @@ $ascribe-red-error: rgb(169, 68, 66);
 .ascribe-property-wrapper {
     background-color: white;
     border-left: 3px solid rgba(0, 0, 0, 0);
-    padding-bottom: 1em;
     text-align: center;
     width: 100%;
 
@@ -37,7 +36,6 @@ $ascribe-red-error: rgb(169, 68, 66);
                 margin-right: 1em;
             }
         }
-        
 
         > input,
         > textarea {
@@ -74,9 +72,7 @@ $ascribe-red-error: rgb(169, 68, 66);
     border-top: 1px solid rgba(0, 0, 0, .05);
     cursor: pointer;
     display: inline-block;
-    padding-left: 1.5em;
-    padding-right: 1.5em;
-    padding-top: 1em;
+    padding: 1em 1.5em;
     text-align: left;
     width: 100%;
 
@@ -233,4 +229,4 @@ $ascribe-red-error: rgb(169, 68, 66);
     > span > span {
         margin-top: 0;
     }
-}
\ No newline at end of file
+}