From 1a1ed33db407c9774778294c1f59b5f60647c4f0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20Benqu=C3=A9?= <mail@davidbenque.com>
Date: Mon, 7 Jun 2021 11:06:22 +0100
Subject: [PATCH] Add spacing to block edit UI

---
 www/form/app-form.less | 25 ++++++++++++++++++++++++-
 www/form/inner.js      |  6 +++---
 2 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/www/form/app-form.less b/www/form/app-form.less
index abe5dafd8..278e1d1db 100644
--- a/www/form/app-form.less
+++ b/www/form/app-form.less
@@ -253,6 +253,7 @@
                             }
                         }
                         .cp-form-edit-buttons-container {
+                            margin-top: 20px;
                             display: flex;
                             justify-content: space-between;
                         }
@@ -297,11 +298,26 @@
                             line-height: 31px;
                         }
                     }
-                    &.editable { cursor: grab; }
+                    &.editable {
+                        cursor: grab;
+                        .cp-form-edit-save {
+                            margin-top: 20px;
+                            button {
+                                margin-right: 10px;
+                            }
+                        }
+                        .cp-form-edit-type {
+                            margin-bottom: 10px;
+                            .cp-dropdown-container {
+                                margin-left: 10px;
+                            }
+                        }
+                    }
                 }
                 .cp-form-edit-max-options {
                     display: flex;
                     align-items: center;
+                    margin-bottom: 10px;
                     input {
                         width: 100px;
                         margin-left: 10px;
@@ -326,6 +342,10 @@
                     }
                 }
                 .cp-form-edit-block {
+
+                    button.btn-secondary {
+                        margin-left: 30px;
+                    }
                     .cp-form-handle {
                         display: flex;
                         align-items: center;
@@ -337,6 +357,7 @@
                         }
                     }
                     .cp-form-edit-block-input {
+                        margin-bottom: 5px; // XXX DB margin bug
                         &.sortable-ghost { visibility: hidden; }
                         &.sortable-drag { opacity: 0.9 !important; }
                         display: flex;
@@ -344,6 +365,8 @@
                         input {
                             flex: 1;
                             min-width: 100px;
+                            border-color: @cryptpad_text_col;
+                            border-right: 0px;
                         }
                         button {
                             i { margin: 0 !important; }
diff --git a/www/form/inner.js b/www/form/inner.js
index 01b4a3055..fcf1cc349 100644
--- a/www/form/inner.js
+++ b/www/form/inner.js
@@ -187,7 +187,7 @@ define([
             cb(getRes());
         });
 
-        return h('div', [cancelBlock, saveBlock]);
+        return h('div.cp-form-edit-save', [cancelBlock, saveBlock]);
     };
     var editTextOptions = function (opts, setCursorGetter, cb, tmp) {
         if (tmp && tmp.content && Sortify(opts) === Sortify(tmp.old)) {
@@ -371,7 +371,7 @@ define([
                 if (cursor && cursor.el === val && !cursor.item) { setCursor(); }
             }
 
-            var del = h('button.btn.btn-danger', h('i.fa.fa-times'));
+            var del = h('button.btn.btn-danger-outline', h('i.fa.fa-times'));
             var el = h('div.cp-form-edit-block-input', [
                 h('span.cp-form-handle', [
                     h('i.fa.fa-ellipsis-v'),
@@ -845,7 +845,7 @@ define([
 
                         return [
                             block,
-                            h('div', [cancelBlock, saveBlock])
+                            h('div.cp-form-edit-save', [cancelBlock, saveBlock])
                         ];
                     },
                     getCursor: function () { return cursorGetter(); },