decidim-admin 0.27.4 → 0.28.0.rc5

data/app/views/decidim/admin/organization/edit.html.erb

@@ -1,14 +1,22 @@
 <% add_decidim_page_title(t(".title")) %>
-<%= decidim_form_for(@form, html: { class: "form edit_organization" }, url: organization_path) do |f| %>
-  <div class="card">
-    <div class="card-divider">
-      <h2 class="card-title"><%= t ".title" %></h2>
+
+<div class="item_show__header">
+  <h2 class="item_show__header-title">
+    <%= t ".title" %>
+  </h2>
+</div>
+
+<div class="item__edit-form">
+  <%= decidim_form_for(@form, html: { class: "form-defaults form edit_organization" }, url: organization_path) do |f| %>
+    <div class="card">
+      <div class="card-section">
+        <%= render partial: "form", object: f %>
+      </div>
     </div>
-    <div class="card-section">
-      <%= render partial: "form", object: f %>
+    <div class="item__edit-sticky">
+      <div class="item__edit-sticky-container">
+        <%= f.submit t(".update"), class: "button button__sm button__secondary" %>
+      </div>
     </div>
-  </div>
-  <div class="button--double form-general-submit">
-    <%= f.submit t(".update") %>
-  </div>
-<% end %>
+  <% end %>
+</div>

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

@@ -1,85 +1,100 @@
-<div class="card">
-  <div class="card-divider">
-    <h2 class="card-title"><%= t ".homepage_appearance_title" %></h2>
-  </div>
-  <div class="card-section">
-    <div class="row column">
-      <%= form.translated :editor, :description %>
+<div class="form__wrapper">
+  <div class="card" data-component="accordion" id="accordion-homepage_appearance_title">
+    <div class="card-divider">
+      <button class="card-divider-button" data-open="true" data-controls="panel-homepage_appearance_title" type="button">
+        <%= icon "arrow-right-s-line" %>
+        <h2 class="card-title" id="homepage_appearance_title">
+          <%= t("homepage_appearance_title", scope: "decidim.admin.organization_appearance.form") %>
+        </h2>
+      </button>
     </div>
+    <div id="panel-homepage_appearance_title" class="card-section">
+      <div class="row column">
+        <%= form.translated :editor, :description, aria: { label: :description } %>
+      </div>
 
     <div class="row">
-      <div class="columns xlarge-6 slug">
-        <%= form.text_field :cta_button_path %>
-        <p class="help-text"><%== t(".cta_button_path_help", url: decidim_form_slug_url("", form.object.cta_button_path)) %></p>
+      <div class="columns slug">
+        <%= form.text_field :cta_button_path, help_text: t(".cta_button_path_help_html", url: decidim_form_slug_url("", form.object.cta_button_path)) %>
       </div>
 
-      <div class="columns xlarge-6">
-        <%= form.translated :text_field, :cta_button_text %>
-        <p class="help-text"><%= t(".cta_button_text_help") %></p>
+      <div class="columns">
+        <%= form.translated :text_field, :cta_button_text, help_text: t(".cta_button_text_help") %>
       </div>
     </div>
   </div>
 </div>
 
-<div class="card">
-  <div class="card-divider">
-    <h2 class="card-title"><%= t ".homepage_highlighted_content_banner_title" %></h2>
-  </div>
-  <div class="card-section">
-    <div class="row column">
-      <%= form.check_box :highlighted_content_banner_enabled %>
+  <div class="card" data-component="accordion" id="accordion-homepage_highlighted_content_banner_title">
+    <div class="card-divider">
+      <button class="card-divider-button" data-open="true" data-controls="panel-homepage_highlighted_content_banner_title" type="button">
+        <%= icon "arrow-right-s-line" %>
+        <h2 class="card-title" id="homepage_highlighted_content_banner_title">
+          <%= t("homepage_highlighted_content_banner_title", scope: "decidim.admin.organization_appearance.form") %>
+        </h2>
+      </button>
     </div>
+    <div id="panel-homepage_highlighted_content_banner_title" class="card-section">
+      <div class="row column">
+        <%= form.check_box :highlighted_content_banner_enabled %>
+      </div>
 
-    <div class="row column">
-      <%= form.translated :text_area, :highlighted_content_banner_title %>
-    </div>
+      <div class="row column">
+        <%= form.translated :text_area, :highlighted_content_banner_title, aria: { label: :highlighted_content_banner_title } %>
+      </div>
 
