decidim-admin 0.30.2 → 0.31.0.rc1

data/app/views/decidim/admin/components/_actions.html.erb

@@ -1,61 +1,121 @@
-<% if view == :deleted %>
-  <% if allowed_to? :restore, :component, trashable_deleted_resource: component %>
-    <%= icon_link_to "refresh-line", url_for(action: :restore, id: component, controller: "components"), t("decidim.admin.actions.restore"), method: :patch, class: "action-icon--restore" %>
-  <% end %>
-<% else %>
-  <% if component.manifest.admin_engine %>
-    <%= icon_link_to "pencil-line", manage_component_path(component), t("actions.manage", scope: "decidim.admin"), class: "action-icon--manage" %>
-  <% else %>
-    <span class="action-space icon"></span>
-  <% end %>
-
-  <% if component.manifest.admin_engine && allowed_to?(:share, :component, component: component) %>
-    <%= icon_link_to "share-line", component_share_tokens_path(component_id: component), t("actions.share_tokens", scope: "decidim.admin"), class: "action-icon--share" %>
-  <% else %>
-    <span class="action-space icon"></span>
-  <% end %>
-
-  <% if allowed_to? :update, :component, component: component %>
-    <%= icon_link_to "settings-4-line", url_for(action: :edit, id: component, controller: "components"), t("actions.configure", scope: "decidim.admin"), class: "action-icon--configure" %>
-  <% else %>
-    <span class="action-space icon"></span>
-  <% end %>
-
-  <% if allowed_to?(:update, :component, component: component) %>
-    <% if component.published? %>
-      <% if component.visible? %>
-        <%= icon_link_to "eye-close", url_for(action: :hide, id: component, controller: "components"), t("actions.menu_hidden", scope: "decidim.admin"), class: "action-icon--unpublish", method: :put %>
-      <% else %>
-        <%= icon_link_to "close-circle-line", url_for(action: :unpublish, id: component, controller: "components"), t("actions.unpublish", scope: "decidim.admin"), class: "action-icon--menu-hidden", method: :put %>
+<button type="button" data-controller="dropdown" data-target="actions-component-<%= component.id %>" aria-label="<%= t("decidim.admin.actions.actions_label", resource: component.manifest.name) %>">
+  <%= icon "more-fill", class: "text-secondary" %>
+</button>
+
+<div class="inline-block relative">
+  <ul id="actions-component-<%= component.id %>" class="dropdown dropdown__action" aria-hidden="true">
+    <% if view == :deleted %>
+      <% if allowed_to? :restore, :component, trashable_deleted_resource: component %>
+        <li class="dropdown__item">
+          <%= link_to url_for(action: :restore, id: component, controller: "components"), method: :patch, class: "dropdown__button" do %>
+            <%= icon "refresh-line" %>
+            <%= t("decidim.admin.actions.restore") %>
+          <% end %>
+        </li>
       <% end %>
     <% else %>
-      <%= icon_link_to "check-line", url_for(action: :publish, id: component, controller: "components"), t("actions.publish", scope: "decidim.admin"), class: "action-icon--publish", method: :put %>
-    <% end %>
-  <% else %>
-    <span class="action-space icon"></span>
-  <% end %>
+      <% if component.manifest.admin_engine %>
+        <li class="dropdown__item">
+          <%= link_to manage_component_path(component), class: "dropdown__button" do %>
+            <%= icon "pencil-line" %>
+            <%= t("actions.edit", scope: "decidim.admin") %>
+          <% end %>
+        </li>
+      <% end %>
 
-  <%= icon_link_to "eye-line", main_component_path(component), t("actions.preview", scope: "decidim.admin"), class: "action-icon--preview", target: :blank, data: { "external-link": false } %>
+      <% if allowed_to? :update, :component, component: component %>
+        <li class="dropdown__item">
+          <%= link_to url_for(action: :edit, id: component, controller: "components"), class: "dropdown__button" do %>
+            <%= icon "settings-4-line" %>
+            <%= t("actions.configure", scope: "decidim.admin") %>
+          <% end %>
+        </li>
 
