diff --git a/Gemfile b/Gemfile
index 24f9d76959..476385a115 100644
--- a/Gemfile
+++ b/Gemfile
@@ -13,7 +13,6 @@ gem 'angular-rails-templates', '>= 0.3.0'
 gem 'awesome_nested_set'
 gem 'ransack', '2.4.2'
 gem 'responders'
-gem 'sass-rails', '< 5.1.0' # this restriction originates from the compass-rails's version
 gem 'webpacker', '~> 5'
 
 gem 'i18n'
@@ -104,16 +103,12 @@ gem 'whenever', require: false
 gem 'test-unit', '~> 3.5'
 
 gem 'coffee-rails', '~> 5.0.0'
-gem 'compass-rails'
 
 gem 'mini_racer', '0.4.0'
 
 gem 'uglifier', '>= 1.0.3'
 
 gem 'angular_rails_csrf'
-gem 'foundation-icons-sass-rails'
-
-gem 'foundation-rails', '= 5.5.2.1'
 
 gem 'jquery-rails', '4.4.0'
 gem 'jquery-ui-rails', '~> 4.2'
diff --git a/Gemfile.lock b/Gemfile.lock
index 06a9170f4e..b8155c7453 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -196,7 +196,6 @@ GEM
       rubyzip (>= 1.3.0, < 3)
     childprocess (4.1.0)
     chronic (0.10.2)
-    chunky_png (1.4.0)
     climate_control (0.2.0)
     cliver (0.3.2)
     cocaine (0.5.8)
@@ -211,22 +210,6 @@ GEM
     coffee-script-source (1.12.2)
     combine_pdf (1.0.21)
       ruby-rc4 (>= 0.1.5)
-    compass (1.0.3)
-      chunky_png (~> 1.2)
-      compass-core (~> 1.0.2)
-      compass-import-once (~> 1.0.5)
-      rb-fsevent (>= 0.9.3)
-      rb-inotify (>= 0.9)
-      sass (>= 3.3.13, < 3.5)
-    compass-core (1.0.3)
-      multi_json (~> 1.0)
-      sass (>= 3.3.0, < 3.5)
-    compass-import-once (1.0.5)
-      sass (>= 3.2, < 3.5)
-    compass-rails (4.0.0)
-      compass (~> 1.0.0)
-      sass-rails (< 5.1)
-      sprockets (< 4.0)
     concurrent-ruby (1.1.9)
     connection_pool (2.2.5)
     crack (0.4.5)
@@ -319,12 +302,6 @@ GEM
       nokogiri (>= 1.5.11, < 2.0.0)
     foreman (0.87.2)
     formatador (0.2.5)
-    foundation-icons-sass-rails (3.0.0)
-      railties (>= 3.1.1)
-      sass-rails (>= 3.1.1)
-    foundation-rails (5.5.2.1)
-      railties (>= 3.1.0)
-      sass (>= 3.3.0, < 3.5)
     fugit (1.4.5)
       et-orbi (~> 1.1, >= 1.1.8)
       raabro (~> 1.4)
@@ -732,7 +709,6 @@ DEPENDENCIES
   catalog!
   coffee-rails (~> 5.0.0)
   combine_pdf
-  compass-rails
   cuprite
   custom_error_message!
   database_cleaner
@@ -752,8 +728,6 @@ DEPENDENCIES
   flipper-ui
   fog-aws (~> 2.0)
   foreman
-  foundation-icons-sass-rails
-  foundation-rails (= 5.5.2.1)
   fuubar (~> 2.5.1)
   geocoder
   gmaps4rails
@@ -807,7 +781,6 @@ DEPENDENCIES
   rswag
   rubocop
   rubocop-rails
-  sass-rails (< 5.1.0)
   sd_notify
   select2-rails!
   selenium-webdriver
diff --git a/app/assets/images/logo/spree_50.png b/app/assets/images/logo/spree_50.png
deleted file mode 100644
index 9fefb2ee16..0000000000
Binary files a/app/assets/images/logo/spree_50.png and /dev/null differ
diff --git a/app/assets/javascripts/darkswarm/all.js.coffee b/app/assets/javascripts/darkswarm/all.js.coffee
index b425d57848..b32228b7ad 100644
--- a/app/assets/javascripts/darkswarm/all.js.coffee
+++ b/app/assets/javascripts/darkswarm/all.js.coffee
@@ -50,6 +50,7 @@
 #
 #= require modernizr
 #
+#= require foundation-sites/js/foundation.js
 #= require ./darkswarm
 #= require_tree ./mixins
 #= require_tree ./directives
diff --git a/app/assets/javascripts/templates/admin/modals/bulk_invoice.html.haml b/app/assets/javascripts/templates/admin/modals/bulk_invoice.html.haml
index b77175f7ce..4c3fd55488 100644
--- a/app/assets/javascripts/templates/admin/modals/bulk_invoice.html.haml
+++ b/app/assets/javascripts/templates/admin/modals/bulk_invoice.html.haml
@@ -6,7 +6,7 @@
 %p.error{ ng: { show: 'error' } }
   {{error}}
 
-%img.spinner{ src: image_path("spinning-circles.svg"), ng: { show: "loading" } }
+%img.spinner{ src: image_path("/spinning-circles.svg"), ng: { show: "loading" } }
 %p{ ng: { show: "loading" } }
   = t('js.admin.orders.index.please_wait')
 
diff --git a/app/assets/javascripts/templates/admin/modals/image_upload.html.haml b/app/assets/javascripts/templates/admin/modals/image_upload.html.haml
index 27234ea444..28d01d8ada 100644
--- a/app/assets/javascripts/templates/admin/modals/image_upload.html.haml
+++ b/app/assets/javascripts/templates/admin/modals/image_upload.html.haml
@@ -3,7 +3,7 @@
 
 %form#image_upload{ name: 'form', novalidate: true, enctype: 'multipart/form-data', multipart: true, ng: { controller: "ProductImageCtrl" } }
   %div.image-preview
-    %img.spinner{ src: image_path("spinning-circles.svg"), ng: { hide: "!imageUploader.isUploading" }}
+    %img.spinner{ src: image_path("/spinning-circles.svg"), ng: { hide: "!imageUploader.isUploading" }}
     %img.preview{ng: {src: "{{imagePreview}}", class: "{'faded': imageUploader.isUploading}"}}
 
   %label{for: 'image-upload', class: 'button'} {{ 'admin.products.index.upload_an_image' | t }}
diff --git a/app/assets/javascripts/templates/admin/panels/exchange_products_panel_footer.html.haml b/app/assets/javascripts/templates/admin/panels/exchange_products_panel_footer.html.haml
index 469d3b066a..df3c510fed 100644
--- a/app/assets/javascripts/templates/admin/panels/exchange_products_panel_footer.html.haml
+++ b/app/assets/javascripts/templates/admin/panels/exchange_products_panel_footer.html.haml
@@ -6,6 +6,6 @@
 
 .sixteen.columns.alpha#loading{ 'ng-show' => 'productsLoading()' }
   %br
-  %img.spinner{ src: image_path("spinning-circles.svg")}
+  %img.spinner{ src: image_path("/spinning-circles.svg")}
   %h1
     {{ 'js.admin.panels.exchange_products.loading_variants' | t }}
diff --git a/app/assets/stylesheets/admin/all.scss b/app/assets/stylesheets/admin/all.scss
deleted file mode 100644
index bafa929c49..0000000000
--- a/app/assets/stylesheets/admin/all.scss
+++ /dev/null
@@ -1,53 +0,0 @@
-/*
- * This is a manifest file that'll automatically include all the stylesheets available in this directory
- * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
- * the top of the compiled file, but it's generally better to create a new file per style scope.
- *
-
- *= require normalize
- *= require responsive-tables
- *= require jquery.powertip
- *= require jquery.ui.dialog
- *= require shared/textAngular
- *= require shared/ng-tags-input.min
- *= require select2
- *= require flatpickr/dist/flatpickr
- *= require flatpickr/dist/themes/material_blue
- *= require shortcut-buttons-flatpickr/dist/themes/light
-
- *= require_self
-*/
-
-//************************************************************************//
-//************************************************************************//
-@import 'globals/functions';
-@import 'globals/variables';
-@import 'variables';
-@import 'globals/mixins';
-
-@import 'shared/typography';
-@import 'shared/tables';
-@import 'shared/icons';
-@import 'shared/forms';
-@import 'shared/layout';
-
-@import 'plugins/flatpickr-customization';
-
-@import 'plugins/powertip';
-@import 'plugins/jstree';
-@import 'plugins/font-awesome';
-@import 'plugins/select2';
-
-@import 'sections/orders';
-@import 'sections/products';
-
-@import 'hacks/mozilla';
-@import 'hacks/opera';
-@import 'hacks/ie';
-
-@import 'components/*';
-@import 'pages/*';
-@import '*';
-
-@import "../shared/question-mark-icon";
-@import "question-mark-tooltip";
diff --git a/app/assets/stylesheets/admin/shared/icons.scss b/app/assets/stylesheets/admin/shared/icons.scss
deleted file mode 100644
index a2de27ba99..0000000000
--- a/app/assets/stylesheets/admin/shared/icons.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-@import 'admin/plugins/font-awesome';
-
-// Some fixes for fontwesome stylesheets
-[class^="icon-"], [class*=" icon-"] {
-  &:before {
-    padding-right: 5px;
-  }
-
-  &.button, &.icon_link {
-    width: auto;
-
-    &:before {
-      padding-top: 3px;
-    }
-  }
-}
-
-.icon-email:before    { @extend .icon-envelope:before }
-.icon-resend_authorization_email:before    { @extend .icon-envelope:before }
-.icon-resume:before   { @extend .icon-refresh:before  }
-
-.icon-cancel:before,
-.icon-void:before     { @extend .icon-remove:before   }
-
-.icon-capture:before  { @extend .icon-ok:before       }
-.icon-credit:before   { @extend .icon-ok:before       }
diff --git a/app/assets/stylesheets/darkswarm/all.scss b/app/assets/stylesheets/darkswarm/all.scss
deleted file mode 100644
index aef5c4db7d..0000000000
--- a/app/assets/stylesheets/darkswarm/all.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-/*
-   * This is a manifest file that'll automatically include all the stylesheets available in this directory
-   * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
-   * the top of the compiled file, but it's generally better to create a new file per style scope.
-
-   *= require autocomplete
-   *= require leaflet
-
-   *= require_self
-*/
-@import 'variables';
-@import 'foundation';
-@import 'foundation-icons';
-
-@import 'base/*';
-@import 'layout/*';
-@import '*';
-@import 'pages/*';
-@import 'web/all';
-
-ofn-modal {
-  display: block;
-}
-
-@import "../shared/question-mark-icon";
-@import '../admin/shared/scroll_bar';
diff --git a/app/assets/stylesheets/darkswarm/base/colors.scss b/app/assets/stylesheets/darkswarm/base/colors.scss
deleted file mode 100644
index fddcbc9f6a..0000000000
--- a/app/assets/stylesheets/darkswarm/base/colors.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-@import 'darkswarm/branding';
-
-$modal-background-color: #efefef;
-$modal-content-background-color: #fff;
-$modal-alert-link-color: #fff;
-$modal-alert-link-hover-color: rgba(255, 255, 255, .7);
-
-$cookies-banner-background-color: $dark-grey;
-$cookies-banner-button-background-color: $clr-turquoise;
-$cookies-banner-text-color: $white;
-$cookies-policy-modal-background-color: $disabled-light;
-$cookies-policy-modal-border-bottom-color: $disabled-light;
-$cookies-policy-modal-table-tr-even-background-color: $disabled-very-light;
diff --git a/app/assets/stylesheets/mail/all.css b/app/assets/stylesheets/mail/all.css
deleted file mode 100644
index a4d45352b2..0000000000
--- a/app/assets/stylesheets/mail/all.css
+++ /dev/null
@@ -1,11 +0,0 @@
-/* This file MUST be plain css, as roadie does not seem to be able to handle other file types */
-
-/*
- * This is a manifest file that'll automatically include all the stylesheets available in this directory
- * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
- * the top of the compiled file, but it's generally better to create a new file per style scope.
- *
-
- *= require_self
- *= require_tree .
-*/
diff --git a/app/models/spree/app_configuration.rb b/app/models/spree/app_configuration.rb
index 222c42e1cc..ae15100696 100644
--- a/app/models/spree/app_configuration.rb
+++ b/app/models/spree/app_configuration.rb
@@ -27,7 +27,7 @@ module Spree
   class AppConfiguration < Preferences::Configuration
     # Should state/state_name be required
     preference :address_requires_state, :boolean, default: true
-    preference :admin_interface_logo, :string, default: 'ofn-logo.png'
+    preference :admin_interface_logo, :string, default: '/default_images/ofn-logo.png'
     preference :admin_products_per_page, :integer, default: 10
     # Should only be true if you don't need to track inventory
     preference :allow_backorder_shipping, :boolean, default: false
@@ -48,7 +48,7 @@ module Spree
     preference :default_seo_title, :string, default: ''
     preference :hide_cents, :boolean, default: false
     preference :layout, :string, default: 'darkswarm'
-    preference :logo, :string, default: 'ofn-logo.png'
+    preference :logo, :string, default: '/default_images/ofn-logo.png'
 
     # Maximum nesting level in taxons menu
     preference :max_level_in_taxons_menu, :integer, default: 1
diff --git a/app/views/admin/producer_properties/_form.html.haml b/app/views/admin/producer_properties/_form.html.haml
index 7af322557d..fa05e25b68 100644
--- a/app/views/admin/producer_properties/_form.html.haml
+++ b/app/views/admin/producer_properties/_form.html.haml
@@ -1,6 +1,6 @@
 %fieldset.no-border-top
   .add_producer_properties{"data-hook" => "add_producer_properties"}
-  = image_tag 'spinner.gif', :plugin => 'spree', :style => 'display:none;', :id => 'busy_indicator'
+  = image_pack_tag 'spinner.gif', :plugin => 'spree', :style => 'display:none;', :id => 'busy_indicator'
   %table.index.sortable{"data-hook" => "", "data-sortable-link" => main_app.update_positions_admin_enterprise_producer_properties_url(@enterprise)}
     %thead
       %tr{"data-hook" => "producer_properties_header"}
diff --git a/app/views/components/_spinner.html.haml b/app/views/components/_spinner.html.haml
index 8d0a371204..a3dee8a298 100644
--- a/app/views/components/_spinner.html.haml
+++ b/app/views/components/_spinner.html.haml
@@ -1 +1 @@
-%img.spinner{ src: image_path("spinning-circles.svg"), style: "max-width: 100%" }
+%img.spinner{ src: image_pack_path("spinning-circles.svg"), style: "max-width: 100%" }
diff --git a/app/views/home/_tagline.html.haml b/app/views/home/_tagline.html.haml
index b20a3dc799..245d07263a 100644
--- a/app/views/home/_tagline.html.haml
+++ b/app/views/home/_tagline.html.haml
@@ -2,7 +2,7 @@
   .row
     .small-12.text-center.columns
       %h1
-        %img{src: image_path("logo-white-notext.png"), title: Spree::Config.site_name}
+        %img{src: image_pack_path("logo-white-notext.png"), title: Spree::Config.site_name}
         %br/
         %a.button.transparent{href: "/shops"}
           = t :home_shop
diff --git a/app/views/layouts/darkswarm.html.haml b/app/views/layouts/darkswarm.html.haml
index c02ebb6ee0..caa8c9fe06 100644
--- a/app/views/layouts/darkswarm.html.haml
+++ b/app/views/layouts/darkswarm.html.haml
@@ -13,9 +13,9 @@
     - else
       = favicon_link_tag "/favicon-staging.ico"
     %link{href: "https://fonts.googleapis.com/css?family=Roboto:400,300italic,400italic,300,700,700italic|Oswald:300,400,700", rel: "stylesheet", type: "text/css"}
-    %link{href: font_path("OFN-v2.woff"), rel: "preload", as: "font", crossorigin: "anonymous"}
+    %link{href: asset_pack_path("media/fonts/OFN-v2.woff"), rel: "preload", as: "font", crossorigin: "anonymous"}
 
-    = stylesheet_link_tag "darkswarm/all", "data-turbo-track": "reload"
+    = stylesheet_pack_tag "darkswarm", "data-turbo-track": "reload"
     = javascript_pack_tag "application", "data-turbo-track": "reload"
 
     = render "layouts/shopfront_script" if @shopfront_layout
diff --git a/app/views/layouts/mailer.html.haml b/app/views/layouts/mailer.html.haml
index c577a620e2..2536308b57 100644
--- a/app/views/layouts/mailer.html.haml
+++ b/app/views/layouts/mailer.html.haml
@@ -5,7 +5,7 @@
     %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
     %title
       = Spree::Config[:site_name]
-    = stylesheet_link_tag 'mail/all'
+    = stylesheet_pack_tag 'mail'
   %body{:bgcolor => "#FFFFFF" }
     %table.head-wrap{:bgcolor => "#f2f2f2"}
       %tr
diff --git a/app/views/layouts/registration.html.haml b/app/views/layouts/registration.html.haml
index b8bb3d392e..ad947d5a1f 100644
--- a/app/views/layouts/registration.html.haml
+++ b/app/views/layouts/registration.html.haml
@@ -10,13 +10,13 @@
       = favicon_link_tag "/favicon-staging.ico"
     %link{href: "https://fonts.googleapis.com/css?family=Roboto:400,300italic,400italic,300,700,700italic|Oswald:300,400,700", rel: "stylesheet", type: "text/css"}
 
-    = stylesheet_link_tag "darkswarm/all"
+    = stylesheet_pack_tag "darkswarm"
     = javascript_include_tag "darkswarm/all"
     = javascript_pack_tag "application"
 
     = csrf_meta_tags
 
-  %body.off-canvas{ style: "background-image: url(#{image_path('tile-wide.png')})", "data-turbo": "false" }
+  %body.off-canvas{ style: "background-image: url(#{image_pack_path('tile-wide.png')})", "data-turbo": "false" }
     / [if lte IE 8]
       = render partial: "shared/ie_warning"
       = javascript_include_tag "iehack"
diff --git a/app/views/registration/steps/_limit_reached.html.haml b/app/views/registration/steps/_limit_reached.html.haml
index ba49d0dac3..7a486e5743 100644
--- a/app/views/registration/steps/_limit_reached.html.haml
+++ b/app/views/registration/steps/_limit_reached.html.haml
@@ -6,7 +6,7 @@
         %h4= t(".message")
   .row
     .small-12.medium-3.large-2.columns.text-right.hide-for-small-only
-      %img{:src => image_path("potatoes.png") }
+      %img{:src => image_pack_path("potatoes.png") }
     .small-12.medium-9.large-10.columns
       %p
         = t(".text")
diff --git a/app/views/shared/_footer.html.haml b/app/views/shared/_footer.html.haml
index d4b61ccdba..4e7a5d05e1 100644
--- a/app/views/shared/_footer.html.haml
+++ b/app/views/shared/_footer.html.haml
@@ -3,7 +3,7 @@
     .row
       .small-12.columns.text-center
         .logo
-          %img{src: image_path("logo-white-notext.png") }
+          %img{src: image_pack_path("logo-white-notext.png") }
     .row
       .small-12.medium-8.medium-offset-2.columns.text-center
         .alert-box
diff --git a/app/views/shared/_ie_warning.html.haml b/app/views/shared/_ie_warning.html.haml
index 87acc77b4c..2a71f966bc 100644
--- a/app/views/shared/_ie_warning.html.haml
+++ b/app/views/shared/_ie_warning.html.haml
@@ -10,17 +10,17 @@
   .row
     .small-4.columns.browserbtn
       %a.browserlogo{href: "https://www.google.com/intl/en_au/chrome/browser/", target: "_blank"} 
-        %img{src: image_path("browser-logos/chrome.png") }
+        %img{src: image_pack_path("browser-logos/chrome.png") }
       %a{href: "https://www.google.com/intl/en_au/chrome/browser/", target: "_blank"}
         = t :ie_warning_chrome
     .small-4.columns.browserbtn
       %a.browserlogo{href: "http://www.mozilla.org/en-US/firefox/new/", target: "_blank"} 
-        %img{src: image_path("browser-logos/firefox.png") }
+        %img{src: image_pack_path("browser-logos/firefox.png") }
       %a{href: "http://www.mozilla.org/en-US/firefox/new/", target: "_blank"}
         = t :ie_warning_firefox
     .small-4.columns.browserbtn  
       %a.browserlogo{href: "http://windows.microsoft.com/en-AU/internet-explorer/download-ie", target: "_blank"} 
-        %img{src: image_path("browser-logos/internet-explorer.png") }
+        %img{src: image_pack_path("browser-logos/internet-explorer.png") }
       %a{href: "http://windows.microsoft.com/en-AU/internet-explorer/download-ie", target: "_blank"}
         = t :ie_warning_ie
   .row.ie-msg
diff --git a/app/views/shared/menu/_cart.html.haml b/app/views/shared/menu/_cart.html.haml
index 1fd1b06e89..728b0c1daa 100644
--- a/app/views/shared/menu/_cart.html.haml
+++ b/app/views/shared/menu/_cart.html.haml
@@ -3,6 +3,6 @@
     %span
       = t '.cart'
     %span.count
-      %img{ src: image_path("menu/icn-cart.svg") }
+      %img{ src: image_pack_path("menu/icn-cart.svg") }
       %span
         {{ Cart.total_item_count() }}
diff --git a/app/views/shared/menu/_mobile_menu.html.haml b/app/views/shared/menu/_mobile_menu.html.haml
index 716db01f73..83c3d1c44d 100644
--- a/app/views/shared/menu/_mobile_menu.html.haml
+++ b/app/views/shared/menu/_mobile_menu.html.haml
@@ -1,7 +1,7 @@
 %nav.tab-bar.show-for-medium-down
   %section.left
     %a.left-off-canvas-toggle.menu-icon
-      = image_tag "menu/btn-menu-mobile.png"
+      = image_pack_tag "menu/btn-menu-mobile.png"
 
   %section.left
     .ofn-logo
@@ -14,7 +14,7 @@
         %span
           = t '.cart'
         %span.count
-          = image_tag "menu/icn-cart.svg"
+          = image_pack_tag "menu/icn-cart.svg"
           %span
             {{ Cart.total_item_count() }}
 
diff --git a/app/views/shared/menu/_signed_in.html.haml b/app/views/shared/menu/_signed_in.html.haml
index dceb81075a..34b7bcfc06 100644
--- a/app/views/shared/menu/_signed_in.html.haml
+++ b/app/views/shared/menu/_signed_in.html.haml
@@ -7,7 +7,7 @@
 %li.user-menu.has-dropdown.not-click
 
   %a{href: "#", class: "top-bar--menu-item-with-icon"}
-    %img{ src: image_path("menu/icn-profile.svg") }
+    %img{ src: image_pack_path("menu/icn-profile.svg") }
     %span
       = t '.profile'
 
diff --git a/app/views/shared/menu/_signed_out.html.haml b/app/views/shared/menu/_signed_out.html.haml
index 3a886a20e0..a5d527632a 100644
--- a/app/views/shared/menu/_signed_out.html.haml
+++ b/app/views/shared/menu/_signed_out.html.haml
@@ -1,5 +1,5 @@
 %li#login-link
   %a{"auth" => "login"}
-    %img{ src: image_path("menu/icn-login.svg") }
+    %img{ src: image_pack_path("menu/icn-login.svg") }
     %span
       = t 'label_login'
diff --git a/app/views/shop/products/_searchbar.haml b/app/views/shop/products/_searchbar.haml
index bda087f4c7..a17db1e322 100644
--- a/app/views/shop/products/_searchbar.haml
+++ b/app/views/shop/products/_searchbar.haml
@@ -8,7 +8,7 @@
               "ng-debounce" => "200",
               "disable-enter-with-blur" => true}
         %a.clear{type: 'button', ng: {show: 'query', click: 'clearQuery()'}, 'focus-search' => true}
-          = image_tag "icn-close.png"
+          = image_pack_tag "icn-close.png"
 
       .hide-for-large-up
         %button{type: 'button', ng: {click: 'toggleFilterSidebar()'}}
diff --git a/app/views/spree/admin/orders/invoice.html.haml b/app/views/spree/admin/orders/invoice.html.haml
index 1ee17ea165..196a1a4777 100644
--- a/app/views/spree/admin/orders/invoice.html.haml
+++ b/app/views/spree/admin/orders/invoice.html.haml
@@ -1,4 +1,4 @@
-= wicked_pdf_stylesheet_link_tag "mail/all"
+= wicked_pdf_stylesheet_pack_tag "mail"
 
 %table{:width => "100%"}
   %tbody
diff --git a/app/views/spree/admin/orders/invoice2.html.haml b/app/views/spree/admin/orders/invoice2.html.haml
index 9428d62eca..68ebcbfd68 100644
--- a/app/views/spree/admin/orders/invoice2.html.haml
+++ b/app/views/spree/admin/orders/invoice2.html.haml
@@ -1,5 +1,4 @@
-= wicked_pdf_stylesheet_link_tag "mail/all"
-
+= wicked_pdf_stylesheet_pack_tag "mail"
 
 %table{:width => "100%"}
   %tbody