-    <div class="row column">
-      <%= form.translated :editor, :highlighted_content_banner_short_description %>
-    </div>
+      <div class="row column">
+        <%= form.translated :editor, :highlighted_content_banner_short_description, aria: { label: :highlighted_content_banner_short_description } %>
+      </div>
 
-    <div class="row column">
-      <%= form.translated :text_area, :highlighted_content_banner_action_title %>
-    </div>
+      <div class="row column">
+        <%= form.translated :text_area, :highlighted_content_banner_action_title, aria: { label: :highlighted_content_banner_action_title } %>
+      </div>
 
-    <div class="row column">
-      <%= form.translated :text_area, :highlighted_content_banner_action_subtitle %>
-    </div>
+      <div class="row column">
+        <%= form.translated :text_area, :highlighted_content_banner_action_subtitle, aria: { label: :highlighted_content_banner_action_subtitle } %>
+      </div>
 
-    <div class="row column">
-      <%= form.url_field :highlighted_content_banner_action_url %>
-    </div>
+      <div class="row column">
+        <%= form.url_field :highlighted_content_banner_action_url %>
+      </div>
 
-    <div class="row">
-      <div class="columns xlarge-6">
-        <%= form.upload :highlighted_content_banner_image %>
+      <div class="row">
+        <div class="columns">
+          <%= form.upload :highlighted_content_banner_image, button_class: "button button__sm button__transparent-secondary" %>
+        </div>
       </div>
     </div>
   </div>
-</div>
 
-<div class="card">
-  <div class="card-divider">
-    <h2 class="card-title"><%= t ".omnipresent_banner_appearance_title" %></h2>
-  </div>
-  <div class="card-section">
-    <div class="row column">
-      <%= form.check_box :enable_omnipresent_banner %>
+  <div class="card" data-component="accordion" id="accordion-omnipresent_banner_appearance_title">
+    <div class="card-divider">
+      <button class="card-divider-button" data-open="true" data-controls="panel-omnipresent_banner_appearance_title" type="button">
+        <%= icon "arrow-right-s-line" %>
+        <h2 class="card-title" id="omnipresent_banner_appearance_title">
+          <%= t("omnipresent_banner_appearance_title", scope: "decidim.admin.organization_appearance.form") %>
+        </h2>
+      </button>
     </div>
+    <div id="panel-omnipresent_banner_appearance_title" class="card-section">
+      <div class="row column">
+        <%= form.check_box :enable_omnipresent_banner %>
+      </div>
 
-    <div class="row column">
-      <%= form.translated :text_field, :omnipresent_banner_title %>
-    </div>
+      <div class="row column">
+        <%= form.translated :text_field, :omnipresent_banner_title, aria: { label: :omnipresent_banner_title } %>
+      </div>
 
-    <div class="row column">
-      <%= form.translated :text_field, :omnipresent_banner_short_description %>
-    </div>
+      <div class="row column">
+        <%= form.translated :text_field, :omnipresent_banner_short_description, aria: { label: :omnipresent_banner_short_description } %>
+      </div>
 
-    <div class="row column">
-      <%= form.url_field :omnipresent_banner_url %>
+      <div class="row column">
+        <%= form.url_field :omnipresent_banner_url %>
+      </div>
     </div>
   </div>
+  <%= render partial: "decidim/admin/organization_appearance/form/images", locals: { form: } %>
+  <%= render partial: "decidim/admin/organization_appearance/form/colors", locals: { form: } %>
+  <%= render partial: "decidim/admin/organization_appearance/form/header_snippets", locals: { form: } %>
 </div>
-
-<%= render partial: "decidim/admin/organization_appearance/form/images", locals: { form: form } %>
-<%= render partial: "decidim/admin/organization_appearance/form/colors", locals: { form: form } %>

data/app/views/decidim/admin/organization_appearance/edit.html.erb

@@ -1,7 +1,18 @@
 <% add_decidim_page_title(t("edit_organization_appearance", scope: "decidim.admin.titles")) %>
-<%= decidim_form_for(@form, html: { class: "form edit_organization_appearance" }, url: organization_appearance_path, method: :put) do |f| %>
-  <%= render partial: "form", object: f %>
-  <div class="button--double form-general-submit">
-    <%= f.submit t(".update") %>
-  </div>
-<% end %>
+
+<div class="item_show__header">
+  <h2 class="item_show__header-title">
+    <%= t("edit_organization_appearance", scope: "decidim.admin.titles") %>
+  </h2>
+</div>
+
+<div class="item__edit-form">
+  <%= decidim_form_for(@form, html: { class: "form-defaults form edit_organization_appearance" }, url: organization_appearance_path, method: :put) do |f| %>
+    <%= render partial: "form", object: f %>
+    <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>