-  <% if allowed_to? :update, :component, component: component %>
-    <% if component.manifest.actions.empty? %>
-      <%= icon "key-2-line", class: "action-icon action-icon--disabled" %>
-    <% else %>
-      <%= icon_link_to "key-2-line", url_for(action: :edit, component_id: component, controller: "component_permissions"), t("actions.permissions", scope: "decidim.admin"), class: "action-icon--permissions" %>
-    <% end %>
-  <% else %>
-    <span class="action-space icon"></span>
-  <% end %>
+        <hr>
+      <% end %>
 
-  <% if allowed_to?(:soft_delete, :component, trashable_deleted_resource: component) %>
-    <% resources_count = component.primary_stat || 0 %>
+      <% if allowed_to?(:update, :component, component: component) %>
+        <% if component.published? %>
+          <% if component.visible? %>
+            <li class="dropdown__item">
+              <%= link_to url_for(action: :hide, id: component, controller: "components"), method: :put, class: "dropdown__button" do %>
+                <%= icon "eye-close" %>
+                <%= t("actions.menu_hidden", scope: "decidim.admin") %>
+              <% end %>
+            </li>
+          <% else %>
+            <li class="dropdown__item">
+              <%= link_to url_for(action: :unpublish, id: component, controller: "components"), method: :put, class: "dropdown__button" do %>
+                <%= icon "close-circle-line" %>
+                <%= t("actions.unpublish", scope: "decidim.admin") %>
+              <% end %>
+            </li>
+          <% end %>
+        <% else %>
+          <li class="dropdown__item">
+            <%= link_to url_for(action: :publish, id: component, controller: "components"), method: :put, class: "dropdown__button" do %>
+              <%= icon "check-line" %>
+              <%= t("actions.publish", scope: "decidim.admin") %>
+            <% end %>
+          </li>
+        <% end %>
 
-    <% if component.published? %>
-      <%= icon "delete-bin-line", class: "action-icon action-icon--disabled", role: "img", aria_label: t("actions.soft_delete", scope: "decidim.admin") %>
-    <% else %>
-      <%= icon_link_to "delete-bin-line", url_for(action: :soft_delete, id: component, controller: "components"), t("actions.soft_delete", scope: "decidim.admin", resources_count:), method: :patch, class: "action-icon--delete", data: { confirm: (t("actions.confirm_delete_component", scope: "decidim.admin", resources_count:)) } %>
+        <hr>
+      <% end %>
+
+      <li class="dropdown__item">
+        <%= link_to main_component_path(component), class: "dropdown__button", target: "_blank", data: { "external-link": false } do %>
+          <%= icon "eye-line" %>
+          <%= t("actions.preview", scope: "decidim.admin") %>
+        <% end %>
+      </li>
+
+      <% if component.manifest.admin_engine && allowed_to?(:share, :component, component: component) %>
+        <li class="dropdown__item">
+          <%= link_to component_share_tokens_path(component_id: component), class: "dropdown__button" do %>
+            <%= icon "share-line" %>
+            <%= t("actions.share_tokens", scope: "decidim.admin") %>
+          <% end %>
+        </li>
+
+        <hr>
+      <% end %>
+
+      <% if allowed_to? :update, :component, component: component %>
+        <% if component.manifest.actions.any? %>
+          <li class="dropdown__item">
+            <%= link_to url_for(action: :edit, component_id: component, controller: "component_permissions"), class: "dropdown__button" do %>
+              <%= icon "key-2-line" %>
+              <%= t("actions.permissions", scope: "decidim.admin") %>
+            <% end %>
+          </li>
+        <% end %>
+      <% end %>
+
+      <% if allowed_to?(:soft_delete, :component, trashable_deleted_resource: component) %>
+        <% resources_count = component.primary_stat || 0 %>
+        <% if component.published? %>
+          <hr>
+          <li class="dropdown__item">
+            <div class="dropdown__button-disabled">
+              <%= with_tooltip t("tooltips.deleted_component_info", scope: "decidim.admin") do %>
+                <%= icon "delete-bin-line", class: "text-gray" %>
+                <span>
+                  <%= t("actions.soft_delete", scope: "decidim.admin") %>
+                </span>
+              <% end %>
+            </div>
+          </li>
+        <% else %>
+          <hr>
+          <li class="dropdown__item">
+            <%= link_to url_for(action: :soft_delete, id: component, controller: "components"), method: :patch, class: "dropdown__button dropdown__button--danger", data: { confirm: t("actions.confirm_delete_component", scope: "decidim.admin", resources_count:) } do %>
+              <%= icon "delete-bin-line" %>
+              <%= t("actions.soft_delete", scope: "decidim.admin", resources_count:) %>
+            <% end %>
+          </li>
+        <% end %>
+      <% end %>
     <% end %>
