css: refactor notice box css.

* Remove .ui-corner-all, .ui-state-highlight, .ui-state-error classes
  from notice boxes.
* Use .notice, .notice-info, .notice-error classes instead.
* Replace <p> elements in notices with <div>'s so that we don't have to
  work around the `margin-bottom: 1em` from <p> elements.
* Replace <h1> elements in notices with <h2>.
* Standardize info notices to use the same shade of light yellow in the
  light theme.

app/javascript/src/javascripts/utility.js

@@ -19,7 +19,7 @@ Utility.test_max_width = function(width) {
 Utility.notice_timeout_id = undefined;
 
 Utility.notice = function(msg, permanent) {
-  $('#notice').addClass("ui-state-highlight").removeClass("ui-state-error").fadeIn("fast").children("span").html(msg);
+  $('#notice').addClass("notice-info").removeClass("notice-error").fadeIn("fast").children("span").html(msg);
 
   if (Utility.notice_timeout_id !== undefined) {
     clearTimeout(Utility.notice_timeout_id)
@@ -33,7 +33,7 @@ Utility.notice = function(msg, permanent) {
 }
 
 Utility.error = function(msg) {
-  $('#notice').removeClass("ui-state-highlight").addClass("ui-state-error").fadeIn("fast").children("span").html(msg);
+  $('#notice').removeClass("notice-info").addClass("notice-error").fadeIn("fast").children("span").html(msg);
 
   if (Utility.notice_timeout_id !== undefined) {
     clearTimeout(Utility.notice_timeout_id)

app/javascript/src/styles/base/040_colors.css

@@ -9,7 +9,7 @@
 
   --error-background-color: hsl(0, 100%, 95%); /* light red */
   --success-background-color: hsl(120, 100%, 95%); /* light green */
-  --warning-background-color: hsl(50, 100%, 95%); /* light yellow */
+  --warning-background-color: hsl(50, 100%, 93%); /* light yellow */
 
   --subnav-menu-background-color: #F5F5FF;
 
@@ -165,23 +165,18 @@
   --bulk-update-request-approved-color: green;
   --bulk-update-request-failed-color: red;
 
-  --notice-text-color: var(--text-color);
-  --notice-background: #FFFBBF;
-  --notice-border: 1px solid #CCC999;
-
   --sign-in-link-color: #E00;
   --footer-border: 1px solid #EEE;
 
   --jquery-ui-widget-content-background: var(--body-background-color);
   --jquery-ui-widget-content-text-color: var(--text-color);
-  --jquery-ui-state-error-background: #FDDFDE;
-  --jquery-ui-state-error-border: 1px solid #FBC7C6;
-  --jquery-ui-state-error-text-color: var(--text-color);
-  --jquery-ui-state-highlight-background: #FDF5D9;
-  --jquery-ui-state-highlight-border: 1px solid #FCEEC1;
-  --jquery-ui-state-highlight-text-color: var(--text-color);
   --jquery-ui-dialog-box-shadow: 2px 2px 1px grey;
 
+  --notice-error-background: var(--error-background-color);
+  --notice-error-border: 1px solid #FBC7C6;
+  --notice-info-background: var(--warning-background-color);
+  --notice-info-border: 1px solid #CCC999;
+
   --dtext-blockquote-border: 1px solid #666;
   --dtext-blockquote-background: #EEE;
   --dtext-code-background: #EEE;
@@ -351,12 +346,6 @@ body[data-user-theme="dark"] {
   --jquery-ui-widget-content-text-color: var(--text-color);
   --jquery-ui-widget-content-background: var(--grey-2);
   --jquery-ui-dialog-box-shadow: 0px 0px 8px var(--grey-1);
-  --jquery-ui-state-error-background: var(--red-0);
-  --jquery-ui-state-error-border: 1px solid var(--grey-4);
-  --jquery-ui-state-error-text-color: var(--text-color);
-  --jquery-ui-state-highlight-background: var(--blue-0);
-  --jquery-ui-state-highlight-border: 1px solid var(--blue-1);
-  --jquery-ui-state-highlight-text-color: var(--text-color);
 
   --keyboard-shortcut-color: var(--text-color);
   --keyboard-shortcut-background-color: var(--grey-2);
@@ -381,9 +370,10 @@ body[data-user-theme="dark"] {
   --note-highlight-color: var(--blue-1);
   --note-tn-color: var(--muted-text-color);
 
-  --notice-text-color: var(--grey-5);
+  --notice-error-background: var(--red-0);
-  --notice-background: var(--blue-0);
+  --notice-error-border: 1px solid var(--grey-4);
-  --notice-border: 1px solid var(--blue-1);
+  --notice-info-background: var(--blue-0);
+  --notice-info-border: 1px solid var(--blue-1);
 
   --paginator-arrow-background-color: white;
   --paginator-arrow-color: var(--link-color);

app/javascript/src/styles/common/main_layout.scss

@@ -5,21 +5,6 @@ div#page {
   margin: 0 20px;
   padding: 0 10px;
 
-  div#upgrade-account-notice, div#ban-notice, div#dmail-notice, div#mod-notice {
-    margin: 1em 0;
-    padding: 1em;
-    text-align: center;
-    position: relative;
-
-    h1 {
-      font-size: $h2_size;
-    }
-
-    p {
-      margin: 0;
-    }
-  }
-
   aside#sidebar {
     width: 15em;
     float: left;

app/javascript/src/styles/common/notices.scss

@@ -9,21 +9,42 @@ div.error-messages {
 }
 
 div#notice {
-  padding: 0.25em;
+  padding: 0.5em;
   position: fixed;
-  top: 0.5em;
+  top: 1em;
   left: 25%;
   width: 50%;
   z-index: 100;
 
-  &:not(.ui-state-error) {
+  a#close-notice-link {
-    background: var(--notice-background);
+    position: absolute;
-    border: var(--notice-border);
+    right: 1em;
-    color: var(--notice-text-color);
   }
 }
 
-a#close-notice-link {
+.notice {
-  position: absolute;
+  border-radius: 3px;
-  right: 1em;
+}
+
+.notice-small {
+  font-size: 0.8em;
+  margin: 0.5em 0;
+  padding: 0.5em 1em;
+}
+
+.notice-large {
+  margin: 1em 0;
+  padding: 1em;
+  text-align: center;
+  position: relative;
+}
+
+.notice-info {
+  background: var(--notice-info-background);
+  border: var(--notice-info-border);
+}
+
+.notice-error {
+  background: var(--notice-error-background);
+  border: var(--notice-error-border);
 }

app/javascript/src/styles/specific/posts.scss

@@ -232,12 +232,10 @@ div#c-posts {
   }
 
   .post-notice {
-    font-size: 0.8em;
+    margin: 0.5em 0;
     padding: 0.5em;
-    margin-bottom: 0.5em;
     overflow: hidden;
     border: var(--post-notice-border);
-    border-radius: 3px;
 
     ul.post-flag-reasons, ul.post-appeal-reasons {
       list-style: inside;
@@ -260,7 +258,7 @@ div#c-posts {
     &.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; }
+    &.post-notice-search { background: var(--post-search-notice-background); }
   }
 
   aside#sidebar #tag-list h2 {

app/javascript/src/styles/specific/wiki_pages.scss

@@ -1,13 +1,3 @@
-div#c-wiki-pages {
-  #a-new {
-    div.notice {
-      font-size: 0.8em;
-      padding: 1em;
-      margin: 1em 0;
-    }
-  }
-}
-
 .wiki-other-name {
   background-color: var(--wiki-page-other-name-background-color);
   padding: 3px;

app/views/layouts/default.html.erb

@@ -119,7 +119,7 @@
   </header>
 
   <div id="page">
-    <% if !CurrentUser.is_anonymous? && !CurrentUser.is_gold? && cookies[:hide_upgrade_account_notice].blank? && params[:action] != "upgrade_information" %>
+    <% unless !CurrentUser.is_anonymous? && !CurrentUser.is_gold? && cookies[:hide_upgrade_account_notice].blank? && params[:action] != "upgrade_information" %>
       <%= render "users/upgrade_notice" %>
     <% end %>
 
@@ -135,7 +135,7 @@
       <%= render "moderator/post/queues/notice" %>
     <% end %>
 
-    <div class="ui-corner-all ui-state-highlight" id="notice" style="<%= "display: none;" unless flash[:notice] %>">
+    <div class="notice notice-info" id="notice" style="<%= "display: none;" unless flash[:notice] %>">
       <span class="prose"><%= format_text(flash[:notice], inline: true) %>.</span>
       <a href="#" id="close-notice-link">close</a>
     </div>

app/views/moderator/post/queues/_notice.html.erb

@@ -1,5 +1,5 @@
 <% if show_moderation_notice? %>
-  <div class="ui-corner-all ui-state-highlight" id="mod-notice">
+  <div class="notice notice-info notice-large" id="mod-notice">
     <span>You haven't moderated any posts in awhile. Consider checking out the <%= link_to "queue", random_moderator_post_queue_path(:return_to => request.original_url) %>.</span>
   </div>
 <% end %>

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="post-notice post-notice-search">
+  <div id="nav-links" class="notice post-notice post-notice-search">
     <% if post.presenter.has_sequential_navigation?(params) %>
       <%= render "posts/partials/show/search_seq", :post => post %>
     <% end %>

app/views/posts/partials/show/_notices.html.erb

@@ -1,5 +1,5 @@
 <% if post.is_flagged? && !post.is_deleted? && post.flags.any? %>
-  <div class="post-notice post-notice-flagged">
+  <div class="notice notice-small post-notice post-notice-flagged">
     <p>This post was flagged for review (<%= link_to "learn more", wiki_pages_path(:title => "howto:flag") %>): </p>
 
     <%= render "post_flags/reasons", flags: post.flags %>
@@ -7,13 +7,13 @@
 <% end %>
 
 <% if post.is_banned? %>
-  <div class="post-notice post-notice-banned">
+  <div class="notice notice-small post-notice post-notice-banned">
     The artist requested removal of this page
   </div>
 <% end %>
 
 <% if post.is_deleted? %>
-  <div class="post-notice post-notice-deleted">
+  <div class="notice notice-small post-notice post-notice-deleted">
     <% if post.flags.any? %>
       <p>This post was deleted for the following reasons: </p>
       <%= render "post_flags/reasons", flags: post.flags %>
@@ -30,7 +30,7 @@
 <% end %>
 
 <% if post.is_pending? || post.is_flagged? %>
-  <div class="post-notice post-notice-pending">
+  <div class="notice notice-small 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="post-notice post-notice-appealed">
+  <div class="notice notice-small post-notice post-notice-appealed">
     <p>This post was appealed:</p>
     <%= render "post_appeals/reasons", appeals: post.appeals %>
   </div>
 <% end %>
 
 <% if post.parent_id && post.parent_exists? %>
-  <div class="post-notice post-notice-child">
+  <div class="notice notice-small 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="post-notice post-notice-parent">
+  <div class="notice notice-small 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="post-notice post-notice-resized" id="image-resize-notice" style="<%= CurrentUser.default_image_size == "original" ? "display: none;" : "" %>">
+  <div class="notice notice-small 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>

app/views/users/_ban_notice.html.erb

@@ -1,5 +1,5 @@
-<div class="ui-corner-all ui-state-error" id="ban-notice">
+<div class="notice notice-error notice-large" id="ban-notice">
-  <h1>Your account has been temporarily banned</h1>
+  <h2>Your account has been temporarily banned</h2>
-  <p>Reason: <span class="prose"><%= format_text CurrentUser.user.recent_ban.reason, inline: true %></span></p>
+  <div>Reason: <span class="prose"><%= format_text CurrentUser.user.recent_ban.reason, inline: true %></span></div>
-  <p>Your ban will expire in <%= time_ago_in_words(CurrentUser.user.recent_ban.expires_at) %></p>
+  <div>Your ban will expire in <%= time_ago_in_words(CurrentUser.user.recent_ban.expires_at) %></div>
 </div>

app/views/users/_dmail_notice.html.erb

@@ -1,4 +1,4 @@
-<div class="ui-corner-all ui-state-highlight" id="dmail-notice" data-id="<%= CurrentUser.dmails.unread.first.id %>">
+<div class="notice notice-info notice-large" id="dmail-notice" data-id="<%= CurrentUser.dmails.unread.first.id %>">
-  <h1>You have <%= link_to "unread mail", dmails_path(:search => {:owner_id => CurrentUser.id, :to_id => CurrentUser.id}, :folder => "received") %>.</h1>
+  <h2>You have <%= link_to "unread mail", dmails_path(search: {owner_id: CurrentUser.id, to_id: CurrentUser.id}, folder: "received") %>.</h2>
-  <p><%= link_to "Close this", "#", :id => "hide-dmail-notice" %></p>
+  <div><%= link_to "Close this", "#", id: "hide-dmail-notice" %></div>
 </div>

app/views/users/_upgrade_notice.html.erb

@@ -1,4 +1,4 @@
-<div class="ui-corner-all ui-state-highlight" id="upgrade-account-notice">
+<div class="notice notice-info notice-large" id="upgrade-account-notice">
-  <h1><%= link_to "Upgrade your account for only $20!", new_user_upgrade_path, id: "goto-upgrade-account" %></h1>
+  <h2><%= link_to "Upgrade your account for only $20!", new_user_upgrade_path, id: "goto-upgrade-account" %></h2>
-  <p><%= link_to "No thanks", "#", :id => "hide-upgrade-account-notice" %></p>
+  <div><%= link_to "No thanks", "#", id: "hide-upgrade-account-notice" %></div>
 </div>

app/views/wiki_pages/new.html.erb

@@ -6,7 +6,7 @@
       <h1>New Wiki Page</h1>
 
       <% if @wiki_page.title.present? %>
-        <div class="ui-corner-all ui-state-highlight notice">
+        <div class="notice notice-info notice-small" id="new-wiki-page-notice">
           This wiki page does not yet exist. The form below will allow you to create a new page for <%= @wiki_page.title %>. It will act as an explanation on how to use the tag for other users on the site.
         </div>
       <% end %>