decidim-comments 0.27.9 → 0.28.0.rc4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8dd222d4144af004bedfb38b8eccbe98d2aa9b1e87e259d13a5ced7d164352c3
-  data.tar.gz: b7acf8f15831553575c329e84bce80bbfd8a5eb04af120d06f050dedaa7d1a38
+  metadata.gz: 648725e9925c3a017d8ac0d70283138a25938f9c92018346bc0a54ab7ab0eb17
+  data.tar.gz: 0f091351a41b0fc39873fa75e8ebd7ec8b403285a6a516a835a634e0e9968b70
 SHA512:
-  metadata.gz: 0d7e3784fe38aa7ca370e5c164cb0954b325abbf3c30df6e1652c04dc48974c6e59eee12d88d779d478f2d5fbca3644e538322b356d5348a8ddd67a81eea2d32
-  data.tar.gz: 6e6960a2d9571e962db5969a3a2fa3cab71fd2915c1e8514d9354b33735d225ace8dbcf65c1702fe0cc463db0be53e9675ba04c94f598e40d31c52d1b68224f1
+  metadata.gz: 2588f2b4cb9af337b4871dfa5ecdecb922ef6f99bbfab9756b831476d01688e2ecd1f9ad4ba656b8960dbcebab505cfcb72f8d88a7cf17d722d20bedd37972d1
+  data.tar.gz: 8386f0e42ec38344cd27863eb949a53a73d7bbbdb61146b6caa86738c724260355a0c14280132b40b6de6d841dcec201715c0930d69370334581dab9221b2d66

data/app/cells/decidim/comments/comment/actions.erb

@@ -1,12 +1,18 @@
 <div class="comment__actions">
-  <button class="comment__hide muted-link <%= depth.zero? && has_replies_in_children? ? "" : "hide" %>" aria-controls="comment-<%= model.id %>-replies" data-toggle="comment_<%= model.id %>">
-    <%= icon "comment-square", class: "icon--small", role: "img", "aria-hidden": true %>&nbsp;
-    <span class="hide-comment-replies"><%= t("decidim.components.comment.hide_replies") %></span>
-    <span class="show-comment-replies"><%= t("decidim.components.comment.show_replies", count: replies.size, replies_count: replies.size ) %></span>
-  </button>
+  <% if depth.zero? && has_replies_in_children? %>
+    <button class="button button__sm button__text-secondary comment__hide" data-controls="comment-<%= model.id %>-replies">
+      <%= icon "arrow-up-s-line" %>
+      <span class="hide-comment-replies font-normal"><%= t("decidim.components.comment.hide_replies") %></span>
+      <%= icon "arrow-down-s-line" %>
+      <span class="show-comment-replies font-normal"><%= t("decidim.components.comment.show_replies", count: replies.size, replies_count: replies.size ) %></span>
+    </button>
+  <% end %>
   <% if can_reply? %>
-    <button class="comment__reply muted-link" aria-controls="<%= reply_id %>" data-toggle="<%= reply_id %>">
-      <%= icon "pencil", class: "icon--small", role: "img", "aria-hidden": true %>&nbsp;<%= t("decidim.components.comment.reply") %>
+    <button class="button button__sm button__text-secondary" data-controls="panel-<%= reply_id %>">
+      <%= icon "chat-1-line" %>
+      <span class="font-normal"><%= t("decidim.components.comment.reply") %></span>
+      <%= icon "close-circle-line" %>
+      <span class="font-normal"><%= t("decidim.components.comment.cancel_reply") %></span>
     </button>
   <% end %>
 </div>

data/app/cells/decidim/comments/comment/alignment_badge.erb

@@ -1,4 +1 @@
-<span>
-  <span class="<%= alignment_badge_classes %>"><%= alignment_badge_label %></span>
-  &nbsp;
-</span>
+<span class="<%= alignment_badge_classes %> comment__content--label"><%= alignment_badge_label %></span>

data/app/cells/decidim/comments/comment/deletion_data.erb

