New Admin table styles

backend/app/assets/javascripts/spree/backend/templates/orders/details_adjustment_row.hbs

@@ -1,4 +1,4 @@
 <tr>
   <td><strong>{{ label }}:</strong></td>
-  <td class="total align-center"><span>{{ amount }}</span></td>
+  <td class="total"><span>{{ amount }}</span></td>
 </tr>

backend/app/assets/javascripts/spree/backend/templates/orders/line_item.hbs

@@ -14,19 +14,19 @@
     <strong>{{ t "sku" }}:</strong> {{ line_item.variant.sku }}
   </td>
 {{/if}}
-<td class="line-item-price align-center">
+<td class="line-item-price">
   {{ line_item.single_display_amount }}
 </td>
 {{#if editing}}
   <td class="line-item-qty-edit">
     <input type="number" name="quantity" value="{{ line_item.quantity }}" min="0" class="line_item_quantity" size="5">
   </td>
 {{else}}
-  <td class="line-item-qty-show align-center">
+  <td class="line-item-qty-show">
     {{ line_item.quantity }}
   </td>
 {{/if}}
-<td class="line-item-total align-center">
+<td class="line-item-total">
   {{ line_item.display_amount }}
 </td>
 <td class="cart-line-item-delete actions" data-hook="cart_line_item_delete">

backend/app/assets/javascripts/spree/backend/templates/stock_items/stock_location_stock_item.hbs

@@ -1,5 +1,5 @@
-<td class="align-center">{{stockLocationName}}</td>
-<td class="align-center">
+<td>{{stockLocationName}}</td>
+<td>
   <input id="backorderable-{{id}}"
          name="backorderable"
          type="checkbox"
@@ -8,7 +8,7 @@
          {{#if backorderable}} checked="checked" {{/if}}
    >
 </td>
-<td class="align-center">
+<td>
   {{#if editing}}
     <input class="fullwidth" name="count_on_hand" type="number" value="{{count_on_hand}}">
   {{else}}

backend/app/assets/javascripts/spree/backend/templates/stock_transfers/transfer_item.hbs

@@ -1,5 +1,5 @@
 <tr class='new-row' data-transfer-item-id="{{id}}">
-  <td class="align-center no-padding">
+  <td class="no-padding">
     <div class='variant-container' data-variant-id="{{variantId}}">
       <div class='variant-image'>
         {{> _image image=variantImage size="small" alt=variantName }}
@@ -18,7 +18,7 @@
       </div>
     </div>
   </td>
-  <td class="align-center">
+  <td>
     <table class='stock-variant-field-table'>
       {{#each variantOptions}}
         <tr>
@@ -28,7 +28,7 @@
       {{/each}}
     </table>
   </td>
-  <td class='align-center' id="number-update-{{id}}">
+  <td id="number-update-{{id}}">
     {{#if isReceiving }}
       <span class='js-number-update-text'>{{receivedQuantity}}</span>
       <input class="fullwidth js-number-update-input" name="received_quantity" type="number" value="">

backend/app/assets/stylesheets/spree/backend/components/_editable_table.scss

@@ -1,6 +1,5 @@
 .inline-editable-table tr:not(:hover):not(.editing)  {
   input {
-    border: 1px solid transparent;
     color: inherit;
     background-color: transparent;
   }

backend/app/assets/stylesheets/spree/backend/components/_stock_table.scss

@@ -12,15 +12,6 @@
   }
 
   > tbody {
-    > tr {
-      &:hover {
-        .stock-variant-field-table {
-          td {
-            background-color: $color-1;
-          }
-        }
-      }
-    }
     .variant-image {
       width: 31%;
       padding: 0 2%;
@@ -34,8 +25,5 @@
     .variant-details {
       float: left;
     }
-    .variant-container {
-      padding-top: 10px;
-    }
   }
 }

backend/app/assets/stylesheets/spree/backend/sections/_stock_management.scss

@@ -1,35 +1,10 @@
 #listing_product_stock {
-  margin-left: 0px;
-  margin-right: 0px;
 
-  th {
-    border-bottom: 1px solid $color-border;
+  tbody + tbody {
+    border-top-width: 1px;
   }
 
-  > tbody {
-    > tr.stock-item-edit-row {
-      td {
-        background-color: $color-tbl-even;
-        border-left: none;
-      }
-      &:nth-child(even) td {
-        /* An nth-even child is actually an odd row */
-        background-color: $color-tbl-odd;
-      }
-    }
-    > tr {
-      &:first-child td {
-        border-top: none;
-      }
-    }
-  }
   td {
-    vertical-align: middle;
-
-    &.location-name-cell {
-      border-left: none;
-    }
-
     input.error {
       border-color: theme-color("danger");
     }
@@ -39,10 +14,4 @@
       border: 1px solid theme-color("danger");
     }
   }
-
-  tr:hover {
-    .stock-variant-field-table td {
-      background-color: transparent;
-    }
-  }
 }

backend/app/assets/stylesheets/spree/backend/shared/_tables.scss

@@ -3,28 +3,20 @@ table {
   @extend .table;
   border-spacing: 0;
 
-  th, td {
-    border-right: 1px solid $color-border;
-    border-bottom: 1px solid $color-border;
+  &.sortable td {
     vertical-align: middle;
-    text-overflow: ellipsis;
-
-    &:first-child {
-      border-left: 1px solid $color-border;
-    }
-
-    a {
-      border-bottom: 1px dotted lighten($link-color, 10);
+  }
 
-      &:hover {
-        border-color: lighten($link-hover-color, 10);
-      }
-    }
+  th, td {
+    text-overflow: ellipsis;
 
     .handle {
+      @extend .fa;
+      @extend .fa-bars;
+      cursor: move;
       display: block !important;
       text-align: center;
-      padding-right: 0;
+      padding: 3px 0;
     }
 
     &.actions {
@@ -98,17 +90,6 @@ table {
     input[type="text"] {
       width: 100%;
     }
-
-    &.no-border {
-      border-right: none;
-    }
-
-    .handle {
-      @extend .fa;
-      @extend .fa-bars;
-      cursor: move;
-    }
-
   }
 
   &.no-borders {
@@ -121,31 +102,12 @@ table {
     white-space: nowrap;
   }
 
-  thead {
-    th {
-      border-top: 1px solid $color-border;
-      border-bottom: none;
-      background-color: $color-tbl-thead;
-      text-align: center;
-      font-weight: $font-weight-bold;
-      vertical-align: top;
-    }
+  th a {
+    color: $color-4;
   }
 
   tbody {
     tr {
-      &:first-child th,
-      &:first-child td {
-        border-top: 1px solid $color-border;
-      }
-      &.even td {
-        background-color: $color-tbl-even;
-      }
-
-      &:hover td {
-        background-color: very-light($color-3, 5);
-      }
-
       &.deleted td {
         background-color: very-light(theme-color("danger"), 6);
         border-color: very-light(theme-color("danger"), 15);

backend/app/views/spree/admin/adjustment_reasons/index.html.erb

@@ -28,11 +28,11 @@
     </thead>
     <tbody>
       <% @adjustment_reasons.each do |adjustment_reason| %>
-        <tr id="<%= spree_dom_id adjustment_reason %>" data-hook="adjustment_reason_row" class="<%= cycle('odd', 'even')%>">
-          <td class="align-center">
+        <tr id="<%= spree_dom_id adjustment_reason %>" data-hook="adjustment_reason_row">
+          <td>
             <%= adjustment_reason.name %>
           </td>
-          <td class="align-center">
+          <td>
             <span class="pill pill-<%= adjustment_reason.active? ? 'active' : 'inactive' %>">
               <%= Spree.t(adjustment_reason.active? ? :active : :inactive) %>
             </span>

backend/app/views/spree/admin/adjustments/_adjustment.html.erb

@@ -4,12 +4,12 @@
 %>
 <tr id="<%= spree_dom_id(adjustment) %>"
     data-hook="adjustment_row"
-    class="<%= cycle('odd', 'even')%> <%= "adjustment-ineligible" if !adjustment.eligible? %>"
+    class="<%= "adjustment-ineligible" if !adjustment.eligible? %>"
     >
-  <td class="align-center"><%= display_adjustable(adjustment.adjustable) %></td>
-  <td class="align-center"><%= adjustment.label %></td>
-  <td class="align-center"><%= adjustment.display_amount.to_html %></td>
-  <td class="align-center"><%= adjustment_state(adjustment) %></td>
+  <td><%= display_adjustable(adjustment.adjustable) %></td>
+  <td><%= adjustment.label %></td>
+  <td><%= adjustment.display_amount.to_html %></td>
+  <td><%= adjustment_state(adjustment) %></td>
   <td class='actions'>
     <% unless adjustment.finalized? %>
       <% if can?(:update, adjustment) %>

backend/app/views/spree/admin/adjustments/_adjustments_table.html.erb

@@ -11,14 +11,14 @@
   <tbody>
     <%= render partial: "adjustment", collection: @adjustments %>
     <tr data-hook="adjustment_buttons">
-      <td class="align-center" colspan='4'>
+      <td class="align-right" colspan="2" style="width: 50%">
         <% if can? :update, Spree::Adjustment %>
-          <div>
-            <%= button_to Spree.t(:unfinalize_all_adjustments), adjustments_unfinalize_admin_order_path(@order), method: :get %>
-          </div>
-          <div>
-            <%= button_to Spree.t(:finalize_all_adjustments), adjustments_finalize_admin_order_path(@order), method: :get %>
-          </div>
+          <%= button_to Spree.t(:unfinalize_all_adjustments), adjustments_unfinalize_admin_order_path(@order), method: :get %>
+        <% end %>
+      </td>
+      <td colspan="2" style="width: 50%">
+        <% if can? :update, Spree::Adjustment %>
+          <%= button_to Spree.t(:finalize_all_adjustments), adjustments_finalize_admin_order_path(@order), method: :get %>
         <% end %>
       </td>
       <td class='actions'>&nbsp;</td>

backend/app/views/spree/admin/cancellations/index.html.erb

@@ -14,10 +14,10 @@
 
   <thead>
     <th colspan="2"><%= Spree::LineItem.human_attribute_name(:description) %></th>
-    <th><%= Spree::OrderCancellations.human_attribute_name(:quantity) %></th>
+    <th class="align-center"><%= Spree::OrderCancellations.human_attribute_name(:quantity) %></th>
     <th><%= Spree::OrderCancellations.human_attribute_name(:state) %></th>
     <th><%= Spree::OrderCancellations.human_attribute_name(:shipment) %></th>
-    <th><%= Spree::OrderCancellations.human_attribute_name(:cancel) %></th>
+    <th class="align-right"><%= Spree::OrderCancellations.human_attribute_name(:cancel) %></th>
   </thead>
 
   <tbody>
@@ -34,13 +34,13 @@
             <% end %>
           </td>
           <td class="inventory-unit-quantity align-center">1</td>
-          <td class="inventory-unit-state align-center">
+          <td class="inventory-unit-state">
             <span class="pill pill-<%= inventory_unit.state %>">
               <%= Spree.t(inventory_unit.state, scope: :inventory_states) %>
             </span>
           </td>
-          <td class="inventory-unit-shipment align-center"><%= inventory_unit.shipment.number %></td>
-          <td class="inventory-unit-cancel align-center">
+          <td class="inventory-unit-shipment"><%= inventory_unit.shipment.number %></td>
+          <td class="inventory-unit-cancel align-right">
             <%= check_box_tag 'inventory_unit_ids[]', inventory_unit.id %>
           </td>
         </tr>

backend/app/views/spree/admin/customer_returns/_reimbursements_table.html.erb

@@ -10,7 +10,7 @@
   </thead>
   <tbody>
     <% reimbursements.each do |reimbursement| %>
-      <tr id="<%= spree_dom_id(reimbursement) %>" data-hook="reimbursement_row" class="<%= cycle('odd', 'even')%>">
+      <tr id="<%= spree_dom_id(reimbursement) %>" data-hook="reimbursement_row">
         <td>
           <% if reimbursement.reimbursed? %>
             <%= link_to reimbursement.number, url_for([:admin, @order, reimbursement]) %>

backend/app/views/spree/admin/customer_returns/_return_item_decision.html.erb

@@ -26,19 +26,19 @@
         <td>
           <%= return_item.inventory_unit.variant.sku %>
         </td>
-        <td class="align-center">
+        <td>
           <%= return_item.display_amount %>
         </td>
-        <td class="align-center">
+        <td>
           <%= reimbursement_type_name(return_item.preferred_reimbursement_type) %>
         </td>
-        <td class="align-center">
+        <td>
           <%= return_item.exchange_variant.try(:exchange_name) %>
         </td>
-        <td class="align-center">
+        <td>
           <%= return_item.acceptance_status_errors %>
         </td>
-        <td class-"align-center">
+        <td>
           <span class="pill pill-<%= return_item.reception_status %>">
             <%= Spree.t(
               return_item.reception_status,
@@ -47,7 +47,7 @@
           </span>
         </td>
         <% unless return_item.received? %>
-          <td class='align-center'>
+          <td>
             <%= form_for [:admin, return_item] do |f| %>
               <%= f.hidden_field 'reception_status_event', value: 'receive' %>
               <%= f.button Spree.t('actions.receive'), class: 'with-tip', "data-action" => 'save' %>