decidim-meetings 0.27.8 → 0.28.0.rc4

data/app/views/decidim/meetings/admin/agenda/_agenda_item.html.erb

@@ -1,42 +1,42 @@
 <% agenda_item = form.object %>
-<div class="card meeting-agenda-item" id="<%= tabs_id %>-field">
+<div class="card meeting-agenda-item p-4" id="<%= tabs_id %>-field">
   <div class="card-divider agenda-item-divider">
     <h2 class="card-title">
       <span>
-        <%== "#{icon("move")} #{t(".agenda_item")}" %>
+        <%== "#{icon("drag-move-2-fill")} #{t(".agenda_item")}" %>
       </span>
 
-      <button class="button small alert hollow move-up-agenda-item button--title">
-        <%== "#{icon("arrow-top")} #{t(".up")}" %>
+      <button class="button button__sm button__transparent-secondary small alert hollow move-up-agenda-item button--title">
+        <%== "#{icon("arrow-up-line")} #{t(".up")}" %>
       </button>
 
-      <button class="button small alert hollow move-down-agenda-item button--title">
-        <%== "#{icon("arrow-bottom")} #{t(".down")}" %>
+      <button class="button button__sm button__transparent-secondary small alert hollow move-down-agenda-item button--title">
+        <%== "#{icon("arrow-down-line")} #{t(".down")}" %>
       </button>
 
-      <button class="button small alert hollow remove-agenda-item button--title">
+      <button class="button button__sm button__transparent-secondary small alert hollow remove-agenda-item button--title">
         <%= t(".remove") %>
       </button>
     </h2>
   </div>
 
   <div class="card-section">
-    <%= render "agenda_item_fields", tabs_id: tabs_id, form: form, agenda_item: agenda_item %>
+    <%= render "agenda_item_fields", tabs_id:, form:, agenda_item: %>
 
-    <div class="card">
+    <div class="card my-4">
       <div class="card-divider">
         <h2 class="card-title"><%= t(".agenda_item_children") %></h2>
       </div>
-      <div class="card-section">
+      <div class="row column">
         <div class="meeting-agenda-item-childs" data-template="<%= child_template_selector %>">
           <div class="meeting-agenda-item-childs-list">
             <% agenda_item.agenda_item_children.each do |agenda_item_child| %>
               <%= fields_for "meeting_agenda[agenda_items][#{agenda_item.to_param}][agenda_item_children][]", agenda_item_child do |agenda_item_child_form| %>
-                <%= render "agenda_item_child", form: agenda_item_child_form, tabs_id: tabs_id, tabs_id_child: tabs_id_for_agenda_item_child(agenda_item_child), editable: true %>
+                <%= render "agenda_item_child", form: agenda_item_child_form, tabs_id:, tabs_id_child: tabs_id_for_agenda_item_child(agenda_item_child), editable: true %>
               <% end %>
             <% end %>
           </div>
-          <button class="button add-agenda-item-child"><%= t(".add_agenda_item_child") %></button>
+          <button class="button button__sm button__secondary add-agenda-item-child"><%= t(".add_agenda_item_child") %></button>
         </div>
       </div>
     </div>

data/app/views/decidim/meetings/admin/agenda/_agenda_item_child.html.erb

@@ -1,26 +1,26 @@
 <% agenda_item_child = form.object %>
-<div class="card meeting-agenda-item-child" id="<%= tabs_id %>-child-<%= tabs_id_child %>-field">
+<div class="card meeting-agenda-item-child p-4" id="<%= tabs_id %>-child-<%= tabs_id_child %>-field">
   <div class="card-divider agenda-item-child-divider">
     <h2 class="card-title">
       <span>
-        <%== "#{icon("move")} #{t(".agenda_item_child")}" %>
+        <%== "#{icon("drag-move-2-fill")} #{t(".agenda_item_child")}" %>
       </span>
 