data/app/views/decidim/admin/organization_appearance/form/_colors.html.erb

@@ -1,30 +1,69 @@
-<div class="card">
+<div class="card" data-component="accordion" id="accordion-colors">
   <div class="card-divider">
-    <h2 class="card-title"><%= t ".colors_title" %></h2>
+    <button class="card-divider-button" data-open="true" data-controls="panel-colors" type="button">
+      <%= icon "arrow-right-s-line" %>
+      <h2 class="card-title" id="colors">
+        <%= t("colors_title", scope: "decidim.admin.organization_appearance.form.colors") %>
+      </h2>
+    </button>
   </div>
-  <div class="card-section">
-    <div class="callout warning">
-      <p>
-        <%= icon "warning" %>
-        <%= t ".colors_warning_html", link: "https://webaim.org/resources/contrastchecker" %>
-      </p>
-    </div>
-    <div class="organization-colors">
-      <%= form.color_field :primary_color, value: current_organization.colors["primary"] %>
-      <%= form.color_field :secondary_color, value: current_organization.colors["secondary"] %>
-      <%= form.color_field :success_color, value: current_organization.colors["success"] %>
-      <%= form.color_field :warning_color, value: current_organization.colors["warning"] %>
-      <%= form.color_field :alert_color, value: current_organization.colors["alert"] %>
-      <%= form.color_field :highlight_color, value: current_organization.colors["highlight"] %>
-      <%= form.color_field :highlight_alternative_color, value: current_organization.colors["highlight-alternative"] %>
-      <%= form.color_field :theme_color, value: current_organization.colors["theme"] %>
-    </div>
+  <div id="panel-colors" class="card-section">
+    <div class="row column">
+      <details class="color-picker">
+        <summary>
+          <%= t(".title") %>
+        </summary>
+
+        <div class="color-picker__box">
+          <p><%= t(".explanation") %></p>
+
+          <label class="color-picker__label_choose">
+            <%= t(".choose_color") %>
+            <div id="primary-selector"></div>
+          </label>
+
+          <label class="color-picker__label_saturation" for="primary-saturation">
+            <%= t(".saturation") %>
+            <input id="primary-saturation" type="range" min="0" max="100">
+          </label>
+
+          <fieldset>
+            <legend><%= t(".legend_html") %></legend>
 
-    <% if Decidim.enable_html_header_snippets %>
-      <div class="row column">
-        <%= form.text_area :header_snippets %>
-        <p class="help-text"><%= t(".header_snippets_help") %></p>
+            <label>
+              <%= t("primary_color", scope: "activemodel.attributes.organization") %>
+              <div class="color-picker__color color-picker__color_primary"></div>
+              <input id="preview-primary" type="hidden">
+            </label>
+
+            <label>
+              <%= t("secondary_color", scope: "activemodel.attributes.organization") %>
+              <div class="color-picker__color color-picker__color_secondary"></div>
+              <input id="preview-secondary" type="hidden">
+            </label>
+
+            <label>
+              <%= t("tertiary_color", scope: "activemodel.attributes.organization") %>
+              <div class="color-picker__color color-picker__color_tertiary"></div>
+              <input id="preview-tertiary" type="hidden">
+            </label>
+
+            <button id="set-colors" class="button button__sm button__secondary">
+              <%= t(".update_suggested_colors") %>
+            </button>
+          </fieldset>
+        </div>
+      </details>
+      <%= cell("decidim/announcement", t(".colors_warning_html"), callout_class: "warning") %>
+
+      <div class="organization-colors">
+        <%= form.color_field :primary_color, value: current_organization.colors["primary"] %>
+        <%= form.color_field :secondary_color, value: current_organization.colors["secondary"] %>
+        <%= form.color_field :tertiary_color, value: current_organization.colors["tertiary"] %>
+        <%= form.color_field :success_color, value: current_organization.colors["success"] %>
+        <%= form.color_field :warning_color, value: current_organization.colors["warning"] %>
+        <%= form.color_field :alert_color, value: current_organization.colors["alert"] %>
       </div>
-    <% end %>
+    </div>
   </div>
 </div>

data/app/views/decidim/admin/organization_appearance/form/_header_snippets.html.erb

