misc style updates to the post listing action buttons

static/scss/main/community_post_list.scss

@@ -16,6 +16,8 @@
  }
 }
 
+
+
 .community_post_list {
  display: flex;
  flex-direction: column;
@@ -112,10 +114,36 @@
 
  .post_footer {
  font-size: $body_size_small;
+ display: flex;
+ gap: 10px;
+ flex-wrap: wrap;
+ align-items: center;
 
+ // NOTE: this is effectively outline_button
  .post_action {
- color: body_color_lighter();
- margin-right: 10px;
+ text-align: center;
+ border-radius: $button_radius*2;
+ text-decoration: none;
+ padding: 2px 12px;
+
+ background: white_back();
+ border: 2px solid rgba($button_color, 0.6);
+ color: link_color();
+ display: flex;
+ gap: 4px;
+ align-items: center;
+
+ &:hover {
+ border-color: button_color();
+ background: mix($button_color, $white_back, 10%);
+ }
+
+ @include dark_theme {
+ border-color: rgba($dark_button_color, 0.6);
+ &:hover {
+ background: mix($dark_button_color, $dark_white_back, 10%);
+ }
+ }
  }
  }
 
@@ -169,10 +197,6 @@
  .community_post_replies {
  border-left: 2px solid var(--sc-border_color50);
 
- &.last_root_post {
- margin-bottom: 0
- }
-
  margin: 20px 0 0 0;
  padding: 0 0 0 20px;
 
@@ -191,8 +215,6 @@
  }
 
  }
-
-
 }
 
 

widgets/community/post_list.moon

@@ -11,8 +11,6 @@ class CommunityPostList extends require "widgets.base"
  "flair_by_user_id"
  }
 
- hide_voting: false
-
  inner_content: =>
  for i, post in ipairs @posts
  @render_post post, {
@@ -112,31 +110,45 @@ class CommunityPostList extends require "widgets.base"
  raw sanitize_html convert_links post.body
 
  div class: "post_footer", ->
- if post\allowed_to_edit @current_user
- a {
- class: "post_action"
- href: @url_for("community.edit_post", post_id: post.id)
- "Edit"
- }
 
+ if post\is_topic_post! and not @topic.permanent
  a {
- class: "delete_post_btn post_action"
- href: @url_for("community.delete_post", post_id: post.id)
- "Delete"
- }
+ class: "post_action"
+ href: "#reply-thread"
+ }, ->
+ @icon "reply", 16
+ text " "
+ text "Reply"
 
- if (not post\is_topic_post! or @topic.permanent) and post\allowed_to_reply @current_user
+ elseif post\allowed_to_reply @current_user
  a {
  class: "post_action"
  href: @url_for("community.reply_post", post_id: post.id)
- "Reply"
- }
+ }, ->
+ @icon "reply", 16
+ text " "
+ text "Reply"
  elseif not @current_user and not post.deleted
  a {
  class: "post_action"
  "data-register_action": "community_reply"
  href: login_and_return_url @, nil, "community"
- "Reply"
+ }, ->
+ @icon "reply", 16
+ text " "
+ text "Reply"
+
+ if post\allowed_to_edit @current_user
+ a {
+ class: "post_action"
+ href: @url_for("community.edit_post", post_id: post.id)
+ "Edit"
+ }
+
+ a {
+ class: "delete_post_btn post_action"
+ href: @url_for("community.delete_post", post_id: post.id)
+ "Delete..."
  }
 
  if post.children and post.children[1]

widgets/community/topic_posts.moon

@@ -36,7 +36,7 @@ class CommunityTopicPosts extends require "widgets.base"
  can_reply = @topic\allowed_to_post @current_user
  return unless @topic.locked or can_reply or not @current_user
 
- div class: "topic_posts_footer", ->
+ div id: "reply-thread", class: "topic_posts_footer", ->
  if @topic.locked
  div class: "lock_message", ->
  @topic_lock_message!

widgets/icons.moon

@@ -11,6 +11,19 @@ class Icons
  height: 60
  path: [[<g><path d="M30,16c4.411,0,8-3.589,8-8s-3.589-8-8-8s-8,3.589-8,8S25.589,16,30,16z" /><path d="M30,44c-4.411,0-8,3.589-8,8s3.589,8,8,8s8-3.589,8-8S34.411,44,30,44z" /><path d="M30,22c-4.411,0-8,3.589-8,8s3.589,8,8,8s8-3.589,8-8S34.411,22,30,22z" /></g>]]
  }
+
+ reply: {
+ width: 24
+ height: 24
+ svg_opts: {
+ "stroke-linecap": "round"
+ "stroke-linejoin": "round"
+ "stroke-width": "2"
+ fill: "none"
+ stroke: "currentColor"
+ }
+ path: [[<polyline points="15 10 20 15 15 20"></polyline><path d="M4 4v7a4 4 0 0 0 4 4h12"></path>]]
+ }
  }
 
  icon: (name, width, opts) =>
@@ -30,6 +43,10 @@ class Icons
  :width, :height
  }
 
+ if icon.svg_opts
+ for k,v in pairs icon.svg_opts
+ svg_opts[k] = v
+
  if opts
  for k,v in pairs opts
  svg_opts[k] = v