-      <button class="button small alert hollow move-up-agenda-item-child button--title">
-        <%== "#{icon("arrow-top")} #{t(".up")}" %>
+      <button class="button button__sm button__transparent-secondary small alert hollow move-up-agenda-item-child button--title">
+        <%== "#{icon("arrow-up-line")} #{t(".up")}" %>
       </button>
 
-      <button class="button small alert hollow move-down-agenda-item-child button--title">
-        <%== "#{icon("arrow-bottom")} #{t(".down")}" %>
+      <button class="button button__sm button__transparent-secondary small alert hollow move-down-agenda-item-child button--title">
+        <%== "#{icon("arrow-down-line")} #{t(".down")}" %>
       </button>
 
-      <button class="button small alert hollow remove-agenda-item-child button--title">
+      <button class="button button__sm button__transparent-secondary small alert hollow remove-agenda-item-child button--title">
         <%= t(".remove") %>
       </button>
     </h2>
   </div>
 
   <div class="card-section">
-    <%= render "agenda_item_fields", tabs_id: tabs_id_child, form: form, agenda_item: agenda_item_child %>
+    <%= render "agenda_item_fields", tabs_id: tabs_id_child, form:, agenda_item: agenda_item_child %>
   </div>
 </div>

data/app/views/decidim/meetings/admin/agenda/_agenda_item_child_template.html.erb

@@ -2,6 +2,6 @@
 
 <script type="text/template" class="decidim-template" id="<%= template_id %>">
   <%= fields_for "meeting_agenda[agenda_items][#{agenda_item.to_param}][agenda_item_children][#{blank_agenda_item.to_param_child}]", blank_agenda_item do |agenda_item_child_form| %>
-    <%= render "agenda_item_child", form: agenda_item_child_form, tabs_id: tabs_id_for_agenda_item(blank_agenda_item), tabs_id_child: tabs_id_for_agenda_item_child(blank_agenda_item), editable: editable %>
+    <%= render "agenda_item_child", form: agenda_item_child_form, tabs_id: tabs_id_for_agenda_item(blank_agenda_item), tabs_id_child: tabs_id_for_agenda_item_child(blank_agenda_item), editable: %>
   <% end %>
 </script>

data/app/views/decidim/meetings/admin/agenda/_agenda_item_fields.html.erb

@@ -1,15 +1,15 @@
 <div class="grid-x">
   <div class="cell auto">
-    <%= form.translated :text_field, :title, tabs_id: tabs_id %>
+    <%= form.translated :text_field, :title, tabs_id:, aria: { label: :title } %>
   </div>
   <div class="cell small-2">
-    <%= form.number_field :duration, tabs_id: tabs_id, min: 0 %>
+    <%= form.number_field :duration, tabs_id:, min: 0 %>
   </div>
 </div>
 
 <div class="grid-x">
   <div class="cell auto">
-    <%= form.translated :editor, :description, tabs_id: tabs_id, rows: 6 %>
+    <%= form.translated :editor, :description, tabs_id:, rows: 6, aria: { label: :description } %>
   </div>
 </div>
 

data/app/views/decidim/meetings/admin/agenda/_form.html.erb

@@ -1,68 +1,72 @@
-<div class="card">
-  <div class="card-divider">
-    <h2 class="card-title">
-      <div class="flex--sbc">
-        <div class="grid-x align-middle">
-          <u> <%= present(@meeting).title(html_escape: true) %> </u> &nbsp;<%= icon "arrow-right" %>&nbsp;<%= title %>
+<div class="form__wrapper">
+  <div class="card">
+    <div class="card-divider">
+      <h2 class="card-title">
+        <div>
+          <div class="grid-x align-middle">
+            <u> <%= present(@meeting).title(html_escape: true) %> </u> &nbsp;<%= icon "arrow-right-line" %>&nbsp;<%= title %>
+          </div>
         </div>
