yum, tip styling

app/assets/javascripts/outfits/edit.js

@@ -1362,9 +1362,9 @@ View.PrankColorMessage = function(wardrobe) {
 
 View.Tips = function() {
   var wrapper = $('#tips');
-  var children = wrapper.children();
+  var tips = wrapper.find('li');
-  var index = Math.floor(Math.random() * children.length);
+  var index = Math.floor(Math.random() * tips.length);
-  children.eq(index).show();
+  tips.eq(index).show();
 }
 
 var userbar_sessions_link = $('#userbar a:last');

app/assets/stylesheets/outfits/_edit.sass

@@ -262,8 +262,19 @@ body.outfits-edit
     /* don't bounce the header around kthx */
     min-height: 180px
   #tips
+    padding-top: 1em
+
     li
+      +module
+      background-image: image-url("tip.png")
+      background-position: top left
+      background-repeat: no-repeat
       display: none
+      list-style: none
+      margin: 0 auto
+      padding-left: image-width("tip.png") + 12px
+      width: 400px
+
   #preview-search-advanced
     display: none
 

app/views/outfits/edit.html.haml

@@ -107,11 +107,12 @@
         #preview-search-form-no-results
           = t '.search.no_results_html', :query => content_tag(:span)
         %ul#preview-search-results
-        %ul#tips
+        #tips
-          - WardrobeTip.by_index.each do |tip|
+          %ul
-            %li
+            - WardrobeTip.by_index.each do |tip|
-              %h3 Did you know?
+              %li
-              %div= md tip.body
+                %h3 Did you know?
+                %div= md tip.body
     %form#preview-search-advanced
       %header
         %h2= t '.search.advanced.header'