@@ -1 +1,9 @@
-<%= render partial: "decidim/comments/comments/delete.html", locals: { comment: model } %>
+<%= render partial: "decidim/comments/comments/delete", formats: [:html], locals: { comment: model } %>
+
+<div class="comment__footer" data-component="accordion" id="accordion-<%= model.id %>">
+  <div id="comment-<%= model.id %>-replies" class="<%= "comment-reply" if has_replies_in_children? %>">
+    <% if has_replies_in_children? %>
+      <%= render :replies %>
+    <% end %>
+  </div>
+</div>

data/app/cells/decidim/comments/comment/moderation_data.erb

@@ -1 +1 @@
-<%= render partial: "decidim/comments/comments/moderated.html", locals: { comment: model } %>
+<%= render partial: "decidim/comments/comments/moderated", formats: [:html], locals: { comment: model } %>

data/app/cells/decidim/comments/comment/replies.erb

@@ -0,0 +1,3 @@
+<% replies.each do |reply| %>
+  <%= cell("decidim/comments/comment", reply, root_depth: , order: , reloaded: reloaded?) %>
+<% end %>

data/app/cells/decidim/comments/comment/show.erb

@@ -1,51 +1,88 @@
-<%= content_tag :div, id: "comment_#{model.id}", class: comment_classes, data: { depth: model.depth, comment_id: model.id, toggler: ".no-comments" } do %>
+<%= content_tag :div, id: "comment_#{model.id}", class: "comment relative", data: { comment_id: model.id } do %>
   <% if model.hidden? %>
     <%= render :moderation_data %>
   <% elsif model.deleted? %>
     <%= render :deletion_data %>
   <% else %>
     <div class="comment__header">
-      <div class="author-data">
-        <div class="author-data__main">
-          <%= render :author %>
-          <span>
-            <%= time_tag created_at, l(created_at, format: :decidim_short) %>
-          </span>
-          <% if edited? %>
-            <div class="author-data__extra">
-              <span class="comment__edited">
-                <%= t("decidim.components.comment.edited") %>
-              </span>
-            </div>
-          <% end %>
+      <span class="font-bold">
+        <%== cell("decidim/author", author_presenter) %>
+      </span>
+      <span class="text-gray-2 text-sm">
+        <%= time_tag created_at, time_ago_in_words(created_at) %>
+      </span>
+      <% if edited? %>
+        <span class="label">
+          <%= t("decidim.components.comment.edited") %>
+        </span>
+      <% end %>
+
+      <div class="relative ml-auto">
+        <button id="dropdown-trigger-<%= context_menu_id %>" data-component="dropdown" data-target="dropdown-menu-<%= context_menu_id %>">
+          &#8230;
+        </button>
+
+        <div id="dropdown-menu-<%= context_menu_id %>" aria-hidden="true">
+          <ul class="dropdown dropdown__bottom divide-y divide-gray-3 px-4">
+            <% unless reloaded? %>
+              <li>
+                <%= cell("decidim/report_button", model, only_button: true, button_classes: "dropdown__item flex-row-reverse", modal_id: "flagModalComment#{model.id}") %>
+              </li>
+            <% end %>
+            <li>
+              <%= link_to "#{commentable_path("commentId" => model.id)}#comment_#{model.id}", target: "_blank", data: { "external-link": "false" }, class: "dropdown__item", title: t("decidim.components.comment.single_comment_link_title") do %>
+                <%= icon "share-line" %>
+                <span><%= t("decidim.components.comment.single_comment_link_title") %></span>
+              <% end %>
+            </li>
+            <% if model.authored_by?(current_user) %>
+              <li>
+                <button type="button" class="dropdown__item" data-dialog-open="<%= "editCommentModal#{model.id}" %>" title="<%= t("decidim.components.comment.edit") %>" aria-controls="<%= "editCommentModal#{model.id}" %>" aria-haspopup="dialog" tabindex="2">
+                  <%= icon "edit-line" %>
+                  <span><%= t("decidim.components.comment.edit") %></span>
+                </button>
+              </li>
+              <li>
+                <%= link_to comment_path, remote: true, method: :delete, class: "dropdown__item", data: { confirm: t("decidim.components.comment.confirm_destroy") }, tabindex: 3 do %>
+                  <%= icon "delete-bin-line" %>
+                  <span><%= t("decidim.components.comment.delete") %></span>
+                <% end %>
+              </li>
+            <% end %>
+          </ul>
         </div>
       </div>
