change styling for flash messages (includes a new info style)

test plan:
 * Jenkins passes
 * spot test flash notifications
   (messages that appear at the top of a page)

Change-Id: Icdbf2199499987ac253291b14189385d2202b659
Reviewed-on: https://gerrit.instructure.com/24895
Tested-by: Jenkins <jenkins@instructure.com>
QA-Review: Matt Fairbourn <mfairbourn@instructure.com>
Reviewed-by: Ryan Florence <ryanf@instructure.com>
Product-Review: Mark Severson <markse@instructure.com>

app/coffeescripts/jquery.rails_flash_notifications.coffee

@@ -20,7 +20,7 @@ define [
 
   flashBox = (type, content, timeout, cssOptions = {}) ->
     $node = $("""
-      <li class="ui-state-#{type}" role="alert">
+      <li class="ic-flash-#{type}" role="alert">
         <i></i>
         #{content}
         <a href="#" class="close_link icon-end">#{I18n.t("close", "Close")}</a>

app/controllers/application_controller.rb

@@ -1504,13 +1504,16 @@ class ApplicationController < ActionController::Base
         notices << {:type => 'warning', :content => unsupported_browser, :classes => 'unsupported_browser'} 
       end
       if error = flash.delete(:error)
-        notices << {:type => 'error', :content => error}
+        notices << {:type => 'error', :content => error, :icon => 'warning'}
       end
       if warning = flash.delete(:warning)
-        notices << {:type => 'warning', :content => warning}
+        notices << {:type => 'warning', :content => warning, :icon => 'warning'}
+      end
+      if info = flash.delete(:info)
+        notices << {:type => 'info', :content => info, :icon => 'info'}
       end
       if notice = (flash[:html_notice] ? flash.delete(:html_notice).html_safe : flash.delete(:notice))
-        notices << {:type => 'success', :content => notice}
+        notices << {:type => 'success', :content => notice, :icon => 'check'}
       end
       notices
     end

app/stylesheets/g_instructure.sass

@@ -38,9 +38,9 @@
   list-style: none
   margin: 0
   padding: 0
-  li, .ui-effects-wrapper
+  li:not(.ic-flash-info, .ic-flash-success, .ic-flash-warning, .ic-flash-error), .ui-effects-wrapper
     margin: 0 auto !important
-  li
+  li:not(.ic-flash-info, .ic-flash-success, .ic-flash-warning, .ic-flash-error)
     box-shadow: 0 1px 1px rgba(0,0,0,0.25)
     border-bottom-color: rgba(0,0,0,0.5)
     padding: 4px 40px 4px 8px

app/stylesheets/utilities/_alerts.scss

@@ -24,4 +24,90 @@
 </p>
 ```
 
-*/
+```html
+<p>
+  <div class="ic-flash-info">
+    Info: Sample flash notice style.
+  </div>
+</p>
+<p>
+  <div class="ic-flash-success">
+    Success: Sample flash notice style.
+  </div>
+</p>
+<p>
+  <div class="ic-flash-warning">
+    Warning: Sample flash notice style.
+  </div>
+</p>
+<p>
+  <div class="ic-flash-error">
+    Error: Sample flash notice style.
+  </div>
+</p>
+```
+
+*/
+
+.ic-flash-info, .ic-flash-success, .ic-flash-warning, .ic-flash-error {
+  position: relative;
+
+  color: #ffffff;
+  font-weight: bold;
+
+  padding: 4px 40px 4px 8px;
+  margin: 0 auto;
+  width: 475px;
+  min-height: 20px;
+  z-index: 2;
+  zoom: 1;
+  vertical-align: middle;
+  text-align: center;
+
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
+  border-bottom-color: rgba(0, 0, 0, 0.5);
+
+  a {
+    text-decoration: underline;
+    color: inherit;
+  }
+  a.close_link {
+    position: absolute;
+    right: 10px;
+    top: 50%;
+    width: 20px;
+    height: 20px;
+    overflow: hidden;
+    margin-top: -11px;
+    color: white;
+    text-decoration: none;
+  }
+  &.no_close a.close_link {
+    display: none;
+  }
+
+  i {
+    height: 20px;
+    margin-right: 2px;
+  }
+
+  &.ic-flash-static {
+    width: auto;
+  }
+}
+
+.ic-flash-info {
+  background-color: #3a87ad;
+}
+
+.ic-flash-success {
+  background-color: #468847;
+}
+
+.ic-flash-warning {
+  background-color: #f9a42b;
+}
+
+.ic-flash-error {
+  background-color: #b94a48;
+}

app/views/shared/_flash_notice.html.erb

@@ -1,5 +1,5 @@
-<li class="static_message ui-state-<%= flash_notice[:type] || 'warning' %> <%= flash_notice[:size] %> <%= flash_notice[:classes] %>" data-buffer-index="<%= flash_notice_counter %>">
-  <i></i>
+<li class="ic-flash-static ic-flash-<%= flash_notice[:type] || 'warning' %> <%= flash_notice[:size] %> <%= flash_notice[:classes] %>" data-buffer-index="<%= flash_notice_counter %>">
+  <% if flash_notice[:icon] %><i class="icon-<%= flash_notice[:icon] %>"></i><% end %>
   <%= flash_notice[:content] %>
   <a href='#' class='icon-end close_link'><%= t "close", "Close" %></a>
 </li>

spec/selenium/common.rb

@@ -866,25 +866,26 @@ shared_examples_for "all selenium tests" do
     temp_file
   end
 
-  def assert_flash_notice_message(okay_message_regex)
-    keep_trying_until do
-      text = ff("#flash_message_holder .ui-state-success").map(&:text).join("\n") rescue ''
-      text =~ okay_message_regex
+  def flash_message_present?(type=:warning, message_regex=nil)
+    messages = ff("#flash_message_holder .ic-flash-#{type.to_s}")
+    return false if messages.length == 0
+    if message_regex
+      text = messages.map(&:text).join('\n')
+      return !!text.match(message_regex)
     end
+    return true
+  end
+
+  def assert_flash_notice_message(okay_message_regex)
+    keep_trying_until { flash_message_present?(:success, okay_message_regex) }
   end
 
   def assert_flash_warning_message(warn_message_regex)
-    keep_trying_until do
-      text = ff("#flash_message_holder .ui-state-warning").map(&:text).join("\n") rescue ''
-      text =~ warn_message_regex
-    end
+    keep_trying_until { flash_message_present?(:warning, warn_message_regex) }
   end
 
   def assert_flash_error_message(fail_message_regex)
-    keep_trying_until do
-      text = ff("#flash_message_holder .ui-state-error").map(&:text).join("\n") rescue ''
-      text =~ fail_message_regex
-    end
+    keep_trying_until { flash_message_present?(:error, fail_message_regex) }
   end
 
   def assert_error_box(selector)

spec/selenium/courses_spec.rb

@@ -137,7 +137,7 @@ describe "courses" do
       # Test that the page loads properly the first time.
       get "/courses/#{@course.id}/users"
       wait_for_ajaximations
-      ff('.ui-state-error').length.should == 0
+      flash_message_present?(:error).should be_false
       ff('.roster .rosterUser').length.should == 50
     end
 

spec/selenium/gradebook2_grade_edit_spec.rb

@@ -278,7 +278,7 @@ describe "edititing grades" do
     wait_for_ajaximations
     edit_grade(f('#gradebook_grid [row="0"] .l0'), 0)
     keep_trying_until do
-      f('.ui-state-error').text.should match(/refresh/)
+      flash_message_present?(:error, /refresh/).should be_true
     end
   end
 end

spec/selenium/gradebook2_spec.rb

@@ -437,7 +437,7 @@ describe "gradebook2" do
                           :membership_type => 'CustomAdmin')
 
       get "/courses/#{@course.id}/gradebook2"
-      ff('.ui-state-error').count.should == 0
+      flash_message_present?(:error).should be_false
     end
 
     it "should display for users with only :manage_grades permissions" do
@@ -451,7 +451,7 @@ describe "gradebook2" do
                           :membership_type => 'CustomAdmin')
 
       get "/courses/#{@course.id}/gradebook2"
-      ff('.ui-state-error').count.should == 0
+      flash_message_present?(:error).should be_false
     end
 
     it "should include student view student for grading" do

spec/selenium/help_dialog_spec.rb

@@ -18,7 +18,7 @@ describe "help dialog" do
       driver.execute_script("window.INST.browser = {ie: true, version: 8}")
       f('#footer .help_dialog_trigger').click
       wait_for_ajaximations
-      element_exists(".ui-state-error").should be_false
+      flash_message_present?(:error).should be_false
     end
   end
 

spec/selenium/helpers/files_common.rb

@@ -61,7 +61,7 @@ def unzip_from_form_to_folder()
       job = Delayed::Job.order(:id).last
       job.tag.should == 'ZipFileImport#process_without_send_later'
       run_job(job)
-      upload_file(true) if refresh != true && f("#flash_message_holder .ui-state-error").present?
+      upload_file(true) if refresh != true && flash_message_present?(:error)
       zfi
     end
 

spec/selenium/student_submissions_spec.rb

@@ -88,7 +88,7 @@ describe "submissions" do
       wait_for_ajaximations
       f('#submit_file_button').click
       wait_for_ajaximations
-      f('#flash_message_holder .ui-state-error').should be_displayed
+      flash_message_present?(:error).should be_true
 
       # navigate off the page and dismiss the alert box to avoid problems
       # with other selenium tests

spec/selenium/users_spec.rb

@@ -164,28 +164,28 @@ describe "users" do
 
     it "should show an error if the user id entered is the current users" do
       get "/users/#{@student_1.id}/admin_merge"
-      assert_flash_error_message /\A\z/
+      flash_message_present?(:error).should be_false
       f('#manual_user_id').send_keys(@student_1.id)
       expect_new_page_load { f('button[type="submit"]').click }
       wait_for_ajaximations
-      assert_flash_error_message /You can't merge an account with itself./
+      flash_message_present?(:error, /You can't merge an account with itself./).should be_true
     end
 
     it "should show an error if invalid text is entered in the id box" do
       get "/users/#{@student_1.id}/admin_merge"
-      assert_flash_error_message /\A\z/
+      flash_message_present?(:error).should be_false
       f('#manual_user_id').send_keys("azxcvbytre34567uijmm23456yhj")
       expect_new_page_load { f('button[type="submit"]').click }
       wait_for_ajaximations
-      assert_flash_error_message /No active user with that ID was found./
+      flash_message_present?(:error, /No active user with that ID was found./).should be_true
     end
 
     it "should show an error if the user id doesnt exist" do
       get "/users/#{@student_1.id}/admin_merge"
-      assert_flash_error_message /\A\z/
+      flash_message_present?(:error).should be_false
       f('#manual_user_id').send_keys(1234567809)
       expect_new_page_load { f('button[type="submit"]').click }
-      assert_flash_error_message /No active user with that ID was found./
+      flash_message_present?(:error, /No active user with that ID was found./).should be_true
     end
   end