decidim-decidim_awesome 0.10.1 → 0.11.1

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

@@ -1,18 +1,14 @@
-<div class="row column decidim_awesome-form">
-  <p class="help-text"><%= t("help.drag_and_drop_supported", scope: "decidim.decidim_awesome.admin.config.form") %></p>
-  <p class="help-text"><%= t("help.original_editor_override", scope: "decidim.decidim_awesome.admin.config.form") %></p>
-
-  <% enabled_configs([:allow_images_in_full_editor, :allow_images_in_small_editor]).each do |key| %>
-    <%= form.check_box key %>
-    <p class="help-text"><%= t("help.#{key}", scope: "decidim.decidim_awesome.admin.config.form") %></p>
-
-    <%= render(partial: "decidim/decidim_awesome/admin/config/constraints", locals: { key: key, constraints: constraints_for(key) }) %>
-  <% end %>
-
-  <% enabled_configs([:use_markdown_editor, :allow_images_in_markdown_editor]).each do |key| %>
-    <%= form.check_box key %>
-    <p class="help-text"><%= t("help.#{key}", scope: "decidim.decidim_awesome.admin.config.form") %></p>
-
-    <%= render(partial: "decidim/decidim_awesome/admin/config/constraints", locals: { key: key, constraints: constraints_for(key) }) %>
+<div class="form__wrapper decidim_awesome-form">
+  <div class="row column">
+    <p class="help-text"><%= t("help.drag_and_drop_supported", scope: "decidim.decidim_awesome.admin.config.form") %>
+    <%= t("help.original_editor_override", scope: "decidim.decidim_awesome.admin.config.form") %></p>
+  </div>
+
+  <% 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) }) %>
+    </div>
   <% end %>
 </div>

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

@@ -1,25 +1,43 @@
-<div class="callout warning"><%= t("caution", scope: "decidim.decidim_awesome.admin.config") %></div>
-<div class="row column decidim_awesome-form">
-  <% if config_enabled? :proposal_custom_fields %>
-    <p class="help-text"><%= t("help.proposal_custom_fields", scope: "decidim.decidim_awesome.admin.config.form") %></p>
-    <p class="help-text"><%= t("help.proposal_custom_fields_example", scope: "decidim.decidim_awesome.admin.config.form") %></p>
-    <p class="help-text"><%= t("help.proposal_custom_fields_translations", scope: "decidim.decidim_awesome.admin.config.form") %></p>
-
-    <% form.object.proposal_custom_fields&.each do |key, value| %>
-      <div class="proposal_custom_fields_container" data-key="<%= key %>">
-        <%= render(partial: "decidim/decidim_awesome/admin/config/autoedit_box_label", locals: { var: "proposal_custom_fields", key: key, scope: "proposal_custom_field_#{key}", delete_path: decidim_admin_decidim_awesome.proposal_custom_field_path(key: key) }) %>
+<%
+  priv = (config_var == "proposal_private_custom_fields")
+  field = priv ? "proposal_private_custom_field" : "proposal_custom_field"
+%>
+<div class="form__wrapper row column decidim_awesome-form">
+  <% if config_enabled? config_var %>
+    <% if priv %>
+      <div>
+        <p class="help-text text-alert"><%= t("help.proposal_private_custom_fields", scope: "decidim.decidim_awesome.admin.config.form") %></p>
+        <p class="help-text"><%= t("help.proposal_private_custom_fields_translations",
+            scope: "decidim.decidim_awesome.admin.config.form",
+            warning: content_tag(:i, t("decidim.decidim_awesome.proposal_private_custom_fields_disclosure")),
+            key: content_tag("code", "decidim.decidim_awesome.proposal_private_custom_fields_disclosure")
+          ).html_safe %></p>
+      </div>
+    <% else %>
+      <div class="colors-help">
+        <p class="help-text"><%= t("help.proposal_custom_fields", scope: "decidim.decidim_awesome.admin.config.form") %></p>
+        <p class="help-text"><%= t("help.proposal_custom_fields_example", scope: "decidim.decidim_awesome.admin.config.form") %></p>
+        <p class="help-text"><%= t("help.proposal_custom_fields_translations", scope: "decidim.decidim_awesome.admin.config.form") %></p>
+      </div>
+    <% end %>
+    <% form.object.send(config_var)&.each do |key, value| %>
+      <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[proposal_custom_fields][#{key}]" %>
-        <div class="proposal_custom_fields_editor">
+
+        <%= hidden_field_tag key, value, name: "config[#{config_var}][#{key}]" %>
+
+        <div class="proposal_custom_fields_editor mt-4<%= " private" if priv %>">
           <div class="loading-spinner"></div>
         </div>
-        <%= render(partial: "decidim/decidim_awesome/admin/config/constraints", locals: { key: "proposal_custom_field_#{key}", constraints: constraints_for("proposal_custom_field_#{key}") }) %>
+
+        <%= render("decidim/decidim_awesome/admin/config/constraints", key: "#{field}_#{key}", constraints: constraints_for("#{field}_#{key}")) %>
       </div>
     <% end %>
 
-    <%= link_to t(".new"), decidim_admin_decidim_awesome.proposal_custom_fields_path, method: :post %>
-
+    <%= 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_proposal_private_custom_fields.html.erb

@@ -0,0 +1 @@
+<%= render "form_proposal_custom_fields", **local_assigns %>

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 } %>
 