-  <% else %>
-    <span class="action-space icon"></span>
-  <% end %>
-<% end %>
+  </ul>
+</div>

data/app/views/decidim/admin/components/_component_row.html.erb

@@ -1,22 +1,22 @@
 <% if user_role_config.component_is_accessible?(component.manifest_name) %>
   <tr class="draggable-content component-<%= component.id %>" draggable="true" data-record-id="<%= component.id %>">
-    <td class="text-center dragging-handle">
+    <td class="text-center dragging-handle" data-label="">
       <%= icon("draggable", class: "dragger") %>
     </td>
-    <td class="!text-left">
+    <td class="!text-left" data-label="<%= t("index.headers.name", scope: "decidim.admin.components") %>">
       <% if component.manifest.admin_engine %>
         <%= link_to translated_attribute(component.name), manage_component_path(component) %><br>
       <% else %>
         <%= translated_attribute component.name %>
       <% end %>
     </td>
-    <td>
+    <td data-label="<%= t("index.headers.type", scope: "decidim.admin.components") %>">
       <%= t "decidim.components.#{component.manifest.name}.name" %>
     </td>
-    <td>
+    <td data-label="<%= t("index.headers.visibility", scope: "decidim.admin.components") %>">
       <%= render partial: "decidim/admin/components/visibility_label", locals: { component: } %>
     </td>
-    <td class="table-list__actions">
+    <td class="table-list__actions" data-label="<%= t("index.headers.actions", scope: "decidim.admin.components") %>">
       <% if lookup_context.find_all("decidim/#{component.manifest_name}/admin/component/_actions").any? %>
         <%= render partial: "decidim/#{component.manifest_name}/admin/component/actions", locals: { component:, view: } %>
       <% else %>

data/app/views/decidim/admin/components/_components_table.html.erb

@@ -1,4 +1,4 @@
-<div class="table-scroll">
+<div class="table-stacked">
   <table class="table-list">
     <thead>
     <tr>

data/app/views/decidim/admin/components/_form.html.erb

@@ -1,5 +1,5 @@
 <div class="form__wrapper">
-  <div class="card" data-component="accordion" id="accordion-title">
+  <div class="card" data-controller="accordion" id="accordion-title">
     <div class="card-divider">
       <button class="card-divider-button" data-open="true" data-controls="panel-title" type="button">
         <%= icon "arrow-right-s-line" %>
@@ -16,7 +16,7 @@
     </div>
   </div>
   <% if form.object.settings? %>
-    <div class="card" data-component="accordion" id="accordion-global_settings">
+    <div class="card" data-controller="accordion" id="accordion-global_settings">
       <div class="card-divider">
         <button class="card-divider-button" data-open="true" data-controls="panel-global_settings" type="button">
           <%= icon "arrow-right-s-line" %>
@@ -44,7 +44,7 @@
     </div>
   <% end %>
   <% if current_participatory_space.has_steps? %>
-    <div class="card" data-component="accordion" id="accordion-step_settings">
+    <div class="card" data-controller="accordion" id="accordion-step_settings">
       <div class="card-divider">
         <button class="card-divider-button" data-open="true" data-controls="panel-step_settings" type="button">
           <%= icon "arrow-right-s-line" %>
