From fbf5862c66869c77af4afedcbcf3519fc2d209b9 Mon Sep 17 00:00:00 2001
From: David Cook <david@redcliffs.net>
Date: Wed, 24 May 2023 15:38:06 +1000
Subject: [PATCH 1/5] Ignore some css subfolders

Prettier changes these files dramatically and they're arguably not easier to read.
---
 .prettierignore | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/.prettierignore b/.prettierignore
index 1ee141c52c..4b79688005 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -1,4 +1,4 @@
-# Basically, ignore everythings expect app/webpacker/controllers/*.js and app/webpacker/packs/*.js
+# Ignore a lot of things, but we should enable where it can be helpful.
 
 *.md
 *.yml
@@ -6,13 +6,20 @@
 *.json
 *.html
 
+# JS
+# Enabled: app/webpacker/controllers/*.js and app/webpacker/packs/*.js
 babel.config.js
 postcss.config.js
 
+# SCSS
+# Enabled: most of admin
+/app/webpacker/css/admin/globals/
+/app/webpacker/css/admin/shared/
 /app/webpacker/css/darkswarm/
 /app/webpacker/css/mail/
 /app/webpacker/css/shared/
 
+# More
 /app/assets/
 /config/
 /coverage/

From 08dc3e3cbe823b19e40eee134679fa00e419551a Mon Sep 17 00:00:00 2001
From: David Cook <david@redcliffs.net>
Date: Tue, 23 May 2023 16:49:58 +1000
Subject: [PATCH 2/5] Prettify more admin css

yarn prettier --write
---
 .../css/admin/advanced_settings.scss          |   2 +-
 app/webpacker/css/admin/all.scss              |   1 -
 app/webpacker/css/admin/change_type_form.scss |  20 ++-
 .../css/admin/components/navigation.scss      |   2 +-
 app/webpacker/css/admin/customers.scss        |   2 -
 app/webpacker/css/admin/dashboard_item.scss   |   6 +-
 app/webpacker/css/admin/disabled.scss         |   5 +-
 .../css/admin/enterprise_index_panels.scss    |  35 +++--
 .../css/admin/filters_and_controls.scss       |   4 +-
 app/webpacker/css/admin/grid.scss             | 124 +++++++++++++-----
 .../css/admin/index_panel_buttons.scss        |  10 +-
 app/webpacker/css/admin/index_panels.scss     |  24 ++--
 app/webpacker/css/admin/order_cycles.scss     |   9 +-
 app/webpacker/css/admin/product_import.scss   |  44 ++++---
 .../css/admin/question-mark-tooltip.scss      |   1 -
 app/webpacker/css/admin/relationships.scss    |   6 +-
 app/webpacker/css/admin/reports.scss          |  11 +-
 app/webpacker/css/admin/sections/orders.scss  |   3 +-
 .../css/admin/sections/products.scss          |   5 +-
 app/webpacker/css/admin/select2.scss          |   7 +-
 app/webpacker/css/admin/sidebar-item.scss     |   9 +-
 app/webpacker/css/admin/tables.scss           |   5 +-
 app/webpacker/css/admin/tag_rules.scss        |  11 +-
 .../css/admin/terms_of_service_files.scss     |   4 +-
 app/webpacker/css/admin/welcome.scss          |   3 +-
 25 files changed, 233 insertions(+), 120 deletions(-)

diff --git a/app/webpacker/css/admin/advanced_settings.scss b/app/webpacker/css/admin/advanced_settings.scss
index 6636428f3b..c28c7ce3b4 100644
--- a/app/webpacker/css/admin/advanced_settings.scss
+++ b/app/webpacker/css/admin/advanced_settings.scss
@@ -8,7 +8,7 @@
 #toggle_settings {
   display: flex;
   align-items: center;
