more stuff

assets/css/elements/button.css

@@ -2,7 +2,7 @@
   .button--$(type) {
     color: var(--$(type)-link-color) !important;
     border-color: var(--$(type)-border-color);
-    background: var(--$(type)-dark-color);
+    background: var(--$(type)-muted-color);
   }
 
   .button--$(type).button--important {

assets/css/elements/form.css

@@ -17,7 +17,7 @@ form .form--two_column > .field, form .form--two_column > li {
   gap: var(--padding-normal);
 }
 
-form .field > .with_error {
+form .with_error {
   display: block;
 }
 

assets/css/elements/list.css

@@ -1,3 +1,9 @@
 ul, ol {
+  padding: 0;
   list-style-type: none;
 }
+
+.horizontal-list {
+  display: flex;
+  gap: var(--padding-normal);
+}

assets/css/themes/dark-blue.css

@@ -3,11 +3,11 @@ $text-color: #e0e0e0;
 
 $primary-color: #284371;
 $secondary-color: #546c99;
-$danger-color: #672a21;
-$warning-color: #684f2c;
+$danger-color: #6d2a20;
+$warning-color: #715227;
 $success-color: #25603e;
-$information-color: #205861;
-$special-color: #561e5e;
+$information-color: #1c606a;
+$special-color: #65206e;
 
 $upvote-color: #5b9b26;
 $downvote-color: #da3412;
@@ -61,7 +61,7 @@ $spoiler-color: #0f0f0f;
   --secondary-border-color: hsl(from $secondary-color h s calc(l + 5));
   --secondary-muted-color: hsl(from $secondary-color h s calc(l - 17));
   --secondary-dark-color: hsl(from $secondary-color h calc(s - 5) calc(l - 25));
-  --secondary-link-color: hsl(from $secondary-color h s calc(l + 55));
+  --secondary-link-color: hsl(from $secondary-color h s calc(l + 40));
 
   --upvote-color: $upvote-color;
   --downvote-color: $downvote-color;

assets/css/views/staff.css

@@ -42,6 +42,10 @@
   margin-top: 1rem;
 }
 
+.staff-block__category i {
+  margin-right: var(--padding-normal);
+}
+
 .staff-block__user-description {
   overflow: hidden;
   text-overflow: ellipsis;

assets/css/views/tag.css

@@ -102,3 +102,14 @@
 .js-imagelist-info {
   margin-bottom: var(--padding-normal);
 }
+
+.tagsinput {
+  display: flex;
+  gap: var(--padding-small);
+  flex-wrap: wrap;
+  background: var(--primary-dark-color);
+}
+
+.tagsinput .tag {
+  padding: 0 var(--padding-small);
+}

lib/philomena_web/templates/admin/report/show.html.slime

@@ -35,7 +35,7 @@ article.block.communication
 
 p
   = if @report.user do
-    => link "Send PM", to: Routes.conversation_path(@conn, :new, recipient: @report.user.name), class: "button button--link"
+    => link "Send PM", to: Routes.conversation_path(@conn, :new, recipient: @report.user.name), class: "button"
 
   = if @report.open do
     => link "Close", to: Routes.admin_report_close_path(@conn, :create, @report), class: "button", data: [method: "post"]

lib/philomena_web/templates/admin/user/_form.html.slime

@@ -24,40 +24,39 @@
       .field
         label Secondary banner:
         .with_error = select f, :secondary_role, [[key: "-", value: ""], "Site Developer", "Devops", "Philomena Contributor", "Public Relations"], class: "input"
-      .field
-        label Hide staff banner:
-        .with_error = checkbox f, :hide_default_role, class: "checkbox"
-      .field
-        label Senior staff:
-        .with_error = checkbox f, :senior_staff, class: "checkbox"
-      .field
-        label Bypass rate limits:
-        .with_error = checkbox f, :bypass_rate_limits, class: "checkbox"
       .field
         label Avatar
         .with_error
-          = link "Remove avatar", to: Routes.admin_user_avatar_path(@conn, :delete, @user), class: "button", data: [method: "delete", confirm: "Are you really, really sure?"]
+          = link to: Routes.admin_user_avatar_path(@conn, :delete, @user), class: "button button--danger", data: [method: "delete", confirm: "Are you really, really sure?"] do
+            i.fa.fa-trash
+            | Remove
 
   .block
     .block__header
       i.fa.fa-user-check
       span General user flags
     .block__content
-      ul
-        p
-          strong> Be careful when issuing these permissions to staff members!
-          | Staff members with relevant roles may have these permissions anyway. Issuing them may break things, such as tag aliasing.
+      ul.form--two_column
+        li
+          .with_error = checkbox f, :hide_default_role, class: "checkbox"
+          label Hide staff banner
+        li
+          .with_error = checkbox f, :senior_staff, class: "checkbox"
+          label Senior staff
+        li
+          .with_error = checkbox f, :bypass_rate_limits, class: "checkbox"
+          label Bypass rate limits
       ul.form--two_column = collection_checkboxes f, :roles, filtered_roles(general_permissions(), @roles), mapper: &checkbox_mapper/6
 
-  .block
-    .block__header.warning
+  .block.block--warning
+    .block__header
       i.fa.fa-handshake-angle
       span Special roles for assistants
     .block__content
       ul.form--two_column = collection_checkboxes f, :roles, filtered_roles(assistant_permissions(), @roles), mapper: &checkbox_mapper/6
 
-  .block
-    .block__header.danger
+  .block.block--danger
+    .block__header
       i.fa.fa-gavel
       span Special roles for moderators
     .block__content

lib/philomena_web/templates/image/_options.html.slime

@@ -88,7 +88,7 @@
 
     .block__tab.hidden data-tab="administration"
       .block.block--danger
-        a.button.button--link> href=Routes.image_scratchpad_path(@conn, :edit, @image)
+        a.button> href=Routes.image_scratchpad_path(@conn, :edit, @image)
           i.far.fa-edit
         = if present?(@image.scratchpad) do
           strong> Mod notes:

lib/philomena_web/templates/image/_source.html.slime

@@ -54,7 +54,7 @@
           - else
             ' Add
         = if @source_change_count > 0 do
-          a.button.button--link href=Routes.image_source_change_path(@conn, :index, @image) title="Source history"
+          a.button href=Routes.image_source_change_path(@conn, :index, @image) title="Source history"
             i.fa.fa-history>
             spanspan.hide-mobile> History
             | (

lib/philomena_web/templates/image/_tags.html.slime

@@ -19,7 +19,7 @@
 
         = hidden_input f, :old_tag_input, value: tag_input
 
-        .field
+        .field.flex__column
           = label f, :tag_input do
             ' Separate tags with commas. Use 'artist:name' tags to identify artists. Got questions? Check the
             a> href="/pages/tags" tag guidelines
@@ -31,7 +31,7 @@
           = error_tag f, :tag_input
 
         = if !@conn.assigns.current_user do
-          .block.block--fixed.block--warning
+          .block.block--warning.block--fixed
             strong
               em Hang on a sec…
             br
@@ -44,9 +44,12 @@
         ul.horizontal-list
           li
             .actions
-              = submit "Save tags", class: "button", id: "edit_save_button", data: [disable_with: raw("Saving…")]
+              = submit class: "button", id: "edit_save_button", data: [disable_with: raw("Saving…")] do
+                i.fa.fa-floppy-disk>
+                ' Save tags
           li
             button.button.js-tag-sauce-toggle data-click-toggle=".tagsauce, .js-imageform" data-click-focus=".js-taginput-plain:not(.hidden), .js-taginput-input"
+              i.fa.fa-xmark>
               ' Cancel
 
         .block.js-tagtable data-target="[name="image[tag_input]"]"
@@ -66,7 +69,7 @@
           i.fas.fa-edit>
           ' Edit
         = if @tag_change_count > 0 do
-          a.button.button--link href=Routes.image_tag_change_path(@conn, :index, @image) title="Tag history"
+          a.button href=Routes.image_tag_change_path(@conn, :index, @image) title="Tag history"
             i.fa.fa-history>
             | History (
             = @tag_change_count

lib/philomena_web/templates/image/reporting/show.html.slime

@@ -1,5 +1,5 @@
 a href=Routes.image_report_path(@conn, :new, @image)
-  button.button.button--link
+  button.button
     i.fa.fa-exclamation-triangle>
     ' General reporting
 

lib/philomena_web/templates/layout/_flash_warnings.html.slime

@@ -10,6 +10,20 @@
         a href=notice.link
           = notice.link_text
 
+/ A lil disclaimer because people love to panic.
+= if not vite_reload?() do
+  .flash.flash--special
+    .flash__icon
+      i.fa.fa-dragon
+    .flash__message
+      strong> Here be dragons!
+      ' This is a work-in-progress branch of the site code. At current state, it is approximately
+      em> 40 percent
+      ' finished. Everything is subject to change, and will probably be changed.
+      ' Keep calm and don't freak out if something looks ugly/broken - it will be fixed.
+      a href="https://derpibooru.org/forums/meta/topics/so-you-found-the-redesign?post_id=5609737"
+        | Check out this topic for more info, the FAQ, and to yell at me about this.
+
 noscript.flash.flash--warning
   .flash__icon
     i.fa.fa-check

lib/philomena_web/templates/staff/index.html.slime

@@ -26,7 +26,9 @@ h1 Staff
     - header = to_string(header)
 
     = if Enum.any?(users) do
-      div class="block block--fixed staff-block__category #{category_class(header)}" = header
+      div class="block block--fixed staff-block__category #{category_class(header)}"
+        i class="fa #{category_icon(header)}"
+        = header
       p.staff-block__description
         i.fa.fa-fw.fa-info-circle>
         = category_description(header)
@@ -42,7 +44,7 @@ h1 Staff
                     p
                       b = user.name
                 .staff-block__info
-                  = link to: Routes.conversation_path(@conn, :new, recipient: user.name), class: "button" do
+                  = link to: Routes.conversation_path(@conn, :new, recipient: user.name), class: "button button--secondary" do
                     i.fa.fa-envelope>
                     ' Send PM
               hr.staff-block__separator

lib/philomena_web/views/admin/user_view.ex

@@ -46,7 +46,7 @@ defmodule PhilomenaWeb.Admin.UserView do
 
   def description("moderator", "Tag"), do: "Manage tag details"
   def description("admin", "Tag"), do: "Alias tags"
-  def description("batch_update", "Tag"), do: "Update tags in batches"
+  def description("batch_update", "Tag"), do: "Update tags in batches (do not issue to staff members)"
 
   def description("moderator", "User"), do: "Manage users and wipe votes"
   def description("admin", "Role"), do: "Manage permissions"

lib/philomena_web/views/staff_view.ex

@@ -35,6 +35,14 @@ defmodule PhilomenaWeb.StaffView do
   def category_class("Assistants"), do: "block--special"
   def category_class(_), do: ""
 
+  def category_icon("Administrators"), do: "fa-medal"
+  def category_icon("Technical Team"), do: "fa-screwdriver-wrench"
+  def category_icon("Public Relations"), do: "fa-comment-medical"
+  def category_icon("Moderators"), do: "fa-gavel"
+  def category_icon("Assistants"), do: "fa-handshake-angle"
+  def category_icon("Others"), do: "fa-user-tie"
+  def category_icon(_), do: ""
+
   def staff_description(%{description: desc}) when desc not in [nil, ""] do
     [part] = Regex.run(@desc_regex, desc, capture: :all_but_first)
     String.slice(part, 0, 240)