-      <%= render :utilities %>
     </div>
+
     <div class="comment__content">
       <%= alignment_badge %>
-      <%= comment_body %>
-    </div>
-    <div class="comment__footer">
-      <%= render :actions %>
-      <%= votes %>
+      <div class="editor-content">
+        <%= comment_body %>
+      </div>
     </div>
-  <% end %>
-  <div id="comment-<%= model.id %>-replies" class="replies">
-    <% if has_replies_in_children? %>
-      <% replies.each do |reply| %>
-        <%= cell("decidim/comments/comment", reply, root_depth: root_depth, order: order, reloaded: reloaded?) %>
+
+    <div class="comment__footer" data-component="accordion" id="accordion-<%= model.id %>">
+      <div class="comment__footer-grid">
+        <%= render :actions %>
+        <%= votes %>
+      </div>
+      <% if can_reply? %>
+        <div id="panel-<%= reply_id %>" class="add-comment comment__additionalreply">
+          <%== cell("decidim/comments/comment_form", model, root_depth:, order:) %>
+        </div>
       <% end %>
-    <% end %>
-  </div>
-  <% if can_reply? %>
-    <div class="comment__additionalreply<%= " hide" unless commentable? %> replies">
-      <button class="comment__reply muted-link" aria-controls="<%= reply_id %>" data-toggle="<%= reply_id %>">
-        <%= icon "pencil", class: "icon--small", role: "img", "aria-hidden": true %>&nbsp;<%= t("decidim.components.comment.reply") %>
-      </button>
-    </div>
-    <div class="add-comment hide" id="<%= reply_id %>" data-toggler=".hide">
-      <%== cell("decidim/comments/comment_form", model, root_depth: root_depth, order: order) %>
+      <div id="comment-<%= model.id %>-replies" class="<%= "comment-reply" if has_replies_in_children? %>">
+        <% if has_replies_in_children? %>
+          <%= render :replies %>
+        <% end %>
+      </div>
     </div>
   <% end %>
+  <% if current_user.present? %>
+    <%= cell("decidim/report_button", model, modal_id: "flagModalComment#{model.id}").flag_modal %>
+  <% end %>
+
+  <% if model.authored_by?(current_user) %>
+    <%= cell("decidim/comments/edit_comment_modal_form", model) %>
+  <% end %>
 <% end %>

data/app/cells/decidim/comments/comment/votes.erb

@@ -1,25 +1,25 @@
 <div class="comment__votes">
   <% if user_signed_in? %>
     <%= vote_button_to decidim_comments.comment_votes_path(model, weight: 1), remote: true, disabled: voted_down?, class: votes_up_classes, title: t("decidim.components.up_vote_button.text") do %>
-      <span class="show-for-sr"><%= t("decidim.components.up_vote_button.text") %></span>
-      <%= icon "chevron-top", class: "icon--small", role: "img", "aria-hidden": true %>
-      <span class="comment__votes--count"><%= up_votes_count %></span>
+      <%= icon "thumb-up-line" %>
+      <%= icon "thumb-up-fill" %>
+      <span><%= up_votes_count %></span>
     <% end %>
     <%= vote_button_to decidim_comments.comment_votes_path(model, weight: -1), remote: true, disabled: voted_up?, class: votes_down_classes, title: t("decidim.components.down_vote_button.text") do %>
