decidim-decidim_awesome 0.12.5 → 0.13.1

data/app/packs/src/decidim/decidim_awesome/awesome_map/controllers/controller.js

@@ -50,7 +50,11 @@ export default class Controller {
         // subgroups don't have th addLayers utility
         collectionEdges.forEach((item) => {
           this.awesomeMap.layers[this.component.type].group.addLayer(item.node.marker);
-          this.addMarkerCategory(item.node.marker, item.node.category);
+          if (item.node.taxonomies && item.node.taxonomies.length > 0) {
+            item.node.taxonomies.forEach((taxonomy) => {
+              this.addMarkerTaxonomy(item.node.marker, taxonomy);
+            });
+          }
           this.addMarkerHashtags(item.node.marker, item.node.hashtags);
         });
       }
@@ -103,15 +107,14 @@ export default class Controller {
     this.allNodes.push(node);
   }
 
-  addMarkerCategory(marker, category) {
-    // Add to category layer
-    const cat = this.awesomeMap.getCategory(category);
-    if (this.awesomeMap.layers[cat.id]) {
+  addMarkerTaxonomy(marker, taxonomy) {
+    const tax = this.awesomeMap.getTaxonomy(taxonomy);
+    if (this.awesomeMap.layers[tax.id]) {
       try {
-        this.awesomeMap.layers[cat.id].group.addLayer(marker);
-        this.awesomeMap.controls.showCategory(cat);
+        this.awesomeMap.layers[tax.id].group.addLayer(marker);
+        this.awesomeMap.controls.showTaxonomy(tax);
       } catch (evt) {
-        console.error("Failed category marker assignation. category:", category, "marker:", marker, evt.message);
+        console.error("Failed taxonomy marker assignation. taxonomy:", taxonomy, "marker:", marker, evt.message);
       }
     }
   }

data/app/packs/src/decidim/decidim_awesome/awesome_map/controllers/meetings_controller.js

@@ -13,7 +13,7 @@ export default class MeetingsController extends Controller {
     // for each meeting, create a marker with an associated popup
     this.fetcher.onNode = (meeting) => {
       let marker = new L.Marker([meeting.coordinates.latitude, meeting.coordinates.longitude], {
-        icon: this.createIcon(this.awesomeMap.getCategory(meeting.category).color),
+        icon: this.createIcon(this.awesomeMap.getTaxonomy(meeting.taxonomies && meeting.taxonomies[0]).color),
         title: meeting.title.translation
       });
       // console.log("new meeting", meeting, marker)

data/app/packs/src/decidim/decidim_awesome/awesome_map/controllers/proposals_controller.js

@@ -28,15 +28,15 @@ export default class ProposalsController extends Controller {
     // for each proposal, create a marker with an associated popup
     this.fetcher.onNode = (proposal) => {
       let marker = new L.Marker([proposal.coordinates.latitude, proposal.coordinates.longitude], {
-        icon: this.createIcon(this.awesomeMap.getCategory(proposal.category).color),
+        icon: this.createIcon(this.awesomeMap.getTaxonomy(proposal.taxonomies && proposal.taxonomies[0]).color),
         title: proposal.title.translation
       });
 
       // Check if it has amendments, add it to a list
-      // also assign parent's proposal categories to it
+      // also assign parent's proposal taxonomies to it
       // console.log("onNode proposal", proposal, "amendment:", proposal.amendments)
       if (proposal.amendments && proposal.amendments.length) {
-        proposal.amendments.forEach((amendment) => {
+        proposal.amendments.filter((amendment) => amendment && amendment.emendation).forEach((amendment) => {
           this.amendments[amendment.emendation.id] = proposal;
         });
       }
@@ -67,10 +67,10 @@ export default class ProposalsController extends Controller {
         }
         if (this.awesomeMap.config.menu.amendments) {
           marker.marker.addTo(this.awesomeMap.layers.amendments.group);
-          // mimic parent category (amendments doesn't have categories)
-          if (parent.category) {
+          // mimic parent taxonomy (amendments doesn't have taxonomies)
+          if (parent.taxonomy) {
             marker.marker.setIcon(this.createIcon("text-secondary"));
-            this.addMarkerCategory(marker.marker, parent.category)
+            this.addMarkerTaxonomy(marker.marker, parent.taxonomy)
           }
         }
       }

data/app/packs/src/decidim/decidim_awesome/awesome_map/controls_ui.js

@@ -1,4 +1,4 @@
-/* eslint-disable no-ternary, multiline-ternary */
+/* eslint-disable no-ternary, multiline-ternary, no-nested-ternary, max-lines */
 
 import * as L from "leaflet";
 
@@ -21,7 +21,7 @@ export default class ControlsUI {
     this.onHashtag = this._orderHashtags;
 
     this.awesomeMap.map.on("overlayadd", () => {
-      this.removeHiddenCategories();
+      this.removeHiddenTaxonomies();
     });
   }
 
@@ -30,18 +30,18 @@ export default class ControlsUI {
     this.main.addTo(this.awesomeMap.map);
 
     this.addSearchControls();
-    if (this.awesomeMap.config.menu.categories) {
-      this.addCategoriesControls();
+    if (this.awesomeMap.config.menu.taxonomies) {
+      this.addTaxonomiesControls();
     }
 
     // sub-layer hashtag title toggle
     $("#awesome-map").on("click", ".awesome_map-title-control", (evt) => {
       evt.preventDefault();
       evt.stopPropagation();
-      const categories = document.getElementById("awesome_map-categories-control");
+      const taxonomies = document.getElementById("awesome_map-taxonomies-control");
       const hashtags = document.getElementById("awesome_map-hashtags-control");
-      if (categories) {
-        categories.classList.toggle("active");
+      if (taxonomies) {
+        taxonomies.classList.toggle("active");
       }
       if (hashtags) {
         hashtags.classList.toggle("active");
@@ -82,62 +82,146 @@ export default class ControlsUI {
   addSearchControls() {
     const section = this.main.getContainer().querySelector(".leaflet-control-layers-list");
     if (section) {
-      section.insertAdjacentHTML("beforeend", `<div id="awesome_map-categories-control" class="active"><b class="awesome_map-title-control">${window.DecidimAwesome.i18n.categories}</b><div class="categories-container"></div></div>
+      section.insertAdjacentHTML("beforeend", `<div id="awesome_map-taxonomies-control" class="active"><b class="awesome_map-title-control">${window.DecidimAwesome.i18n.taxonomies}</b><div class="taxonomies-container"></div></div>
     <div id="awesome_map-hashtags-control"><b class="awesome_map-title-control">${window.DecidimAwesome.i18n.hashtags}</b><div class="hashtags-container"></div><a href="#" class="awesome_map-toggle_all_tags">${window.DecidimAwesome.i18n.selectDeselectAll}</a></div>`);
     } else {
       console.error("Can't find the section to insert the controls");
     }
   }
 
-  addCategoriesControls() {
-    this.awesomeMap.categories.forEach((category) => {
-      // add control layer for this category
-      const label = `<i class="awesome_map-category_${category.id}"></i> ${category.name}`;
-      this.awesomeMap.layers[category.id] = {
-        label: label,
-        group: new L.FeatureGroup.SubGroup(this.awesomeMap.cluster)
-      };
-      this.awesomeMap.layers[category.id].group.addTo(this.awesomeMap.map);
-      const categories = document.querySelector("#awesome_map-categories-control .categories-container");
-      if (categories) {
-        categories.insertAdjacentHTML("beforeend", `<label data-layer="${category.id}" class="awesome_map-category-${category.id}${category.parent ? " subcategory" : ""}" data-parent="${category.parent}"><input type="checkbox" class="awesome_map-categories-selector" checked><span>${label}</span></label>`);
-      } else {
-        console.error("Can't find the section to insert the categories");
-      }
-    })
+  addTaxonomiesControls() {
+    // First, organize taxonomies by levels
+    const rootTaxonomies = this.awesomeMap.taxonomies.filter((tax) => !tax.parent);
+
+    // Process each root taxonomy independently
+    rootTaxonomies.forEach((rootTaxonomy) => {
+      // Add the root taxonomy
+      this._addTaxonomyToUI(rootTaxonomy, 0);
+
+      // Find and add direct children of this root taxonomy
+      const children = this.awesomeMap.taxonomies.filter((tax) => tax.parent === rootTaxonomy.id);
 
-    // category events
-    $("#awesome-map").on("change", ".awesome_map-categories-selector", (evt) => {
+      children.forEach((child) => {
+        this._addTaxonomyToUI(child, 1);
+
+        // Find and add grandchildren of this child
+        const grandchildren = this.awesomeMap.taxonomies.filter((tax) => tax.parent === child.id);
+
+        grandchildren.forEach((grandchild) => {
+          this._addTaxonomyToUI(grandchild, 2);
+        });
+      });
+    });
+
+    // taxonomy events
+    $("#awesome-map").on("change", ".awesome_map-taxonomies-selector", (evt) => {
       evt.preventDefault();
       evt.stopPropagation();
 
       const id = $(evt.target).closest("label").data("layer");
-      const cat = this.awesomeMap.getCategory(id);
-      // console.log("changed, layer", id, "cat", cat, "checked", evt.target.checked, e);
-      if (cat) {
-        const layer = this.awesomeMap.layers[cat.id];
-        if (evt.target.checked) {
-          // show group of markers
-          this.awesomeMap.map.addLayer(layer.group);
+      const taxonomy = this.awesomeMap.getTaxonomy(id);
+
+      if (taxonomy) {
+        this._handleTaxonomyToggle(taxonomy, evt.target.checked);
+      }
+    });
+  }
+
+  _addTaxonomyToUI(taxonomy, level) {
+    // Create control layer for this taxonomy
+    const circleIcon = taxonomy.parent ? `<i class="awesome_map-taxonomy_${taxonomy.id}"></i> ` : "";
+    const label = `${circleIcon}${taxonomy.name}`;
+    this.awesomeMap.layers[taxonomy.id] = {
+      label: label,
+      group: new L.FeatureGroup.SubGroup(this.awesomeMap.cluster)
+    };
+    this.awesomeMap.layers[taxonomy.id].group.addTo(this.awesomeMap.map);
+
+    const taxonomiesContainer = document.querySelector("#awesome_map-taxonomies-control .taxonomies-container");
+    if (taxonomiesContainer) {
+      const levelClass = level === 0 ? "root-taxonomy" : level === 1 ? "child-taxonomy" : "grandchild-taxonomy";
+      const indentStyle = `style="padding-left: ${level * 20}px;"`;
+
+      taxonomiesContainer.insertAdjacentHTML("beforeend",
+        `<label data-layer="${taxonomy.id}"
+                class="awesome_map-taxonomy-${taxonomy.id} ${levelClass}"
+                data-parent="${taxonomy.parent || ""}"
+                data-level="${level}"
+                ${indentStyle}>
+          <input type="checkbox" class="awesome_map-taxonomies-selector" checked>
+          <span>${label}</span>
+        </label>`
+      );
+    } else {
+      console.error("Can't find the section to insert the taxonomies");
+    }
+  }
+
+  _handleTaxonomyToggle(taxonomy, isChecked) {
+    const layer = this.awesomeMap.layers[taxonomy.id];
+
+    if (isChecked) {
+      // Show group of markers
+      this.awesomeMap.map.addLayer(layer.group);
+    } else {
+      // Hide group of markers
+      this.awesomeMap.map.removeLayer(layer.group);
+      // Uncheck all children when parent is unchecked
+      this._uncheckChildrenTaxonomies(taxonomy.id);
+    }
+
+    // Update parent state (indeterminate/checked/unchecked)
+    this._updateParentTaxonomyState(taxonomy);
+
+    // sync hashtags
+    this.updateHashtagLayers();
+  }
+
+  _uncheckChildrenTaxonomies(taxonomyId) {
+    const children = this.awesomeMap.taxonomies.filter((tax) => tax.parent === taxonomyId);
+    children.forEach((child) => {
+      const childInput = document.querySelector(`label[data-layer="${child.id}"] input`);
+      if (childInput && childInput.checked) {
+        childInput.checked = false;
+        this.awesomeMap.map.removeLayer(this.awesomeMap.layers[child.id].group);
+        // Recursively uncheck grandchildren
+        this._uncheckChildrenTaxonomies(child.id);
+      }
+    });
+  }
+
+  _updateParentTaxonomyState(taxonomy) {
+    if (taxonomy.parent) {
+      const parentInput = document.querySelector(`label[data-layer="${taxonomy.parent}"] input`);
+      if (parentInput) {
+        const siblings = this.awesomeMap.taxonomies.filter((tax) => tax.parent === taxonomy.parent);
+        const checkedSiblings = siblings.filter((sibling) => {
+          const siblingInput = document.querySelector(`label[data-layer="${sibling.id}"] input`);
+          return siblingInput && siblingInput.checked;
+        });
+
+        if (checkedSiblings.length === 0) {
+          // No siblings checked - uncheck parent
+          parentInput.checked = true;
+          this.awesomeMap.map.removeLayer(this.awesomeMap.layers[taxonomy].group);
+        } else if (checkedSiblings.length === siblings.length) {
+          // All siblings checked - check parent
+          parentInput.checked = true;
+          this.awesomeMap.map.addLayer(this.awesomeMap.layers[taxonomy.parent].group);
         } else {
-          // hide group of markers
-          this.awesomeMap.map.removeLayer(layer.group);
-          // cat.children().forEach((c) => {
-          //   let $el = $(`.awesome_map-category-${c.id}`);
-          //   if($el.contents("input").prop("checked")) {
-          //     $el.click();
-          //   }
-          // });
+          // Some siblings checked
+          parentInput.checked = true;
+          this.awesomeMap.map.addLayer(this.awesomeMap.layers[taxonomy.parent].group);
         }
-        // if it's a children, put the parent to indeterminate
-        this._indeterminateParentInput(cat);
-        // sync tags
-        this.updateHashtagLayers();
+
+        // Recursively update grandparent
+        const parentTaxonomy = this.awesomeMap.getTaxonomy(taxonomy.parent);
+        this._updateParentTaxonomyState(parentTaxonomy);
       }
-    });
+    }
   }
 
-  // Hashtags are collected directly from proposals (this is different than categories)
+  // Hashtags are collected directly from proposals (this is different than taxonomies)
   addHashtagsControls(hashtags, marker) {
     // show hashtag layer
     if (hashtags && hashtags.length) {
@@ -163,20 +247,24 @@ export default class ControlsUI {
     }
   }
 
-  showCategory(cat) {
-    document.getElementById("awesome_map-categories-control").style.display = "block";
-    // show category if hidden
-    const label = document.querySelector(`label.awesome_map-category-${cat.id}`);
-    const parent = document.querySelector(`label.awesome_map-category-${cat.parent}`);
-    if (label) {      
+  showTaxonomy(tax) {
+    document.getElementById("awesome_map-taxonomies-control").style.display = "block";
+
+    // Show taxonomy if hidden
+    const label = document.querySelector(`label.awesome_map-taxonomy-${tax.id}`);
+    if (label) {
       label.style.display = "block";
       // update number of items
-      label.setAttribute("title", `${parseInt(label.title || 0, 10) + 1} ${window.DecidimAwesome.i18n.items}`);
+      const currentCount = parseInt(label.title || 0, 10) + 1;
+      label.setAttribute("title", `${currentCount} ${window.DecidimAwesome.i18n.items}`);
     }
-    if (parent) {
-      // show parent if apply
-      parent.style.display = "block"
-      parent.setAttribute("title", `${parseInt(parent.title || 0, 10) + 1} ${window.DecidimAwesome.i18n.items}`);
+
+    // Also show all parent taxonomies up the hierarchy
+    if (tax.parent) {
+      const parentTaxonomy = this.awesomeMap.getTaxonomy(tax.parent);
+      if (parentTaxonomy) {
+        this.showTaxonomy(parentTaxonomy);
+      }
     }
   }
 
@@ -191,8 +279,8 @@ export default class ControlsUI {
     });
   }
 
-  removeHiddenCategories() {
-    $(".awesome_map-categories-selector:not(:checked)").each((_idx, el) => {
+  removeHiddenTaxonomies() {
+    $(".awesome_map-taxonomies-selector:not(:checked)").each((_idx, el) => {
       const layer = this.awesomeMap.layers[$(el).closest("label").data("layer")];
       if (layer) {
         this.awesomeMap.map.addLayer(layer.group);
@@ -216,9 +304,9 @@ export default class ControlsUI {
         this.awesomeMap.map.addLayer(layer.group);
       }
     });
-    // hide non-selected categories
+    // hide non-selected taxonomies
     this.removeHiddenComponents();
-    this.removeHiddenCategories();
+    this.removeHiddenTaxonomies();
   }
 
   updateStats(uid, total) {
@@ -227,15 +315,6 @@ export default class ControlsUI {
     $component.attr("title", `${total} ${window.DecidimAwesome.i18n.items}`);
   }
 
-  _indeterminateParentInput(cat) {
-    if (cat.parent) {
-      let $input = $(`.awesome_map-category-${cat.parent}`).contents("input");
-      let $subcats = $(`[class^="awesome_map-category-"][data-parent="${cat.parent}"]:visible`);
-      let numChecked = $subcats.contents("input:checked").length;
-      $input.prop("indeterminate", numChecked !== $subcats.length && numChecked !== 0);
-    }
-  }
-
   // order hashtags alphabetically
   _orderHashtags(_hashtag, $div) {
     let $last = $div.contents("label:last");

data/app/packs/src/decidim/decidim_awesome/awesome_map/load_map.js

@@ -30,7 +30,7 @@ document.addEventListener("DOMContentLoaded", () => {
     menu: {
       amendments: parse(dataset.menuAmendments),
       meetings: parse(dataset.menuMeetings),
-      categories: parse(dataset.menuCategories),
+      taxonomies: parse(dataset.menuTaxonomies),
       hashtags: parse(dataset.menuHashtags),
       mergeComponents: parse(dataset.menuMergeComponents)
     },

data/app/packs/stylesheets/decidim/decidim_awesome/admin/admin_accountability.scss

@@ -49,10 +49,6 @@
     }
   }
 
-  .row.column:last-child {
-    @apply flex items-center justify-center;
-  }
-
   .search-button-container {
     @apply flex flex-col items-start;
 
@@ -61,7 +57,15 @@
     }
   }
 
-  .row.column.search-field {
-    @apply flex-grow;
+  .row.column {
+    @apply mb-0;
+
+    &:last-child {
+      @apply flex items-center justify-center;
+    }
+
+    &.search-field {
+      @apply flex-grow;
+    }
   }
 }

data/app/packs/stylesheets/decidim/decidim_awesome/awesome_map/map.scss

@@ -110,7 +110,7 @@
 }
 
 #awesome_map- {
-  &categories-control {
+  &taxonomies-control {
     display: none;
 
     label {
@@ -123,20 +123,53 @@
         width: 0.8rem;
         height: 0.8rem;
         border-radius: 50%;
-        background-color: var(-- primary);
       }
 
-      &.subcategory {
-        padding-left: 1em;
+      // Hierarchical styling for taxonomies
+      &.root-taxonomy {
+        font-weight: bold;
+        margin-bottom: 0.3em;
+      }
+
+      &.child-taxonomy {
+        font-weight: 500;
+        margin-bottom: 0.2em;
+      }
+
+      &.grandchild-taxonomy {
+        font-weight: normal;
+        margin-bottom: 0.1em;
+
+        i {
+          width: 0.6rem;
+          height: 0.6rem;
+        }
+      }
+
+      // Indeterminate checkbox styling
+      input[type="checkbox"]:indeterminate {
+        background-color: #6c757d;
+        border-color: #6c757d;
+
+        &::before {
+          content: "−";
+          color: white;
+          font-weight: bold;
+          text-align: center;
+          line-height: 1;
+          display: block;
+        }
       }
     }
 
-    .categories-container {
+    .taxonomies-container {
       display: none;
+      max-height: 300px;
+      overflow-y: auto;
     }
 
     &.active {
-      .categories-container {
+      .taxonomies-container {
         display: block;
       }
     }

data/app/presenters/decidim/decidim_awesome/role_base_presenter.rb

@@ -60,7 +60,9 @@ module Decidim
       end
 
       def created_at
-        entry.changeset["created_at"]&.last || entry&.created_at
+        Time.zone.parse(entry.changeset["created_at"]&.last)
+      rescue StandardError
+        entry&.created_at
       end
 
       def created_date

data/app/presenters/decidim/decidim_awesome/user_entity_presenter.rb

@@ -9,9 +9,9 @@ module Decidim
           query = PaperTrail::Version.where(item_type:, event: "update", item_id:)
                                      .where("id > ?", entry.id)
           if roles.include? "admin"
-            query.where("object_changes LIKE '%\nadmin:\n- true\n- false%'").first
+            query.where("object_changes @> ?", { "admin" => [true, false] }.to_json).first
           else
-            query.where("object_changes LIKE '%\nroles:\n- - %'").first
+            query.where("object_changes @> ?", { "roles" => [[], []] }.to_json).first
           end
         end
       end

data/app/serializers/concerns/decidim/decidim_awesome/proposals/proposal_serializer_methods.rb

@@ -30,12 +30,12 @@ module Decidim
                 if body.is_a?(Hash)
                   body.each do |translation_locale, value|
                     fields_entries(custom_fields, value) do |field_key, field_value|
-                      payload["body/#{field_key}/#{translation_locale}".to_sym] = field_value if payload["body/#{field_key}/#{translation_locale}".to_sym].blank?
+                      payload[:"body/#{field_key}/#{translation_locale}"] = field_value if payload[:"body/#{field_key}/#{translation_locale}"].blank?
                     end
                   end
                 else
                   fields_entries(custom_fields, body) do |key, value|
-                    payload["body/#{key}/#{locale}".to_sym] = value
+                    payload[:"body/#{key}/#{locale}"] = value
                   end
                 end
               end
@@ -49,7 +49,7 @@ module Decidim
             if private_custom_fields.present?
               fields_entries(private_custom_fields, proposal.private_body) do |key, value|
                 value = value.first if value.is_a? Array
-                payload["private_body/#{key}".to_sym] = value
+                payload[:"private_body/#{key}"] = value
               end
             end
             payload

data/app/serializers/decidim/decidim_awesome/proposals/private_proposal_serializer.rb

@@ -20,7 +20,7 @@ module Decidim
           return payload unless notes.any?
 
           notes.each do |note|
-            payload["notes/#{note.id}".to_sym] = {
+            payload[:"notes/#{note.id}"] = {
               created_at: note.created_at,
               note: note.body,
               author: author_name(note.author)

data/app/validators/concerns/decidim/decidim_awesome/etiquette_validator_override.rb

@@ -6,24 +6,36 @@ module Decidim
       extend ActiveSupport::Concern
 
       included do
+        alias_method :original_validate_caps, :validate_caps
+        alias_method :original_validate_marks, :validate_marks
+        alias_method :original_validate_caps_first, :validate_caps_first
+
         private
 
         def validate_caps(record, attribute, value)
-          percent = awesome_config(record, "validate_#{attribute}_max_caps_percent").to_f
+          awesome_config = awesome_config(record, "validate_#{attribute_without_locale(attribute)}_max_caps_percent")
+          return original_validate_caps(record, attribute, value) if awesome_config.nil?
+
+          percent = awesome_config.to_f
           return if value.scan(/[[:upper:]]/).length < value.length * percent / 100
 
           record.errors.add(attribute, options[:message] || I18n.t("too_much_caps", scope: "decidim.decidim_awesome.validators", percent: percent.round))
         end
 
         def validate_marks(record, attribute, value)
-          marks = awesome_config(record, "validate_#{attribute}_max_marks_together").to_i + 1
+          awesome_config = awesome_config(record, "validate_#{attribute_without_locale(attribute)}_max_marks_together")
+          return original_validate_marks(record, attribute, value) if awesome_config.nil?
+
+          marks = awesome_config.to_i + 1
           return if value.scan(/[!?¡¿]{#{marks},}/).empty?
 
           record.errors.add(attribute, options[:message] || :too_many_marks)
         end
 
         def validate_caps_first(record, attribute, value)
-          return unless awesome_config(record, "validate_#{attribute}_start_with_caps")
+          awesome_config = awesome_config(record, "validate_#{attribute_without_locale(attribute)}_start_with_caps")
+          return original_validate_caps_first(record, attribute, value) if awesome_config.nil?
+          return unless awesome_config
           return if value.scan(/\A[[:lower:]]{1}/).empty?
 
           record.errors.add(attribute, options[:message] || :must_start_with_caps)
@@ -35,6 +47,12 @@ module Decidim
 
           config[var.to_sym]
         end
+
+        def attribute_without_locale(attribute)
+          return attribute unless Decidim.available_locales.map { |locale| "_#{locale}" }.any? { |str| attribute.ends_with?(str) }
+
+          attribute.to_s[0...-3]
+        end
       end
     end
   end

data/app/views/decidim/decidim_awesome/admin/admin_accountability/index.html.erb

@@ -1,8 +1,7 @@
-<div class="card">
-  <div class="bg-gray-6 p-4 rounded-t">
-    <h2 class="card-title flex md:flex-row justify-between sm:flex-wrap">
+  <div class="item_show__header">
+    <h1 class="item_show__header-title">
       <%= t(".title") %>
-      <div class="flex gap-4">
+      <div class="gap-4">
         <%= link_to t(global? ? ".see_spaces" : ".see_global"), admin_accountability_path(admins: !global?), class: "button button__sm button__transparent-secondary tiny button--title new" %>
         <span class="exports button button__sm button__secondary tiny button--simple button--title" data-toggle="export-dropdown">
             <%= t "exports.button", scope: "decidim.decidim_awesome.admin.admin_accountability" %>
@@ -21,13 +20,12 @@
           </ul>
         </div>
       </div>
-    </h2>
+    </h1>
   </div>
 
   <%= render partial: "decidim/decidim_awesome/admin/shared/filters_with_date", locals: { i18n_ctx: "admin_accountability" } %>
 
-  <div class="card-section p-4">
-    <p class="help-text"><%= t(global? ? ".global_description" : ".description") %></p>
+    <p class="help-text mt-3 mb-3"><%= t(global? ? ".global_description" : ".description") %></p>
 
     <% if global_users_missing_date %>
       <div class="callout warning"><%= t(".missing_users", date: l(global_users_missing_date, format: :decidim_short)) %></div>
@@ -67,5 +65,4 @@
       <%= paginate admin_actions, theme: "decidim" %>
     </div>
   </div>
-</div>
 <% append_stylesheet_pack_tag "decidim_admin_decidim_awesome_search_form" %>