refactor(ui): templates & CSS cleanup (#61)

* Upgrade daisyUI version and update header breaking changes * Put back color on selected button + margin between buttons * fix: mobile header [WIP], bring back focus * chore: cleanup * chore: format * chore: lint * fix: user account page * fix: legacy check * chore: css * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * fixup!: footer tests * fixup!: css footer border * fix(ui): header colors and z-index * fixup!: z-index --------- Co-authored-by: Jenna <[email protected]> Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
ManoManoTech · Sep 30, 2024 · 86e516c · 86e516c
1 parent 4d64afa
commit 86e516c
Show file tree

Hide file tree

Showing 32 changed files with 77 additions and 118 deletions.
diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
@@ -33,7 +33,7 @@ repos:
     rev: '3.0.6'
     hooks:
       - id: djhtml
-      # djcss disabled for now
+      - id: djcss
       - id: djjs
 
   - repo: https://github.com/adamchainz/djade-pre-commit

diff --git a/src/firefighter/components/form_field/form_field.py b/src/firefighter/components/form_field/form_field.py
@@ -29,6 +29,6 @@ class FormField(component.Component[EmptyTuple, Kwargs, Data, Any]):
     def get_context_data(
         self, field: forms.BoundField | forms.Field, **kwargs: Never
     ) -> Data:
-        input_class = "input-ff"
+        input_class = "input input-bordered input-md"
 
         return {"field": field, "field_input_class": input_class}
diff --git a/src/firefighter/components/modal/modal.html b/src/firefighter/components/modal/modal.html
@@ -6,11 +6,6 @@
   <div x-ref="modal1_button"
        @click="open = true">
     {% slot "modal_enabler" %}
-      <button
-        type="button"
-        class="w-full bg-primary px-4 py-2 border border-transparent rounded-md flex items-center justify-center text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:w-auto sm:inline-flex">
-        Open Modal
-      </button>
     {% endslot %}
   </div>
   <div
@@ -24,9 +19,9 @@
     @keydown.escape="open = false"
     @click.away="open = false"
     style="display: none;"
-    class="z-50 fixed top-0 left-0 w-full h-screen flex justify-center items-center" >
+    class="z-[100] fixed top-0 left-0 w-full h-screen flex justify-center items-center" >
     <div aria-hidden="true"
-         class="absolute top-0 left-0 w-full h-screen bg-black transition duration-300 z-[90]"
+         class="absolute top-0 left-0 w-full h-screen bg-black transition duration-300"
          :class="{ 'opacity-60': open, 'opacity-0': !open }"
          x-show="open"
          style="display: none;"

diff --git a/src/firefighter/confluence/templates/pages/runbook_list.html b/src/firefighter/confluence/templates/pages/runbook_list.html
@@ -1,7 +1,7 @@
 {% extends '../layouts/view_filters.html' %}
 
 {% block page_title %}
-  Runbooks <div role="status" class="progress htmx-indicator inline">
+  Runbooks <div role="status" class="hx-progress htmx-indicator inline">
     <svg class="inline mr-2 w-6 h-6 text-gray-200 animate-spin dark:text-gray-600 fill-primary" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/>
       <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/>

diff --git a/src/firefighter/firefighter/settings/environments/dev.py b/src/firefighter/firefighter/settings/environments/dev.py
@@ -143,8 +143,6 @@ def _custom_show_toolbar(request: HttpRequest) -> bool:
         "no-unique-together",
         # Require non empty `upload_to` argument:
         "field-file-upload-to",
-        # Use the indexes option instead:
-        "no-index-together",
         # Each model must be registered in admin:
         # "model-admin",
         # FileField/ImageField must have non-empty `upload_to` argument:

diff --git a/src/firefighter/incidents/menus.py b/src/firefighter/incidents/menus.py
@@ -40,13 +40,6 @@ def log_out_url(_request: HttpRequest) -> str:
 
 def setup_navbar_menu() -> None:
     submenu_items = [
-        MenuItem(
-            "Incidents List",
-            reverse(
-                "incidents:incident-list",
-            ),
-            boost=False,
-        ),
         MenuItem(
             "Declare a critical incident",
             reverse("incidents:incident-create"),
@@ -65,7 +58,9 @@ def setup_navbar_menu() -> None:
         Menus.main,
         MenuItem(
             "Incidents",
-            None,
+            reverse(
+                "incidents:incident-list",
+            ),
             icon="menu-app",
             children=submenu_items,
         ),

diff --git a/src/firefighter/incidents/static/css/tailwind.css b/src/firefighter/incidents/static/css/tailwind.css
@@ -2,32 +2,17 @@
 @tailwind components;
 @tailwind utilities;
 
-
 @layer components {
-  .input-ff-lg{
-      @apply block p-4 w-full text-neutral-900 bg-neutral-50 rounded-lg border border-neutral-300 sm:text-base focus:ring-indigo-500 focus:border-indigo-500 dark:bg-neutral-700 dark:border-neutral-600 dark:placeholder-neutral-400 dark:text-white dark:focus:ring-indigo-500 dark:focus:border-indigo-500;
-  }  .input-ff{
-      @apply bg-neutral-50 border border-neutral-300 text-neutral-900 text-sm rounded-lg focus:ring-indigo-500 focus:border-indigo-500 block w-full p-2.5 dark:bg-transparent dark:bg-neutral-700 dark:border-neutral-600 dark:placeholder-neutral-400 dark:text-white dark:focus:ring-indigo-500 dark:focus:border-indigo-500;
-  }    .label-ff{
-      @apply block mb-2 text-sm font-medium text-neutral-900 dark:text-neutral-200;
-  }
-
-  .select-ff {
-  @apply  bg-neutral-50 border border-neutral-300 text-neutral-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-neutral-700 dark:border-neutral-600 dark:placeholder-neutral-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500
-  }
-  /* dark:bg-neutral-700 */
-
-  .button {
-    @apply text-white bg-indigo-700 hover:bg-indigo-800 focus:ring-4 focus:outline-none focus:ring-indigo-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary dark:hover:bg-indigo-700 dark:focus:ring-indigo-800;
+  textarea.input {
+    @apply textarea textarea-bordered input-md;
+    height: auto;
   }
-
-  .checkbox-style {
-    @apply w-4 h-4 text-primary bg-neutral-100 rounded border-neutral-300 focus:ring-indigo-500 dark:focus:ring-primary dark:ring-offset-neutral-800 focus:ring-2 dark:bg-neutral-700 dark:border-neutral-600;
+  .checkbox {
+    @apply bg-transparent;
   }
 
   table.rounded-md thead th:first-child {
     @apply rounded-tl-md;
-
   }
   table.rounded-md thead th:last-child {
     @apply rounded-tr-md;
@@ -47,21 +32,20 @@
   }
 }
 
-
 img[alt]:after {
-    display: block;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: transparent;
-    font-weight: 300;
-    line-height: 2;
-    text-align: center;
-    content: attr(alt);
-  }
-  /* [data-theme="darkff"] .bg-base {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+  font-weight: 300;
+  line-height: 2;
+  text-align: center;
+  content: attr(alt);
+}
+/* [data-theme="darkff"] .bg-base {
     background-color: black;
   }
   [data-theme="light"] .bg-base {

diff --git a/src/firefighter/incidents/tables.py b/src/firefighter/incidents/tables.py
@@ -35,11 +35,7 @@ class Meta:
 
     id = tables.Column(
         linkify=True,
-        attrs={
-            "a": {
-                "class": "text-primary hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-200"
-            }
-        },
+        attrs={"a": {"class": "text-primary hover:text-primary/80"}},
     )
     title = tables.Column(
         linkify=True,

diff --git a/src/firefighter/incidents/templates/incidents/filter.html b/src/firefighter/incidents/templates/incidents/filter.html
@@ -8,24 +8,24 @@
       hx-target="#filtered-container"
       hx-swap="outerHTML"
       hx-push-url="true"
-      hx-indicator=".progress">
+      hx-indicator=".hx-progress">
   <div class="shadow overflow-hidden h-full">
-    <div class="px-4 py-5 bg-white dark:bg-neutral-800 text-neutral-700 dark:text-neutral-100 sm:p-6 flex flex-col gap-5 h-full">
+    <div class="px-4 py-5 bg-white dark:bg-base-300 text-base-content sm:p-6 flex flex-col gap-5 h-full">
       {% for filter_field in filter_order %}
         {% if filter_field in filter.form.fields %}
           {% with field=filter.form|get_item:filter_field %}
             {% if filter_field == "search" %}
-              {% render_field filter.form.search class="input-ff" placeholder="Search" %}
+              {% render_field filter.form.search class="input input-bordered input-md" placeholder="Search" %}
             {% elif filter_field == "metrics_period" %}
               {% comment %} FIXME Widget for created_at and metrics_period {% endcomment %}
               <div class="col-span-1">
                 <div class="parent relative cursor-pointer mb-2 z-10" >
-                  <div class=" py-3 w-full flex items-center text-sm px-2 dark:bg-neutral-700 rounded-lg ">
+                  <div class="py-3 w-full flex items-center text-sm px-2 bg-base-100 rounded-lg ">
                     <label for="{{ filter.form.metrics_period.html_name }}" display="contents" class="ml-1 font-medium text-neutral-900 dark:text-white"> {{ filter.form.metrics_period.label }} </label>
                   </div>
                 </div>
                 <div class="px-2">
-                  {% render_field filter.form.metrics_period class="input-ff" placeholder="e.g. 2022" %}
+                  {% render_field filter.form.metrics_period class="input input-bordered input-md" placeholder="e.g. 2022" %}
                 </div>
                 {% if filter.form.cleaned_data.metrics_period %}
                   {% with date_gte=filter.form.metrics_period.metrics_period.0 date_lte=filter.form.metrics_period.metrics_period.1 %}
@@ -42,13 +42,13 @@
             {% elif filter_field == "created_at" %}
               <div class="col-span-1">
                 <div class="parent relative cursor-pointer mb-2 z-10" >
-                  <div class=" py-3 w-full flex items-center text-sm px-2 dark:bg-neutral-700 rounded-lg ">
+                  <div class="py-3 w-full flex items-center text-sm px-2 bg-base-200  rounded-lg ">
                     <label for="{{ filter.form.created_at.html_name }}" display="contents" class="ml-1 font-medium text-neutral-900 dark:text-white"> {{ filter.form.created_at.label }} </label>
                   </div>
                   {% include "layouts/partials/created_at_help.html" %}
                 </div>
                 <div class="px-2">
-                  {% render_field filter.form.created_at class="input-ff" placeholder="2021/Q4 - 2022/Q1" %}
+                  {% render_field filter.form.created_at class="input input-bordered input-md" placeholder="2021/Q4 - 2022/Q1" %}
                 </div>
                 {% if filter.form.cleaned_data.created_at %}
                   {% with date_gte=filter.form.cleaned_data.created_at.0 date_lte=filter.form.cleaned_data.created_at.1 %}
@@ -69,7 +69,7 @@
         {% endif %}
       {% endfor %}
 
-      <div class=" flex justify-center items-center">
+      <div class="flex justify-center items-center">
         <div class="w-max m-auto">
           <button type="submit" form="main-filter" method="get" class="btn btn-primary"> Update filters
           </button>

diff --git a/src/firefighter/incidents/templates/incidents/widgets/form_container.html b/src/firefighter/incidents/templates/incidents/widgets/form_container.html
@@ -62,7 +62,7 @@
   <h3 class="flow-root">
     <!-- Expand/collapse section button -->
     <div class="parent relative cursor-pointer" >
-      <div class=" py-3 w-full flex items-center text-sm px-2 dark:bg-neutral-700 rounded-lg " @click="expanded_form = ! expanded_form" aria-controls="filter-section-1" aria-expanded_form="false">
+      <div class="py-3 w-full flex items-center text-sm px-2 bg-base-200  rounded-lg " @click="expanded_form = ! expanded_form" aria-controls="filter-section-1" aria-expanded_form="false">
         <span class="flex items-center" >
 
           <!-- Heroicon name: solid/minus-sm -->
@@ -80,12 +80,11 @@ <h3 class="flow-root">
         {% comment %} <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 my-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
       <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
     </svg> {% endcomment %}
-        <input type="checkbox" class="checkbox-style" x-ref="checkAll" x-on:click="toggleAllCheckboxes(); " x-model="selectAll">
-
+        <input type="checkbox" class="checkbox checkbox-sm" x-ref="checkAll" x-on:click="toggleAllCheckboxes(); " x-model="selectAll">
       </div>
     </div>
   </h3>
   <div class="pl-2 mt-2" x-show="expanded_form" x-collapse>
-    {% render_field filter_form class=" checkbox-style sm:text-sm h-4 w-4 " %}
+    {% render_field filter_form class="checkbox sm:text-sm checkbox-sm" %}
   </div>
 </div>
diff --git a/src/firefighter/incidents/templates/incidents/widgets/grouped_checkbox_nested.html b/src/firefighter/incidents/templates/incidents/widgets/grouped_checkbox_nested.html
@@ -74,7 +74,7 @@ <h4 class="flow-root">
                 <label class="font-medium ml-1"> {{ group }} </label>
               </button>
               <div display="contents" class="absolute right-0 top-0 bottom-0 items-center flex pr-2 hidden-child" tooltip="Check all">
-                <input type="checkbox" class="checkbox-style" group-select x-ref="checkAll_{{ group.order }}" x-on:click="toggleAllCheckboxesGroup(); " x-model="selectAll_{{ group.order }}">
+                <input type="checkbox" class="checkbox checkbox-sm" group-select x-ref="checkAll_{{ group.order }}" x-on:click="toggleAllCheckboxesGroup(); " x-model="selectAll_{{ group.order }}">
               </div>
             </div>
           </h4>

diff --git a/src/firefighter/incidents/templates/layouts/partials/footer.html b/src/firefighter/incidents/templates/layouts/partials/footer.html
@@ -5,15 +5,14 @@
   <h2 id="footer-heading" class="sr-only">Footer</h2>
   <div class="mx-auto max-w-7xl py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
     <div class="md:grid md:grid-cols-3 md:gap-8">
-
       <div class="mt-8 md:mt-0 text-base-content">
         <p class="font-medium">{{ APP_DISPLAY_NAME }}{% if FF_VERSION %} <span class="text-base-content text-opacity-70 text-sm font-normal"> {{ FF_VERSION }} </span>{% endif %}</p>
         <p class="mt-2 text-sm text-base-content text-opacity-80">Report, manage, escalate!</p>
       </div>
       <div class="grid grid-cols-3 gap-8 md:col-span-2">
         {% for item in menus.footer %}
           <div  class="mt-12 md:mt-0">
-            <h3 class="text-base font-medium">{{ item.title }}</h3>
+            <h3 class="footer-title">{{ item.title }}</h3>
             <ul role="list" class="mt-2 space-y-3 text-base-content text-opacity-70 text-sm">
               {% for sub in item.children %}
                 <li>

diff --git a/src/firefighter/incidents/templates/layouts/partials/header.html b/src/firefighter/incidents/templates/layouts/partials/header.html
@@ -7,7 +7,7 @@
       <label tabindex="0" class="btn btn-ghost sm:hidden">
         <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16" /></svg>
       </label>
-      <ul tabindex="0" class="dropdown-content menu mt-3 z-50 p-2 shadow bg-base-200 dark:bg-black rounded-box w-52">
+      <ul tabindex="0" class="menu dropdown-content mt-3 z-[20] p-2 shadow bg-base-200 dark:bg-black rounded-box w-52">
         {% for item in menus.main %}
           {% if item.children %}
             <li tabindex="0">
@@ -19,7 +19,7 @@
                 </summary>
                 <ul class="p-2 rounded-md z-[15]">
                   {% for child in item.children %}
-                    <li><a {% if item.boost %}hx-boost="true"{% else %}hx-boost="false"{% endif %} href="{{ child.url }}" class="dropdown dropdown-right {% if child.selected %}active{% endif %}">{{ child.title }}{% if item.badge %}<span class="badge">{{ child.badge }}</span>
+                    <li><a {% if item.boost %}hx-boost="true"{% else %}hx-boost="false"{% endif %} href="{{ child.url }}" class="{% if child.selected %}active{% endif %}">{{ child.title }}{% if item.badge %}<span class="badge">{{ child.badge }}</span>
                     {% endif %}</a></li>
                   {% endfor %}
                 </ul>
@@ -43,15 +43,15 @@
         {% if item.children %}
           <li class="dropdown dropdown-hover dropdown-bottom ">
             <div tabindex="0" role="button" class="btn btn-ghost">
-              <a {% if item.boost %}hx-boost="true"{% else %}hx-boost="false"{% endif %} {% if item.url %} href="{{ item.url }}"{% endif %} class=" {% if item.selected %}{% endif %}">
+              <a {% if item.boost %}hx-boost="true"{% else %}hx-boost="false"{% endif %} {% if item.url %} href="{{ item.url }}"{% endif %} class="{% if item.selected %}{% endif %}">
                 {{ item.title }}
               </a>
             </div>
-            <ul  tabindex="0" class="dropdown-content p-2 bg-base-200 rounded-md z-[15] menu  ml-0 p-2 shadow bg-base-100 rounded-box w-52">
+            <ul tabindex="0" class="dropdown-content p-2 rounded-md z-[15] ml-0 p-2 shadow bg-base-200 dark:bg-black rounded-box w-auto">
               {% for child in item.children %}
                 <li class="py-1">
                   <a {% if item.boost %}hx-boost="true"{% else %}hx-boost="false"{% endif %} href="{{ child.url }}"
-                     class="whitespace-nowrap  {% if child.selected %}active {% endif %}">
+                     class="whitespace-nowrap rounded-md {% if child.selected %}active{% endif %}">
                     {{ child.title }}
                   </a>
                 </li>
@@ -73,7 +73,7 @@
             {% component "avatar" user=user size="md" %}{% endcomponent %}
           </span>
         </label>
-        <ul tabindex="0" class="mt-3 p-2 shadow menu menu-compact dropdown-content bg-base-200 dark:bg-black rounded-box w-52">
+        <ul tabindex="0" class="z-[90] mt-3 p-2 shadow menu menu-compact dropdown-content bg-base-200 dark:bg-black rounded-box w-52">
           <div class="py-3 px-4 text-sm text-neutral-900 dark:text-white">
             <div>{{ user.full_name }}</div>
           </div>

diff --git a/src/firefighter/incidents/templates/layouts/partials/incident_card.html b/src/firefighter/incidents/templates/layouts/partials/incident_card.html
@@ -1,5 +1,5 @@
 {% load humanize %}
-<div class="ff-tooltip flex-1 bg-white dark:bg-neutral-800 rounded-lg shadow p-2 hover:bg-neutral-50 dark:hover:bg-neutral-700">
+<div class="ff-tooltip flex-1 bg-base-200 rounded-lg shadow p-2 hover:bg-base-200/80 ">
   <div class="bg-no-repeat bg-right-top p-4">
     <span class="incident_time_tooltip tooltip_content bg-black dark:text-neutral-200 text-white rounded w-min p-2" style="width: fit-content">Opened:<br/>{{ incident.created_at|date:"SHORT_DATETIME_FORMAT" }} by {{ incident.created_by.full_name }}<br/>Last event:<br/>{{ incident.latest_event_ts|date:"SHORT_DATETIME_FORMAT" }}</span>
     <li class="col-span-1">
@@ -21,7 +21,7 @@ <h3 class="text-neutral-900 dark:text-neutral-200 text-sm font-medium pr-8">#{{
         {% if incident.updated_at != incident.created_at %}
           <p class="mt-2 text-neutral-400 dark:text-neutral-300 text-xs">Last event: {{ incident.latest_event_ts|naturaltime }}</p>
         {% endif %}
-        <p class=" text-neutral-400 dark:text-neutral-300 text-xs">Opened: {{ incident.created_at|naturaltime }}</p>
+        <p class="text-neutral-400 dark:text-neutral-300 text-xs">Opened: {{ incident.created_at|naturaltime }}</p>
       </a>
     </li>
   </div>

diff --git a/src/firefighter/incidents/templates/layouts/partials/incident_metrics.html b/src/firefighter/incidents/templates/layouts/partials/incident_metrics.html
@@ -2,7 +2,7 @@
   <div class="sm:col-span-1">
     <dt class="text-sm font-medium text-neutral-500 dark:text-neutral-300">{{ metric.metric_type.name }}
       <span class="ff-tooltip">
-        <svg xmlns="http://www.w3.org/2000/svg" class=" inline h-4 w-4 text-neutral-700 dark:text-neutral-300" viewBox="0 0 20 20" fill="currentColor">
+        <svg xmlns="http://www.w3.org/2000/svg" class="inline h-4 w-4 text-neutral-700 dark:text-neutral-300" viewBox="0 0 20 20" fill="currentColor">
           <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
         </svg>
         <div class="tooltip_content bg-white dark:bg-black shadow rounded font-normal text-sm flex flex-col p-2 w-72" style="margin-left:5rem;">

diff --git a/src/firefighter/incidents/templates/layouts/partials/incident_update_key_events_view.html b/src/firefighter/incidents/templates/layouts/partials/incident_update_key_events_view.html
@@ -2,7 +2,7 @@
   <form action="{% url 'incidents:incident-update-key-events' incident_id=incident.id %}" method="POST" >
     {% component "form" form=form %}
       {% fill "form_footer" %}
-        <div class=" text-right sm:pl-6 py-8">
+        <div class="text-right sm:pl-6 py-8">
           <button type="submit" class="btn btn-primary">
             Update key events
           </button>