-      <span class="show-for-sr"><%= t("decidim.components.down_vote_button.text") %></span>
-      <%= icon "chevron-bottom", class: "icon--small", role: "img", "aria-hidden": true %>
-      <span class="comment__votes--count"><%= down_votes_count %></span>
+      <%= icon "thumb-down-line" %>
+      <%= icon "thumb-down-fill" %>
+      <span><%= down_votes_count %></span>
     <% end %>
   <% else %>
-    <button class="<%= votes_up_classes %> " title="<%= t("decidim.components.up_vote_button.text") %>" data-open="loginModal">
-      <span class="show-for-sr"><%= t("decidim.components.up_vote_button.text") %></span>
-      <%= icon "chevron-top", class: "icon--small", role: "img", "aria-hidden": true %>
-      <span class="comment__votes--count"><%= up_votes_count %></span>
+    <button class="<%= votes_up_classes %> " title="<%= t("decidim.components.up_vote_button.text") %>" data-dialog-open="loginModal">
+      <%= icon "thumb-up-line", class: "fill-secondary" %>
+      <%= icon "thumb-up-fill", class: "fill-secondary" %>
+      <span><%= up_votes_count %></span>
     </button>
-    <button class="<%= votes_down_classes %> " title="<%= t("decidim.components.down_vote_button.text") %>" data-open="loginModal">
-      <span class="show-for-sr"><%= t("decidim.components.down_vote_button.text") %></span>
-      <%= icon "chevron-bottom", class: "icon--small", role: "img", "aria-hidden": true %>
-      <span class="comment__votes--count"><%= down_votes_count %></span>
+    <button class="<%= votes_down_classes %> " title="<%= t("decidim.components.down_vote_button.text") %>" data-dialog-open="loginModal">
+      <%= icon "thumb-down-line", class: "fill-secondary" %>
+      <%= icon "thumb-down-fill", class: "fill-secondary" %>
+      <span><%= down_votes_count %></span>
     </button>
   <% end %>
 </div>

data/app/cells/decidim/comments/comment_activity_cell.rb

@@ -7,19 +7,23 @@ module Decidim
       include CommentCellsHelper
 
       def title
-        I18n.t(
-          "decidim.comments.last_activity.new_comment_at_html",
-          link: link_to(
-            root_commentable_title,
-            resource_link_path
-          )
-        )
+        I18n.t("decidim.comments.last_activity.new_comment")
       end
 
       def participatory_space
         model.participatory_space_lazy
       end
 
+      def participatory_space_link
+        link_to(root_commentable_title, resource_link_path)
+      end
+
+      def participatory_space_icon
+        resource_type_icon(root_commentable.class)
+      end
+
+      def hide_participatory_space? = false
+
       def comment
         model.resource_lazy
       end

data/app/cells/decidim/comments/comment_card_cell.rb

@@ -3,7 +3,7 @@
 module Decidim
   module Comments
     # This cell renders the comment card for an instance of a Comment
-    # the default size is the Medium Card (:m)
+    # the default size is the Search Card (:s)
     class CommentCardCell < Decidim::ViewModel
       include CommentCellsHelper
       include Cell::ViewModel::Partial
@@ -15,7 +15,7 @@ module Decidim
       private
 
       def card_size
-        "decidim/comments/comment_m"
+        "decidim/comments/comment_s"
       end
     end
   end

data/app/cells/decidim/comments/comment_cell.rb

@@ -47,8 +47,6 @@ module Decidim
         hash.push(model.must_render_translation?(current_organization) ? 1 : 0)
         hash.push(model.authored_by?(current_user) ? 1 : 0)
         hash.push(model.reported_by?(current_user) ? 1 : 0)
-        hash.push(model.up_votes_count)
-        hash.push(model.down_votes_count)
         hash.push(model.cache_key_with_version)
         hash.push(model.author.cache_key_with_version)
         @hash = hash.join(Decidim.cache_key_separator)
@@ -93,15 +91,6 @@ module Decidim
         end
       end
 
-      def comment_classes
-        classes = ["comment"]
-        if nested?
-          classes << "comment--nested"
-          classes << "comment--nested--alt" if nested_level_even?
-        end
-        classes.join(" ")
-      end
-
       def alignment_badge_classes
         classes = %w(label alignment)
         case alignment
