decidim-initiatives 0.27.4 → 0.28.0.rc5

data/app/views/decidim/initiatives/create_initiative/select_initiative_type.html.erb

@@ -1,53 +1,39 @@
+<% add_decidim_page_title(t("new", scope: "decidim.initiatives.create_initiative.select_initiative_type")) %>
 <% default_type = available_initiative_types.first %>
-<% content_for :back_link do %>
-  <%= link_to initiatives_path do %>
-    <%= icon "chevron-left", class: "icon--small", role: "img", "aria-hidden": true %>
-    <%= t(".back") %>
-  <% end %>
+<% announcement_body = capture do %>
+  <%= t("select_initiative_type_help", scope: "decidim.initiatives.create_initiative.select_initiative_type") %>
+  <%= link_to t("more_information", scope: "decidim.initiatives.create_initiative.select_initiative_type"), decidim.page_path("initiatives"), target: "_blank", class: "button button__sm button__text-secondary block text-left" %>
 <% end %>
 
-<div class="row column">
-  <div class="callout secondary">
-    <%= t ".select_initiative_type_help" %>
-    <%= link_to t(".more_information"), decidim.page_path("initiatives"), target: "_blank" %>.
-  </div>
-</div>
-<br>
-<div class="row column">
-  <div class="main-container">
-    <div class="row collapse main-container--side-panel">
-      <div class="columns medium-4 large-3">
-        <div class="side-panel">
-          <ul class="tabs vertical side-panel__tabs" id="initiatives-tabs" data-tabs>
-            <% initiative_types_each do |type| %>
-              <li class="tabs-title <%= "is-active" if type == default_type %>">
-                <%= link_to "#initiativeType#{type.id}" do %>
-                  <%= t(".choose_html", title: translated_attribute(type.title)) %>
-                <% end %>
-              </li>
-            <% end %>
-          </ul>
-        </div>
-      </div>
-      <div class="columns medium-8 large-9">
-        <div class="main-container__content">
-          <div class="tabs-content vertical" data-tabs-content="initiatives-tabs">
-            <% initiative_types_each do |type| %>
-              <div class="tabs-panel <%= "is-active" if type == default_type %>" id="<%= "initiativeType#{type.id}" %>">
-                <h2 class="section-heading"><%= translated_attribute(type.title) %></h2>
-                <div>
-                  <%= raw translated_attribute type.description %>
-                </div>
-                <br>
-                <%= decidim_form_for(@form, url: next_wizard_path, method: :put, html: { id: "new_initiative_#{type.id}", class: "form select-initiative_type-form" }) do |f| %>
-                  <%= f.hidden_field :type_id, value: type.id, id: "initiative_type_id_#{ type.id }" %>
-                  <%= f.submit t(".select"), class: "button" %>
-                <% end %>
-              </div>
-            <% end %>
+<%= cell("decidim/announcement", { body: announcement_body }, callout_class: "secondary") %>
+
+<div class="initiatives__selection">
+  <% initiative_types_each do |type| %>
+    <% if allowed_to?(:create, :initiative, { initiative_type: type }) %>
+      <%= decidim_form_for(@form, url: select_initiative_type_create_initiative_index_path, method: :put, html: { id: "new_initiative_#{type.id}", class: "form-defaults " }) do |f| %>
+        <%= f.hidden_field :type_id, value: type.id, id: "initiative_type_id_#{type.id}" %>
+        <button class="card__highlight w-full">
+          <%= icon "lightbulb-flash-line", class: "verification__icon " %>
+          <div class="initiatives__selection__text">
+            <h2 class="h5 text-secondary"><%= translated_attribute(type.title) %></h2>
+            <span><%= raw translated_attribute type.description %></span>
           </div>
