decidim-decidim_awesome 0.10.3 → 0.11.1

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

@@ -1,26 +1,32 @@
 <div class="card">
-  <div class="card-divider">
-    <h2 class="card-title"><%= t(".title") %>
-      <span class="exports dropdown tiny button button--simple button--title" data-toggle="export-dropdown">
-        <%= t "exports.button", scope: "decidim.decidim_awesome.admin.admin_accountability" %>
-      </span>
-      <div class="dropdown-pane" id="export-dropdown" data-dropdown data-auto-focus="true" data-close-on-click="true">
-        <ul class="vertical menu add-components">
-          <% %w{CSV JSON Excel}.each do |format| %>
-            <li class="exports--format--<%= format.downcase %> exports--registrations">
-              <%= link_to t("decidim.decidim_awesome.admin.admin_accountability.exports.export_as", export_format:
-                format.upcase), export_admin_accountability_path(export_params.merge(format: format)), method: :post %>
-            </li>
-          <% end %>
-        </ul>
+  <div class="bg-gray-6 p-4 rounded-t">
+    <h2 class="card-title flex md:flex-row justify-between sm:flex-wrap">
+      <%= t(".title") %>
+      <div class="flex 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" %>
+            <%= icon "arrow-down-s-fill" %>
+        </span>
+        <div class="dropdown-pane" id="export-dropdown" data-dropdown data-auto-focus="true" data-close-on-click="true">
+          <ul class="vertical menu add-components">
+            <% %w{CSV JSON Excel}.each do |format| %>
+              <li class="exports--format--<%= format.downcase %> exports--registrations">
+                <%= link_to t("decidim.decidim_awesome.admin.admin_accountability.exports.export_as", export_format:
+                  format.upcase), export_admin_accountability_path(export_params.merge(format: format)),
+                  method: :post,
+                  class: "focus-visible:outline-none" %>
+              </li>
+            <% end %>
+          </ul>
+        </div>
       </div>
-      <%= link_to t(global? ? ".see_spaces" : ".see_global"), admin_accountability_path(admins: !global?), class: "button tiny button--title new" %>
-      </h2>
+    </h2>
   </div>
 
   <%= render partial: "decidim/decidim_awesome/admin/shared/filters_with_date", locals: { i18n_ctx: "admin_accountability" } %>
 
-  <div class="card-section">
+  <div class="card-section p-4">
     <p class="help-text"><%= t(global? ? ".global_description" : ".description") %></p>
 
     <% if global_users_missing_date %>

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

@@ -2,9 +2,7 @@
   Force tailwind to compile these classes
   class="fill-success fill-alert"
 -->
-<div class="card-divider">
-  <h2 class="card-title"><%= t ".title" %></h2>
-</div>
+
 <div class="card-section decidim-version">
   <p>
     <span class="label <%= decidim_version_valid? ? "success" : "alert" %>"><%= t ".decidim_version", version: decidim_version %></span>

data/app/views/decidim/decidim_awesome/admin/config/_autoedit_box_label.html.erb

@@ -3,10 +3,10 @@
         scope: "activemodel.attributes",
         id: "<span class='awesome-auto-edit' data-var='#{var}' data-scope='#{scope}' data-key='#{key}'>#{key}</span>").html_safe %>
 
-    <%= icon_link_to "pencil", "#", t("edit_label", scope: "decidim.decidim_awesome.admin.config.form"), class: "awesome-auto-edit", data: { "scope" => "#{scope}" } %>
+    <%= icon_link_to "pencil-line", "#", t("edit_label", scope: "decidim.decidim_awesome.admin.config.form"), class: "awesome-auto-edit", data: { "scope" => "#{scope}" } %>
 
-    <%= link_to delete_path, method: :delete, class: "float-right delete-box", title: t("remove", scope: "decidim.decidim_awesome.admin.config.form_#{var}"), data: { confirm: t("sure_to_remove", scope: "decidim.decidim_awesome.admin.config.form_#{var}") } do %>
-        <%= icon "circle-x" %>
+    <%= link_to delete_path, method: :delete, class: "awesome-auto-delete", title: t("remove", scope: "decidim.decidim_awesome.admin.config.form_#{var}"), data: { confirm: t("sure_to_remove", scope: "decidim.decidim_awesome.admin.config.form_#{var}") } do %>
+        <%= icon "delete-bin-line" %>
         <%= t("delete", scope: "decidim.decidim_awesome.admin.config.form_#{var}") %>
     <% end %>
 <% end %>

data/app/views/decidim/decidim_awesome/admin/config/_constraints.html.erb

