Adds styles for organizations

app/assets/stylesheets/admin.scss

@@ -149,6 +149,20 @@ body.admin {
   }
 }
 
+.verified {
+  color: $check;
+}
+
+.verified a {
+  border-bottom: 1px dotted $check;
+  color: $check;
+  font-size: rem-calc(12);
+}
+
+.rejected {
+  color: #F04124;
+}
+
 .level {
   font-size: rem-calc(12);
 }

app/assets/stylesheets/participacion.scss

@@ -13,6 +13,7 @@
 // 11. Filters
 // 12. Official levels
 // 13. Pagination
+// 14. Tables
 //
 
 // 01. Variables
@@ -126,6 +127,29 @@ h1, h2, h3, h4, h5, h6 {
   }
 }
 
+.sub-nav {
+  background-color: #f2f2f2;
+  border-radius: rem-calc(3);
+  padding: rem-calc(10) rem-calc(10) rem-calc(10) 0;
+  margin: rem-calc(12) 0;
+}
+
+.sub-nav dt, .sub-nav dd, .sub-nav li {
+
+  &.active {
+    background: #008CBA;
+    border-radius: rem-calc(3);
+    color: white;
+    cursor: default;
+    font-weight: normal;
+    padding: 0.16667rem 0.88889rem;
+
+    a:hover {
+      color: #737373;
+    }
+  }
+}
+
 // 04. Header
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
@@ -762,3 +786,30 @@ ul.pagination {
     color: $text-medium;
   }
 }
+
+// 14. Tables
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  width: 100%;
+
+  tr {
+
+    td {
+      line-height: $line-height;
+      padding: rem-calc(12) rem-calc(6);
+    }
+
+    &:nth-child(odd) {
+      background: #F0F2F6;
+    }
+  }
+
+  .button {
+    margin: 0;
+  }
+}
+
+

app/views/admin/organizations/index.html.erb

@@ -1,17 +1,17 @@
 <h2><%= t('admin.organizations.index.title') %></h2>
 
-<p>
+<dl class="sub-nav">
-  <%= t('admin.organizations.index.filter') %>:
+  <dt><%= t('admin.organizations.index.filter') %>:</dt>
 
   <% @valid_filters.each do |filter| %>
     <% if @filter == filter %>
-      <%= t("admin.organizations.index.filters.#{filter}") %>
+      <dd class="active"><%= t("admin.organizations.index.filters.#{filter}") %></dd>
     <% else %>
-      <%= link_to t("admin.organizations.index.filters.#{filter}"),
+      <dd><%= link_to t("admin.organizations.index.filters.#{filter}"),
-        admin_organizations_path(filter: filter) %>
+        admin_organizations_path(filter: filter) %></dd>
     <% end %>
   <% end %>
-</p>
+</dl>
 
 <h3><%= page_entries_info @organizations %></h3>
 
@@ -22,22 +22,29 @@
     <td><%= organization.email %></td>
     <td><%= organization.phone_number %></td>
     <% if organization.verified? %>
-      <td><%= t('admin.organizations.index.verified') %></td>
+      <td class="verified">
-    <% end %>
+        <i class="icon-check"></i>
-    <% if can? :verify, organization %>
+        <%= t('admin.organizations.index.verified') %>
-      <td><%= link_to t('admin.organizations.index.verify'),
-                verify_admin_organization_path(organization, request.query_parameters),
-                method: :put
-          %>
       </td>
     <% end %>
     <% if organization.rejected? %>
-      <td><%= t('admin.organizations.index.rejected') %></td>
+      <td class="rejected">
+        <i class="icon-x"></i>
+        <%= t('admin.organizations.index.rejected') %>
+      </td>
+    <% end %>
+    <% if can? :verify, organization %>
+      <td>
+        <%= link_to t('admin.organizations.index.verify'),
+                verify_admin_organization_path(organization, request.query_parameters),
+                method: :put, class: "button radius tiny success"
+        %>
+      </td>
     <% end %>
     <% if can? :reject, organization %>
       <td><%= link_to t('admin.organizations.index.reject'),
                 reject_admin_organization_path(organization, request.query_parameters),
-                method: :put
+                method: :put, class: "button radius tiny alert"
           %>
       </td>
     <% end %>