+          <%= icon "arrow-right-s-line", class: "fill-secondary initiatives__selection__icon" %>
+        </button>
+      <% end %>
+    <% else %>
+      <div class="card__highlight card__highlight-authorized">
+        <%= icon "lightbulb-flash-line", class: "verification__icon " %>
+        <div class="initiatives__selection__text">
+          <h2 class="h5 text-secondary"><%= translated_attribute(type.title) %></h2>
+          <span><%= raw translated_attribute type.description %></span>
+          <%= authorized_create_modal_button(type, remote: true, class: "button button__sm button__secondary") do %>
+            <%= t("verification_required", scope: "decidim.initiatives.create_initiative.select_initiative_type") %>
+          <% end %>
         </div>
       </div>
-    </div>
-  </div>
+    <% end %>
+  <% end %>
 </div>
+
+<%= render partial: "decidim/initiatives/modal" %>

data/app/views/decidim/initiatives/initiative_signatures/_wizard_steps.html.erb

@@ -1,19 +1,15 @@
-<div class="hide-for-large m-bottom">
-  <span class="text-small">
-    <%= t("step", scope: "layouts.decidim.initiative_signature_creation_header", current: (wizard_steps.index(step) + 1), total: wizard_steps.length) %>
-    (<a data-toggle="steps"><%= t("see_steps", scope: "layouts.decidim.initiative_signature_creation_header") %></a>)
-  </span>
-  <ol id="steps" class="wizard__steps steps-toggle is-hidden" data-toggler=".is-hidden">
-    <% wizard_steps.each do |wizard_step| %>
-      <% if step == wizard_step %>
-        <li class="step--active">
-          <%= t(wizard_step, scope: "layouts.decidim.initiative_signature_creation_header") %>
-        </li>
-      <% else %>
-        <li>
-          <%= t(wizard_step, scope: "layouts.decidim.initiative_signature_creation_header") %>
-        </li>
-      <% end %>
-    <% end %>
-  </ol>
-</div>
+<% scope = "layouts.decidim.initiative_signature_creation_header" %>
+<ol id="wizard-steps" class="wizard-steps">
+  <% options = { data: { active: false }, aria: { current: "step" } } %>
+
+  <% if fill_personal_data_step? %>
+    <%= content_tag :li, t("fill_personal_data", scope: ),
+                    %w(fill_personal_data update_fill_personal_data).include?(action_name) ? options : {} %>
+  <% end %>
+  <% if sms_step? %>
+    <%= content_tag :li, t("sms_phone_number", scope: ),
+                    %w(sms_phone_number update_sms_phone_number).include?(action_name) ? options : {} %>
+    <%= content_tag :li, t("sms_code", scope: ), %w(sms_code update_sms_code).include?(action_name) ? options : {} %>
+  <% end %>
+  <%= content_tag :li, t("finish", scope: ), action_name == "finish" ? options : {} %>
+</ol>

data/app/views/decidim/initiatives/initiative_signatures/fill_personal_data.html.erb

@@ -1,43 +1,32 @@
-<div class="callout secondary mb-sm">
-  <p>
-<%= t ".help" %>
-  </p>
-</div>
-<h2 class="section-heading"><%= t(step, scope: "layouts.decidim.initiative_signature_creation_header") %></h2>
+<%= cell("decidim/announcement", t("decidim.initiatives.initiative_signatures.fill_personal_data.help"), callout_class: "secondary") %>
 
-<%= render partial: "wizard_steps" %>
+<%= decidim_form_for(@form, url: fill_personal_data_initiative_signatures_path, method: :put) do |f| %>
+  <%= form_required_explanation %>
+  <div>
+    <div class="form__wrapper">
+      <%= f.text_field :name_and_surname, autofocus: true, required: true %>
+    </div>
 
-<div class="card">
-  <div class="card__content">
-    <%= decidim_form_for(@form, url: next_wizard_path, method: :put, html: { class: "form user_personal_data_signature_form" }) do |f| %>
-      <%= form_required_explanation %>
-      <div>
-        <div class="field">
-          <%= f.text_field :name_and_surname, autofocus: true, required: true %>
-        </div>
+    <div class="form__wrapper">
+      <%= f.text_field :document_number, required: true %>
+    </div>
 