@@ -1,35 +1,34 @@
-<div class="constraints-editor" data-key="<%= key %>">
-  <div class="callout" style="display:none" data-closable>
-    <p></p>
-    <button class="close-button" aria-label="Dismiss alert" type="button" data-close>
-      <span aria-hidden="true">&times;</span>
-    </button>
-  </div>
+<div class="constraints-editor mb-8 mt-4" data-key="<%= key %>">
+  <%= cell "decidim/announcement", "<p></p>".html_safe, hidden: true %>
   <h5 class="mb-2"><%= t ".title" %></h5>
   <% if constraints.blank? %>
     <span class="label warning"><%= t ".always" %></span>
   <% end %>
 
-  <ul class="constraints-list<%= " inactive" if constraints.detect { |c| c.settings["participatory_space_manifest"] == "none" } %> <%= "no-items" if constraints.blank? || constraints.all? { |c| c.settings.none? { |k, val| val.present? } } %>">
+  <ul class="constraints-list<%= " inactive" if constraints&.detect{|c| c.settings["participatory_space_manifest"]=="none" } %>">
     <% constraints&.each do |constraint| %>
-      <% if constraint.settings.any? { |k, val| val.present? } %>
-        <li>
-          <% constraint.settings.reverse_each do |k, val| %>
-            <% if val.present? %>
-              <span class="label <%= k %> constraint-<%= val %>"><%= translate_constraint_value constraint, k %></span>
-            <% end %>
-          <% end %>
-          <button id="<%= "edit-#{key}-#{constraint.id}" %>" type="button" name="button" class="edit-condition" data-dialog-open="<%= "edit-modal-#{key}" %>" data-constraints-url="<%= constraint_path(id: constraint.id, key: key) %>">
+      <li>
+        <% constraint.settings.reverse_each do |k, val| %>
+          <span class="label <%= k %> constraint-<%= val %>"><%= translate_constraint_value constraint, k %></span>
+        <% end %>
+
+        <div class="inline-flex items-center gap-1 ml-10">
+          <button id="<%= "edit-#{key}-#{constraint.id}" %>" type="button" name="button" class="edit-condition button button__xs button__transparent-secondary" data-dialog-open="<%= "edit-modal-#{key}" %>" data-constraints-url="<%= constraint_path(id: constraint.id, key: key) %>">
             <%= t ".edit" %>
           </button>
 
-          <%= link_to t(".delete"), constraint_path(id: constraint.id), remote: true, method: :delete, class: "delete-condition" %>
-        </li>
-      <% end %>
+          <%= link_to t(".delete"), constraint_path(id: constraint.id), remote: true, method: :delete, class: "button button__xs button__transparent-primary" %>
+        </div>
+      </li>
     <% end %>
   </ul>
-  <button id="<%= "new-#{key}" %>" type="button" name="button" class="add-condition button small button__secondary" data-open="constraintsModal" data-constraints-url="<%= new_constraint_path(key: key) %>">
-    <%= icon "plus", class: "small" %>
+
+  <button id="<%= "new-#{key}" %>" type="button" name="button" class="add-condition button button__xs button__secondary" data-dialog-open="<%= "new-modal-#{key}" %>" data-constraints-url="<%= new_constraint_path(key: key) %>">
+    <%= icon "add-box-line" %>
     <%= t ".add_condition" %>
   </button>
+
 </div>
+
+<%= decidim_modal id: "edit-modal-#{key}", data: { constraint: key }, remote: true %>
+<%= decidim_modal id: "new-modal-#{key}", data: { constraint: key }, remote: true %>

data/app/views/decidim/decidim_awesome/admin/config/_form_admins.html.erb

@@ -1,4 +1,4 @@
-<div class="row column decidim_awesome-form">
+<div class="form__wrapper row column decidim_awesome-form">
   <% if config_enabled? :scoped_admins %>
     <p class="help-text"><%= t("help.scoped_admins", scope: "decidim.decidim_awesome.admin.config.form") %></p>
 
@@ -7,15 +7,16 @@
         <%= render(partial: "decidim/decidim_awesome/admin/config/autoedit_box_label", locals: { var: "scoped_admins", key: key, scope: "scoped_admin_#{key}", delete_path: decidim_admin_decidim_awesome.scoped_admin_path(key: key) }) %>
         <p class="form-error is-visible" id="scoped-admin-error-<%= $key %>"><%= errors[key.to_sym].join("<br>") if errors %></p>
 
-        <%= select_tag "config[scoped_admins][#{key}]", options_from_collection_for_select(users_for(value), :id, :text, proc { true }), { include_blank: false ,  class: "multiusers-select", multiple: true, data: { url: decidim_admin_decidim_awesome.users_path } } %>
+        <%= select_tag "config[scoped_admins][#{key}]", options_for_select(users_for(value), value), { include_blank: false ,  class: "multiusers-select", multiple: true, data: { url: decidim_admin_decidim_awesome.users_path } } %>
 
         <%= render(partial: "decidim/decidim_awesome/admin/config/constraints", locals: { key: "scoped_admin_#{key}", constraints: constraints_for("scoped_admin_#{key}") }) %>
       </div>
     <% end %>
 
