[WIP] save progress

Gruntfile.js

@@ -1,9 +1,10 @@
 const dartSass = require('sass')
+const PUB_DIR = 'public-old'
 
 module.exports = function (grunt) {
   grunt.initConfig({
     // Clean
-    clean: ['public', 'govuk_modules'],
+    clean: [PUB_DIR, 'govuk_modules'],
 
     // Builds Sass
     sass: {
@@ -24,7 +25,7 @@ module.exports = function (grunt) {
             expand: true,
             cwd: 'app/assets/sass',
             src: ['*.scss'],
-            dest: 'public/stylesheets/',
+            dest: `${PUB_DIR}/stylesheets/`,
             ext: '.min.css'
           }
         ]
@@ -101,7 +102,7 @@ module.exports = function (grunt) {
     },
 
     browserify: {
-      'public/js/application.js': ['app/browsered.js'],
+      [`${PUB_DIR}/js/application.js`]: ['app/browsered.js'],
       options: {
         browserifyOptions: {
           standalone: 'module'
@@ -116,15 +117,15 @@ module.exports = function (grunt) {
       },
       dist: {
         files: {
-          'public/js/application.js': 'public/js/application.js'
+          [`${PUB_DIR}/js/application.js`]: `${PUB_DIR}/js/application.js`
         }
       }
     },
 
     uglify: {
       my_target: {
         files: {
-          'public/js/application.min.js': ['public/js/application.js']
+          [`${PUB_DIR}/js/application.min.js`]: [`${PUB_DIR}/js/application.js`]
         }
       }
     }

app/assets/sass/application.scss

@@ -1,11 +1,12 @@
 // We set all our pages wider in selfservice because it helps people viewing the list of transactions
 $govuk-page-width: 1200px;
 $govuk-suppressed-warnings: (
-    govuk-typography-scale-14
+  govuk-typography-scale-14
 );
+$govuk-assets-path: "public/";
 
 @import "govuk-frontend/dist/govuk/all";
-@import "accessible-autocomplete";
+@import "accessible-autocomplete/dist/accessible-autocomplete.min.css";
 
 @import "components/cookie-message";
 @import "components/header";

app/assets/sass/components/api-keys.scss

@@ -1,6 +1,6 @@
 .key-list-item-meta {
-  @include govuk-font($size: 16);
   margin-bottom: 1em;
+  @include govuk-font($size: 16);
 
   dl {
     margin: 0;

app/assets/sass/components/button.scss

@@ -1,7 +1,5 @@
 .pay-button {
   &--as-link {
-    @include govuk-font($size: 16);
-
     display: inline;
     padding: 0;
     border: 0;
@@ -13,6 +11,7 @@
     -moz-appearance: none;
     appearance: none;
     cursor: pointer;
+    @include govuk-font($size: 16);
 
     &:hover {
     color: $govuk-link-hover-colour;

app/assets/sass/components/cookie-message.scss

@@ -1,9 +1,10 @@
+@use "sass:color";
 .cookie-banner {
   box-sizing: border-box;
   width: 100%;
 
   padding: govuk-spacing(3);
-  background-color: lighten(desaturate(govuk-colour("light-blue"), 8.46), 42.55);
+  background-color: color.adjust(color.adjust(govuk-colour("light-blue"), $saturation: -8.46%), $lightness: 42.55%);
 
   &--hide {
     display: none;
@@ -70,12 +71,11 @@
 }
 
 .pay-cookie-banner__link {
-  @include govuk-font(19);
   line-height: 1;
   display: block;
   width: 100%;
   padding: 9px 0px 6px;
-
+  @include govuk-font(19);
   @include govuk-media-query($from: tablet) {
     display: inline;
     width: auto;
@@ -113,7 +113,6 @@
 }
 
 .pay-cookie-banner__hide-button {
-  @include govuk-font($size: 19);
   color: $govuk-link-colour;
   outline: 0;
   border: 0;
@@ -124,6 +123,7 @@
   right: govuk-spacing(3);
   cursor: pointer;
 
+  @include govuk-font($size: 19);
   @include govuk-media-query($from: desktop) {
     margin-top: govuk-spacing(0);
     position: absolute;

app/assets/sass/components/currency-input.scss

@@ -5,10 +5,10 @@
     position: relative;
 
     &__unit {
-      @include govuk-font($size: 19, $weight: bold);
       position: absolute;
       bottom: 6px;
       left: govuk-spacing(2);
+      @include govuk-font($size: 19, $weight: bold);
     }
   }
 

app/assets/sass/components/dashboard-activity.scss

@@ -2,7 +2,7 @@
   display: block;
 
   @include govuk-media-query($from: tablet) {
-    display: inline-block; 
+    display: inline-block;
   }
 
   &__select {
@@ -52,16 +52,16 @@
     }
 
     &__count {
-      @include govuk-font($size: 24);
       float: left;
       margin-left: 0;
+      @include govuk-font($size: 24);
     }
 
     &__amount {
-      @include govuk-font($size: 24);
       text-align: right;
       flex: 1;
       float: right;
+      @include govuk-font($size: 24);
     }
   }
   &-explainer {

app/assets/sass/components/environment-tag.scss

@@ -1,8 +1,8 @@
 .environment-tag {
-  @include govuk-font($size: 14, $weight: bold);
   padding: govuk-spacing(1) govuk-spacing(1) 3px;
   margin: 0 0 0 govuk-spacing(2);
   position: relative;
   top: -2px;
   background-color: govuk-colour("light-grey");
+  @include govuk-font($size: 14, $weight: bold);
 }

app/assets/sass/components/info-box.scss

@@ -1,6 +1,7 @@
+@use "sass:color";
 .pay-info-warning-box {
   @extend .govuk-inset-text;
 
   border-left-color: govuk-colour("yellow");
-  background-color: transparentize(govuk-colour("yellow"), .75);
+  background-color: color.adjust(govuk-colour("yellow"), $alpha: -.75);
 }

app/assets/sass/components/multi-select.scss

@@ -6,20 +6,20 @@
 }
 
 .multi-select__title {
-  @include govuk-font($size: 16);
   border: 2px solid $govuk-text-colour;
   padding: 8px 5px;
   border-radius: 0;
   min-height: 34px;
   background-color: govuk-colour("white");
   text-align: left;
-  background-image: url("/public/images/dd-arrow.svg");
+  background-image: url("public/images/dd-arrow.svg");
   background-repeat: no-repeat;
   background-position: right 10px top 6px;
   -webkit-appearance: none;
   appearance: none;
   max-width: 100%;
   cursor: pointer;
+  @include govuk-font($size: 16);
 
   div {
     overflow: hidden;

app/assets/sass/components/my-services.scss

@@ -1,9 +1,9 @@
 .service-switcher{
   &.live {
-    @include govuk-font($size: 19, $weight: bold);
     position: relative;
     margin-bottom: govuk-spacing(3);
     padding-left: 2rem;
+    @include govuk-font($size: 19, $weight: bold);
 
     &:before {
       content: "";

app/assets/sass/components/navigation.scss

@@ -42,9 +42,9 @@
   }
 
   &--list-item {
-    @include govuk-font($size: 16);
     margin-top: govuk-spacing(2);
 
+    @include govuk-font($size: 16);
     @include govuk-media-query(tablet) {
       display: inline-block;
       margin: 0 govuk-spacing(6) 0 0;