dce-reactkit 1.0.18 → 2.0.0

package/lib/helpers/floorToNumDecimals.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Round a number (floor) to a certain number of decimals
+ * @author Gabe Abrams
+ * @param num the number to round
+ * @param numDecimals the number of decimals to round to
+ * @returns rounded number
+ */
+var floorToNumDecimals = function (num, numDecimals) {
+    var rounder = Math.pow(10, numDecimals);
+    return (Math.floor(num * rounder) / rounder);
+};
+exports.default = floorToNumDecimals;
+//# sourceMappingURL=floorToNumDecimals.js.map

package/lib/helpers/floorToNumDecimals.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"floorToNumDecimals.js","sourceRoot":"","sources":["../../src/helpers/floorToNumDecimals.tsx"],"names":[],"mappings":";;AAAA;;;;;;GAMG;AACH,IAAM,kBAAkB,GAAG,UAAC,GAAW,EAAE,WAAmB;IAC1D,IAAM,OAAO,GAAG,SAAA,EAAE,EAAI,WAAW,CAAA,CAAC;IAClC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,OAAO,CAAC,GAAG,OAAO,CAAC,CAAC;AAC/C,CAAC,CAAC;AAEF,kBAAe,kBAAkB,CAAC"}

package/lib/helpers/forceNumIntoBounds.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Force a number to stay within specific bounds
+ * @author Gabe Abrams
+ * @param num the number to move into the bounds
+ * @param min the minimum number in the bound
+ * @param max the maximum number in the bound
+ * @returns bounded number
+ */
+declare const forceNumIntoBounds: (num: number, min: number, max: number) => number;
+export default forceNumIntoBounds;

package/lib/helpers/forceNumIntoBounds.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Force a number to stay within specific bounds
+ * @author Gabe Abrams
+ * @param num the number to move into the bounds
+ * @param min the minimum number in the bound
+ * @param max the maximum number in the bound
+ * @returns bounded number
+ */
+var forceNumIntoBounds = function (num, min, max) {
+    return Math.max(min, Math.min(max, num));
+};
+exports.default = forceNumIntoBounds;
+//# sourceMappingURL=forceNumIntoBounds.js.map

package/lib/helpers/forceNumIntoBounds.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"forceNumIntoBounds.js","sourceRoot":"","sources":["../../src/helpers/forceNumIntoBounds.tsx"],"names":[],"mappings":";;AAAA;;;;;;;GAOG;AACH,IAAM,kBAAkB,GAAG,UAAC,GAAW,EAAE,GAAW,EAAE,GAAW;IAC/D,OAAO,IAAI,CAAC,GAAG,CACb,GAAG,EACH,IAAI,CAAC,GAAG,CACN,GAAG,EACH,GAAG,CACJ,CACF,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,kBAAkB,CAAC"}

package/lib/helpers/padDecimalZeros.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Pad a number's decimal with zeros on the right
+ *   (e.g. 5.2 becomes 5.20 with 2 digit padding)
+ * @author Gabe Abrams
+ * @param num the number to pad
+ * @param numDigits the minimum number of digits after the decimal
+ * @returns padded number
+ */
+declare const padDecimalZeros: (num: number, numDigits: number) => string;
+export default padDecimalZeros;

package/lib/helpers/padDecimalZeros.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Pad a number's decimal with zeros on the right
+ *   (e.g. 5.2 becomes 5.20 with 2 digit padding)
+ * @author Gabe Abrams
+ * @param num the number to pad
+ * @param numDigits the minimum number of digits after the decimal
+ * @returns padded number
+ */
+var padDecimalZeros = function (num, numDigits) {
+    // Skip if nothing to do
+    if (numDigits < 1) {
+        return;
+    }
+    // Convert to string
+    var out = String(num);
+    // Add a decimal point if there isn't one
+    if (!out.includes('.')) {
+        out += '.';
+    }
+    // Add zeros
+    while (out.split('.')[1].length < numDigits) {
+        out = "".concat(out, "0");
+    }
+    // Return
+    return out;
+};
+exports.default = padDecimalZeros;
+//# sourceMappingURL=padDecimalZeros.js.map