-      </div>
-    </h2>
-  </div>
-  <div class="card-section">
-    <div class="grid-x card-title">
-      <div class="cell small-2"><strong><%= t(".start_date") %></strong></div>
-      <div class="cell small-2"><strong><%= t(".end_date") %></strong></div>
+      </h2>
     </div>
-    <div class="grid-x text-muted">
-      <div class="cell small-2"><%= meeting.start_time.strftime("%m/%d/%Y %R") %></div>
-      <div class="cell small-2"><%= meeting.end_time.strftime("%m/%d/%Y %R") %></div>
+    <div class="row column">
+      <div class="flex items-center gap-x-4">
+        <div>
+          <div><strong><%= t(".start_date") %></strong></div>
+          <div><%= meeting.start_time.strftime("%m/%d/%Y %R") %></div>
+        </div>
+        <div>
+          <div><strong><%= t(".end_date") %></strong></div>
+          <div><%= meeting.end_time.strftime("%m/%d/%Y %R") %></div>
+        </div>
+      </div>
     </div>
   </div>
-</div>
-
-<div class="card">
-  <div class="card-divider">
-    <h2 class="card-title">
-      <%= title %>
-    </h2>
-  </div>
 
-  <div class="card-section">
-    <div class="row column">
-      <%= form.translated :text_field, :title, autofocus: true %>
+  <div class="card">
+    <div class="card-divider">
+      <h2 class="card-title">
+        <%= title %>
+      </h2>
     </div>
 
-    <div class="row column">
-      <%= form.check_box :visible %>
+    <div class="card-section">
+      <div class="row column">
+        <%= form.translated :text_field, :title, autofocus: true, aria: { label: :title } %>
+      </div>
+
+      <div class="row column">
+        <%= form.check_box :visible %>
+      </div>
     </div>
   </div>
-</div>
 
-<div class="card">
-  <div class="card-divider">
-    <h2 class="card-title"><%= t(".agenda_items") %></h2>
-  </div>
+  <div class="card">
+    <div class="card-divider">
+      <h2 class="card-title"><%= t(".agenda_items") %></h2>
+    </div>
 
-  <div class="card-section">
-    <div class="meeting-agenda-items">
-      <%= fields_for "meeting_agenda[agenda_items][#{blank_agenda_item.to_param}]", blank_agenda_item do |agenda_item_form| %>
-        <script type="text/template" class="decidim-template">
-          <%= render "agenda_item", form: agenda_item_form, tabs_id: tabs_id_for_agenda_item(blank_agenda_item), editable: true, child_template_selector: "#agenda-item-child-template-dummy" %>
-        </script>
-        <%= render "agenda_item_child_template", form: agenda_item_form, editable: true, template_id: "agenda-item-child-template-dummy" %>
-      <% end %>
+    <div class="row column">
+      <div class="meeting-agenda-items">
+        <%= fields_for "meeting_agenda[agenda_items][#{blank_agenda_item.to_param}]", blank_agenda_item do |agenda_item_form| %>
+          <script type="text/template" class="decidim-template">
+            <%= render "agenda_item", form: agenda_item_form, tabs_id: tabs_id_for_agenda_item(blank_agenda_item), editable: true, child_template_selector: "#agenda-item-child-template-dummy" %>
+          </script>
+          <%= render "agenda_item_child_template", form: agenda_item_form, editable: true, template_id: "agenda-item-child-template-dummy" %>
+        <% end %>
 