@@ -0,0 +1,17 @@
+<% if Decidim.enable_html_header_snippets %>
+  <div class="card" data-component="accordion" id="accordion-header-snippets">
+    <div class="card-divider">
+      <button class="card-divider-button" data-open="true" data-controls="panel-header-snippets" type="button">
+        <%= icon "arrow-right-s-line" %>
+        <h2 class="card-title">
+          <%= t("title", scope: "decidim.admin.organization_appearance.form.header_snippets") %>
+        </h2>
+      </button>
+    </div>
+    <div id="panel-header-snippets" class="card-section">
+      <div class="row column">
+        <%= form.text_area :header_snippets, help_text: t(".header_snippets_help_html"), rows: 20 %>
+      </div>
+    </div>
+  </div>
+<% end %>

data/app/views/decidim/admin/organization_appearance/form/_images.html.erb

@@ -1,52 +1,51 @@
-<div class="card">
+<div class="card" data-component="accordion" id="accordion-layout_appearance_title">
   <div class="card-divider">
-    <h2 class="card-title"><%= t ".layout_appearance_title" %></h2>
+    <button class="card-divider-button" data-open="true" data-controls="panel-layout_appearance_title" type="button">
+      <%= icon "arrow-right-s-line" %>
+      <h2 class="card-title" id="layout_appearance_title">
+        <%= t("layout_appearance_title", scope: "decidim.admin.organization_appearance.form.images") %>
+      </h2>
+    </button>
   </div>
 
-  <div class="card-section">
-    <div class="minimap">
-      <label for="minimap"><%= t(".preview") %></label>
-      <%= render "decidim/admin/organization_appearance/form/minimap" %>
-    </div>
-
-    <div class="organization-images">
-      <div class="preview">
-        <%= form.upload(
-              :favicon,
-              dimensions_info: current_organization.attached_uploader(:favicon).dimensions_info,
-              extension_allowlist: current_organization.attached_uploader(:favicon).extension_allowlist,
-              help_i18n_scope: "decidim.forms.file_help.icon"
-            ) %>
+  <div id="panel-layout_appearance_title" class="card-section">
+    <div class="row column">
+      <div class="minimap">
+        <label for="minimap"><%= t(".preview") %></label>
+        <%= render "decidim/admin/organization_appearance/form/minimap" %>
       </div>
 
-      <div class="preview">
-        <%= form.upload(
-              :logo,
-              dimensions_info: current_organization.attached_uploader(:logo).dimensions_info,
-              extension_allowlist: current_organization.attached_uploader(:logo).extension_allowlist
-            ) %>
-      </div>
+      <div class="organization-images mt-8 grid grid-cols-1 md:grid-cols-2 gap-8">
+        <div class="preview">
+          <%= form.upload(
+                :favicon,
+                dimensions_info: current_organization.attached_uploader(:favicon).dimensions_info,
+                extension_allowlist: current_organization.attached_uploader(:favicon).extension_allowlist,
+                help_i18n_scope: "decidim.forms.file_help.icon",
+                button_class: "button button__sm button__transparent-secondary"
+              ) %>
+        </div>
 
-      <div class="preview">
-        <%= form.upload(
-              :official_img_header,
-              dimensions_info: current_organization.attached_uploader(:official_img_header).dimensions_info,
-              extension_allowlist: current_organization.attached_uploader(:official_img_header).extension_allowlist
-            ) %>
-      </div>
+        <div class="preview">
+          <%= form.upload(
+                :logo,
+                dimensions_info: current_organization.attached_uploader(:logo).dimensions_info,
+                extension_allowlist: current_organization.attached_uploader(:logo).extension_allowlist,
+                button_class: "button button__sm button__transparent-secondary"
+              ) %>
+        </div>
 
-      <div class="preview">
-        <%= form.upload(
-              :official_img_footer,
-              dimensions_info: current_organization.attached_uploader(:official_img_footer).dimensions_info,
-              extension_allowlist: current_organization.attached_uploader(:official_img_footer).extension_allowlist
-            ) %>
+        <div class="preview">
+          <%= form.upload(
+                :official_img_footer,
+                dimensions_info: current_organization.attached_uploader(:official_img_footer).dimensions_info,
+                extension_allowlist: current_organization.attached_uploader(:official_img_footer).extension_allowlist,
+                button_class: "button button__sm button__transparent-secondary"
+              ) %>
+        </div>
       </div>
     </div>