-<% if config_enabled? %i(validate_title_min_length validate_title_max_caps_percent validate_title_max_marks_together validate_title_start_with_caps) %>
-  </div> <!-- .card-section -->
-  </div><!-- .card -->
+      <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>
 
-  <div class="card">
-    <div class="card-divider">
+      <%= render(partial: "decidim/decidim_awesome/admin/config/constraints", locals: { key: :additional_proposal_sortings, constraints: constraints_for(:additional_proposal_sortings) }) %>
+    </div>
+  <% end %>
+
+  <% 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? %i(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 %>
-          <%= 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 %>
+    <% 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) }) %>
+      </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 %>
+        <%= render(partial: "decidim/decidim_awesome/admin/config/constraints", locals: { key: :validate_body_min_length, constraints: constraints_for(:validate_body_min_length) }) %>
+      </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 %>
+        <%= render(partial: "decidim/decidim_awesome/admin/config/constraints", locals: { key: :validate_body_max_caps_percent, constraints: constraints_for(:validate_body_max_caps_percent) }) %>
+      </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 %>
+        <%= render(partial: "decidim/decidim_awesome/admin/config/constraints", locals: { key: :validate_body_max_marks_together, constraints: constraints_for(:validate_body_max_marks_together) }) %>
       </div>
-<% end %>
+    <% end %>
+  <% end %>
+</div>

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

@@ -1,16 +1,19 @@
-<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" data-key="<%= key %>">
+      <div class="scoped_styles_container p-4 js-box-container" data-key="<%= key %>">
         <%= render(partial: "decidim/decidim_awesome/admin/config/autoedit_box_label", locals: { var: "scoped_styles", key: key, scope: "scoped_style_#{key}", delete_path: decidim_admin_decidim_awesome.scoped_style_path(key: key) }) %>
         <p class="form-error is-visible" id="custom-style-error-<%= key %>"><%= errors[key.to_sym].join("<br>") if errors %></p>
         <%= text_area_tag key, value, name: "config[scoped_styles][#{key}]", rows: 5 %>
@@ -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">
-      <h2 class="card-title"><%= t(".title", setting: config_var) %></h2>
+<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>

data/app/views/decidim/decidim_awesome/admin/constraints/_form.html.erb

@@ -1,4 +1,4 @@
-<div class="field" id="constraint-form-<%= params[:id] %>">
+<div class="form__wrapper" id="constraint-form-<%= params[:id] %>">
 
   <%= form.select :participatory_space_manifest, participatory_space_manifests.invert, include_blank: true %>
   <%= form.select :participatory_space_slug, participatory_spaces_list(@form.participatory_space_manifest).invert, include_blank: true %>
@@ -6,51 +6,3 @@
   <%= form.select :component_id, components_list(@form.participatory_space_manifest, @form.participatory_space_slug).invert, include_blank: true %>
 
 </div>