-        <div class="field">
-          <%= f.text_field :document_number, required: true %>
-        </div>
+    <div class="form__wrapper">
+      <%= f.date_field :date_of_birth, min: 120.years.ago.to_date, max: 16.years.ago.to_date, value: 35.years.ago.to_date %>
+    </div>
 
-        <div class="field date">
-          <%= f.date_select :date_of_birth, start_year: 1900, end_year: 16.years.ago.year, default: 35.years.ago, prompt: { day: t(".date_select.day"), month: t(".date_select.month"), year: t(".date_select.year") } %>
-        </div>
+    <div class="form__wrapper">
+      <%= f.text_field :postal_code, required: true %>
+    </div>
 
-        <div class="field">
-          <%= f.text_field :postal_code, required: true %>
-        </div>
-
-        <div class="pb-s">
-          <small class="text-small">
-          <%= strip_tags(translated_attribute(extra_data_legal_information)) %>
-          </small>
-        </div>
-      </div>
+    <div class="pb-s">
+      <small>
+        <%= strip_tags(translated_attribute(extra_data_legal_information)) %>
+      </small>
+    </div>
+  </div>
 
-      <div class="actions">
-        <%= f.submit t(".continue"), class: "button expanded" %>
-      </div>
-    <% end %>
+  <div class="form__wrapper-block">
+    <%= f.submit t(".continue"), class: "button button__sm md:button__lg button__secondary" %>
   </div>
-</div>
+<% end %>

data/app/views/decidim/initiatives/initiative_signatures/finish.html.erb

@@ -1,17 +1,6 @@
-<div class="callout secondary mb-sm">
-  <p>
-    <%= t("create.success_html",
-          scope: "decidim.initiatives.initiative_votes",
-          title: translated_attribute(current_initiative.title)) %>
-  </p>
-</div>
-<h2 class="section-heading"><%= t("finished", scope: "layouts.decidim.initiative_signature_creation_header") %></h2>
+<%= cell("decidim/announcement", t("decidim.initiatives.initiative_votes.create.success_html", title: translated_attribute(current_initiative.title)), callout_class: "secondary") %>
 
-<%= render partial: "wizard_steps" %>
-
-<div class="card">
-  <br>
-  <div class="column actions">
-    <%= link_to t(".back_to_initiative"), initiative_path(current_initiative), class: "button white-button expanded" %>
-  </div>
-</div>
+<%= link_to initiative_path(current_initiative), class: "button button__sm md:button__lg button__text-secondary" do %>
+  <%= icon "arrow-left-line" %>
+  <%= t(".back_to_initiative") %>
+<% end %>

data/app/views/decidim/initiatives/initiative_signatures/sms_code.html.erb

@@ -1,22 +1,11 @@
-<div class="callout secondary mb-sm">
-  <p>
-    <%= t ".help" %>
-  </p>
-</div>
-<h2 class="section-heading"><%= t(step, scope: "layouts.decidim.initiative_signature_creation_header") %></h2>
+<%= cell("decidim/announcement", t("decidim.initiatives.initiative_signatures.sms_code.help"), callout_class: "secondary") %>
 
-<%= render partial: "wizard_steps" %>
-
-<div class="card">
-  <div class="card__content">
-    <%= decidim_form_for(@form, url: next_wizard_path, method: :put, html: { class: "form sms_code" }) do |f| %>
-      <div class="field">
-        <%= f.text_field :verification_code %>
-      </div>
+<%= decidim_form_for(@form, url: sms_code_initiative_signatures_path, method: :put) do |f| %>
+  <div class="form__wrapper">
+    <%= f.text_field :verification_code %>
+  </div>
 
-      <div class="actions">
-        <%= f.submit t(".continue"), class: "button expanded" %>
-       </div>
-    <% end %>
+  <div class="form__wrapper-block">
+    <%= f.submit t(".continue"), class: "button button__sm md:button__lg button__secondary" %>
   </div>
-</div>
+<% end %>

