Add refills and refill-styled flashes

Unsuccessful updates were resulting in weird form spacing.

Changes:
- Add refills to Gemfile
- Replace `flashes` component with generated refills flashes component
- Apply refills class to existing `flashes` partial
- Update `#have_flash` matcher to reflect new class name

Gemfile

@@ -13,6 +13,7 @@ gem "redcarpet"
 gem "unicorn"
 
 group :development do
+  gem "refills"
   gem "web-console", ">= 2.1.3"
 end
 

Gemfile.lock

@@ -211,6 +211,7 @@ GEM
     rake (11.2.2)
     rdiscount (1.6.8)
     redcarpet (3.3.3)
+    refills (0.2.0)
     rspec-core (3.5.1)
       rspec-support (~> 3.5.0)
     rspec-expectations (3.5.0)
@@ -308,6 +309,7 @@ DEPENDENCIES
   rack-timeout
   rails_stdout_logging
   redcarpet
+  refills
   rspec-rails (~> 3.5.0)
   shoulda-matchers (~> 2.8.0)
   timecop
@@ -317,4 +319,4 @@ DEPENDENCIES
   webmock
 
 BUNDLED WITH
-   1.13.7
+   1.14.4

app/assets/stylesheets/administrate/components/_flashes.scss

@@ -1,15 +1,27 @@
-@each $flash-type, $flash-color in $flash-colors {
-  .flash--#{$flash-type} {
-    background-color: $flash-color;
-    color: darken($flash-color, 60%);
-    padding: $small-spacing $base-spacing;
+$base-spacing: 1.5em !default;
+$flashes: (
+  "alert": #fff6bf,
+  "error": #fbe3e4,
+  "notice": #e5edf8,
+  "success": #e6efc2,
+) !default;
+
+@each $flash-type, $color in $flashes {
+  .flash-#{$flash-type} {
+    background-color: $color;
+    color: shade($color, 60%);
+    display: block;
+    margin-bottom: $base-spacing / 2;
+    padding: $base-spacing / 2;
+    text-align: center;
 
     a {
-      color: darken($flash-color, 70%);
+      color: shade($color, 70%);
+      text-decoration: underline;
 
       &:focus,
       &:hover {
-        color: darken($flash-color, 90%);
+        color: shade($color, 90%);
       }
     }
   }

app/views/administrate/application/_flashes.html.erb

@@ -14,7 +14,7 @@ This partial renders flash messages on every page.
 <% if flash.any? %>
   <div class="flashes">
     <% flash.each do |key, value| -%>
-      <div class="flash flash--<%= key %>"><%= value %></div>
+      <div class="flash flash-<%= key %>"><%= value %></div>
     <% end -%>
   </div>
 <% end %>

app/views/administrate/application/_form.html.erb

@@ -24,7 +24,7 @@ and renders all form fields for a resource's editable attributes.
 
       <ul>
         <% page.resource.errors.full_messages.each do |message| %>
-          <li><%= message %></li>
+          <li class="flash-error"><%= message %></li>
         <% end %>
       </ul>
     </div>

spec/features/edit_page_spec.rb

@@ -22,8 +22,8 @@
 
     visit edit_admin_customer_path(customer)
 
-    expect(page).to have_content("Name")
-    expect(page).to have_content("Email")
+    expect(page).to have_text("Name")
+    expect(page).to have_text("Email")
   end
 
   it "displays boolean values as check boxes" do
@@ -33,7 +33,7 @@
     check "Email subscriber"
     click_on "Update Customer"
 
-    expect(page).to have_content("true")
+    expect(page).to have_text("true")
   end
 
   it "displays selectable strings as dropdowns", :js do
@@ -43,7 +43,35 @@
     select "vip", from: "Kind"
     click_on "Update Customer"
 
-    expect(page).to have_content("KIND")
-    expect(page).to have_content("vip")
+    expect(page).to have_text("KIND")
+    expect(page).to have_text("vip")
+  end
+
+  it "displays an error when the submitted form is invalid" do
+    customer = create(:customer)
+
+    visit edit_admin_customer_path(customer)
+    fill_in "Name", with: ""
+    click_on "Update Customer"
+
+    expect(page).to have_css(
+      "#error_explanation ul li.flash-error",
+      text: "Name can't be blank",
+    )
+  end
+
+  it "displays a success message for successful updates" do
+    new_name = "Hyper"
+    new_email = "example@example.com"
+    customer = create(:customer)
+
+    visit edit_admin_customer_path(customer)
+    fill_in "Name", with: new_name
+    fill_in "Email", with: new_email
+    click_on "Update Customer"
+
+    expect(page).to have_text(new_name)
+    expect(page).to have_text(new_email)
+    expect(page).to have_flash("Customer was successfully updated.")
   end
 end

spec/support/have_flash_matcher.rb

@@ -1,5 +1,5 @@
 module Features
   def have_flash(text)
-    have_css(".flash--notice", text: text)
+    have_css(".flash-notice", text: text)
   end
 end