@@ -82,7 +82,7 @@
       </div>
     </div>
   <% elsif form.object.default_step_settings? %>
-    <div class="card" data-component="accordion" id="accordion-default_step_settings">
+    <div class="card" data-controller="accordion" id="accordion-default_step_settings">
       <div class="card-divider">
         <button class="card-divider-button" data-open="true" data-controls="panel-default_step_settings" type="button">
           <%= icon "arrow-right-s-line" %>

data/app/views/decidim/admin/components/index.html.erb

@@ -7,21 +7,20 @@
 
       <% if allowed_to?(:create, :component) %>
       <div class="relative">
-        <button class="button button__sm button__secondary button--title" data-toggle="add-component-dropdown">
+        <button class="button button__sm button__secondary" data-controller="dropdown" data-target="add-component-dropdown">
           <%= t "components.index.add", scope: "decidim.admin" %>
-          <%= icon "arrow-down-s-line", class: "dropdown-filter-icon" %>
+          <%= icon "arrow-down-s-line", class: "!fill-white" %>
+          <%= icon "arrow-down-s-line", class: "!fill-white" %>
         </button>
-        <div class="dropdown-pane" id="add-component-dropdown" data-dropdown data-auto-focus="true" data-close-on-click="true">
-          <ul class="vertical menu add-components font-normal">
-            <% @manifests.each do |manifest| %>
-             <%= link_to new_component_path(type: manifest.name), class: manifest.name do %>
-              <li>
-                <%= t("#{manifest.name}.name", scope: "decidim.components") %>
-              </li>
+        <ul class="dropdown" id="add-component-dropdown" aria-hidden="true">
+          <% @manifests.each do |manifest| %>
+          <li class="dropdown__item">
+            <%= link_to new_component_path(type: manifest.name), class: "dropdown__button" do %>
+              <%= t("#{manifest.name}.name", scope: "decidim.components") %>
             <% end %>
-          <% end %>
-          </ul>
-        </div>
+          </li>
+        <% end %>
+        </ul>
       </div>
       <% end %>
     </h1>
@@ -30,7 +29,7 @@
   <%= render partial: "components_table", locals: { components: @components, view: :index } %>
   <% if allowed_to?(:manage_trash, :component, participatory_space: current_participatory_space) %>
     <div class="card mt-4">
-      <%= link_to manage_trash_components_path, class: "flex items-center underline text-secondary" do %>
+      <%= link_to manage_trash_components_path, class: "flex items-center  text-secondary" do %>
         <%= icon "delete-bin-2-line", class: "mr-2 fill-current text-secondary", role: "img" %>
         <%= t("actions.view_deleted_components", scope: "decidim.admin") %>
         <span class="ml-2">

data/app/views/decidim/admin/dashboard/show.html.erb

@@ -32,30 +32,18 @@
     </div>
   <% end %>
 
-  <div class="grid-x grid-margin-x">
-    <% if allowed_to? :read, :metrics %>
-      <div class="cell small-6 medium-6 large-6">
-        <%= render(
-          partial: "decidim/admin/metrics/metrics",
-          locals: {
-            metrics_presenter:,
-            show_link_to_more: true
-          }
-        ) %>
-      </div>
-    <% end %>
-
     <% if allowed_to? :read, :admin_log %>
-      <div class="cell small-6 medium-6 large-6">
-        <%= render partial: "decidim/admin/logs/logs_list", locals: { logs: latest_action_logs, display_filters: false } %>
-        <% if latest_action_logs.any? %>
-          <div class="mt-4">
-            <%= link_to t(".view_more_logs"), logs_path, class: "button button__sm button__secondary" %>
-          </div>
-        <% end %>
+      <div class="grid-x grid-margin-x">
+        <div class="cell small-6 medium-6 large-6">
+          <%= render partial: "decidim/admin/logs/logs_list", locals: { logs: latest_action_logs, display_filters: false } %>
+          <% if latest_action_logs.any? %>
+            <div class="mt-4">
+              <%= link_to t(".view_more_logs"), logs_path, class: "button button__sm button__secondary" %>
+            </div>
+          <% end %>
+        </div>
       </div>
     <% end %>