-      <div class="meeting-agenda-items-list">
-        <% @form.agenda_items.each_with_index do |agenda_item, index| %>
-          <%= fields_for "meeting_agenda[agenda_items][]", agenda_item do |agenda_item_form| %>
-            <%= render "agenda_item", form: agenda_item_form, tabs_id: tabs_id_for_agenda_item(agenda_item), editable: true, child_template_selector: "#agenda-item-child-template-#{index}" %>
-            <%= render "agenda_item_child_template", form: agenda_item_form, editable: true, template_id: "agenda-item-child-template-#{index}" %>
+        <div class="meeting-agenda-items-list">
+          <% @form.agenda_items.each_with_index do |agenda_item, index| %>
+            <%= fields_for "meeting_agenda[agenda_items][]", agenda_item do |agenda_item_form| %>
+              <%= render "agenda_item", form: agenda_item_form, tabs_id: tabs_id_for_agenda_item(agenda_item), editable: true, child_template_selector: "#agenda-item-child-template-#{index}" %>
+              <%= render "agenda_item_child_template", form: agenda_item_form, editable: true, template_id: "agenda-item-child-template-#{index}" %>
+            <% end %>
           <% end %>
-        <% end %>
+        </div>
+        <button class="button button__sm button__secondary add-agenda-item"><%= t(".add_agenda_item") %></button>
       </div>
-      <button class="button add-agenda-item"><%= t(".add_agenda_item") %></button>
     </div>
   </div>
 </div>
 
-<%= javascript_pack_tag "decidim_meetings_admin" %>
+<%= append_javascript_pack_tag "decidim_meetings_admin" %>

data/app/views/decidim/meetings/admin/agenda/edit.html.erb

@@ -1,7 +1,19 @@
-<%= decidim_form_for(@form, url: meeting_agenda_path(meeting, agenda), html: { class: "form edit_agenda" }) do |f| %>
-  <%= render partial: "form", object: f, locals: { title: t(".title") } %>
+<% add_decidim_page_title(t(".title")) %>
+<div class="item_show__header">
+  <h2 class="item_show__header-title">
+    <%= t(".title") %>
+  </h2>
+</div>
 
-    <div class="button--double form-general-submit">
-      <%= f.submit t(".update") %>
-    </div>
-<% end %>
+<div class="item__edit item__edit-1col">
+  <div class="item__edit-form">
+    <%= decidim_form_for(@form, url: meeting_agenda_path(meeting, agenda), html: { class: "form-defaults form edit_agenda" }) do |f| %>
+      <%= render partial: "form", object: f, locals: { title: t(".title") } %>
+      <div class="item__edit-sticky">
+        <div class="item__edit-sticky-container">
+          <%= f.submit t(".update"), class: "button button__sm button__secondary" %>
+        </div>
+      </div>
+    <% end %>
+  </div>
+</div>

data/app/views/decidim/meetings/admin/agenda/new.html.erb

@@ -1,8 +1,20 @@
-<%= decidim_form_for(@form, url: meeting_agenda_index_path(meeting), html: { method: :post, class: "form new_agenda" }) do |f| %>
+<% add_decidim_page_title(t(".title")) %>
 
-  <%= render partial: "form", object: f, locals: { title: t(".title") } %>
+<div class="item_show__header">
+  <h2 class="item_show__header-title">
+    <%= t(".title") %>
+  </h2>
+</div>
+<div class="item__edit-1col">
+  <div class="item__edit-form">
+    <%= decidim_form_for(@form, url: meeting_agenda_index_path(meeting), html: { method: :post, class: "form form-defaults new_agenda" }) do |f| %>
 
-  <div class="button--double form-general-submit">
-      <%= f.submit t(".create") %>
+      <%= render partial: "form", object: f, locals: { title: t(".title") } %>
+      <div class="item__edit-sticky">
+        <div class="item__edit-sticky-container">
+          <%= f.submit t(".create"), class: "button button__sm button__secondary" %>
+        </div>
+      </div>
+    <% end %>
   </div>
-<% end %>
+</div>

data/app/views/decidim/meetings/admin/invite_join_meeting_mailer/invite.html.erb

@@ -4,5 +4,14 @@
   <%= t ".invited_you_to_join_a_meeting", invited_by: @invited_by.name, application: @user.organization.name %>
 </p>
 