@@ -122,14 +111,14 @@ module Decidim
       end
 
       def votes_up_classes
-        classes = ["comment__votes--up"]
+        classes = ["button button__sm button__text-secondary js-comment__votes--up"]
         classes << "is-vote-selected" if voted_up?
         classes << "is-vote-notselected" if voted_down?
         classes.join(" ")
       end
 
       def votes_down_classes
-        classes = ["comment__votes--down"]
+        classes = ["button button__sm button__text-secondary js-comment__votes--down"]
         classes << "is-vote-selected" if voted_down?
         classes << "is-vote-notselected" if voted_up?
         classes.join(" ")
@@ -148,11 +137,11 @@ module Decidim
       end
 
       def up_votes_count
-        model.up_votes_count
+        model.up_votes.count
       end
 
       def down_votes_count
-        model.down_votes_count
+        model.down_votes.count
       end
 
       def root_depth
@@ -168,11 +157,11 @@ module Decidim
       end
 
       def voted_up?
-        @up_voted ||= model.up_voted_by?(current_user)
+        model.up_voted_by?(current_user)
       end
 
       def voted_down?
-        @down_voted ||= model.down_voted_by?(current_user)
+        model.down_voted_by?(current_user)
       end
 
       def nested?
@@ -200,13 +189,12 @@ module Decidim
         root_commentable.try(:component)
       end
 
-      def vote_button_to(path, params, &block)
+      def vote_button_to(path, params, &)
         # actions are linked to objects belonging to a component
-        # In consultations, a question belong to a participatory_space but it has comments
         # To apply :comment permission, the modal authorizer should be refactored to allow participatory spaces-level comments
-        return button_to(path, params, &block) unless current_component
+        return button_to(path, params, &) unless current_component
 
-        action_authorized_button_to(:vote_comment, path, params.merge(resource: root_commentable), &block)
+        action_authorized_button_to(:vote_comment, path, params.merge(resource: root_commentable), &)
       end
     end
   end

data/app/cells/decidim/comments/comment_form/comment_as.erb

@@ -1,8 +1,8 @@
-<div class="field">
-  <label for="<%= comment_as_id %>">
+<div class="comment__as">
+  <label class="mr-2 inline-block" for="<%= comment_as_id %>">
     <%= t("decidim.components.add_comment_form.form.user_group_id.label") %>
   </label>
-  <select id="<%= comment_as_id %>" name="comment[user_group_id]">
+  <select class="p-2" id="<%= comment_as_id %>" name="comment[user_group_id]">
     <% comment_as_options.each do |option| %>
       <option value="<%= option[1] %>"><%= option[0] %></option>
     <% end %>

data/app/cells/decidim/comments/comment_form/opinion.erb

@@ -0,0 +1,18 @@
+<div>
+  <span class="comment__opinion-label"><%= t("decidim.components.add_comment_form.opinion.label") %></span>
+  <div class="opinion-toggle comment__opinion-container">
+    <button type="button" aria-pressed="false" class="opinion-toggle--ok" data-selected-label="<%= t("decidim.components.add_comment_form.opinion.positive_selected") %>">
+      <span><%= t("decidim.components.comment.alignment.in_favor") %></span>
+      <%= icon "thumb-up-line" %>
+    </button>
+    <button type="button" aria-pressed="true" class="opinion-toggle--meh is-active" data-selected-label="<%= t("decidim.components.add_comment_form.opinion.neutral_selected") %>">
+      <span><%= t("decidim.components.add_comment_form.opinion.neutral") %></span>
+      <%= icon "loader-3-line" %>
+    </button>
+    <button type="button" aria-pressed="false" class="opinion-toggle--ko" data-selected-label="<%= t("decidim.components.add_comment_form.opinion.negative_selected") %>">
+      <span><%= t("decidim.components.comment.alignment.against") %></span>
+      <%= icon "thumb-down-line" %>
+    </button>
+    <div role="alert" aria-live="assertive" aria-atomic="true" class="selected-state sr-only"></div>
+  </div>
+</div>

