3 files changed, 26 insertions, 74 deletions
diff --git a/app/assets/images/widget-base.png b/app/assets/images/widget-base.png
index c6d043817..872244543 100644
--- a/app/assets/images/widget-base.png
+++ b/app/assets/images/widget-base.png
diff --git a/app/assets/stylesheets/widget.css b/app/assets/stylesheets/widget.css
index be742bce3..29d9bb01e 100644
--- a/app/assets/stylesheets/widget.css
+++ b/app/assets/stylesheets/widget.css
@@ -1,98 +1,50 @@
-body {
-    background: steelblue;
-}
-#alawidget-base {
+.alaveteli-widget {
     width: 320px;
     height: 215px;
+    border: 1px solid;
     background: url("widget-base.png") no-repeat;
-    font-family: 'Open Sans', sans-serif;
-    font-weight: 600;
-    font-size: 14px;
     position: relative;
 }
-#alawidget-title {
+
+.alaveteli-widget__title {
     position: absolute;
     top: 24px;
     left: 22px;
     width: 123px;
     height: 80px;
     overflow: hidden;
-    color: #5a5a5a;
-}
-#alawidget-title a {
-    text-decoration: none;
-    color: #5a5a5a;
 }
-#alawidget-status {
+
+.alaveteli-widget__status {
     position: absolute;
     top: 113px;
     left: 27px;
-    width: 1184x;
-    font-weight: 800;
-    font-size: 12px;
-}
-#alawidget-status.waiting_response,
-#alawidget-status.waiting_response_overdue,
-#alawidget-status.waiting_response_very_overdue {
-    color: #750096;
-}
-#alawidget-status.not_held {
-    color: #830016;
-}
-#alawidget-status.rejected {
-    color: #e62590;
-}
-#alawidget-status.successful {
-    color: #76b12c;
 }
-#alawidget-status.partially_successful {
-    color: #559798;
-}
-#alawidget-status.waiting_clarification {
-    color: #978f0b;
-}
-#alawidget-status.gone_postal {
-    color: #959191;
-}
-#alawidget-status.internal_review {
-    color: #7da49b;
-}
-#alawidget-status.error_message {
-    color: #e57f12;
-}
-#alawidget-status.user_withdrawn {
-    color: #5b8048;
-}
-#alawidget-left {
+
+.alaveteli-widget__left {
     position: absolute;
     width: 145px;
 }
-#alawidget-count {
+
+.alaveteli-widget__count {
     position: absolute;
     left: 176px;
     top: 22px;
     width: 100px;
-    color: white;
-    font-weight: 800;
     font-size: 55px;
     text-align: center;
 }
-#alawidget-bottom a {
+
+.alaveteli-widget__bottom a {
     text-decoration: none;
 }
-#alawidget-button {
+
+.alaveteli-widget__button {
     position: absolute;
     top: 173px;
     left: 8px;
     width: 151px;
     height: 25px;
     padding-top: 3px;
-    background: #009699;
-    color: white;
     text-align: center;
-    box-shadow: 0 0 6px 1px #009699;
-}
-#alawidget-button.down {
-    background: #91b85d;
-    box-shadow: 0 0 6px 1px #91b85d;
 }
diff --git a/app/views/widgets/show.html.erb b/app/views/widgets/show.html.erb
index 4de1eb446..2d3d901da 100644
--- a/app/views/widgets/show.html.erb
+++ b/app/views/widgets/show.html.erb
@@ -3,13 +3,13 @@
   <link href='http://fonts.googleapis.com/css?family=Open+Sans:600,800' rel='stylesheet' type='text/css'>
 </head>
 <body>
-  <div id="alawidget-base">
-    <div id="alawidget-top">
-      <div id="alawidget-left">
-        <div id="alawidget-title">
+  <div class="alaveteli-widget">
+    <div class="alaveteli-widget__top">
+      <div class="alaveteli-widget__left">
+        <div class="alaveteli-widget__title">
           <%= link_to @info_request.title, request_path(@info_request), :target => "_top" %>
         </div>
-        <div id="alawidget-status" class="<%= @info_request.calculate_status %>">
+        <div class="alaveteli-widget__status <%= @info_request.calculate_status %>">
           <% if @info_request.awaiting_description %>
             <%= _('UNKNOWN STATUS') %>
           <% elsif @status == 'waiting_response' %>
@@ -47,7 +47,7 @@
           <% end %>
         </div>
       </div>
-      <div id="alawidget-count">
+      <div class="alaveteli-widget__count">
         <%= TrackThing.count(:all, :conditions => ["info_request_id = ?", @info_request.id]) + 1 + WidgetVote.count(:all, :conditions => ["info_request_id = ?", @info_request.id]) %>
       </div>
     </div>
@@ -56,27 +56,27 @@
         existing_track = TrackThing.find_existing(@user, @track_thing)
       end
     %>
-    <div id="alawidget-bottom">
+    <div class="alaveteli-widget__bottom">
       <% if @info_request.user && @info_request.user == @user %>
-        <div id="alawidget-button" class="down">
+        <div class="alaveteli-widget__button alaveteli-widget__button--down">
           <%= _('This is your request') %>
         </div>
       <% elsif existing_track %>
         <a href="<%= url_for :controller => 'track', :action => 'update', :track_id => existing_track.id, :track_medium => "delete", :r => request.fullpath %>">
-          <div id="alawidget-button" class="down">
-            <%= _('I also want to know!') %>
+          <div class="alaveteli-widget__button--down">
+            <%= _('You are tracking this request') %>
           </div>
         </a>
       <% else %>
         <% if @user %>
           <a href="<%= url_for do_track_path(@track_thing) %>" target="_blank">
-            <div id="alawidget-button">
+            <div class="alaveteli-widget__button">
               <%= _('I also want to know!') %>
             </div>
           </a>
         <% else %>
           <%= form_tag request_widget_url(@info_request), :method => 'put', :target => '_blank' do %>
-            <%= submit_tag _('I also want to know!'), :id => "alawidget-button" %>
+            <%= submit_tag _('I also want to know!'), :class => 'alaveteli-widget__button' %>
           <% end %>
         <% end %>
       <% end %>