From 9c96557be8d08a11dedce84c9d6d3d6e066e8db3 Mon Sep 17 00:00:00 2001
From: evazion <noizave@gmail.com>
Date: Tue, 17 Sep 2019 00:28:41 -0500
Subject: [PATCH] css: standardize post notice css.

* Standardize post notice background colors.
* Replace .ui-state-highlight and .ui-corner-all classes with .post-notice.
* Rename post notice classes (e.g. .notice-parent -> .post-notice-parent).
* Remove hover effect from sequential search navbar.
---
 app/javascript/src/styles/base/040_colors.css | 22 ++----
 app/javascript/src/styles/specific/posts.scss | 72 ++++---------------
 .../posts/partials/show/_nav_links.html.erb   |  2 +-
 .../posts/partials/show/_notices.html.erb     | 16 ++---
 4 files changed, 28 insertions(+), 84 deletions(-)

diff --git a/app/javascript/src/styles/base/040_colors.css b/app/javascript/src/styles/base/040_colors.css
index e137b0a65..f8d67b2cd 100644
--- a/app/javascript/src/styles/base/040_colors.css
+++ b/app/javascript/src/styles/base/040_colors.css
@@ -83,24 +83,16 @@
   --wiki-page-versions-diff-ins-background: #CFC;
   --wiki-page-versions-version-color: #AAA;
 
-  --post-parent-notice-border-color: #C0FCC0;
-  --post-parent-notice-background: #D8FCD9;
-  --post-child-notice-border-color: #FCFCC0;
-  --post-child-notice-background: #FBFCD8;
-  --post-pending-notice-border-color: #C0C0FC;
+  --post-notice-border: 1px solid #DDD;
+  --post-parent-notice-background: var(--warning-background-color);
+  --post-child-notice-background: var(--success-background-color);
   --post-pending-notice-background: #D8D8FC;
-  --post-flagged-notice-border-color: #FCC0C0;
-  --post-flagged-notice-background: #FCD9D8;
-  --post-deleted-notice-border-color: #FF8C8C;
-  --post-deleted-notice-background: #FFA7A5;
-  --post-appealed-notice-border-color: #C0ECFC;
+  --post-flagged-notice-background: var(--error-background-color);
+  --post-banned-notice-background: var(--error-background-color);
+  --post-deleted-notice-background: var(--error-background-color);
   --post-appealed-notice-background: #D8F2FC;
-  --post-resized-notice-border-color: #E4C0FC;
   --post-resized-notice-background: #EED8FC;
-
-  --post-nav-notice-background: #EEE;
-  --post-nav-notice-border: 1px solid #AAA;
-  --post-seq-nav-hover-background: rgb(250, 250, 250);
+  --post-search-notice-background: #EEE;
 
   --post-artist-commentary-container-background: #F8F8F8;
   --post-artist-commentary-container-border: 1px solid #CCC;
diff --git a/app/javascript/src/styles/specific/posts.scss b/app/javascript/src/styles/specific/posts.scss
index a9cd9d6e7..f947ba31c 100644
--- a/app/javascript/src/styles/specific/posts.scss
+++ b/app/javascript/src/styles/specific/posts.scss
@@ -231,72 +231,28 @@ div#c-posts {
     overflow: hidden;
   }
 
-  div.notice {
+  .post-notice {
     font-size: 0.8em;
     padding: 0.5em;
     margin-bottom: 0.5em;
     overflow: hidden;
-
-    ul {
-      margin-left: 1em;
-    }
-
-    p {
-      margin: 0;
-    }
+    border: var(--post-notice-border);
+    border-radius: 3px;
 
     .resolved {
       margin-left: 0.5em;
       font-weight: bold;
     }
 
-    &.notice-parent {
-      border-color: var(--post-parent-notice-border-color);
-      background: var(--post-parent-notice-background);
-    }
-
-    &.notice-child {
-      border-color: var(--post-child-notice-border-color);
-      background: var(--post-child-notice-background);
-    }
-
-    &.notice-pending {
-      border-color: var(--post-pending-notice-border-color);
-      background: var(--post-pending-notice-background);
-    }
-
-    &.notice-flagged {
-      border-color: var(--post-flagged-notice-border-color);
-      background: var(--post-flagged-notice-background);
-    }
-
-    &.notice-deleted {
-      border-color: var(--post-deleted-notice-border-color);
-      background: var(--post-deleted-notice-background);
-    }
-
-    &.notice-appealed {
-      border-color: var(--post-appealed-notice-border-color);
-      background: var(--post-appealed-notice-background);
-    }
-
-    &.notice-resized {
-      border-color: var(--post-resized-notice-border-color);
-      background: var(--post-resized-notice-background);
-    }
-  }
-
-  div.nav-notice {
-    padding: 0.5em;
-    margin: 1em 0;
-    background: var(--post-nav-notice-background);
-    border: var(--post-nav-notice-border);
-    position: relative;
-
-    p {
-      margin: 0;
-      text-align: center;
-    }
+    &.post-notice-parent { background: var(--post-parent-notice-background); }
+    &.post-notice-child { background: var(--post-child-notice-background); }
+    &.post-notice-pending { background: var(--post-pending-notice-background); }
+    &.post-notice-flagged { background: var(--post-flagged-notice-background); }
+    &.post-notice-banned { background: var(--post-banned-notice-background); }
+    &.post-notice-deleted { background: var(--post-deleted-notice-background); }
+    &.post-notice-appealed { background: var(--post-appealed-notice-background); }
+    &.post-notice-resized { background: var(--post-resized-notice-background); }
+    &.post-notice-search { background: var(--post-search-notice-background); font-size: 1em; }
   }
 
   aside#sidebar #tag-list h2 {
@@ -414,10 +370,6 @@ div#c-posts {
           right: 0.5em;
           top: 0;
         }