-<p class="email-button email-button__cta cta-decline"><%= link_to t(".decline", meeting_title: present(@meeting).title),routes.decline_invitation_meeting_registration_url(meeting_id: @meeting, participatory_space_id: @meeting.component.participatory_space) %>
-<p class="email-button email-button__cta cta-accept"><%= link_to t(".join", meeting_title: present(@meeting).title),routes.meeting_registration_url(meeting_id: @meeting, participatory_space_id: @meeting.component.participatory_space) %>
+<p class="email-button email-button__cta cta-decline">
+  <%= link_to t(".decline", meeting_title: present(@meeting).title),
+              routes.decline_invitation_meeting_registration_url(meeting_id: @meeting,
+                                                                 participatory_space_id: @meeting.component.participatory_space
+              ) %>
+</p>
+<p class="email-button email-button__cta cta-accept">
+  <%= link_to t(".join", meeting_title: present(@meeting).title),
+              routes.meeting_registration_url(meeting_id: @meeting,
+                                              participatory_space_id: @meeting.component.participatory_space) %>
+</p>

data/app/views/decidim/meetings/admin/invites/_form.html.erb

@@ -1,36 +1,46 @@
-<div class="attendee-fields">
-  <div class="row column">
-    <fieldset class="check-radio-collection">
-      <legend><%= t(".attendee_type") %></legend>
-      <%= form.collection_radio_buttons(:existing_user, [[t(".non_user"), false], [t(".existing_user"), true]], :last, :first) %>
-    </fieldset>
-  </div>
+<div class="form__wrapper attendee-fields">
+  <div class="card" data-component="accordion" id="accordion-attendee">
+    <div class="card-divider">
+      <button class="card-divider-button" data-open="true" data-controls="panel-attendee" type="button">
+        <%= icon "arrow-right-s-line" %>
+        <h2 class="card-title" id="attendee">
+          <%= t(".attendee_type") %>
+        </h2>
+      </button>
+    </div>
 
-  <div class="text-warning attendee-fields--new-user">
-    <p><%= t(".invite_explanation") %></p>
-  </div>
+    <div id="panel-attendee" class="card-section">
 
-  <div class="grid-x grid-margin-x">
-    <div class="auto cell attendee-fields--new-user">
-      <%= form.text_field :name, disabled: disabled %>
-    </div>
-    <div class="auto cell attendee-fields--new-user">
-      <%= form.text_field :email, disabled: disabled %>
-    </div>
+      <div class="row column">
+        <fieldset class="check-radio-collection">
+          <%= form.collection_radio_buttons(:existing_user, [[t(".non_user"), false], [t(".existing_user"), true]], :last, :first) %>
+        </fieldset>
+      </div>
 
-    <div class="auto cell attendee-fields--user-picker">
-        <% prompt_options = { url: decidim_admin.users_organization_url, placeholder: t(".select_user") } %>
-        <%= form.autocomplete_select(:user_id, form.object.user.presence, { multiple: false, class: "autocomplete-field--results-inline" }, prompt_options) do |user|
-          { value: user.id, label: "#{user.name} (@#{user.nickname})" }
-        end %>
-    </div>
+      <div class="row column">
+        <p><%= t(".invite_explanation") %></p>
+      </div>
+
+      <div class="row column">
+        <div class="auto cell attendee-fields--new-user">
+          <%= form.text_field :name, disabled: %>
+        </div>
+        <div class="auto cell attendee-fields--new-user">
+          <%= form.text_field :email, disabled: %>
+        </div>
 
-    <div class="shrink cell">
-      <div class="text-center mt-sm">
-        <%= form.submit t(".invite"), disabled: disabled %>
+        <div class="auto cell attendee-fields--user-picker">
+          <% prompt_options = { url: decidim_admin.users_organization_url, placeholder: t(".select_user") } %>
+          <%= form.autocomplete_select(:user_id, form.object.user.presence, { multiple: false, class: "autocomplete-field--results-inline" }, prompt_options) do |user|
+            { value: user.id, label: "#{user.name} (@#{user.nickname})" }
+          end %>
+        </div>
+
+      </div>
+      <div class="row column">
+        <%= form.submit t(".invite"), class: "button button__sm button__secondary", disabled: %>
       </div>
     </div>
   </div>
 </div>