data/app/views/decidim/initiatives/initiative_signatures/sms_phone_number.html.erb

@@ -1,22 +1,10 @@
-<div class="callout secondary mb-sm">
-  <p>
-    <%= t ".help" %>
-  </p>
-</div>
-<h2 class="section-heading"><%= t(step, scope: "layouts.decidim.initiative_signature_creation_header") %></h2>
-
-<%= render partial: "wizard_steps" %>
-
-<div class="card">
-  <div class="card__content">
-    <%= decidim_form_for(@form, url: next_wizard_path, method: :put, html: { class: "form mobile_phone_number" }) do |f| %>
-      <div class="field">
-        <%= f.text_field :mobile_phone_number %>
-      </div>
+<%= cell("decidim/announcement", t("decidim.initiatives.initiative_signatures.sms_phone_number.help"), callout_class: "secondary") %>
+<%= decidim_form_for(@form, url: sms_phone_number_initiative_signatures_path, method: :put) do |f| %>
+  <div class="form__wrapper">
+    <%= f.text_field :mobile_phone_number %>
+  </div>
 
-      <div class="actions">
-        <%= f.submit t(".continue"), class: "button expanded" %>
-       </div>
-    <% end %>
+  <div class="form__wrapper-block">
+    <%= f.submit t(".continue"), class: "button button__sm md:button__lg button__secondary" %>
   </div>
-</div>
+<% end %>

data/app/views/decidim/initiatives/initiatives/_committee_members.html.erb

@@ -1,73 +1,55 @@
-<fieldset>
-  <legend><%= t ".title" %></legend>
+<div class="block">
+  <span class="font-semibold text-xl"><%= t ".link" %></span>
+  <span class="help-text mb-2">
+    <%= t ".invite_to_committee_help" %>
+  </span>
 
-  <div class="card-section">
-    <div class="row column">
-      <%= t ".invite_to_committee_help" %>
-    </div>
-
-    <div class="row column">
-      <div class="card card--list">
-        <div class="card--list__item">
-          <div class="card--list__text">
-            <div>
-              <h6 class="card--list__heading heading6 lowercase" id="committee_link">
-                <%= decidim_initiatives.new_initiative_committee_request_url(current_initiative) %>
-              </h6>
-            </div>
-          </div>
-          <div class="card--list__data">
-            <%= icon_link_to "clipboard", "#", t(".invite_to_committee_help"), class: "card--list__data__icon invite-users-link" %>
-          </div>
-        </div>
-      </div>
+  <div class="initiative__form__committee">
+    <span>
+      <%= decidim_initiatives.new_initiative_committee_request_url(current_initiative) %>
+    </span>
+    <div class="ml-auto fill-secondary inline-block">
+      <button type="button" class="button button__sm button__text-secondary" data-clipboard-copy="#urlShareLink-committee">
+        <%= render_committee_tooltip %>
+        <span class="sr-only"><%= t("decidim.shared.share_modal.copy_share_link") %></span>
+      </button>
+      <input id="urlShareLink-committee" type="text" class="!hidden" value="<%= decidim_initiatives.new_initiative_committee_request_url(current_initiative) %>" readonly>
     </div>
   </div>