-  </div>
-
-  <div class="card-section">
-    <div class="row" style="display: grid; grid-template-columns: 1fr 1fr;">
+    <div class="row column">
       <div class="preview-official_url">
         <%= form.text_field :official_url %>
       </div>

data/app/views/decidim/admin/organization_appearance/form/_minimap.html.erb

@@ -1,33 +1,24 @@
 <% size_factor = 0.2 %>
 <div id="minimap-wrapper">
-  <div id="minimap">
+  <div id="minimap" class="grid grid-cols-1 md:grid-cols-2">
     <div class="minimap-tab">
       <% if current_organization.favicon.attached? %>
         <%= image_tag current_organization.attached_uploader(:favicon).path, class: "minimap-favicon" %>
       <% else %>
-        <%= content_tag :div, nil, { class: "minimap-favicon placeholder", style: "width: #{image_width(current_organization, :favicon) * size_factor }px; height: #{image_height(current_organization, :favicon) * size_factor }px;" } do %>
+        <%= content_tag :div, nil, { class: "minimap-favicon placeholder", style: "width: #{image_width(current_organization, :favicon) * size_factor}px; height: #{image_height(current_organization, :favicon) * size_factor}px;" } do %>
+          <span><%= t("favicon", scope: "activemodel.attributes.organization") %></span>
         <% end %>
       <% end %>
-
-      <span> &lt; <%= t("favicon", scope: "activemodel.attributes.organization") %></span>
     </div>
 
     <div class="minimap-header">
       <% if current_organization.logo.present? %>
         <%= image_tag current_organization.attached_uploader(:logo).path, class: "minimap-logo" %>
       <% else %>
-        <%= content_tag :div, nil, { class: "minimap-logo placeholder", style: "width: #{image_width(current_organization, :logo) * size_factor }px; height: #{image_height(current_organization, :logo) * size_factor }px;" } do %>
+        <%= content_tag :div, nil, { class: "minimap-logo placeholder", style: "width: #{image_width(current_organization, :logo) * size_factor}px; height: #{image_height(current_organization, :logo) * size_factor}px;" } do %>
           <span><%= t("logo", scope: "activemodel.attributes.organization") %></span>
         <% end %>
       <% end %>
-
-      <% if current_organization.official_img_header.attached? %>
-        <%= image_tag current_organization.attached_uploader(:official_img_header).path, class: "minimap-official_img_header" %>
-      <% else %>
-        <span class="float-right"><%= t("official_img_header", scope: "activemodel.attributes.organization") %> &gt; </span>
-        <%= content_tag :div, nil, { class: "minimap-official_img_header placeholder float-right", style: "width: #{image_width(current_organization, :official_img_header) * size_factor }px; height: #{image_height(current_organization, :official_img_header) * size_factor }px;" } %>
-      <% end %>
-
     </div>
 
     <div class="minimap-navbar"></div>
@@ -37,7 +28,7 @@
       <% if current_organization.official_img_footer.attached? %>
         <%= image_tag current_organization.attached_uploader(:official_img_footer).path, class: "minimap-official_img_footer" %>
       <% else %>
-        <%= content_tag :div, nil, { class: "minimap-official_img_footer placeholder", style: "width: #{image_width(current_organization, :official_img_footer) * size_factor }px; height: #{image_height(current_organization, :official_img_footer) * size_factor }px;" } do %>
+        <%= content_tag :div, nil, { class: "minimap-official_img_footer placeholder", style: "width: #{image_width(current_organization, :official_img_footer) * size_factor}px; height: #{image_height(current_organization, :official_img_footer) * size_factor}px;" } do %>
         <span><%= t("official_img_footer", scope: "activemodel.attributes.organization") %></span>
         <% end %>
       <% end %>

data/app/views/decidim/admin/organization_external_domain_whitelist/_external_domain.html.erb

@@ -1,27 +1,32 @@
-<div class="card external-domain" id="<%= id %>-field">
+<div class="card external-domain mb-4" id="<%= id %>-field">
   <div class="card-divider external-domain-divider">
-    <h2 class="card-title">
-      <span><%== icon("move") %></span>
+    <h2 class="card-title flex items-center">
+      <span class="flex items-center gap-x-2"><%== icon("drag-move-2-fill") %></span>
       <span><%= t(".external_domain") %></span>
 
-      <button class="button small alert hollow move-up-question button--title">
-        <%== "#{icon("arrow-top")} #{t(".up")}" %>
-      </button>
+      <div class="flex items-center ml-auto gap-x-4">
+        <button class="button button__sm button__transparent-secondary small alert hollow move-up-question button--title">
+          <%== "#{icon("arrow-up-line")} #{t(".up")}" %>
+        </button>
 