data/app/cells/decidim/comments/comment_form/show.erb

@@ -1,24 +1,41 @@
-<%= form_for(form_object, url: decidim_comments.comments_path(order: order), method: :post, remote: true, html: { id: form_id }) do |form| %>
+<%= form_for(form_object, url: decidim_comments.comments_path(order:), method: :post, remote: true, html: { id: form_id }) do |form| %>
   <%= form.hidden_field :commentable_gid, id: nil %>
   <%= form.hidden_field :alignment, id: nil, class: "alignment-input" %>
   <%= comment_as_for(form) %>
-  <div class="field">
-    <label class="show-for-sr" for="<%= add_comment_id %>">
+
+  <div class="flex justify-between items-end mb-4">
+    <label class="comment__form-label" for="<%= add_comment_id %>">
       <%= t("decidim.components.add_comment_form.form.body.label") %>
     </label>
-    <div class="hashtags__container">
-      <%= form.text_area(
-        :body,
-        id: add_comment_id,
-        rows: 4,
-        maxlength: comments_max_length,
-        required: true,
-        placeholder: t("decidim.components.add_comment_form.form.body.placeholder"),
-        label: false,
-        data: { remaining_characters: "##{add_comment_id}-remaining-characters", input_emoji: true }
-      ) %>
-    </div>
-    <button type="submit" class="button button--sc" disabled="disabled"><%= t("decidim.components.add_comment_form.form.submit") %></button>
+
     <span id="<%= add_comment_id %>-remaining-characters" class="remaining-character-count"></span>
   </div>
+
+  <%= form.text_area(
+    :body,
+    id: add_comment_id,
+    class: "w-full min-h-[160px]",
+    maxlength: comments_max_length,
+    required: true,
+    placeholder: t("decidim.components.add_comment_form.form.body.placeholder"),
+    label: false,
+    data: { remaining_characters: "##{add_comment_id}-remaining-characters", input_emoji: true }
+  ) %>
+
+  <div class="comment__form-submit">
+    <% if alignment_enabled? %>
+      <%= render :opinion %>
+    <% end %>
+
+    <button type="submit" class="button button__sm button__secondary" disabled="disabled">
+      <span>
+      <% if reply? %>
+        <%= t("decidim.components.add_comment_form.form.submit_reply") %>
+      <% else %>
+        <%= t("decidim.components.add_comment_form.form.submit_root_comment") %>
+      <% end %>
+      </span>
+      <%= icon "chat-1-line" %>
+    </button>
+  </div>
 <% end %>

data/app/cells/decidim/comments/comment_form_cell.rb

@@ -12,7 +12,7 @@ module Decidim
         # Note that the form.select does not seem to work correctly in the cell
         # context. The Rails form builder tries to call @template.select which
         # is not available for the cell objects.
-        render view: :comment_as, locals: { form: form }
+        render view: :comment_as, locals: { form: }
       end
 
       private
@@ -38,6 +38,14 @@ module Decidim
         model.commentable_type
       end
 
+      def reply?
+        model.is_a?(Decidim::Comments::Comment)
+      end
+
+      def alignment_enabled?
+        model.comments_have_alignment?
+      end
+
       def form_id
         "new_comment_for_#{commentable_type.demodulize}_#{model.id}"
       end

data/app/cells/decidim/comments/comment_metadata_cell.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module Decidim
+  module Comments
+    # This cell renders the comment metadata for a card
+    class CommentMetadataCell < Decidim::CardMetadataCell
+      delegate :root_commentable, to: :model
+
+      private
+
+      def items
+        [author_item, commentable_item, comments_count_item]
+      end
+
+      def commentable_item
+        {
+          text: decidim_html_escape(translated_attribute(root_commentable.title)),
+          icon: resource_type_icon_key(root_commentable.class)
+        }
+      end
+
+      def comments_count_item
+        super(root_commentable)
+      end
+    end
+  end
+end

