From 57e801da98d04b6b6f1edf12f5e54ca548f63bca Mon Sep 17 00:00:00 2001
From: David Benque <david.benque@xwiki.com>
Date: Wed, 14 Sep 2022 13:52:50 +0100
Subject: [PATCH] Improve layout of calendar event pop-up

---
 www/calendar/app-calendar.less | 39 ++++++++++++++++++++++++++++------
 www/calendar/inner.js          | 13 +++++++-----
 2 files changed, 40 insertions(+), 12 deletions(-)

diff --git a/www/calendar/app-calendar.less b/www/calendar/app-calendar.less
index e7290d2c4..6bb68286e 100644
--- a/www/calendar/app-calendar.less
+++ b/www/calendar/app-calendar.less
@@ -134,13 +134,24 @@
             border-color: @cp_calendar-border !important;
 
         }
+        .tui-full-calendar-popup {
+            border-radius: @variables_radius_L;
+        }
         .tui-full-calendar-popup-container {
             background: @cp_flatpickr-bg;
             color: @cryptpad_text_col;
-            border-radius: @variables_radius;
+            border-radius: @variables_radius_L;
+            font-weight: normal;
             .tui-full-calendar-icon:not(.tui-full-calendar-calendar-dot):not(.tui-full-calendar-dropdown-arrow):not(.tui-full-calendar-ic-checkbox) {
                 display: none;
             }
+            .tui-full-calendar-section-button-save {
+                height: 40px;
+                .btn-primary { // Update button
+                    margin-right: 0px;
+                }
+            }
+
         }
         li.tui-full-calendar-popup-section-item {
             padding: 0 6px;
@@ -235,14 +246,25 @@
             }
         }
 
+        .cp-recurrence-label, .cp-notif-label {
+            color: @cryptpad_text_col;
+            margin-right: 1rem;
+            i {
+                margin-right: 0.5rem;
+            }
+        }
+
+        .cp-calendar-recurrence-container {
+            margin-top: 1rem;
+            .cp-calendar-rec-translated-str {
+                margin-top: 0.5rem;
+            }
+        }
+
         .cp-calendar-add-notif {
             flex-flow: column;
             align-items: baseline !important;
-            margin: 10px 0;
-            .cp-notif-label {
-                color: @cp_sidebar-hint;
-                margin-right: 20px;
-            }
+            margin: 1rem 0;
             * {
                 font-size: @colortheme_app-font-size;
                 font-weight: normal;
@@ -279,7 +301,7 @@
             }
             .cp-calendar-notif-form {
                 align-items: center;
-                margin-bottom: 20px;
+                // margin-bottom: 20px;
                 input {
                     width: 80px;
                     margin-right: 5px;
@@ -288,7 +310,10 @@
         }
 
         .cp-calendar-close {
+            top: 17px;
+            right: 17px;
             height: auto;
+            margin-right: 0px;
             line-height: initial;
             border: 1px solid;
             &:not(:hover) {
diff --git a/www/calendar/inner.js b/www/calendar/inner.js
index 59c936bd3..bc1cfe803 100644
--- a/www/calendar/inner.js
+++ b/www/calendar/inner.js
@@ -1818,11 +1818,11 @@ APP.recurrenceRule = {
         });
 
         return h('div.cp-calendar-recurrence-container', [
-            h('hr'),
-            h('span', Messages.calendar_rec),
+            h('span.cp-recurrence-label', [
+                h('i.fa.fa-repeat', {'aria-hidden':'true'}),
+                Messages.calendar_rec]),
             $block[0],
-            translated,
-            h('hr')
+            translated
         ]);
     };
 
@@ -1895,7 +1895,10 @@ APP.recurrenceRule = {
         var addNotif = h('button.btn.btn-primary-outline.fa.fa-plus');
         var $list = $(h('div.cp-calendar-notif-list'));
         var listContainer = h('div.cp-calendar-notif-list-container', [
-            h('span.cp-notif-label', Messages.calendar_notifications),
+            h('span.cp-notif-label', [
+                h('i.fa.fa-bell', {'aria-hidden':'true'}),
+                Messages.calendar_notifications
+            ]),
             $list[0],
             h('span.cp-notif-empty', Messages.calendar_noNotification)
         ]);