-  <div class="card-section">
-    <div class="table-scroll">
-      <table class="table-list">
-        <thead>
-        <tr>
-          <th><%= t ".title" %></th>
-          <th></th>
-        </tr>
-        </thead>
-        <tbody>
-          <% if current_initiative.committee_members.empty? %>
-          <tr>
-            <td><%= t ".no_members_yet" %></td>
-            <td></td>
-          </tr>
-          <% end %>
-
-          <% current_initiative.committee_members.each do |request| %>
-            <tr data-id="<%= request.id %>">
-              <td>
-                <%= link_to request.user.name, "mailto:#{request.user.email}" %>
-              </td>
-              <td class="table-list__actions">
-                <% if allowed_to? :approve, :initiative_committee_member, initiative: current_initiative, request: request %>
-                  <%= icon_link_to "check",
-                                  approve_initiative_committee_request_path(current_initiative, request),
-                                  t(".approve"),
-                                  class: "action-icon--check" %>
+</div>
+<div class="block">
+  <span class="font-semibold text-xl mb-4 block"><%= t ".title" %></span>
+  <% if current_initiative.committee_members.empty? %>
+    <%= t ".no_members_yet" %>
+  <% end %>
+  <% current_initiative.committee_members.each do |request| %>
+    <div class="author mb-6" data-id="<%= request.id %>">
+      <div class="profile__group__list">
+        <%= card_for request.user %>
+        <% if allowed_to? :approve, :initiative_committee_member, initiative: current_initiative, request: request %>
+          <%= link_to(
+                  approve_initiative_committee_request_path(current_initiative, request),
+                  data: { confirm: t(".confirm_approve") },
+                  class: "button button__sm button__transparent-secondary"
+                ) do %>
+                  <span><%= t(".approve") %></span>
+                  <%= icon "check-line" %>
                 <% end %>
-
-                <% if allowed_to? :revoke, :initiative_committee_member, initiative: current_initiative, request: request %>
-                  <%= icon_link_to "circle-x",
-                                  revoke_initiative_committee_request_path(current_initiative, request),
-                                  t(".revoke"),
-                                  class: "action-icon--remove",
-                                  method: :delete,
-                                  data: { confirm: t(".confirm_revoke") } %>
+        <% end %>
+        <% if allowed_to? :revoke, :initiative_committee_member, initiative: current_initiative, request: request %>
+          <%= link_to(
+                  revoke_initiative_committee_request_path(current_initiative, request),
+                  method: :delete,
+                  data: { confirm: t(".confirm_revoke") },
+                  class: "button button__sm button__transparent-secondary"
+                ) do %>
+                  <span><%= t(".revoke") %></span>
+                  <%= icon "forbid-line" %>
                 <% end %>
-              </td>
-            </tr>
-          <% end %>
-        </tbody>
-      </table>
+        <% end %>
+      </div>
     </div>
-  </div>
-</fieldset>
+  <% end %>
+</div>
 
-<%= javascript_pack_tag "decidim_initiatives_admin" %>
+<%= append_javascript_pack_tag "decidim_initiatives_admin" %>

data/app/views/decidim/initiatives/initiatives/_form.html.erb

@@ -1,120 +1,74 @@
 <%= form_required_explanation %>
 
 <% unless single_initiative_type? %>
-  <div class="field">
-    <%= form.select :type_id,
-                    initiative_type_options,
-                    {},
-                    {
-                      disabled: !@form.signature_type_updatable?,
-                      "data-scope-selector": "initiative_decidim_scope_id",
-                      "data-scope-id": form.object.scope_id.to_s,
-                      "data-scope-search-url": decidim_initiatives.initiative_type_scopes_search_url,
-                      "data-signature-types-selector": "initiative_signature_type",
-                      "data-signature-type": current_initiative.signature_type,
-                      "data-signature-types-search-url": decidim_initiatives.initiative_type_signature_types_search_url
-                    } %>
-  </div>
+  <%= form.select :type_id,
+                  initiative_type_options,
+                  {},
+                  {
+                    disabled: !@form.signature_type_updatable?,
+                    "data-scope-selector": "initiative_decidim_scope_id",
+                    "data-scope-id": form.object.scope_id.to_s,
+                    "data-scope-search-url": decidim_initiatives.initiative_type_scopes_search_url,
+                    "data-signature-types-selector": "initiative_signature_type",
+                    "data-signature-type": current_initiative.signature_type,
+                    "data-signature-types-search-url": decidim_initiatives.initiative_type_signature_types_search_url
+                  } %>
 <% end %>
 
-<div class="field">
-  <%= form.text_field :title, autofocus: true, disabled: !allowed_to?(:update, :initiative, initiative: current_initiative), value: translated_attribute(@form.title) %>
-</div>
+<%= form.text_field :title, autofocus: true, disabled: !allowed_to?(:update, :initiative, initiative: current_initiative), value: translated_attribute(@form.title) %>
 