data/app/cells/decidim/comments/comment_s_cell.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module Decidim
+  module Comments
+    # This cell renders the Search (:s) comment card
+    # for a given instance of a Comment
+    class CommentSCell < Decidim::CardSCell
+      include CommentCellsHelper
+
+      alias comment model
+
+      private
+
+      def title
+        resource_link_text
+      end
+
+      def resource_path
+        resource_link_path
+      end
+
+      def metadata_cell
+        "decidim/comments/comment_metadata"
+      end
+    end
+  end
+end

data/app/cells/decidim/comments/comment_thread/show.erb

@@ -1,6 +1,3 @@
-<div>
-  <%= title %>
-  <div class="comment-thread">
-    <%= cell("decidim/comments/comment", model, root_depth: model.depth, order: order) %>
-  </div>
+<div class="comment-thread">
+  <%= cell("decidim/comments/comment", model, root_depth: model.depth, order:) %>
 </div>

data/app/cells/decidim/comments/comment_thread_cell.rb

@@ -16,12 +16,6 @@ module Decidim
         model.comment_threads.any?
       end
 
-      def author_name
-        return t("decidim.components.comment.deleted_user") if model.author.deleted?
-
-        model.author.name
-      end
-
       def order
         options[:order] || "older"
       end

data/app/cells/decidim/comments/comments/add_comment.erb

@@ -1,25 +1,6 @@
 <div class="add-comment">
-  <h4 class="section-heading"><%= t("decidim.components.add_comment_form.title") %></h4>
-
   <% if user_signed_in? %>
-    <% if alignment_enabled? %>
-      <div class="opinion-toggle button-group">
-        <span class="show-for-sr"><%= t("decidim.components.add_comment_form.opinion.label") %></span>
-        <button aria-pressed="false" class="button tiny button--muted opinion-toggle--ok" data-selected-label="<%= t("decidim.components.add_comment_form.opinion.positive_selected") %>">
-          <%= icon "thumb-up", role: "img", "aria-hidden": true %>
-          <span class="show-for-sr"><%= t("decidim.components.add_comment_form.opinion.positive") %></span>
-        </button>
-        <button aria-pressed="true" class="button tiny button--muted opinion-toggle--meh is-active" data-selected-label="<%= t("decidim.components.add_comment_form.opinion.neutral_selected") %>">
-          <%= t("decidim.components.add_comment_form.opinion.neutral") %>
-        </button>
-        <button aria-pressed="false" class="button tiny button--muted opinion-toggle--ko" data-selected-label="<%= t("decidim.components.add_comment_form.opinion.negative_selected") %>">
-          <%= icon "thumb-down", role: "img", "aria-hidden": true %>
-          <span class="show-for-sr"><%= t("decidim.components.add_comment_form.opinion.negative") %></span>
-        </button>
-        <div role="alert" aria-live="assertive" aria-atomic="true" class="selected-state show-for-sr"></div>
-      </div>
-    <% end %>
-    <%== cell("decidim/comments/comment_form", model, root_depth: root_depth) %>
+    <%== cell("decidim/comments/comment_form", model, root_depth:) %>
   <% else %>
     <p>
       <span>

data/app/cells/decidim/comments/comments/blocked_comments_warning.erb

@@ -1,3 +1 @@
-<div class="callout warning">
-  <p><%= t("decidim.components.comments.blocked_comments_warning") %></p>
-</div>
+<%= cell("decidim/announcement", t("decidim.components.comments.blocked_comments_warning"), callout_class: "warning") %>

data/app/cells/decidim/comments/comments/comments_loading.erb

@@ -1,3 +1 @@
-<div class="callout primary loading-comments">
-  <p><%= t("decidim.components.comments.loading") %></p>
-</div>
+<%= cell("decidim/announcement", t("decidim.components.comments.loading"), callout_class: "primary loading-comments mb-4") %>