package/lib/helpers/padDecimalZeros.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"padDecimalZeros.js","sourceRoot":"","sources":["../../src/helpers/padDecimalZeros.tsx"],"names":[],"mappings":";;AAAA;;;;;;;GAOG;AACH,IAAM,eAAe,GAAG,UAAC,GAAW,EAAE,SAAiB;IACrD,wBAAwB;IACxB,IAAI,SAAS,GAAG,CAAC,EAAE;QACjB,OAAO;KACR;IAED,oBAAoB;IACpB,IAAI,GAAG,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;IAEtB,yCAAyC;IACzC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;QACtB,GAAG,IAAI,GAAG,CAAC;KACZ;IAED,YAAY;IACZ,OAAO,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,GAAG,SAAS,EAAE;QAC3C,GAAG,GAAG,UAAG,GAAG,MAAG,CAAC;KACjB;IAED,SAAS;IACT,OAAO,GAAG,CAAC;AACb,CAAC,CAAC;AAEF,kBAAe,eAAe,CAAC"}

package/lib/helpers/padZerosLeft.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Pad a number with zeros on the left (e.g. 5 becomes 05 with 2 digit padding)
+ * @author Gabe Abrams
+ * @param num the number to pad
+ * @param numDigits the minimum number of digits before the decimal
+ * @returns padded number
+ */
+declare const padZerosLeft: (num: number, numDigits: number) => string;
+export default padZerosLeft;

package/lib/helpers/padZerosLeft.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Pad a number with zeros on the left (e.g. 5 becomes 05 with 2 digit padding)
+ * @author Gabe Abrams
+ * @param num the number to pad
+ * @param numDigits the minimum number of digits before the decimal
+ * @returns padded number
+ */
+var padZerosLeft = function (num, numDigits) {
+    // Convert to string
+    var out = String(num);
+    // Add zeros
+    while (out.split('.')[0].length < numDigits) {
+        out = "0".concat(out);
+    }
+    // Return
+    return out;
+};
+exports.default = padZerosLeft;
+//# sourceMappingURL=padZerosLeft.js.map

package/lib/helpers/padZerosLeft.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"padZerosLeft.js","sourceRoot":"","sources":["../../src/helpers/padZerosLeft.tsx"],"names":[],"mappings":";;AAAA;;;;;;GAMG;AACH,IAAM,YAAY,GAAG,UAAC,GAAW,EAAE,SAAiB;IAClD,oBAAoB;IACpB,IAAI,GAAG,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;IAEtB,YAAY;IACZ,OAAO,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,GAAG,SAAS,EAAE;QAC3C,GAAG,GAAG,WAAI,GAAG,CAAE,CAAC;KACjB;IAED,SAAS;IACT,OAAO,GAAG,CAAC;AACb,CAAC,CAAC;AAEF,kBAAe,YAAY,CAAC"}

package/lib/helpers/roundToNumDecimals.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Round a number to a certain number of decimals
+ * @author Gabe Abrams
+ * @param num the number to round
+ * @param numDecimals the number of decimals to round to
+ * @returns rounded number
+ */
+declare const roundToNumDecimals: (num: number, numDecimals: number) => number;
+export default roundToNumDecimals;

package/lib/helpers/roundToNumDecimals.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Round a number to a certain number of decimals
+ * @author Gabe Abrams
+ * @param num the number to round
+ * @param numDecimals the number of decimals to round to
+ * @returns rounded number
+ */
+var roundToNumDecimals = function (num, numDecimals) {
+    var rounder = Math.pow(10, numDecimals);
+    return (Math.round(num * rounder) / rounder);
+};
+exports.default = roundToNumDecimals;
+//# sourceMappingURL=roundToNumDecimals.js.map

