search styling

app/assets/javascripts/app/models/search_track.js.coffee

@@ -14,14 +14,16 @@ class SearchTrack extends Spine.Model
       }
       type: "post"
       success: (track) =>
-        $(".search_items").empty()
+        $(".search-alert").empty()
+        $(".search-alert").append "<p>Success! Added to your playlist</p>"
         Track.create
           id: track.id
           artist_name: track.artist_name,
           title: track.title,
           album_title: track.album_title
           { ajax: false }
       error: (data) =>
-        $(".search_items").prepend "<p style='color:red;'>Looks like that track is already in your playlist!</p>"
+        $(".search-alert").empty()
+        $(".search-alert").prepend "<p style='color:red;'>Looks like that track is already in your playlist!</p>"
 
 window.SearchTrack = SearchTrack

app/assets/stylesheets/custom.css.scss

@@ -73,6 +73,25 @@ ul.artist-items {
   }
 }
 
+.search-alert {
+  font-weight: bold;
+  color: green;
+}
+
+.btn-playlist {
+  font-weight: bold;
+  font-size: medium;
+  height: 50px;
+  width: 175px;
+  background-color: $unreal;
+  border-style: none;
+  border-radius: 2px;
+  &:hover {
+    background-color: $orange;
+    cursor: pointer;
+  }
+}
+
 .thumbnail {
   margin: auto;
   margin-bottom: 20px;

app/views/playlists/new.html.erb

@@ -2,8 +2,8 @@
   <div class="well span5 offset3 generator">
     <header class="welcome">
       <a href="#"><h1 class="center" id="logo">Party Time!</h1></a>
-      <h3>Social playlists.</h3>
-
+      <h3>Instant playlists.</h3>
+      <br>
       <ul><h4>Getting started is simple:</h3>
         <li>1. Pick up to five artists to set the mood for your party.</li>
         <li>2. We'll craft a playlist of 15 songs to get things started.</li>
@@ -31,14 +31,14 @@
           </li>
         </ul>
       </div>
-      <button class="btn btn-primary" id="recommend">Create My Playlist!</button>
+      <button class="btn-playlist" id="recommend">Create My Playlist!</button>
   	</div>
   </div>
   <div class="modal fade" id="loading">
     <div class="modal-header">
       <button type="button" class="close" data-dismiss="modal">×</button>
       <h3 class="center">Generating your playlist!</h3>
-      <h5 class="center">In the meantime...</h5>
+      <h5 class="center">In the meantime, here's a word from our sponsor:</h5>
     </div>
     <div class="modal-body" id="deal">
       <p></p>

app/views/playlists/show.html.erb

@@ -33,11 +33,12 @@
       </div>
     </div>
     <div class="search well">
-      <h3>Add some more tracks!</h3>
-      <form id='search_form'>
+      <h3 class="center">Add some more tracks!</h3>
+      <form id='search_form' class="center">
         <input type='text' id="query" placeholder='Bon Iver - Skinny Love' />
-        <input class="btn btn-primary" type='submit' value='Search' />
+        <input class="btn btn-info" type='submit' value='Search' />
       </form>
+      <div class="search-alert center"></div>
       <ul class="search_items">
       </ul>
     </div>