-<div class="field">
-  <%= text_editor_for(form, :description, toolbar: :content, lines: 8, disabled: !allowed_to?(:update, :initiative, initiative: current_initiative), value: translated_attribute(@form.description)) %>
-</div>
+<%= text_editor_for(form, :description, toolbar: :content, lines: 8, disabled: !allowed_to?(:update, :initiative, initiative: current_initiative), value: translated_attribute(@form.description)) %>
 
-<div class="field">
-  <%= form.text_field :hashtag, disabled: !allowed_to?(:update, :initiative, initiative: current_initiative) %>
-</div>
+<%= form.text_field :hashtag, disabled: !allowed_to?(:update, :initiative, initiative: current_initiative) %>
 
-<% signature_type_options = signature_type_options(form.object) %>
-<% if signature_type_options.length == 1 %>
-  <%= form.hidden_field :signature_type %>
-<% else %>
-  <div class="field">
-    <%= form.select :signature_type, signature_type_options, {}, { disabled: !@form.signature_type_updatable? } %>
-  </div>
+<% if @form.state_updatable? %>
+  <%= form.select :state, Decidim::Initiative.states.keys.map { |state| [I18n.t(state, scope: "decidim.initiatives.admin_states"), state] }, {} %>
 <% end %>
 
+<%= form.select :scope_id, @form.available_scopes.map { |scope| [translated_attribute(scope.scope_name), scope.scope&.id] }, {}, { disabled: !@form.state_updatable? } %>
+
 <% if can_edit_custom_signature_end_date?(current_initiative) %>
-  <div class="row column">
-    <%= form.date_field :signature_end_date, disabled: !allowed_to?(:update, :initiative, initiative: current_initiative) %>
-  </div>
+  <%= form.date_field :signature_end_date, disabled: !allowed_to?(:update, :initiative, initiative: current_initiative) %>
 <% end %>
 
-<div class="field">
-  <%= form.select :scope_id,
-                @form.available_scopes.map { |scope| [translated_attribute(scope.scope_name), scope&.scope&.id] },
-                { disabled: !@form.state_updatable? } %>
-</div>
-
 <% if current_initiative.area_enabled? %>
-  <div class="field">
-    <%= form.areas_select :area_id,
-                          areas_for_select(current_organization),
-                          {
-                            selected: current_initiative.decidim_area_id,
-                            include_blank: current_initiative.decidim_area_id.blank? || current_initiative.created?
-                          },
-                          disabled: !@form.area_updatable? %>
-  </div>
+  <%= form.areas_select :area_id,
+                        areas_for_select(current_organization),
+                        {
+                          selected: current_initiative.decidim_area_id,
+                          include_blank: current_initiative.decidim_area_id.blank? || current_initiative.created?
+                        },
+                        disabled: !@form.area_updatable? %>
 <% end %>
 
-<div class="field">
-  <%= form.select :state,
-                  Decidim::Initiative.states.keys.map { |state| [I18n.t(state, scope: "decidim.initiatives.admin_states"), state] },
-                  {},
-                  { disabled: !@form.state_updatable? } %>
-</div>
+<% signature_type_options = signature_type_options(form.object) %>
+<% if signature_type_options.length == 1 %>
+  <%= form.hidden_field :signature_type %>
+<% else %>
+  <%= form.select :signature_type, [], {}, { disabled: !@form.signature_type_updatable? } %>
+<% end %>
 
 <% if current_initiative.type.attachments_enabled? %>