-
-<%= javascript_pack_tag "decidim_meetings_admin" %>
+<%= append_javascript_pack_tag "decidim_meetings_admin" %>

data/app/views/decidim/meetings/admin/invites/index.html.erb

@@ -1,10 +1,13 @@
-<div class="card">
-  <div class="card-divider">
-    <h2 class="card-title"><%= t(".invite_attendee") %></h2>
-  </div>
-  <div class="card-section">
-    <%= decidim_form_for(@form, url: meeting_registrations_invites_path, method: :post, html: { class: "form new_meeting_registration_invite" }) do |f| %>
-      <% disable_form = !allowed_to?(:invite_attendee, :meeting, meeting: meeting) %>
+<% add_decidim_page_title(t(".invite_attendee")) %>
+<div class="item_show__header">
+  <h2 class="item_show__header-title">
+    <%= t(".invite_attendee") %>
+  </h2>
+</div>
+<div class="item__edit item__edit-1col">
+  <div class="item__edit-form">
+    <%= decidim_form_for(@form, url: meeting_registrations_invites_path, method: :post, html: { class: "form form-defaults new_meeting_registration_invite" }) do |f| %>
+      <% disable_form = !allowed_to?(:invite_attendee, :meeting, meeting:) %>
 
       <%= render partial: "form", object: f, locals: { disabled: disable_form } %>
 
@@ -14,86 +17,79 @@
         </div>
       <% end %>
     <% end %>
-  </div>
-</div>
 
-<div class="filters grid-x mt-m">
-  <div class="medium-7">
-    <span class="dropdown-menu-inverted_label"><%= t(".filter_by") %> :</span>
-    <ul class="dropdown menu dropdown-inverted" data-dropdown-menu data-click-open="true" data-close-on-click-inside="false">
-      <li class="is-dropdown-submenu-parent">
-        <a href="#">
-          <% if @status.present? %>
-            <%= t(".filter.#{@status}") %>
-          <% else %>
-            <%= t(".filter.all") %>
-          <% end %>
-        </a>
-        <ul class="menu is-dropdown-submenu">
-          <li><%= link_to t(".filter.sent"), url_for(status: "sent", q: @query) %></li>
-          <li><%= link_to t(".filter.accepted"), url_for(status: "accepted", q: @query) %></li>
-          <li><%= link_to t(".filter.rejected"), url_for(status: "rejected", q: @query) %></li>
-          <li><%= link_to t(".filter.all"), url_for(q: @query) %></li>
+    <%# NOTE: this old filters section should be refactorized in order to use the shared admin_filter_selector method
+    it would require the definition of concerns similar to decidim-conferences/app/controllers/concerns/decidim/conferences/admin/filterable.rb %>
+    <div class="filters__section mt-4">
+      <div class="fcell">
+        <ul class="dropdown menu" data-dropdown-menu data-click-open="true" data-close-on-click-inside="false">
+          <li class="is-dropdown-submenu-parent">
+            <a href="#" class="dropdown button">
+              <%= t("filter_label", scope: "decidim.admin.filters") %>
+              <%= icon "arrow-down-s-line", class: "dropdown-filter-icon" %>
+            </a>
+            <ul class="menu is-dropdown-submenu">
+              <li><%= link_to t(".filter.sent"), url_for(status: "sent", q: @query) %></li>
+              <li><%= link_to t(".filter.accepted"), url_for(status: "accepted", q: @query) %></li>
+              <li><%= link_to t(".filter.rejected"), url_for(status: "rejected", q: @query) %></li>
+              <li><%= link_to t(".filter.all"), url_for(q: @query) %></li>
+            </ul>
+          </li>
         </ul>
