From abd609ecc86f6833d1f3d9c73560a25652ee5b25 Mon Sep 17 00:00:00 2001
From: JonFreer <j.freer@hotmail.co.uk>
Date: Sat, 12 Aug 2023 21:24:03 +0100
Subject: [PATCH 1/9] ui: create events page margin

---
 js/src/assets/oruga-tailwindcss.css | 2 +-
 js/src/views/Event/EditView.vue     | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/js/src/assets/oruga-tailwindcss.css b/js/src/assets/oruga-tailwindcss.css
index 73cde4dbf..79282bfe9 100644
--- a/js/src/assets/oruga-tailwindcss.css
+++ b/js/src/assets/oruga-tailwindcss.css
@@ -55,7 +55,7 @@ body {
 }
 .btn-outlined-:hover,
 .btn-outlined-primary:hover {
-  @apply font-bold py-2 px-4 bg-mbz-bluegreen dark:bg-violet-3 text-white rounded;
+  @apply font-semibold py-2 px-4 bg-mbz-bluegreen dark:bg-violet-3 text-white rounded;
 }
 
 /* Field */
diff --git a/js/src/views/Event/EditView.vue b/js/src/views/Event/EditView.vue
index 9a9b1de0e..954063917 100644
--- a/js/src/views/Event/EditView.vue
+++ b/js/src/views/Event/EditView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="container mx-auto px-1" v-if="hasCurrentActorPermissionsToEdit">
+  <div class="container mx-auto px-3" v-if="hasCurrentActorPermissionsToEdit">
     <h1 class="" v-if="isUpdate === true">
       {{ t("Update event {name}", { name: event.title }) }}
     </h1>
@@ -473,7 +473,7 @@
   <nav
     role="navigation"
     aria-label="main navigation"
-    class="bg-mbz-yellow-alt-200 py-3"
+    class="bg-mbz-yellow-alt-200 p-3 m-3 rounded"
     :class="{ 'is-fixed-bottom': showFixedNavbar }"
     v-if="hasCurrentActorPermissionsToEdit"
   >
@@ -486,7 +486,7 @@
           <o-button
             variant="text"
             @click="confirmGoBack"
-            class="dark:!text-black"
+            class="dark:!text-black ml-auto"
             >{{ t("Cancel") }}</o-button
           >
           <!-- If an event has been published we can't make it draft anymore -->
@@ -500,7 +500,7 @@
               >{{ t("Save draft") }}</o-button
             >
           </span>
-          <span class="">
+          <span class="ml-auto">
             <o-button
               variant="primary"
               :disabled="saving"

From 15cf103dfab43ddff76e7da96a1b9d9c4a018658 Mon Sep 17 00:00:00 2001
From: JonFreer <j.freer@hotmail.co.uk>
Date: Sat, 12 Aug 2023 22:24:39 +0100
Subject: [PATCH 2/9] ui: rounded inputs

---
 js/src/assets/oruga-tailwindcss.css | 2 +-
 js/src/oruga-config.ts              | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/js/src/assets/oruga-tailwindcss.css b/js/src/assets/oruga-tailwindcss.css