package/lib/helpers/roundToNumDecimals.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"roundToNumDecimals.js","sourceRoot":"","sources":["../../src/helpers/roundToNumDecimals.tsx"],"names":[],"mappings":";;AAAA;;;;;;GAMG;AACH,IAAM,kBAAkB,GAAG,UAAC,GAAW,EAAE,WAAmB;IAC1D,IAAM,OAAO,GAAG,SAAA,EAAE,EAAI,WAAW,CAAA,CAAC;IAClC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,OAAO,CAAC,GAAG,OAAO,CAAC,CAAC;AAC/C,CAAC,CAAC;AAEF,kBAAe,kBAAkB,CAAC"}

package/lib/helpers/sum.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Sum the numbers in an array
+ * @author Gabe Abrams
+ * @param nums the numbers to sum
+ * @returns the sum of the numbers
+ */
+declare const sum: (nums: number[]) => number;
+export default sum;

package/lib/helpers/sum.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Sum the numbers in an array
+ * @author Gabe Abrams
+ * @param nums the numbers to sum
+ * @returns the sum of the numbers
+ */
+var sum = function (nums) {
+    return nums.reduce(function (a, b) {
+        return (a + b);
+    }, 0);
+};
+exports.default = sum;
+//# sourceMappingURL=sum.js.map

package/lib/helpers/sum.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sum.js","sourceRoot":"","sources":["../../src/helpers/sum.tsx"],"names":[],"mappings":";;AAAA;;;;;GAKG;AACH,IAAM,GAAG,GAAG,UAAC,IAAc;IACzB,OAAO,IAAI,CAAC,MAAM,CAChB,UAAC,CAAS,EAAE,CAAS;QACnB,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;IACjB,CAAC,EACD,CAAC,CACF,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,GAAG,CAAC"}

package/lib/helpers/waitMs.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Wait for a certain number of ms
+ * @author Gabe Abrams
+ * @param ms number of ms to wait
+ */
+declare const waitMs: (ms?: number) => Promise<unknown>;
+export default waitMs;

package/lib/helpers/waitMs.js

@@ -0,0 +1,55 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Wait for a certain number of ms
+ * @author Gabe Abrams
+ * @param ms number of ms to wait
+ */
+var waitMs = function (ms) {
+    if (ms === void 0) { ms = 0; }
+    return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            return [2 /*return*/, new Promise(function (resolve) {
+                    setTimeout(resolve, ms);
+                })];
+        });
+    });
+};
+exports.default = waitMs;
+//# sourceMappingURL=waitMs.js.map

package/lib/helpers/waitMs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"waitMs.js","sourceRoot":"","sources":["../../src/helpers/waitMs.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;GAIG;AACH,IAAM,MAAM,GAAG,UAAO,EAAM;IAAN,mBAAA,EAAA,MAAM;;;YAC1B,sBAAO,IAAI,OAAO,CAAC,UAAC,OAAO;oBACzB,UAAU,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;gBAC1B,CAAC,CAAC,EAAC;;;CACJ,CAAC;AAEF,kBAAe,MAAM,CAAC"}

package/lib/types/Variant.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Bootstrap variants
+ * @author Gabe Abrams
+ */
+declare enum Variant {
+    Primary = "primary",
+    Secondary = "secondary",
+    Success = "success",
+    Warning = "warning",
+    Info = "info",
+    Danger = "danger",
+    Light = "light",
+    Dark = "dark"
+}
+export default Variant;

package/lib/types/Variant.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Bootstrap variants
+ * @author Gabe Abrams
+ */
+var Variant;
+(function (Variant) {
+    Variant["Primary"] = "primary";
+    Variant["Secondary"] = "secondary";
+    Variant["Success"] = "success";
+    Variant["Warning"] = "warning";
+    Variant["Info"] = "info";
+    Variant["Danger"] = "danger";
+    Variant["Light"] = "light";
+    Variant["Dark"] = "dark";
+})(Variant || (Variant = {}));
+exports.default = Variant;
+//# sourceMappingURL=Variant.js.map