-    <%= link_to t("new", scope: "decidim.decidim_awesome.admin.config.form_scoped_admins"), decidim_admin_decidim_awesome.scoped_admins_path, method: :post %>
+    <%= link_to decidim_admin_decidim_awesome.scoped_admins_path, method: :post, class: "button button__sm button__text-secondary mr-auto" do %>
+      <%= icon("add-box-line") %>
+      <%= t("new", scope: "decidim.decidim_awesome.admin.config.form_scoped_admins") %>
+    <% end %>
 
   <% end %>
 </div>
-
-<%= javascript_pack_tag "decidim_decidim_awesome_admin_form_exit_warn" %>

data/app/views/decidim/decidim_awesome/admin/config/_form_editors.html.erb

@@ -4,8 +4,8 @@
     <%= t("help.original_editor_override", scope: "decidim.decidim_awesome.admin.config.form") %></p>
   </div>
 
-  <% enabled_configs([:allow_images_in_full_editor, :allow_images_in_small_editor, :allow_videos_in_editors]).each do |key| %>
-    <div class="row column">
+  <% enabled_configs([:allow_images_in_editors, :allow_videos_in_editors]).each do |key| %>
+    <div class="row column card p-4">
       <%= form.check_box key, help_text: t("help.#{key}", scope: "decidim.decidim_awesome.admin.config.form") %>
 
       <%= render(partial: "decidim/decidim_awesome/admin/config/constraints", locals: { key: key, constraints: constraints_for(key) }) %>

data/app/views/decidim/decidim_awesome/admin/config/_form_livechat.html.erb

@@ -1,44 +1,60 @@
-<div class="row column decidim_awesome-form">
+<div class="form__wrapper decidim_awesome-form">
   <% if config_enabled? :intergram_for_public %>
+  <div class="row column">
     <%= form.check_box :intergram_for_public %>
-    <p class="help-text"><%= t("help.intergram_about", scope: "decidim.decidim_awesome.admin.config.form").html_safe %></p>
+    <span class="help-text mb-4" style="margin-top:-1rem;">
+      <%= t("help.intergram_about", scope: "decidim.decidim_awesome.admin.config.form").html_safe %>
+    </span>
 
     <%= render(partial: "decidim/decidim_awesome/admin/config/constraints", locals: { key: :intergram_for_public, constraints: constraints_for(:intergram_for_public) }) %>
 
     <%= fields_for "config[intergram_for_public_settings]", form.object.intergram_for_public_settings do |f| %>
-      <%= f.text_field :chat_id, label: t("intergram_chat_id", scope: "activemodel.attributes.config") %>
-      <p class="help-text"><%= t("help.intergram_config", scope: "decidim.decidim_awesome.admin.config.form").html_safe %></p>
+      <div class="mb-4">
+        <%= f.text_field :chat_id, label: t("intergram_chat_id", scope: "activemodel.attributes.config") %>
+        <p class="help-text" style="margin-top: -1rem;">
+          <%= t("help.intergram_config", scope: "decidim.decidim_awesome.admin.config.form").html_safe %>
+        </p>
+      </div>
+
       <%= f.check_box :require_login, label: t("intergram_require_login", scope: "activemodel.attributes.config") %>
-      <%= f.check_box :use_floating_button, label: t("intergram_use_floating_button", scope: "activemodel.attributes.config") %>
-      <%= f.color_field :color, label: t("intergram_color", scope: "activemodel.attributes.config") %>
+      <%= f.check_box :use_floating_button, class: "mb-4", label: t("intergram_use_floating_button", scope: "activemodel.attributes.config"), label_options: { class: "block" } %>
+      <%= f.color_field :color, class: "mb-4 block w-full p-1", label: t("intergram_color", scope: "activemodel.attributes.config") %>
 
