Change Bootstrap 3 to 4, do basic improvements

web/jsconfig.json

@@ -11,7 +11,8 @@
          "reducers/*": ["./src/reducers"],
          "store/*": ["./src/store"],
          "tools/*": ["./src/tools"],
-         "vendor/*": ["./src/vendor"]
+         "vendor/*": ["./src/vendor"],
+         "scss/*": ["./src/scss"]
       }
    },
    "include": ["src"]

web/package.json

@@ -4,6 +4,7 @@
    "private": true,
    "dependencies": {
       "axios": "^0.19.0",
+      "bootstrap": "^4.3.1",
       "classnames": "^2.2.6",
       "connected-react-router": "^6.5.2",
       "date-fns": "^2.7.0",

web/scss/_all-utilities.scss

@@ -0,0 +1,10 @@
+// Functions
+@import "~bootstrap/scss/functions";
+
+// Variables
+@import "custom-variables";
+@import "~bootstrap/scss/variables";
+
+// Mixins
+@import "custom-mixins";
+@import "~bootstrap/scss/mixins";

web/scss/_custom-variables.scss

@@ -0,0 +1,7 @@
+$light-gray:            #cbd8f3;
+$light-blue:            #7c99d6;
+$dark-blue:             #3c6cde;
+$pink:                  #ff2546;
+$light-green:           #40e261;
+$green:                 #23e04b;
+$navy-box-shadow:       rgba(131, 100, 238, 0.15);

web/src/components/App/_forms.scss → web/scss/_forms.scss

@@ -1,4 +1,4 @@
-@import 'variables';
+@import 'scss/all-utilities';
 
 // Placeholder and label colors
 

web/src/components/App/_module.scss → web/scss/_module.scss

@@ -1,4 +1,4 @@
-@import 'variables';
+@import 'scss/all-utilities';
 
 // A typical widget module
 .module {
@@ -21,7 +21,7 @@
    }
 }
 
-@media (min-width: $screen-md-min) {
+@include media-breakpoint-up(md) {
    .module {
       > * {
          margin-left: 2.5rem;

web/scss/site.scss

@@ -0,0 +1,9 @@
+@import "scss/all-utilities";
+
+html, body {
+   min-height: 100%;
+}
+
+@import "module";
+@import "forms";
+@import "pagination";

web/scss/vendor.scss

@@ -0,0 +1,48 @@
+ /*!
+ * Bootstrap v4.3.1 (https://getbootstrap.com/)
+ * Copyright 2011-2019 The Bootstrap Authors
+ * Copyright 2011-2019 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ */
+
+@import "~bootstrap/scss/functions";
+
+// Custom variables first
+@import 'custom-variables';
+
+@import "~bootstrap/scss/variables";
+@import "~bootstrap/scss/mixins";
+@import "~bootstrap/scss/root";
+@import "~bootstrap/scss/reboot";
+@import "~bootstrap/scss/type";
+@import "~bootstrap/scss/images";
+@import "~bootstrap/scss/code";
+@import "~bootstrap/scss/grid";
+@import "~bootstrap/scss/tables";
+@import "~bootstrap/scss/forms";
+@import "~bootstrap/scss/buttons";
+@import "~bootstrap/scss/transitions";
+@import "~bootstrap/scss/dropdown";
+@import "~bootstrap/scss/button-group";
+@import "~bootstrap/scss/input-group";
+@import "~bootstrap/scss/custom-forms";
+@import "~bootstrap/scss/nav";
+@import "~bootstrap/scss/navbar";
+@import "~bootstrap/scss/card";
+@import "~bootstrap/scss/breadcrumb";
+@import "~bootstrap/scss/pagination";
+@import "~bootstrap/scss/badge";
+@import "~bootstrap/scss/jumbotron";
+@import "~bootstrap/scss/alert";
+@import "~bootstrap/scss/progress";
+@import "~bootstrap/scss/media";
+@import "~bootstrap/scss/list-group";
+@import "~bootstrap/scss/close";
+@import "~bootstrap/scss/toasts";
+@import "~bootstrap/scss/modal";
+@import "~bootstrap/scss/tooltip";
+@import "~bootstrap/scss/popover";
+@import "~bootstrap/scss/carousel";
+@import "~bootstrap/scss/spinners";
+@import "~bootstrap/scss/utilities";
+@import "~bootstrap/scss/print";