css: replace more css with tailwind-style classes.

app/components/comment_component.rb

@@ -1,12 +1,13 @@
 # frozen_string_literal: true
 
 class CommentComponent < ApplicationComponent
-  attr_reader :comment, :context, :dtext_data, :current_user
+  attr_reader :comment, :context, :classes, :dtext_data, :current_user
 
-  def initialize(comment:, current_user:, context: nil, dtext_data: nil)
+  def initialize(comment:, current_user:, context: nil, classes: nil, dtext_data: nil)
     super
     @comment = comment
     @context = context
+    @classes = classes
     @dtext_data = dtext_data
     @current_user = current_user
   end

app/components/comment_component/comment_component.html.erb

@@ -1,4 +1,4 @@
-<article id="comment_<%= comment.id %>" class="comment message"
+<article id="comment_<%= comment.id %>" class="comment message <%= classes %>"
           x-data="{ showThresholded: false }"
           x-bind:data-show-thresholded="String(showThresholded)"
           data-id="<%= comment.id %>"
@@ -31,7 +31,7 @@
   </div>
 
   <div class="content">
-    <%= link_to "[hidden]", "javascript:void(0)", class: "unhide-comment-link", "x-on:click": "showThresholded = true" %>
+    <%= link_to "[hidden]", "javascript:void(0)", class: "unhide-comment-link block mb-3", "x-on:click": "showThresholded = true" %>
 
     <%= tag.div class: "body prose" do %>
       <% if redact_deleted? %>
@@ -54,7 +54,7 @@
             <%= link_to upvote_icon, comment_comment_votes_path(comment_id: comment.id, score: "1"), class: "comment-upvote-link inactive-link", method: :post, remote: true %>
           <% end %>
 
-          <span class="comment-score">
+          <span class="comment-score inline-block text-center whitespace-nowrap align-middle min-w-4">
             <% if policy(CommentVote).can_see_votes? %>
               <%= link_to comment.score, comment_votes_path(search: { comment_id: comment.id }, variant: "compact"), class: "inactive-link" %>
             <% else %>
@@ -85,7 +85,7 @@
       <% end %>
 
       <% if reported? %>
-        <li class="moderation-report-notice">
+        <li class="moderation-report-notice font-bold">
           Reported (<%= link_to pluralize(comment.pending_moderation_reports.length, "report"), moderation_reports_path(search: { model_type: "Comment", model_id: comment.id, status: "pending" }) %>)
         </li>
       <% end %>

app/components/comment_component/comment_component.scss

@@ -1,6 +1,4 @@
 article.comment {
-  flex: 1;
-
   &[data-is-sticky="true"] {
     background: var(--comment-sticky-background-color);
   }
@@ -25,30 +23,7 @@ article.comment {
     .unhide-comment-link { display: none; }
   }
 
-  .unhide-comment-link {
-    margin-bottom: 0.75rem;
-    display: block;
-  }
-
   .moderation-report-notice {
-    font-weight: bold;
     color: var(--moderation-report-text-color);
   }
-
-  .comment-votes {
-    color: var(--muted-text-color);
-
-    // Fix it so that the vote buttons don't move when the score changes width.
-    .comment-score {
-      display: inline-block;
-      text-align: center;
-      min-width: 1.25em;
-      white-space: nowrap;
-      vertical-align: middle;
-    }
-
-    .icon {
-      width: 1.25em;
-    }
-  }
 }

app/components/post_preview_component.rb

@@ -9,7 +9,7 @@ class PostPreviewComponent < ApplicationComponent
 
   with_collection_parameter :post
 
-  attr_reader :post, :tags, :size, :show_deleted, :link_target, :pool, :similarity, :recommended, :show_votes, :fit, :show_size, :save_data, :current_user, :options
+  attr_reader :post, :tags, :size, :classes, :show_deleted, :link_target, :pool, :similarity, :recommended, :show_votes, :fit, :show_size, :save_data, :current_user, :options
 
   delegate :external_link_to, :time_ago_in_words_tagged, :duration_to_hhmmss, :render_post_votes, :empty_heart_icon, :sound_icon, to: :helpers
   delegate :image_width, :image_height, :file_ext, :file_size, :duration, :is_animated?, to: :media_asset
@@ -19,6 +19,7 @@ class PostPreviewComponent < ApplicationComponent
   # @param tags [String] The current tag search, if any.
   # @param size [String] The size of the thumbnail. One of "150", "180", "225",
   #   "225w", "270", "270w", or "360".
+  # param classes [String] A list of CSS classes to apply to the container.
   # @param show_deleted [Boolean] If true, show thumbnails for deleted posts.
   #   If false, hide thumbnails of deleted posts.
   # @param show_votes [Boolean] If true, show scores and vote buttons beneath the thumbnail.
@@ -30,11 +31,12 @@ class PostPreviewComponent < ApplicationComponent
   # @param fit [Symbol] If `:fixed`, make the thumbnail container a fixed size
   #   (e.g. 180x180), even if the thumbnail image is smaller than that. If `:compact`,
   #   make the thumbnail container shrink to the same size as the thumbnail image.
-  def initialize(post:, tags: "", size: DEFAULT_SIZE, show_deleted: false, show_votes: false, link_target: post, pool: nil, similarity: nil, recommended: nil, show_size: nil, save_data: CurrentUser.save_data, fit: :compact, current_user: CurrentUser.user, **options)
+  def initialize(post:, tags: "", size: DEFAULT_SIZE, classes: nil, show_deleted: false, show_votes: false, link_target: post, pool: nil, similarity: nil, recommended: nil, show_size: nil, save_data: CurrentUser.save_data, fit: :compact, current_user: CurrentUser.user, **options)
     super
     @post = post
     @tags = tags.presence
     @size = size.presence || DEFAULT_SIZE
+    @classes = classes
     @show_deleted = show_deleted
     @show_votes = show_votes
     @link_target = link_target
@@ -52,7 +54,7 @@ class PostPreviewComponent < ApplicationComponent
     post.present? && post.visible?(current_user) && (!post.is_deleted? || show_deleted)
   end
 
-  def article_attrs(classes = nil)
+  def article_attrs
     { class: [classes, *preview_class].compact.join(" "), **data_attributes }
   end
 

app/components/post_votes_component/post_votes_component.html.erb

@@ -7,7 +7,7 @@
     <%= link_to upvote_icon, post_post_votes_path(post_id: post.id, score: 1), class: "post-upvote-link inactive-link", method: :post, remote: true %>
   <% end %>
 
-  <span class="post-score">
+  <span class="post-score inline-block text-center whitespace-nowrap align-middle min-w-4">
     <%= link_to post.score, post_votes_path(search: { post_id: post.id }, variant: :compact), rel: "nofollow" %>
   </span>
 

app/components/post_votes_component/post_votes_component.scss

@@ -1,17 +1,5 @@
 @import "../../javascript/src/styles/base/000_vars";
 
-.post-votes {
-  // Fix it so that the vote buttons don't move when the score changes width.
-  // XXX duplicated from app/components/comment_component/comment_component.scss
-  .post-score {
-    display: inline-block;
-    text-align: center;
-    min-width: 1.25em;
-    white-space: nowrap;
-    vertical-align: middle;
-  }
-}
-
 article.post-preview {
   .post-score a {
     @include inactive-link;