-      <%= f.text_field :title_open, label: t("intergram_title_open", scope: "activemodel.attributes.config"), placeholder: t("decidim.decidim_awesome.config.intergram.title_open") %>
-      <%= f.text_field :title_closed, label: t("intergram_title_closed", scope: "activemodel.attributes.config"), placeholder: t("decidim.decidim_awesome.config.intergram.title_closed") %>
-      <%= f.text_field :intro_message, label: t("intergram_intro_message", scope: "activemodel.attributes.config"), placeholder: t("decidim.decidim_awesome.config.intergram.intro_message") %>
-      <%= f.text_field :auto_no_response, label: t("intergram_auto_no_response", scope: "activemodel.attributes.config"), placeholder: t("decidim.decidim_awesome.config.intergram.auto_no_response") %>
+      <%= f.text_field :title_open, class: "mb-4", label: t("intergram_title_open", scope: "activemodel.attributes.config"), placeholder: t("decidim.decidim_awesome.config.intergram.title_open") %>
+      <%= f.text_field :title_closed, class: "mb-4", label: t("intergram_title_closed", scope: "activemodel.attributes.config"), placeholder: t("decidim.decidim_awesome.config.intergram.title_closed") %>
+      <%= f.text_field :intro_message, class: "mb-4", label: t("intergram_intro_message", scope: "activemodel.attributes.config"), placeholder: t("decidim.decidim_awesome.config.intergram.intro_message") %>
+      <%= f.text_field :auto_no_response, class: "mb-4", label: t("intergram_auto_no_response", scope: "activemodel.attributes.config"), placeholder: t("decidim.decidim_awesome.config.intergram.auto_no_response") %>
     <% end %>
+  </div>
   <% end %>
 </div>
 
-<div class="row column decidim_awesome-form">
+<div class="form__wrapper decidim_awesome-form">
   <% if config_enabled? :intergram_for_admins %>
+  <div class="row column">
     <%= form.check_box :intergram_for_admins %>
-    <p class="help-text"><%= t("help.intergram_about", scope: "decidim.decidim_awesome.admin.config.form").html_safe %></p>
+    <span class="help-text mb-4" style="margin-top:-1rem;">
+      <%= t("help.intergram_about", scope: "decidim.decidim_awesome.admin.config.form").html_safe %>
+    </span>
 
     <%= render(partial: "decidim/decidim_awesome/admin/config/constraints", locals: { key: :intergram_for_admins, constraints: constraints_for(:intergram_for_admins) }) %>
 
     <%= fields_for "config[intergram_for_admins_settings]", form.object.intergram_for_admins_settings do |f| %>
-      <%= f.text_field :chat_id, label: t("intergram_chat_id", scope: "activemodel.attributes.config") %>
-      <p class="help-text"><%= t("help.intergram_config", scope: "decidim.decidim_awesome.admin.config.form").html_safe %></p>
-
-      <%= f.check_box :use_floating_button, label: t("intergram_use_floating_button", scope: "activemodel.attributes.config") %>
-      <%= f.color_field :color, label: t("intergram_color", scope: "activemodel.attributes.config") %>
-
-      <%= f.text_field :title_open, label: t("intergram_title_open", scope: "activemodel.attributes.config"), placeholder: t("decidim.decidim_awesome.config.intergram.title_open") %>
-      <%= f.text_field :title_closed, label: t("intergram_title_closed", scope: "activemodel.attributes.config"), placeholder: t("decidim.decidim_awesome.config.intergram.title_closed") %>
-      <%= f.text_field :intro_message, label: t("intergram_intro_message", scope: "activemodel.attributes.config"), placeholder: t("decidim.decidim_awesome.config.intergram.intro_message") %>
-      <%= f.text_field :auto_no_response, label: t("intergram_auto_no_response", scope: "activemodel.attributes.config"), placeholder: t("decidim.decidim_awesome.config.intergram.auto_no_response") %>
+      <div class="mb-4">
+        <%= f.text_field :chat_id, label: t("intergram_chat_id", scope: "activemodel.attributes.config") %>
+        <p class="help-text" style="margin-top: -1rem;">
+          <%= t("help.intergram_config", scope: "decidim.decidim_awesome.admin.config.form").html_safe %>
+        </p>
+      </div>
+
+      <%= f.check_box :use_floating_button, class: "mb-4", label: t("intergram_use_floating_button", scope: "activemodel.attributes.config") %>
+      <%= f.color_field :color, class: "mb-4 block w-full p-1", label: t("intergram_color", scope: "activemodel.attributes.config") %>
+
+      <%= f.text_field :title_open, class: "mb-4", label: t("intergram_title_open", scope: "activemodel.attributes.config"), placeholder: t("decidim.decidim_awesome.config.intergram.title_open") %>
+      <%= f.text_field :title_closed, class: "mb-4", label: t("intergram_title_closed", scope: "activemodel.attributes.config"), placeholder: t("decidim.decidim_awesome.config.intergram.title_closed") %>
+      <%= f.text_field :intro_message, class: "mb-4", label: t("intergram_intro_message", scope: "activemodel.attributes.config"), placeholder: t("decidim.decidim_awesome.config.intergram.intro_message") %>
+      <%= f.text_field :auto_no_response, class: "mb-4", label: t("intergram_auto_no_response", scope: "activemodel.attributes.config"), placeholder: t("decidim.decidim_awesome.config.intergram.auto_no_response") %>
     <% end %>
