From 131ed00e03e9d9154f4ba65927b5659e5c3eb562 Mon Sep 17 00:00:00 2001
From: Howard Wilson <howard@watsonbox.net>
Date: Wed, 18 Nov 2020 18:39:47 +0100
Subject: [PATCH] Upgrade to Bootstrap 4

---
 package.json                                  |   4 +-
 src/App.scss                                  |  26 ++-
 src/App.tsx                                   |   2 +-
 src/components/Login.jsx                      |   2 +-
 src/components/Paginator.jsx                  |   8 +-
 src/components/PlaylistRow.jsx                |   7 +-
 src/components/PlaylistTable.jsx              |   8 +-
 src/components/PlaylistsExporter.jsx          |   7 +-
 .../__snapshots__/PlaylistTable.test.jsx.snap | 128 +++++++-----
 src/icons.jsx                                 |   4 +-
 src/index.scss                                |  21 +-
 yarn.lock                                     | 195 +++++++++++-------
 12 files changed, 263 insertions(+), 149 deletions(-)

diff --git a/package.json b/package.json
index 8c081f06..85d6130e 100644
--- a/package.json
+++ b/package.json
@@ -20,13 +20,13 @@
     "@types/react-bootstrap": "^0.32.24",
     "@types/react-dom": "^16.9.8",
     "axios": "^0.21.0",
-    "bootstrap": "3.3.7",
+    "bootstrap": "^4.5.3",
     "bottleneck": "^2.19.5",
     "file-saver": "^2.0.2",
     "jszip": "^3.5.0",
     "node-sass": "4.14.1",
     "react": "^17.0.1",
-    "react-bootstrap": "0.33.1",
+    "react-bootstrap": "^1.4.0",
     "react-dom": "^17.0.1",
     "react-scripts": "4.0.0",
     "typescript": "^4.0.3",
diff --git a/src/App.scss b/src/App.scss
index c18317b4..8d810fd1 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -15,10 +15,6 @@
 h1 a { color: black; }
 h1 a:hover { color: black; text-decoration: none; }
 
