Update dashboard and template flow (#514)

* Updated header and footer
* Moved files around and updated gulpfile to correct the build process when it goes to production
* Updated fonts
* Adjusted grid templating
* Adding images to assets
* Updated account pages, dashboard, and pages in message sending flow
* Updated the styling for the landing pages in the account section once logged in

app/assets/javascripts/fileUpload.js

@@ -6,7 +6,7 @@
     this.submit = () => this.$form.trigger('submit');
 
     this.showCancelButton = () => $('.file-upload-button', this.$form).replaceWith(`
-      <a href="" class='govuk-button govuk-button--warning govuk-!-margin-right-1'>Cancel upload</a>
+      <a href="" class='usa-button usa-button--secondary'>Cancel upload</a>
     `);
 
     this.start = function(component) {
@@ -15,7 +15,8 @@
 
       // The label gets styled like a button and is used to hide the native file upload control. This is so that
       // users see a button that looks like the others on the site.
-      this.$form.find('label.file-upload-button').addClass('govuk-button govuk-!-margin-right-1');
+// 
+      this.$form.find('label.file-upload-button').addClass('usa-button');
 
       // Clear the form if the user navigates back to the page
       $(window).on("pageshow", () => this.$form[0].reset());

app/assets/javascripts/main.js

@@ -17,7 +17,7 @@ showHideContent.init();
 
 $(() => GOVUK.modules.start());
 
-$(() => $('.error-message, .govuk-error-message').eq(0).parent('label').next('input').trigger('focus'));
+$(() => $('.error-message, .usa-error-message').eq(0).parent('label').next('input').trigger('focus'));
 
 $(() => $('.banner-dangerous').eq(0).trigger('focus'));
 

app/assets/javascripts/templateFolderForm.js

@@ -82,7 +82,7 @@
         this.render();
       }
 
-      this.$form.on('click', 'button.govuk-button--secondary', (event) => this.actionButtonClicked(event));
+      this.$form.on('click', 'button.usa-button', (event) => this.actionButtonClicked(event));
       this.$form.on('change', 'input[type=checkbox]', () => this.templateFolderCheckboxChanged());
     };
 
@@ -149,7 +149,7 @@
     this.makeButton = (text, opts) => {
       let $btn = $('<a href=""></a>')
                     .html(text)
-                    .addClass('govuk-link govuk-link--no-visited-state js-cancel')
+                    .addClass('usa-link font-body-sm margin-left-1 js-cancel')
                     // isn't set if cancelSelector is undefined
                     .data('target', opts.cancelSelector || undefined)
                     .attr('tabindex', '0')
@@ -299,10 +299,10 @@
     this.nothingSelectedButtons = $(`
       <div id="nothing_selected">
         <div class="js-stick-at-bottom-when-scrolling">
-          <button class="govuk-button govuk-button--secondary govuk-!-margin-right-3 govuk-!-margin-bottom-1" value="add-new-template" aria-expanded="false">
+          <button class="usa-button" value="add-new-template" aria-expanded="false">
             New template
           </button>
-          <button class="govuk-button govuk-button--secondary govuk-!-margin-bottom-1" value="add-new-folder" aria-expanded="false">New folder</button>
+          <button class="usa-button" value="add-new-folder" aria-expanded="false">New folder</button>
           <div class="template-list-selected-counter">
             <span class="template-list-selected-counter__count" aria-hidden="true">
               ${this.selectionStatus.default}
@@ -315,10 +315,10 @@
     this.itemsSelectedButtons = $(`
       <div id="items_selected">
         <div class="js-stick-at-bottom-when-scrolling">
-          <button class="govuk-button govuk-button--secondary govuk-!-margin-right-3 govuk-!-margin-bottom-1" value="move-to-existing-folder" aria-expanded="false">
+          <button class="usa-button" value="move-to-existing-folder" aria-expanded="false">
             Move<span class="govuk-visually-hidden"> selection to folder</span>
           </button>
-          <button class="govuk-button govuk-button--secondary govuk-!-margin-bottom-1" value="move-to-new-folder" aria-expanded="false">Add to new folder</button>
+          <button class="usa-button" value="move-to-new-folder" aria-expanded="false">Add to new folder</button>
           <div class="template-list-selected-counter" aria-hidden="true">
             <span class="template-list-selected-counter__count" aria-hidden="true">
               ${this.selectionStatus.selected(1)}

app/assets/sass/uswds/_uswds-theme-custom-styles.scss

@@ -57,9 +57,80 @@ h1 {
 p,
 .list li {
    font-family: family("sans");
-   font-size: size("body", 7);
+   font-size: size("body", 6);
 }
 
 .large-number {
    font-size: size("body", 16);
 }
+
+.big-number-with-status .big-number,
+.big-number-with-status .big-number-smaller {
+   @include u-bg("primary");
+}
+
+.big-number-with-status .big-number-status,
+.big-number-with-status .big-number-status-failing {
+   @include u-bg("green-cool-40v");
+}
+
+.show-more-no-border:focus,
+.show-more:focus {
+   box-shadow: none;
+}
+
+.govuk-checkboxes__label::after {
+   top: 13px;
+   left: 9px;
+   width: 22px;
+   height: 11px;
+}
+
+.govuk-checkboxes__input:focus + .govuk-checkboxes__label::before,
+.multiple-choice [type="radio"]:focus + label::before {
+   box-shadow: 0 0 0 3px color("blue-40v");
+}
+
+.usa-dark-background .pill-item__container {
+   color: #fff;
+}
+
+.pill-separate-item:link,
+.pill-separate-item:visited {
+   text-decoration: none;
+   background: initial;
+}
+
+.template-footer .usa-link,
+.template-content-count,
+.table-empty-message,
+td.table-empty-message {
+   font-size: size("body", "sm");
+}
+
+.textbox-highlight-background,
+.textbox-highlight-foreground,
+.textbox-highlight-mask,
+.textbox-highlight-textbox {
+   font-size: units(2);
+   line-height: 1.2;
+   padding: units(1);
+   font-family: family("sans");
+}
+
+.govuk-inset-text {
+   border-color: color("blue-40v");
+}
+
+.usa-dark-background .pill-item__label {
+   color: white;
+   text-decoration: none !important;
+}
+
+.pill-item.usa-link {
+   text-decoration: none !important;
+}
+
+.sub-content .banner-dangerous h1 {
+   margin-top: 0;
+}

app/assets/stylesheets/components/file-upload.scss

@@ -1,9 +1,6 @@
 .js-enabled {
-
   .file-upload {
-
     &-label {
-
       @include bold-19;
       display: block;
       margin: 0 0 10px 0;
@@ -11,7 +8,6 @@
       .error-message {
         padding: 0;
       }
-
     }
 
     &-field {
@@ -22,11 +18,10 @@
       position: absolute;
       z-index: -1;
 
-      &:focus + .file-upload-button {
-        background: $govuk-focus-colour;
-        color: $govuk-focus-text-colour;
-      }
-
+      // &:focus + .file-upload-button {
+      //   background: $govuk-focus-colour;
+      //   color: $govuk-focus-text-colour;
+      // }
     }
 
     &-filename {
@@ -46,9 +41,6 @@
       a {
         font-weight: bold;
       }
-
     }
-
   }
-
 }