-
+  </div>
   <% end %>
 </div>

data/app/views/decidim/decidim_awesome/admin/config/_form_proposal_custom_fields.html.erb

@@ -21,13 +21,13 @@
       </div>
     <% end %>
     <% form.object.send(config_var)&.each do |key, value| %>
-      <div class="card proposal_custom_fields_container<%= " private" if priv %> js-box-container" data-key="<%= key %>" data-var="<%= config_var %>">
+      <div class="card p-4 proposal_custom_fields_container<%= " private" if priv %> js-box-container" data-key="<%= key %>" data-var="<%= config_var %>">
         <%= render("decidim/decidim_awesome/admin/config/autoedit_box_label", var: config_var, key: key, scope: "#{field}_#{key}", delete_path: decidim_admin_decidim_awesome.proposal_custom_field_path(key: key, private: priv)) %>
         <p class="form-error is-visible"><%= errors[key.to_sym].join("<br>") if errors %></p>
 
         <%= hidden_field_tag key, value, name: "config[#{config_var}][#{key}]" %>
 
-        <div class="proposal_custom_fields_editor <%= " private" if priv %>">
+        <div class="proposal_custom_fields_editor mt-4<%= " private" if priv %>">
           <div class="loading-spinner"></div>
         </div>
 
@@ -35,11 +35,9 @@
       </div>
     <% end %>
 
-    <%= link_to decidim_admin_decidim_awesome.proposal_custom_fields_path(private: priv), method: :post, class: "add-field button small hollow mr-auto" do %>
-      <%= icon "plus", class: "small" %>
+    <%= link_to decidim_admin_decidim_awesome.proposal_custom_fields_path(private: priv), method: :post, class: "button button__sm button__text-secondary mr-auto" do %>
+      <%= icon("add-box-line") %>
       <%= t("new", scope: "decidim.decidim_awesome.admin.config.form_#{config_var}") %>
     <% end %>
   <% end %>
 </div>
-
-<%= javascript_pack_tag "decidim_decidim_awesome_admin_form_exit_warn" %>

data/app/views/decidim/decidim_awesome/admin/config/_form_proposals.html.erb

@@ -1,108 +1,96 @@
-<div class="row column decidim_awesome-form">
-  <% if config_enabled? :allow_images_in_proposals %>
-    <p class="text-info"><%= t("rich_text_editor_in_public_views", scope: "decidim.decidim_awesome.admin.config") if current_organization.rich_text_editor_in_public_views %></p>
-
-    <%= form.check_box :allow_images_in_proposals, disabled: current_organization.rich_text_editor_in_public_views %>
-    <p class="help-text"><%= t("help.allow_images_in_proposals", scope: "decidim.decidim_awesome.admin.config.form") %></p>
-
-    <% unless current_organization.rich_text_editor_in_public_views %>
+<div class="form__wrapper decidim_awesome-form gap-0">
+  <% if config_enabled?(:allow_images_in_proposals) && !current_organization.rich_text_editor_in_public_views %>
+    <div class="row column">
+      <%= form.check_box :allow_images_in_proposals, help_text: t("help.allow_images_in_proposals", scope: "decidim.decidim_awesome.admin.config.form") %>
       <%= render(partial: "decidim/decidim_awesome/admin/config/constraints", locals: { key: :allow_images_in_proposals, constraints: constraints_for(:allow_images_in_proposals) }) %>
-    <% end %>
+    </div>
   <% end %>
-</div>
-
-<% if config_enabled? :additional_proposal_sortings %>
-  </div> <!-- .card-section -->
-  </div><!-- .card -->
 
-  <div class="card">
-    <div class="card-divider">
+  <% if config_enabled?(:additional_proposal_sortings) %>
+    <div class="row column">
       <h2 class="card-title"><%= t("additional_proposal_sortings.title", scope: "decidim.decidim_awesome.admin.config.form") %></h2>
     </div>
