From 24f0d84fbc7b68f204e009a89506cdc296ad7006 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Mon, 14 Sep 2015 17:38:26 +0200
Subject: [PATCH] finalize contract settings layout

---
 .../ascribe_settings/contract_settings.js     | 157 +++++++++---------
 .../ascribe_settings/settings_container.js    |   2 -
 .../file_drag_and_drop_preview_other.js       |   2 +-
 sass/ascribe_collapsible.scss                 |   5 +-
 4 files changed, 79 insertions(+), 87 deletions(-)

diff --git a/js/components/ascribe_settings/contract_settings.js b/js/components/ascribe_settings/contract_settings.js
index ed07e33f..0e53c13b 100644
--- a/js/components/ascribe_settings/contract_settings.js
+++ b/js/components/ascribe_settings/contract_settings.js
@@ -95,91 +95,86 @@ let ContractSettings = React.createClass({
 
         return (
             <CollapsibleParagraph
-                title={getLangText('Contract Settings')}
+                title={getLangText('Contracts')}
                 show={true}
-                defaultExpanded={true}>
+                defaultExpanded={false}>
                 <CollapsibleParagraph
-                    title={getLangText('List Contracts')}
+                    title={getLangText('Public Contracts')}
                     show={true}
                     defaultExpanded={true}>
-                    <CollapsibleParagraph
-                        title={getLangText('Public Contracts')}
-                        show={true}
-                        defaultExpanded={true}>
-                        {createPublicContractForm}
-                        {publicContracts.map((contract, i) => {
-                            return (
-                                <ActionPanel
-                                    key={i}
-                                    title={contract.name}
-                                    content={contract.name}
-                                    buttons={
-                                        <div className="pull-right">
-                                           <button className="btn btn-default btn-sm margin-left-2px">
-                                                UPDATE
-                                           </button>
-                                           <a
-                                                className="btn btn-default btn-sm margin-left-2px"
-                                                href={contract.blob.url_safe}
-                                                target="_blank">
-                                                PREVIEW
-                                           </a>
-                                           <button
-                                                className="btn btn-default btn-sm margin-left-2px"
-                                                onClick={this.removeContract(contract)}>
-                                                REMOVE
-                                            </button>
-                                       </div>
-                                    }
-                                    leftColumnWidth="40%"
-                                    rightColumnWidth="60%"/>
-                            );
-                        })}
-                    </CollapsibleParagraph>
-                    <CollapsibleParagraph
-                        title={getLangText('Private Contracts')}
-                        show={true}
-                        defaultExpanded={true}>
-                        <CreateContractForm
-                            isPublic={false}
-                            fileClassToUpload={{
-                                singular: 'new private contract',
-                                plural: 'new private contracts'
-                            }}/>
-                        {privateContracts.map((contract, i) => {
-                            return (
-                                <ActionPanel
-                                    key={i}
-                                    title={contract.name}
-                                    content={contract.name}
-                                    buttons={
-                                        <div className="pull-right">
-                                            <button
-                                                className="btn btn-default btn-sm margin-left-2px"
-                                                onClick={this.makeContractPublic(contract)}>
-                                                MAKE PUBLIC
-                                            </button>
-                                           <button className="btn btn-default btn-sm margin-left-2px">
-                                                UPDATE
-                                            </button>
-                                            <a
-                                                className="btn btn-default btn-sm margin-left-2px"
-                                                href={contract.blob.url_safe}
-                                                target="_blank">
-                                                PREVIEW
-                                           </a>
-                                            <button
-                                                className="btn btn-default btn-sm margin-left-2px"
-                                                onClick={this.removeContract(contract)}>
-                                                REMOVE
-                                            </button>
-                                       </div>
-                                   }
-                                   leftColumnWidth="40%"
-                                   rightColumnWidth="60%"/>
-                            );
-                        })}
-                    </CollapsibleParagraph>
+                    {createPublicContractForm}
+                    {publicContracts.map((contract, i) => {
+                        return (
+                            <ActionPanel
+                                key={i}
+                                title={contract.name}
+                                content={contract.name}
+                                buttons={
+                                    <div className="pull-right">
+                                       <button className="btn btn-default btn-sm margin-left-2px">
+                                            UPDATE
+                                       </button>
+                                       <a
+                                            className="btn btn-default btn-sm margin-left-2px"
+                                            href={contract.blob.url_safe}
+                                            target="_blank">
+                                            PREVIEW
+                                       </a>
+                                       <button
+                                            className="btn btn-default btn-sm margin-left-2px"
+                                            onClick={this.removeContract(contract)}>
+                                            REMOVE
+                                        </button>
+                                   </div>
+                                }
+                                leftColumnWidth="40%"
+                                rightColumnWidth="60%"/>
+                        );
+                    })}
+                </CollapsibleParagraph>
+                <CollapsibleParagraph
+                    title={getLangText('Private Contracts')}
+                    show={true}
+                    defaultExpanded={true}>
+                    <CreateContractForm
+                        isPublic={false}
+                        fileClassToUpload={{
+                            singular: 'new private contract',
+                            plural: 'new private contracts'
+                        }}/>
+                    {privateContracts.map((contract, i) => {
+                        return (
+                            <ActionPanel
+                                key={i}
+                                title={contract.name}
+                                content={contract.name}
+                                buttons={
+                                    <div className="pull-right">
+                                        <button
+                                            className="btn btn-default btn-sm margin-left-2px"
+                                            onClick={this.makeContractPublic(contract)}>
+                                            MAKE PUBLIC
+                                        </button>
+                                       <button className="btn btn-default btn-sm margin-left-2px">
+                                            UPDATE
+                                        </button>
+                                        <a
+                                            className="btn btn-default btn-sm margin-left-2px"
+                                            href={contract.blob.url_safe}
+                                            target="_blank">
+                                            PREVIEW
+                                       </a>
+                                        <button
+                                            className="btn btn-default btn-sm margin-left-2px"
+                                            onClick={this.removeContract(contract)}>
+                                            REMOVE
+                                        </button>
+                                   </div>
+                               }
+                               leftColumnWidth="40%"
+                               rightColumnWidth="60%"/>
+                        );
+                    })}
                 </CollapsibleParagraph>
             </CollapsibleParagraph>
         );
diff --git a/js/components/ascribe_settings/settings_container.js b/js/components/ascribe_settings/settings_container.js
index 485b26d7..2d2440bf 100644
--- a/js/components/ascribe_settings/settings_container.js
+++ b/js/components/ascribe_settings/settings_container.js
@@ -26,8 +26,6 @@ let SettingsContainer = React.createClass({
                 <APISettings />
                 <BitcoinWalletSettings />
                 <ContractSettings />
-                <br />
-                <br />
             </div>
         );
     }
diff --git a/js/components/ascribe_uploader/file_drag_and_drop_preview_other.js b/js/components/ascribe_uploader/file_drag_and_drop_preview_other.js
index 1d948572..205eb177 100644
--- a/js/components/ascribe_uploader/file_drag_and_drop_preview_other.js
+++ b/js/components/ascribe_uploader/file_drag_and_drop_preview_other.js
@@ -59,7 +59,7 @@ let FileDragAndDropPreviewOther = React.createClass({
                 <div className="file-drag-and-drop-preview-table-wrapper">
                     <div className="file-drag-and-drop-preview-other">
                         {actionSymbol}
-                        <span>{'.' + this.props.type}</span>
+                        <p>{'.' + this.props.type}</p>
                     </div>
                 </div>
             </div>
diff --git a/sass/ascribe_collapsible.scss b/sass/ascribe_collapsible.scss
index 2b65567c..99b03f60 100644
--- a/sass/ascribe_collapsible.scss
+++ b/sass/ascribe_collapsible.scss
@@ -24,9 +24,8 @@
     background: none;
     border: 0;
     width: 100%;
-    
-    /* Shrink the size of the headline for a nested element */
-    .ascribe-collapsible-wrapper > .ascribe-collapsible-content {
+
+    .ascribe-collapsible-wrapper {
         padding-left: 1em;
         font-size: 95%;
     }