index 79282bfe9..81d623e09 100644
--- a/js/src/assets/oruga-tailwindcss.css
+++ b/js/src/assets/oruga-tailwindcss.css
@@ -89,7 +89,7 @@ body {
 
 /* Input */
 .input {
-  @apply appearance-none box-border border w-full py-2 px-3 text-black leading-tight dark:bg-zinc-600 dark:placeholder:text-zinc-400 dark:text-zinc-50;
+  @apply appearance-none box-border rounded border w-full py-2 px-3 text-black leading-tight dark:bg-zinc-600 dark:placeholder:text-zinc-400 dark:text-zinc-50;
 }
 .input-danger {
   @apply border-red-500;
diff --git a/js/src/oruga-config.ts b/js/src/oruga-config.ts
index f3101b623..165c37a39 100644
--- a/js/src/oruga-config.ts
+++ b/js/src/oruga-config.ts
@@ -25,6 +25,7 @@ export const orugaConfig = {
   },
   inputitems: {
     itemClass: "inputitems-item",
+    containerClass: "rounded",
   },
   autocomplete: {
     menuClass: "autocomplete-menu",

From f04907c2a66d902d46260f783f9203ea4c25087f Mon Sep 17 00:00:00 2001
From: JonFreer <j.freer@hotmail.co.uk>
Date: Sat, 12 Aug 2023 23:30:21 +0100
Subject: [PATCH 3/9] ui: margins on main component

---
 js/src/App.vue                   | 2 +-
 js/src/views/Event/EditView.vue  | 4 ++--
 js/src/views/Event/EventView.vue | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/js/src/App.vue b/js/src/App.vue
index 0ab573784..85b77f82f 100644
--- a/js/src/App.vue
+++ b/js/src/App.vue
@@ -24,7 +24,7 @@
     </div>
     <ErrorComponent v-if="error" :error="error" />
 
-    <main id="main" class="pt-4" v-else>
+    <main id="main" class="p-4" v-else>
       <router-view></router-view>
     </main>
     <mobilizon-footer />
diff --git a/js/src/views/Event/EditView.vue b/js/src/views/Event/EditView.vue
index 954063917..d461c1355 100644
--- a/js/src/views/Event/EditView.vue
+++ b/js/src/views/Event/EditView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="container mx-auto px-3" v-if="hasCurrentActorPermissionsToEdit">
+  <div class="container mx-auto" v-if="hasCurrentActorPermissionsToEdit">
     <h1 class="" v-if="isUpdate === true">
       {{ t("Update event {name}", { name: event.title }) }}
     </h1>
@@ -473,7 +473,7 @@
   <nav
     role="navigation"
     aria-label="main navigation"
-    class="bg-mbz-yellow-alt-200 p-3 m-3 rounded"
+    class="bg-mbz-yellow-alt-200 p-3 mt-3 rounded"
     :class="{ 'is-fixed-bottom': showFixedNavbar }"
     v-if="hasCurrentActorPermissionsToEdit"
   >
diff --git a/js/src/views/Event/EventView.vue b/js/src/views/Event/EventView.vue
index 5789cfd99..8ff017ce1 100755
--- a/js/src/views/Event/EventView.vue
+++ b/js/src/views/Event/EventView.vue
@@ -4,7 +4,7 @@
     <div class="flex flex-col mb-3">
       <event-banner :picture="event?.picture" />
       <div
-        class="flex flex-col relative pb-2 bg-white dark:bg-zinc-700 my-2 rounded"
+        class="flex flex-col relative pb-2 bg-white dark:bg-zinc-700 my-4 rounded"
       >
         <div class="date-calendar-icon-wrapper relative" v-if="event?.beginsOn">
           <skeleton-date-calendar-icon

From 95f3be2da9a92674d56aa0145832ee01a4719f94 Mon Sep 17 00:00:00 2001
From: JonFreer <j.freer@hotmail.co.uk>
Date: Sun, 13 Aug 2023 10:08:08 +0100
Subject: [PATCH 4/9] ui: button height to match inputs

---
 js/src/components/Event/FullAddressAutoComplete.vue | 3 ++-
 js/src/views/Event/MyEventsView.vue                 | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/js/src/components/Event/FullAddressAutoComplete.vue b/js/src/components/Event/FullAddressAutoComplete.vue
index 5b7f19dca..1184cd51e 100644
--- a/js/src/components/Event/FullAddressAutoComplete.vue
+++ b/js/src/components/Event/FullAddressAutoComplete.vue
@@ -13,6 +13,7 @@
         </template>
         <o-button
           v-if="canShowLocateMeButton"
+          class="!h-auto"
           ref="mapMarker"
           icon-right="map-marker"
           @click="locateMe"
@@ -63,7 +64,7 @@
         <o-button
           :disabled="!queryTextWithDefault"
           @click="resetAddress"
-          class="reset-area"
+          class="reset-area !h-auto"
           icon-left="close"
           :title="t('Clear address field')"
         />
diff --git a/js/src/views/Event/MyEventsView.vue b/js/src/views/Event/MyEventsView.vue
index 50bc11b20..6933f011c 100644
--- a/js/src/views/Event/MyEventsView.vue
+++ b/js/src/views/Event/MyEventsView.vue
@@ -67,7 +67,7 @@
           />
           <o-button
             @click="dateFilter = new Date()"
-            class="reset-area"
+            class="reset-area !h-auto"
             icon-left="close"
             :title="t('Clear date filter field')"
           />

From 7688bf88eeb7c9d57e6409660e16bf502e914559 Mon Sep 17 00:00:00 2001
From: JonFreer <j.freer@hotmail.co.uk>
Date: Sun, 13 Aug 2023 10:31:09 +0100
Subject: [PATCH 5/9] ui: event buttons allignment

---
 js/src/components/Event/EventActionSection.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/js/src/components/Event/EventActionSection.vue b/js/src/components/Event/EventActionSection.vue
index c7641cffb..4330ec750 100644
--- a/js/src/components/Event/EventActionSection.vue
+++ b/js/src/components/Event/EventActionSection.vue
@@ -14,8 +14,8 @@
       @confirm-leave="confirmLeave"
       @cancel-anonymous-participation="cancelAnonymousParticipation"
     />
-    <div class="flex flex-col">
-      <p class="inline-flex gap-1">
+    <div class="flex flex-col gap-1 mt-1">
+      <p class="inline-flex gap-2 ml-auto">
         <TicketConfirmationOutline />
         <router-link
           class="participations-link"
@@ -92,7 +92,7 @@
           </template>
         </VTooltip>
       </p>
-      <o-dropdown>
+      <o-dropdown class="ml-auto">
         <template #trigger>
           <o-button icon-right="dots-horizontal">
             {{ t("Actions") }}

From de30b46a8726aa37bba66ac6866234879fb2bd3c Mon Sep 17 00:00:00 2001
From: JonFreer <j.freer@hotmail.co.uk>
Date: Sun, 13 Aug 2023 12:19:35 +0100
Subject: [PATCH 6/9] ui: participate button align right

---
 js/src/components/Event/ParticipationButton.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/src/components/Event/ParticipationButton.vue b/js/src/components/Event/ParticipationButton.vue
index 81b28a19e..d5dcd84ac 100644
--- a/js/src/components/Event/ParticipationButton.vue
+++ b/js/src/components/Event/ParticipationButton.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="ml-auto w-min">
     <o-dropdown
       v-if="participation && participation.role === ParticipantRole.PARTICIPANT"
     >

From 7cbbf84217d58bc48b1eaaa8d90c58f1de4a7b81 Mon Sep 17 00:00:00 2001
From: JonFreer <j.freer@hotmail.co.uk>
Date: Sun, 13 Aug 2023 22:02:41 +0100
Subject: [PATCH 7/9] ui: dialog width and account @ alignment

---
 js/src/plugins/dialog.ts                       | 2 ++
 js/src/views/Account/children/EditIdentity.vue | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/js/src/plugins/dialog.ts b/js/src/plugins/dialog.ts
index 5b9071a77..ea54057fc 100644
--- a/js/src/plugins/dialog.ts
+++ b/js/src/plugins/dialog.ts
@@ -49,6 +49,7 @@ export class Dialog {
         hasInput,
       },
       autoFocus: false,
+      contentClass: "!w-11/12",
     });
   }
 