-      </li>
-    </ul>
-  </div>
-  <div class="medium-5">
-    <%= form_tag "", method: :get do %>
-      <div class="filters__search">
-        <div class="input-group">
-          <%= search_field_tag :q, @query,label: false, class: "input-group-field", placeholder: t(".search") %>
-          <%= hidden_field_tag :state, @state %>
-          <div class="input-group-button">
-            <button type="submit" class="button">
-              <%= icon "magnifying-glass", aria_label: t(".search"), role: "img" %>
-            </button>
+      </div>
+      <div class="fcell search">
+        <%= form_tag "", method: :get do %>
+          <div class="input-group">
+            <%= search_field_tag :q, @query,label: false, class: "input-group-field", placeholder: t(".search") %>
+            <%= hidden_field_tag :state, @state %>
+            <div class="input-group-button">
+              <button type="submit" class="text-secondary" aria-label="<%= t("decidim.search.term_input_placeholder") %>">
+                <%= icon "search-line", class: "fill-secondary w-4 h-4" %>
+              </button>
+            </div>
           </div>
-        </div>
+        <% end %>
       </div>
-    <% end %>
-  </div>
-</div>
-
-<div class="card" id="meeting-invites">
-  <div class="card-divider">
-    <h2 class="card-title"><%= t(".invites") %></h2>
-  </div>
+    </div>
 
-  <div class="card-section">
-    <div class="table-scroll">
-      <table class="table-list">
-        <thead>
-          <tr>
-            <th><%= t("models.invite.fields.name", scope: "decidim.meetings") %></th>
-            <th><%= t("models.invite.fields.email", scope: "decidim.meetings") %></th>
-            <th><%= t("models.invite.fields.sent_at", scope: "decidim.meetings") %></th>
-            <th><%= t("models.invite.fields.status", scope: "decidim.meetings") %></th>
-          </tr>
-        </thead>
-        <tbody>
-          <% invites.each do |invite| %>
-            <% presenter = Decidim::Meetings::InvitePresenter.new(invite) %>
-            <tr data-id="<%= invite.id %>">
-              <td>
-                <%= invite.user.name %>
-              </td>
-              <td>
-                <%= invite.user.email %>
-              </td>
-              <td>
-                <% if invite.sent_at %>
-                  <%= l invite.sent_at, format: :long %>
-                <% end %>
-              </td>
-              <td class="<%= presenter.status_html_class %>">
-                <%= presenter.status %>
-              </td>
+    <div class="card" id="meeting-invites">
+      <div class="card-divider">
+        <h2 class="card-title"><%= t(".invites") %></h2>
+      </div>
+      <div class="table-scroll">
+        <table class="table-list">
+          <thead>
+            <tr>
+              <th><%= t("models.invite.fields.name", scope: "decidim.meetings") %></th>
+              <th><%= t("models.invite.fields.email", scope: "decidim.meetings") %></th>
+              <th><%= t("models.invite.fields.sent_at", scope: "decidim.meetings") %></th>
+              <th><%= t("models.invite.fields.status", scope: "decidim.meetings") %></th>
             </tr>
-          <% end %>
-        </tbody>
-      </table>
-      <%= paginate invites, theme: "decidim" %>
+          </thead>
+          <tbody>
+            <% invites.each do |invite| %>
+              <% presenter = Decidim::Meetings::InvitePresenter.new(invite) %>
+              <tr data-id="<%= invite.id %>">
+                <td>
+                  <%= invite.user.name %>
+                </td>
+                <td>
+                  <%= invite.user.email %>
+                </td>
+                <td>
+                  <% if invite.sent_at %>
+                    <%= l invite.sent_at, format: :long %>
+                  <% end %>
+                </td>
+                <td class="<%= presenter.status_html_class %>">
+                  <%= presenter.status %>
+                </td>
+              </tr>
+            <% end %>
+          </tbody>
+        </table>
+      </div>
     </div>
+    <%= decidim_paginate invites %>
   </div>
 </div>