watsonbox · Nov 19, 2020 · Nov 18, 2020
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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)