-table {
-  float: left;
-}
-
 @keyframes fadeIn {
   0% {
     opacity: 0;
@@ -30,15 +26,29 @@ table {
 
 #playlists {
   animation: fadeIn 1s;
+
+  table {
+    thead {
+      th {
+        border-top-width: 0;
+      }
+    }
+
+    &.table-sm {
+      td, th {
+        padding: 8px;
+      }
+    }
+  }
 }
 
 #playlistsHeader {
   display: flex;
   flex-direction: row-reverse;
+  gap: 20px;
 
   .progress {
     flex-grow: 1;
-    margin: 20px 20px 20px 0;
     height: 30px;
 
     .progress-bar {
@@ -54,6 +64,12 @@ table {
   }
 }
 
+#playlistsFooter {
+  display: flex;
+  flex-direction: row-reverse;
+  gap: 20px;
+}
+
 @keyframes spinner {
   to {transform: rotate(360deg);}
 }
diff --git a/src/App.tsx b/src/App.tsx
index cce88124..e756ac48 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -32,7 +32,7 @@ function App() {
           <FontAwesomeIcon icon={['fab', 'spotify']} color="#84BD00" size="sm" /> <a href={process.env.PUBLIC_URL}>Exportify</a>
         </h1>
 
-        <p id="subtitle" className="lead">
+        <p id="subtitle" className="lead text-secondary">
           Export your Spotify playlists.
         </p>
       </header>
diff --git a/src/components/Login.jsx b/src/components/Login.jsx
index 745a5c70..778d6933 100644
--- a/src/components/Login.jsx
+++ b/src/components/Login.jsx
@@ -6,7 +6,7 @@ import { authorize } from "helpers"
 class Login extends React.Component {
   render() {
     return (
-      <Button id="loginButton" type="submit" bsSize="large" onClick={authorize}>
+      <Button id="loginButton" type="submit" variant="outline-secondary" size="lg" onClick={authorize}>
         <FontAwesomeIcon icon={['far', 'check-circle']} size="sm" /> Get Started
       </Button>
     )
diff --git a/src/components/Paginator.jsx b/src/components/Paginator.jsx
index c111cad8..134c91c9 100644
--- a/src/components/Paginator.jsx
+++ b/src/components/Paginator.jsx
@@ -22,15 +22,15 @@ class Paginator extends React.Component {
       return (
         <nav className="paginator text-right">
           <ul className="pagination pagination-sm">
-            <li className={this.props.prevURL == null ? 'disabled' : ''}>
+            <li className={this.props.prevURL == null ? 'page-item disabled' : 'page-item'}>
               { /* eslint-disable-next-line  */ }
-              <a href="#" aria-label="Previous" onClick={this.prevClick}>
+              <a className="page-link" href="#" aria-label="Previous" onClick={this.prevClick}>
                 <span aria-hidden="true">&laquo;</span>
               </a>
             </li>
-            <li className={this.props.nextURL == null ? 'disabled' : ''}>
+            <li className={this.props.nextURL == null ? 'page-item disabled' : 'page-item'}>
               { /* eslint-disable-next-line  */ }
-              <a href="#" aria-label="Next" onClick={this.nextClick}>
+              <a className="page-link" href="#" aria-label="Next" onClick={this.nextClick}>
                 <span aria-hidden="true">&raquo;</span>
               </a>
             </li>
diff --git a/src/components/PlaylistRow.jsx b/src/components/PlaylistRow.jsx
index e080f094..81066b3c 100644
--- a/src/components/PlaylistRow.jsx
+++ b/src/components/PlaylistRow.jsx
@@ -1,4 +1,5 @@
 import React from "react"
+import { Button } from "react-bootstrap"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 
 import { apiCallErrorHandler } from "helpers"
@@ -47,7 +48,11 @@ class PlaylistRow extends React.Component {
         <td>{playlist.tracks.total}</td>
         <td>{this.renderTickCross(playlist.public)}</td>
         <td>{this.renderTickCross(playlist.collaborative)}</td>
-        <td className="text-right"><button className="btn btn-default btn-xs btn-success" type="submit" onClick={this.exportPlaylist}><span className="glyphicon glyphicon-save"></span> Export</button></td>
+        <td className="text-right">
+          <Button type="submit" variant="primary" size="xs" onClick={this.exportPlaylist} className="text-nowrap">
+            <FontAwesomeIcon icon={['fas', 'download']} size="sm" /> Export
+          </Button>
+        </td>
       </tr>
     );
   }
diff --git a/src/components/PlaylistTable.jsx b/src/components/PlaylistTable.jsx
index 8cbd1855..d0a02c3e 100644
--- a/src/components/PlaylistTable.jsx
+++ b/src/components/PlaylistTable.jsx
@@ -119,7 +119,7 @@ class PlaylistTable extends React.Component {
   }
 
   render() {
-    const progressBar = <ProgressBar striped active={this.state.progressBar.value < this.state.playlistCount} now={this.state.progressBar.value} max={this.state.playlistCount} label={this.state.progressBar.label} />
+    const progressBar = <ProgressBar striped variant="primary" animated={this.state.progressBar.value < this.state.playlistCount} now={this.state.progressBar.value} max={this.state.playlistCount} label={this.state.progressBar.label} />
 
     if (this.state.playlistCount > 0) {
       return (
@@ -128,7 +128,7 @@ class PlaylistTable extends React.Component {
             <Paginator nextURL={this.state.nextURL} prevURL={this.state.prevURL} loadPlaylists={this.loadPlaylists}/>
             {this.state.progressBar.show && progressBar}
           </div>
-          <table className="table table-hover">
+          <table className="table table-hover table-sm">
             <thead>
               <tr>
                 <th style={{width: "30px"}}></th>
@@ -154,7 +154,9 @@ class PlaylistTable extends React.Component {
               })}
             </tbody>
           </table>
-          <Paginator nextURL={this.state.nextURL} prevURL={this.state.prevURL} loadPlaylists={this.loadPlaylists}/>
+          <div id="playlistsFooter">
+            <Paginator nextURL={this.state.nextURL} prevURL={this.state.prevURL} loadPlaylists={this.loadPlaylists}/>
+          </div>
         </div>
       );
     } else {
diff --git a/src/components/PlaylistsExporter.jsx b/src/components/PlaylistsExporter.jsx
index e5bcc52e..6fa1bb88 100644
--- a/src/components/PlaylistsExporter.jsx
+++ b/src/components/PlaylistsExporter.jsx
@@ -1,4 +1,5 @@
 import React from "react"
+import { Button } from "react-bootstrap"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { saveAs } from "file-saver"
 import JSZip from "jszip"
@@ -70,9 +71,9 @@ class PlaylistsExporter extends React.Component {
   }
 
   render() {
-    return <button className="btn btn-default btn-xs" type="submit" onClick={this.exportPlaylists}>
-      <span className="fa fa-file-archive"></span><FontAwesomeIcon icon={['far', 'file-archive']}/> Export All
-    </button>
+    return <Button type="submit" variant="outline-secondary" size="xs" onClick={this.exportPlaylists} className="text-nowrap">
+      <FontAwesomeIcon icon={['far', 'file-archive']}/> Export All
+    </Button>
   }
 }
 
diff --git a/src/components/__snapshots__/PlaylistTable.test.jsx.snap b/src/components/__snapshots__/PlaylistTable.test.jsx.snap
index 21118b0a..2bdc0376 100644
--- a/src/components/__snapshots__/PlaylistTable.test.jsx.snap
+++ b/src/components/__snapshots__/PlaylistTable.test.jsx.snap
@@ -14,10 +14,11 @@ exports[`playlist loading 1`] = `
         className="pagination pagination-sm"
       >
         <li
-          className="disabled"
+          className="page-item disabled"
         >
           <a
             aria-label="Previous"
+            className="page-link"
             href="#"
             onClick={[Function]}
           >
@@ -29,10 +30,11 @@ exports[`playlist loading 1`] = `
           </a>
         </li>
         <li
-          className=""
+          className="page-item"
         >
           <a
             aria-label="Next"
+            className="page-link"
             href="#"
             onClick={[Function]}
           >
@@ -47,7 +49,7 @@ exports[`playlist loading 1`] = `
     </nav>
   </div>
   <table
-    className="table table-hover"
+    className="table table-hover table-sm"
   >
     <thead>
       <tr>
@@ -106,13 +108,11 @@ exports[`playlist loading 1`] = `
           }
         >
           <button
-            className="btn btn-default btn-xs"
+            className="text-nowrap btn btn-outline-secondary btn-xs"
+            disabled={false}
             onClick={[Function]}
             type="submit"
           >
-            <span
-              className="fa fa-file-archive"
-            />
             <svg
               aria-hidden="true"
               className="svg-inline--fa fa-file-archive fa-w-12 "
@@ -227,13 +227,28 @@ exports[`playlist loading 1`] = `
           className="text-right"
         >
           <button
-            className="btn btn-default btn-xs btn-success"
+            className="text-nowrap btn btn-primary btn-xs"
+            disabled={false}
             onClick={[Function]}
             type="submit"
           >
-            <span
-              className="glyphicon glyphicon-save"
-            />
+            <svg
+              aria-hidden="true"
+              className="svg-inline--fa fa-download fa-w-16 fa-sm "
+              data-icon="download"
+              data-prefix="fas"
+              focusable="false"
+              role="img"
+              style={Object {}}
+              viewBox="0 0 512 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M216 0h80c13.3 0 24 10.7 24 24v168h87.7c17.8 0 26.7 21.5 14.1 34.1L269.7 378.3c-7.5 7.5-19.8 7.5-27.3 0L90.1 226.1c-12.6-12.6-3.7-34.1 14.1-34.1H192V24c0-13.3 10.7-24 24-24zm296 376v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h146.7l49 49c20.1 20.1 52.5 20.1 72.6 0l49-49H488c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"
+                fill="currentColor"
+                style={Object {}}
+              />
+            </svg>
              Export
           </button>
         </td>
@@ -325,56 +340,77 @@ exports[`playlist loading 1`] = `
           className="text-right"
         >
           <button
-            className="btn btn-default btn-xs btn-success"
+            className="text-nowrap btn btn-primary btn-xs"
+            disabled={false}
             onClick={[Function]}
             type="submit"
           >
-            <span
-              className="glyphicon glyphicon-save"
-            />
+            <svg
+              aria-hidden="true"
+              className="svg-inline--fa fa-download fa-w-16 fa-sm "
+              data-icon="download"
+              data-prefix="fas"
+              focusable="false"
+              role="img"
+              style={Object {}}
+              viewBox="0 0 512 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M216 0h80c13.3 0 24 10.7 24 24v168h87.7c17.8 0 26.7 21.5 14.1 34.1L269.7 378.3c-7.5 7.5-19.8 7.5-27.3 0L90.1 226.1c-12.6-12.6-3.7-34.1 14.1-34.1H192V24c0-13.3 10.7-24 24-24zm296 376v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h146.7l49 49c20.1 20.1 52.5 20.1 72.6 0l49-49H488c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"
+                fill="currentColor"
+                style={Object {}}
+              />
+            </svg>
              Export
           </button>
         </td>
       </tr>
     </tbody>
   </table>
-  <nav
-    className="paginator text-right"
+  <div
+    id="playlistsFooter"
   >
-    <ul
-      className="pagination pagination-sm"
+    <nav
+      className="paginator text-right"
     >
-      <li
-        className="disabled"
+      <ul
+        className="pagination pagination-sm"
       >
-        <a
-          aria-label="Previous"
-          href="#"
-          onClick={[Function]}
+        <li
+          className="page-item disabled"
         >
-          <span
-            aria-hidden="true"
+          <a
+            aria-label="Previous"
+            className="page-link"
+            href="#"
+            onClick={[Function]}
           >
-            «
-          </span>
-        </a>
-      </li>
-      <li
-        className=""
-      >
-        <a
-          aria-label="Next"
-          href="#"
-          onClick={[Function]}
+            <span
+              aria-hidden="true"
+            >
+              «
+            </span>
+          </a>
+        </li>
+        <li
+          className="page-item"
         >
-          <span
-            aria-hidden="true"
+          <a
+            aria-label="Next"
+            className="page-link"
+            href="#"
+            onClick={[Function]}
           >
-            »
-          </span>
-        </a>
-      </li>
-    </ul>
-  </nav>
+            <span
+              aria-hidden="true"
+            >
+              »
+            </span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
 </div>
 `;
diff --git a/src/icons.jsx b/src/icons.jsx
index ad719b13..35665912 100644
--- a/src/icons.jsx
+++ b/src/icons.jsx
@@ -1,6 +1,6 @@
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { fab } from '@fortawesome/free-brands-svg-icons'
 import { faCheckCircle, faTimesCircle, faFileArchive, faHeart } from '@fortawesome/free-regular-svg-icons'
-import { faBolt, faMusic } from '@fortawesome/free-solid-svg-icons'
+import { faBolt, faMusic, faDownload } from '@fortawesome/free-solid-svg-icons'
 
-library.add(fab, faCheckCircle, faTimesCircle, faFileArchive, faHeart, faBolt, faMusic)
+library.add(fab, faCheckCircle, faTimesCircle, faFileArchive, faHeart, faBolt, faMusic, faDownload)
diff --git a/src/index.scss b/src/index.scss
index cbd46a7a..7805bb67 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -1 +1,20 @@
-@import "bootstrap";
+// Bootstrap variables
+$link-color: #337ab7;
+$primary: #5cb85c;
+$table-hover-bg: rgba(#000, .025);
+$btn-transition: none;
+$body-color: #191414;
+$input-btn-focus-box-shadow: none;
+
+@import "~bootstrap/scss/bootstrap";
+
+
+// Small button styles
+$btn-padding-x-xs:  .35rem !default;
+$btn-padding-y-xs:  .12rem !default;
+$input-btn-line-height-xs: 1.3 !default;
+
+.btn.btn-xs {
+   // line-height: ensure proper height of button next to small input
+   @include button-size($btn-padding-y-xs, $btn-padding-x-xs, $font-size-sm, $input-btn-line-height-xs, $btn-border-radius-sm);
+}
diff --git a/yarn.lock b/yarn.lock
index c46f0429..0800b3f2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -955,14 +955,6 @@
     "@babel/helper-plugin-utils" "^7.10.4"
     "@babel/plugin-transform-typescript" "^7.12.1"
 
-"@babel/runtime-corejs2@^7.0.0":
-  version "7.12.5"
-  resolved "https://registry.yarnpkg.com/@babel/runtime-corejs2/-/runtime-corejs2-7.12.5.tgz#382ec38f0826365e96118e28b81249c1c61bace3"
-  integrity sha512-kt5YpZ7F5A05LOgQuaMXXmcxakK/qttf5C/E1BJPA3Kf5PanbjPzDoXN+PIslUnjUxpuKblCsXyP0QfMiqyKqA==
-  dependencies:
-    core-js "^2.6.5"
-    regenerator-runtime "^0.13.4"
-
 "@babel/runtime-corejs3@^7.10.2":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/runtime-corejs3/-/runtime-corejs3-7.12.1.tgz#51b9092befbeeed938335a109dbe0df51451e9dc"
@@ -978,7 +970,7 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.3", "@babel/runtime@^7.12.1", "@babel/runtime@^7.6.3", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.10.3", "@babel/runtime@^7.12.1", "@babel/runtime@^7.4.2", "@babel/runtime@^7.6.3", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   version "7.12.5"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.12.5.tgz#410e7e487441e1b360c29be715d870d9b985882e"
   integrity sha512-plcc+hbExy3McchJCEQG3knOsuh3HH+Prx1P6cLIkET/0dLuQDEnrT+s27Axgc9bqfsmNUNHfscgMUdBpC9xfg==
@@ -1425,6 +1417,24 @@
     schema-utils "^2.6.5"
     source-map "^0.7.3"
 
+"@popperjs/core@^2.5.3":
+  version "2.5.4"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.5.4.tgz#de25b5da9f727985a3757fd59b5d028aba75841a"
+  integrity sha512-ZpKr+WTb8zsajqgDkvCEWgp6d5eJT6Q63Ng2neTbzBO76Lbe91vX/iVIW9dikq+Fs3yEo+ls4cxeXABD2LtcbQ==
+
+"@restart/context@^2.1.4":
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/@restart/context/-/context-2.1.4.tgz#a99d87c299a34c28bd85bb489cb07bfd23149c02"
+  integrity sha512-INJYZQJP7g+IoDUh/475NlGiTeMfwTXUEr3tmRneckHIxNolGOW9CTq83S8cxq0CgJwwcMzMJFchxvlwe7Rk8Q==
+
+"@restart/hooks@^0.3.21", "@restart/hooks@^0.3.25":
+  version "0.3.25"
+  resolved "https://registry.yarnpkg.com/@restart/hooks/-/hooks-0.3.25.tgz#11004139ad1c70d2f5965a8939dcb5aeb96aa652"
+  integrity sha512-m2v3N5pxTsIiSH74/sb1yW8D9RxkJidGW+5Mfwn/lHb2QzhZNlaU1su7abSyT9EGf0xS/0waLjrf7/XxQHUk7w==
+  dependencies:
+    lodash "^4.17.15"
+    lodash-es "^4.17.15"
+
 "@rollup/plugin-node-resolve@^7.1.1":
   version "7.1.3"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-node-resolve/-/plugin-node-resolve-7.1.3.tgz#80de384edfbd7bfc9101164910f86078151a3eca"
@@ -1664,6 +1674,11 @@
   dependencies:
     "@babel/types" "^7.3.0"
 
+"@types/classnames@^2.2.10":
+  version "2.2.11"
+  resolved "https://registry.yarnpkg.com/@types/classnames/-/classnames-2.2.11.tgz#2521cc86f69d15c5b90664e4829d84566052c1cf"
+  integrity sha512-2koNhpWm3DgWRp5tpkiJ8JGc1xTn2q0l+jUNUE7oMKXUf5NpI9AIdC4kbjGNFBdHtcxBD18LAksoudAVhFKCjw==
+
 "@types/cookie@^0.4.0":
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/@types/cookie/-/cookie-0.4.0.tgz#14f854c0f93d326e39da6e3b6f34f7d37513d108"
@@ -1707,6 +1722,11 @@
   resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz#3c9ee980f1a10d6021ae6632ca3e79ca2ec4fb50"
   integrity sha512-giAlZwstKbmvMk1OO7WXSj4OZ0keXAcl2TQq4LWHiiPH2ByaH7WeUzng+Qej8UPxxv+8lRTuouo0iaNDBuzIBA==
 
+"@types/invariant@^2.2.33":
+  version "2.2.34"
+  resolved "https://registry.yarnpkg.com/@types/invariant/-/invariant-2.2.34.tgz#05e4f79f465c2007884374d4795452f995720bbe"
+  integrity sha512-lYUtmJ9BqUN688fGY1U1HZoWT1/Jrmgigx2loq4ZcJpICECm/Om3V314BxdzypO0u5PORKGMM6x0OXaljV1YFg==
+
 "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0", "@types/istanbul-lib-coverage@^2.0.1":
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.3.tgz#4ba8ddb720221f432e443bd5f9117fd22cfd4762"
@@ -1774,7 +1794,7 @@
   resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.1.5.tgz#b6ab3bba29e16b821d84e09ecfaded462b816b00"
   integrity sha512-UEyp8LwZ4Dg30kVU2Q3amHHyTn1jEdhCIE59ANed76GaT1Vp76DD3ZWSAxgCrw6wJ0TqeoBpqmfUHiUDPs//HQ==
 
-"@types/prop-types@*":
+"@types/prop-types@*", "@types/prop-types@^15.7.3":
   version "15.7.3"
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7"
   integrity sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==
@@ -1798,7 +1818,14 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@^16.9.11", "@types/react@^16.9.53":
+"@types/react-transition-group@^4.4.0":
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.0.tgz#882839db465df1320e4753e6e9f70ca7e9b4d46d"
+  integrity sha512-/QfLHGpu+2fQOqQaXh8MG9q03bFENooTb/it4jr5kKaZlDQfWvjqWZg48AwzPVMBHlRuTRAY7hRHCEOXz5kV6w==
+  dependencies:
+    "@types/react" "*"
+
+"@types/react@*", "@types/react@^16.9.53":
   version "16.9.55"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.55.tgz#47078587f5bfe028a23b6b46c7b94ac0d436acff"
   integrity sha512-6KLe6lkILeRwyyy7yG9rULKJ0sXplUsl98MGoCfpteXf9sPWFWWMknDcsvubcpaTdBuxtsLF6HDUwdApZL/xIg==
@@ -1806,6 +1833,14 @@
     "@types/prop-types" "*"
     csstype "^3.0.2"
 
+"@types/react@^16.9.11", "@types/react@^16.9.35":
+  version "16.9.56"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.56.tgz#ea25847b53c5bec064933095fc366b1462e2adf0"
+  integrity sha512-gIkl4J44G/qxbuC6r2Xh+D3CGZpJ+NdWTItAPmZbR5mUS+JQ8Zvzpl0ea5qT/ZT3ZNTUcDKUVqV3xBE8wv/DyQ==
+  dependencies:
+    "@types/prop-types" "*"
+    csstype "^3.0.2"
+
 "@types/resolve@0.0.8":
   version "0.0.8"
   resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-0.0.8.tgz#f26074d238e02659e323ce1a13d041eee280e194"
@@ -1842,6 +1877,11 @@
   dependencies:
     source-map "^0.6.1"
 
+"@types/warning@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/warning/-/warning-3.0.0.tgz#0d2501268ad8f9962b740d387c4654f5f8e23e52"
+  integrity sha1-DSUBJorY+ZYrdA04fEZU9fjiPlI=
+
 "@types/webpack-sources@*":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/@types/webpack-sources/-/webpack-sources-2.0.0.tgz#08216ab9be2be2e1499beaebc4d469cec81e82a7"
@@ -2839,10 +2879,10 @@ boolbase@^1.0.0, boolbase@~1.0.0:
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
   integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
 
-bootstrap@3.3.7:
-  version "3.3.7"
-  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-3.3.7.tgz#5a389394549f23330875a3b150656574f8a9eb71"
-  integrity sha1-WjiTlFSfIzMIdaOxUGVldPip63E=
+bootstrap@^4.5.3:
+  version "4.5.3"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.5.3.tgz#c6a72b355aaf323920be800246a6e4ef30997fe6"
+  integrity sha512-o9ppKQioXGqhw8Z7mah6KdTYpNQY//tipnkxppWhPbiSWdD+1raYsnhwEZjkTHYbGee4cVQ0Rx65EhOY/HNLcQ==
 
 bottleneck@^2.19.5:
   version "2.19.5"
@@ -3308,7 +3348,7 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
-classnames@^2.2.5:
+classnames@^2.2.6:
   version "2.2.6"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
   integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
@@ -3634,7 +3674,7 @@ core-js-pure@^3.0.0:
   resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.6.5.tgz#c79e75f5e38dbc85a662d91eea52b8256d53b813"
   integrity sha512-lacdXOimsiD0QyNf9BC/mxivNJ/ybBGJXQFKzRekp1WTHoVUWsUHEn+2T8GJAzzIhyOuXA+gOxCVN3l+5PLPUA==
 
-core-js@^2.4.0, core-js@^2.6.5:
+core-js@^2.4.0:
   version "2.6.11"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.11.tgz#38831469f9922bded8ee21c9dc46985e0399308c"
   integrity sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg==
@@ -3987,9 +4027,9 @@ cssstyle@^2.2.0:
     cssom "~0.3.6"
 
 csstype@^3.0.2:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.4.tgz#b156d7be03b84ff425c9a0a4b1e5f4da9c5ca888"
-  integrity sha512-xc8DUsCLmjvCfoD7LTGE0ou2MIWLx0K9RCZwSHMOdynqRsP4MtUcLeqh1HcQ2dInwDTqn+3CE0/FZh1et+p4jA==
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.5.tgz#7fdec6a28a67ae18647c51668a9ff95bb2fa7bb8"
+  integrity sha512-uVDi8LpBUKQj6sdxNaTetL6FpeCqTjOvAQuQUa/qAqq8oOd4ivkbhgnqayl0dnPal8Tb/yB1tF+gOvCBiicaiQ==
 
 currently-unhandled@^0.4.1:
   version "0.4.1"
@@ -4271,12 +4311,13 @@ dom-converter@^0.2:
   dependencies:
     utila "~0.4"
 
-dom-helpers@^3.2.0, dom-helpers@^3.2.1, dom-helpers@^3.4.0:
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.4.0.tgz#e9b369700f959f62ecde5a6babde4bccd9169af8"
-  integrity sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==
+dom-helpers@^5.0.1, dom-helpers@^5.1.2, dom-helpers@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.0.tgz#57fd054c5f8f34c52a3eeffdb7e7e93cd357d95b"
+  integrity sha512-Ru5o9+V8CpunKnz5LGgWXkmrH/20cGKwcHwS4m73zIvs54CN9epEmT/HLqFJW3kXpakAFkEdzgy1hzlJe3E4OQ==
   dependencies:
-    "@babel/runtime" "^7.1.2"
+    "@babel/runtime" "^7.8.7"
+    csstype "^3.0.2"
 
 dom-serializer@0:
   version "0.2.2"
@@ -7120,11 +7161,6 @@ jszip@^3.5.0:
     readable-stream "~2.3.6"
     set-immediate-shim "~1.0.1"
 
-keycode@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/keycode/-/keycode-2.2.0.tgz#3d0af56dc7b8b8e5cba8d0a97f107204eec22b04"
-  integrity sha1-PQr1bce4uOXLqNCpfxByBO7CKwQ=
-
 killable@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/killable/-/killable-1.0.1.tgz#4c8ce441187a061c7474fb87ca08e2a638194892"
@@ -7313,6 +7349,11 @@ locate-path@^5.0.0:
   dependencies:
     p-locate "^4.1.0"
 
+lodash-es@^4.17.15:
+  version "4.17.15"
+  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.15.tgz#21bd96839354412f23d7a10340e5eac6ee455d78"
+  integrity sha512-rlrc3yU3+JNOpZ9zj5pQtxnx2THmvRykwL4Xlxoa8I9lHBlVbbyPhgyPMioxVZ4NqyxaVVtaJnzsyOidQIhyyQ==
+
 lodash._reinterpolate@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
@@ -9380,7 +9421,7 @@ prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.4"
 
-prop-types-extra@^1.0.1:
+prop-types-extra@^1.1.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/prop-types-extra/-/prop-types-extra-1.1.1.tgz#58c3b74cbfbb95d304625975aa2f0848329a010b"
   integrity sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==
@@ -9388,7 +9429,7 @@ prop-types-extra@^1.0.1:
     react-is "^16.3.2"
     warning "^4.0.0"
 
-prop-types@^15.5.10, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -9559,23 +9600,29 @@ react-app-polyfill@^2.0.0:
     regenerator-runtime "^0.13.7"
     whatwg-fetch "^3.4.1"
 
-react-bootstrap@0.33.1:
-  version "0.33.1"
-  resolved "https://registry.yarnpkg.com/react-bootstrap/-/react-bootstrap-0.33.1.tgz#e072592aa143b9792526281272eca754bc9a4940"
-  integrity sha512-qWTRravSds87P8WC82tETy2yIso8qDqlIm0czsrduCaYAFtHuyLu0XDbUlfLXeRzqgwm5sRk2wRaTNoiVkk/YQ==
-  dependencies:
-    "@babel/runtime-corejs2" "^7.0.0"
-    classnames "^2.2.5"
-    dom-helpers "^3.2.0"
+react-bootstrap@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/react-bootstrap/-/react-bootstrap-1.4.0.tgz#806a8b48b065cedfb28c6c5c7b0c0e3c3b53445d"
+  integrity sha512-0BMzgeUAxH126v7VYDzIXbHxQVHSnniPVKpz9fblumdQpWaiElMnnzk+u8h8DoELX0nCXwPlcUzgXqmpncdc2Q==
+  dependencies:
+    "@babel/runtime" "^7.4.2"
+    "@restart/context" "^2.1.4"
+    "@restart/hooks" "^0.3.21"
+    "@types/classnames" "^2.2.10"
+    "@types/invariant" "^2.2.33"
+    "@types/prop-types" "^15.7.3"
+    "@types/react" "^16.9.35"
+    "@types/react-transition-group" "^4.4.0"
+    "@types/warning" "^3.0.0"
+    classnames "^2.2.6"
+    dom-helpers "^5.1.2"
     invariant "^2.2.4"
-    keycode "^2.2.0"
-    prop-types "^15.6.1"
-    prop-types-extra "^1.0.1"
-    react-overlays "^0.9.0"
-    react-prop-types "^0.4.0"
-    react-transition-group "^2.0.0"
-    uncontrollable "^7.0.2"
-    warning "^3.0.0"
+    prop-types "^15.7.2"
+    prop-types-extra "^1.1.0"
+    react-overlays "^4.1.0"
+    react-transition-group "^4.4.1"
+    uncontrollable "^7.0.0"
+    warning "^4.0.3"
 
 react-dev-utils@^11.0.0:
   version "11.0.0"
@@ -9636,24 +9683,19 @@ react-lifecycles-compat@^3.0.4:
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
-react-overlays@^0.9.0:
-  version "0.9.2"
-  resolved "https://registry.yarnpkg.com/react-overlays/-/react-overlays-0.9.2.tgz#51ab1c62ded5af4d279bd3b943999531bbd648da"
-  integrity sha512-wOi+WqO0acnUAMCbTTW06/GRkYjHdlvIoyX4bYkLvxKrLgl2kX9WzFVyBdwukl2jvN7I7oX7ZXAz7MNOWYdgCA==
-  dependencies:
-    classnames "^2.2.5"
-    dom-helpers "^3.2.1"
-    prop-types "^15.5.10"
-    prop-types-extra "^1.0.1"
-    react-transition-group "^2.2.1"
-    warning "^3.0.0"
-
-react-prop-types@^0.4.0:
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/react-prop-types/-/react-prop-types-0.4.0.tgz#f99b0bfb4006929c9af2051e7c1414a5c75b93d0"
-  integrity sha1-+ZsL+0AGkpya8gUefBQUpcdbk9A=
+react-overlays@^4.1.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/react-overlays/-/react-overlays-4.1.1.tgz#0060107cbe1c5171a744ccda3fbf0556d064bc5f"
+  integrity sha512-WtJifh081e6M24KnvTQoNjQEpz7HoLxqt8TwZM7LOYIkYJ8i/Ly1Xi7RVte87ZVnmqQ4PFaFiNHZhSINPSpdBQ==
   dependencies:
-    warning "^3.0.0"
+    "@babel/runtime" "^7.12.1"
+    "@popperjs/core" "^2.5.3"
+    "@restart/hooks" "^0.3.25"
+    "@types/warning" "^3.0.0"
+    dom-helpers "^5.2.0"
+    prop-types "^15.7.2"
+    uncontrollable "^7.0.0"
+    warning "^4.0.3"
 
 react-refresh@^0.8.3:
   version "0.8.3"
@@ -9743,15 +9785,15 @@ react-test-renderer@^17.0.1:
     react-shallow-renderer "^16.13.1"
     scheduler "^0.20.1"
 
-react-transition-group@^2.0.0, react-transition-group@^2.2.1:
-  version "2.9.0"
-  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.9.0.tgz#df9cdb025796211151a436c69a8f3b97b5b07c8d"
-  integrity sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==
+react-transition-group@^4.4.1:
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.1.tgz#63868f9325a38ea5ee9535d828327f85773345c9"
+  integrity sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==
   dependencies:
-    dom-helpers "^3.4.0"
+    "@babel/runtime" "^7.5.5"
+    dom-helpers "^5.0.1"
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
-    react-lifecycles-compat "^3.0.4"
 
 react@^17.0.1:
   version "17.0.1"
@@ -11527,7 +11569,7 @@ typescript@^4.0.3:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.0.5.tgz#ae9dddfd1069f1cb5beb3ef3b2170dd7c1332389"
   integrity sha512-ywmr/VrTVCmNTJ6iV2LwIrfG1P+lv6luD8sUJs+2eI9NLGigaN+nUQc13iHqisq7bra9lnmUSYqbJvegraBOPQ==
 
-uncontrollable@^7.0.2:
+uncontrollable@^7.0.0:
   version "7.1.1"
   resolved "https://registry.yarnpkg.com/uncontrollable/-/uncontrollable-7.1.1.tgz#f67fed3ef93637126571809746323a9db815d556"
   integrity sha512-EcPYhot3uWTS3w00R32R2+vS8Vr53tttrvMj/yA1uYRhf8hbTG2GyugGqWDY0qIskxn0uTTojVd6wPYW9ZEf8Q==
@@ -11805,14 +11847,7 @@ walker@^1.0.7, walker@~1.0.5:
   dependencies:
     makeerror "1.0.x"
 
-warning@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/warning/-/warning-3.0.0.tgz#32e5377cb572de4ab04753bdf8821c01ed605b7c"
-  integrity sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=
-  dependencies:
-    loose-envify "^1.0.0"
-
-warning@^4.0.0:
+warning@^4.0.0, warning@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
   integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==