package/lib/types/Variant.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Variant.js","sourceRoot":"","sources":["../../src/types/Variant.tsx"],"names":[],"mappings":";;AAAA;;;GAGG;AACH,IAAK,OASJ;AATD,WAAK,OAAO;IACV,8BAAmB,CAAA;IACnB,kCAAuB,CAAA;IACvB,8BAAmB,CAAA;IACnB,8BAAmB,CAAA;IACnB,wBAAa,CAAA;IACb,4BAAiB,CAAA;IACjB,0BAAe,CAAA;IACf,wBAAa,CAAA;AACf,CAAC,EATI,OAAO,KAAP,OAAO,QASX;AAED,kBAAe,OAAO,CAAC"}

package/package.json

@@ -1,54 +1,37 @@
 {
   "name": "dce-reactkit",
-  "version": "1.0.18",
+  "version": "2.0.0",
   "main": "index.js",
   "module": "index.js",
   "scripts": {
-    "build": "rimraf common && rimraf components && rimraf glyphs && NODE_ENV=production babel src/lib --out-dir . --copy-files --ignore __tests__,spec.js,test.js,__snapshots__"
+    "build": "tsc --project ./tsconfig.json"
   },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/harvard-edtech/dce-reactkit"
   },
-  "author": "Gabriel Abrams <gabeabrams@gmail.com>",
+  "author": "Gabe Abrams <gabeabrams@gmail.com>",
   "license": "MIT",
   "homepage": "https://github.com/harvard-edtech/dce-reactkit#readme",
-  "devDependencies": {
-    "@babel/core": "^7.2.2",
-    "babel-cli": "^6.26.0",
-    "babel-plugin-transform-object-rest-spread": "^6.23.0",
-    "babel-plugin-transform-react-jsx": "^6.24.1",
-    "babel-preset-env": "^1.5.1",
-    "babel-preset-react": "^6.24.1",
-    "babel-preset-react-app": "^6.1.0",
-    "eslint": "^5.12.0",
-    "eslint-config-airbnb": "^17.1.0",
-    "eslint-plugin-import": "^2.14.0",
-    "eslint-plugin-jsx-a11y": "^6.1.2",
-    "eslint-plugin-react": "^7.12.3",
-    "react-dom": "^16.7.0",
-    "react-scripts": "^2.1.3",
-    "rimraf": "^2.6.3"
-  },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.12",
-    "@fortawesome/free-brands-svg-icons": "^5.6.3",
-    "@fortawesome/free-regular-svg-icons": "^5.6.3",
-    "@fortawesome/free-solid-svg-icons": "^5.6.3",
-    "@fortawesome/react-fontawesome": "^0.1.3",
-    "bootstrap": "^4.2.1",
-    "caccl": "^1.0.34",
-    "jquery": "^3.3.1",
-    "lodash-arithmetic": "^1.0.0",
-    "moment": "^2.23.0",
-    "papaparse": "^4.6.3",
-    "prop-types": "^15.6.2",
-    "react": "^16.7.0",
-    "react-datepicker": "^2.0.0",
-    "react-download-link": "^2.2.0",
-    "reactstrap": "^6.5.0",
-    "recharts": "^1.4.2",
-    "uuid": "^3.3.2",
-    "validator": "^10.10.0"
+    "@fortawesome/fontawesome-svg-core": "^6.1.1",
+    "@fortawesome/free-regular-svg-icons": "^6.1.1",
+    "@fortawesome/free-solid-svg-icons": "^6.1.1",
+    "@fortawesome/react-fontawesome": "^0.1.18",
+    "react-bootstrap": "^2.2.3"
+  },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^5.18.0",
+    "@typescript-eslint/parser": "^5.18.0",
+    "eslint": "^8.12.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-airbnb-typescript": "^17.0.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jest": "^26.1.3",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-react": "^7.29.4",
+    "eslint-plugin-react-hooks": "^4.4.0",
+    "sass": "^1.49.11",
+    "typescript": "^4.6.3"
   }
 }

package/src/components/LoadingSpinner.scss

