better styling

assets/css/elements/button.css

@@ -5,6 +5,10 @@
     background: var(--$(type)-muted-color);
   }
 
+  .button--$(type) a {
+    color: var(--$(type)-link-color);
+  }
+
   .button--$(type).button--important {
     color: var(--text-color) !important;
     background: var(--$(type)-color);
@@ -61,10 +65,6 @@
 }
 
 @mixin if-phone {
-  .button > i {
-    margin-right: 0;
-  }
-
   .button > span {
     margin-left: var(--padding-small);
   }

assets/css/views/communication.css

@@ -52,7 +52,6 @@
 }
 
 .communication > .block__content:last-of-type {
-  background: var(--primary-muted-color);
   border-top-left-radius: 0;
   border-top-right-radius: 0;
 }
@@ -81,6 +80,25 @@
   padding: var(--padding-small);
 }
 
+.communication__options__staff {
+  display: flex;
+  align-items: center;
+  gap: var(--padding-normal);
+  margin-top: var(--padding-small);
+}
+
+.communication__options__post-time {
+  display: flex;
+  align-items: center;
+  gap: var(--padding-small);
+  flex-wrap: wrap;
+}
+
+.communication__options__edit-time {
+  width: 100%;
+  margin-bottom: var(--padding-small);
+}
+
 @mixin if-mobile {
   .communication__body__text {
     margin-top: var(--padding-normal);
@@ -96,47 +114,7 @@
     min-height: var(--avatar-small-size);
     min-width: var(--avatar-small-size);
   }
-}
 
