Replace darker-background angular directive

app/assets/javascripts/darkswarm/directives/darker_background.js.coffee

@@ -1,11 +0,0 @@
-angular.module('Darkswarm').directive "darkerBackground", ->
-  restrict: "A"
-  link: (scope, elm, attr)->
-    toggleClass = (value) ->
-      elm.closest('.page-view').toggleClass("with-darker-background", value)
-
-    toggleClass(true)
-
-    # if an OrderCycle is selected, disable darker background
-    scope.$watch 'order_cycle.order_cycle_id', (newvalue, oldvalue) ->
-      toggleClass(false) if newvalue

app/helpers/shop_helper.rb

@@ -62,6 +62,12 @@ module ShopHelper
     true
   end
 
+  def shop_tab_class(tab)
+    return unless (tab == "home" && show_home_tab?) || current_order(false)&.order_cycle.nil?
+
+    "with-darker-background"
+  end
+
   private
 
   def show_groups_tabs?

app/views/shop/messages/_closed_shop.html.haml

@@ -1,7 +1,7 @@
 .closed-shop-header
   .row
     .small-12.columns
-      .content{ "darker-background" => true }
+      .content
         %h4
           .warning-sign
             .rectangle

app/views/shop/messages/_customer_required.html.haml

@@ -1,4 +1,4 @@
-.content{ "darker-background" => true }
+.content
   .row.footer-pad
     .small-12.columns{ "data-controller": "login-modal" }
       %strong

app/views/shop/messages/_select_oc.html.haml

@@ -1,4 +1,4 @@
-.content.footer-pad{ "darker-background" => true, "ng-show" => "order_cycle.order_cycle_id == null" }
+.content.footer-pad{ "ng-show" => "order_cycle.order_cycle_id == null" }
   .row
     .small-12.columns
       .select-oc-message

app/views/shopping_shared/_tabs.html.haml

@@ -10,8 +10,8 @@
         .columns.large-4.show-for-large-up
           = render partial: "shopping_shared/order_cycles"
     - shop_tabs.each do |tab|
-      %div{id: "#{tab[:name]}_panel", "data-tabs-and-panels-target": "panel #{'default' if tab[:default]} #{'shop' if tab[:shop]}" } 
-        .page-view
+      %div{id: "#{tab[:name]}_panel", "data-tabs-and-panels-target": "panel #{'default' if tab[:default]} #{'shop' if tab[:shop]}" }
+        .page-view{ class: shop_tab_class(tab[:name]) }
           - if tab[:custom]
             = render "shopping_shared/tabs/custom"
           - else

app/webpacker/css/darkswarm/_shop-product-rows.scss

@@ -1,5 +1,7 @@
 .darkswarm {
   products {
+    background-color: white;
+
     product {
       @import "shop_partials/shop-product-rows";
     }