@@ -0,0 +1,50 @@
+/* Blips */
+.LoadingSpinner-blip-1,
+.LoadingSpinner-blip-2,
+.LoadingSpinner-blip-3,
+.LoadingSpinner-blip-4 {
+  font-size: 25px;
+  opacity: 0.6;
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
+/* First Blip */
+.LoadingSpinner-blip-1 {
+  animation: LoadingSpinner-pop-animation 2s infinite;
+}
+
+/* Second Blip */
+.LoadingSpinner-blip-2 {
+  animation: LoadingSpinner-pop-animation 2s infinite;
+  -webkit-animation-delay: 0.1s;
+  animation-delay: 0.1s;
+}
+
+/* Third Blip */
+.LoadingSpinner-blip-3 {
+  animation: LoadingSpinner-pop-animation 2s infinite;
+  animation-delay: 0.2s;
+}
+
+/* Fourth Blip */
+.LoadingSpinner-blip-4 {
+  animation: LoadingSpinner-pop-animation 2s infinite;
+  animation-delay: 0.3s;
+}
+
+/* Pop Animation for Each Blip */
+@keyframes LoadingSpinner-pop-animation {
+  0%  {
+    transform: scale(1.0);
+  }
+  10% {
+    transform: scale(1.5);
+  }
+  30% {
+    transform: scale(1.0);
+  }
+  100% {
+    transform: scale(1.0);
+  }
+}

package/src/components/LoadingSpinner.tsx

@@ -0,0 +1,50 @@
+/**
+ * Loading spinner/indicator
+ * @author Gabe Abrams
+ */
+
+// Import FontAwesome Icons
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCircle } from '@fortawesome/free-solid-svg-icons';
+
+// Import style
+import './LoadingSpinner.scss';
+
+/*------------------------------------------------------------------------*/
+/*                                Component                               */
+/*------------------------------------------------------------------------*/
+
+const LoadingSpinner = () => {
+  /*------------------------------------------------------------------------*/
+  /*                                 Render                                 */
+  /*------------------------------------------------------------------------*/
+
+  // Add all four blips to a container
+  return (
+    <div className="text-center LoadingSpinner LoadingSpinner-container">
+      <FontAwesomeIcon
+        icon={faCircle}
+        className="LoadingSpinner-blip-1 me-1"
+      />
+      <FontAwesomeIcon
+        icon={faCircle}
+        className="LoadingSpinner-blip-2 me-1"
+      />
+      <FontAwesomeIcon
+        icon={faCircle}
+        className="LoadingSpinner-blip-3 me-1"
+      />
+      <FontAwesomeIcon
+        icon={faCircle}
+        className="LoadingSpinner-blip-4"
+      />
+    </div>
+  );
+};
+
+/*------------------------------------------------------------------------*/
+/*                                 Wrap Up                                */
+/*------------------------------------------------------------------------*/
+
+// Export component
+export default LoadingSpinner;

package/src/components/Modal.scss

@@ -0,0 +1,48 @@
+/* More opaque backdrop */
+.Modal-backdrop {
+  background-color: black !important;
+  opacity: 0.8 !important;
+  z-index: 10000000 !important;
+}
+
+/* Customize the modal header and body */
+.modal-header {
+  /* Dark theme */
+  background-color: #222 !important;
+  color: white !important;
+
+  /* Border */
+  border: 1px solid #545454 !important;
+}
+.modal-body {
+  /* Dark theme */
+  background-color: #222 !important;
+  color: white !important;
+
+  /* Border */
+  border-top: 0 !important;
+  border-left: 1px solid #545454 !important;
+  border-bottom: 1px solid #545454 !important;
+  border-right: 1px solid #545454 !important;
+  border-bottom-left-radius: 3px;
+  border-bottom-right-radius: 3px;
+}
+
+/* Create our own animation */
+.modal-content {
+  animation-name: Modal-drop-in;
+  animation-duration: 0.4s;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
+  animation-timing-function: ease-out;
+}
+@keyframes Modal-drop-in {
+  0% {
+    transform: scale(0.8);
+    opacity: 0.5;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}