-      <button class="button small alert hollow move-down-question button--title">
-        <%== "#{icon("arrow-bottom")} #{t(".down")}" %>
-      </button>
+        <button class="button button__sm button__transparent-secondary small alert hollow move-down-question button--title">
+          <%== "#{icon("arrow-down-line")} #{t(".down")}" %>
+        </button>
 
-      <button class="button small alert hollow remove-external-domain button--title">
-        <%= t(".remove") %>
-      </button>
+        <button class="button button__sm button__transparent-secondary small alert hollow remove-external-domain button--title">
+          <%= icon("delete-bin-line") %>
+          <%= t(".remove") %>
+        </button>
+      </div>
     </h2>
   </div>
 
   <div class="card-section">
     <div class="grid-x">
       <div class="cell auto">
-        <%= form.text_field :value %>
+        <div class="row column">
+          <%= form.text_field :value %>
+        </div>
       </div>
     </div>
     <%= form.hidden_field :id %>

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

@@ -1,7 +1,4 @@
-<div class="card">
-  <div class="card-divider">
-    <h2 class="card-title"><%= t(".title") %></h2>
-  </div>
+<div class="form__wrapper">
   <div class="card">
     <div class="card-section">
       <% if form.send(:error?, :external_domains) %>
@@ -15,8 +12,8 @@
         <%= fields_for "external_domains[#{blank_external_domain.to_param}]", blank_external_domain do |external_domain_form| %>
           <script type="text/template" class="decidim-template">
             <%= render "external_domain",
-            form: external_domain_form,
-            id: blank_external_domain.to_param %>
+                       form: external_domain_form,
+                       id: blank_external_domain.to_param %>
           </script>
         <% end %>
 
@@ -24,13 +21,14 @@
           <% @form.external_domains.each do |external_domain| %>
             <%= fields_for "external_domains[]", external_domain do |external_domain_form| %>
               <%= render "external_domain",
-              form: external_domain_form,
-              id: external_domain.to_param %>
+                         form: external_domain_form,
+                         id: external_domain.to_param %>
             <% end %>
           <% end %>
         </div>
-
-        <button class="button small hollow add-external-domain"><%= t(".add") %></button>
+        <div class="row column">
+          <button class="button button__sm button__secondary small hollow add-external-domain"><%= t(".add") %></button>
+        </div>
       </div>
     </div>
   </div>

data/app/views/decidim/admin/organization_external_domain_whitelist/edit.html.erb

@@ -1,7 +1,18 @@
 <% add_decidim_page_title(t("edit_external_domains", scope: "decidim.admin.titles")) %>
-<%= decidim_form_for(@form, html: { class: "form edit_organization_external_domain_whitelist" }, url: organization_external_domain_whitelist_path, method: :patch) do |f| %>
-  <%= render partial: "form", object: f %>
-  <div class="button--double form-general-submit">
-    <%= f.submit t(".update") %>
-  </div>
-<% end %>
+
+<div class="item_show__header">
+  <h2 class="item_show__header-title">
+    <%= t("title", scope: "decidim.admin.organization_external_domain_whitelist.form") %>
+  </h2>
+</div>
+
+<div class="item__edit-form">
+  <%= decidim_form_for(@form, html: { class: "form-defaults form edit_organization_external_domain_whitelist" }, url: organization_external_domain_whitelist_path, method: :patch) do |f| %>
+    <%= render partial: "form", object: f %>
+    <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>

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

@@ -1,17 +1,13 @@
-<div class="card">
-  <div class="card-divider">
-    <h2 class="card-title">
-      <%= title %>
-    </h2>
-  </div>
-
-  <div class="card-section">
-    <div class="row">
-      <div class="columns xlarge-4">
-        <%= form.text_field :name, readonly: @form.persisted? %>
-      </div>
-      <div class="columns xlarge-4">
-        <%= form.email_field :email, readonly: @form.persisted? %>
+<div class="form__wrapper">
+  <div class="card pt-4">
+    <div id="panel-title" class="card-section">
+      <div class="row">
+        <div class="columns">
+          <%= form.text_field :name, readonly: @form.persisted? %>
+        </div>
+        <div class="columns">
+          <%= form.email_field :email, readonly: @form.persisted? %>
+        </div>
       </div>
     </div>
   </div>