@@ -87,6 +88,7 @@ export class Dialog {
         onConfirm,
         onCancel,
       },
+      contentClass: "!w-11/12",
     });
   }
 }
diff --git a/js/src/views/Account/children/EditIdentity.vue b/js/src/views/Account/children/EditIdentity.vue
index c08f07d23..2873cd793 100644
--- a/js/src/views/Account/children/EditIdentity.vue
+++ b/js/src/views/Account/children/EditIdentity.vue
@@ -53,7 +53,7 @@
           />
 
           <p class="control">
-            <span class="button is-static">@{{ getInstanceHost }}</span>
+            <span class="button is-static !h-auto">@{{ getInstanceHost }}</span>
           </p>
         </o-field>
       </o-field>

From 8c313b53977493792c113b5191443515f8aeae78 Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Fri, 18 Aug 2023 15:14:51 +0200
Subject: [PATCH 8/9] fix(front): fix some alignment of some UI elements in
 mobile event view

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 js/src/views/Event/EditView.vue  | 2 +-
 js/src/views/Event/EventView.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/js/src/views/Event/EditView.vue b/js/src/views/Event/EditView.vue
index d461c1355..608f8883b 100644
--- a/js/src/views/Event/EditView.vue
+++ b/js/src/views/Event/EditView.vue
@@ -482,7 +482,7 @@
         <span class="dark:text-gray-900" v-if="isEventModified">
           {{ t("Unsaved changes") }}
         </span>
-        <div class="flex flex-wrap gap-3 items-center">
+        <div class="flex flex-wrap gap-3 items-center justify-end">
           <o-button
             variant="text"
             @click="confirmGoBack"
diff --git a/js/src/views/Event/EventView.vue b/js/src/views/Event/EventView.vue
index 8ff017ce1..b6c2ab8e3 100755
--- a/js/src/views/Event/EventView.vue
+++ b/js/src/views/Event/EventView.vue
@@ -19,7 +19,7 @@
         </div>
 
         <section class="intro px-2 pt-4" dir="auto">
-          <div class="flex flex-wrap gap-2">
+          <div class="flex flex-wrap gap-2 justify-end">
             <div class="flex-1 min-w-[300px]">
               <div
                 v-if="eventLoading"

From f3c218f841292a28ec6d1284a205e2c7fd7d8f6e Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Fri, 18 Aug 2023 15:15:20 +0200
Subject: [PATCH 9/9] fix(front): reduce horizontal padding on main element

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 js/src/App.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/src/App.vue b/js/src/App.vue
index 85b77f82f..6f9ca4315 100644
--- a/js/src/App.vue
+++ b/js/src/App.vue
@@ -24,7 +24,7 @@
     </div>
     <ErrorComponent v-if="error" :error="error" />
 
-    <main id="main" class="p-4" v-else>
+    <main id="main" class="px-2 py-4" v-else>
       <router-view></router-view>
     </main>
     <mobilizon-footer />