-    <div class="card-section">
-      <div class="row column decidim_awesome-form">
-        <%= form.select :additional_proposal_sortings, @form.additional_proposal_sorting_labels, { include_blank: false }, { multiple: true } %>
-        <p class="help-text">
-          <%= t("additional_proposal_sortings.help", scope: "decidim.decidim_awesome.admin.config.form") %> <%= link_to t("additional_proposal_sortings.enable_all", scope: "decidim.decidim_awesome.admin.config.form"), "#", id: "additional_proposal_sortings-enable-all" %>.
-        </p>
-
-        <%= render(partial: "decidim/decidim_awesome/admin/config/constraints", locals: { key: :additional_proposal_sortings, constraints: constraints_for(:additional_proposal_sortings) }) %>
-      </div>
-<% end %>
+    <div class="row column">
+      <%= form.select :additional_proposal_sortings, @form.additional_proposal_sorting_labels, { include_blank: false }, { multiple: true } %>
+
+      <p class="help-text"><%= t("additional_proposal_sortings.help", scope: "decidim.decidim_awesome.admin.config.form") %> <%= link_to t("additional_proposal_sortings.enable_all", scope: "decidim.decidim_awesome.admin.config.form"), "#", id: "additional_proposal_sortings-enable-all" %>.</p>
 
-<% if config_enabled?(:validate_title_min_length, :validate_title_max_caps_percent, :validate_title_max_marks_together, :validate_title_start_with_caps) %>
-  </div> <!-- .card-section -->
-  </div><!-- .card -->
+      <%= render(partial: "decidim/decidim_awesome/admin/config/constraints", locals: { key: :additional_proposal_sortings, constraints: constraints_for(:additional_proposal_sortings) }) %>
+    </div>
+  <% end %>
 
-  <div class="card">
-    <div class="card-divider">
+  <% if config_enabled?(:validate_title_min_length, :validate_title_max_caps_percent, :validate_title_max_marks_together, :validate_title_start_with_caps) %>
+    <div class="row column">
       <h2 class="card-title"><%= t("validators.title", scope: "decidim.decidim_awesome.admin.config.form") %></h2>
     </div>
-    <div class="card-section">
-      <div class="row column decidim_awesome-form">
-        <% if config_enabled? :validate_title_start_with_caps %>
-          <%= form.check_box :validate_title_start_with_caps %>
+    <% if config_enabled? :validate_title_start_with_caps %>
+      <div class="row column">
+        <%= form.check_box :validate_title_start_with_caps %>
 
-          <%= render(partial: "decidim/decidim_awesome/admin/config/constraints", locals: { key: :validate_title_start_with_caps, constraints: constraints_for(:validate_title_start_with_caps) }) %>
-        <% end %>
+        <%= render(partial: "decidim/decidim_awesome/admin/config/constraints", locals: { key: :validate_title_start_with_caps, constraints: constraints_for(:validate_title_start_with_caps) }) %>
+      </div>
+    <% end %>
 
-        <% if config_enabled? :validate_title_min_length %>
-          <%= form.number_field :validate_title_min_length %>
-          <p class="help-text"><%= t("help.validate_title_min_length", scope: "decidim.decidim_awesome.admin.config.form") %></p>
+    <% if config_enabled?(:validate_title_min_length) %>
+      <div class="row column">
+        <%= form.number_field :validate_title_min_length, help_text: t("help.validate_title_min_length", scope: "decidim.decidim_awesome.admin.config.form") %>
 
-          <%= render(partial: "decidim/decidim_awesome/admin/config/constraints", locals: { key: :validate_title_min_length, constraints: constraints_for(:validate_title_min_length) }) %>
-        <% end %>
+        <%= render(partial: "decidim/decidim_awesome/admin/config/constraints", locals: { key: :validate_title_min_length, constraints: constraints_for(:validate_title_min_length) }) %>
+      </div>
+    <% end %>
 
-        <% if config_enabled? :validate_title_max_caps_percent %>
-          <%= form.number_field :validate_title_max_caps_percent %>
-          <p class="help-text"><%= t("help.validate_title_max_caps_percent", scope: "decidim.decidim_awesome.admin.config.form") %></p>
+    <% if config_enabled?(:validate_title_max_caps_percent) %>
+      <div class="row column">
+      <%= form.number_field :validate_title_max_caps_percent, help_text: t("help.validate_title_max_caps_percent", scope: "decidim.decidim_awesome.admin.config.form") %>
 
-          <%= render(partial: "decidim/decidim_awesome/admin/config/constraints", locals: { key: :validate_title_max_caps_percent, constraints: constraints_for(:validate_title_max_caps_percent) }) %>
-        <% end %>
+      <%= render(partial: "decidim/decidim_awesome/admin/config/constraints", locals: { key: :validate_title_max_caps_percent, constraints: constraints_for(:validate_title_max_caps_percent) }) %>
+      </div>
+    <% end %>
 
-        <% if config_enabled? :validate_title_max_marks_together %>
-          <%= form.number_field :validate_title_max_marks_together %>
-          <p class="help-text"><%= t("help.validate_title_max_marks_together", scope: "decidim.decidim_awesome.admin.config.form") %></p>
+    <% if config_enabled?(:validate_title_max_marks_together) %>
+      <div class="row column">
+      <%= form.number_field :validate_title_max_marks_together, help_text: t("help.validate_title_max_marks_together", scope: "decidim.decidim_awesome.admin.config.form") %>
 