-  </div>
 
   <% if current_user.admin_terms_accepted? %>
     <%= link_to( t("title", scope: "decidim.admin.admin_terms_of_service"), admin_terms_show_path, class: "button button__text-secondary") %>

data/app/views/decidim/admin/exports/_dropdown.html.erb

@@ -1,20 +1,22 @@
-<span class="exports button button__sm button__secondary" data-toggle="<%= dropdown_id(filters) %>">
-  <% if filters.present? %>
-    <%= t("actions.export-selection", scope: "decidim.admin") %>
-  <% else %>
-    <%= t("actions.export", scope: "decidim.admin") %>
-  <% end %>
-  <%= icon "arrow-down-s-line", class: "dropdown-filter-icon" %>
-</span>
-<div class="dropdown-pane" id="<%= dropdown_id(filters) %>" data-dropdown data-position=bottom data-alignment=right data-auto-focus="true" data-close-on-click="true">
-  <ul class="vertical menu add-components">
+<div class="relative">
+  <button class="button button__sm button__transparent-secondary" data-controller="dropdown" data-target="<%= dropdown_id(filters) %>">
+    <% if filters.present? %>
+      <%= t("actions.export-selection", scope: "decidim.admin") %>
+    <% else %>
+      <%= t("actions.export", scope: "decidim.admin") %>
+    <% end %>
+    <%= icon "arrow-down-s-line" %>
+    <%= icon "arrow-down-s-line" %>
+  </button>
+
+  <ul id="<%= dropdown_id(filters) %>" class="dropdown dropdown__bottom" aria-hidden="true">
     <% component.manifest.export_manifests.each do |manifest| %>
       <% manifest.formats.each do |format| %>
-        <%= link_to exports_path(component, id: manifest.name, format:, resource_id:, filters:), method: :post do %>
-          <li class="exports--format--<%= format.downcase %> exports--<%= manifest.name %>">
+        <li class="dropdown__item">
+          <%= link_to exports_path(component, id: manifest.name, format:, resource_id:, filters:), class: "dropdown__button", method: :post do %>
             <%= t("decidim.admin.exports.export_as", name: t("decidim.#{component.manifest.name}.admin.exports.#{manifest.name}"), export_format: t("decidim.admin.exports.formats.#{format}")) %>
-          </li>
-        <% end %>
+          <% end %>
+        </li>
       <% end %>
     <% end %>
   </ul>

data/app/views/decidim/admin/help_sections/_form.html.erb

@@ -9,7 +9,7 @@
     <% f.object.sections.each do |section| %>
       <%= f.fields_for "sections[]", section do |section_form| %>
         <div class="form__wrapper">
-          <div class="card" data-component="accordion" id="accordion-<%= translated_attribute section.name %>">
+          <div class="card" data-controller="accordion" id="accordion-<%= translated_attribute section.name %>">
             <div class="card-divider">
               <button class="card-divider-button" data-open="true" data-controls="panel-<%= translated_attribute section.name %>" type="button">
                 <%= icon "arrow-right-s-line" %>

data/app/views/decidim/admin/impersonatable_users/index.html.erb

@@ -15,32 +15,34 @@
 </div>
 
 <div class="filters__section">