-
-        &:hover {
-          background: var(--post-seq-nav-hover-background);
-        }
       }
     }
 
diff --git a/app/views/posts/partials/show/_nav_links.html.erb b/app/views/posts/partials/show/_nav_links.html.erb
index c2d7a56fc..62f8bf101 100644
--- a/app/views/posts/partials/show/_nav_links.html.erb
+++ b/app/views/posts/partials/show/_nav_links.html.erb
@@ -1,5 +1,5 @@
 <% if (position == "bottom" && CurrentUser.user.new_post_navigation_layout) || (position == "top" && !CurrentUser.user.new_post_navigation_layout) %>
-  <div id="nav-links" class="ui-corner-all nav-notice">
+  <div id="nav-links" class="post-notice post-notice-search">
     <% if post.presenter.has_sequential_navigation?(params) %>
       <%= render "posts/partials/show/search_seq", :post => post %>
     <% end %>
diff --git a/app/views/posts/partials/show/_notices.html.erb b/app/views/posts/partials/show/_notices.html.erb
index 343a1d481..8d2d334ab 100644
--- a/app/views/posts/partials/show/_notices.html.erb
+++ b/app/views/posts/partials/show/_notices.html.erb
@@ -1,5 +1,5 @@
 <% if post.is_flagged? && !post.is_deleted? && post.flags.any? %>
-  <div class="ui-corner-all ui-state-highlight notice notice-flagged">
+  <div class="post-notice post-notice-flagged">
     <p>This post was flagged for review (<%= link_to "learn more", wiki_pages_path(:title => "howto:flag") %>): </p>
 
     <%= post_flag_reasons(post) %>
@@ -7,13 +7,13 @@
 <% end %>
 
 <% if post.is_banned? %>
-  <div class="ui-corner-all ui-state-highlight notice notice-deleted">
+  <div class="post-notice post-notice-banned">
     The artist requested removal of this page
   </div>
 <% end %>
 
 <% if post.is_deleted? %>
-  <div class="ui-corner-all ui-state-highlight notice notice-deleted">
+  <div class="post-notice post-notice-deleted">
     <% if post.flags.any? %>
       <p>This post was deleted for the following reasons: </p>
       <%= post_flag_reasons(post) %>
@@ -30,7 +30,7 @@
 <% end %>
 
 <% if post.is_pending? || post.is_flagged? %>
-  <div class="ui-corner-all ui-state-highlight notice notice-pending" id="pending-approval-notice">
+  <div class="post-notice post-notice-pending">
     <% if post.is_pending? %>
       This post is pending approval. 
       (<%= link_to "learn more", wiki_pages_path(:title => "about:mod_queue") %>)
@@ -48,28 +48,28 @@
 <% end %>
 
 <% if (post.is_flagged? || post.is_deleted?) && post.appeals.any? %>
-  <div class="ui-corner-all ui-state-highlight notice notice-appealed">
+  <div class="post-notice post-notice-appealed">
     <p>This post was appealed:</p>
     <%= post_appeal_reasons(post) %>
   </div>
 <% end %>
 
 <% if post.parent_id && post.parent_exists? %>
-  <div class="ui-corner-all ui-state-highlight notice notice-child">
+  <div class="post-notice post-notice-child">
     <%= has_parent_message(post, @parent_post_set) %>
     <div id="has-parent-relationship-preview"><%= @parent_post_set.presenter.post_previews_html(self) %></div>
   </div>
 <% end %>
 
 <% if post.has_visible_children? %>
-  <div class="ui-corner-all ui-state-highlight notice notice-parent">
+  <div class="post-notice post-notice-parent">
     <%= has_children_message(post, @children_post_set) %>
     <div id="has-children-relationship-preview"><%= @children_post_set.presenter.post_previews_html(self) %></div>
   </div>
 <% end %>
 
 <% if post.visible? && post.has_large? && !post.is_ugoira? %>
-  <div class="ui-corner-all ui-state-highlight notice notice-resized" id="image-resize-notice" style="<%= CurrentUser.default_image_size == "original" ? "display: none;" : "" %>">
+  <div class="post-notice post-notice-resized" id="image-resize-notice" style="<%= CurrentUser.default_image_size == "original" ? "display: none;" : "" %>">
     <span>Resized to <%= number_to_percentage post.resize_percentage.floor, :precision => 0 %> of original (<%= link_to "view original", post.tagged_file_url, :id => "image-resize-link" %>)</span>
     <span style="display: none;">Loading...</span>
   </div>