-          <%= render(partial: "decidim/decidim_awesome/admin/config/constraints", locals: { key: :validate_title_max_marks_together, constraints: constraints_for(:validate_title_max_marks_together) }) %>
-        <% end %>
+      <%= render(partial: "decidim/decidim_awesome/admin/config/constraints", locals: { key: :validate_title_max_marks_together, constraints: constraints_for(:validate_title_max_marks_together) }) %>
       </div>
-<% end %>
-
-<% if config_enabled?(:validate_body_min_length, :validate_body_max_caps_percent, :validate_body_max_marks_together, :validate_body_start_with_caps) %>
-  </div> <!-- .card-section -->
-  </div><!-- .card -->
+    <% end %>
+  <% end %>
 
-  <div class="card">
-    <div class="card-divider">
+  <% if config_enabled?(:validate_body_min_length, :validate_body_max_caps_percent, :validate_body_max_marks_together, :validate_body_start_with_caps) %>
+    <div class="row column">
       <h2 class="card-title"><%= t("validators.body", scope: "decidim.decidim_awesome.admin.config.form") %></h2>
     </div>
-    <div class="card-section">
-      <% if config_enabled? :validate_body_start_with_caps %>
+
+    <% if config_enabled?(:validate_body_start_with_caps) %>
+      <div class="row column">
         <%= form.check_box :validate_body_start_with_caps %>
 
         <%= render(partial: "decidim/decidim_awesome/admin/config/constraints", locals: { key: :validate_body_start_with_caps, constraints: constraints_for(:validate_body_start_with_caps) }) %>
-      <% end %>
+      </div>
+    <% end %>
 
-      <% if config_enabled? :validate_body_min_length %>
-        <%= form.number_field :validate_body_min_length %>
-        <p class="help-text"><%= t("help.validate_body_min_length", scope: "decidim.decidim_awesome.admin.config.form") %></p>
+    <% if config_enabled?(:validate_body_min_length) %>
+      <div class="row column">
+        <%= form.number_field :validate_body_min_length, help_text: t("help.validate_body_min_length", scope: "decidim.decidim_awesome.admin.config.form") %>
 
         <%= render(partial: "decidim/decidim_awesome/admin/config/constraints", locals: { key: :validate_body_min_length, constraints: constraints_for(:validate_body_min_length) }) %>
-      <% end %>
+      </div>
+    <% end %>
 
-      <% if config_enabled? :validate_body_max_caps_percent %>
-        <%= form.number_field :validate_body_max_caps_percent %>
-        <p class="help-text"><%= t("help.validate_body_max_caps_percent", scope: "decidim.decidim_awesome.admin.config.form") %></p>
+    <% if config_enabled?(:validate_body_max_caps_percent) %>
+      <div class="row column">
+        <%= form.number_field :validate_body_max_caps_percent, help_text: t("help.validate_body_max_caps_percent", scope: "decidim.decidim_awesome.admin.config.form") %>
 
         <%= render(partial: "decidim/decidim_awesome/admin/config/constraints", locals: { key: :validate_body_max_caps_percent, constraints: constraints_for(:validate_body_max_caps_percent) }) %>
-      <% end %>
+      </div>
+    <% end %>
 
-      <% if config_enabled? :validate_body_max_marks_together %>
-        <%= form.number_field :validate_body_max_marks_together %>
-        <p class="help-text"><%= t("help.validate_body_max_marks_together", scope: "decidim.decidim_awesome.admin.config.form") %></p>
+    <% if config_enabled?(:validate_body_max_marks_together) %>
+      <div class="row column">
+        <%= form.number_field :validate_body_max_marks_together, help_text: t("help.validate_body_max_marks_together", scope: "decidim.decidim_awesome.admin.config.form") %>
 
         <%= render(partial: "decidim/decidim_awesome/admin/config/constraints", locals: { key: :validate_body_max_marks_together, constraints: constraints_for(:validate_body_max_marks_together) }) %>
-      <% end %>
-    </div>
-<% end %>
+      </div>
+    <% end %>
+  <% end %>
+</div>

data/app/views/decidim/decidim_awesome/admin/config/_form_styles.html.erb

@@ -1,13 +1,16 @@
-<div class="row column decidim_awesome-form">
+<div class="form__wrapper row column decidim_awesome-form">
   <% if config_enabled? :scoped_styles %>