-
-<script type="text/javascript">
-
-(function() {
-  var div = document.getElementById('constraint-form-<%= params[:id] %>');
-  var space_manifest = div.getElementsByTagName("select")[0];
-  var space_slug = div.getElementsByTagName("select")[1];
-  var component_manifest = div.getElementsByTagName("select")[2];
-  var component_id = div.getElementsByTagName("select")[3];
-
-  space_manifest.addEventListener('change', function(e) {
-    var event = new CustomEvent("constraint:change", {
-      detail: [{
-        key: "participatory_space_manifest",
-        value: e.target.value
-      }]
-    });
-    // Dispatch detail as event so main processor will reload accordingly
-    document.body.dispatchEvent(event);
-  });
-
-  space_slug.addEventListener('change', function(e) {
-    var event = new CustomEvent("constraint:change", {
-      detail: [{
-        key: "participatory_space_manifest",
-        value: space_manifest.value
-      },{
-        key: "participatory_space_slug",
-        value: e.target.value
-      }]
-    });
-    // Dispatch detail as event so main processor will reload accordingly
-    document.body.dispatchEvent(event);
-  });
-
-  // Component manfiest and component id are mutually exclusive
-  component_manifest.addEventListener('change', function(e) {
-    if(e.target.value)
-      component_id.value = "";
-  });
-
-  component_id.addEventListener('change', function(e) {
-    if(e.target.value)
-      component_manifest.value = "";
-  });
-})();
-
-</script>

data/app/views/decidim/decidim_awesome/admin/constraints/new.html.erb

@@ -1,14 +1,19 @@
-<%= decidim_form_for(@form, url: constraints_path(key: params[:key]), remote: true) do |f| %>
-  <div class="card">
-    <div class="card-divider">
-      <h2 class="card-title"><%= t ".constraint" %></h2>
-    </div>
-    <div class="card-section">
+<%= decidim_form_for(@form, url: constraints_path(key: params[:key]), remote: true, html: { class: "form-defaults" }) do |f| %>
+  <div data-dialog-container>
+    <%= icon "lock-line" %>
+    <h2 tabindex="-1" data-dialog-title><%= t ".constraint" %></h2>
+
+    <div>
       <%= render partial: "form", object: f %>
     </div>
   </div>
-  <div class="button--double form-general-submit">
-    <button type="submit" class="button" name="commit" data-close><%= t(".save") %></button>
-    <button class="button hollow" type="button" data-close><%= t(".cancel") %></button>
+
+  <div data-dialog-actions>
+    <button class="button button__sm md:button__lg button__transparent-secondary" type="button"
+      data-dialog-close="<%= "new-modal-#{params[:key]}" %>">
+      <%= t(".cancel") %>
+    </button>
+
+    <%= f.submit t(".save"), class: "button button__sm md:button__lg button__secondary", data: { "dialog-close": "new-modal-#{params[:key]}" } %>
   </div>
 <% end %>

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

@@ -1,14 +1,19 @@
-<%= decidim_form_for(@form, url: constraint_path, method: :patch, remote: true) do |f| %>
-  <div class="card">
-    <div class="card-divider">
-      <h2 class="card-title"><%= t ".constraint" %></h2>
-    </div>
-    <div class="card-section">
+<%= decidim_form_for(@form, url: constraint_path, method: :patch, remote: true, html: { class: "form-defaults" }) do |f| %>
+  <div data-dialog-container>
+    <%= icon "lock-line" %>
+    <h2 tabindex="-1" data-dialog-title><%= t ".constraint" %></h2>
+
+    <div>
       <%= render partial: "form", object: f %>
     </div>
   </div>
-  <div class="button--double form-general-submit">
-    <%= f.submit t(".save") %>
-    <button class="button hollow" type="button" data-close><%= t(".cancel") %></button>
+
+  <div data-dialog-actions>
+    <button class="button button__sm md:button__lg button__transparent-secondary" type="button"
+      data-dialog-close="<%= "edit-modal-#{params[:key]}" %>">
+      <%= t(".cancel") %>
+    </button>
+
+    <%= f.submit t(".save"), class: "button button__sm md:button__lg button__secondary", data: { "dialog-close": "edit-modal-#{params[:key]}" } %>
   </div>
 <% end %>