-.communication__interaction {
-  display: inline-block;
-  background: var(--secondary-muted-color);
-  color: var(--secondary-link-color) !important;
-  padding: var(--padding-tiny);
-  border-radius: var(--border-radius-inner);
-  margin-left: var(--padding-small);
-}
-
-.communication__interaction:first-child {
-  margin: 0;
-}
-
-.communication__info {
-  display: inline-block;
-  background: var(--information-muted-color);
-  padding: var(--padding-tiny);
-  border-radius: var(--border-radius-inner);
-  margin-left: var(--padding-small);
-}
-
-.communication__info > a {
-  color: var(--information-link-color);
-}
-
-.togglable-delete-form, .togglable-delete-form-link {
-  margin-top: var(--padding-small) !important;
-}
-
-.togglable-delete-form-link {
-  background: var(--danger-muted-color);
-  color: var(--danger-link-color) !important;
-}
-
-.owner-options {
-  margin-left: var(--padding-small);
-}
-
-@mixin if-mobile {
   .communication__options > *:first-child {
     display: flex;
     flex-direction: column;

assets/css/views/metabar.css

@@ -66,15 +66,13 @@
 
 .metabar__user-credit {
   display: flex;
-  box-sizing: border-box;
+  flex-direction: row;
   gap: var(--padding-small);
 }
 
 .metabar__user-credit .image_uploader {
   display: flex;
-  align-self: center;
   align-items: center;
-  vertical-align: center;
   gap: var(--padding-small);
 }
 

assets/css/views/user.css

@@ -1,6 +1,5 @@
 .badges {
-  display: grid;
+  display: flex;
-  grid-template-columns: repeat(6, var(--badge-small-size));
   gap: var(--padding-small);
 }
 

lib/philomena_web/templates/comment/_comment.html.slime

@@ -30,29 +30,30 @@ article.block.communication id="comment_#{@comment.id}"
 
     = if can?(@conn, :hide, @comment) do
       .js-staff-action
-        = cond do
+        .communication__options__staff
-          - @comment.hidden_from_users and not @comment.destroyed_content ->
+          = cond do
-            = link(to: Routes.image_comment_hide_path(@conn, :delete, @comment.image_id, @comment), data: [confirm: "Are you sure?"], method: "delete", class: "communication__interaction") do
+            - @comment.hidden_from_users and not @comment.destroyed_content ->
-              i.fas.fa-check>
+              = link(to: Routes.image_comment_hide_path(@conn, :delete, @comment.image_id, @comment), data: [confirm: "Are you sure?"], method: "delete", class: "communication__interaction") do
-              ' Restore
+                i.fas.fa-check>
+                ' Restore
 
-            = if can?(@conn, :delete, @comment) do
+              = if can?(@conn, :delete, @comment) do
-              = link(to: Routes.image_comment_delete_path(@conn, :create, @comment.image_id, @comment), data: [confirm: "Are you sure?"], method: "post", class: "communication__interaction") do
+                = link(to: Routes.image_comment_delete_path(@conn, :create, @comment.image_id, @comment), data: [confirm: "Are you sure?"], method: "post", class: "communication__interaction") do
+                  i.fas.fa-times>
+                  ' Delete Contents
+
+            - not @comment.hidden_from_users and not @comment.destroyed_content ->
+              a.button.button--danger.togglable-delete-form-link href="#" data-click-toggle="#inline-del-form-comment-#{@comment.id}"
                 i.fas.fa-times>
-                ' Delete Contents
+                ' Delete
 
-          - not @comment.hidden_from_users and not @comment.destroyed_content ->
+            - true ->
-            a.communication__interaction.togglable-delete-form-link href="#" data-click-toggle="#inline-del-form-comment-#{@comment.id}"
-              i.fas.fa-times>
-              ' Delete
 
-          - true ->
+          = if can?(@conn, :show, :ip_address) do
-
+            .button.button--information.js-staff-action
-        = if can?(@conn, :show, :ip_address) do
+              =<> link_to_ip(@conn, @comment.ip)
-          .communication__info.js-staff-action
+            .button.button--information.js-staff-action
-            =<> link_to_ip(@conn, @comment.ip)
+              =<> link_to_fingerprint(@conn, @comment.fingerprint)
-          .communication__info.js-staff-action
-            =<> link_to_fingerprint(@conn, @comment.fingerprint)
 
         = form_for :comment, Routes.image_comment_hide_path(@conn, :create, @comment.image_id, @comment), [class: "togglable-delete-form hidden flex", id: "inline-del-form-comment-#{@comment.id}"], fn f ->
           = text_input f, :deletion_reason, class: "input input--wide", placeholder: "Deletion Reason", id: "inline-del-reason-comment-#{@comment.id}", required: true

lib/philomena_web/templates/comment/_comment_options.html.slime

@@ -1,14 +1,14 @@
-div
+.communication__options__post-time
-  ' Posted
+  span
-  => pretty_time(@comment.created_at)
+    ' Posted
+    => pretty_time(@comment.created_at)
 
-  a.communication__interaction href=Routes.image_comment_report_path(@conn, :new, @comment.image, @comment)
+  a.button.button--primary href=Routes.image_comment_report_path(@conn, :new, @comment.image, @comment)
     i.fa.fa-flag>
     ' Report
 
   = if not is_nil(@comment.edited_at) and can?(@conn, :show, @comment) do
-    br
+    a.communication__options__edit-time href=Routes.image_comment_history_path(@conn, :index, @comment.image, @comment)
-    a href=Routes.image_comment_history_path(@conn, :index, @comment.image, @comment)
       ' Edited
       => pretty_time(@comment.edited_at)
 
@@ -16,26 +16,26 @@ div
         ' because:
         => @comment.edit_reason
 
-div
+.flex.flex--normal-gap.flex--centered
   - link_path = Routes.image_path(@conn, :show, @comment.image) <> "#comment_#{@comment.id}"
   - safe_author = PhilomenaWeb.PostView.markdown_safe_author(@comment)
   - quote_body = if @comment.hidden_from_users, do: "", else: @comment.body
 
-  a.communication__interaction title="Link to comment" href=link_path
+  a.button.button--primary title="Link to comment" href=link_path
-    i.fa.fa-link>
+    i.fa.fa-link
     ' Link
 
-  a.communication__interaction.post-reply.post-reply-quote href=link_path data-reply-url=link_path data-author=safe_author data-post=quote_body
+  a.button.button--primary.post-reply.post-reply-quote href=link_path data-reply-url=link_path data-author=safe_author data-post=quote_body
-    i.fa.fa-quote-right>
+    i.fa.fa-quote-right
     ' Quote
 
-  a.communication__interaction.post-reply href=link_path data-reply-url=link_path data-author=safe_author
+  a.button.button--primary.post-reply href=link_path data-reply-url=link_path data-author=safe_author
-    i.fa.fa-reply>
+    i.fa.fa-reply
     ' Reply
 
   = if can?(@conn, :edit, @comment) do
     span.owner-options
       strong
-        a.communication__interaction href=Routes.image_comment_path(@conn, :edit, @comment.image, @comment)
+        a.button.button--primary href=Routes.image_comment_path(@conn, :edit, @comment.image, @comment)
-          i.fas.fa-edit>
+          i.fas.fa-edit
           ' Edit

lib/philomena_web/templates/comment/_comment_with_image.html.slime

@@ -7,29 +7,29 @@ article.block.communication id="comment_#{@comment.id}"
       = render PhilomenaWeb.CommentView, "_comment_options.html", comment: @comment, conn: @conn
 
     = if can?(@conn, :hide, @comment) do
-      .js-staff-action
+      .flex.flex--normal-gap.flex--centered.js-staff-action
         = cond do
           - @comment.hidden_from_users and not @comment.destroyed_content ->
-            = link(to: Routes.image_comment_hide_path(@conn, :delete, @comment.image_id, @comment), data: [confirm: "Are you sure?"], method: "delete", class: "communication__interaction") do
+            = link(to: Routes.image_comment_hide_path(@conn, :delete, @comment.image_id, @comment), data: [confirm: "Are you sure?"], method: "delete", class: "button button--success") do
               i.fas.fa-check>
               ' Restore
 
             = if can?(@conn, :delete, @comment) do
-              = link(to: Routes.image_comment_delete_path(@conn, :create, @comment.image_id, @comment), data: [confirm: "Are you sure?"], method: "post", class: "communication__interaction") do
+              = link(to: Routes.image_comment_delete_path(@conn, :create, @comment.image_id, @comment), data: [confirm: "Are you sure?"], method: "post", class: "button button--danger") do
                 i.fas.fa-times>
                 ' Delete Contents
 
           - not @comment.hidden_from_users and not @comment.destroyed_content ->
-            a.communication__interaction.togglable-delete-form-link href="#" data-click-toggle="#inline-del-form-comment-#{@comment.id}"
+            a.button.button--danger.togglable-delete-form-link href="#" data-click-toggle="#inline-del-form-comment-#{@comment.id}"
               i.fas.fa-times>
               ' Delete
 
           - true ->
 
         = if can?(@conn, :show, :ip_address) do
-          .communication__info.js-staff-action
+          .button.button--warning.js-staff-action
             =<> link_to_ip(@conn, @comment.ip)
-          .communication__info.js-staff-action
+          .button.button--information.js-staff-action
             =<> link_to_fingerprint(@conn, @comment.fingerprint)
 
         = form_for :comment, Routes.image_comment_hide_path(@conn, :create, @comment.image_id, @comment), [class: "togglable-delete-form hidden flex", id: "inline-del-form-comment-#{@comment.id}"], fn f ->