-  <fieldset class="attachments_container">
-    <legend><%= t("attachment_legend", scope: "decidim.initiatives.form") %></legend>
-
-    <% if @form.photos.any? %>
-      <% @form.photos.each do |photo| %>
-        <div class="callout gallery__item" data-closable>
-          <%= image_tag photo.thumbnail_url, class: "thumbnail", alt: photo.file.filename %>
-          <%= form.hidden_field :photos, multiple: true, value: photo.id, id: "photo-#{photo.id}" %>
-          <button class="close-button"
-                  aria-label="<%= t("delete_attachment", scope: "decidim.initiatives.form") %>"
-                  title="<%= t("delete_attachment", scope: "decidim.initiatives.form") %>"
-                  type="button"
-                  data-close>
-            <span aria-hidden="true">&times;</span>
-          </button>
-        </div>
-      <% end %>
-    <% end %>
+  <%= form.attachment :documents,
+                      multiple: true,
+                      label: t("decidim.initiatives.form.add_documents"),
+                      button_label: t("decidim.initiatives.form.add_documents"),
+                      button_class: "button button__lg button__transparent-secondary w-full",
+                      button_edit_label: t("decidim.initiatives.form.edit_documents"),
+                      help_text: t("decidim.initiatives.form.attachment_legend") %>
 
-    <% if @form.documents.any? %>
-      <% @form.documents.each do |document| %>
-        <div class="callout" data-closable>
-          <%= link_to translated_attribute(document.title), document.url %>
-          <small><%= document.file_type %> <%= number_to_human_size(document.file_size) %></small>
-          <%= form.hidden_field :documents, multiple: true, value: document.id, id: "document-#{document.id}" %>
-          <button class="close-button"
-                  aria-label="<%= t("delete_attachment", scope: "decidim.initiatives.form") %>"
-                  title="<%= t("delete_attachment", scope: "decidim.initiatives.form") %>"
-                  type="button" data-close>
-            <span aria-hidden="true">&times;</span>
-          </button>
-        </div>
-      <% end %>
-    <% end %>
-
-    <div class="row column">
-      <%= form.file_field :add_documents, multiple: true, label: t("add_attachments", scope: "decidim.initiatives.form") %>
-    </div>
-  </fieldset>
+  <%= form.attachment :photos,
+                      multiple: true,
+                      label: t("decidim.initiatives.form.add_image"),
+                      button_label: t("decidim.initiatives.form.add_image"),
+                      button_class: "button button__lg button__transparent-secondary w-full",
+                      button_edit_label: t("decidim.initiatives.form.edit_image"),
+                      help_text: t("decidim.initiatives.form.image_legend") %>
 <% end %>
 
 <% if current_initiative.type.promoting_committee_enabled? %>
   <%= render partial: "committee_members" %>
 <% end %>
 
-<% content_for :js_content do %>
-  <%= javascript_pack_tag "decidim_initiatives" %>
-<% end %>
+<%= append_javascript_pack_tag "decidim_initiatives" %>
+<%= append_stylesheet_pack_tag "decidim_initiatives", media: "all" %>

data/app/views/decidim/initiatives/initiatives/_initiative_badge.html.erb

@@ -1,5 +1,3 @@
-<% if initiative.rejected? || initiative.accepted? %>
-  <span class="<%= state_badge_css_class(initiative) %> label initiative-status">
-    <%= humanize_state initiative %>
-  </span>
-<% end %>
+<span class="<%= metadata_badge_css_class(initiative.state) %> label initiative-status rounded px-2">
+  <%= t(initiative.state, scope: "decidim.initiatives.show.badge_name") %>
+</span>

data/app/views/decidim/initiatives/initiatives/_initiative_hero.html.erb

@@ -0,0 +1,13 @@
+<section style="background-image:url('<%= hero_background_path(current_initiative) %>');">
+  <div class="initiative__hero">
+    <div class="initiative__hero-text">
+      <h1 class="h1 text-5xl">
+        <%= translated_attribute(current_participatory_space.title) %>
+      </h1>
+      <p class="initiative__hero-slogan">
+        <%= render partial: "tags_type", locals: { resource: current_initiative } %>
+      </p>
+      <%= render partial: "layouts/decidim/initiative_header_steps", locals: { initiative: current_participatory_space } %>
+    </div>
+  </div>
+</section>