-  <div class="fcell">
-    <ul class="dropdown menu" data-dropdown-menu 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.managed"), url_for(state: "managed", q: @query) %></li>
-          <li><%= link_to t(".filter.not_managed"), url_for(state: "not_managed", q: @query) %></li>
-          <li><%= link_to t(".filter.all"), url_for(q: @query) %></li>
-        </ul>
+  <div class="relative">
+    <button class="button button__xs button__transparent-secondary" data-controller="dropdown" data-target="dropdown-filters">
+      <%= t("filter_label", scope: "decidim.admin.filters") %>
+      <%= icon "arrow-down-s-line", class: "!fill-secondary" %>
+      <%= icon "arrow-down-s-line", class: "!fill-secondary" %>
+    </button>
+
+    <ul class="dropdown" id="dropdown-filters" aria-hidden="true">
+      <li class="dropdown__item">
+        <%= link_to t(".filter.managed"), url_for(state: "managed", q: @query), class: "dropdown__button" %>
+      </li>
+      <li class="dropdown__item">
+        <%= link_to t(".filter.not_managed"), url_for(state: "not_managed", q: @query), class: "dropdown__button" %>
+      </li>
+      <li class="dropdown__item">
+        <%= link_to t(".filter.all"), url_for(q: @query), class: "dropdown__button" %>
       </li>
     </ul>
   </div>
   <div class="fcell search">
     <%= form_tag "", method: :get do %>
-      <div>
-        <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 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>
     <% end %>
@@ -48,28 +50,61 @@
 </div>
 
 <div class="card">
-  <div class="table-scroll">
+  <div class="table-stacked">
     <table class="table-list">
       <thead>
         <tr>
           <th><%= t(".name") %></th>
           <th><%= t(".status") %></th>
-          <th></th>
+          <th><%= t("decidim.admin.actions.actions") %></th>
         </tr>
       </thead>
       <tbody>
         <% @users.each do |user| %>
           <tr data-user-id="<%= user.id %>">
-            <td><%= user.name %></td>
-            <td><%= user.managed? ? t(".managed") : t(".not_managed") %></td>
-            <td class="table-list__actions">
-              <% if allowed_to? :impersonate, :impersonatable_user, user: user %>
-                <%= icon_link_to "user-line", new_impersonatable_user_impersonation_path(user), t(".impersonate"), class: "action-icon--impersonate" %>
-              <% end %>
-              <%= icon_link_to "time-line", impersonatable_user_impersonation_logs_path(user), t(".view_logs"), class: "action-icon--view-logs" %>
-              <% if allowed_to? :promote, :impersonatable_user, user: user %>
-                <%= icon_link_to "award-line", new_impersonatable_user_promotion_path(user), t(".promote"), class: "action-icon--promote" %>
-              <% end %>
+            <td data-label="<%= t(".name") %>">
+              <%= user.name %>
+            </td>
+            <td data-label="<%= t(".status") %>">
+              <%= user.managed? ? t(".managed") : t(".not_managed") %>
+            </td>
+            <td class="table-list__actions" data-label="<%= t("decidim.admin.actions.actions") %>">
+              <button type="button" data-controller="dropdown" data-target="actions-user-<%= user.id %>" aria-label="<%= t("decidim.admin.actions.actions_label", resource: user.name) %>">
+                <%= icon "more-fill", class: "text-secondary" %>
+              </button>
+
+              <div class="inline-block relative">
+                <ul id="actions-user-<%= user.id %>" class="dropdown dropdown__action" aria-hidden="true">
+                  <% if allowed_to? :impersonate, :impersonatable_user, user: user %>
+                    <li class="dropdown__item">
+                      <%= link_to new_impersonatable_user_impersonation_path(user), class: "dropdown__button" do %>
+                        <%= icon "user-line" %>
+                        <%= t(".impersonate") %>
+                      <% end %>
+                    </li>
+
+                    <hr>
+                  <% end %>
+
+                  <li class="dropdown__item">
+                    <%= link_to impersonatable_user_impersonation_logs_path(user), class: "dropdown__button" do %>
+                      <%= icon "time-line" %>
+                      <%= t(".view_logs") %>
+                    <% end %>
+                  </li>
+
+                  <% if allowed_to? :promote, :impersonatable_user, user: user %>
+                    <hr>
+
+                    <li class="dropdown__item">
+                      <%= link_to new_impersonatable_user_promotion_path(user), class: "dropdown__button" do %>
+                        <%= icon "award-line" %>
+                        <%= t(".promote") %>
+                      <% end %>
+                    </li>
+                  <% end %>
+                </ul>
+              </div>
             </td>
           </tr>
         <% end %>