-  
+
   i {
     display: inline-flex;
     margin-left: 5px;
diff --git a/app/webpacker/css/admin/all.scss b/app/webpacker/css/admin/all.scss
index 7512a443c3..ea19d92b46 100644
--- a/app/webpacker/css/admin/all.scss
+++ b/app/webpacker/css/admin/all.scss
@@ -130,5 +130,4 @@
 @import "app/components/table_header_component/table_header_component";
 @import "app/components/search_input_component/search_input_component";
 @import "app/components/confirm_modal_component/confirm_modal_component";
-
 @import "app/webpacker/css/admin/trix.scss";
diff --git a/app/webpacker/css/admin/change_type_form.scss b/app/webpacker/css/admin/change_type_form.scss
index 87b43ff1a2..080a46b63b 100644
--- a/app/webpacker/css/admin/change_type_form.scss
+++ b/app/webpacker/css/admin/change_type_form.scss
@@ -5,7 +5,8 @@
   section {
     margin: 2em 0 0 0;
 
-    &, & * {
+    &,
+    & * {
       color: $spree-blue;
     }
   }
@@ -48,11 +49,13 @@
     width: 100%;
     cursor: pointer;
 
-    &, & * {
+    &,
+    & * {
       color: white;
     }
 
-    &:after, &:before {
+    &:after,
+    &:before {
       top: 100%;
       left: 50%;
       border: solid transparent;
@@ -84,7 +87,13 @@
     }
 
     .bottom {
-      background: repeating-linear-gradient(60deg, rgba(84, 152, 218, 0), rgba(84, 152, 218, 0) 5px, rgba(255, 255, 255, 0.25) 5px, rgba(255, 255, 255, 0.25) 10px);
+      background: repeating-linear-gradient(
+        60deg,
+        rgba(84, 152, 218, 0),
+        rgba(84, 152, 218, 0) 5px,
+        rgba(255, 255, 255, 0.25) 5px,
+        rgba(255, 255, 255, 0.25) 10px
+      );
       margin-top: 1em;
       margin-left: -15px;
       margin-right: -15px;
@@ -95,7 +104,8 @@
     &.selected {
       background-color: black;
 
-      &:after, &:hover &:after {
+      &:after,
+      &:hover &:after {
         border-top-color: black;
       }
     }
diff --git a/app/webpacker/css/admin/components/navigation.scss b/app/webpacker/css/admin/components/navigation.scss
index b6fb372546..2aeb3a8a30 100644
--- a/app/webpacker/css/admin/components/navigation.scss
+++ b/app/webpacker/css/admin/components/navigation.scss
@@ -78,7 +78,7 @@ nav.menu {
       text-transform: uppercase;
       position: relative;
       text-align: center;
-      font-weight: 600;      
+      font-weight: 600;
 
       i {
         display: inline;
diff --git a/app/webpacker/css/admin/customers.scss b/app/webpacker/css/admin/customers.scss
index f1284b4725..920a3a60db 100644
--- a/app/webpacker/css/admin/customers.scss
+++ b/app/webpacker/css/admin/customers.scss
@@ -3,9 +3,7 @@
 }
 
 table#customers.index {
-
   tr.customer {
-
     .guest-label {
       color: $medium-grey;
       display: block;
diff --git a/app/webpacker/css/admin/dashboard_item.scss b/app/webpacker/css/admin/dashboard_item.scss
index 829b98590f..6a758a29e3 100644
--- a/app/webpacker/css/admin/dashboard_item.scss
+++ b/app/webpacker/css/admin/dashboard_item.scss
@@ -165,7 +165,8 @@ div.dashboard_item {
       border: solid $warning-red;
     }
 
-    &.orange, &.red {
+    &.orange,
+    &.red {
       border-width: 0px 3px 0px 3px;
     }
 
@@ -177,7 +178,8 @@ div.dashboard_item {
       background-color: $spree-light-blue;
     }
 
-    &.even, &.odd {
+    &.even,
+    &.odd {
       &:hover {
         color: #ffffff;
         background-color: $spree-green;
diff --git a/app/webpacker/css/admin/disabled.scss b/app/webpacker/css/admin/disabled.scss
index b454754f2a..14cbcc1714 100644
--- a/app/webpacker/css/admin/disabled.scss
+++ b/app/webpacker/css/admin/disabled.scss
@@ -5,7 +5,8 @@ label.disabled {
   pointer-events: none;
 }
 
-input[type='button'], input[type='submit'] {
+input[type="button"],
+input[type="submit"] {
   &:disabled {
     background-color: $disabled-background;
     color: #ffffff;
@@ -14,7 +15,7 @@ input[type='button'], input[type='submit'] {
   &.secondary:disabled {
     background-color: #ebf3fb;
     border: 1px solid #ebf3fb;
-    color: #AFCFEF;
+    color: #afcfef;
   }
 }
 
diff --git a/app/webpacker/css/admin/enterprise_index_panels.scss b/app/webpacker/css/admin/enterprise_index_panels.scss
index 7d95b9b8e2..2a5aac968f 100644
--- a/app/webpacker/css/admin/enterprise_index_panels.scss
+++ b/app/webpacker/css/admin/enterprise_index_panels.scss
@@ -1,4 +1,5 @@
-.enterprise_package_panel, .enterprise_producer_panel {
+.enterprise_package_panel,
+.enterprise_producer_panel {
   .info {
     p {
       font-size: 1rem;
@@ -14,7 +15,8 @@
     text-align: center;
     // width: 100%;
     cursor: pointer;
-    &, & * {
+    &,
+    & * {
       color: white;
     }
     &:hover {
@@ -22,11 +24,17 @@
         border-top-color: $spree-green;
       }
     }
-    &.disabled{
-      background-color: #C1C1C1;
+    &.disabled {
+      background-color: #c1c1c1;
     }
     .bottom {
-      background: repeating-linear-gradient(60deg, rgba(84, 152, 218, 0), rgba(84, 152, 218, 0) 5px, rgba(255, 255, 255, 0.25) 5px, rgba(255, 255, 255, 0.25) 10px);
+      background: repeating-linear-gradient(
+        60deg,
+        rgba(84, 152, 218, 0),
+        rgba(84, 152, 218, 0) 5px,
+        rgba(255, 255, 255, 0.25) 5px,
+        rgba(255, 255, 255, 0.25) 10px
+      );
       margin-top: 1em;
       margin-left: -15px;
       margin-right: -15px;
@@ -47,8 +55,8 @@
         pointer-events: none;
 
         border-top: 20px solid transparent;
-      	border-bottom: 20px solid transparent;
-      	border-right: 20px solid #000000;
+        border-bottom: 20px solid transparent;
+        border-right: 20px solid #000000;
         margin-top: -20px;
         margin-left: -20px;
       }
@@ -65,7 +73,7 @@
     }
   }
 
-  td.description{
+  td.description {
     font-size: 0.9rem;
   }
 
@@ -75,18 +83,18 @@
     i {
       font-size: 1.5rem;
 
-      &.issue{
+      &.issue {
         color: $warning-red;
       }
 
-      &.warning{
+      &.warning {
         color: #ff9848;
       }
     }
   }
 }
 
-tags-input .tags li.tag-item  {
+tags-input .tags li.tag-item {
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   -ms-border-radius: 3px;
@@ -106,6 +114,7 @@ tags-input .tags .tag-item .remove-button {
   color: white;
 }
 
-table th.actions .no-text[class*="icon-"], table td.actions .no-text[class*="icon-"] {
+table th.actions .no-text[class*="icon-"],
+table td.actions .no-text[class*="icon-"] {
   cursor: pointer;
-}
\ No newline at end of file
+}
diff --git a/app/webpacker/css/admin/filters_and_controls.scss b/app/webpacker/css/admin/filters_and_controls.scss
index 8dd188d9cd..146e6afb1d 100644
--- a/app/webpacker/css/admin/filters_and_controls.scss
+++ b/app/webpacker/css/admin/filters_and_controls.scss
@@ -1,3 +1,5 @@
-.filters, .controls, .divider {
+.filters,
+.controls,
+.divider {
   margin-bottom: 15px;
 }
diff --git a/app/webpacker/css/admin/grid.scss b/app/webpacker/css/admin/grid.scss
index e5b37ce15b..af615768ea 100644
--- a/app/webpacker/css/admin/grid.scss
+++ b/app/webpacker/css/admin/grid.scss
@@ -64,68 +64,130 @@ $col-16: 100;
 }
 
 .column.one,
-.columns.one { width: percentage($col-1); }
+.columns.one {
+  width: percentage($col-1);
+}
 
-.columns.two { width: percentage($col-2); }
+.columns.two {
+  width: percentage($col-2);
+}
 
-.columns.three { width: percentage($col-3); }
+.columns.three {
+  width: percentage($col-3);
+}
 
-.columns.four { width: percentage($col-4); }
+.columns.four {
+  width: percentage($col-4);
+}
 
-.columns.five { width: percentage($col-5); }
+.columns.five {
+  width: percentage($col-5);
+}
 
-.columns.six { width: percentage($col-6); }
+.columns.six {
+  width: percentage($col-6);
+}
 
-.columns.seven { width: percentage($col-7); }
+.columns.seven {
+  width: percentage($col-7);
+}
 
-.columns.eight { width: percentage($col-8); }
+.columns.eight {
+  width: percentage($col-8);
+}
 
-.columns.nine { width: percentage($col-9); }
+.columns.nine {
+  width: percentage($col-9);
+}
 
-.columns.ten { width: percentage($col-10); }
+.columns.ten {
+  width: percentage($col-10);
+}
 
-.columns.eleven { width: percentage($col-11); }
+.columns.eleven {
+  width: percentage($col-11);
+}
 
-.columns.twelve { width: percentage($col-12); }
+.columns.twelve {
+  width: percentage($col-12);
+}
 
-.columns.thirteen { width: percentage($col-13); }
+.columns.thirteen {
+  width: percentage($col-13);
+}
 
-.columns.fourteen { width: percentage($col-14);}
+.columns.fourteen {
+  width: percentage($col-14);
+}
 
-.columns.fifteen { width: percentage($col-15); }
+.columns.fifteen {
+  width: percentage($col-15);
+}
 
-.columns.sixteen { width: 100%; }
+.columns.sixteen {
+  width: 100%;
+}
 
 .column.offset-by-one,
-.columns.offset-by-one { margin-left: $col-2; }
+.columns.offset-by-one {
+  margin-left: $col-2;
+}
 
-.columns.offset-by-two { margin-left: $col-3; }
+.columns.offset-by-two {
+  margin-left: $col-3;
+}
 
-.columns.offset-by-three { margin-left: $col-4; }
+.columns.offset-by-three {
+  margin-left: $col-4;
+}
 
-.columns.offset-by-four { margin-left: $col-5; }
+.columns.offset-by-four {
+  margin-left: $col-5;
+}
 
-.columns.offset-by-five { margin-left: $col-6; }
+.columns.offset-by-five {
+  margin-left: $col-6;
+}
 
-.columns.offset-by-six { margin-left: $col-7; }
+.columns.offset-by-six {
+  margin-left: $col-7;
+}
 
-.columns.offset-by-seven { margin-left: $col-8; }
+.columns.offset-by-seven {
+  margin-left: $col-8;
+}
 
-.columns.offset-by-eight { margin-left: $col-9; }
+.columns.offset-by-eight {
+  margin-left: $col-9;
+}
 
-.columns.offset-by-nine { margin-left: $col-10; }
+.columns.offset-by-nine {
+  margin-left: $col-10;
+}
 
-.columns.offset-by-ten { margin-left: $col-11; }
+.columns.offset-by-ten {
+  margin-left: $col-11;
+}
 
-.columns.offset-by-eleven { margin-left: $col-12; }
+.columns.offset-by-eleven {
+  margin-left: $col-12;
+}
 
-.columns.offset-by-twelve { margin-left: $col-13; }
+.columns.offset-by-twelve {
+  margin-left: $col-13;
+}
 
-.columns.offset-by-thirteen { margin-left: $col-14; }
+.columns.offset-by-thirteen {
+  margin-left: $col-14;
+}
 
-.columns.offset-by-fourteen { margin-left: $col-15; }
+.columns.offset-by-fourteen {
+  margin-left: $col-15;
+}
 
-.columns.offset-by-fifteen { margin-left: 100%; }
+.columns.offset-by-fifteen {
+  margin-left: 100%;
+}
 
 .column.alpha,
 .columns.alpha,
diff --git a/app/webpacker/css/admin/index_panel_buttons.scss b/app/webpacker/css/admin/index_panel_buttons.scss
index 09f7a6f65f..bfaa68e9e9 100644
--- a/app/webpacker/css/admin/index_panel_buttons.scss
+++ b/app/webpacker/css/admin/index_panel_buttons.scss
@@ -8,20 +8,20 @@ tbody.panel-ctrl {
         font-size: 1.3rem;
         background-color: $warning-red;
         &:hover {
-          background-color: #CD4E4F;
+          background-color: #cd4e4f;
         }
         &.disabled {
-          background-color: #C1C1C1;
+          background-color: #c1c1c1;
         }
         &.saving {
-          background-color: #FF9848;
+          background-color: #ff9848;
           i.icon-refresh {
             -webkit-animation: spin 2s infinite linear;
             animation: spin 2s infinite linear;
           }
         }
-        span{
-          i{
+        span {
+          i {
             font-size: 1.5rem;
             margin-left: 10px;
           }
diff --git a/app/webpacker/css/admin/index_panels.scss b/app/webpacker/css/admin/index_panels.scss
index e20ee34a5f..a7e01066f8 100644
--- a/app/webpacker/css/admin/index_panels.scss
+++ b/app/webpacker/css/admin/index_panels.scss
@@ -1,5 +1,5 @@
 tbody.panel-ctrl {
-  td.panel-toggle{
+  td.panel-toggle {
     -webkit-touch-callout: none;
     -webkit-user-select: none;
     -khtml-user-select: none;
@@ -60,14 +60,14 @@ tbody.panel-ctrl {
       }
 
       i.icon-status::before {
-        opacity: 1.0;
+        opacity: 1;
       }
     }
   }
 
-  &.expanded{
-    >tr:not(.panel-row) {
-      >td {
+  &.expanded {
+    > tr:not(.panel-row) {
+      > td {
         border-bottom: 1px solid #6788a2;
 
         &.selected {
@@ -86,7 +86,7 @@ tbody.panel-ctrl {
           }
 
           i.icon-status::before {
-            opacity: 1.0;
+            opacity: 1;
           }
 
           i.icon-chevron::before {
@@ -99,12 +99,12 @@ tbody.panel-ctrl {
 
   tr.panel-row {
     &:hover {
-      >td {
+      > td {
         background-color: #ffffff;
       }
     }
 
-    >td {
+    > td {
       border-color: #6788a2;
       padding: 0;
       .panel {
@@ -114,16 +114,18 @@ tbody.panel-ctrl {
           }
         }
 
-        .row{
+        .row {
           margin: 0px -4px;
 
           padding: 20px 0px;
 
-          .column.alpha, .columns.alpha {
+          .column.alpha,
+          .columns.alpha {
             padding-left: 20px;
           }
 
-          .column.omega, .columns.omega {
+          .column.omega,
+          .columns.omega {
             padding-right: 20px;
           }
         }
diff --git a/app/webpacker/css/admin/order_cycles.scss b/app/webpacker/css/admin/order_cycles.scss
index 012f2513c5..ea73266fb8 100644
--- a/app/webpacker/css/admin/order_cycles.scss
+++ b/app/webpacker/css/admin/order_cycles.scss
@@ -8,14 +8,16 @@ form.order_cycle {
 
     tr {
       &:hover {
-        td { background: none; }
+        td {
+          background: none;
+        }
       }
 
       td {
         border: none;
       }
 
-      #add-remove-buttons{
+      #add-remove-buttons {
         width: 10%;
         height: 200px;
         max-height: 300px;
@@ -28,7 +30,8 @@ form.order_cycle {
           font-size: 1em;
         }
       }
-      #available-order-cycles, #selected-order-cycles {
+      #available-order-cycles,
+      #selected-order-cycles {
         text-align: left;
         width: 40%;
         height: 200px;
diff --git a/app/webpacker/css/admin/product_import.scss b/app/webpacker/css/admin/product_import.scss
index db5f8b52d6..49f220edf7 100644
--- a/app/webpacker/css/admin/product_import.scss
+++ b/app/webpacker/css/admin/product_import.scss
@@ -57,7 +57,6 @@ div.panel-section {
     div.header-description {
       width: auto;
     }
-
   }
 
   div.panel-header:hover {
@@ -67,7 +66,7 @@ div.panel-section {
 
   div.panel-header.active {
     background-color: #efefef;
-    text-shadow: 1px 1px 0px rgba(255,255,255,0.75);
+    text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.75);
   }
 
   div.panel-content {
@@ -87,13 +86,14 @@ div.panel-section {
     table {
       background-color: white;
       margin-bottom: 0;
-      td, th {
+      td,
+      th {
         white-space: nowrap;
       }
 
       tr {
         &.error {
-          color: #c84C4c;
+          color: #c84c4c;
         }
 
         &:hover td.invalid {
@@ -137,7 +137,6 @@ br.panels.clearfix {
 }
 
 .panel-section.import-settings {
-
   .header-description {
     padding-left: 1em;
   }
@@ -189,18 +188,21 @@ br.panels.clearfix {
   }
 }
 
-form.product-import, div.post-save-results, div.import-wrapper {
+form.product-import,
+div.post-save-results,
+div.import-wrapper {
   input[type="submit"] {
     margin-right: 0.5em;
   }
-  input[type="submit"], button, a.button {
+  input[type="submit"],
+  button,
+  a.button {
     min-width: 8em;
     text-align: center;
   }
 }
 
 div.import-wrapper {
-
   .alert-box {
     margin: 0 0 1.75em;
   }
@@ -215,17 +217,20 @@ div.import-wrapper {
     left: -9999px;
   }
 
-  .ng-hide-add, .ng-hide-remove, .ng-hide-animate {
-    transition: all .4s ease-in-out;
+  .ng-hide-add,
+  .ng-hide-remove,
+  .ng-hide-animate {
+    transition: all 0.4s ease-in-out;
   }
 
-  form.product-import, div.save-results {
-    transition: all .4s ease-in-out;
+  form.product-import,
+  div.save-results {
+    transition: all 0.4s ease-in-out;
   }
 
   div.progress-interface {
     text-align: center;
-    transition: all .4s ease-in-out;
+    transition: all 0.4s ease-in-out;
 
     button:disabled {
       background: #ccc !important;
@@ -233,7 +238,7 @@ div.import-wrapper {
   }
 
   .post-save-results {
-    a.button{
+    a.button {
       float: left;
       margin-right: 0.5em;
     }
@@ -250,13 +255,13 @@ div.progress-bar {
   border-radius: 0.3em;
   border: 1px solid #eee;
 
-  span.progress-track{
+  span.progress-track {
     display: block;
     background: lighten($pi-green, 10%);
     height: 100%;
     border-radius: 0.3em;
-    box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
-    transition: width .3s ease-in-out;
+    box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
+    transition: width 0.3s ease-in-out;
   }
 }
 
@@ -267,7 +272,10 @@ div.progress-bar {
   width: 50%;
   padding: 0 1.5em 1.5em;
 
-  h4, h5, h6, p {
+  h4,
+  h5,
+  h6,
+  p {
     margin: 1.25em 0 1em;
   }
 
diff --git a/app/webpacker/css/admin/question-mark-tooltip.scss b/app/webpacker/css/admin/question-mark-tooltip.scss
index 8247a5b5b8..815cd04951 100644
--- a/app/webpacker/css/admin/question-mark-tooltip.scss
+++ b/app/webpacker/css/admin/question-mark-tooltip.scss
@@ -15,4 +15,3 @@
     width: 0;
   }
 }
-
diff --git a/app/webpacker/css/admin/relationships.scss b/app/webpacker/css/admin/relationships.scss
index 103da85e47..b0a14ece9b 100644
--- a/app/webpacker/css/admin/relationships.scss
+++ b/app/webpacker/css/admin/relationships.scss
@@ -9,12 +9,14 @@
   }
 }
 
-table#enterprise-relationships, table#enterprise-roles {
+table#enterprise-relationships,
+table#enterprise-roles {
   ul {
     list-style-type: none;
   }
 
-  th.actions, td.actions {
+  th.actions,
+  td.actions {
     width: 16%;
 
     .errors {
diff --git a/app/webpacker/css/admin/reports.scss b/app/webpacker/css/admin/reports.scss
index d51d54204b..743c8ef4d2 100644
--- a/app/webpacker/css/admin/reports.scss
+++ b/app/webpacker/css/admin/reports.scss
@@ -2,7 +2,8 @@ table.report__table {
   margin-top: 1em;
   @media print {
     margin: 0;
-    td, th {
+    td,
+    th {
       border-left: none;
       border-right: none;
     }
@@ -13,7 +14,9 @@ table.report__table {
   }
 
   .header-row {
-    &.h1, &.h2, &.h3 {
+    &.h1,
+    &.h2,
+    &.h3 {
       font-weight: bold;
       margin-top: 8px;
     }
@@ -45,8 +48,8 @@ table.report__table {
   }
   .report__message {
     border: 1px solid $pale-blue;
-    border-radius: .5em;
-    padding: .5em;
+    border-radius: 0.5em;
+    padding: 0.5em;
     text-align: center;
     flex-grow: 1;
   }
diff --git a/app/webpacker/css/admin/sections/orders.scss b/app/webpacker/css/admin/sections/orders.scss
index 2ad582b939..f6b4a4546e 100644
--- a/app/webpacker/css/admin/sections/orders.scss
+++ b/app/webpacker/css/admin/sections/orders.scss
@@ -51,7 +51,8 @@
     .field {
       margin-bottom: 0;
 
-      input[type="text"], input[type="number"] {
+      input[type="text"],
+      input[type="number"] {
         width: 100%;
       }
     }
diff --git a/app/webpacker/css/admin/sections/products.scss b/app/webpacker/css/admin/sections/products.scss
index 2a40157555..bac5965d4e 100644
--- a/app/webpacker/css/admin/sections/products.scss
+++ b/app/webpacker/css/admin/sections/products.scss
@@ -2,7 +2,10 @@
   label {
     display: inline-block;
   }
-  input, select, textarea, .select2-container {
+  input,
+  select,
+  textarea,
+  .select2-container {
     width: 100%;
   }
 }
diff --git a/app/webpacker/css/admin/select2.scss b/app/webpacker/css/admin/select2.scss
index 63995bc85c..f076e28335 100644
--- a/app/webpacker/css/admin/select2.scss
+++ b/app/webpacker/css/admin/select2.scss
@@ -12,15 +12,16 @@
   }
 
   &.light {
-    .select2-choice{
+    .select2-choice {
       background-color: #ffffff;
       font-weight: normal;
       color: $spree-blue !important;
       border: 1px solid $color-border !important;
     }
 
-    &:hover, &.select2-container-active {
-      .select2-choice{
+    &:hover,
+    &.select2-container-active {
+      .select2-choice {
         background-color: #ffffff !important;
         border: 1px solid $spree-green !important;
 
diff --git a/app/webpacker/css/admin/sidebar-item.scss b/app/webpacker/css/admin/sidebar-item.scss
index b9d34b27f1..c0aec809e5 100644
--- a/app/webpacker/css/admin/sidebar-item.scss
+++ b/app/webpacker/css/admin/sidebar-item.scss
@@ -32,7 +32,8 @@ div.sidebar_item {
         border: solid $warning-red;
         border-width: 0px 3px 0px 3px;
 
-        a.alpha, span.alpha {
+        a.alpha,
+        span.alpha {
           margin-left: -3px;
         }
 
@@ -60,7 +61,8 @@ div.sidebar_item {
     border: solid $spree-blue;
     border-width: 0px 1px 0px 1px;
 
-    a.alpha, span.alpha {
+    a.alpha,
+    span.alpha {
       font-weight: bold;
       margin-left: -1px;
       padding: 10px 2px 10px 5%;
@@ -87,7 +89,8 @@ div.sidebar_item {
       background-color: $spree-light-blue;
     }
 
-    &.even, &.odd {
+    &.even,
+    &.odd {
       &:hover {
         color: #ffffff;
         background-color: $spree-green;
diff --git a/app/webpacker/css/admin/tables.scss b/app/webpacker/css/admin/tables.scss
index c5f9d64175..5fcad50d5e 100644
--- a/app/webpacker/css/admin/tables.scss
+++ b/app/webpacker/css/admin/tables.scss
@@ -2,12 +2,13 @@ table tbody tr:hover td {
   background-color: inherit;
 }
 
-table tbody tr:hover >td {
+table tbody tr:hover > td {
   background-color: #e9f3fc;
 }
 
 table.layout {
-  tr, tr:hover {
+  tr,
+  tr:hover {
     td {
       background-color: transparent;
     }
diff --git a/app/webpacker/css/admin/tag_rules.scss b/app/webpacker/css/admin/tag_rules.scss
index 8650f11c22..9050008b82 100644
--- a/app/webpacker/css/admin/tag_rules.scss
+++ b/app/webpacker/css/admin/tag_rules.scss
@@ -1,6 +1,7 @@
 tags-input {
   &.limit-reached {
-    input, span.input {
+    input,
+    span.input {
       display: none;
     }
   }
@@ -19,7 +20,8 @@ tags-input {
   }
 }
 
-.customer_tag, .default_rules {
+.customer_tag,
+.default_rules {
   background-color: #ffffff;
   border: 1px solid $pale-blue;
   margin-bottom: 40px;
@@ -86,8 +88,9 @@ tags-input {
   }
 }
 
-#new-tag-rule-dialog{
-  .select2-chosen, .select2-result-label{
+#new-tag-rule-dialog {
+  .select2-chosen,
+  .select2-result-label {
     font-size: 1rem;
     font-weight: lighter;
   }
diff --git a/app/webpacker/css/admin/terms_of_service_files.scss b/app/webpacker/css/admin/terms_of_service_files.scss
index 0e19930184..8bdebd9956 100644
--- a/app/webpacker/css/admin/terms_of_service_files.scss
+++ b/app/webpacker/css/admin/terms_of_service_files.scss
@@ -1,6 +1,6 @@
 .admin-current-terms-of-service {
-  border: .1em solid $spree-blue;
-  border-radius: .5em;
+  border: 0.1em solid $spree-blue;
+  border-radius: 0.5em;
   margin: 1em 0;
   padding: 1em;
 }
diff --git a/app/webpacker/css/admin/welcome.scss b/app/webpacker/css/admin/welcome.scss
index eac98dd5a5..9f58728823 100644
--- a/app/webpacker/css/admin/welcome.scss
+++ b/app/webpacker/css/admin/welcome.scss
@@ -17,7 +17,8 @@
       font-weight: 300;
     }
 
-    &, & * {
+    &,
+    & * {
       color: white;
     }
   }

From 10c52959ad57092b2350c1ff36ace8ab2ff8ec31 Mon Sep 17 00:00:00 2001
From: David Cook <david@redcliffs.net>
Date: Tue, 23 May 2023 16:51:39 +1000
Subject: [PATCH 3/5] Prettify  app/webpacker/css/admin/hacks/

---
 app/webpacker/css/admin/hacks/ie.scss      | 22 ++++++++++++----------
 app/webpacker/css/admin/hacks/mozilla.scss |  5 ++---
 app/webpacker/css/admin/hacks/opera.scss   |  5 ++---
 3 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/app/webpacker/css/admin/hacks/ie.scss b/app/webpacker/css/admin/hacks/ie.scss
index b224b67d55..b2cbd6b7c5 100644
--- a/app/webpacker/css/admin/hacks/ie.scss
+++ b/app/webpacker/css/admin/hacks/ie.scss
@@ -1,6 +1,5 @@
 // IE general hacks
 html.ie {
-
   // Properly align icons in circle
   table td.actions .no-text.icon-edit {
     padding-top: 3px !important;
@@ -10,7 +9,8 @@ html.ie {
   }
 
   // Fix select2 background gradient. (It uses filter gradients for IE)
-  .select2-choice, .select2-choice div, 
+  .select2-choice,
+  .select2-choice div,
   .select2-container-multi .select2-search-choice,
   .select2-container:hover .select2-choice,
   .select2-container.select2-container-active .select2-choice {
@@ -20,7 +20,7 @@ html.ie {
     &:before {
       position: relative;
       z-index: 10000;
-      content: '\f002' !important;
+      content: "\f002" !important;
     }
     input {
       position: relative;
@@ -31,17 +31,20 @@ html.ie {
 
 // IE8 Hacks
 html.ie8 {
-
   // Fix italic font
   body {
     font-style: normal;
   }
 
-  // Fix white border around filter-actions 
+  // Fix white border around filter-actions
   .filter-actions {
     margin-bottom: -45px;
 
-    button, .button, input[type="submit"], input[type="button"], span.or {
+    button,
+    .button,
+    input[type="submit"],
+    input[type="button"],
+    span.or {
       border: 15px solid $color-1;
     }
     span.or {
@@ -51,12 +54,12 @@ html.ie8 {
     }
   }
 
-  // Fix legend align center 
+  // Fix legend align center
   legend {
     display: table;
   }
 
-  // Sidebar align with fieldsets 
+  // Sidebar align with fieldsets
   #sidebar {
     margin-top: 27px;
 
@@ -64,5 +67,4 @@ html.ie8 {
       margin-left: 7px;
     }
   }
-
-}
\ No newline at end of file
+}
diff --git a/app/webpacker/css/admin/hacks/mozilla.scss b/app/webpacker/css/admin/hacks/mozilla.scss
index a3e37cfacc..ffc495b24b 100644
--- a/app/webpacker/css/admin/hacks/mozilla.scss
+++ b/app/webpacker/css/admin/hacks/mozilla.scss
@@ -1,7 +1,6 @@
 html.firefox {
-
   // Fix sidebar margin
-  #sidebar  {
+  #sidebar {
     margin-top: 18px;
   }
 
@@ -29,4 +28,4 @@ html.firefox {
   input#image_attachment {
     width: 80%;
   }
-}
\ No newline at end of file
+}
diff --git a/app/webpacker/css/admin/hacks/opera.scss b/app/webpacker/css/admin/hacks/opera.scss
index af8c878ec2..8d28774c9d 100644
--- a/app/webpacker/css/admin/hacks/opera.scss
+++ b/app/webpacker/css/admin/hacks/opera.scss
@@ -1,5 +1,4 @@
 html.opera {
-
   // Fix legend center align
   legend {
     margin: 0 auto;
@@ -11,7 +10,7 @@ html.opera {
   }
 
   // Fix sidebar margin
-  #sidebar  {
+  #sidebar {
     margin-top: 18px;
   }
-}
\ No newline at end of file
+}

From 548a6f8d2e016af8a3b5486203a0d2f5d3c06b6a Mon Sep 17 00:00:00 2001
From: David Cook <david@redcliffs.net>
Date: Tue, 23 May 2023 16:51:58 +1000
Subject: [PATCH 4/5] Prettify  app/webpacker/css/admin/plugins/

---
 .../css/admin/plugins/font-awesome.scss       | 36 +++++------
 app/webpacker/css/admin/plugins/jstree.scss   | 30 ++++-----
 app/webpacker/css/admin/plugins/powertip.scss | 64 ++++++++++++++-----
 app/webpacker/css/admin/plugins/select2.scss  | 14 ++--
 4 files changed, 90 insertions(+), 54 deletions(-)

diff --git a/app/webpacker/css/admin/plugins/font-awesome.scss b/app/webpacker/css/admin/plugins/font-awesome.scss
index c78ac6591c..d4f8f5533c 100644
--- a/app/webpacker/css/admin/plugins/font-awesome.scss
+++ b/app/webpacker/css/admin/plugins/font-awesome.scss
@@ -26,12 +26,12 @@
 /* FONT PATH
  * -------------------------- */
 @font-face {
-  font-family: 'FontAwesome';
-  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-family: "FontAwesome";
+  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;
 }
@@ -44,7 +44,7 @@
   text-decoration: inherit;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  *margin-right: .3em;
+  *margin-right: 0.3em;
 }
 [class^="icon-"]:before,
 [class*=" icon-"]:before {
@@ -104,7 +104,7 @@ a [class*=" icon-"] {
 }
 .icon-border {
   border: solid 1px #eeeeee;
-  padding: .2em .25em .15em;
+  padding: 0.2em 0.25em 0.15em;
   -webkit-border-radius: 3px;
   border-radius: 3px;
 }
@@ -148,11 +148,11 @@ a [class*=" icon-"] {
 }
 [class^="icon-"].pull-left,
 [class*=" icon-"].pull-left {
-  margin-right: .3em;
+  margin-right: 0.3em;
 }
 [class^="icon-"].pull-right,
 [class*=" icon-"].pull-right {
-  margin-left: .3em;
+  margin-left: 0.3em;
 }
 /* BOOTSTRAP SPECIFIC CLASSES
  * -------------------------- */
@@ -190,7 +190,7 @@ a [class*=" icon-"] {
 .nav [class^="icon-"].icon-large,
 .btn [class*=" icon-"].icon-large,
 .nav [class*=" icon-"].icon-large {
-  line-height: .9em;
+  line-height: 0.9em;
 }
 .btn [class^="icon-"].icon-spin,
 .nav [class^="icon-"].icon-spin,
@@ -206,23 +206,23 @@ a [class*=" icon-"] {
 .nav-pills [class^="icon-"].icon-large,
 .nav-tabs [class*=" icon-"].icon-large,
 .nav-pills [class*=" icon-"].icon-large {
-  line-height: .9em;
+  line-height: 0.9em;
 }
 .btn [class^="icon-"].pull-left.icon-2x,
 .btn [class*=" icon-"].pull-left.icon-2x,
 .btn [class^="icon-"].pull-right.icon-2x,
 .btn [class*=" icon-"].pull-right.icon-2x {
-  margin-top: .18em;
+  margin-top: 0.18em;
 }
 .btn [class^="icon-"].icon-spin.icon-large,
 .btn [class*=" icon-"].icon-spin.icon-large {
-  line-height: .8em;
+  line-height: 0.8em;
 }
 .btn.btn-small [class^="icon-"].pull-left.icon-2x,
 .btn.btn-small [class*=" icon-"].pull-left.icon-2x,
 .btn.btn-small [class^="icon-"].pull-right.icon-2x,
 .btn.btn-small [class*=" icon-"].pull-right.icon-2x {
-  margin-top: .25em;
+  margin-top: 0.25em;
 }
 .btn.btn-large [class^="icon-"],
 .btn.btn-large [class*=" icon-"] {
@@ -232,15 +232,15 @@ a [class*=" icon-"] {
 .btn.btn-large [class*=" icon-"].pull-left.icon-2x,
 .btn.btn-large [class^="icon-"].pull-right.icon-2x,
 .btn.btn-large [class*=" icon-"].pull-right.icon-2x {
-  margin-top: .05em;
+  margin-top: 0.05em;
 }
 .btn.btn-large [class^="icon-"].pull-left.icon-2x,
 .btn.btn-large [class*=" icon-"].pull-left.icon-2x {
-  margin-right: .2em;
+  margin-right: 0.2em;
 }
 .btn.btn-large [class^="icon-"].pull-right.icon-2x,
 .btn.btn-large [class*=" icon-"].pull-right.icon-2x {
-  margin-left: .2em;
+  margin-left: 0.2em;
 }
 /* Fixes alignment in nav lists */
 .nav-list [class^="icon-"],
diff --git a/app/webpacker/css/admin/plugins/jstree.scss b/app/webpacker/css/admin/plugins/jstree.scss
index 0fad9d6578..b16fd23a1a 100644
--- a/app/webpacker/css/admin/plugins/jstree.scss
+++ b/app/webpacker/css/admin/plugins/jstree.scss
@@ -1,16 +1,17 @@
 #taxonomy_tree {
-  > ul, .jstree-icon {
+  > ul,
+  .jstree-icon {
     background-image: none;
   }
-  
+
   .jstree-icon {
     @extend [class^="icon-"], :before;
   }
 
-  .jstree-open > .jstree-icon {    
+  .jstree-open > .jstree-icon {
     @extend .icon-caret-down;
   }
-  .jstree-closed > .jstree-icon {    
+  .jstree-closed > .jstree-icon {
     @extend .icon-caret-right;
   }
 
@@ -31,13 +32,13 @@
 
       .jstree-icon {
         padding-left: 0px;
-        @extend .icon-move;   
+        @extend .icon-move;
       }
     }
   }
 }
 
-#vakata-dragged.jstree-apple .jstree-invalid, 
+#vakata-dragged.jstree-apple .jstree-invalid,
 #vakata-dragged.jstree-apple .jstree-ok,
 #jstree-marker {
   background-image: none !important;
@@ -45,7 +46,7 @@
   @extend [class^="icon-"], :before;
 }
 #vakata-dragged.jstree-apple .jstree-invalid {
-  @extend .icon-remove;  
+  @extend .icon-remove;
   color: $color-5;
 }
 #vakata-dragged.jstree-apple .jstree-ok {
@@ -66,12 +67,11 @@
   margin-top: -2px !important;
   border: none !important;
   border-bottom: 1px solid $color-body-text !important;
-  background-color:  very-light($color-3) !important;
+  background-color: very-light($color-3) !important;
 
   -webkit-box-shadow: none !important;
-     -moz-box-shadow: none !important;
-          box-shadow: none !important;
-  
+  -moz-box-shadow: none !important;
+  box-shadow: none !important;
 }
 
 #vakata-contextmenu {
@@ -83,7 +83,7 @@
   @include border-radius($border-radius !important);
 
   &:before {
-    content: '';
+    content: "";
     position: absolute;
     border-left: 10px solid transparent;
     border-right: 10px solid transparent;
@@ -109,12 +109,12 @@
       -webkit-box-shadow: none !important;
       line-height: inherit !important;
       padding: 5px 10px !important;
-      margin: 0 !important;      
+      margin: 0 !important;
     }
   }
 
   li:first-child a:hover:before {
-    content: '';
+    content: "";
     position: absolute;
     border-left: 10px solid transparent;
     border-right: 10px solid transparent;
@@ -128,4 +128,4 @@
   li.vakata-separator {
     display: none;
   }
-}
\ No newline at end of file
+}
diff --git a/app/webpacker/css/admin/plugins/powertip.scss b/app/webpacker/css/admin/plugins/powertip.scss
index b53f47a7e4..4afc7dfddb 100644
--- a/app/webpacker/css/admin/plugins/powertip.scss
+++ b/app/webpacker/css/admin/plugins/powertip.scss
@@ -3,7 +3,9 @@
   padding: 5px 15px;
   @include border-radius($border-radius);
 
-  &.n:before, &.ne:before, &.nw:before {
+  &.n:before,
+  &.ne:before,
+  &.nw:before {
     border-top-width: 5px;
     border-top-color: $color-3;
     bottom: -5px;
@@ -14,7 +16,9 @@
     border-right-color: $color-3;
     left: -5px;
   }
-  &.s:before, &.se:before, &.sw:before {
+  &.s:before,
+  &.se:before,
+  &.sw:before {
     border-bottom-width: 5px;
     border-bottom-color: $color-3;
     top: -5px;
@@ -24,59 +28,87 @@
     border-left-color: $color-3;
     right: -5px;
   }
-  &.ne:before, &.se:before {
+  &.ne:before,
+  &.se:before {
     border-right-width: 5px;
     border-right-color: $color-3;
     left: -5px;
   }
-  &.nw:before, &.sw:before {
+  &.nw:before,
+  &.sw:before {
     border-left-width: 5px;
     border-right-color: $color-3;
     right: -5px;
   }
 
-  &.clone, &.yellow, &.cancel {
+  &.clone,
+  &.yellow,
+  &.cancel {
     background-color: $color-notice;
 
-    &.n:before, &.ne:before, &.nw:before {
+    &.n:before,
+    &.ne:before,
+    &.nw:before {
       border-top-color: $color-notice;
     }
-    &.e:before, &.nw:before, &.sw:before {
+    &.e:before,
+    &.nw:before,
+    &.sw:before {
       border-right-color: $color-notice;
     }
-    &.s:before, &.se:before, &.sw:before {
+    &.s:before,
+    &.se:before,
+    &.sw:before {
       border-bottom-color: $color-notice;
     }
     &.w:before {
       border-left-color: $color-notice;
     }
   }
-  &.edit, &.green, &.capture, &.save, &.add {
+  &.edit,
+  &.green,
+  &.capture,
+  &.save,
+  &.add {
     background-color: $color-success;
 
-    &.n:before, &.ne:before, &.nw:before {
+    &.n:before,
+    &.ne:before,
+    &.nw:before {
       border-top-color: $color-success;
     }
-    &.e:before, &.nw:before, &.sw:before {
+    &.e:before,
+    &.nw:before,
+    &.sw:before {
       border-right-color: $color-success;
     }
-    &.s:before, &.se:before, &.sw:before {
+    &.s:before,
+    &.se:before,
+    &.sw:before {
       border-bottom-color: $color-success;
     }
     &.w:before {
       border-left-color: $color-success;
     }
   }
-  &.remove, &.red, &.void {
+  &.remove,
+  &.red,
+  &.void {
     background-color: $color-error;
 
-    &.n:before, &.ne:before, &.nw:before {
+    &.n:before,
+    &.ne:before,
+    &.nw:before {
       border-top-color: $color-error;
     }
-    &.e:before, &.nw:before, &.sw:before {
+    &.e:before,
+    &.nw:before,
+    &.sw:before {
       border-right-color: $color-error;
     }
-    &.s:before, &.se:before, &.sw:before {
+    &.s:before,
+    &.se:before,
+    &.sw:before {
       border-bottom-color: $color-error;
     }
     &.w:before {
diff --git a/app/webpacker/css/admin/plugins/select2.scss b/app/webpacker/css/admin/plugins/select2.scss
index 705385207c..6ef2d5887b 100644
--- a/app/webpacker/css/admin/plugins/select2.scss
+++ b/app/webpacker/css/admin/plugins/select2.scss
@@ -1,5 +1,6 @@
 .select2-container {
-  &:hover .select2-choice, &.select2-container-active .select2-choice {
+  &:hover .select2-choice,
+  &.select2-container-active .select2-choice {
     background-color: $color-sel-hover-bg !important;
     border-color: $color-sel-hover-bg !important;
   }
@@ -35,7 +36,7 @@
     }
 
     &.select2-dropdown-open .select2-choice div b {
-      @extend .icon-caret-up
+      @extend .icon-caret-up;
     }
   }
 }
@@ -105,7 +106,8 @@
 
     &.select2-highlighted {
       .select2-result-label {
-        &, h6 {
+        &,
+        h6 {
           color: $color-1 !important;
         }
       }
@@ -118,7 +120,8 @@
       overflow: auto;
     }
 
-    &.select2-no-results, &.select2-searching {
+    &.select2-no-results,
+    &.select2-searching {
       padding: 5px;
       background-color: transparent;
       color: $color-body-text;
@@ -134,7 +137,8 @@
 }
 
 .select2-container-multi {
-  &.select2-container-active, &.select2-dropdown-open {
+  &.select2-container-active,
+  &.select2-dropdown-open {
     .select2-choices {
       border-color: $color-sel-hover-bg !important;
       box-shadow: none;

From 3ce48848f016e61f25142b7de9d60454a77e6adc Mon Sep 17 00:00:00 2001
From: David Cook <david@redcliffs.net>
Date: Tue, 23 May 2023 16:52:47 +1000
Subject: [PATCH 5/5] Prettify the rest

---
 app/webpacker/css/admin/modals.scss          |  63 +++++--
 app/webpacker/css/admin/openfoodnetwork.scss |  50 +++--
 app/webpacker/css/admin/orders.scss          | 187 ++++++++++---------
 app/webpacker/css/admin/products.scss        |  63 +++++--
 4 files changed, 217 insertions(+), 146 deletions(-)

diff --git a/app/webpacker/css/admin/modals.scss b/app/webpacker/css/admin/modals.scss
index a543f15ee3..b67c6e461a 100644
--- a/app/webpacker/css/admin/modals.scss
+++ b/app/webpacker/css/admin/modals.scss
@@ -10,7 +10,8 @@
   left: 0;
 }
 
-.reveal-modal, dialog {
+.reveal-modal,
+dialog {
   visibility: hidden;
   display: none;
   position: absolute;
@@ -26,20 +27,26 @@
   padding: 1.875rem;
 }
 
-.reveal-modal .column, dialog .column, .reveal-modal .columns, dialog .columns {
+.reveal-modal .column,
+dialog .column,
+.reveal-modal .columns,
+dialog .columns {
   min-width: 0;
 }
 
-.reveal-modal > :first-child, dialog > :first-child {
+.reveal-modal > :first-child,
+dialog > :first-child {
   margin-top: 0;
 }
 
-.reveal-modal > :last-child, dialog > :last-child {
+.reveal-modal > :last-child,
+dialog > :last-child {
   margin-bottom: 0;
 }
 
 @media only screen and (min-width: 40.063em) {
-  .reveal-modal, dialog {
+  .reveal-modal,
+  dialog {
     width: 80%;
     max-width: 62.5rem;
     left: 0;
@@ -48,19 +55,23 @@
   }
 }
 
-.reveal-modal.radius, dialog.radius {
+.reveal-modal.radius,
+dialog.radius {
   border-radius: 3px;
 }
 
-.reveal-modal.round, dialog.round {
+.reveal-modal.round,
+dialog.round {
   border-radius: 1000px;
 }
 
-.reveal-modal.collapse, dialog.collapse {
+.reveal-modal.collapse,
+dialog.collapse {
   padding: 0;
 }
 
-.reveal-modal.full, dialog.full {
+.reveal-modal.full,
+dialog.full {
   top: 0;
   left: 0;
   height: 100%;
@@ -70,7 +81,8 @@
   margin-left: 0 !important;
 }
 
-.reveal-modal .close-reveal-modal, dialog .close-reveal-modal {
+.reveal-modal .close-reveal-modal,
+dialog .close-reveal-modal {
   font-size: 2.5rem;
   line-height: 1;
   position: absolute;
@@ -81,7 +93,8 @@
   cursor: pointer;
 }
 
-dialog::backdrop, dialog + .backdrop {
+dialog::backdrop,
+dialog + .backdrop {
   position: absolute;
   top: 0;
   bottom: 0;
@@ -99,7 +112,9 @@ dialog[open] {
 }
 
 @media print {
-  dialog, .reveal-modal, dialog {
+  dialog,
+  .reveal-modal,
+  dialog {
     display: none;
     background: white !important;
   }
@@ -144,51 +159,59 @@ dialog[open] {
 }
 
 @media only screen and (max-width: 40em) {
-  .reveal-modal, dialog {
+  .reveal-modal,
+  dialog {
     min-height: 100vh;
   }
 }
 
 @media only screen and (min-width: 40.063em) {
-  .reveal-modal, dialog {
+  .reveal-modal,
+  dialog {
     top: 6.25rem;
   }
-  .reveal-modal.tiny, dialog.tiny {
+  .reveal-modal.tiny,
+  dialog.tiny {
     width: 30%;
     max-width: 62.5rem;
     left: 0;
     right: 0;
     margin: 0 auto;
   }
-  .reveal-modal.small, dialog.small {
+  .reveal-modal.small,
+  dialog.small {
     width: 40%;
     max-width: 62.5rem;
     left: 0;
     right: 0;
     margin: 0 auto;
   }
-  .reveal-modal.medium, dialog.medium {
+  .reveal-modal.medium,
+  dialog.medium {
     width: 60%;
     max-width: 62.5rem;
     left: 0;
     right: 0;
     margin: 0 auto;
   }
-  .reveal-modal.large, dialog.large {
+  .reveal-modal.large,
+  dialog.large {
     width: 70%;
     max-width: 62.5rem;
     left: 0;
     right: 0;
     margin: 0 auto;
   }
-  .reveal-modal.xlarge, dialog.xlarge {
+  .reveal-modal.xlarge,
+  dialog.xlarge {
     width: 95%;
     max-width: 62.5rem;
     left: 0;
     right: 0;
     margin: 0 auto;
   }
-  .reveal-modal.full, dialog.full {
+  .reveal-modal.full,
+  dialog.full {
     width: 100vw;
     max-width: 62.5rem;
     left: 0;
diff --git a/app/webpacker/css/admin/openfoodnetwork.scss b/app/webpacker/css/admin/openfoodnetwork.scss
index ddf284e6a0..176cc00c26 100644
--- a/app/webpacker/css/admin/openfoodnetwork.scss
+++ b/app/webpacker/css/admin/openfoodnetwork.scss
@@ -2,11 +2,11 @@
   text-align: center;
 }
 
-.text-right{
+.text-right {
   text-align: right;
 }
 
-.text-bold{
+.text-bold {
   font-weight: bold;
 }
 
@@ -32,7 +32,8 @@ text-angular .ta-editor {
   left: 275px;
 }
 
-span.error, div.error:not(.flash) {
+span.error,
+div.error:not(.flash) {
   color: $warning-red;
 }
 
@@ -42,8 +43,10 @@ span.error, div.error:not(.flash) {
   margin-bottom: 0;
 }
 
-input.red, a.button.red, button.red {
-	background-color: $warning-red;
+input.red,
+a.button.red,
+button.red {
+  background-color: $warning-red;
   margin-right: 5px;
   color: #ffffff;
 }
@@ -56,7 +59,7 @@ a.button.red {
 }
 
 input.orange {
-	background-color: #FF9848;
+  background-color: #ff9848;
   margin-right: 5px;
 }
 
@@ -68,7 +71,7 @@ input.search {
 }
 
 a {
- cursor:pointer;
+  cursor: pointer;
 }
 
 a.action--disabled {
@@ -100,7 +103,8 @@ form.order_cycle {
     ul {
       margin-left: 1em;
     }
-    p, li {
+    p,
+    li {
       margin: 0.5em 0;
     }
   }
@@ -129,7 +133,7 @@ form.order_cycle {
       width: 18%;
       min-height: 7.5em;
       margin: 0 1% 1% 0;
-      border: 1px solid #DAE7FF;
+      border: 1px solid #dae7ff;
       padding: 5px;
 
       .exchange-product-details {
@@ -149,10 +153,10 @@ form.order_cycle {
     }
     .collection-details {
       input {
-        width: 90%
+        width: 90%;
       }
       span {
-        font-size: 1rem
+        font-size: 1rem;
       }
     }
   }
@@ -195,28 +199,34 @@ table#listing_enterprise_groups {
 }
 
 .fullwidth_inputs {
-  #{$text-inputs}, select {
+  #{$text-inputs},
+  select {
     width: 100%;
   }
 }
 
 // TODO: remove this, use class below
 #no_results {
-  font-weight:bold;
+  font-weight: bold;
   color: $warning-red;
 }
 
 .no-results {
-  font-weight:bold;
+  font-weight: bold;
   color: $warning-red;
 
-  h1, h2, h3, h4, h5, h6 {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
     color: $warning-red;
   }
 }
 
 .field_with_errors > input {
-    border-color: red;
+  border-color: red;
 }
 
 // textAngular wysiwyg
@@ -248,12 +258,12 @@ text-angular {
       margin-right: 0.25em;
     }
     button.active:not(:hover) {
-      box-shadow: 0 0 0.7em rgba(0,0,0,0.3) inset;
+      box-shadow: 0 0 0.7em rgba(0, 0, 0, 0.3) inset;
       background-color: #4583bf;
     }
   }
   a {
-    color: $spree-green
+    color: $spree-green;
   }
 }
 
@@ -263,7 +273,9 @@ span.required {
 }
 
 table td.actions {
-  .icon-trash, .icon-edit, icon-copy {
+  .icon-trash,
+  .icon-edit,
+  icon-copy {
     &.disabled {
       border-color: #d0d0d0;
       color: #c0c0c0;
diff --git a/app/webpacker/css/admin/orders.scss b/app/webpacker/css/admin/orders.scss
index 7cd7c559a7..a1bc92af18 100644
--- a/app/webpacker/css/admin/orders.scss
+++ b/app/webpacker/css/admin/orders.scss
@@ -1,28 +1,31 @@
-input, div {
-	&.update-pending {
-	  border: solid 1px orange;
+input,
+div {
+  &.update-pending {
+    border: solid 1px orange;
   }
 }
 
 input.show-dirty {
-	&.ng-dirty {
-	  border: solid 1px orange;
-		&.update-error {
-			border: solid 1px $warning-red;
-		}
+  &.ng-dirty {
+    border: solid 1px orange;
+    &.update-error {
+      border: solid 1px $warning-red;
+    }
   }
 }
 
-input, div {
-	&.update-error {
-		border: solid 1px $warning-red;
-	}
+input,
+div {
+  &.update-error {
+    border: solid 1px $warning-red;
+  }
 }
 
-input, div {
-	&.update-success {
-		border: solid 1px $spree-green;
-	}
+input,
+div {
+  &.update-success {
+    border: solid 1px $spree-green;
+  }
 }
 
 .no-close .ui-dialog-titlebar-close {
@@ -30,56 +33,55 @@ input, div {
 }
 
 div#group_buy_calculation {
-    border-radius: 3px;
-	background-color: $spree-light-blue;
-	div {
-		margin-bottom: 5px;
-		span, h6 {
-			padding: 5px;
-		}
-	}
+  border-radius: 3px;
+  background-color: $spree-light-blue;
+  div {
+    margin-bottom: 5px;
+    span,
+    h6 {
+      padding: 5px;
+    }
+  }
 
-	hr {
-		width: 95%;
-		margin: 0 auto;
-	}
+  hr {
+    width: 95%;
+    margin: 0 auto;
+  }
 
-	.row span {
-		text-align: center;
-	}
+  .row span {
+    text-align: center;
+  }
 }
 
 .input-symbol {
   position: relative;
   &.before {
+    span {
+      position: absolute;
+      transform: translate(0, -50%);
+      top: 50%;
+      pointer-events: none;
+      margin-left: 1em;
+    }
 
-	  span {
-			position: absolute;
-		  transform: translate(0,-50%);
-		  top:50%;
-		  pointer-events:none;
-		  margin-left: 1em;
-		}
+    input {
+      text-indent: 1em;
+    }
+  }
 
-		input {
-			text-indent:1em;
-		}
-	}
+  &.after {
+    span {
+      position: absolute;
+      transform: translate(0, -55%);
+      top: 50%;
+      right: 0.5em;
+      pointer-events: none;
+    }
 
-	&.after {
-
-		span {
-			position: absolute;
-			transform: translate(0,-55%);
-			top:50%;
-			right: 0.5em;
-			pointer-events:none;
-		}
-
-		input {
-			padding-right: 1.2em;
-		}
-	}
+    input {
+      padding-right: 1.2em;
+    }
+  }
 }
 
 // Changing placeholder text colour
@@ -97,19 +99,19 @@ table.index td.actions {
 }
 
 table.edit-note-table {
-	margin-top: -15px;
+  margin-top: -15px;
 
-	tr:first-child th, tr:first-child td {
-		border-top: none;
-	}
+  tr:first-child th,
+  tr:first-child td {
+    border-top: none;
+  }
 
-	td.actions {
-		width: 15%;
-	}
+  td.actions {
+    width: 15%;
+  }
 }
 
 .index-controls {
-
   button {
     float: right;
 
@@ -126,7 +128,8 @@ table.edit-note-table {
     margin-bottom: 1.5em;
   }
 
-  .message, .error {
+  .message,
+  .error {
     margin-bottom: 1em;
   }
 
@@ -140,35 +143,35 @@ table.edit-note-table {
 }
 
 .modal {
-	display: none;
-	position: fixed;
-	z-index: 1;
-	left: 0;
-	top: 0;
-	width: 100%;
-	height: 100%;
-	background-color: rgba(0,0,0,0.4);
-	text-align: center;
+  display: none;
+  position: fixed;
+  z-index: 1;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.4);
+  text-align: center;
 
-	.modal-content {
-		background-color: $color-1;
-		margin: 15% auto;
-		padding: 1.2em;
-		width: 30%;
-		border-radius: 1em;
-		border: 1px solid $color-border;
-	}
+  .modal-content {
+    background-color: $color-1;
+    margin: 15% auto;
+    padding: 1.2em;
+    width: 30%;
+    border-radius: 1em;
+    border: 1px solid $color-border;
+  }
 
-	.modal-title {
-		font-size: $h4-size;
-	}
+  .modal-title {
+    font-size: $h4-size;
+  }
 
-	.message {
-		font-size: $h5-size;
-		padding: 1.2em 0;
+  .message {
+    font-size: $h5-size;
+    padding: 1.2em 0;
 
-		.form {
-			padding: 1.2em 0;
-		}
-	}
+    .form {
+      padding: 1.2em 0;
+    }
+  }
 }
diff --git a/app/webpacker/css/admin/products.scss b/app/webpacker/css/admin/products.scss
index 7800b28446..1b10188baa 100644
--- a/app/webpacker/css/admin/products.scss
+++ b/app/webpacker/css/admin/products.scss
@@ -3,24 +3,55 @@
 }
 
 tbody.odd {
-	tr.product { td { background-color: white; } }
-	tr.variant.odd { td { background-color: lighten($spree-light-blue, 3); } }
-	tr.variant.even { td { background-color: white; } }
+  tr.product {
+    td {
+      background-color: white;
+    }
+  }
+  tr.variant.odd {
+    td {
+      background-color: lighten($spree-light-blue, 3);
+    }
+  }
+  tr.variant.even {
+    td {
+      background-color: white;
+    }
+  }
 }
 tbody.even {
-	tr.product { td { background-color: darken($spree-light-blue, 1); } }
-	tr.variant.odd { td { background-color: lighten($spree-light-blue, 2); } }
-	tr.variant.even { td { background-color: darken($spree-light-blue, 1); } }
+  tr.product {
+    td {
+      background-color: darken($spree-light-blue, 1);
+    }
+  }
+  tr.variant.odd {
+    td {
+      background-color: lighten($spree-light-blue, 2);
+    }
+  }
+  tr.variant.even {
+    td {
+      background-color: darken($spree-light-blue, 1);
+    }
+  }
 }
 
-tbody tr.product td.actions { background-color: transparent; }
-tbody tr.variant td.actions { background-color: transparent; }
-tbody tr.variant td { padding: 5px 10px; }
+tbody tr.product td.actions {
+  background-color: transparent;
+}
+tbody tr.variant td.actions {
+  background-color: transparent;
+}
+tbody tr.variant td {
+  padding: 5px 10px;
+}
 
-th.left-actions, td.left-actions {
-	background-color: transparent !important;
-	border: none !important;
-	border-right: 1px solid $pale-blue !important;
+th.left-actions,
+td.left-actions {
+  background-color: transparent !important;
+  border: none !important;
+  border-right: 1px solid $pale-blue !important;
 }
 
 #status-message {
@@ -81,13 +112,15 @@ table#listing_products.bulk {
   }
 
   td.unit {
-    input, select {
+    input,
+    select {
       width: 100%;
     }
   }
 
   td.left-actions {
-    a.view-variants, a.add-variant {
+    a.view-variants,
+    a.add-variant {
       cursor: pointer;
     }
   }