Merge pull request #11 from flatlogic/updates

Updates

Author: Yeliazar

changelog.md

@@ -1,4 +1,11 @@
 # Changelog
+## [8.3.0]
+
+- Updated Bootstrap/Reactstrap
+- Add theme switcher
+- Updated dependencies
+- Updated theme-colors, fonts, colors
+
 ## [8.2.4]
 
 - Updated folllow Dependencies and DevDependencies: 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sing-app-react",
-  "version": "5.0.0",
+  "version": "6.0.0",
   "private": true,
   "scripts": {
     "build": "cross-env REACT_APP_BACKEND=true cross-env PUBLIC_URL='/sing-app-react' node scripts/build.js",
@@ -54,58 +54,58 @@
     ]
   },
   "dependencies": {
-    "@amcharts/amcharts4": "^4.10.18",
-    "@amcharts/amcharts4-geodata": "^4.1.20",
-    "@fullcalendar/core": "5.7.0",
-    "@fullcalendar/daygrid": "5.7.0",
-    "@fullcalendar/interaction": "5.7.0",
-    "@fullcalendar/list": "5.7.0",
-    "@fullcalendar/react": "5.7.0",
-    "@fullcalendar/timegrid": "5.7.0",
+    "@amcharts/amcharts4": "^4.10.25",
+    "@amcharts/amcharts4-geodata": "^4.1.23",
+    "@fullcalendar/core": "5.11.0",
+    "@fullcalendar/daygrid": "5.11.0",
+    "@fullcalendar/interaction": "5.11.0",
+    "@fullcalendar/list": "5.11.0",
+    "@fullcalendar/react": "5.11.1",
+    "@fullcalendar/timegrid": "5.11.0",
     "animate.css": "4.1.1",
-    "apexcharts": "^3.26.2",
-    "awesome-bootstrap-checkbox": "1.0.1",
-    "axios": "^0.21.1",
-    "bootstrap": "4.6.0",
+    "apexcharts": "^3.35.3",
+    "awesome-bootstrap-checkbox": "https://github.com/flatlogic/awesome-bootstrap-checkbox#bump-to-bootstrap5",
+    "axios": "^0.27.2",
+    "bootstrap": "5.1.3",
     "bootstrap-slider": "^10.6.2",
     "bootstrap_calendar": "https://github.com/xero/bootstrap_calendar.git#1.0.1",
-    "chroma-js": "^2.1.1",
+    "chroma-js": "^2.4.2",
     "classnames": "^2.3.1",
-    "connected-react-router": "6.9.1",
+    "connected-react-router": "6.9.2",
     "cross-env": "^7.0.3",
     "draft-js": "^0.11.7",
     "echarts": "^4.9.0",
     "echarts-for-react": "^2.0.16",
     "file-saver": "^2.0.5",
-    "filesize": "^6.3.0",
+    "filesize": "^6.4.0",
     "flot": "^0.8.3",
     "flot.dashes": "https://github.com/cquartier/flot.dashes.git",
     "font-awesome": "4.7.0",
     "formik": "1.5.8",
     "formsy-react": "0.19.5",
     "glyphicons-halflings": "^1.9.1",
     "highcharts": "^7.2.2",
-    "highcharts-react-official": "^3.0.0",
+    "highcharts-react-official": "^3.1.0",
     "history": "^4.10.1",
     "jasny-bootstrap": "^3.1.3",
     "jsonwebtoken": "^8.5.1",
     "line-awesome": "^1.3.0",
     "md5": "^2.3.0",
     "messenger": "git+https://github.com/HubSpot/messenger.git#v1.4.2",
-    "moment": "^2.29.1",
+    "moment": "^2.29.3",
     "nvd3": "1.8.6",
-    "qs": "^6.10.1",
+    "qs": "^6.10.5",
     "query-string": "^6.14.1",
     "rc-color-picker": "^1.2.6",
     "rc-hammerjs": "0.6.10",
     "rc-slider": "^8.7.1",
-    "react": "^16.14.0",
-    "react-animate-height": "^2.0.23",
+    "react": "^17.0.2",
+    "react-animate-height": "^2.1.2",
     "react-animated-number": "^0.4.4",
-    "react-apexcharts": "^1.3.9",
+    "react-apexcharts": "^1.4.0",
     "react-app-polyfill": "^0.2.2",
     "react-autosize-textarea": "^5.0.1",
-    "react-bootstrap": "^1.6.0",
+    "react-bootstrap": "^1.6.5",
     "react-bootstrap-table": "4.3.1",
     "react-bootstrap-table-next": "^4.0.3",
     "react-bootstrap-table2-editor": "^1.4.0",
@@ -115,56 +115,56 @@
     "react-bootstrap-table2-toolkit": "^2.1.3",
     "react-datetime": "^2.16.3",
     "react-dev-utils": "^6.1.1",
-    "react-dom": "^16.14.0",
+    "react-dom": "^17.0.2",
     "react-draft-wysiwyg": "1.14.7",
     "react-dropzone": "^6.2.4",
     "react-google-maps": "^9.4.5",
     "react-images": "^0.5.19",
-    "react-joyride": "^2.3.0",
+    "react-joyride": "^2.4.0",
     "react-maskedinput": "^4.0.1",
     "react-mde": "2.3.4",
-    "react-redux": "^7.2.4",
-    "react-router": "5.2.0",
-    "react-router-dom": "5.2.0",
+    "react-redux": "^7.2.8",
+    "react-router": "5.3.3",
+    "react-router-dom": "5.3.3",
     "react-router-hash-link": "^1.2.2",
     "react-scrollspy": "^3.4.3",
     "react-select": "^3.2.0",
     "react-shuffle": "2.1.0",
-    "react-slick": "^0.28.1",
-    "react-sortable-hoc": "^0.8.4",
+    "react-slick": "^0.29.0",
+    "react-sortable-hoc": "^1.11.0",
     "react-sortable-tree": "^2.8.0",
     "react-sortablejs": "1.5.1",
     "react-sparklines": "^1.7.0",
     "react-syntax-highlighter": "^10.3.5",
-    "react-table": "6.11.4",
+    "react-table": "6.11.5",
     "react-tagsinput": "^3.19.0",
     "react-toastify": "^5.5.0",
     "react-transition-group": "^2.9.0",
     "react-trend": "^1.2.5",
-    "reactstrap": "7.1.0",
-    "redux": "^4.1.0",
-    "redux-thunk": "^2.3.0",
-    "reselect": "^4.0.0",
+    "reactstrap": "9.1.1",
+    "redux": "^4.2.0",
+    "redux-thunk": "^2.4.1",
+    "reselect": "^4.1.6",
     "rickshaw": "1.7.1",
     "showdown": "1.9.1",
     "skycons": "^1.0.0",
-    "sortablejs": "1.13.0",
-    "styled-components": "^5.3.0",
+    "sortablejs": "1.15.0",
+    "styled-components": "^5.3.5",
     "toastr": "^2.1.4",
     "uuid": "^3.4.0",
-    "xlsx": "^0.16.9",
-    "yup": "^0.32.9"
+    "xlsx": "^0.18.5",
+    "yup": "^0.32.11"
   },
   "devDependencies": {
-    "@babel/core": "7.14.0",
-    "@babel/plugin-proposal-class-properties": "7.13.0",
-    "@babel/plugin-proposal-optional-chaining": "^7.13.2",
+    "@babel/core": "7.18.5",
+    "@babel/plugin-proposal-class-properties": "7.17.12",
+    "@babel/plugin-proposal-optional-chaining": "^7.17.12",
     "@svgr/webpack": "4.3.3",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "10.1.0",
     "babel-jest": "24.9.0",
-    "babel-loader": "8.2.2",
-    "babel-plugin-named-asset-import": "1.0.0-next.154",
+    "babel-loader": "8.2.5",
+    "babel-plugin-named-asset-import": "1.0.0-next.fb6e6f70",
     "babel-preset-react-app": "9.1.2",
     "bfj": "6.1.2",
     "bundle-loader": "0.5.6",
@@ -177,9 +177,9 @@
     "eslint-config-react-app": "4.0.1",
     "eslint-loader": "2.2.1",
     "eslint-plugin-flowtype": "3.13.0",
-    "eslint-plugin-import": "2.22.1",
-    "eslint-plugin-jsx-a11y": "6.4.1",
-    "eslint-plugin-react": "7.23.2",
+    "eslint-plugin-import": "2.26.0",
+    "eslint-plugin-jsx-a11y": "6.5.1",
+    "eslint-plugin-react": "7.30.0",
     "eslint-plugin-react-hooks": "1.7.0",
     "expose-loader": "0.7.5",
     "file-loader": "3.0.1",
@@ -191,23 +191,26 @@
     "jest-pnp-resolver": "1.2.2",
     "jest-resolve": "24.9.0",
     "lodash": "4.17.21",
-    "mini-css-extract-plugin": "0.8.0",
+    "mini-css-extract-plugin": "0.12.0",
     "node-sass": "4.14.1",
-    "optimize-css-assets-webpack-plugin": "5.0.4",
-    "pnp-webpack-plugin": "1.6.4",
+    "optimize-css-assets-webpack-plugin": "5.0.8",
+    "pnp-webpack-plugin": "1.7.0",
     "postcss-flexbugs-fixes": "4.2.1",
     "postcss-loader": "3.0.0",
-    "postcss-preset-env": "6.7.0",
+    "postcss-preset-env": "6.7.1",
     "postcss-safe-parser": "4.0.2",
-    "resolve": "1.20.0",
+    "resolve": "1.22.0",
     "sass-loader": "7.3.1",
     "style-loader": "0.23.1",
     "terser-webpack-plugin": "1.4.5",
     "url-loader": "1.1.2",
     "webpack": "4.46.0",
-    "webpack-dev-server": "3.11.2",
+    "webpack-dev-server": "3.11.3",
     "webpack-manifest-plugin": "2.2.0",
-    "webpack-raphael": "2.1.4",
     "workbox-webpack-plugin": "4.3.1"
+  },
+  "resolutions": {
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
   }
 }

src/components/FormItems/uploaders/FilesUploader.js

@@ -113,7 +113,7 @@ class FilesUploader extends Component {
             {this.value().map((item) => {
               return (
                 <div key={item.id}>
-                  <i className="la la-link text-muted mr-2"></i>
+                  <i className="la la-link text-muted me-2"></i>
 
                   <a
                     href={item.publicUrl}

src/components/FormItems/uploaders/ImagesUploader.js

@@ -116,7 +116,7 @@ class ImagesUploader extends Component {
             {this.value().map((item) => {
               return (
                 <div
-                  className="mr-2 mb-2 img-card"
+                  className="me-2 mb-2 img-card"
                   style={{ height: '100px' }}
                   key={item.id}
                 >
@@ -145,7 +145,7 @@ class ImagesUploader extends Component {
                     {!readonly && (
                       <button
                         type="button"
-                        className="btn btn-link ml-2"
+                        className="btn btn-link ms-2"
                         onClick={() =>
                           this.handleRemove(item.id)
                         }