diff --git a/app/views/spree/admin/payments/source_forms/_gateway.html.haml b/app/views/spree/admin/payments/source_forms/_gateway.html.haml
index ac88ecd047..ac20d73609 100644
--- a/app/views/spree/admin/payments/source_forms/_gateway.html.haml
+++ b/app/views/spree/admin/payments/source_forms/_gateway.html.haml
@@ -41,5 +41,5 @@
         %a.info.cvvLink{href: "/content/cvv", target: "_blank"}
           (#{t(:what_is_this)})
     .nine.columns
-      = image_tag 'credit_cards/credit_card.gif', class: 'credit-card-image'
+      = image_pack_tag 'credit_cards/credit_card.gif', class: 'credit-card-image'
     .clear
diff --git a/app/views/spree/admin/product_properties/index.html.haml b/app/views/spree/admin/product_properties/index.html.haml
index 2754133f0c..9763278f63 100644
--- a/app/views/spree/admin/product_properties/index.html.haml
+++ b/app/views/spree/admin/product_properties/index.html.haml
@@ -12,7 +12,7 @@
 = form_for @product, url: admin_product_url(@product, @url_filters), method: :put do |f|
   %fieldset.no-border-top
     .add_product_properties
-    = image_tag 'select2-spinner.gif', plugin: 'spree', style: 'display:none;', id: 'busy_indicator'
+    = image_pack_tag 'select2-spinner.gif', plugin: 'spree', style: 'display:none;', id: 'busy_indicator'
 
     %table.index.sortable{"data-sortable-link" => update_positions_admin_product_product_properties_url}
       %thead
diff --git a/app/views/spree/admin/shared/_head.html.haml b/app/views/spree/admin/shared/_head.html.haml
index becc6d0309..e4879fc4bf 100644
--- a/app/views/spree/admin/shared/_head.html.haml
+++ b/app/views/spree/admin/shared/_head.html.haml
@@ -11,7 +11,7 @@
 
 %link{:href => "//fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600&subset=latin,cyrillic,greek,vietnamese", :rel => "stylesheet", :type => "text/css"}
 
-= stylesheet_link_tag 'admin/all'
+= stylesheet_pack_tag 'admin'
 = render "layouts/bugsnag_js"
 = javascript_include_tag 'admin/all'
 
diff --git a/app/views/spree/admin/states/index.html.haml b/app/views/spree/admin/states/index.html.haml
index 57035c79af..b9e72fa193 100644
--- a/app/views/spree/admin/states/index.html.haml
+++ b/app/views/spree/admin/states/index.html.haml
@@ -11,6 +11,6 @@
   - databaseurl = "#{admin_states_path(format: :js)}?country_id="
   %select#country.observe_field.select2.fullwidth{"data-base-url" => databaseurl, "data-update" => "#state-list"}
     = options_from_collection_for_select(@countries, :id, :name, @country.id)
-= image_tag 'select2-spinner.gif', plugin: 'spree', style: 'display:none;', id: 'busy_indicator'
+= image_pack_tag 'select2-spinner.gif', plugin: 'spree', style: 'display:none;', id: 'busy_indicator'
 #state-list
   = render partial: 'state_list'
diff --git a/app/views/spree/admin/taxonomies/edit.haml b/app/views/spree/admin/taxonomies/edit.haml
index 7f37454aec..1f11fbb56c 100755
--- a/app/views/spree/admin/taxonomies/edit.haml
+++ b/app/views/spree/admin/taxonomies/edit.haml
@@ -21,7 +21,7 @@
         Spree.routes.admin_taxonomy_taxons_path = "#{spree.admin_taxonomy_taxons_path(@taxonomy)}";
       #taxonomy_tree.tree
     #progress{style: "display:none;"}
-      = image_tag 'select2-spinner.gif', title: 'Spinner', style: "vertical-align:bottom;"
+      = image_pack_tag 'select2-spinner.gif', title: 'Spinner', style: "vertical-align:bottom;"
       = t("spree.updating")
       \..
     .info= t("spree.taxonomy_tree_instruction")
diff --git a/app/views/spree/layouts/bare_admin.html.haml b/app/views/spree/layouts/bare_admin.html.haml
index 085f5be86a..2ad44e016e 100644
--- a/app/views/spree/layouts/bare_admin.html.haml
+++ b/app/views/spree/layouts/bare_admin.html.haml
@@ -12,7 +12,8 @@
 
       %header#header{"data-hook" => ""}
         .container
-          %figure.columns.five{"data-hook" => "logo-wrapper"}= link_to image_tag(Spree::Config[:admin_interface_logo], :id => 'logo'), spree.admin_dashboard_path
+          %figure.columns.five{"data-hook" => "logo-wrapper"}
+            = link_to image_tag(Spree::Config[:admin_interface_logo], id: 'logo'), spree.admin_dashboard_path
           %nav.columns.eleven{"data-hook" => "admin_login_navigation_bar"}
             = render partial: "spree/layouts/admin/login_nav"
 
diff --git a/app/assets/stylesheets/admin/advanced_settings.scss b/app/webpacker/css/admin/advanced_settings.scss
similarity index 92%
rename from app/assets/stylesheets/admin/advanced_settings.scss
rename to app/webpacker/css/admin/advanced_settings.scss
index 614d91883b..6636428f3b 100644
--- a/app/assets/stylesheets/admin/advanced_settings.scss
+++ b/app/webpacker/css/admin/advanced_settings.scss
@@ -1,5 +1,3 @@
-@import "variables";
-
 #advanced_settings {
   background-color: $spree-light-blue;
   border: 1px solid $pale-blue;
diff --git a/app/assets/stylesheets/admin/alert.scss b/app/webpacker/css/admin/alert.scss
similarity index 93%
rename from app/assets/stylesheets/admin/alert.scss
rename to app/webpacker/css/admin/alert.scss
index 3894447936..267e7a8580 100644
--- a/app/assets/stylesheets/admin/alert.scss
+++ b/app/webpacker/css/admin/alert.scss
@@ -1,5 +1,3 @@
-@import "variables";
-
 .alert {
   border: 3px solid $medium-grey;
   border-radius: 6px;
diff --git a/app/webpacker/css/admin/all.scss b/app/webpacker/css/admin/all.scss
new file mode 100644
index 0000000000..5971ae278c
--- /dev/null
+++ b/app/webpacker/css/admin/all.scss
@@ -0,0 +1,113 @@
+@import 'vendor/assets/stylesheets/normalize';
+@import 'vendor/assets/stylesheets/responsive-tables';
+@import 'vendor/assets/stylesheets/jquery.powertip';
+@import '~jquery-ui/themes/base/jquery.ui.dialog';
+@import '../shared/textAngular';
+@import '../shared/ng-tags-input.min';
+@import 'vendor/assets/stylesheets/select2.css.scss';
+@import '~flatpickr/dist/flatpickr';
+@import '~flatpickr/dist/themes/material_blue';
+@import '~shortcut-buttons-flatpickr/dist/themes/light';
+
+@import 'globals/functions';
+@import 'globals/variables';
+@import 'variables';
+@import 'globals/mixins';
+
+@import 'plugins/font-awesome';
+
+@import '../shared/variables/layout';
+@import '../shared/variables/variables';
+@import 'shared/typography';
+@import 'shared/tables';
+@import 'shared/icons';
+@import 'shared/forms';
+@import 'shared/layout';
+@import 'shared/scroll_bar';
+
+@import 'plugins/flatpickr-customization';
+@import 'plugins/powertip';
+@import 'plugins/jstree';
+@import 'plugins/select2';
+
+@import 'sections/orders';
+@import 'sections/products';
+
+@import 'hacks/mozilla';
+@import 'hacks/opera';
+@import 'hacks/ie';
+
+@import 'components/actions';
+@import 'components/alert-box';
+@import 'components/alert_row';
+@import 'components/buttons';
+@import 'components/date-picker';
+@import 'components/dialogs';
+@import 'components/input';
+@import 'components/jquery_dialog';
+@import 'components/messages';
+@import 'components/navigation';
+@import 'components/ng-cloak';
+@import 'components/page_actions';
+@import 'components/pagination';
+@import 'components/per_page_controls';
+@import 'components/product_autocomplete';
+@import 'components/progress';
+@import 'components/save_bar';
+@import 'components/sidebar';
+@import 'components/simple_modal';
+@import 'components/states';
+@import 'components/stripe_connect_button';
+@import 'components/subscriptions_states';
+@import 'components/table-filter';
+@import 'components/table_loading';
+@import 'components/timepicker';
+@import 'components/todo';
+@import 'components/tooltip';
+@import 'components/wizard_progress';
+
+@import 'pages/enterprise_form';
+@import 'pages/subscription_form';
+@import 'pages/subscription_line_items';
+@import 'pages/subscription_review';
+
+@import 'advanced_settings';
+@import 'alert';
+@import 'animations';
+@import 'change_type_form';
+@import 'customers';
+@import 'dashboard_item';
+@import 'dashboard-single-ent';
+@import 'dialog';
+@import 'disabled';
+@import 'dropdown';
+@import 'enterprise_index_panels';
+@import 'enterprises';
+@import 'filters_and_controls';
+@import 'grid';
+@import 'icons';
+@import 'index_panel_buttons';
+@import 'index_panels';
+@import 'modals';
+@import 'offsets';
+@import 'openfoodnetwork';
+@import 'order_cycles';
+@import 'orders';
+@import 'product_import';
+@import 'products';
+@import 'question-mark-tooltip';
+@import 'relationships';
+@import 'reports';
+@import 'select2';
+@import 'sidebar-item';
+@import 'side_menu';
+@import 'tables';
+@import 'tag_rules';
+@import 'terms_of_service_files';
+@import 'validation';
+@import 'variables';
+@import 'variant_overrides';
+@import 'welcome';
+
+@import "../shared/question-mark-icon";
+@import "question-mark-tooltip";
diff --git a/app/assets/stylesheets/admin/animations.scss b/app/webpacker/css/admin/animations.scss
similarity index 100%
rename from app/assets/stylesheets/admin/animations.scss
rename to app/webpacker/css/admin/animations.scss
diff --git a/app/assets/stylesheets/admin/change_type_form.scss b/app/webpacker/css/admin/change_type_form.scss
similarity index 98%
rename from app/assets/stylesheets/admin/change_type_form.scss
rename to app/webpacker/css/admin/change_type_form.scss
index 97ef5b40e5..87b43ff1a2 100644
--- a/app/assets/stylesheets/admin/change_type_form.scss
+++ b/app/webpacker/css/admin/change_type_form.scss
@@ -1,6 +1,5 @@
 @import "../darkswarm/branding";
 @import "../darkswarm/mixins";
-@import "variables";
 
 #change_type {
   section {
diff --git a/app/assets/stylesheets/admin/components/actions.scss b/app/webpacker/css/admin/components/actions.scss
similarity index 94%
rename from app/assets/stylesheets/admin/components/actions.scss
rename to app/webpacker/css/admin/components/actions.scss
index c6b5519aef..1aeac5e630 100644
--- a/app/assets/stylesheets/admin/components/actions.scss
+++ b/app/webpacker/css/admin/components/actions.scss
@@ -1,5 +1,3 @@
-@import 'admin/globals/variables';
-
 table tbody tr {
   &.highlight {
 
diff --git a/app/assets/stylesheets/admin/components/alert-box.scss b/app/webpacker/css/admin/components/alert-box.scss
similarity index 95%
rename from app/assets/stylesheets/admin/components/alert-box.scss
rename to app/webpacker/css/admin/components/alert-box.scss
index 09daf7bd70..35950af6dc 100644
--- a/app/assets/stylesheets/admin/components/alert-box.scss
+++ b/app/webpacker/css/admin/components/alert-box.scss
@@ -1,6 +1,3 @@
-@import "../../darkswarm/mixins";
-@import "../variables";
-
 .alert-box {
   position: relative;
   display: block;
diff --git a/app/assets/stylesheets/admin/components/alert_row.scss b/app/webpacker/css/admin/components/alert_row.scss
similarity index 93%
rename from app/assets/stylesheets/admin/components/alert_row.scss
rename to app/webpacker/css/admin/components/alert_row.scss
index 8f07c1b054..c8c41651a5 100644
--- a/app/assets/stylesheets/admin/components/alert_row.scss
+++ b/app/webpacker/css/admin/components/alert_row.scss
@@ -1,5 +1,3 @@
-@import "../variables";
-
 .alert-row{
   margin-bottom: 10px;
   font-weight: bold;
diff --git a/app/assets/stylesheets/admin/components/buttons.scss b/app/webpacker/css/admin/components/buttons.scss
similarity index 100%
rename from app/assets/stylesheets/admin/components/buttons.scss
rename to app/webpacker/css/admin/components/buttons.scss
diff --git a/app/assets/stylesheets/admin/components/date-picker.scss b/app/webpacker/css/admin/components/date-picker.scss
similarity index 82%
rename from app/assets/stylesheets/admin/components/date-picker.scss
rename to app/webpacker/css/admin/components/date-picker.scss
index 0590db7599..8511a73617 100644
--- a/app/assets/stylesheets/admin/components/date-picker.scss
+++ b/app/webpacker/css/admin/components/date-picker.scss
@@ -1,7 +1,3 @@
-@import 'admin/globals/variables';
-@import 'admin/globals/mixins';
-@import 'admin/plugins/font-awesome';
-
 // scss-lint:disable QualifyingElement
 
 .date-range-filter {
diff --git a/app/assets/stylesheets/admin/components/dialogs.scss b/app/webpacker/css/admin/components/dialogs.scss
similarity index 94%
rename from app/assets/stylesheets/admin/components/dialogs.scss
rename to app/webpacker/css/admin/components/dialogs.scss
index 64f9bebc9d..298f8e1239 100644
--- a/app/assets/stylesheets/admin/components/dialogs.scss
+++ b/app/webpacker/css/admin/components/dialogs.scss
@@ -1,5 +1,3 @@
-@import "../variables";
-
 #info-dialog, #confirm-dialog {
   .message {
     .text, .icon {
diff --git a/app/assets/stylesheets/admin/components/input.scss b/app/webpacker/css/admin/components/input.scss
similarity index 100%
rename from app/assets/stylesheets/admin/components/input.scss
rename to app/webpacker/css/admin/components/input.scss
diff --git a/app/assets/stylesheets/admin/components/jquery_dialog.scss b/app/webpacker/css/admin/components/jquery_dialog.scss
similarity index 98%
rename from app/assets/stylesheets/admin/components/jquery_dialog.scss
rename to app/webpacker/css/admin/components/jquery_dialog.scss
index 79a12f7d4f..3bfddb8762 100644
--- a/app/assets/stylesheets/admin/components/jquery_dialog.scss
+++ b/app/webpacker/css/admin/components/jquery_dialog.scss
@@ -1,5 +1,3 @@
-@import "../variables";
-
 /**
 Main colors:
 dark: #545454
diff --git a/app/assets/stylesheets/admin/components/messages.scss b/app/webpacker/css/admin/components/messages.scss
similarity index 97%
rename from app/assets/stylesheets/admin/components/messages.scss
rename to app/webpacker/css/admin/components/messages.scss
index 18bf5b5a66..34970ce4c7 100644
--- a/app/assets/stylesheets/admin/components/messages.scss
+++ b/app/webpacker/css/admin/components/messages.scss
@@ -1,5 +1,3 @@
-@import 'admin/globals/variables';
-
 .errorExplanation {
   padding: 5px;
   border: 1px solid very-light($color-error, 12);
diff --git a/app/assets/stylesheets/admin/components/navigation.scss b/app/webpacker/css/admin/components/navigation.scss
similarity index 98%
rename from app/assets/stylesheets/admin/components/navigation.scss
rename to app/webpacker/css/admin/components/navigation.scss
index 4616cc3b4c..4291aa1901 100644
--- a/app/assets/stylesheets/admin/components/navigation.scss
+++ b/app/webpacker/css/admin/components/navigation.scss
@@ -1,5 +1,3 @@
-@import 'admin/globals/variables';
-
 // Navigation
 //---------------------------------------------------
 .inline-menu {
@@ -129,7 +127,7 @@ nav.menu {
     }
 
     &.selected a {
-      @extend a:hover;
+      @extend a, :hover;
     }
   }
 }
diff --git a/app/assets/stylesheets/admin/components/ng-cloak.scss b/app/webpacker/css/admin/components/ng-cloak.scss
similarity index 100%
rename from app/assets/stylesheets/admin/components/ng-cloak.scss
rename to app/webpacker/css/admin/components/ng-cloak.scss
diff --git a/app/assets/stylesheets/admin/components/page_actions.scss b/app/webpacker/css/admin/components/page_actions.scss
similarity index 100%
rename from app/assets/stylesheets/admin/components/page_actions.scss
rename to app/webpacker/css/admin/components/page_actions.scss
diff --git a/app/assets/stylesheets/admin/components/pagination.scss b/app/webpacker/css/admin/components/pagination.scss
similarity index 89%
rename from app/assets/stylesheets/admin/components/pagination.scss
rename to app/webpacker/css/admin/components/pagination.scss
index 3491585449..beba1f2159 100644
--- a/app/assets/stylesheets/admin/components/pagination.scss
+++ b/app/webpacker/css/admin/components/pagination.scss
@@ -1,6 +1,3 @@
-@import 'admin/globals/variables';
-@import "admin/variables";
-
 .pagination {
   text-align: center;
   margin: 2em 0 1em;
diff --git a/app/assets/stylesheets/admin/components/per_page_controls.scss b/app/webpacker/css/admin/components/per_page_controls.scss
similarity index 100%
rename from app/assets/stylesheets/admin/components/per_page_controls.scss
rename to app/webpacker/css/admin/components/per_page_controls.scss
diff --git a/app/assets/stylesheets/admin/components/product_autocomplete.scss b/app/webpacker/css/admin/components/product_autocomplete.scss
similarity index 100%
rename from app/assets/stylesheets/admin/components/product_autocomplete.scss
rename to app/webpacker/css/admin/components/product_autocomplete.scss
diff --git a/app/assets/stylesheets/admin/components/progress.scss b/app/webpacker/css/admin/components/progress.scss
similarity index 87%
rename from app/assets/stylesheets/admin/components/progress.scss
rename to app/webpacker/css/admin/components/progress.scss
index c3ea8c69b3..8221701587 100644
--- a/app/assets/stylesheets/admin/components/progress.scss
+++ b/app/webpacker/css/admin/components/progress.scss
@@ -1,6 +1,3 @@
-@import 'admin/globals/variables';
-@import 'admin/globals/mixins';
-
 #progress {
   @include border-radius(10px);
   position: fixed;
diff --git a/app/assets/stylesheets/admin/components/save_bar.scss b/app/webpacker/css/admin/components/save_bar.scss
similarity index 91%
rename from app/assets/stylesheets/admin/components/save_bar.scss
rename to app/webpacker/css/admin/components/save_bar.scss
index e5082cfafe..70f906119f 100644
--- a/app/assets/stylesheets/admin/components/save_bar.scss
+++ b/app/webpacker/css/admin/components/save_bar.scss
@@ -1,5 +1,3 @@
-@import "../variables";
-
 #save-bar {
   position: fixed;
   width: 100%;
diff --git a/app/assets/stylesheets/admin/components/sidebar.scss b/app/webpacker/css/admin/components/sidebar.scss
similarity index 93%
rename from app/assets/stylesheets/admin/components/sidebar.scss
rename to app/webpacker/css/admin/components/sidebar.scss
index 03047ba8db..960de96ab0 100644
--- a/app/assets/stylesheets/admin/components/sidebar.scss
+++ b/app/webpacker/css/admin/components/sidebar.scss
@@ -1,5 +1,3 @@
-@import 'admin/globals/variables';
-
 // Sidebar
 //---------------------------------------------------
 #sidebar {
diff --git a/app/assets/stylesheets/admin/components/simple_modal.scss b/app/webpacker/css/admin/components/simple_modal.scss
similarity index 91%
rename from app/assets/stylesheets/admin/components/simple_modal.scss
rename to app/webpacker/css/admin/components/simple_modal.scss
index 453fe6da4f..d7e1c1f914 100644
--- a/app/assets/stylesheets/admin/components/simple_modal.scss
+++ b/app/webpacker/css/admin/components/simple_modal.scss
@@ -1,5 +1,3 @@
-@import '../variables';
-
 .reveal-modal.simple-modal {
   width: 300px;
 
diff --git a/app/assets/stylesheets/admin/components/states.scss b/app/webpacker/css/admin/components/states.scss
similarity index 95%
rename from app/assets/stylesheets/admin/components/states.scss
rename to app/webpacker/css/admin/components/states.scss
index 11593f2f77..97ad366abf 100644
--- a/app/assets/stylesheets/admin/components/states.scss
+++ b/app/webpacker/css/admin/components/states.scss
@@ -1,5 +1,3 @@
-@import 'admin/globals/variables';
-
 .state {
   text-transform: uppercase;
   font-size: 80%;
diff --git a/app/assets/stylesheets/admin/components/stripe_connect_button.scss b/app/webpacker/css/admin/components/stripe_connect_button.scss
similarity index 100%
rename from app/assets/stylesheets/admin/components/stripe_connect_button.scss
rename to app/webpacker/css/admin/components/stripe_connect_button.scss
diff --git a/app/assets/stylesheets/admin/components/subscriptions_states.scss b/app/webpacker/css/admin/components/subscriptions_states.scss
similarity index 96%
rename from app/assets/stylesheets/admin/components/subscriptions_states.scss
rename to app/webpacker/css/admin/components/subscriptions_states.scss
index 2377684416..252e448d58 100644
--- a/app/assets/stylesheets/admin/components/subscriptions_states.scss
+++ b/app/webpacker/css/admin/components/subscriptions_states.scss
@@ -1,5 +1,3 @@
-@import "../variables";
-
 #subscriptions .state {
   border-radius: 3px;
   text-transform: uppercase;
diff --git a/app/assets/stylesheets/admin/components/table-filter.scss b/app/webpacker/css/admin/components/table-filter.scss
similarity index 100%
rename from app/assets/stylesheets/admin/components/table-filter.scss
rename to app/webpacker/css/admin/components/table-filter.scss
diff --git a/app/assets/stylesheets/admin/components/table_loading.scss b/app/webpacker/css/admin/components/table_loading.scss
similarity index 93%
rename from app/assets/stylesheets/admin/components/table_loading.scss
rename to app/webpacker/css/admin/components/table_loading.scss
index 7aededd14b..31a0c61894 100644
--- a/app/assets/stylesheets/admin/components/table_loading.scss
+++ b/app/webpacker/css/admin/components/table_loading.scss
@@ -1,5 +1,3 @@
-@import '../variables';
-
 .row-loading {
   opacity: .5;
 }
diff --git a/app/assets/stylesheets/admin/components/timepicker.scss b/app/webpacker/css/admin/components/timepicker.scss
similarity index 100%
rename from app/assets/stylesheets/admin/components/timepicker.scss
rename to app/webpacker/css/admin/components/timepicker.scss
diff --git a/app/assets/stylesheets/admin/components/todo.scss b/app/webpacker/css/admin/components/todo.scss
similarity index 100%
rename from app/assets/stylesheets/admin/components/todo.scss
rename to app/webpacker/css/admin/components/todo.scss
diff --git a/app/assets/stylesheets/admin/components/tooltip.scss b/app/webpacker/css/admin/components/tooltip.scss
similarity index 100%
rename from app/assets/stylesheets/admin/components/tooltip.scss
rename to app/webpacker/css/admin/components/tooltip.scss
diff --git a/app/assets/stylesheets/admin/components/wizard_progress.scss b/app/webpacker/css/admin/components/wizard_progress.scss
similarity index 98%
rename from app/assets/stylesheets/admin/components/wizard_progress.scss
rename to app/webpacker/css/admin/components/wizard_progress.scss
index f773f33ba0..af53ccad7a 100644
--- a/app/assets/stylesheets/admin/components/wizard_progress.scss
+++ b/app/webpacker/css/admin/components/wizard_progress.scss
@@ -1,5 +1,3 @@
-@import "../variables";
-
 $color_unselected: #d9d9d9;
 $color_selected: $spree-blue;
 
diff --git a/app/assets/stylesheets/admin/customers.scss b/app/webpacker/css/admin/customers.scss
similarity index 90%
rename from app/assets/stylesheets/admin/customers.scss
rename to app/webpacker/css/admin/customers.scss
index 0a10d9de06..f1284b4725 100644
--- a/app/assets/stylesheets/admin/customers.scss
+++ b/app/webpacker/css/admin/customers.scss
@@ -1,5 +1,3 @@
-@import "variables";
-
 .tag-with-rules {
   color: black;
 }
diff --git a/app/assets/stylesheets/admin/dashboard-single-ent.scss b/app/webpacker/css/admin/dashboard-single-ent.scss
similarity index 100%
rename from app/assets/stylesheets/admin/dashboard-single-ent.scss
rename to app/webpacker/css/admin/dashboard-single-ent.scss
diff --git a/app/assets/stylesheets/admin/dashboard_item.scss b/app/webpacker/css/admin/dashboard_item.scss
similarity index 99%
rename from app/assets/stylesheets/admin/dashboard_item.scss
rename to app/webpacker/css/admin/dashboard_item.scss
index 38d3e81786..829b98590f 100644
--- a/app/assets/stylesheets/admin/dashboard_item.scss
+++ b/app/webpacker/css/admin/dashboard_item.scss
@@ -1,5 +1,3 @@
-@import "variables";
-
 div.dashboard_item {
   margin-bottom: 30px;
 
diff --git a/app/assets/stylesheets/admin/dialog.scss b/app/webpacker/css/admin/dialog.scss
similarity index 100%
rename from app/assets/stylesheets/admin/dialog.scss
rename to app/webpacker/css/admin/dialog.scss
diff --git a/app/assets/stylesheets/admin/disabled.scss b/app/webpacker/css/admin/disabled.scss
similarity index 100%
rename from app/assets/stylesheets/admin/disabled.scss
rename to app/webpacker/css/admin/disabled.scss
diff --git a/app/assets/stylesheets/admin/dropdown.scss b/app/webpacker/css/admin/dropdown.scss
similarity index 98%
rename from app/assets/stylesheets/admin/dropdown.scss
rename to app/webpacker/css/admin/dropdown.scss
index 8c612f60e3..4a991cbffe 100644
--- a/app/assets/stylesheets/admin/dropdown.scss
+++ b/app/webpacker/css/admin/dropdown.scss
@@ -1,5 +1,3 @@
-@import "variables";
-
 #content-header .ofn-drop-down {
   border: none;
   background-color: $spree-blue;
diff --git a/app/assets/stylesheets/admin/enterprise_index_panels.scss b/app/webpacker/css/admin/enterprise_index_panels.scss
similarity index 98%
rename from app/assets/stylesheets/admin/enterprise_index_panels.scss
rename to app/webpacker/css/admin/enterprise_index_panels.scss
index 69940e2eb1..7d95b9b8e2 100644
--- a/app/assets/stylesheets/admin/enterprise_index_panels.scss
+++ b/app/webpacker/css/admin/enterprise_index_panels.scss
@@ -1,5 +1,3 @@
-@import "variables";
-
 .enterprise_package_panel, .enterprise_producer_panel {
   .info {
     p {
diff --git a/app/assets/stylesheets/admin/enterprises.scss b/app/webpacker/css/admin/enterprises.scss
similarity index 96%
rename from app/assets/stylesheets/admin/enterprises.scss
rename to app/webpacker/css/admin/enterprises.scss
index 2c74a30508..55fd17b3ac 100644
--- a/app/assets/stylesheets/admin/enterprises.scss
+++ b/app/webpacker/css/admin/enterprises.scss
@@ -1,5 +1,3 @@
-@import "variables";
-
 form[name="enterprise_form"] {
   div.row.warning {
     color: $warning-orange;
diff --git a/app/assets/stylesheets/admin/filters_and_controls.scss b/app/webpacker/css/admin/filters_and_controls.scss
similarity index 100%
rename from app/assets/stylesheets/admin/filters_and_controls.scss
rename to app/webpacker/css/admin/filters_and_controls.scss
diff --git a/app/assets/stylesheets/admin/globals/functions.scss b/app/webpacker/css/admin/globals/functions.scss
similarity index 100%
rename from app/assets/stylesheets/admin/globals/functions.scss
rename to app/webpacker/css/admin/globals/functions.scss
diff --git a/app/assets/stylesheets/admin/globals/mixins.scss b/app/webpacker/css/admin/globals/mixins.scss
similarity index 100%
rename from app/assets/stylesheets/admin/globals/mixins.scss
rename to app/webpacker/css/admin/globals/mixins.scss
diff --git a/app/assets/stylesheets/admin/globals/variables.scss b/app/webpacker/css/admin/globals/variables.scss
similarity index 99%
rename from app/assets/stylesheets/admin/globals/variables.scss
rename to app/webpacker/css/admin/globals/variables.scss
index 7244780159..204b4f799d 100644
--- a/app/assets/stylesheets/admin/globals/variables.scss
+++ b/app/webpacker/css/admin/globals/variables.scss
@@ -1,5 +1,3 @@
-@import 'shared/variables/layout';
-
 // -------------------------------------------------------------
 //   Variables used in all other files
 //--------------------------------------------------------------
diff --git a/app/assets/stylesheets/admin/grid.scss b/app/webpacker/css/admin/grid.scss
similarity index 100%
rename from app/assets/stylesheets/admin/grid.scss
rename to app/webpacker/css/admin/grid.scss
diff --git a/app/assets/stylesheets/admin/hacks/ie.scss b/app/webpacker/css/admin/hacks/ie.scss
similarity index 97%
rename from app/assets/stylesheets/admin/hacks/ie.scss
rename to app/webpacker/css/admin/hacks/ie.scss
index 4eff79ed84..b224b67d55 100644
--- a/app/assets/stylesheets/admin/hacks/ie.scss
+++ b/app/webpacker/css/admin/hacks/ie.scss
@@ -1,5 +1,3 @@
-@import 'admin/globals/variables';
-
 // IE general hacks
 html.ie {
 
diff --git a/app/assets/stylesheets/admin/hacks/mozilla.scss b/app/webpacker/css/admin/hacks/mozilla.scss
similarity index 100%
rename from app/assets/stylesheets/admin/hacks/mozilla.scss
rename to app/webpacker/css/admin/hacks/mozilla.scss
diff --git a/app/assets/stylesheets/admin/hacks/opera.scss b/app/webpacker/css/admin/hacks/opera.scss
similarity index 100%
rename from app/assets/stylesheets/admin/hacks/opera.scss
rename to app/webpacker/css/admin/hacks/opera.scss
diff --git a/app/assets/stylesheets/admin/icons.scss b/app/webpacker/css/admin/icons.scss
similarity index 100%
rename from app/assets/stylesheets/admin/icons.scss
rename to app/webpacker/css/admin/icons.scss
diff --git a/app/assets/stylesheets/admin/index_panel_buttons.scss b/app/webpacker/css/admin/index_panel_buttons.scss
similarity index 96%
rename from app/assets/stylesheets/admin/index_panel_buttons.scss
rename to app/webpacker/css/admin/index_panel_buttons.scss
index 4ff84bac89..09f7a6f65f 100644
--- a/app/assets/stylesheets/admin/index_panel_buttons.scss
+++ b/app/webpacker/css/admin/index_panel_buttons.scss
@@ -1,5 +1,3 @@
-@import "variables";
-
 tbody.panel-ctrl {
   tr.panel-row {
     > td {
diff --git a/app/assets/stylesheets/admin/index_panels.scss b/app/webpacker/css/admin/index_panels.scss
similarity index 99%
rename from app/assets/stylesheets/admin/index_panels.scss
rename to app/webpacker/css/admin/index_panels.scss
index 8625fbfed2..e20ee34a5f 100644
--- a/app/assets/stylesheets/admin/index_panels.scss
+++ b/app/webpacker/css/admin/index_panels.scss
@@ -1,5 +1,3 @@
-@import "variables";
-
 tbody.panel-ctrl {
   td.panel-toggle{
     -webkit-touch-callout: none;
diff --git a/app/assets/stylesheets/admin/modals.scss b/app/webpacker/css/admin/modals.scss
similarity index 100%
rename from app/assets/stylesheets/admin/modals.scss
rename to app/webpacker/css/admin/modals.scss
diff --git a/app/assets/stylesheets/admin/offsets.scss b/app/webpacker/css/admin/offsets.scss
similarity index 100%
rename from app/assets/stylesheets/admin/offsets.scss
rename to app/webpacker/css/admin/offsets.scss
diff --git a/app/assets/stylesheets/admin/openfoodnetwork.scss b/app/webpacker/css/admin/openfoodnetwork.scss
similarity index 99%
rename from app/assets/stylesheets/admin/openfoodnetwork.scss
rename to app/webpacker/css/admin/openfoodnetwork.scss
index d946d203bc..5ba6b879db 100644
--- a/app/assets/stylesheets/admin/openfoodnetwork.scss
+++ b/app/webpacker/css/admin/openfoodnetwork.scss
@@ -1,5 +1,3 @@
-@import "variables";
-
 .text-center {
   text-align: center;
 }
diff --git a/app/assets/stylesheets/admin/order_cycles.scss b/app/webpacker/css/admin/order_cycles.scss
similarity index 98%
rename from app/assets/stylesheets/admin/order_cycles.scss
rename to app/webpacker/css/admin/order_cycles.scss
index e651f867ab..012f2513c5 100644
--- a/app/assets/stylesheets/admin/order_cycles.scss
+++ b/app/webpacker/css/admin/order_cycles.scss
@@ -1,5 +1,3 @@
-@import "variables";
-
 form.order_cycle {
   margin-bottom: 5em;
 }
diff --git a/app/assets/stylesheets/admin/orders.scss b/app/webpacker/css/admin/orders.scss
similarity index 98%
rename from app/assets/stylesheets/admin/orders.scss
rename to app/webpacker/css/admin/orders.scss
index 2f66371ab4..b107947151 100644
--- a/app/assets/stylesheets/admin/orders.scss
+++ b/app/webpacker/css/admin/orders.scss
@@ -1,5 +1,3 @@
-@import "variables";
-
 input, div {
 	&.update-pending {
 	  border: solid 1px orange;
diff --git a/app/assets/stylesheets/admin/pages/enterprise_form.scss b/app/webpacker/css/admin/pages/enterprise_form.scss
similarity index 87%
rename from app/assets/stylesheets/admin/pages/enterprise_form.scss
rename to app/webpacker/css/admin/pages/enterprise_form.scss
index 55572be07c..5c588ba11a 100644
--- a/app/assets/stylesheets/admin/pages/enterprise_form.scss
+++ b/app/webpacker/css/admin/pages/enterprise_form.scss
@@ -1,5 +1,3 @@
-@import "../variables";
-
 span.unavailable,
 span.available {
   font-weight: bold;
diff --git a/app/assets/stylesheets/admin/pages/subscription_form.scss b/app/webpacker/css/admin/pages/subscription_form.scss
similarity index 84%
rename from app/assets/stylesheets/admin/pages/subscription_form.scss
rename to app/webpacker/css/admin/pages/subscription_form.scss
index b892c4f17e..02c9fd783e 100644
--- a/app/assets/stylesheets/admin/pages/subscription_form.scss
+++ b/app/webpacker/css/admin/pages/subscription_form.scss
@@ -1,5 +1,3 @@
-@import '../variables';
-
 .admin-subscription-form-subscription-line-items {
   .not-in-open-and-upcoming-order-cycles-warning {
     color: $warning-red;
diff --git a/app/assets/stylesheets/admin/pages/subscription_line_items.scss b/app/webpacker/css/admin/pages/subscription_line_items.scss
similarity index 100%
rename from app/assets/stylesheets/admin/pages/subscription_line_items.scss
rename to app/webpacker/css/admin/pages/subscription_line_items.scss
diff --git a/app/assets/stylesheets/admin/pages/subscription_review.scss b/app/webpacker/css/admin/pages/subscription_review.scss
similarity index 84%
rename from app/assets/stylesheets/admin/pages/subscription_review.scss
rename to app/webpacker/css/admin/pages/subscription_review.scss
index 76008afc0f..ba3280aa2b 100644
--- a/app/assets/stylesheets/admin/pages/subscription_review.scss
+++ b/app/webpacker/css/admin/pages/subscription_review.scss
@@ -1,5 +1,3 @@
-@import '../variables';
-
 .admin-subscription-review-subscription-line-items {
   .not-in-open-and-upcoming-order-cycles-warning {
     color: $warning-red;
diff --git a/app/assets/stylesheets/admin/plugins/flatpickr-customization.scss b/app/webpacker/css/admin/plugins/flatpickr-customization.scss
similarity index 100%
rename from app/assets/stylesheets/admin/plugins/flatpickr-customization.scss
rename to app/webpacker/css/admin/plugins/flatpickr-customization.scss
diff --git a/app/assets/stylesheets/admin/plugins/font-awesome.scss b/app/webpacker/css/admin/plugins/font-awesome.scss
similarity index 98%
rename from app/assets/stylesheets/admin/plugins/font-awesome.scss
rename to app/webpacker/css/admin/plugins/font-awesome.scss
index b65206187a..0de6dfa83e 100644
--- a/app/assets/stylesheets/admin/plugins/font-awesome.scss
+++ b/app/webpacker/css/admin/plugins/font-awesome.scss
@@ -27,8 +27,11 @@
  * -------------------------- */
 @font-face {
   font-family: 'FontAwesome';
-  src: font-url('fontawesome-webfont.eot?v=3.2.1');
-  src: font-url('fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), font-url('fontawesome-webfont.woff?v=3.2.1') format('woff'), font-url('fontawesome-webfont.ttf?v=3.2.1') format('truetype'), font-url('fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
+  src: url('../fonts/fontawesome-webfont.eot?v=3.2.1');
+  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'),
+      url('../fonts/fontawesome-webfont.woff?v=3.2.1') format('woff'),
+      url('../fonts/fontawesome-webfont.ttf?v=3.2.1') format('truetype'),
+      url('../fonts/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
   font-weight: normal;
   font-style: normal;
 }
diff --git a/app/assets/stylesheets/admin/plugins/jstree.scss b/app/webpacker/css/admin/plugins/jstree.scss
similarity index 94%
rename from app/assets/stylesheets/admin/plugins/jstree.scss
rename to app/webpacker/css/admin/plugins/jstree.scss
index 4ae9f82baf..0fad9d6578 100644
--- a/app/assets/stylesheets/admin/plugins/jstree.scss
+++ b/app/webpacker/css/admin/plugins/jstree.scss
@@ -1,14 +1,10 @@
-@import 'admin/globals/variables';
-@import 'admin/globals/mixins';
-@import 'admin/plugins/font-awesome';
-
 #taxonomy_tree {
   > ul, .jstree-icon {
     background-image: none;
   }
   
   .jstree-icon {
-    @extend [class^="icon-"]:before;
+    @extend [class^="icon-"], :before;
   }
 
   .jstree-open > .jstree-icon {    
@@ -46,7 +42,7 @@
 #jstree-marker {
   background-image: none !important;
   background-color: transparent !important;
-  @extend [class^="icon-"]:before;   
+  @extend [class^="icon-"], :before;
 }
 #vakata-dragged.jstree-apple .jstree-invalid {
   @extend .icon-remove;  
diff --git a/app/assets/stylesheets/admin/plugins/powertip.scss b/app/webpacker/css/admin/plugins/powertip.scss
similarity index 96%
rename from app/assets/stylesheets/admin/plugins/powertip.scss
rename to app/webpacker/css/admin/plugins/powertip.scss
index ffa9ff7a94..b53f47a7e4 100644
--- a/app/assets/stylesheets/admin/plugins/powertip.scss
+++ b/app/webpacker/css/admin/plugins/powertip.scss
@@ -1,6 +1,3 @@
-@import 'admin/globals/variables';
-@import 'admin/globals/mixins';
-
 #powerTip {
   background-color: $color-3;
   padding: 5px 15px;
diff --git a/app/assets/stylesheets/admin/plugins/select2.scss b/app/webpacker/css/admin/plugins/select2.scss
similarity index 91%
rename from app/assets/stylesheets/admin/plugins/select2.scss
rename to app/webpacker/css/admin/plugins/select2.scss
index d290394819..705385207c 100644
--- a/app/assets/stylesheets/admin/plugins/select2.scss
+++ b/app/webpacker/css/admin/plugins/select2.scss
@@ -1,11 +1,3 @@
-@import 'admin/globals/functions';
-@import 'admin/globals/variables';
-@import 'admin/globals/mixins';
-
-@import 'admin/shared/forms';
-
-@import 'admin/plugins/font-awesome';
-
 .select2-container {
   &:hover .select2-choice, &.select2-container-active .select2-choice {
     background-color: $color-sel-hover-bg !important;
@@ -32,7 +24,7 @@
       background-image: none !important;
       font-size: 100% !important;
       @extend .icon-remove;
-      @extend [class^="icon-"]:before;
+      @extend [class^="icon-"], :before;
       margin-top: 2px;
     }
   }
@@ -66,7 +58,7 @@
   padding: 0 9px 0 0;
 
   &:before {
-    @extend [class^="icon-"]:before;
+    @extend [class^="icon-"], :before;
 
     position: absolute;
     top: 13px;
@@ -74,7 +66,7 @@
   }
 
   input {
-    @extend input[type="text"];
+    @extend input, [type="text"];
 
     padding: 6px 0 6px 25px;
     margin: 5px 0 0 5px;
@@ -151,7 +143,7 @@
     }
   }
   .select2-choices {
-    @extend input[type="text"];
+    @extend input, [type="text"];
     padding: 6px 3px 3px 3px;
     box-shadow: none;
     background-image: none !important;
@@ -174,7 +166,7 @@
         background-image: none !important;
         font-size: 85% !important;
         @extend .icon-remove;
-        @extend [class^="icon-"]:before;
+        @extend [class^="icon-"], :before;
         margin-left: 2px;
         color: $color-1;
       }
diff --git a/app/assets/stylesheets/admin/product_import.scss b/app/webpacker/css/admin/product_import.scss
similarity index 99%
rename from app/assets/stylesheets/admin/product_import.scss
rename to app/webpacker/css/admin/product_import.scss
index 20dcc481f1..db5f8b52d6 100644
--- a/app/assets/stylesheets/admin/product_import.scss
+++ b/app/webpacker/css/admin/product_import.scss
@@ -1,5 +1,3 @@
-@import "variables";
-
 $pi-red: $warning-red;
 $pi-green: lighten($spree-green, 10%);
 $pi-orange: $bright-orange;
diff --git a/app/assets/stylesheets/admin/products.scss b/app/webpacker/css/admin/products.scss
similarity index 99%
rename from app/assets/stylesheets/admin/products.scss
rename to app/webpacker/css/admin/products.scss
index 832bd67fc2..7800b28446 100644
--- a/app/assets/stylesheets/admin/products.scss
+++ b/app/webpacker/css/admin/products.scss
@@ -1,5 +1,3 @@
-@import "variables";
-
 #product_distributors_field span {
   display: block;
 }
diff --git a/app/assets/stylesheets/admin/question-mark-tooltip.scss b/app/webpacker/css/admin/question-mark-tooltip.scss
similarity index 100%
rename from app/assets/stylesheets/admin/question-mark-tooltip.scss
rename to app/webpacker/css/admin/question-mark-tooltip.scss
diff --git a/app/assets/stylesheets/admin/relationships.scss b/app/webpacker/css/admin/relationships.scss
similarity index 100%
rename from app/assets/stylesheets/admin/relationships.scss
rename to app/webpacker/css/admin/relationships.scss
diff --git a/app/assets/stylesheets/admin/reports.scss b/app/webpacker/css/admin/reports.scss
similarity index 94%
rename from app/assets/stylesheets/admin/reports.scss
rename to app/webpacker/css/admin/reports.scss
index 24c0411708..e8c36b6af6 100644
--- a/app/assets/stylesheets/admin/reports.scss
+++ b/app/webpacker/css/admin/reports.scss
@@ -1,5 +1,3 @@
-@import "variables";
-
 .report__table {
   margin-top: 2em;
 }
diff --git a/app/assets/stylesheets/admin/sections/orders.scss b/app/webpacker/css/admin/sections/orders.scss
similarity index 95%
rename from app/assets/stylesheets/admin/sections/orders.scss
rename to app/webpacker/css/admin/sections/orders.scss
index 47b84337b9..e8f4d79692 100644
--- a/app/assets/stylesheets/admin/sections/orders.scss
+++ b/app/webpacker/css/admin/sections/orders.scss
@@ -1,5 +1,3 @@
-@import 'admin/globals/variables';
-
 // Customize orders filter
 [data-hook="admin_orders_index_search"] {
   select[data-placeholder="Status"] {
diff --git a/app/assets/stylesheets/admin/sections/products.scss b/app/webpacker/css/admin/sections/products.scss
similarity index 88%
rename from app/assets/stylesheets/admin/sections/products.scss
rename to app/webpacker/css/admin/sections/products.scss
index a56a3ada17..7740149ca1 100644
--- a/app/assets/stylesheets/admin/sections/products.scss
+++ b/app/webpacker/css/admin/sections/products.scss
@@ -1,5 +1,3 @@
-@import 'admin/globals/variables';
-
 [data-hook="admin_product_form_fields"] {
   label {
     display: inline-block;
diff --git a/app/assets/stylesheets/admin/select2.scss b/app/webpacker/css/admin/select2.scss
similarity index 97%
rename from app/assets/stylesheets/admin/select2.scss
rename to app/webpacker/css/admin/select2.scss
index ec8f3234b6..8c6204bb96 100644
--- a/app/assets/stylesheets/admin/select2.scss
+++ b/app/webpacker/css/admin/select2.scss
@@ -1,5 +1,3 @@
-@import "variables";
-
 .select2-container {
   .select2-choice {
     .select2-search-choice-close {
diff --git a/app/assets/stylesheets/admin/shared/forms.scss b/app/webpacker/css/admin/shared/forms.scss
similarity index 97%
rename from app/assets/stylesheets/admin/shared/forms.scss
rename to app/webpacker/css/admin/shared/forms.scss
index 850cf83fc2..84d2c2bd9e 100644
--- a/app/assets/stylesheets/admin/shared/forms.scss
+++ b/app/webpacker/css/admin/shared/forms.scss
@@ -1,6 +1,3 @@
-@import 'admin/globals/variables';
-@import 'admin/globals/mixins';
-
 input[type="text"],
 input[type="password"],
 input[type="email"],
@@ -238,6 +235,6 @@ fieldset {
 }
 
 select {
-  @extend input[type="text"];
+  @extend input, [type="text"];
   background-color: white;
 }
diff --git a/app/webpacker/css/admin/shared/icons.scss b/app/webpacker/css/admin/shared/icons.scss
new file mode 100644
index 0000000000..a6ad0a7f09
--- /dev/null
+++ b/app/webpacker/css/admin/shared/icons.scss
@@ -0,0 +1,24 @@
+// Some fixes for fontwesome stylesheets
+[class^="icon-"], [class*=" icon-"] {
+  &:before {
+    padding-right: 5px;
+  }
+
+  &.button, &.icon_link {
+    width: auto;
+
+    &:before {
+      padding-top: 3px;
+    }
+  }
+}
+
+.icon-email:before    { @extend .icon-envelope, :before; }
+.icon-resend_authorization_email:before    { @extend .icon-envelope, :before; }
+.icon-resume:before   { @extend .icon-refresh, :before; }
+
+.icon-cancel:before,
+.icon-void:before     { @extend .icon-remove, :before;   }
+
+.icon-capture  { @extend .icon-ok }
+.icon-credit:before   { @extend .icon-ok, :before ;      }
diff --git a/app/assets/stylesheets/admin/shared/layout.scss b/app/webpacker/css/admin/shared/layout.scss
similarity index 98%
rename from app/assets/stylesheets/admin/shared/layout.scss
rename to app/webpacker/css/admin/shared/layout.scss
index 17af56a59b..7705d09caa 100644
--- a/app/assets/stylesheets/admin/shared/layout.scss
+++ b/app/webpacker/css/admin/shared/layout.scss
@@ -1,5 +1,3 @@
-@import 'admin/globals/variables';
-
 // Basics
 //---------------------------------------------------
 * {
diff --git a/app/assets/stylesheets/admin/shared/scroll_bar.scss b/app/webpacker/css/admin/shared/scroll_bar.scss
similarity index 100%
rename from app/assets/stylesheets/admin/shared/scroll_bar.scss
rename to app/webpacker/css/admin/shared/scroll_bar.scss
diff --git a/app/assets/stylesheets/admin/shared/tables.scss b/app/webpacker/css/admin/shared/tables.scss
similarity index 97%
rename from app/assets/stylesheets/admin/shared/tables.scss
rename to app/webpacker/css/admin/shared/tables.scss
index 93b3a5070d..e1f5abe35f 100644
--- a/app/assets/stylesheets/admin/shared/tables.scss
+++ b/app/webpacker/css/admin/shared/tables.scss
@@ -1,6 +1,3 @@
-@import 'admin/globals/variables';
-@import 'admin/plugins/font-awesome';
-
 table {
   width: 100%;
   margin-bottom: 15px;
@@ -107,8 +104,11 @@ table {
     }
 
     .handle {
-      @extend [class^="icon-"]:before;
       @extend .icon-reorder;
+      font-family: FontAwesome;
+      text-decoration: inherit;
+      display: inline-block;
+      speak: none;
       cursor: move;
     }
 
diff --git a/app/assets/stylesheets/admin/shared/typography.scss b/app/webpacker/css/admin/shared/typography.scss
similarity index 98%
rename from app/assets/stylesheets/admin/shared/typography.scss
rename to app/webpacker/css/admin/shared/typography.scss
index ebea6dbb17..91918daba5 100644
--- a/app/assets/stylesheets/admin/shared/typography.scss
+++ b/app/webpacker/css/admin/shared/typography.scss
@@ -1,5 +1,3 @@
-@import 'admin/globals/variables';
-
 // Base
 //--------------------------------------------------------------
 body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, th, td { margin: 0; padding: 0; font-size: 13px; }
diff --git a/app/assets/stylesheets/admin/side_menu.scss b/app/webpacker/css/admin/side_menu.scss
similarity index 95%
rename from app/assets/stylesheets/admin/side_menu.scss
rename to app/webpacker/css/admin/side_menu.scss
index 8cb912814d..398787b7b8 100644
--- a/app/assets/stylesheets/admin/side_menu.scss
+++ b/app/webpacker/css/admin/side_menu.scss
@@ -1,5 +1,3 @@
-@import "variables";
-
 .side_menu {
   border-right: 2px solid #f6f6f6;
   border-top: 2px solid #f6f6f6;
diff --git a/app/assets/stylesheets/admin/sidebar-item.scss b/app/webpacker/css/admin/sidebar-item.scss
similarity index 98%
rename from app/assets/stylesheets/admin/sidebar-item.scss
rename to app/webpacker/css/admin/sidebar-item.scss
index 9d7047976f..b9d34b27f1 100644
--- a/app/assets/stylesheets/admin/sidebar-item.scss
+++ b/app/webpacker/css/admin/sidebar-item.scss
@@ -1,5 +1,3 @@
-@import "variables";
-
 div.sidebar_item {
   margin-bottom: 30px;
 
diff --git a/app/assets/stylesheets/admin/tables.scss b/app/webpacker/css/admin/tables.scss
similarity index 100%
rename from app/assets/stylesheets/admin/tables.scss
rename to app/webpacker/css/admin/tables.scss
diff --git a/app/assets/stylesheets/admin/tag_rules.scss b/app/webpacker/css/admin/tag_rules.scss
similarity index 98%
rename from app/assets/stylesheets/admin/tag_rules.scss
rename to app/webpacker/css/admin/tag_rules.scss
index b1bbc1f0e0..8650f11c22 100644
--- a/app/assets/stylesheets/admin/tag_rules.scss
+++ b/app/webpacker/css/admin/tag_rules.scss
@@ -1,5 +1,3 @@
-@import "variables";
-
 tags-input {
   &.limit-reached {
     input, span.input {
diff --git a/app/assets/stylesheets/admin/terms_of_service_files.scss b/app/webpacker/css/admin/terms_of_service_files.scss
similarity index 100%
rename from app/assets/stylesheets/admin/terms_of_service_files.scss
rename to app/webpacker/css/admin/terms_of_service_files.scss
diff --git a/app/assets/stylesheets/admin/validation.scss b/app/webpacker/css/admin/validation.scss
similarity index 100%
rename from app/assets/stylesheets/admin/validation.scss
rename to app/webpacker/css/admin/validation.scss
diff --git a/app/assets/stylesheets/admin/variables.scss b/app/webpacker/css/admin/variables.scss
similarity index 100%
rename from app/assets/stylesheets/admin/variables.scss
rename to app/webpacker/css/admin/variables.scss
diff --git a/app/assets/stylesheets/admin/variant_overrides.scss b/app/webpacker/css/admin/variant_overrides.scss
similarity index 84%
rename from app/assets/stylesheets/admin/variant_overrides.scss
rename to app/webpacker/css/admin/variant_overrides.scss
index f74e15ecb9..c01673b292 100644
--- a/app/assets/stylesheets/admin/variant_overrides.scss
+++ b/app/webpacker/css/admin/variant_overrides.scss
@@ -1,5 +1,3 @@
-@import "variables";
-
 .variant-override-unit {
   float: right;
   font-style: italic;
diff --git a/app/assets/stylesheets/admin/welcome.scss b/app/webpacker/css/admin/welcome.scss
similarity index 86%
rename from app/assets/stylesheets/admin/welcome.scss
rename to app/webpacker/css/admin/welcome.scss
index 89f277db4d..eac98dd5a5 100644
--- a/app/assets/stylesheets/admin/welcome.scss
+++ b/app/webpacker/css/admin/welcome.scss
@@ -7,7 +7,7 @@
 
     @include fullbg;
     background-color: black;
-    background-image: image-url("home/tagline-bg.jpg");
+    background-image: url("../images/home/tagline-bg.jpg");
     background-repeat: no-repeat;
     background-position: center center;
     margin-bottom: 2em;
diff --git a/app/assets/stylesheets/darkswarm/_shop-filters.scss b/app/webpacker/css/darkswarm/_shop-filters.scss
similarity index 97%
rename from app/assets/stylesheets/darkswarm/_shop-filters.scss
rename to app/webpacker/css/darkswarm/_shop-filters.scss
index b7296778ab..e9ff3b8aac 100644
--- a/app/assets/stylesheets/darkswarm/_shop-filters.scss
+++ b/app/webpacker/css/darkswarm/_shop-filters.scss
@@ -1,8 +1,3 @@
-@import "mixins";
-@import "branding";
-@import "big-input";
-@import "animations";
-@import "variables";
 
 @mixin filter-selector($base-clr, $border-clr, $hover-clr) {
   &.inline-block, ul.inline-block {
diff --git a/app/assets/stylesheets/darkswarm/_shop-inputs.scss b/app/webpacker/css/darkswarm/_shop-inputs.scss
similarity index 96%
rename from app/assets/stylesheets/darkswarm/_shop-inputs.scss
rename to app/webpacker/css/darkswarm/_shop-inputs.scss
index 435d4eb3ac..bf902f55b9 100644
--- a/app/assets/stylesheets/darkswarm/_shop-inputs.scss
+++ b/app/webpacker/css/darkswarm/_shop-inputs.scss
@@ -1,8 +1,3 @@
-@import "mixins";
-@import "variables";
-@import "branding";
-@import "big-input";
-
 .darkswarm {
   // #search
   @include placeholder(rgba(0, 0, 0, 0.4), #777);
diff --git a/app/assets/stylesheets/darkswarm/_shop-modals.scss b/app/webpacker/css/darkswarm/_shop-modals.scss
similarity index 100%
rename from app/assets/stylesheets/darkswarm/_shop-modals.scss
rename to app/webpacker/css/darkswarm/_shop-modals.scss
diff --git a/app/assets/stylesheets/darkswarm/_shop-navigation.scss b/app/webpacker/css/darkswarm/_shop-navigation.scss
similarity index 95%
rename from app/assets/stylesheets/darkswarm/_shop-navigation.scss
rename to app/webpacker/css/darkswarm/_shop-navigation.scss
index 152a3c97f4..d01897d942 100644
--- a/app/assets/stylesheets/darkswarm/_shop-navigation.scss
+++ b/app/webpacker/css/darkswarm/_shop-navigation.scss
@@ -1,7 +1,3 @@
-@import "mixins";
-@import "typography";
-@import "variables";
-
 ordercycle {
   float: right;
   background: $grey-050;
@@ -64,7 +60,7 @@ ordercycle {
     }
 
     select {
-      background-image: image-url('white-caret.svg');
+      background-image: url('../images/white-caret.svg');
       background-size: 30px auto;
       background-position-x: 102%;
       height: 2.35em;
@@ -149,7 +145,7 @@ shop ordercycle {
 
       select {
         background-color: $white;
-        background-image: image-url('black-caret.svg');
+        background-image: url('../images/black-caret.svg');
         color: $grey-500;
         font-style: italic;
       }
diff --git a/app/assets/stylesheets/darkswarm/_shop-popovers.scss b/app/webpacker/css/darkswarm/_shop-popovers.scss
similarity index 97%
rename from app/assets/stylesheets/darkswarm/_shop-popovers.scss
rename to app/webpacker/css/darkswarm/_shop-popovers.scss
index d91f870330..1877420f0f 100644
--- a/app/assets/stylesheets/darkswarm/_shop-popovers.scss
+++ b/app/webpacker/css/darkswarm/_shop-popovers.scss
@@ -1,6 +1,3 @@
-@import "mixins";
-@import "branding";
-
 // Pop over
 // Foundation overrides
 .joyride-tip-guide.price_breakdown {
diff --git a/app/assets/stylesheets/darkswarm/_shop-product-rows.scss b/app/webpacker/css/darkswarm/_shop-product-rows.scss
similarity index 98%
rename from app/assets/stylesheets/darkswarm/_shop-product-rows.scss
rename to app/webpacker/css/darkswarm/_shop-product-rows.scss
index 4ecfd5182d..888b0e157e 100644
--- a/app/assets/stylesheets/darkswarm/_shop-product-rows.scss
+++ b/app/webpacker/css/darkswarm/_shop-product-rows.scss
@@ -1,7 +1,3 @@
-@import "mixins";
-@import "branding";
-@import "animations";
-
 .darkswarm {
   products {
     product {
diff --git a/app/assets/stylesheets/darkswarm/_shop-product-thumb.scss b/app/webpacker/css/darkswarm/_shop-product-thumb.scss
similarity index 100%
rename from app/assets/stylesheets/darkswarm/_shop-product-thumb.scss
rename to app/webpacker/css/darkswarm/_shop-product-thumb.scss
diff --git a/app/assets/stylesheets/darkswarm/account.scss b/app/webpacker/css/darkswarm/account.scss
similarity index 97%
rename from app/assets/stylesheets/darkswarm/account.scss
rename to app/webpacker/css/darkswarm/account.scss
index d73e4b7367..782c97cc32 100644
--- a/app/assets/stylesheets/darkswarm/account.scss
+++ b/app/webpacker/css/darkswarm/account.scss
@@ -1,7 +1,3 @@
-@import "branding";
-@import "mixins";
-@import "variables";
-
 .account-summary {
   color: #4a4a4a;
 }
diff --git a/app/assets/stylesheets/darkswarm/active_table.scss b/app/webpacker/css/darkswarm/active_table.scss
similarity index 97%
rename from app/assets/stylesheets/darkswarm/active_table.scss
rename to app/webpacker/css/darkswarm/active_table.scss
index 395ad7c876..7e9d78a662 100644
--- a/app/assets/stylesheets/darkswarm/active_table.scss
+++ b/app/webpacker/css/darkswarm/active_table.scss
@@ -1,7 +1,3 @@
-@import "branding";
-@import "mixins";
-@import "compass/css3/user-interface";
-
 .no-results {
   font-size: 1.875rem;
 }
diff --git a/app/assets/stylesheets/darkswarm/active_table_search.scss b/app/webpacker/css/darkswarm/active_table_search.scss
similarity index 96%
rename from app/assets/stylesheets/darkswarm/active_table_search.scss
rename to app/webpacker/css/darkswarm/active_table_search.scss
index 486e79178a..63d2c2a697 100644
--- a/app/assets/stylesheets/darkswarm/active_table_search.scss
+++ b/app/webpacker/css/darkswarm/active_table_search.scss
@@ -1,8 +1,3 @@
-@import "mixins";
-@import "branding";
-@import "big-input";
-@import "animations";
-
 // Filter-box
 .row .row.filter-box {
   margin-left: 0;
diff --git a/app/webpacker/css/darkswarm/all.scss b/app/webpacker/css/darkswarm/all.scss
new file mode 100644
index 0000000000..803fcbe2a6
--- /dev/null
+++ b/app/webpacker/css/darkswarm/all.scss
@@ -0,0 +1,78 @@
+
+@import 'vendor/assets/stylesheets/autocomplete';
+@import 'vendor/assets/stylesheets/leaflet';
+@import 'variables';
+@import '../shared/variables/layout';
+@import '~foundation-sites/scss/foundation';
+
+@import 'big-input';
+@import 'branding';
+@import 'typography';
+@import 'mixins';
+
+@import 'base/colors';
+@import 'animations';
+
+@import "compass/support";
+@import "compass/css3/transition";
+@import "compass/css3/user-interface";
+
+@import 'layout/offcanvas';
+@import 'shop-filters';
+@import 'shop-modals';
+@import 'shop-product-thumb';
+@import 'account';
+@import 'active_table';
+@import 'active_table_search';
+@import 'angular';
+@import 'cart-dropdown';
+@import 'cart-page';
+@import 'checkout';
+@import 'collapsible';
+@import 'distributor_header';
+@import 'embedded_shopfront';
+@import 'expanding-sidebar';
+@import 'footer';
+@import 'forms';
+@import 'groups';
+@import 'help-modal';
+@import 'home_panes';
+@import 'home_tagline';
+@import 'hub_node';
+@import 'hubs';
+@import 'ie_warning';
+@import 'images';
+@import 'lists';
+@import 'loading';
+@import 'map';
+@import 'menu';
+@import 'modal-enterprises';
+@import 'modals';
+@import 'overrides';
+@import 'page_alert';
+@import 'producer_node';
+@import 'producers';
+@import 'product_table';
+@import 'registration';
+@import 'shop';
+@import 'shop_search';
+@import 'shop_tabs';
+@import 'sidebar';
+@import 'signup';
+@import 'split-checkout';
+@import 'stripe-elements';
+@import 'style';
+@import 'tables';
+@import 'tabset';
+@import 'taxons';
+@import 'ui';
+
+@import 'pages/login_modal';
+@import 'web/all';
+
+ofn-modal {
+  display: block;
+}
+
+@import "../shared/question-mark-icon";
+@import '../admin/shared/scroll_bar';
diff --git a/app/assets/stylesheets/darkswarm/angular.scss b/app/webpacker/css/darkswarm/angular.scss
similarity index 100%
rename from app/assets/stylesheets/darkswarm/angular.scss
rename to app/webpacker/css/darkswarm/angular.scss
diff --git a/app/assets/stylesheets/darkswarm/animations.scss b/app/webpacker/css/darkswarm/animations.scss
similarity index 99%
rename from app/assets/stylesheets/darkswarm/animations.scss
rename to app/webpacker/css/darkswarm/animations.scss
index cd5f3a5f89..406cca504d 100644
--- a/app/assets/stylesheets/darkswarm/animations.scss
+++ b/app/webpacker/css/darkswarm/animations.scss
@@ -1,5 +1,3 @@
-@import "mixins";
-
 .turbo-progress-bar {
   background-color: $teal-400;
 }
diff --git a/app/webpacker/css/darkswarm/base/colors.scss b/app/webpacker/css/darkswarm/base/colors.scss
new file mode 100644
index 0000000000..fd2eeb9c9e
--- /dev/null
+++ b/app/webpacker/css/darkswarm/base/colors.scss
@@ -0,0 +1,43 @@
+
+//// Foundation base variables
+//
+//$white         : #FFFFFF !default;
+//$ghost         : #FAFAFA !default;
+//$snow          : #F9F9F9 !default;
+//$vapor         : #F6F6F6 !default;
+//$white-smoke   : #F5F5F5 !default;
+//$silver        : #EFEFEF !default;
+//$smoke         : #EEEEEE !default;
+//$gainsboro     : #DDDDDD !default;
+//$iron          : #CCCCCC !default;
+//$base          : #AAAAAA !default;
+//$aluminum      : #999999 !default;
+//$jumbo         : #888888 !default;
+//$monsoon       : #777777 !default;
+//$steel         : #666666 !default;
+//$charcoal      : #555555 !default;
+//$tuatara       : #444444 !default;
+//$oil           : #333333 !default;
+//$jet           : #222222 !default;
+//$black         : #000000 !default;
+//
+//// We use these as default colors throughout
+//$primary-color: #008CBA !default;   // bondi-blue
+//$secondary-color: #e7e7e7 !default; // white-lilac
+//$alert-color: #f04124 !default;     // cinnabar
+//$success-color: #43AC6A !default;   // sea-green
+//$warning-color: #f08a24 !default;   // carrot
+//$info-color: #a0d3e8 !default;      // cornflower
+
+
+$modal-background-color: #efefef;
+$modal-content-background-color: #fff;
+$modal-alert-link-color: #fff;
+$modal-alert-link-hover-color: rgba(255, 255, 255, .7);
+
+$cookies-banner-background-color: $dark-grey;
+$cookies-banner-button-background-color: $clr-turquoise;
+$cookies-banner-text-color: $white;
+$cookies-policy-modal-background-color: $disabled-light;
+$cookies-policy-modal-border-bottom-color: $disabled-light;
+$cookies-policy-modal-table-tr-even-background-color: $disabled-very-light;
diff --git a/app/assets/stylesheets/darkswarm/big-input.scss b/app/webpacker/css/darkswarm/big-input.scss
similarity index 96%
rename from app/assets/stylesheets/darkswarm/big-input.scss
rename to app/webpacker/css/darkswarm/big-input.scss
index 10336e30c6..6779ed29e2 100644
--- a/app/assets/stylesheets/darkswarm/big-input.scss
+++ b/app/webpacker/css/darkswarm/big-input.scss
@@ -1,8 +1,3 @@
-@import "typography";
-@import "branding";
-@import "animations";
-@import "mixins";
-
 //Big search used in active table search \\
 
 @mixin big-input($input, $inputhvr, $inputactv) {
diff --git a/app/assets/stylesheets/darkswarm/branding.scss b/app/webpacker/css/darkswarm/branding.scss
similarity index 100%
rename from app/assets/stylesheets/darkswarm/branding.scss
rename to app/webpacker/css/darkswarm/branding.scss
diff --git a/app/assets/stylesheets/darkswarm/cart-dropdown.scss b/app/webpacker/css/darkswarm/cart-dropdown.scss
similarity index 97%
rename from app/assets/stylesheets/darkswarm/cart-dropdown.scss
rename to app/webpacker/css/darkswarm/cart-dropdown.scss
index eeb6681a7f..d4bbdbed89 100644
--- a/app/assets/stylesheets/darkswarm/cart-dropdown.scss
+++ b/app/webpacker/css/darkswarm/cart-dropdown.scss
@@ -1,7 +1,3 @@
-@import "mixins";
-@import "variables";
-@import "branding";
-
 .expanding-sidebar.cart-sidebar {
   .background {
     z-index: 150;
diff --git a/app/assets/stylesheets/darkswarm/cart-page.scss b/app/webpacker/css/darkswarm/cart-page.scss
similarity index 90%
rename from app/assets/stylesheets/darkswarm/cart-page.scss
rename to app/webpacker/css/darkswarm/cart-page.scss
index 5d0f833759..6feeae9d46 100644
--- a/app/assets/stylesheets/darkswarm/cart-page.scss
+++ b/app/webpacker/css/darkswarm/cart-page.scss
@@ -1,8 +1,3 @@
-@import "mixins";
-@import "branding";
-@import "compass/css3/user-interface";
-@import "variables";
-
 #update-cart {
   #errorExplanation {
     display: none;
diff --git a/app/assets/stylesheets/darkswarm/checkout.scss b/app/webpacker/css/darkswarm/checkout.scss
similarity index 96%
rename from app/assets/stylesheets/darkswarm/checkout.scss
rename to app/webpacker/css/darkswarm/checkout.scss
index df51d9de34..c77f94968a 100644
--- a/app/assets/stylesheets/darkswarm/checkout.scss
+++ b/app/webpacker/css/darkswarm/checkout.scss
@@ -1,7 +1,3 @@
-@import "mixins";
-@import "branding";
-@import "animations";
-
 .order-summary {
   background-color: #e1f0f5;
   padding: 1em;
diff --git a/app/assets/stylesheets/darkswarm/collapsible.scss b/app/webpacker/css/darkswarm/collapsible.scss
similarity index 100%
rename from app/assets/stylesheets/darkswarm/collapsible.scss
rename to app/webpacker/css/darkswarm/collapsible.scss
diff --git a/app/webpacker/css/darkswarm/compass/css3/transition.scss b/app/webpacker/css/darkswarm/compass/css3/transition.scss
new file mode 100644
index 0000000000..51cf30968c
--- /dev/null
+++ b/app/webpacker/css/darkswarm/compass/css3/transition.scss
@@ -0,0 +1,187 @@
+// The the user threshold for transition support. Defaults to `$graceful-usage-threshold`
+$transition-support-threshold: $graceful-usage-threshold !default;
+
+// CSS Transitions
+// Currently only works in Webkit.
+//
+// * expected in CSS3, FireFox 3.6/7 and Opera Presto 2.3
+// * We'll be prepared.
+//
+// Including this submodule sets following defaults for the mixins:
+//
+//     $default-transition-property : all
+//     $default-transition-duration : 1s
+//     $default-transition-function : false
+//     $default-transition-delay    : false
+//
+// Override them if you like. Timing-function and delay are set to false for browser defaults (ease, 0s).
+
+$default-transition-property: all !default;
+
+$default-transition-duration: 1s !default;
+
+$default-transition-function: null !default;
+
+$default-transition-delay: null !default;
+
+$transitionable-prefixed-values: transform, transform-origin !default;
+
+
+
+// Checks if the value given is a unit of time.
+@function is-time($value) {
+  @return if(type-of($value) == number, not not index(s ms, unit($value)), false);
+}
+
+// Returns `$property` with the given prefix if it is found in `$transitionable-prefixed-values`.
+@function prefixed-for-transition($prefix, $property) {
+  @if not $prefix {
+    @return $property;
+  }
+  @if type-of($property) == list or type-of($property) == arglist {
+    $new-list: comma-list();
+    @each $v in $property {
+      $new-list: append($new-list, prefixed-for-transition($prefix, $v));
+    }
+    @return $new-list;
+  } @else {
+    @if index($transitionable-prefixed-values, $property) {
+      @return #{$prefix}-#{$property};
+    } @else {
+      @return $property;
+    }
+  }
+}
+
+// Returns $transition-map which includes key and values that map to a transition declaration
+@function transition-map($transition) {
+  $transition-map: ();
+
+  @each $item in $transition {
+    @if is-time($item) {
+      @if map-has-key($transition-map, duration) {
+        $transition-map: map-merge($transition-map, (delay: $item));
+      } @else {
+        $transition-map: map-merge($transition-map, (duration: $item));
+      }
+    } @else if map-has-key($transition-map, property) {
+      $transition-map: map-merge($transition-map, (timing-function: $item));
+    } @else {
+      $transition-map: map-merge($transition-map, (property: $item));
+    }
+  }
+
+  @return $transition-map;
+}
+
+// One or more properties to transition
+//
+// * for multiple, use a comma-delimited list
+// * also accepts "all" or "none"
+
+@mixin transition-property($properties...) {
+  $properties: set-arglist-default($properties, $default-transition-property);
+  @include with-each-prefix(css-transitions, $transition-support-threshold) {
+    $props: if($current-prefix, prefixed-for-transition($current-prefix, $properties), $properties);
+    @include prefix-prop(transition-property, $props);
+  }
+}
+
+// One or more durations in seconds
+//
+// * for multiple, use a comma-delimited list
+// * these durations will affect the properties in the same list position
+
+@mixin transition-duration($durations...) {
+  $durations: set-arglist-default($durations, $default-transition-duration);
+  @include prefixed-properties(css-transitions, $transition-support-threshold, (
+    transition-duration: $durations
+  ));
+}
+
+// One or more timing functions
+//
+// * [ ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(x1, y1, x2, y2)]
+// * For multiple, use a comma-delimited list
+// * These functions will effect the properties in the same list position
+
+@mixin transition-timing-function($functions...) {
+  $functions: set-arglist-default($functions, $default-transition-function);
+  @include prefixed-properties(css-transitions, $transition-support-threshold, (
+    transition-timing-function: $functions
+  ));
+}
+
+// One or more transition-delays in seconds
+//
+// * for multiple, use a comma-delimited list
+// * these delays will effect the properties in the same list position
+
+@mixin transition-delay($delays...) {
+  $delays: set-arglist-default($delays, $default-transition-delay);
+  @include prefixed-properties(css-transitions, $transition-support-threshold, (
+    transition-delay: $delays
+  ));
+}
+
+// Transition all-in-one shorthand
+
+@mixin single-transition(
+  $property: $default-transition-property,
+  $duration: $default-transition-duration,
+  $function: $default-transition-function,
+  $delay: $default-transition-delay
+) {
+  @include transition(compact($property $duration $function $delay));
+}
+
+@mixin transition($transitions...) {
+  $default: (compact($default-transition-property $default-transition-duration $default-transition-function $default-transition-delay),);
+  $transitions: if(length($transitions) == 1 and type-of(nth($transitions, 1)) == list and list-separator(nth($transitions, 1)) == comma, nth($transitions, 1), $transitions);
+  $transitions: set-arglist-default($transitions, $default);
+
+
+  @include with-each-prefix(css-transitions, $transition-support-threshold) {
+    $delays: comma-list();
+    $transitions-without-delays: comma-list();
+    $transitions-with-delays: comma-list();
+    $has-delays: false;
+
+
+    // This block can be made considerably simpler at the point in time that
+    // we no longer need to deal with the differences in how delays are treated.
+    @each $transition in $transitions {
+      // Declare initial values for transition
+      $transition: transition-map($transition);
+
+      $property: map-get($transition, property);
+      $duration: map-get($transition, duration);
+      $timing-function: map-get($transition, timing-function);
+      $delay: map-get($transition, delay);
+
+      // Parse transition string to assign values into correct variables
+      $has-delays: $has-delays or $delay;
+
+      @if $current-prefix == -webkit {
+        // Keep a list of delays in case one is specified
+        $delays: append($delays, if($delay, $delay, 0s));
+        $transitions-without-delays: append($transitions-without-delays,
+          prefixed-for-transition($current-prefix, $property) $duration $timing-function);
+      } @else {
+        $transitions-with-delays: append($transitions-with-delays,
+          prefixed-for-transition($current-prefix, $property) $duration $timing-function $delay);
+      }
+    }
+
+    @if $current-prefix == -webkit {
+      @include prefix-prop(transition, $transitions-without-delays);
+      @if $has-delays {
+        @include prefix-prop(transition-delay, $delays);
+      }
+    } @else if $current-prefix {
+      @include prefix-prop(transition, $transitions-with-delays);
+    } @else {
+      transition: $transitions-with-delays;
+    }
+  }
+}
diff --git a/app/webpacker/css/darkswarm/compass/css3/user-interface.scss b/app/webpacker/css/darkswarm/compass/css3/user-interface.scss
new file mode 100644
index 0000000000..3a3e99fbae
--- /dev/null
+++ b/app/webpacker/css/darkswarm/compass/css3/user-interface.scss
@@ -0,0 +1,69 @@
+// User Interface
+// This file can be expanded to handle all the user interface properties as
+// they become available in browsers:
+// http://www.w3.org/TR/2000/WD-css3-userint-20000216
+
+// The prefixed support threshold for user-select.
+// Defaults to the $graceful-usage-threshold.
+$userselect-support-threshold: $graceful-usage-threshold !default;
+
+// This property controls the selection model and granularity of an element.
+//
+// @param $select
+//   [ none | text | toggle | element | elements | all | inherit ]
+@mixin user-select($select) {
+  $select: unquote($select);
+
+  @include with-each-prefix(user-select-none, $userselect-support-threshold) {
+    // old Firefox used a proprietary `-moz-none` value, starting with Firefox 21 `none` behaves like `-moz-none`
+    // @link https://developer.mozilla.org/en-US/docs/Web/CSS/user-select
+    @include prefix-prop(user-select, if($current-prefix == -moz and $select == 'none', -moz-none, $select));
+  }
+}
+
+// The prefixed support threshold for input-placeholder.
+// Defaults to the $graceful-usage-threshold.
+$input-placeholder-support-threshold: $graceful-usage-threshold !default;
+
+// Style the html5 input placeholder in browsers that support it.
+//
+// The styles for the input placeholder are passed as mixin content
+// and the selector comes from the mixin's context.
+//
+// For example:
+//
+//     #{elements-of-type(text-input)} {
+//       @include input-placeholder {
+//         color: #bfbfbf;
+//         font-style: italic;
+//       }
+//     }
+//
+// if you want to apply the placeholder styles to all elements supporting
+// the `input-placeholder` pseudo class (beware of performance impacts):
+//
+//     * {
+//       @include input-placeholder {
+//         color: #bfbfbf;
+//         font-style: italic;
+//       }
+//     }
+@mixin input-placeholder {
+  @include with-each-prefix(css-placeholder, $input-placeholder-support-threshold) {
+    @if $current-prefix == -webkit {
+      &::-webkit-input-placeholder { @content; }
+    }
+    @else if $current-prefix == -moz {
+      // for Firefox 19 and below
+      @if support-legacy-browser("firefox", "4", "19", $threshold: $input-placeholder-support-threshold) {
+        &:-moz-placeholder { @content; }
+      }
+      // for Firefox 20 and above
+      &::-moz-placeholder { @content; }
+    }
+    @else if $current-prefix == -ms {
+      &:-ms-input-placeholder { @content; }
+    }
+  }
+  // This is not standardized yet so no official selector is generated.
+}
diff --git a/app/webpacker/css/darkswarm/compass/support.scss b/app/webpacker/css/darkswarm/compass/support.scss
new file mode 100644
index 0000000000..2b39de5d1c
--- /dev/null
+++ b/app/webpacker/css/darkswarm/compass/support.scss
@@ -0,0 +1,118 @@
+
+// The browser usage threshold for features that gracefully degrade
+// Defaults to 1 user in 1,000.
+$graceful-usage-threshold: 0.1 !default;
+
+$debug-browser-support: false !default;
+
+// @private
+$default-capability-options: (
+        (full-support: 1),
+        (partial-support: 1)
+);
+
+// Yields to the mixin content once for each prefix required.
+// The current prefix is set to the $current-prefix global for use by the included content.
+// Also yields to the content once with $current-prefix set to null for the official version
+// as long as there's not already a prefix in scope.
+@mixin with-each-prefix($capability, $threshold) {
+  @each $prefix, $should-use-prefix in prefixes-for-capability($capability, $threshold) {
+    @if $should-use-prefix {
+      @if $debug-browser-support and type-of($should-use-prefix) == list {
+        /* Capability #{$capability} is prefixed with #{$prefix} because #{$should-use-prefix} is required. */
+      } @else if $debug-browser-support and type-of($should-use-prefix) == number {
+        /* Capability #{$capability} is prefixed with #{$prefix} because #{$should-use-prefix}% of users need it which is more than the threshold of #{$threshold}%. */
+      }
+      @include with-prefix($prefix) {
+        @include with-browser-ranges($capability) {
+          @content;
+        }
+      }
+    } @else if $debug-browser-support {
+      /* Capability #{$capability} is not prefixed with #{$prefix} because #{prefix-usage($prefix, $capability, $capability-options)}% of users are affected which is less than the threshold of #{$threshold}. */
+    }
+  }
+  @include with-prefix(null) {
+    @include with-browser-ranges($capability) {
+      @content;
+    }
+  }
+}
+
+// If there's a prefix context in scope, this will only output the content if the prefix matches.
+// Otherwise, sets the current prefix scope and outputs the content.
+@mixin with-prefix($prefix) {
+  @if $current-prefix or $prefix-context {
+    @if $current-prefix == $prefix or $prefix-context == $prefix {
+      @if $debug-browser-support {
+        @if $prefix {
+          /* content for #{$prefix} because #{$current-prefix or $prefix-context} is already in scope. */
+        } @else {
+          /* unprefixed content. #{$current-prefix or $prefix-context} is already in scope. */
+        }
+      }
+      $old-prefix-context: $prefix-context;
+      $old-prefix: $current-prefix;
+      $prefix-context: $prefix-context or $current-prefix !global;
+      $current-prefix: $prefix !global;
+      @content;
+      $prefix-context: $old-prefix-context !global;
+      $current-prefix: $old-prefix !global;
+    } @else if $prefix == null {
+      $old-prefix-context: $prefix-context;
+      $prefix-context: $prefix-context or $current-prefix !global;
+      $current-prefix: null !global;
+      @if $debug-browser-support {
+        /* Content for official syntax. Prefix context is still #{$prefix-context}. */
+      }
+      @content;
+      $current-prefix: $prefix-context !global;
+      $prefix-context: $old-prefix-context !global;
+    } @else if $debug-browser-support {
+      /* Omitting content for #{$prefix} because #{$current-prefix} is already in scope. */
+    }
+  } @else {
+    @if $debug-browser-support and $prefix {
+      /* Creating new #{$prefix} context. */
+    }
+    $prefix-context: $prefix !global;
+    $current-prefix: $prefix !global;
+    @content;
+    $current-prefix: null !global;
+    $prefix-context: null !global;
+  }
+}
+
+// If passed a map, that will be the new browser ranges.
+// Otherwise a range map will be created based on the given capability and prefix
+// using the `browser-ranges($capability, $prefix)` function.
+//
+// If there are current ranges in scope and the new ranges have some overlap
+// with the current,
+//
+// If there is no overlap, then the content will not be rendered.
+@mixin with-browser-ranges($capability, $prefix: $current-prefix) {
+  $new-ranges: null;
+  @if type-of($capability) == map {
+    $new-ranges: $capability;
+  } @else {
+    $new-ranges: browser-ranges($capability, $prefix);
+  }
+
+  @if has-browser-subset($current-browser-versions, $new-ranges) {
+    $old-ranges: $current-browser-versions;
+    $current-browser-versions: intersect-browser-ranges($old-ranges, $new-ranges) !global;
+    @content;
+    $current-browser-versions: $old-ranges !global;
+  } @else if $debug-browser-support {
+    /* Excluding content because #{inspect($new-ranges)} is not included within
+       #{inspect($current-browser-versions)} */
+  }
+}
+
+// Output a property and value using the current prefix.
+// It will be unprefixed if $current-prefix is null.
+@mixin prefix-prop($property, $value, $prefix: $current-prefix) {
+  #{prefix-identifier($property, $prefix)}: $value;
+}
+
diff --git a/app/assets/stylesheets/darkswarm/distributor_header.scss b/app/webpacker/css/darkswarm/distributor_header.scss
similarity index 95%
rename from app/assets/stylesheets/darkswarm/distributor_header.scss
rename to app/webpacker/css/darkswarm/distributor_header.scss
index 5166b79230..4dc32da428 100644
--- a/app/assets/stylesheets/darkswarm/distributor_header.scss
+++ b/app/webpacker/css/darkswarm/distributor_header.scss
@@ -1,6 +1,3 @@
-@import "mixins";
-@import 'typography';
-
 $shop-navigation-zindex: 20;
 
 section {
diff --git a/app/assets/stylesheets/darkswarm/embedded_shopfront.scss b/app/webpacker/css/darkswarm/embedded_shopfront.scss
similarity index 98%
rename from app/assets/stylesheets/darkswarm/embedded_shopfront.scss
rename to app/webpacker/css/darkswarm/embedded_shopfront.scss
index 619ec692e4..1fce1f676e 100644
--- a/app/assets/stylesheets/darkswarm/embedded_shopfront.scss
+++ b/app/webpacker/css/darkswarm/embedded_shopfront.scss
@@ -1,6 +1,3 @@
-@import "mixins";
-@import "typography";
-
 $large-menu-height: 4.6875rem;
 $medium-menu-height: 3rem;
 $gutter-width: 0.9375rem;
diff --git a/app/assets/stylesheets/darkswarm/expanding-sidebar.scss b/app/webpacker/css/darkswarm/expanding-sidebar.scss
similarity index 95%
rename from app/assets/stylesheets/darkswarm/expanding-sidebar.scss
rename to app/webpacker/css/darkswarm/expanding-sidebar.scss
index 8bfcfe824b..d2fdfc7711 100644
--- a/app/assets/stylesheets/darkswarm/expanding-sidebar.scss
+++ b/app/webpacker/css/darkswarm/expanding-sidebar.scss
@@ -1,7 +1,3 @@
-@import "mixins";
-@import "variables";
-@import "branding";
-
 .expanding-sidebar {
   display: flex;
   flex-direction: column;
diff --git a/app/assets/stylesheets/darkswarm/footer.scss b/app/webpacker/css/darkswarm/footer.scss
similarity index 95%
rename from app/assets/stylesheets/darkswarm/footer.scss
rename to app/webpacker/css/darkswarm/footer.scss
index 43b5898c7c..246c904328 100644
--- a/app/assets/stylesheets/darkswarm/footer.scss
+++ b/app/webpacker/css/darkswarm/footer.scss
@@ -1,7 +1,3 @@
-@import "branding";
-@import "mixins";
-@import "animations";
-
 footer {
   .row {
     p {
@@ -50,7 +46,7 @@ footer {
 
         width: 100%;
         border: 1px solid rgba($dark-grey, 0.35);
-        background-image: image-url("tile-wide.png");
+        background-image: url("../images/tile-wide.png");
         background-position: center center;
         background-color: #bbb;
         padding: 12px 0 8px 0;
diff --git a/app/assets/stylesheets/darkswarm/forms.scss b/app/webpacker/css/darkswarm/forms.scss
similarity index 80%
rename from app/assets/stylesheets/darkswarm/forms.scss
rename to app/webpacker/css/darkswarm/forms.scss
index b44b32220f..5b494ec790 100644
--- a/app/assets/stylesheets/darkswarm/forms.scss
+++ b/app/webpacker/css/darkswarm/forms.scss
@@ -1,6 +1,3 @@
-@import "mixins";
-@import "branding";
-
 fieldset {
   border: 0;
 }
diff --git a/app/assets/stylesheets/darkswarm/groups.scss b/app/webpacker/css/darkswarm/groups.scss
similarity index 97%
rename from app/assets/stylesheets/darkswarm/groups.scss
rename to app/webpacker/css/darkswarm/groups.scss
index b6ba8087c7..09d19e8eb6 100644
--- a/app/assets/stylesheets/darkswarm/groups.scss
+++ b/app/webpacker/css/darkswarm/groups.scss
@@ -1,7 +1,3 @@
-@import "branding";
-@import "mixins";
-@import "typography";
-
 // Search page
 #groups {
   @include groupsbg;
diff --git a/app/assets/stylesheets/darkswarm/help-modal.scss b/app/webpacker/css/darkswarm/help-modal.scss
similarity index 100%
rename from app/assets/stylesheets/darkswarm/help-modal.scss
rename to app/webpacker/css/darkswarm/help-modal.scss
diff --git a/app/assets/stylesheets/darkswarm/home_panes.scss b/app/webpacker/css/darkswarm/home_panes.scss
similarity index 88%
rename from app/assets/stylesheets/darkswarm/home_panes.scss
rename to app/webpacker/css/darkswarm/home_panes.scss
index 20a8d82687..d96e931466 100644
--- a/app/assets/stylesheets/darkswarm/home_panes.scss
+++ b/app/webpacker/css/darkswarm/home_panes.scss
@@ -1,9 +1,3 @@
-@import "branding";
-@import "mixins";
-@import "typography";
-@import "animations";
-@import "variables";
-
 // Styling for big panes on homepage \\
 #panes {
   .pane {
@@ -42,7 +36,7 @@
 }
 
 #stats.pane {
-  background-image: image-url("home/background-blurred-oranges.jpg");
+  background-image: url("../images/home/background-blurred-oranges.jpg");
   background-position: center center;
   background-color: $ofn-grey;
 
@@ -94,7 +88,7 @@
   }
 
   .home-icon-box {
-    background-image: image-url("ofn-o.png");
+    background-image: url("../images/ofn-o.png");
     background-position: center center;
     background-repeat: no-repeat;
     background-size: auto 100%;
@@ -121,15 +115,15 @@
       background-size: auto 100%;
 
       &.search {
-        background-image: image-url("icon-mask-magnifier.png");
+        background-image: url("../images/icon-mask-magnifier.png");
       }
 
       &.shop {
-        background-image: image-url("icon-mask-apple.png");
+        background-image: url("../images/icon-mask-apple.png");
       }
 
       &.pick-up-delivery {
-        background-image: image-url("icon-mask-truck.png");
+        background-image: url("../images/icon-mask-truck.png");
       }
     }
   }
diff --git a/app/assets/stylesheets/darkswarm/home_tagline.scss b/app/webpacker/css/darkswarm/home_tagline.scss
similarity index 86%
rename from app/assets/stylesheets/darkswarm/home_tagline.scss
rename to app/webpacker/css/darkswarm/home_tagline.scss
index 7ad1ea0241..9a0355f195 100644
--- a/app/assets/stylesheets/darkswarm/home_tagline.scss
+++ b/app/webpacker/css/darkswarm/home_tagline.scss
@@ -1,7 +1,3 @@
-@import "branding";
-@import "mixins";
-@import "variables";
-
 // Styling for brand intro / tagline on homepage
 
 #tagline {
@@ -13,7 +9,7 @@
     @include fullbg;
 
     background-color: $ofn-grey;
-    background-image: image-url("home/home.jpg");
+    //background-image: url("../../images/home/home.jpg");
     position: fixed;
     left: 0;
     right: 0;
diff --git a/app/assets/stylesheets/darkswarm/hub_node.scss b/app/webpacker/css/darkswarm/hub_node.scss
similarity index 99%
rename from app/assets/stylesheets/darkswarm/hub_node.scss
rename to app/webpacker/css/darkswarm/hub_node.scss
index f35713496f..99c700a69f 100644
--- a/app/assets/stylesheets/darkswarm/hub_node.scss
+++ b/app/webpacker/css/darkswarm/hub_node.scss
@@ -1,6 +1,3 @@
-@import "branding";
-@import "mixins";
-
 .hubs {
   .active_table .active_table_node {
     //Prevents ugly overflows on hub title
diff --git a/app/assets/stylesheets/darkswarm/hubs.scss b/app/webpacker/css/darkswarm/hubs.scss
similarity index 88%
rename from app/assets/stylesheets/darkswarm/hubs.scss
rename to app/webpacker/css/darkswarm/hubs.scss
index 253266eba4..344192b90b 100644
--- a/app/assets/stylesheets/darkswarm/hubs.scss
+++ b/app/webpacker/css/darkswarm/hubs.scss
@@ -1,6 +1,3 @@
-@import "branding";
-@import "mixins";
-
 #hubs {
   background-color: lighten($ofn-grey, 43%);
 
diff --git a/app/assets/stylesheets/darkswarm/ie_warning.scss b/app/webpacker/css/darkswarm/ie_warning.scss
similarity index 100%
rename from app/assets/stylesheets/darkswarm/ie_warning.scss
rename to app/webpacker/css/darkswarm/ie_warning.scss
diff --git a/app/assets/stylesheets/darkswarm/images.scss b/app/webpacker/css/darkswarm/images.scss
similarity index 92%
rename from app/assets/stylesheets/darkswarm/images.scss
rename to app/webpacker/css/darkswarm/images.scss
index 739914d709..9019971bfb 100644
--- a/app/assets/stylesheets/darkswarm/images.scss
+++ b/app/webpacker/css/darkswarm/images.scss
@@ -1,7 +1,3 @@
-@import "mixins";
-@import "variables";
-@import "branding";
-
 .product-img {
   text-align: center;
 
diff --git a/app/assets/stylesheets/darkswarm/layout/offcanvas.scss b/app/webpacker/css/darkswarm/layout/offcanvas.scss
similarity index 89%
rename from app/assets/stylesheets/darkswarm/layout/offcanvas.scss
rename to app/webpacker/css/darkswarm/layout/offcanvas.scss
index de54f0ef54..6efc1f8eba 100644
--- a/app/assets/stylesheets/darkswarm/layout/offcanvas.scss
+++ b/app/webpacker/css/darkswarm/layout/offcanvas.scss
@@ -1,5 +1,3 @@
-@import "compass/css3/transition";
-
 .off-canvas-fixed {
   @include transition(transform 1000ms ease-in-out);
 }
diff --git a/app/assets/stylesheets/darkswarm/lists.scss b/app/webpacker/css/darkswarm/lists.scss
similarity index 100%
rename from app/assets/stylesheets/darkswarm/lists.scss
rename to app/webpacker/css/darkswarm/lists.scss
diff --git a/app/assets/stylesheets/darkswarm/loading.scss b/app/webpacker/css/darkswarm/loading.scss
similarity index 97%
rename from app/assets/stylesheets/darkswarm/loading.scss
rename to app/webpacker/css/darkswarm/loading.scss
index 32a3d6b9b4..f3d93f2624 100644
--- a/app/assets/stylesheets/darkswarm/loading.scss
+++ b/app/webpacker/css/darkswarm/loading.scss
@@ -1,5 +1,3 @@
-@import "compass/css3/user-interface";
-
 #loading {
   .reveal-modal-bg {
     z-index: 101;
diff --git a/app/assets/stylesheets/darkswarm/map.scss b/app/webpacker/css/darkswarm/map.scss
similarity index 96%
rename from app/assets/stylesheets/darkswarm/map.scss
rename to app/webpacker/css/darkswarm/map.scss
index b3a6d827ea..73c9d6bb80 100644
--- a/app/assets/stylesheets/darkswarm/map.scss
+++ b/app/webpacker/css/darkswarm/map.scss
@@ -1,8 +1,6 @@
 // Place all the styles related to the map controller here.
 // They will automatically be included in application.css.
 // You can use Sass (SCSS) here: http://sass-lang.com/
-@import "mixins";
-@import "big-input";
 
 .map-container {
   width: 100%;
diff --git a/app/assets/stylesheets/darkswarm/menu.scss b/app/webpacker/css/darkswarm/menu.scss
similarity index 97%
rename from app/assets/stylesheets/darkswarm/menu.scss
rename to app/webpacker/css/darkswarm/menu.scss
index f0c89ddc60..0f282a056c 100644
--- a/app/assets/stylesheets/darkswarm/menu.scss
+++ b/app/webpacker/css/darkswarm/menu.scss
@@ -1,8 +1,4 @@
-@import 'compass';
-@import 'branding';
-@import 'mixins';
-@import 'typography';
-@import 'variables';
+//@import 'compass';
 
 nav.top-bar {
   @include textpress;
@@ -14,7 +10,7 @@ nav.top-bar {
   z-index: 190;
 }
 
-@media #{$large-only} {
+@media #{$large-up} {
   .top-bar--menu-item-with-icon span {
     display: none;
   }
@@ -237,7 +233,7 @@ nav.top-bar {
 [role="main"] {
   margin-top: 2.8em;
 
-  @media #{$large-up} {
+  @media  #{$large-up} {
     margin-top: 0;
   }
 }
diff --git a/app/assets/stylesheets/darkswarm/mixins.scss b/app/webpacker/css/darkswarm/mixins.scss
similarity index 95%
rename from app/assets/stylesheets/darkswarm/mixins.scss
rename to app/webpacker/css/darkswarm/mixins.scss
index 90febd6009..deec6c3831 100644
--- a/app/assets/stylesheets/darkswarm/mixins.scss
+++ b/app/webpacker/css/darkswarm/mixins.scss
@@ -1,12 +1,9 @@
 // Note this mixin file is used in ADMIN and FRONTEND
-@import 'shared/variables/layout';
-
-@import "branding";
 
 // Generic \\
 
 @mixin tiledPane {
-  background-image: image-url("tile-wide.png");
+  background-image: url("../images/tile-wide.png");
   background-color: $brand-colour;
   background-position: center center;
 
@@ -180,7 +177,7 @@
 
 @mixin producersbg {
   background-color: lighten($clr-turquoise, 68%);
-  background-image: image-url("producers.svg");
+  background-image: url("../images/producers.svg");
   background-position: center 50px;
   background-repeat: no-repeat;
   background-size: 922px 763px;
@@ -188,13 +185,13 @@
 
 @mixin hubsbg {
   background-color: $brand-colour;
-  background-image: image-url("hubs-bg.jpg");
+  background-image: url("../images/hubs-bg.jpg");
   background-position: center center;
 }
 
 @mixin groupsbg {
   background-color: lighten($clr-brick, 56%);
-  background-image: image-url("groups.svg");
+  background-image: url("../images/groups.svg");
   background-position: center 50px;
   background-repeat: no-repeat;
   background-size: 922px 922px;
diff --git a/app/assets/stylesheets/darkswarm/modal-enterprises.scss b/app/webpacker/css/darkswarm/modal-enterprises.scss
similarity index 96%
rename from app/assets/stylesheets/darkswarm/modal-enterprises.scss
rename to app/webpacker/css/darkswarm/modal-enterprises.scss
index c72aa79f71..e4adf73751 100644
--- a/app/assets/stylesheets/darkswarm/modal-enterprises.scss
+++ b/app/webpacker/css/darkswarm/modal-enterprises.scss
@@ -1,7 +1,3 @@
-@import 'branding';
-@import 'mixins';
-@import 'admin/globals/variables';
-
 // Generic styles for use
 
 .modal-centered {
@@ -32,10 +28,10 @@
   margin-bottom: 0.5rem;
 
   a.heading {
-    color: $color-link;
+    color: $teal-400;
 
     &:hover {
-      color: $color-link-hover;
+      color: $teal-500;
       text-decoration: underline;
     }
   }
diff --git a/app/assets/stylesheets/darkswarm/modals.scss b/app/webpacker/css/darkswarm/modals.scss
similarity index 97%
rename from app/assets/stylesheets/darkswarm/modals.scss
rename to app/webpacker/css/darkswarm/modals.scss
index 5f9cebc067..6dea3ae85f 100644
--- a/app/assets/stylesheets/darkswarm/modals.scss
+++ b/app/webpacker/css/darkswarm/modals.scss
@@ -1,6 +1,3 @@
-@import "branding";
-@import "mixins";
-
 dialog
 , .reveal-modal {
   border: none;
diff --git a/app/assets/stylesheets/darkswarm/overrides.scss b/app/webpacker/css/darkswarm/overrides.scss
similarity index 100%
rename from app/assets/stylesheets/darkswarm/overrides.scss
rename to app/webpacker/css/darkswarm/overrides.scss
diff --git a/app/assets/stylesheets/darkswarm/page_alert.scss b/app/webpacker/css/darkswarm/page_alert.scss
similarity index 88%
rename from app/assets/stylesheets/darkswarm/page_alert.scss
rename to app/webpacker/css/darkswarm/page_alert.scss
index 08f35944c9..b905926dd6 100644
--- a/app/assets/stylesheets/darkswarm/page_alert.scss
+++ b/app/webpacker/css/darkswarm/page_alert.scss
@@ -1,8 +1,3 @@
-@import "mixins";
-@import "branding";
-@import "animations";
-@import "compass/css3/transition";
-
 $page-alert-height: 55px;
 
 // Basic style \\
@@ -14,7 +9,7 @@ $page-alert-height: 55px;
     border-left: none;
     border-right: none;
     background-color: #bbb;
-    background-image: image-url("tile-wide.png");
+    background-image: url("../images/tile-wide.png");
     background-position: center center;
     padding: 12px 0 8px 0;
     margin: 0;
diff --git a/app/assets/stylesheets/darkswarm/pages/login_modal.scss b/app/webpacker/css/darkswarm/pages/login_modal.scss
similarity index 93%
rename from app/assets/stylesheets/darkswarm/pages/login_modal.scss
rename to app/webpacker/css/darkswarm/pages/login_modal.scss
index 265c74519c..98ee4730c7 100644
--- a/app/assets/stylesheets/darkswarm/pages/login_modal.scss
+++ b/app/webpacker/css/darkswarm/pages/login_modal.scss
@@ -1,6 +1,3 @@
-@import '../base/colors';
-@import '../collapsible';
-
 // Styling for login modal to style tabs
 .reveal-modal.login-modal {
   border-bottom-color: $modal-background-color;
diff --git a/app/assets/stylesheets/darkswarm/producer_node.scss b/app/webpacker/css/darkswarm/producer_node.scss
similarity index 98%
rename from app/assets/stylesheets/darkswarm/producer_node.scss
rename to app/webpacker/css/darkswarm/producer_node.scss
index 93a9d4ae58..4415936479 100644
--- a/app/assets/stylesheets/darkswarm/producer_node.scss
+++ b/app/webpacker/css/darkswarm/producer_node.scss
@@ -1,6 +1,3 @@
-@import "branding";
-@import "mixins";
-
 .producers {
   .active_table .active_table_node {
     // Header row
diff --git a/app/assets/stylesheets/darkswarm/producers.scss b/app/webpacker/css/darkswarm/producers.scss
similarity index 88%
rename from app/assets/stylesheets/darkswarm/producers.scss
rename to app/webpacker/css/darkswarm/producers.scss
index e1a8c7a21b..239df132bf 100644
--- a/app/assets/stylesheets/darkswarm/producers.scss
+++ b/app/webpacker/css/darkswarm/producers.scss
@@ -1,6 +1,3 @@
-@import "branding";
-@import "mixins";
-
 .producers {
   @include producersbg;
 
diff --git a/app/assets/stylesheets/darkswarm/product_table.scss b/app/webpacker/css/darkswarm/product_table.scss
similarity index 100%
rename from app/assets/stylesheets/darkswarm/product_table.scss
rename to app/webpacker/css/darkswarm/product_table.scss
diff --git a/app/assets/stylesheets/darkswarm/registration.scss b/app/webpacker/css/darkswarm/registration.scss
similarity index 99%
rename from app/assets/stylesheets/darkswarm/registration.scss
rename to app/webpacker/css/darkswarm/registration.scss
index 1486e644c4..f6f9f00216 100644
--- a/app/assets/stylesheets/darkswarm/registration.scss
+++ b/app/webpacker/css/darkswarm/registration.scss
@@ -1,6 +1,3 @@
-@import "branding";
-@import "mixins";
-
 #registration-modal {
   @media only screen and (max-width: 640px) {
     margin: 0 15px;
diff --git a/app/assets/stylesheets/darkswarm/shop.scss b/app/webpacker/css/darkswarm/shop.scss
similarity index 96%
rename from app/assets/stylesheets/darkswarm/shop.scss
rename to app/webpacker/css/darkswarm/shop.scss
index 8312f6c360..c9a3420f0a 100644
--- a/app/assets/stylesheets/darkswarm/shop.scss
+++ b/app/webpacker/css/darkswarm/shop.scss
@@ -1,9 +1,3 @@
-@import "mixins";
-@import "animations";
-@import "variables";
-@import "branding";
-@import "big-input";
-
 // Shop partials
 @import "shop-inputs";
 @import "shop-navigation";
diff --git a/app/assets/stylesheets/darkswarm/shop_search.scss b/app/webpacker/css/darkswarm/shop_search.scss
similarity index 90%
rename from app/assets/stylesheets/darkswarm/shop_search.scss
rename to app/webpacker/css/darkswarm/shop_search.scss
index 28e4269b4c..115e0c48ca 100644
--- a/app/assets/stylesheets/darkswarm/shop_search.scss
+++ b/app/webpacker/css/darkswarm/shop_search.scss
@@ -1,7 +1,3 @@
-@import "mixins";
-@import "branding";
-@import "variables";
-
 .shop-searchbar {
   background-color: $grey-100;
   height: 5em;
@@ -31,7 +27,7 @@
     padding: 0 2.25em 0 2.75em;
     width: 100%;
     min-width: 0;
-    background: $white image-url("icn-search-grey.png") 1em center no-repeat;
+    background: $white url("../images/icn-search-grey.png") 1em center no-repeat;
     font-size: 1rem; // avoid zoom on iphone, see issue #4535
 
     &::placeholder {
diff --git a/app/assets/stylesheets/darkswarm/shop_tabs.scss b/app/webpacker/css/darkswarm/shop_tabs.scss
similarity index 97%
rename from app/assets/stylesheets/darkswarm/shop_tabs.scss
rename to app/webpacker/css/darkswarm/shop_tabs.scss
index 93b9e037c7..e34faf44f7 100644
--- a/app/assets/stylesheets/darkswarm/shop_tabs.scss
+++ b/app/webpacker/css/darkswarm/shop_tabs.scss
@@ -1,7 +1,3 @@
-@import "typography";
-@import "mixins";
-@import "branding";
-
 // Tabs styling
 #shop-tabs {
 
diff --git a/app/assets/stylesheets/darkswarm/sidebar.scss b/app/webpacker/css/darkswarm/sidebar.scss
similarity index 59%
rename from app/assets/stylesheets/darkswarm/sidebar.scss
rename to app/webpacker/css/darkswarm/sidebar.scss
index 2e6a7d0a2e..2c0d0e5933 100644
--- a/app/assets/stylesheets/darkswarm/sidebar.scss
+++ b/app/webpacker/css/darkswarm/sidebar.scss
@@ -1,12 +1,3 @@
-// OMG
-// We can't import foundation components?
-// See https://github.com/zurb/foundation/issues/3855#issuecomment-30372252
-
-@import "variables";
-@import "foundation/components/global";
-@import "foundation/components/buttons";
-@import "foundation/components/panels";
-
 #sidebar {
   margin-top: 1.875em;
 
diff --git a/app/assets/stylesheets/darkswarm/signup.scss b/app/webpacker/css/darkswarm/signup.scss
similarity index 96%
rename from app/assets/stylesheets/darkswarm/signup.scss
rename to app/webpacker/css/darkswarm/signup.scss
index 206d7d6656..1b63aa160a 100644
--- a/app/assets/stylesheets/darkswarm/signup.scss
+++ b/app/webpacker/css/darkswarm/signup.scss
@@ -1,9 +1,3 @@
-@import "branding";
-@import "mixins";
-@import "typography";
-@import "animations";
-@import "variables";
-
 #producer-signup.pane, #shops-signup.pane {
   @include tiledPane;
 
diff --git a/app/assets/stylesheets/darkswarm/split-checkout.scss b/app/webpacker/css/darkswarm/split-checkout.scss
similarity index 97%
rename from app/assets/stylesheets/darkswarm/split-checkout.scss
rename to app/webpacker/css/darkswarm/split-checkout.scss
index 90e70a6a23..cb410752f8 100644
--- a/app/assets/stylesheets/darkswarm/split-checkout.scss
+++ b/app/webpacker/css/darkswarm/split-checkout.scss
@@ -51,7 +51,7 @@
         height: 1em;
         line-height: 1em;
         display: inline-block;
-        font-family: $base-font-family;
+        font-family: $body-font;
         margin-left: 10px;
       }
     }
@@ -195,7 +195,7 @@
     display: block;
     margin-top: 5px;
     &:after {
-      background-image: image-url("edit-with-pen.svg");
+      background-image: url("../images/edit-with-pen.svg");
       content: " ";
       display: inline-block;
       width: 1em;
diff --git a/app/assets/stylesheets/darkswarm/stripe-elements.scss b/app/webpacker/css/darkswarm/stripe-elements.scss
similarity index 100%
rename from app/assets/stylesheets/darkswarm/stripe-elements.scss
rename to app/webpacker/css/darkswarm/stripe-elements.scss
diff --git a/app/assets/stylesheets/darkswarm/style.scss b/app/webpacker/css/darkswarm/style.scss
similarity index 94%
rename from app/assets/stylesheets/darkswarm/style.scss
rename to app/webpacker/css/darkswarm/style.scss
index 9228b0bbe9..77627effe1 100644
--- a/app/assets/stylesheets/darkswarm/style.scss
+++ b/app/webpacker/css/darkswarm/style.scss
@@ -1,10 +1,10 @@
 @font-face {
 	font-family: 'OFN';
-	src: font-url('OFN-v2.eot');
-	src: font-url('OFN-v2.eot') format('embedded-opentype'),
-		font-url('OFN-v2.woff') format('woff'),
-		font-url('OFN-v2.ttf') format('truetype'),
-		font-url('OFN-v2.svg') format('svg');
+	src: url('../fonts/OFN-v2.eot');
+	src: url('../fonts/OFN-v2.eot') format('embedded-opentype'),
+		url('../fonts/OFN-v2.woff') format('woff'),
+		url('../fonts/OFN-v2.ttf') format('truetype'),
+		url('../fonts/OFN-v2.svg') format('svg');
 	font-weight: normal;
 	font-style: normal;
 }
diff --git a/app/assets/stylesheets/darkswarm/tables.scss b/app/webpacker/css/darkswarm/tables.scss
similarity index 100%
rename from app/assets/stylesheets/darkswarm/tables.scss
rename to app/webpacker/css/darkswarm/tables.scss
diff --git a/app/assets/stylesheets/darkswarm/tabset.scss b/app/webpacker/css/darkswarm/tabset.scss
similarity index 95%
rename from app/assets/stylesheets/darkswarm/tabset.scss
rename to app/webpacker/css/darkswarm/tabset.scss
index 225e4dd5f6..5525ebc338 100644
--- a/app/assets/stylesheets/darkswarm/tabset.scss
+++ b/app/webpacker/css/darkswarm/tabset.scss
@@ -1,7 +1,3 @@
-@import "typography";
-@import "mixins";
-@import "branding";
-
 .tabset-ctrl:not(#shop-tabs) {
   .tab-view {
     padding-top: 30px;
diff --git a/app/assets/stylesheets/darkswarm/taxons.scss b/app/webpacker/css/darkswarm/taxons.scss
similarity index 96%
rename from app/assets/stylesheets/darkswarm/taxons.scss
rename to app/webpacker/css/darkswarm/taxons.scss
index 006e15de58..eb88f8f9db 100644
--- a/app/assets/stylesheets/darkswarm/taxons.scss
+++ b/app/webpacker/css/darkswarm/taxons.scss
@@ -1,6 +1,3 @@
-@import "branding";
-@import "mixins";
-
 .fat-taxons, .fat-properties {
   display: inline-block;
   line-height: 1;
diff --git a/app/assets/stylesheets/darkswarm/typography.scss b/app/webpacker/css/darkswarm/typography.scss
similarity index 99%
rename from app/assets/stylesheets/darkswarm/typography.scss
rename to app/webpacker/css/darkswarm/typography.scss
index 37d7c955c0..2261036d74 100644
--- a/app/assets/stylesheets/darkswarm/typography.scss
+++ b/app/webpacker/css/darkswarm/typography.scss
@@ -1,4 +1,3 @@
-@import "branding";
 
 @mixin headingFont {
   font-family: "Oswald", sans-serif;
diff --git a/app/assets/stylesheets/darkswarm/ui.scss b/app/webpacker/css/darkswarm/ui.scss
similarity index 95%
rename from app/assets/stylesheets/darkswarm/ui.scss
rename to app/webpacker/css/darkswarm/ui.scss
index b2177013cc..23983ad845 100644
--- a/app/assets/stylesheets/darkswarm/ui.scss
+++ b/app/webpacker/css/darkswarm/ui.scss
@@ -1,9 +1,3 @@
-@import "foundation/components/buttons";
-@import "branding";
-@import "mixins";
-@import "typography";
-@import "variables";
-
 // Button class extensions
 
 .neutral-btn {
diff --git a/app/assets/stylesheets/darkswarm/variables.scss b/app/webpacker/css/darkswarm/variables.scss
similarity index 93%
rename from app/assets/stylesheets/darkswarm/variables.scss
rename to app/webpacker/css/darkswarm/variables.scss
index 2a799ed935..dc1521f069 100644
--- a/app/assets/stylesheets/darkswarm/variables.scss
+++ b/app/webpacker/css/darkswarm/variables.scss
@@ -1,5 +1,4 @@
-@import "foundation/functions";
-@import "foundation/components/global";
+@import "~foundation-sites/scss/foundation/components/global";
 
 // Brand guide colours:
 // International: #81c26e
diff --git a/app/webpacker/css/mail/all.scss b/app/webpacker/css/mail/all.scss
new file mode 100644
index 0000000000..eff74825b1
--- /dev/null
+++ b/app/webpacker/css/mail/all.scss
@@ -0,0 +1,3 @@
+@import '../admin/variables';
+@import 'email';
+@import 'payments_list';
diff --git a/app/assets/stylesheets/mail/email.scss b/app/webpacker/css/mail/email.scss
similarity index 99%
rename from app/assets/stylesheets/mail/email.scss
rename to app/webpacker/css/mail/email.scss
index 7351c8767d..4ded7967d7 100644
--- a/app/assets/stylesheets/mail/email.scss
+++ b/app/webpacker/css/mail/email.scss
@@ -1,5 +1,3 @@
-@import '../admin/variables';
-
 /* -------------------------------------
  *		GLOBAL
  *------------------------------------- */
diff --git a/app/assets/stylesheets/mail/payments_list.scss b/app/webpacker/css/mail/payments_list.scss
similarity index 95%
rename from app/assets/stylesheets/mail/payments_list.scss
rename to app/webpacker/css/mail/payments_list.scss
index 406c403e2d..1cce0b3426 100644
--- a/app/assets/stylesheets/mail/payments_list.scss
+++ b/app/webpacker/css/mail/payments_list.scss
@@ -1,5 +1,3 @@
-@import "../admin/variables";
-
 // payment list, used in both invoice pdfs and order confirmation emails
 
 .payments-list {
diff --git a/app/assets/stylesheets/shared/ng-tags-input.min.css b/app/webpacker/css/shared/ng-tags-input.min.css
similarity index 100%
rename from app/assets/stylesheets/shared/ng-tags-input.min.css
rename to app/webpacker/css/shared/ng-tags-input.min.css
diff --git a/app/assets/stylesheets/shared/question-mark-icon.scss b/app/webpacker/css/shared/question-mark-icon.scss
similarity index 96%
rename from app/assets/stylesheets/shared/question-mark-icon.scss
rename to app/webpacker/css/shared/question-mark-icon.scss
index 0f4901a98f..c468d93b1a 100644
--- a/app/assets/stylesheets/shared/question-mark-icon.scss
+++ b/app/webpacker/css/shared/question-mark-icon.scss
@@ -6,7 +6,7 @@
 }
 
 .question-mark-icon {
-  background-image: image-url("question-mark-icon.svg");
+  background-image: url("../images/question-mark-icon.svg");
   background-size: cover;
   background-repeat: no-repeat;
   border-radius: 50%;
diff --git a/app/assets/stylesheets/shared/textAngular.css b/app/webpacker/css/shared/textAngular.css
similarity index 100%
rename from app/assets/stylesheets/shared/textAngular.css
rename to app/webpacker/css/shared/textAngular.css
diff --git a/app/assets/stylesheets/shared/variables/_layout.scss b/app/webpacker/css/shared/variables/layout.scss
similarity index 100%
rename from app/assets/stylesheets/shared/variables/_layout.scss
rename to app/webpacker/css/shared/variables/layout.scss
diff --git a/app/assets/stylesheets/shared/variables/variables.scss b/app/webpacker/css/shared/variables/variables.scss
similarity index 64%
rename from app/assets/stylesheets/shared/variables/variables.scss
rename to app/webpacker/css/shared/variables/variables.scss
index 866a20d160..2104c96e5b 100644
--- a/app/assets/stylesheets/shared/variables/variables.scss
+++ b/app/webpacker/css/shared/variables/variables.scss
@@ -9,11 +9,11 @@ $modal-zIndex: 1005;
 
 @font-face {
 	font-family: 'OFN';
-	src: font-url('OFN-v2.eot');
-	src: font-url('OFN-v2.eot') format('embedded-opentype'),
-		font-url('OFN-v2.woff') format('woff'),
-		font-url('OFN-v2.ttf') format('truetype'),
-		font-url('OFN-v2.svg') format('svg');
+	src: url('../fonts/OFN-v2.eot');
+	src: url('../fonts/OFN-v2.eot') format('embedded-opentype'),
+		url('../fonts/OFN-v2.woff') format('woff'),
+		url('../fonts/OFN-v2.ttf') format('truetype'),
+		url('../fonts/OFN-v2.svg') format('svg');
 	font-weight: normal;
 	font-style: normal;
 }
diff --git a/app/assets/fonts/FontAwesome.otf b/app/webpacker/fonts/FontAwesome.otf
similarity index 100%
rename from app/assets/fonts/FontAwesome.otf
rename to app/webpacker/fonts/FontAwesome.otf
diff --git a/app/assets/fonts/OFN-v2.eot b/app/webpacker/fonts/OFN-v2.eot
similarity index 100%
rename from app/assets/fonts/OFN-v2.eot
rename to app/webpacker/fonts/OFN-v2.eot
diff --git a/app/assets/fonts/OFN-v2.svg b/app/webpacker/fonts/OFN-v2.svg
similarity index 100%
rename from app/assets/fonts/OFN-v2.svg
rename to app/webpacker/fonts/OFN-v2.svg
diff --git a/app/assets/fonts/OFN-v2.ttf b/app/webpacker/fonts/OFN-v2.ttf
similarity index 100%
rename from app/assets/fonts/OFN-v2.ttf
rename to app/webpacker/fonts/OFN-v2.ttf
diff --git a/app/assets/fonts/OFN-v2.woff b/app/webpacker/fonts/OFN-v2.woff
similarity index 100%
rename from app/assets/fonts/OFN-v2.woff
rename to app/webpacker/fonts/OFN-v2.woff
diff --git a/app/assets/fonts/fontawesome-webfont.eot b/app/webpacker/fonts/fontawesome-webfont.eot
similarity index 100%
rename from app/assets/fonts/fontawesome-webfont.eot
rename to app/webpacker/fonts/fontawesome-webfont.eot
diff --git a/app/assets/fonts/fontawesome-webfont.svg b/app/webpacker/fonts/fontawesome-webfont.svg
similarity index 100%
rename from app/assets/fonts/fontawesome-webfont.svg
rename to app/webpacker/fonts/fontawesome-webfont.svg
diff --git a/app/assets/fonts/fontawesome-webfont.ttf b/app/webpacker/fonts/fontawesome-webfont.ttf
similarity index 100%
rename from app/assets/fonts/fontawesome-webfont.ttf
rename to app/webpacker/fonts/fontawesome-webfont.ttf
diff --git a/app/assets/fonts/fontawesome-webfont.woff b/app/webpacker/fonts/fontawesome-webfont.woff
similarity index 100%
rename from app/assets/fonts/fontawesome-webfont.woff
rename to app/webpacker/fonts/fontawesome-webfont.woff
diff --git a/app/assets/images/black-caret.svg b/app/webpacker/images/black-caret.svg
similarity index 100%
rename from app/assets/images/black-caret.svg
rename to app/webpacker/images/black-caret.svg
diff --git a/app/assets/images/browser-logos/chrome.png b/app/webpacker/images/browser-logos/chrome.png
similarity index 100%
rename from app/assets/images/browser-logos/chrome.png
rename to app/webpacker/images/browser-logos/chrome.png
diff --git a/app/assets/images/browser-logos/firefox.png b/app/webpacker/images/browser-logos/firefox.png
similarity index 100%
rename from app/assets/images/browser-logos/firefox.png
rename to app/webpacker/images/browser-logos/firefox.png
diff --git a/app/assets/images/browser-logos/internet-explorer.png b/app/webpacker/images/browser-logos/internet-explorer.png
similarity index 100%
rename from app/assets/images/browser-logos/internet-explorer.png
rename to app/webpacker/images/browser-logos/internet-explorer.png
diff --git a/app/assets/images/case-studies/South_East_Food_Hub.png b/app/webpacker/images/case-studies/South_East_Food_Hub.png
similarity index 100%
rename from app/assets/images/case-studies/South_East_Food_Hub.png
rename to app/webpacker/images/case-studies/South_East_Food_Hub.png
diff --git a/app/assets/images/case-studies/baw-baw.png b/app/webpacker/images/case-studies/baw-baw.png
similarity index 100%
rename from app/assets/images/case-studies/baw-baw.png
rename to app/webpacker/images/case-studies/baw-baw.png
diff --git a/app/assets/images/case-studies/bfc_logo_square.png b/app/webpacker/images/case-studies/bfc_logo_square.png
similarity index 100%
rename from app/assets/images/case-studies/bfc_logo_square.png
rename to app/webpacker/images/case-studies/bfc_logo_square.png
diff --git a/app/assets/images/case-studies/bonnie-beef-growers.png b/app/webpacker/images/case-studies/bonnie-beef-growers.png
similarity index 100%
rename from app/assets/images/case-studies/bonnie-beef-growers.png
rename to app/webpacker/images/case-studies/bonnie-beef-growers.png
diff --git a/app/assets/images/case-studies/jindivick.jpg b/app/webpacker/images/case-studies/jindivick.jpg
similarity index 100%
rename from app/assets/images/case-studies/jindivick.jpg
rename to app/webpacker/images/case-studies/jindivick.jpg
diff --git a/app/assets/images/case-studies/jonai.png b/app/webpacker/images/case-studies/jonai.png
similarity index 100%
rename from app/assets/images/case-studies/jonai.png
rename to app/webpacker/images/case-studies/jonai.png
diff --git a/app/assets/images/case-studies/longley.png b/app/webpacker/images/case-studies/longley.png
similarity index 100%
rename from app/assets/images/case-studies/longley.png
rename to app/webpacker/images/case-studies/longley.png
diff --git a/app/assets/images/case-studies/mt-alexander.png b/app/webpacker/images/case-studies/mt-alexander.png
similarity index 100%
rename from app/assets/images/case-studies/mt-alexander.png
rename to app/webpacker/images/case-studies/mt-alexander.png
diff --git a/app/assets/images/case-studies/wandiful.png b/app/webpacker/images/case-studies/wandiful.png
similarity index 100%
rename from app/assets/images/case-studies/wandiful.png
rename to app/webpacker/images/case-studies/wandiful.png
diff --git a/app/assets/images/collapse.png b/app/webpacker/images/collapse.png
similarity index 100%
rename from app/assets/images/collapse.png
rename to app/webpacker/images/collapse.png
diff --git a/app/assets/images/countdown.png b/app/webpacker/images/countdown.png
similarity index 100%
rename from app/assets/images/countdown.png
rename to app/webpacker/images/countdown.png
diff --git a/app/assets/images/credit_cards/credit_card.gif b/app/webpacker/images/credit_cards/credit_card.gif
similarity index 100%
rename from app/assets/images/credit_cards/credit_card.gif
rename to app/webpacker/images/credit_cards/credit_card.gif
diff --git a/app/assets/images/datepicker/cal.gif b/app/webpacker/images/datepicker/cal.gif
similarity index 100%
rename from app/assets/images/datepicker/cal.gif
rename to app/webpacker/images/datepicker/cal.gif
diff --git a/app/assets/images/eaterprises_logo.jpg b/app/webpacker/images/eaterprises_logo.jpg
similarity index 100%
rename from app/assets/images/eaterprises_logo.jpg
rename to app/webpacker/images/eaterprises_logo.jpg
diff --git a/app/assets/images/edit-with-pen.svg b/app/webpacker/images/edit-with-pen.svg
similarity index 100%
rename from app/assets/images/edit-with-pen.svg
rename to app/webpacker/images/edit-with-pen.svg
diff --git a/app/assets/images/enterprise-type.png b/app/webpacker/images/enterprise-type.png
similarity index 100%
rename from app/assets/images/enterprise-type.png
rename to app/webpacker/images/enterprise-type.png
diff --git a/app/assets/images/expand.png b/app/webpacker/images/expand.png
similarity index 100%
rename from app/assets/images/expand.png
rename to app/webpacker/images/expand.png
diff --git a/app/assets/images/gray_jean.png b/app/webpacker/images/gray_jean.png
similarity index 100%
rename from app/assets/images/gray_jean.png
rename to app/webpacker/images/gray_jean.png
diff --git a/app/assets/images/gray_jean_light.png b/app/webpacker/images/gray_jean_light.png
similarity index 100%
rename from app/assets/images/gray_jean_light.png
rename to app/webpacker/images/gray_jean_light.png
diff --git a/app/assets/images/groups.svg b/app/webpacker/images/groups.svg
similarity index 100%
rename from app/assets/images/groups.svg
rename to app/webpacker/images/groups.svg
diff --git a/app/assets/images/home/background-blurred-oranges.jpg b/app/webpacker/images/home/background-blurred-oranges.jpg
similarity index 100%
rename from app/assets/images/home/background-blurred-oranges.jpg
rename to app/webpacker/images/home/background-blurred-oranges.jpg
diff --git a/app/assets/images/home/tagline-bg.jpg b/app/webpacker/images/home/tagline-bg.jpg
similarity index 100%
rename from app/assets/images/home/tagline-bg.jpg
rename to app/webpacker/images/home/tagline-bg.jpg
diff --git a/app/assets/images/hubs-bg.jpg b/app/webpacker/images/hubs-bg.jpg
similarity index 100%
rename from app/assets/images/hubs-bg.jpg
rename to app/webpacker/images/hubs-bg.jpg
diff --git a/app/assets/images/icn-close.png b/app/webpacker/images/icn-close.png
similarity index 100%
rename from app/assets/images/icn-close.png
rename to app/webpacker/images/icn-close.png
diff --git a/app/assets/images/icn-search-grey.png b/app/webpacker/images/icn-search-grey.png
similarity index 100%
rename from app/assets/images/icn-search-grey.png
rename to app/webpacker/images/icn-search-grey.png
diff --git a/app/assets/images/icon-mask-apple.png b/app/webpacker/images/icon-mask-apple.png
similarity index 100%
rename from app/assets/images/icon-mask-apple.png
rename to app/webpacker/images/icon-mask-apple.png
diff --git a/app/assets/images/icon-mask-bread.png b/app/webpacker/images/icon-mask-bread.png
similarity index 100%
rename from app/assets/images/icon-mask-bread.png
rename to app/webpacker/images/icon-mask-bread.png
diff --git a/app/assets/images/icon-mask-magnifier.png b/app/webpacker/images/icon-mask-magnifier.png
similarity index 100%
rename from app/assets/images/icon-mask-magnifier.png
rename to app/webpacker/images/icon-mask-magnifier.png
diff --git a/app/assets/images/icon-mask-truck.png b/app/webpacker/images/icon-mask-truck.png
similarity index 100%
rename from app/assets/images/icon-mask-truck.png
rename to app/webpacker/images/icon-mask-truck.png
diff --git a/app/assets/images/logo-australia.png b/app/webpacker/images/logo-australia.png
similarity index 100%
rename from app/assets/images/logo-australia.png
rename to app/webpacker/images/logo-australia.png
diff --git a/app/assets/images/logo-black.png b/app/webpacker/images/logo-black.png
similarity index 100%
rename from app/assets/images/logo-black.png
rename to app/webpacker/images/logo-black.png
diff --git a/app/assets/images/logo-black.svg b/app/webpacker/images/logo-black.svg
similarity index 100%
rename from app/assets/images/logo-black.svg
rename to app/webpacker/images/logo-black.svg
diff --git a/app/assets/images/logo-color.png b/app/webpacker/images/logo-color.png
similarity index 100%
rename from app/assets/images/logo-color.png
rename to app/webpacker/images/logo-color.png
diff --git a/app/assets/images/logo-color.svg b/app/webpacker/images/logo-color.svg
similarity index 100%
rename from app/assets/images/logo-color.svg
rename to app/webpacker/images/logo-color.svg
diff --git a/app/assets/images/logo-global-white.png b/app/webpacker/images/logo-global-white.png
similarity index 100%
rename from app/assets/images/logo-global-white.png
rename to app/webpacker/images/logo-global-white.png
diff --git a/app/assets/images/logo-white-notext.png b/app/webpacker/images/logo-white-notext.png
similarity index 100%
rename from app/assets/images/logo-white-notext.png
rename to app/webpacker/images/logo-white-notext.png
diff --git a/app/assets/images/logo-white.png b/app/webpacker/images/logo-white.png
similarity index 100%
rename from app/assets/images/logo-white.png
rename to app/webpacker/images/logo-white.png
diff --git a/app/assets/images/logo-white.svg b/app/webpacker/images/logo-white.svg
similarity index 100%
rename from app/assets/images/logo-white.svg
rename to app/webpacker/images/logo-white.svg
diff --git a/app/assets/images/matte.png b/app/webpacker/images/matte.png
similarity index 100%
rename from app/assets/images/matte.png
rename to app/webpacker/images/matte.png
diff --git a/app/assets/images/menu/btn-menu-mobile.png b/app/webpacker/images/menu/btn-menu-mobile.png
similarity index 100%
rename from app/assets/images/menu/btn-menu-mobile.png
rename to app/webpacker/images/menu/btn-menu-mobile.png
diff --git a/app/assets/images/menu/icn-cart.svg b/app/webpacker/images/menu/icn-cart.svg
similarity index 100%
rename from app/assets/images/menu/icn-cart.svg
rename to app/webpacker/images/menu/icn-cart.svg
diff --git a/app/assets/images/menu/icn-login.svg b/app/webpacker/images/menu/icn-login.svg
similarity index 100%
rename from app/assets/images/menu/icn-login.svg
rename to app/webpacker/images/menu/icn-login.svg
diff --git a/app/assets/images/menu/icn-profile.svg b/app/webpacker/images/menu/icn-profile.svg
similarity index 100%
rename from app/assets/images/menu/icn-profile.svg
rename to app/webpacker/images/menu/icn-profile.svg
diff --git a/app/assets/images/ofn-logo.png b/app/webpacker/images/ofn-logo.png
similarity index 100%
rename from app/assets/images/ofn-logo.png
rename to app/webpacker/images/ofn-logo.png
diff --git a/app/assets/images/ofn-o.png b/app/webpacker/images/ofn-o.png
similarity index 100%
rename from app/assets/images/ofn-o.png
rename to app/webpacker/images/ofn-o.png
diff --git a/app/assets/images/ofn-o.svg b/app/webpacker/images/ofn-o.svg
similarity index 100%
rename from app/assets/images/ofn-o.svg
rename to app/webpacker/images/ofn-o.svg
diff --git a/app/assets/images/potatoes.png b/app/webpacker/images/potatoes.png
similarity index 100%
rename from app/assets/images/potatoes.png
rename to app/webpacker/images/potatoes.png
diff --git a/app/assets/images/producers.svg b/app/webpacker/images/producers.svg
similarity index 100%
rename from app/assets/images/producers.svg
rename to app/webpacker/images/producers.svg
diff --git a/app/assets/images/producers/producers-pg-bg.jpg b/app/webpacker/images/producers/producers-pg-bg.jpg
similarity index 100%
rename from app/assets/images/producers/producers-pg-bg.jpg
rename to app/webpacker/images/producers/producers-pg-bg.jpg
diff --git a/app/assets/images/question-mark-icon.svg b/app/webpacker/images/question-mark-icon.svg
similarity index 100%
rename from app/assets/images/question-mark-icon.svg
rename to app/webpacker/images/question-mark-icon.svg
diff --git a/app/webpacker/images/select2-spinner.gif b/app/webpacker/images/select2-spinner.gif
new file mode 100644
index 0000000000..5b33f7e54f
Binary files /dev/null and b/app/webpacker/images/select2-spinner.gif differ
diff --git a/app/assets/images/select2.png b/app/webpacker/images/select2.png
similarity index 100%
rename from app/assets/images/select2.png
rename to app/webpacker/images/select2.png
diff --git a/app/assets/images/select2x2.png b/app/webpacker/images/select2x2.png
similarity index 100%
rename from app/assets/images/select2x2.png
rename to app/webpacker/images/select2x2.png
diff --git a/app/assets/images/spinner.gif b/app/webpacker/images/spinner.gif
similarity index 100%
rename from app/assets/images/spinner.gif
rename to app/webpacker/images/spinner.gif
diff --git a/app/assets/images/spinning-circles.svg b/app/webpacker/images/spinning-circles.svg
similarity index 100%
rename from app/assets/images/spinning-circles.svg
rename to app/webpacker/images/spinning-circles.svg
diff --git a/app/assets/images/tile-wide.png b/app/webpacker/images/tile-wide.png
similarity index 100%
rename from app/assets/images/tile-wide.png
rename to app/webpacker/images/tile-wide.png
diff --git a/app/assets/images/white-caret.svg b/app/webpacker/images/white-caret.svg
similarity index 100%
rename from app/assets/images/white-caret.svg
rename to app/webpacker/images/white-caret.svg
diff --git a/app/webpacker/packs/admin.scss b/app/webpacker/packs/admin.scss
new file mode 100644
index 0000000000..59e774d496
--- /dev/null
+++ b/app/webpacker/packs/admin.scss
@@ -0,0 +1 @@
+@import "../css/admin/all.scss";
diff --git a/app/webpacker/packs/application.js b/app/webpacker/packs/application.js
index 969633e0d5..2610d9bee3 100644
--- a/app/webpacker/packs/application.js
+++ b/app/webpacker/packs/application.js
@@ -19,3 +19,8 @@ mrujs.start({
     new CableCar(CableReady)
   ]
 })
+
+require.context('../fonts', true)
+const images = require.context('../images', true)
+const imagePath = (name) => images(name, true)
+
diff --git a/app/webpacker/packs/darkswarm.scss b/app/webpacker/packs/darkswarm.scss
new file mode 100644
index 0000000000..b8653671ec
--- /dev/null
+++ b/app/webpacker/packs/darkswarm.scss
@@ -0,0 +1 @@
+@import "../css/darkswarm/all.scss";
diff --git a/app/webpacker/packs/mail.scss b/app/webpacker/packs/mail.scss
new file mode 100644
index 0000000000..d4f981e355
--- /dev/null
+++ b/app/webpacker/packs/mail.scss
@@ -0,0 +1 @@
+@import "../css/mail/all.scss";
diff --git a/config/application.rb b/config/application.rb
index a289ae57e8..c12d32d764 100644
--- a/config/application.rb
+++ b/config/application.rb
@@ -204,20 +204,14 @@ module Openfoodnetwork
     # Version of your assets, change this if you want to expire all your assets
     config.assets.version = '1.2'
 
-    config.sass.load_paths += [
-      "#{Gem.loaded_specs['foundation-rails'].full_gem_path}/vendor/assets/stylesheets/foundation/components",
-      "#{Gem.loaded_specs['foundation-rails'].full_gem_path}/vendor/assets/stylesheets/foundation/"
-    ]
-
     # css and js files other than application.* are not precompiled by default
     # Instead, they must be explicitly included below
     # http://stackoverflow.com/questions/8012434/what-is-the-purpose-of-config-assets-precompile
     config.assets.initialize_on_precompile = true
     config.assets.precompile += ['iehack.js']
-    config.assets.precompile += ['admin/all.css', 'admin/*.js', 'admin/**/*.js']
-    config.assets.precompile += ['web/all.css', 'web/all.js']
-    config.assets.precompile += ['darkswarm/all.css', 'darkswarm/all.js']
-    config.assets.precompile += ['mail/all.css']
+    config.assets.precompile += ['admin/*.js', 'admin/**/*.js']
+    config.assets.precompile += ['web/all.js']
+    config.assets.precompile += ['darkswarm/all.js']
     config.assets.precompile += ['shared/*']
     config.assets.precompile += ['qz/*']
     config.assets.precompile += ['*.jpg', '*.jpeg', '*.png', '*.gif' '*.svg']
@@ -234,6 +228,8 @@ module Openfoodnetwork
 
     config.autoloader = :zeitwerk
 
+    Rails.autoloaders.main.ignore(Rails.root.join('app/webpacker'))
+
     config.action_view.form_with_generates_ids = true
   end
 end
diff --git a/config/initializers/compass.rb b/config/initializers/compass.rb
deleted file mode 100644
index ea537f0390..0000000000
--- a/config/initializers/compass.rb
+++ /dev/null
@@ -1,2 +0,0 @@
-require 'compass'
-Sass.load_paths << Compass::Frameworks['compass'].stylesheets_directory
diff --git a/config/initializers/webpack.rb b/config/initializers/webpack.rb
new file mode 100644
index 0000000000..4ccf08144e
--- /dev/null
+++ b/config/initializers/webpack.rb
@@ -0,0 +1,10 @@
+
+module WebpackImageExtension
+  def image_pack_path(image)
+    # The Webpacker::Helper#resolve_path_to_image method is incredibly useful
+    # for nicely fetching Webpacker image paths, but it's private.
+    resolve_path_to_image(image)
+  end
+end
+
+Webpacker::Helper.include WebpackImageExtension
diff --git a/config/webpack/environment.js b/config/webpack/environment.js
index d16d9af743..e45ef1fca9 100644
--- a/config/webpack/environment.js
+++ b/config/webpack/environment.js
@@ -1,3 +1,23 @@
 const { environment } = require('@rails/webpacker')
 
 module.exports = environment
+
+function hotfixPostcssLoaderConfig (subloader) {
+  const subloaderName = subloader.loader
+  if (subloaderName === 'postcss-loader') {
+    if (subloader.options.postcssOptions) {
+      console.log(
+        '\x1b[31m%s\x1b[0m',
+        'Remove postcssOptions workaround in config/webpack/environment.js'
+      )
+    } else {
+      subloader.options.postcssOptions = subloader.options.config;
+      delete subloader.options.config;
+    }
+  }
+}
+
+environment.loaders.keys().forEach(loaderName => {
+  const loader = environment.loaders.get(loaderName);
+  loader.use.forEach(hotfixPostcssLoaderConfig);
+});
diff --git a/config/webpacker.yml b/config/webpacker.yml
index dccab3e4ab..aaf278905b 100644
--- a/config/webpacker.yml
+++ b/config/webpacker.yml
@@ -10,13 +10,19 @@ default: &default
 
   # Additional paths webpack should lookup modules
   # ['app/assets', 'engine/foo/app/assets']
-  additional_paths: []
+  additional_paths: [
+    'vendor',
+    'app/webpacker/css',
+    'app/webpacker/fonts',
+    'app/webpacker/images',
+    'engines/web/app/assets/stylesheets'
+  ]
 
   # Reload manifest.json on all requests so we reload latest compiled packs
   cache_manifest: false
 
   # Extract and emit a css file
-  extract_css: false
+  extract_css: true
 
   static_assets_extensions:
     - .jpg
@@ -46,6 +52,9 @@ default: &default
     - .gif
     - .jpeg
     - .jpg
+    - .eot
+    - .ttf
+    - .woff
 
 development:
   <<: *default
@@ -77,9 +86,6 @@ production: &production
   # Production depends on precompilation of packs prior to booting for performance.
   compile: false
 
-  # Extract and emit a css file
-  extract_css: true
-
   # Cache manifest.json for performance
   cache_manifest: true
 
diff --git a/package.json b/package.json
index 15b29aae65..bfd9769935 100644
--- a/package.json
+++ b/package.json
@@ -32,8 +32,11 @@
     "babel-loader": "^8.2.3",
     "cable_ready": "^5.0.0-pre2",
     "flatpickr": "^4.6.9",
+    "foundation-sites": "^5.5.2",
+    "jquery-ui": "1.10.4",
     "moment": "^2.29.1",
     "mrujs": "^0.7.2",
+    "select2": "^3.4.5",
     "shortcut-buttons-flatpickr": "^0.3.1",
     "stimulus": "^2.0.0",
     "webpack": "~4",
diff --git a/public/spinning-circles.svg b/public/spinning-circles.svg
new file mode 100755
index 0000000000..258d405c49
--- /dev/null
+++ b/public/spinning-circles.svg
@@ -0,0 +1,55 @@
+<!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
+<svg width="58" height="58" viewBox="0 0 58 58" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd">
+        <g transform="translate(2 1)" stroke="#0096ad" stroke-width="1.5">
+            <circle cx="42.601" cy="11.462" r="5" fill-opacity="1" fill="#0096ad">
+                <animate attributeName="fill-opacity"
+                     begin="0s" dur="1.3s"
+                     values="1;0;0;0;0;0;0;0" calcMode="linear"
+                     repeatCount="indefinite" />
+            </circle>
+            <circle cx="49.063" cy="27.063" r="5" fill-opacity="0" fill="#0096ad">
+                <animate attributeName="fill-opacity"
+                     begin="0s" dur="1.3s"
+                     values="0;1;0;0;0;0;0;0" calcMode="linear"
+                     repeatCount="indefinite" />
+            </circle>
+            <circle cx="42.601" cy="42.663" r="5" fill-opacity="0" fill="#0096ad">
+                <animate attributeName="fill-opacity"
+                     begin="0s" dur="1.3s"
+                     values="0;0;1;0;0;0;0;0" calcMode="linear"
+                     repeatCount="indefinite" />
+            </circle>
+            <circle cx="27" cy="49.125" r="5" fill-opacity="0" fill="#0096ad">
+                <animate attributeName="fill-opacity"
+                     begin="0s" dur="1.3s"
+                     values="0;0;0;1;0;0;0;0" calcMode="linear"
+                     repeatCount="indefinite" />
+            </circle>
+            <circle cx="11.399" cy="42.663" r="5" fill-opacity="0" fill="#0096ad">
+                <animate attributeName="fill-opacity"
+                     begin="0s" dur="1.3s"
+                     values="0;0;0;0;1;0;0;0" calcMode="linear"
+                     repeatCount="indefinite" />
+            </circle>
+            <circle cx="4.938" cy="27.063" r="5" fill-opacity="0" fill="#0096ad">
+                <animate attributeName="fill-opacity"
+                     begin="0s" dur="1.3s"
+                     values="0;0;0;0;0;1;0;0" calcMode="linear"
+                     repeatCount="indefinite" />
+            </circle>
+            <circle cx="11.399" cy="11.462" r="5" fill-opacity="0" fill="#0096ad">
+                <animate attributeName="fill-opacity"
+                     begin="0s" dur="1.3s"
+                     values="0;0;0;0;0;0;1;0" calcMode="linear"
+                     repeatCount="indefinite" />
+            </circle>
+            <circle cx="27" cy="5" r="5" fill-opacity="0" fill="#0096ad">
+                <animate attributeName="fill-opacity"
+                     begin="0s" dur="1.3s"
+                     values="0;0;0;0;0;0;0;1" calcMode="linear"
+                     repeatCount="indefinite" />
+            </circle>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/spec/base_spec_helper.rb b/spec/base_spec_helper.rb
index 7fbba39b47..617ed81a84 100644
--- a/spec/base_spec_helper.rb
+++ b/spec/base_spec_helper.rb
@@ -49,6 +49,7 @@ end
 ActionMailer::Base.default_url_options[:host] = ENV["SITE_URL"]
 
 FactoryBot.use_parent_strategy = false
+FactoryBot::SyntaxRunner.include FileHelper
 
 RSpec.configure do |config|
   # Remove this line if you're not using ActiveRecord or ActiveRecord fixtures
diff --git a/spec/controllers/api/v0/logos_controller_spec.rb b/spec/controllers/api/v0/logos_controller_spec.rb
index d87f919fe7..4d82469775 100644
--- a/spec/controllers/api/v0/logos_controller_spec.rb
+++ b/spec/controllers/api/v0/logos_controller_spec.rb
@@ -5,6 +5,7 @@ require "spec_helper"
 module Api
   describe V0::LogosController, type: :controller do
     include AuthenticationHelper
+    include FileHelper
 
     let(:admin_user) { create(:admin_user) }
     let(:enterprise_owner) { create(:user) }
@@ -17,8 +18,7 @@ module Api
     }
 
     describe "removing logo" do
-      image_path = File.open(Rails.root.join("app", "assets", "images", "logo-black.png"))
-      let(:image) { Rack::Test::UploadedFile.new(image_path, "image/png") }
+      let(:image) { Rack::Test::UploadedFile.new(black_logo_file, "image/png") }
 
       let(:enterprise) { create(:enterprise, owner: enterprise_owner, logo: image) }
 
diff --git a/spec/controllers/api/v0/product_images_controller_spec.rb b/spec/controllers/api/v0/product_images_controller_spec.rb
index 65cc9597dd..cf658afc1e 100644
--- a/spec/controllers/api/v0/product_images_controller_spec.rb
+++ b/spec/controllers/api/v0/product_images_controller_spec.rb
@@ -5,6 +5,7 @@ require 'spec_helper'
 module Api
   describe V0::ProductImagesController, type: :controller do
     include AuthenticationHelper
+    include FileHelper
     render_views
 
     describe "uploading an image" do
@@ -12,8 +13,7 @@ module Api
         allow(controller).to receive(:spree_current_user) { current_api_user }
       end
 
-      image_path = File.open(Rails.root.join('app', 'assets', 'images', 'logo-black.png'))
-      let(:image) { Rack::Test::UploadedFile.new(image_path, 'image/png') }
+      let(:image) { Rack::Test::UploadedFile.new(black_logo_file, 'image/png') }
       let!(:product_without_image) { create(:product) }
       let!(:product_with_image) { create(:product_with_image) }
       let(:current_api_user) { create(:admin_user) }
diff --git a/spec/controllers/api/v0/promo_images_controller_spec.rb b/spec/controllers/api/v0/promo_images_controller_spec.rb
index 928ac352fe..22296172d1 100644
--- a/spec/controllers/api/v0/promo_images_controller_spec.rb
+++ b/spec/controllers/api/v0/promo_images_controller_spec.rb
@@ -5,6 +5,7 @@ require "spec_helper"
 module Api
   describe V0::PromoImagesController, type: :controller do
     include AuthenticationHelper
+    include FileHelper
 
     let(:admin_user) { create(:admin_user) }
     let(:enterprise_owner) { create(:user) }
@@ -17,8 +18,7 @@ module Api
     }
 
     describe "removing promo image" do
-      image_path = File.open(Rails.root.join("app", "assets", "images", "logo-black.png"))
-      let(:image) { Rack::Test::UploadedFile.new(image_path, "image/png") }
+      let(:image) { Rack::Test::UploadedFile.new(black_logo_file, "image/png") }
 
       let(:enterprise) { create(:enterprise, owner: enterprise_owner, promo_image: image) }
 
diff --git a/spec/controllers/api/v0/terms_and_conditions_controller_spec.rb b/spec/controllers/api/v0/terms_and_conditions_controller_spec.rb
index 7497e61d7a..6a8fc673a5 100644
--- a/spec/controllers/api/v0/terms_and_conditions_controller_spec.rb
+++ b/spec/controllers/api/v0/terms_and_conditions_controller_spec.rb
@@ -5,13 +5,14 @@ require "spec_helper"
 module Api
   describe V0::TermsAndConditionsController, type: :controller do
     include AuthenticationHelper
+    include FileHelper
 
     let(:enterprise_owner) { create(:user) }
     let(:enterprise) { create(:enterprise, owner: enterprise_owner ) }
     let(:enterprise_manager) { create(:user, enterprises: [enterprise]) }
 
     describe "removing terms and conditions file" do
-      fake_terms_file_path = File.open(Rails.root.join("app", "assets", "images", "logo-black.png"))
+      let(:fake_terms_file_path) { black_logo_file }
       let(:terms_and_conditions_file) {
         Rack::Test::UploadedFile.new(fake_terms_file_path, "application/pdf")
       }
diff --git a/spec/factories/order_cycle_factory.rb b/spec/factories/order_cycle_factory.rb
index 62425f518f..2b1c50ddeb 100644
--- a/spec/factories/order_cycle_factory.rb
+++ b/spec/factories/order_cycle_factory.rb
@@ -31,12 +31,11 @@ FactoryBot.define do
       # Products with images
       proxy.exchanges.incoming.each do |exchange|
         product = create(:product, supplier: exchange.sender)
-        image = File.open(File.expand_path('../../app/assets/images/logo-white.png', __dir__))
         Spree::Image.create(
           viewable_id: product.master.id,
           viewable_type: 'Spree::Variant',
           alt: "position 1",
-          attachment: image,
+          attachment: white_logo_file,
           position: 1
         )
 
diff --git a/spec/factories/product_factory.rb b/spec/factories/product_factory.rb
index aefd7ba399..0e6108bb4a 100644
--- a/spec/factories/product_factory.rb
+++ b/spec/factories/product_factory.rb
@@ -44,8 +44,7 @@ FactoryBot.define do
 
   factory :product_with_image, parent: :product do
     after(:create) do |product|
-      image = File.open(Rails.root.join('app', 'assets', 'images', 'logo-white.png'))
-      Spree::Image.create(attachment: image,
+      Spree::Image.create(attachment: white_logo_file,
                           viewable_id: product.master.id,
                           viewable_type: 'Spree::Variant')
     end
diff --git a/spec/features/admin/invoice_print_spec.rb b/spec/features/admin/invoice_print_spec.rb
index 0a1b82c2b0..0d603e9c49 100644
--- a/spec/features/admin/invoice_print_spec.rb
+++ b/spec/features/admin/invoice_print_spec.rb
@@ -23,6 +23,10 @@ describe '
                                                 payment_state: 'balance_due')
   end
 
+  before do
+    stub_request(:get, ->(uri) { uri.to_s.include? "/css/mail" })
+  end
+
   describe "that contains right Payment Description at Checkout information" do
     let!(:payment_method1) do
       create(:stripe_sca_payment_method, distributors: [distributor], description: "description1")
diff --git a/spec/performance/shop_controller_spec.rb b/spec/performance/shop_controller_spec.rb
index a37a264db4..3de997795f 100644
--- a/spec/performance/shop_controller_spec.rb
+++ b/spec/performance/shop_controller_spec.rb
@@ -3,6 +3,8 @@
 require 'spec_helper'
 
 describe ShopController, type: :controller, performance: true do
+  include FileHelper
+
   let(:d) { create(:distributor_enterprise) }
   let(:enterprise_fee) { create(:enterprise_fee) }
   let(:order_cycle) {
@@ -17,7 +19,7 @@ describe ShopController, type: :controller, performance: true do
 
   describe "fetching products" do
     let(:exchange) { order_cycle.exchanges.to_enterprises(d).outgoing.first }
-    let(:image) { File.open(File.expand_path('../../app/assets/images/logo-white.png', __dir__)) }
+    let(:image) { white_logo_file }
     let(:cache_key_patterns) do
       [
         'api\/taxon_serializer\/spree\/taxons',
diff --git a/spec/serializers/api/admin/enterprise_serializer_spec.rb b/spec/serializers/api/admin/enterprise_serializer_spec.rb
index 1f475718fb..1c4b2a1127 100644
--- a/spec/serializers/api/admin/enterprise_serializer_spec.rb
+++ b/spec/serializers/api/admin/enterprise_serializer_spec.rb
@@ -3,6 +3,8 @@
 require "spec_helper"
 
 describe Api::Admin::EnterpriseSerializer do
+  include FileHelper
+
   let(:enterprise) { create(:distributor_enterprise) }
   it "serializes an enterprise" do
     serializer = Api::Admin::EnterpriseSerializer.new enterprise
@@ -14,8 +16,8 @@ describe Api::Admin::EnterpriseSerializer do
 
     context "when there is a logo" do
       let(:image) do
-        image_path = File.open(Rails.root.join("app", "assets", "images", "logo-black.png"))
-        Rack::Test::UploadedFile.new(image_path, "image/png")
+        image = white_logo_file
+        Rack::Test::UploadedFile.new(image, "image/png")
       end
 
       it "includes URLs of image versions" do
@@ -40,8 +42,8 @@ describe Api::Admin::EnterpriseSerializer do
 
     context "when there is a promo image" do
       let(:image) do
-        image_path = File.open(Rails.root.join("app", "assets", "images", "logo-black.png"))
-        Rack::Test::UploadedFile.new(image_path, "image/png")
+        image = black_logo_file
+        Rack::Test::UploadedFile.new(image, "image/png")
       end
 
       it "includes URLs of image versions" do
diff --git a/spec/support/file_helper.rb b/spec/support/file_helper.rb
new file mode 100644
index 0000000000..290467905e
--- /dev/null
+++ b/spec/support/file_helper.rb
@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module FileHelper
+  def black_logo_file
+    File.open(black_logo_path)
+  end
+
+  def white_logo_file
+    File.open(black_logo_path)
+  end
+
+  def black_logo_path
+    Rails.root.join('app/webpacker/images/logo-black.png')
+  end
+
+  def white_logo_path
+    Rails.root.join('app/webpacker/images/logo-white.png')
+  end
+end
diff --git a/spec/system/admin/configuration/content_spec.rb b/spec/system/admin/configuration/content_spec.rb
index fb68dc49e5..5f1ffe60d5 100644
--- a/spec/system/admin/configuration/content_spec.rb
+++ b/spec/system/admin/configuration/content_spec.rb
@@ -7,6 +7,7 @@ describe "
   I want to configure the site content
 " do
   include AuthenticationHelper
+  include FileHelper
   include WebHelper
 
   before do
@@ -35,7 +36,7 @@ describe "
   end
 
   it "uploads logos" do
-    attach_file "logo", Rails.root.join('app/assets/images/logo-white.png')
+    attach_file "logo", white_logo_path
     click_button "Update"
     expect(page).to have_content "Your content has been successfully updated!"
 
diff --git a/spec/system/admin/enterprises/images_spec.rb b/spec/system/admin/enterprises/images_spec.rb
index 66b6d90737..11d9e2e09b 100644
--- a/spec/system/admin/enterprises/images_spec.rb
+++ b/spec/system/admin/enterprises/images_spec.rb
@@ -4,6 +4,7 @@ require "system_helper"
 
 describe "Managing enterprise images" do
   include WebHelper
+  include FileHelper
   include AuthenticationHelper
 
   context "as an Enterprise user", js: true do
@@ -35,7 +36,7 @@ describe "Managing enterprise images" do
 
       it "editing logo" do
         # Adding image
-        attach_file "enterprise[logo]", Rails.root.join("app", "assets", "images", "logo-white.png")
+        attach_file "enterprise[logo]", white_logo_path
         click_button "Update"
 
         expect(page).to have_content("Enterprise \"#{distributor.name}\" has been successfully updated!")
@@ -46,7 +47,7 @@ describe "Managing enterprise images" do
         end
 
         # Replacing image
-        attach_file "enterprise[logo]", Rails.root.join("app", "assets", "images", "logo-black.png")
+        attach_file "enterprise[logo]", black_logo_path
         click_button "Update"
 
         expect(page).to have_content("Enterprise \"#{distributor.name}\" has been successfully updated!")
@@ -72,8 +73,7 @@ describe "Managing enterprise images" do
 
       it "editing promo image" do
         # Adding image
-        attach_file "enterprise[promo_image]",
-                    Rails.root.join("app", "assets", "images", "logo-white.png")
+        attach_file "enterprise[promo_image]", white_logo_path
         click_button "Update"
 
         expect(page).to have_content("Enterprise \"#{distributor.name}\" has been successfully updated!")
@@ -84,8 +84,7 @@ describe "Managing enterprise images" do
         end
 
         # Replacing image
-        attach_file "enterprise[promo_image]",
-                    Rails.root.join("app", "assets", "images", "logo-black.png")
+        attach_file "enterprise[promo_image]", black_logo_path
         click_button "Update"
 
         expect(page).to have_content("Enterprise \"#{distributor.name}\" has been successfully updated!")
diff --git a/spec/system/admin/enterprises/terms_and_conditions_spec.rb b/spec/system/admin/enterprises/terms_and_conditions_spec.rb
index 716519f9ca..f5e11e3657 100644
--- a/spec/system/admin/enterprises/terms_and_conditions_spec.rb
+++ b/spec/system/admin/enterprises/terms_and_conditions_spec.rb
@@ -4,6 +4,7 @@ require "system_helper"
 
 describe "Uploading Terms and Conditions PDF" do
   include AuthenticationHelper
+  include FileHelper
 
   context "as an Enterprise user", js: true do
     let(:enterprise_user) { create(:user, enterprise_limit: 1) }
@@ -23,13 +24,13 @@ describe "Uploading Terms and Conditions PDF" do
         end
       end
 
-      let(:white_pdf_file_name) { Rails.root.join("app/assets/images/logo-white.pdf") }
-      let(:black_pdf_file_name) { Rails.root.join("app/assets/images/logo-black.pdf") }
+      let(:white_pdf_file_name) { Rails.root.join("app/webpacker/images/logo-white.pdf") }
+      let(:black_pdf_file_name) { Rails.root.join("app/webpacker/images/logo-black.pdf") }
 
       around do |example|
         # Create fake PDFs from PNG images
-        FileUtils.cp(Rails.root.join("app/assets/images/logo-white.png"), white_pdf_file_name)
-        FileUtils.cp(Rails.root.join("app/assets/images/logo-black.png"), black_pdf_file_name)
+        FileUtils.cp(white_logo_path, white_pdf_file_name)
+        FileUtils.cp(black_logo_path, black_pdf_file_name)
 
         example.run
 
diff --git a/spec/system/admin/products_spec.rb b/spec/system/admin/products_spec.rb
index 0e3bee4aec..a70c7504ec 100644
--- a/spec/system/admin/products_spec.rb
+++ b/spec/system/admin/products_spec.rb
@@ -8,6 +8,7 @@ describe '
 ' do
   include WebHelper
   include AuthenticationHelper
+  include FileHelper
 
   let!(:taxon) { create(:taxon) }
   let!(:stock_location) { create(:stock_location, backorderable_default: false) }
@@ -503,7 +504,7 @@ describe '
 
     it "loading edit product image page including url filter", js: true do
       product = create(:simple_product, supplier: @supplier2)
-      image = File.open(File.expand_path('../../../app/assets/images/logo-white.png', __dir__))
+      image = white_logo_file
       image_object = Spree::Image.create(viewable_id: product.master.id,
                                          viewable_type: 'Spree::Variant', alt: "position 1", attachment: image, position: 1)
 
@@ -523,7 +524,7 @@ describe '
 
     it "updating a product image including url filter", js: true do
       product = create(:simple_product, supplier: @supplier2)
-      image = File.open(File.expand_path('../../../app/assets/images/logo-white.png', __dir__))
+      image = white_logo_file
       image_object = Spree::Image.create(viewable_id: product.master.id,
                                          viewable_type: 'Spree::Variant', alt: "position 1", attachment: image, position: 1)
 
@@ -544,7 +545,7 @@ describe '
       unsupported_image_file_path = Rails.root + "README.md"
       product = create(:simple_product, supplier: @supplier2)
 
-      image = File.open(File.expand_path('../../../app/assets/images/logo-white.png', __dir__))
+      image = white_logo_file
       Spree::Image.create(viewable_id: product.master.id, viewable_type: 'Spree::Variant',
                           alt: "position 1", attachment: image, position: 1)
 
@@ -559,7 +560,7 @@ describe '
 
     it "deleting product images", js: true do
       product = create(:simple_product, supplier: @supplier2)
-      image = File.open(File.expand_path('../../../app/assets/images/logo-white.png', __dir__))
+      image = white_logo_file
       Spree::Image.create(viewable_id: product.master.id, viewable_type: 'Spree::Variant',
                           alt: "position 1", attachment: image, position: 1)
 
@@ -577,7 +578,7 @@ describe '
 
     it "deleting product image including url filter", js: true do
       product = create(:simple_product, supplier: @supplier2)
-      image = File.open(File.expand_path('../../../app/assets/images/logo-white.png', __dir__))
+      image = white_logo_file
       Spree::Image.create(viewable_id: product.master.id, viewable_type: 'Spree::Variant',
                           alt: "position 1", attachment: image, position: 1)
 
diff --git a/spec/system/consumer/shopping/checkout_spec.rb b/spec/system/consumer/shopping/checkout_spec.rb
index 3da2c1a802..3ab016e3a4 100644
--- a/spec/system/consumer/shopping/checkout_spec.rb
+++ b/spec/system/consumer/shopping/checkout_spec.rb
@@ -6,6 +6,7 @@ describe "As a consumer I want to check out my cart", js: true do
   include AuthenticationHelper
   include ShopWorkflow
   include CheckoutRequestsHelper
+  include FileHelper
   include WebHelper
   include UIComponentHelper
 
@@ -157,7 +158,7 @@ describe "As a consumer I want to check out my cart", js: true do
     end
 
     context "when distributor has T&Cs" do
-      let(:fake_terms_and_conditions_path) { Rails.root.join("app/assets/images/logo-white.png") }
+      let(:fake_terms_and_conditions_path) { white_logo_path }
       let(:terms_and_conditions_file) {
         Rack::Test::UploadedFile.new(fake_terms_and_conditions_path, "application/pdf")
       }
@@ -254,7 +255,7 @@ describe "As a consumer I want to check out my cart", js: true do
     end
 
     context "when the seller's terms and the platform's terms have to be accepted" do
-      let(:fake_terms_and_conditions_path) { Rails.root.join("app/assets/images/logo-white.png") }
+      let(:fake_terms_and_conditions_path) { white_logo_path }
       let(:terms_and_conditions_file) {
         Rack::Test::UploadedFile.new(fake_terms_and_conditions_path, "application/pdf")
       }
diff --git a/spec/system/consumer/shopping/shopping_spec.rb b/spec/system/consumer/shopping/shopping_spec.rb
index 0d0e8c7229..e22b841bcf 100644
--- a/spec/system/consumer/shopping/shopping_spec.rb
+++ b/spec/system/consumer/shopping/shopping_spec.rb
@@ -4,6 +4,7 @@ require 'system_helper'
 
 describe "As a consumer I want to shop with a distributor", js: true do
   include AuthenticationHelper
+  include FileHelper
   include WebHelper
   include ShopWorkflow
   include UIComponentHelper
@@ -29,7 +30,7 @@ describe "As a consumer I want to shop with a distributor", js: true do
 
     it "shows a distributor with images" do
       # Given the distributor has a logo
-      distributor.logo = File.new(Rails.root.join("app/assets/images/logo-white.png"))
+      distributor.logo = File.new(white_logo_path)
       distributor.save!
 
       # Then we should see the distributor and its logo
diff --git a/spec/views/spree/admin/orders/invoice.html.haml_spec.rb b/spec/views/spree/admin/orders/invoice.html.haml_spec.rb
index 8b49a142e8..7f945acfb1 100644
--- a/spec/views/spree/admin/orders/invoice.html.haml_spec.rb
+++ b/spec/views/spree/admin/orders/invoice.html.haml_spec.rb
@@ -25,6 +25,8 @@ describe "spree/admin/orders/invoice.html.haml" do
                                     display_checkout_tax_total: '10',
                                     display_checkout_total_less_tax: '8',
                                     outstanding_balance_label: 'Outstanding Balance'
+
+    stub_request(:get, ->(uri) { uri.to_s.include? "/css/mail" })
   end
 
   it "displays the customer code" do
diff --git a/vendor/assets/stylesheets/leaflet.css b/vendor/assets/stylesheets/leaflet.css
index 983d60592b..eb304a4613 100644
--- a/vendor/assets/stylesheets/leaflet.css
+++ b/vendor/assets/stylesheets/leaflet.css
@@ -348,12 +348,12 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	border-radius: 5px;
 	}
 .leaflet-control-layers-toggle {
-	background-image: url(images/layers.png);
+	/*background-image: url(images/layers.png);*/
 	width: 36px;
 	height: 36px;
 	}
 .leaflet-retina .leaflet-control-layers-toggle {
-	background-image: url(images/layers-2x.png);
+	/*background-image: url(images/layers-2x.png);*/
 	background-size: 26px 26px;
 	}
 .leaflet-touch .leaflet-control-layers-toggle {
@@ -394,7 +394,7 @@ svg.leaflet-image-layer.leaflet-interactive path {
 
 /* Default icon URLs */
 .leaflet-default-icon-path {
-	background-image: url(images/marker-icon.png);
+	/*background-image: url(images/marker-icon.png);*/
 	}
 
 
diff --git a/vendor/assets/stylesheets/select2.css.scss b/vendor/assets/stylesheets/select2.css.scss
new file mode 100644
index 0000000000..ea1e45eb5f
--- /dev/null
+++ b/vendor/assets/stylesheets/select2.css.scss
@@ -0,0 +1,615 @@
+/*
+Version: 3.4.3 Timestamp: Tue Sep 17 06:47:14 PDT 2013
+*/
+.select2-container {
+    margin: 0;
+    position: relative;
+    display: inline-block;
+    /* inline-block for ie7 */
+    zoom: 1;
+    *display: inline;
+    vertical-align: middle;
+}
+
+.select2-container,
+.select2-drop,
+.select2-search,
+.select2-search input {
+  /*
+    Force border-box so that % widths fit the parent
+    container without overlap because of margin/padding.
+
+    More Info : http://www.quirksmode.org/css/box.html
+  */
+  -webkit-box-sizing: border-box; /* webkit */
+     -moz-box-sizing: border-box; /* firefox */
+          box-sizing: border-box; /* css3 */
+}
+
+.select2-container .select2-choice {
+    display: block;
+    height: 26px;
+    padding: 0 0 0 8px;
+    overflow: hidden;
+    position: relative;
+
+    border: 1px solid #aaa;
+    white-space: nowrap;
+    line-height: 26px;
+    color: #444;
+    text-decoration: none;
+
+    border-radius: 4px;
+
+    background-clip: padding-box;
+
+    -webkit-touch-callout: none;
+      -webkit-user-select: none;
+         -moz-user-select: none;
+          -ms-user-select: none;
+              user-select: none;
+
+    background-color: #fff;
+    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eee), color-stop(0.5, #fff));
+    background-image: -webkit-linear-gradient(center bottom, #eee 0%, #fff 50%);
+    background-image: -moz-linear-gradient(center bottom, #eee 0%, #fff 50%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#eeeeee', GradientType = 0);
+    background-image: linear-gradient(top, #fff 0%, #eee 50%);
+}
+
+.select2-container.select2-drop-above .select2-choice {
+    border-bottom-color: #aaa;
+
+    border-radius: 0 0 4px 4px;
+
+    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eee), color-stop(0.9, #fff));
+    background-image: -webkit-linear-gradient(center bottom, #eee 0%, #fff 90%);
+    background-image: -moz-linear-gradient(center bottom, #eee 0%, #fff 90%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eeeeee', GradientType=0);
+    background-image: linear-gradient(top, #eee 0%, #fff 90%);
+}
+
+.select2-container.select2-allowclear .select2-choice .select2-chosen {
+    margin-right: 42px;
+}
+
+.select2-container .select2-choice > .select2-chosen {
+    margin-right: 26px;
+    display: block;
+    overflow: hidden;
+
+    white-space: nowrap;
+
+    text-overflow: ellipsis;
+}
+
+.select2-container .select2-choice abbr {
+    display: none;
+    width: 12px;
+    height: 12px;
+    position: absolute;
+    right: 24px;
+    top: 8px;
+
+    font-size: 1px;
+    text-decoration: none;
+
+    border: 0;
+    background: url('../images/select2.png') right top no-repeat;
+    cursor: pointer;
+    outline: 0;
+}
+
+.select2-container.select2-allowclear .select2-choice abbr {
+    display: inline-block;
+}
+
+.select2-container .select2-choice abbr:hover {
+    background-position: right -11px;
+    cursor: pointer;
+}
+
+.select2-drop-mask {
+    border: 0;
+    margin: 0;
+    padding: 0;
+    position: fixed;
+    left: 0;
+    top: 0;
+    min-height: 100%;
+    min-width: 100%;
+    height: auto;
+    width: auto;
+    opacity: 0;
+    z-index: 9998;
+    /* styles required for IE to work */
+    background-color: #fff;
+    filter: alpha(opacity=0);
+}
+
+.select2-drop {
+    width: 100%;
+    margin-top: -1px;
+    position: absolute;
+    z-index: 9999;
+    top: 100%;
+
+    background: #fff;
+    color: #000;
+    border: 1px solid #aaa;
+    border-top: 0;
+
+    border-radius: 0 0 4px 4px;
+
+    -webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
+            box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
+}
+
+.select2-drop-auto-width {
+    border-top: 1px solid #aaa;
+    width: auto;
+}
+
+.select2-drop-auto-width .select2-search {
+    padding-top: 4px;
+}
+
+.select2-drop.select2-drop-above {
+    margin-top: 1px;
+    border-top: 1px solid #aaa;
+    border-bottom: 0;
+
+    border-radius: 4px 4px 0 0;
+
+    -webkit-box-shadow: 0 -4px 5px rgba(0, 0, 0, .15);
+            box-shadow: 0 -4px 5px rgba(0, 0, 0, .15);
+}
+
+.select2-drop-active {
+    border: 1px solid #5897fb;
+    border-top: none;
+}
+
+.select2-drop.select2-drop-above.select2-drop-active {
+    border-top: 1px solid #5897fb;
+}
+
+.select2-container .select2-choice .select2-arrow {
+    display: inline-block;
+    width: 18px;
+    height: 100%;
+    position: absolute;
+    right: 0;
+    top: 0;
+
+    border-left: 1px solid #aaa;
+    border-radius: 0 4px 4px 0;
+
+    background-clip: padding-box;
+
+    background: #ccc;
+    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ccc), color-stop(0.6, #eee));
+    background-image: -webkit-linear-gradient(center bottom, #ccc 0%, #eee 60%);
+    background-image: -moz-linear-gradient(center bottom, #ccc 0%, #eee 60%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#eeeeee', endColorstr = '#cccccc', GradientType = 0);
+    background-image: linear-gradient(top, #ccc 0%, #eee 60%);
+}
+
+.select2-container .select2-choice .select2-arrow b {
+    display: block;
+    width: 100%;
+    height: 100%;
+    background: url('../images/select2.png') no-repeat 0 1px;
+}
+
+.select2-search {
+    display: inline-block;
+    width: 100%;
+    min-height: 26px;
+    margin: 0;
+    padding-left: 4px;
+    padding-right: 4px;
+
+    position: relative;
+    z-index: 10000;
+
+    white-space: nowrap;
+}
+
+.select2-search input {
+    width: 100%;
+    height: auto !important;
+    min-height: 26px;
+    padding: 4px 20px 4px 5px;
+    margin: 0;
+
+    outline: 0;
+    font-family: sans-serif;
+    font-size: 1em;
+
+    border: 1px solid #aaa;
+    border-radius: 0;
+
+    -webkit-box-shadow: none;
+            box-shadow: none;
+
+    background: #fff url('../images/select2.png') no-repeat 100% -22px;
+    background: url('../images/select2.png') no-repeat 100% -22px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, #fff), color-stop(0.99, #eee));
+    background: url('../images/select2.png') no-repeat 100% -22px, -webkit-linear-gradient(center bottom, #fff 85%, #eee 99%);
+    background: url('../images/select2.png') no-repeat 100% -22px, -moz-linear-gradient(center bottom, #fff 85%, #eee 99%);
+    background: url('../images/select2.png') no-repeat 100% -22px, linear-gradient(top, #fff 85%, #eee 99%);
+}
+
+.select2-drop.select2-drop-above .select2-search input {
+    margin-top: 4px;
+}
+
+.select2-search input.select2-active {
+    background: #fff url('../images/select2-spinner.gif') no-repeat 100%;
+    background: url('../images/select2-spinner.gif') no-repeat 100%, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, #fff), color-stop(0.99, #eee));
+    background: url('../images/select2-spinner.gif') no-repeat 100%, -webkit-linear-gradient(center bottom, #fff 85%, #eee 99%);
+    background: url('../images/select2-spinner.gif') no-repeat 100%, -moz-linear-gradient(center bottom, #fff 85%, #eee 99%);
+    background: url('../images/select2-spinner.gif') no-repeat 100%, linear-gradient(top, #fff 85%, #eee 99%);
+}
+
+.select2-container-active .select2-choice,
+.select2-container-active .select2-choices {
+    border: 1px solid #5897fb;
+    outline: none;
+
+    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .3);
+            box-shadow: 0 0 5px rgba(0, 0, 0, .3);
+}
+
+.select2-dropdown-open .select2-choice {
+    border-bottom-color: transparent;
+    -webkit-box-shadow: 0 1px 0 #fff inset;
+            box-shadow: 0 1px 0 #fff inset;
+
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+
+    background-color: #eee;
+    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #fff), color-stop(0.5, #eee));
+    background-image: -webkit-linear-gradient(center bottom, #fff 0%, #eee 50%);
+    background-image: -moz-linear-gradient(center bottom, #fff 0%, #eee 50%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#ffffff', GradientType=0);
+    background-image: linear-gradient(top, #fff 0%, #eee 50%);
+}
+
+.select2-dropdown-open.select2-drop-above .select2-choice,
+.select2-dropdown-open.select2-drop-above .select2-choices {
+    border: 1px solid #5897fb;
+    border-top-color: transparent;
+
+    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(0.5, #eee));
+    background-image: -webkit-linear-gradient(center top, #fff 0%, #eee 50%);
+    background-image: -moz-linear-gradient(center top, #fff 0%, #eee 50%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#ffffff', GradientType=0);
+    background-image: linear-gradient(bottom, #fff 0%, #eee 50%);
+}
+
+.select2-dropdown-open .select2-choice .select2-arrow {
+    background: transparent;
+    border-left: none;
+    filter: none;
+}
+.select2-dropdown-open .select2-choice .select2-arrow b {
+    background-position: -18px 1px;
+}
+
+/* results */
+.select2-results {
+    max-height: 200px;
+    padding: 0 0 0 4px;
+    margin: 4px 4px 4px 0;
+    position: relative;
+    overflow-x: hidden;
+    overflow-y: auto;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+.select2-results ul.select2-result-sub {
+    margin: 0;
+    padding-left: 0;
+}
+
+.select2-results ul.select2-result-sub > li .select2-result-label { padding-left: 20px }
+.select2-results ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 40px }
+.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 60px }
+.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 80px }
+.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 100px }
+.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 110px }
+.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 120px }
+
+.select2-results li {
+    list-style: none;
+    display: list-item;
+    background-image: none;
+}
+
+.select2-results li.select2-result-with-children > .select2-result-label {
+    font-weight: bold;
+}
+
+.select2-results .select2-result-label {
+    padding: 3px 7px 4px;
+    margin: 0;
+    cursor: pointer;
+
+    min-height: 1em;
+
+    -webkit-touch-callout: none;
+      -webkit-user-select: none;
+         -moz-user-select: none;
+          -ms-user-select: none;
+              user-select: none;
+}
+
+.select2-results .select2-highlighted {
+    background: #3875d7;
+    color: #fff;
+}
+
+.select2-results li em {
+    background: #feffde;
+    font-style: normal;
+}
+
+.select2-results .select2-highlighted em {
+    background: transparent;
+}
+
+.select2-results .select2-highlighted ul {
+    background: #fff;
+    color: #000;
+}
+
+
+.select2-results .select2-no-results,
+.select2-results .select2-searching,
+.select2-results .select2-selection-limit {
+    background: #f4f4f4;
+    display: list-item;
+}
+
+/*
+disabled look for disabled choices in the results dropdown
+*/
+.select2-results .select2-disabled.select2-highlighted {
+    color: #666;
+    background: #f4f4f4;
+    display: list-item;
+    cursor: default;
+}
+.select2-results .select2-disabled {
+  background: #f4f4f4;
+  display: list-item;
+  cursor: default;
+}
+
+.select2-results .select2-selected {
+    display: none;
+}
+
+.select2-more-results.select2-active {
+    background: #f4f4f4 url('../images/select2-spinner.gif') no-repeat 100%;
+}
+
+.select2-more-results {
+    background: #f4f4f4;
+    display: list-item;
+}
+
+/* disabled styles */
+
+.select2-container.select2-container-disabled .select2-choice {
+    background-color: #f4f4f4;
+    background-image: none;
+    border: 1px solid #ddd;
+    cursor: default;
+}
+
+.select2-container.select2-container-disabled .select2-choice .select2-arrow {
+    background-color: #f4f4f4;
+    background-image: none;
+    border-left: 0;
+}
+
+.select2-container.select2-container-disabled .select2-choice abbr {
+    display: none;
+}
+
+
+/* multiselect */
+
+.select2-container-multi .select2-choices {
+    height: auto !important;
+    height: 1%;
+    margin: 0;
+    padding: 0;
+    position: relative;
+
+    border: 1px solid #aaa;
+    cursor: text;
+    overflow: hidden;
+
+    background-color: #fff;
+    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(1%, #eee), color-stop(15%, #fff));
+    background-image: -webkit-linear-gradient(top, #eee 1%, #fff 15%);
+    background-image: -moz-linear-gradient(top, #eee 1%, #fff 15%);
+    background-image: linear-gradient(top, #eee 1%, #fff 15%);
+}
+
+.select2-locked {
+  padding: 3px 5px 3px 5px !important;
+}
+
+.select2-container-multi .select2-choices {
+    min-height: 26px;
+}
+
+.select2-container-multi.select2-container-active .select2-choices {
+    border: 1px solid #5897fb;
+    outline: none;
+
+    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .3);
+            box-shadow: 0 0 5px rgba(0, 0, 0, .3);
+}
+.select2-container-multi .select2-choices li {
+    float: left;
+    list-style: none;
+}
+.select2-container-multi .select2-choices .select2-search-field {
+    margin: 0;
+    padding: 0;
+    white-space: nowrap;
+}
+
+.select2-container-multi .select2-choices .select2-search-field input {
+    padding: 5px;
+    margin: 1px 0;
+
+    font-family: sans-serif;
+    font-size: 100%;
+    color: #666;
+    outline: 0;
+    border: 0;
+    -webkit-box-shadow: none;
+            box-shadow: none;
+    background: transparent !important;
+}
+
+.select2-container-multi .select2-choices .select2-search-field input.select2-active {
+    background: #fff url('../images/select2-spinner.gif') no-repeat 100% !important;
+}
+
+.select2-default {
+    color: #999 !important;
+}
+
+.select2-container-multi .select2-choices .select2-search-choice {
+    padding: 3px 5px 3px 18px;
+    margin: 3px 0 3px 5px;
+    position: relative;
+
+    line-height: 13px;
+    color: #333;
+    cursor: default;
+    border: 1px solid #aaaaaa;
+
+    border-radius: 3px;
+
+    -webkit-box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05);
+            box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05);
+
+    background-clip: padding-box;
+
+    -webkit-touch-callout: none;
+      -webkit-user-select: none;
+         -moz-user-select: none;
+          -ms-user-select: none;
+              user-select: none;
+
+    background-color: #e4e4e4;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#f4f4f4', GradientType=0);
+    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eee));
+    background-image: -webkit-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
+    background-image: -moz-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
+    background-image: linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
+}
+.select2-container-multi .select2-choices .select2-search-choice .select2-chosen {
+    cursor: default;
+}
+.select2-container-multi .select2-choices .select2-search-choice-focus {
+    background: #d4d4d4;
+}
+
+.select2-search-choice-close {
+    display: block;
+    width: 12px;
+    height: 13px;
+    position: absolute;
+    right: 3px;
+    top: 4px;
+
+    font-size: 1px;
+    outline: none;
+    background: url('../images/select2.png') right top no-repeat;
+}
+
+.select2-container-multi .select2-search-choice-close {
+    left: 3px;
+}
+
+.select2-container-multi .select2-choices .select2-search-choice .select2-search-choice-close:hover {
+  background-position: right -11px;
+}
+.select2-container-multi .select2-choices .select2-search-choice-focus .select2-search-choice-close {
+    background-position: right -11px;
+}
+
+/* disabled styles */
+.select2-container-multi.select2-container-disabled .select2-choices {
+    background-color: #f4f4f4;
+    background-image: none;
+    border: 1px solid #ddd;
+    cursor: default;
+}
+
+.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice {
+    padding: 3px 5px 3px 5px;
+    border: 1px solid #ddd;
+    background-image: none;
+    background-color: #f4f4f4;
+}
+
+.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice .select2-search-choice-close {    display: none;
+    background: none;
+}
+/* end multiselect */
+
+
+.select2-result-selectable .select2-match,
+.select2-result-unselectable .select2-match {
+    text-decoration: underline;
+}
+
+.select2-offscreen, .select2-offscreen:focus {
+    clip: rect(0 0 0 0) !important;
+    width: 1px !important;
+    height: 1px !important;
+    border: 0 !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    overflow: hidden !important;
+    position: absolute !important;
+    outline: 0 !important;
+    left: 0px !important;
+    top: 0px !important;
+}
+
+.select2-display-none {
+    display: none;
+}
+
+.select2-measure-scrollbar {
+    position: absolute;
+    top: -10000px;
+    left: -10000px;
+    width: 100px;
+    height: 100px;
+    overflow: scroll;
+}
+/* Retina-ize icons */
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi)  {
+  .select2-search input, .select2-search-choice-close, .select2-container .select2-choice abbr, .select2-container .select2-choice .select2-arrow b {
+      background-image: url('../images/select2x2.png') !important;
+      background-repeat: no-repeat !important;
+      background-size: 60px 40px !important;
+  }
+  .select2-search input {
+      background-position: 100% -21px !important;
+  }
+}
diff --git a/yarn.lock b/yarn.lock
index 3127e3391e..3f94684a08 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6164,6 +6164,11 @@ forwarded@~0.1.2:
   resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.2.tgz#98c23dab1175657b8c0573e8ceccd91b0ff18c84"
   integrity sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ=
 
+foundation-sites@^5.5.2:
+  version "5.5.2"
+  resolved "https://registry.yarnpkg.com/foundation-sites/-/foundation-sites-5.5.2.tgz#99c387ce3cd79672f79cb31745b39b5b1c782c03"
+  integrity sha1-mcOHzjzXlnL3nLMXRbObWxx4LAM=
+
 fragment-cache@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/fragment-cache/-/fragment-cache-0.2.1.tgz#4290fad27f13e89be7f33799c6bc5a0abfff0d19"
@@ -8061,6 +8066,11 @@ jest@^27.4.5:
     import-local "^3.0.2"
     jest-cli "^27.4.5"
 
+jquery-ui@1.10.4:
+  version "1.10.4"
+  resolved "https://registry.yarnpkg.com/jquery-ui/-/jquery-ui-1.10.4.tgz#a096fe5f4e0f2ab69a0585cf10455877f57506bd"
+  integrity sha1-oJb+X04PKraaBYXPEEVYd/V1Br0=
+
 js-string-escape@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/js-string-escape/-/js-string-escape-1.0.1.tgz#e2625badbc0d67c7533e9edc1068c587ae4137ef"
@@ -11251,6 +11261,11 @@ select-hose@^2.0.0:
   resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
   integrity sha1-Yl2GWPhlr0Psliv8N2o3NZpJlMo=
 
+select2@^3.4.5:
+  version "3.4.5"
+  resolved "https://registry.yarnpkg.com/select2/-/select2-3.4.5.tgz#c0555ed77da22b1d402ec9e1a69687abc15e747a"
+  integrity sha1-wFVe132iKx1ALsnhppaHq8FedHo=
+
 select@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d"