-    <p class="help-text"><%= t("help.scoped_styles", scope: "decidim.decidim_awesome.admin.config.form") %>
-      <%= t("help.scoped_styles_variables", scope: "decidim.decidim_awesome.admin.config.form") %>
-    </p>
-    <p class="help-text" style="white-space: unset">
-      <% ["primary", "secondary", "success", "warning", "alert", "highlight", "highlight_alternative"].each do |color| %>
-        <span class="color-box <%= color %>" style="background-color: <%= current_organization.colors[color] %>"></span> var(--<%= color %>)
+    <div class="colors-help">
+      <p><%= t("help.scoped_styles", scope: "decidim.decidim_awesome.admin.config.form") %>
+        <%= t("help.scoped_styles_variables", scope: "decidim.decidim_awesome.admin.config.form") %>
+      </p>
+      <p class="colors">
+        <% ["primary", "secondary", "tertiary", "success", "warning", "alert"].each do |color| %>
+        <span class="color-box <%= color %>" style="background-color: <%= current_organization.colors[color] %>"></span>
+        <code>var(--<%= color %>)</code>
       <% end %>
-    </p>
+      </p>
+    </div>
 
     <% form.object.scoped_styles&.each do |key, value| %>
       <div class="scoped_styles_container p-4 js-box-container" data-key="<%= key %>">
@@ -18,9 +21,10 @@
       </div>
     <% end %>
 
-    <%= link_to t("new", scope: "decidim.decidim_awesome.admin.config.form_scoped_styles"), decidim_admin_decidim_awesome.scoped_styles_path, method: :post %>
+    <%= link_to decidim_admin_decidim_awesome.scoped_styles_path, method: :post, class: "button button__sm button__text-secondary mr-auto" do %>
+      <%= icon("add-box-line") %>
+      <%= t("new", scope: "decidim.decidim_awesome.admin.config.form_scoped_styles") %>
+    <% end %>
 
   <% end %>
 </div>
-
-<%= javascript_pack_tag "decidim_decidim_awesome_admin_form_exit_warn" %>

data/app/views/decidim/decidim_awesome/admin/config/_form_surveys.html.erb

@@ -1,9 +1,11 @@
-<div class="row column decidim_awesome-form">
+<div class="form__wrapper decidim_awesome-form">
   <% if config_enabled? :auto_save_forms %>
-
-    <%= form.check_box :auto_save_forms %>
-    <p class="help-text"><%= t("help.auto_save_forms", scope: "decidim.decidim_awesome.admin.config.form") %></p>
-
-    <%= render(partial: "decidim/decidim_awesome/admin/config/constraints", locals: { key: :auto_save_forms, constraints: constraints_for(:auto_save_forms) }) %>
+    <div class="row column">
+      <%= form.check_box :auto_save_forms %>
+      <span class="help-text mb-4" style="margin-top: -1rem;">
+        <%= t("help.auto_save_forms", scope: "decidim.decidim_awesome.admin.config.form") %>
+      </span>
+      <%= render(partial: "decidim/decidim_awesome/admin/config/constraints", locals: { key: :auto_save_forms, constraints: constraints_for(:auto_save_forms) }) %>
+    </div>
   <% end %>
 </div>

data/app/views/decidim/decidim_awesome/admin/config/show.html.erb

@@ -1,14 +1,24 @@
-<%= decidim_form_for(@form, method: :patch, url: decidim_admin_decidim_awesome.config_path(config_var), html: { class: "awesome-edit-config" }, data: { "safe-path" => decidim_admin_decidim_awesome.config_path(config_var) }) do |f| %>
-  <div class="card">
-    <div class="card-divider">
-      <%= t(".title", setting: t(config_var, scope: "decidim.decidim_awesome.admin.config.title")) %>
+<div class="item_show__header">
+  <h2 class="item_show__header-title">
+    <%= t(".title", setting: t(config_var, scope: "decidim.decidim_awesome.admin.config.title")) %>
+  </h2>
+</div>
+<div class="card">
+  <div class="card-section">
+    <div class="item__edit item__edit-1col">
+      <div class="item__edit-form">
+        <%= decidim_form_for(@form, method: :patch, url: decidim_admin_decidim_awesome.config_path(config_var), html: { class: "form-defaults awesome-edit-config" }, data: { "safe-path" => decidim_admin_decidim_awesome.config_path(config_var) }) do |f| %>
+          <div class="card-section">
+            <%= render "form_#{config_var}", form: f, errors: defined?(errors) ? errors : nil %>
+          </div>
+
+          <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>
-    <div class="card-section">
-      <%= render partial: "form_#{config_var}", locals: { form: f, errors: defined?(errors) ? errors : nil } %>
-    </div>
-  </div>
-  <div class="button--double form-general-submit">
-    <%= f.submit t(".update") %>
   </div>
-<% end %>
-<%= render partial: "modal" %>
+</div>