From 38b7dcd79fa5aa675a8a053e394767cc1a056361 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Tue, 8 Sep 2015 10:15:26 +0200
Subject: [PATCH] finalize contract styles

---
 js/components/ascribe_panel/action_panel.js   | 17 +++++++--
 .../ascribe_settings/contract_settings.js     | 37 +++++++++++--------
 2 files changed, 35 insertions(+), 19 deletions(-)

diff --git a/js/components/ascribe_panel/action_panel.js b/js/components/ascribe_panel/action_panel.js
index 3146f1ba..f6fe9a70 100644
--- a/js/components/ascribe_panel/action_panel.js
+++ b/js/components/ascribe_panel/action_panel.js
@@ -12,8 +12,12 @@ let ActionPanel = React.createClass({
         ]),
         buttons: React.PropTypes.element,
         onClick: React.PropTypes.func,
-        ignoreFocus: React.PropTypes.bool
+        ignoreFocus: React.PropTypes.bool,
+
+        leftColumnWidth: React.PropTypes.string,
+        rightColumnWidth: React.PropTypes.string
     },
+
     getInitialState() {
         return {
             isFocused: false
@@ -40,14 +44,21 @@ let ActionPanel = React.createClass({
     },
 
     render() {
+
+        let { leftColumnWidth, rightColumnWidth } = this.props;
+
         return (
             <div className={classnames('ascribe-panel-wrapper', {'is-focused': this.state.isFocused})}>
-                <div className="ascribe-panel-table">
+                <div
+                    className="ascribe-panel-table"
+                    style={{width: leftColumnWidth}}>
                     <div className="ascribe-panel-content">
                         {this.props.content}
                     </div>
                 </div>
-                <div className="ascribe-panel-table">
+                <div
+                    className="ascribe-panel-table"
+                    style={{width: rightColumnWidth}}>
                     <div className="ascribe-panel-content">
                         {this.props.buttons}
                     </div>
diff --git a/js/components/ascribe_settings/contract_settings.js b/js/components/ascribe_settings/contract_settings.js
index 16225dc9..72d2b233 100644
--- a/js/components/ascribe_settings/contract_settings.js
+++ b/js/components/ascribe_settings/contract_settings.js
@@ -81,7 +81,7 @@ let ContractSettings = React.createClass({
                                     title={contract.name}
                                     content={contract.name}
                                     buttons={
-                                        <span>
+                                        <div className="pull-right">
                                            <button className="btn btn-default btn-sm margin-left-2px">
                                                 UPDATE
                                            </button>
@@ -89,8 +89,11 @@ let ContractSettings = React.createClass({
                                             onClick={this.removeContract.bind(this, contract)}>
                                                 REMOVE
                                             </button>
-                                       </span>
-                                }/>
+                                       </div>
+                                    }
+                                    leftColumnWidth="40%"
+                                    rightColumnWidth="60%"
+                                />
                             );
                         })}
                     </CollapsibleParagraph>
@@ -104,20 +107,22 @@ let ContractSettings = React.createClass({
                                     title={contract.name}
                                     content={contract.name}
                                     buttons={
-                                        <span>
+                                        <div className="pull-right">
                                            <button className="btn btn-default btn-sm margin-left-2px">
-                                                    UPDATE
-                                                </button>
-                                                <button className="btn btn-default btn-sm margin-left-2px"
-                                                onClick={this.removeContract.bind(this, contract)}>
-                                                    REMOVE
-                                                </button>
-                                                <button className="btn btn-default btn-sm margin-left-2px"
-                                                onClick={this.makeContractPublic.bind(this, contract)}>
-                                                    MAKE PUBLIC
-                                                </button>
-                                       </span>
-                                }/>
+                                                UPDATE
+                                            </button>
+                                            <button className="btn btn-default btn-sm margin-left-2px"
+                                            onClick={this.removeContract.bind(this, contract)}>
+                                                REMOVE
+                                            </button>
+                                            <button className="btn btn-default btn-sm margin-left-2px"
+                                            onClick={this.makeContractPublic.bind(this, contract)}>
+                                                MAKE PUBLIC
+                                            </button>
+                                       </div>
+                                   }
+                                   leftColumnWidth="40%"
+                                   rightColumnWidth="60%"/>
                             );
                         })}
                     </CollapsibleParagraph>