Split css between dashboard and status page

gulpfile.js

@@ -1,14 +1,18 @@
 var elixir = require('laravel-elixir');
 
-elixir(function (mix) {
+elixir((mix) => {
     mix
-        .sass('app.scss', 'public/dist/css/app.css')
-        .styles([
+        .copy(
             'node_modules/jquery-minicolors/jquery.minicolors.css',
-            'node_modules/sweetalert/dist/sweetalert.css',
+            'resources/assets/sass/plugins/_jquery.minicolors.scss'
+        )
+        .copy(
             'node_modules/github-markdown-css/github-markdown.css',
-            'public/dist/css/app.css'
-        ], 'public/dist/css/all.css', './')
+            'resources/assets/sass/plugins/_github-markdown.scss'
+        )
+        .copy('node_modules/ionicons/fonts', 'public/fonts')
+        .sass('dashboard.scss', 'public/dist/css/dashboard.css')
+        .sass('app.scss', 'public/dist/css/app.css')
         .scripts([
             'node_modules/jquery/dist/jquery.js',
             'node_modules/bootstrap-sass/assets/javascripts/bootstrap.js',
@@ -23,11 +27,14 @@ elixir(function (mix) {
             'node_modules/jquery-serializeobject/jquery.serializeObject.js',
             'node_modules/chart.js/dist/Chart.js',
             'node_modules/jquery-sparkline/jquery.sparkline.js',
-            'node_modules/sweetalert/dist/sweetalert.min.js',
+            'node_modules/sweetalert2/dist/sweetalert2.js',
             'resources/assets/js/password-strength.js',
             'resources/assets/js/app.js',
             'resources/assets/js/**/*.js'
         ], 'public/dist/js/all.js', './')
-        .version(['public/dist/css/all.css', 'public/dist/js/all.js'])
-        .copy('node_modules/ionicons/fonts/', 'public/fonts/');
+        .version([
+            'public/dist/css/dashboard.css',
+            'public/dist/css/app.css',
+            'public/dist/js/all.js'
+        ]);
 });

package.json

@@ -19,7 +19,7 @@
     "messenger": "git+https://github.com/HubSpot/messenger.git",
     "moment": "^2.13.0",
     "sortablejs": "^1.4.2",
-    "sweetalert": "^1.1.3"
+    "sweetalert2": "^4.0.4"
   },
   "private": true
 }

resources/assets/js/app.js

@@ -372,15 +372,21 @@ $(function() {
     }
 });
 
-function askConfirmation(callback) {
+function askConfirmation(callback, cancellCallback) {
     swal({
         type: "warning",
         title: "Confirm your action",
         text: "Are you sure you want to do this?",
+        buttonsStyling: false,
+        reverseButtons: true,
         confirmButtonText: "Yes",
-        confirmButtonColor: "#FF6F6F",
-        showCancelButton: true
-    }, function() {
-        callback();
+        confirmButtonClass: "btn btn-lg btn-danger",
+        cancelButtonClass: "btn btn-lg btn-default",
+        showCancelButton: true,
+        focusCancel: true
+    }).then(() => {
+        if (_.isFunction(callback)) callback();
+    }, () => {
+        if (_.isFunction(cancellCallback)) cancellCallback();
     });
 }

resources/assets/sass/_vendors.scss

@@ -0,0 +1,34 @@
+@import "palette";
+
+$ionicons-font-path: "../../../fonts" !default;
+@import "./node_modules/ionicons/scss/ionicons";
+
+@import "modules/bootstrap";
+
+html {
+    position: relative;
+    min-height: 100%;
+    -webkit-font-smoothing: antialiased;
+    // always show up-down scrollbar to prevent content from jumping left/right
+    // depending on whether the page is taller than 100% of viewport height
+    overflow-y: scroll;
+}
+
+body {
+    margin-bottom: 60px;
+    padding-bottom: 60px;
+}
+
+@import "helpers";
+
+// Module overrides
+@import "modules/tabs";
+@import "modules/forms";
+@import "modules/well";
+@import "modules/alerts";
+@import "modules/panels";
+@import "modules/btns";
+@import "modules/pager";
+
+// Error pages can have their own overrides.
+@import "errors";

resources/assets/sass/app.scss

@@ -1,57 +1,4 @@
-@import "palette";
-
-$ionicons-font-path: "../../../fonts" !default;
-@import "./node_modules/ionicons/scss/ionicons";
-
-@import "modules/bootstrap";
-
-html {
-    position: relative;
-    min-height: 100%;
-    -webkit-font-smoothing: antialiased;
-    // always show up-down scrollbar to prevent content from jumping left/right
-    // depending on whether the page is taller than 100% of viewport height
-    overflow-y: scroll;
-}
-
-body {
-    margin-bottom: 60px;
-    padding-bottom: 60px;
-}
-
-@import "helpers";
-
-// Module overrides
-@import "modules/tabs";
-@import "modules/forms";
-@import "modules/well";
-@import "modules/alerts";
-@import "modules/panels";
-@import "modules/btns";
-@import "modules/pager";
-
-// Styles for partials
-@import "partials/base";
-@import "partials/wrapper";
-@import "partials/navbar";
-@import "partials/sidebar";
-@import "partials/content";
-@import "partials/modals";
-
-// Styles for specific page
-@import "pages/login";
-@import "pages/setup";
-@import "pages/dashboard";
-
-// Styles for plugins
-@import "plugins/messenger";
-@import "plugins/animate";
-@import "plugins/bootstrap-datetimepicker/bootstrap-datetimepicker";
-@import "plugins/password-strength";
-@import "plugins/sortable";
+@import "vendors";
 
 // Status Page will need to override certain styles.
-@import "status-page";
-
-// Error pages can have their own overrides.
-@import "errors";
+@import "status-page/status-page";

resources/assets/sass/dashboard.scss

@@ -0,0 +1,24 @@
+@import "vendors";
+
+// Styles for partials
+@import "dashboard/partials/base";
+@import "dashboard/partials/wrapper";
+@import "dashboard/partials/navbar";
+@import "dashboard/partials/sidebar";
+@import "dashboard/partials/content";
+@import "dashboard/partials/modals";
+
+// Styles for specific page
+@import "dashboard/pages/login";
+@import "dashboard/pages/setup";
+@import "dashboard/pages/dashboard";
+
+// Styles for plugins
+@import "plugins/jquery.minicolors";
+@import "plugins/github-markdown";
+@import "plugins/sweetalert";
+@import "plugins/messenger";
+@import "plugins/animate";
+@import "plugins/bootstrap-datetimepicker/bootstrap-datetimepicker";
+@import "plugins/password-strength";
+@import "plugins/sortable";

resources/assets/sass/modules/_btns.scss

@@ -10,6 +10,8 @@
         background: darken($background, 5%);
         border-color: darken($background, 10%);
         color: $color;
+        outline: none;
+        outline-offset: 0;
     }
 
     &.disabled,