From e53261bd2dc564aed2a96d6e6b010f43553c31bf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20Benqu=C3=A9?= <mail@davidbenque.com>
Date: Thu, 2 Sep 2021 10:53:16 +0100
Subject: [PATCH] Improve condition editor UI layout

---
 www/form/app-form.less | 10 +++++++---
 www/form/inner.js      |  5 ++---
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/www/form/app-form.less b/www/form/app-form.less
index 8d1cee891..b348411f1 100644
--- a/www/form/app-form.less
+++ b/www/form/app-form.less
@@ -179,12 +179,15 @@
 
 
                 .cp-form-conditional {
+                    .cp-form-conditional-hint {
+                        margin-bottom: 10px;
+                    }
                     .cp-form-condition {
                         display: flex;
                         align-items: center;
-                        justify-content: center;
+                        margin-bottom: 10px;
                         & > *:not(:first-child) {
-                            margin-left: 40px;
+                            margin-left: 10px;
                         }
                         .cp-dropdown-container button {
                             max-width: 200px;
@@ -202,8 +205,9 @@
 
                 div.cp-form-section-sortable {
                     min-height: 300px;
-                    border: 4px dotted white; // XXX
+                    border: 2px dashed @cryptpad_text_col; // XXX
                     padding: 20px;
+                    margin-top: 10px;
                     background: @cp_app-bg;
                     .cp-form-creator-add-inline {
                         button[data-type="section"] {
diff --git a/www/form/inner.js b/www/form/inner.js
index ad290df1a..b0dc698ae 100644
--- a/www/form/inner.js
+++ b/www/form/inner.js
@@ -1013,7 +1013,6 @@ define([
                 var tag = h('div.cp-form-section-edit', [
                     h('i.fa.fa-question'),
                     h('span', Messages.form_type_section),
-                    h('hr'),
                     sortable
                 ]);
                 if (APP.isEditor) {
@@ -3156,10 +3155,10 @@ define([
 
 
                 };
-                Messages.form_conditional = "Only show this question when:"; // XXX
+                Messages.form_conditional = "Only show this section when:"; // XXX
 
                 conditionalDiv = h('div.cp-form-conditional', [
-                    h('div', Messages.form_conditional),
+                    h('div.cp-form-conditional-hint', Messages.form_conditional),
                     addCondition
                 ]);
                 var $condition = $(conditionalDiv);