data/app/views/decidim/admin/imports/_dropdown.html.erb

@@ -1,18 +1,20 @@
-<span class="imports button button__sm button__secondary" data-toggle="import-dropdown">
-  <%= t "actions.import", scope: "decidim.admin" %>
-  <%= icon "arrow-down-s-line", class: "dropdown-filter-icon" %>
-</span>
-<div class="dropdown-pane" id="import-dropdown" data-dropdown data-position=bottom data-alignment=right data-auto-focus="true" data-close-on-click="true">
-  <ul class="vertical menu add-components">
+<div class="relative">
+  <button class="button button__sm button__transparent-secondary" data-controller="dropdown" data-target="import-dropdown">
+    <%= t "actions.import", scope: "decidim.admin" %>
+    <%= icon "arrow-down-s-line" %>
+    <%= icon "arrow-down-s-line" %>
+  </button>
+
+  <ul id="import-dropdown" class="dropdown dropdown__bottom" aria-hidden="true">
     <% if custom %>
       <%= yield %>
     <% else %>
      <% component.manifest.import_manifests.each do |import_manifest| %>
-        <%= link_to admin_imports_path(component, resource_id:, name: import_manifest.name) do %>
-          <li class="imports--file imports--<%= import_manifest.name %>">
-            <%= import_manifest.message(:label, self) %>
-          </li>
-        <% end %>
+       <li class="dropdown__item">
+         <%= link_to admin_imports_path(component, resource_id:, name: import_manifest.name), class: "dropdown__button" do %>
+           <%= import_manifest.message(:label, self) %>
+         <% end %>
+       </li>
       <% end %>
     <% end %>
   </ul>

data/app/views/decidim/admin/imports/new.html.erb

@@ -3,26 +3,27 @@
   <h1 class="item_show__header-title">
     <%= import_manifest.message(:title, self) %>
 
-    <div id="js-other-actions-wrapper">
+    <div class="flex align-middle gap-x-4 ml-auto">
       <% if import_manifest.has_example? %>
-        <span class="imports-example button button__sm button__secondary mr-2" data-toggle="example-dropdown">
-          <%= t(".download_example") %>
-          <%= icon "arrow-down-s-line", class: "dropdown-filter-icon" %>
-        </span>
-        <div class="dropdown-pane" id="example-dropdown" data-dropdown data-position=bottom data-alignment=right data-auto-focus="true" data-close-on-click="true">
-          <ul class="vertical menu add-components">
+        <div class="relative">
+          <button class="button button__sm button__transparent-secondary" data-controller="dropdown" data-target="example-dropdown">
+            <%= t(".download_example") %>
+            <%= icon "arrow-down-s-line", class: "dropdown-filter-icon" %>
+            <%= icon "arrow-down-s-line", class: "dropdown-filter-icon" %>
+          </button>
+          <ul class="dropdown dropdown__component" id="example-dropdown" aria-hidden="true">
             <% mime_types.each do |format, name| %>
-              <%= link_to admin_imports_example_path(@current_component, name: import_manifest.name, format:) do %>
-                <li class="examples--format--<%= format.downcase %> examples--<%= import_manifest.name %>">
+              <li class="dropdown__item">
+                <%= link_to admin_imports_example_path(@current_component, name: import_manifest.name, format:), class: "dropdown__button" do %>
                   <%= t(".download_example_format", name:) %>
-                </li>
-              <% end %>
+                <% end %>
+              </li>
             <% end %>
           </ul>
         </div>
       <% end %>
 
-      <%= link_to t(".actions.back"), manage_component_path(@current_component), class: "button button__sm button__secondary hollow button--simple" %>
+      <%= link_to t(".actions.back"), manage_component_path(@current_component), class: "button button__sm button__secondary" %>
     </div>
   </h1>
 </div>