Move playlist column widths into stylesheets

#72 (comment) 😅

Author: watsonbox

src/App.scss

@@ -58,6 +58,27 @@
     thead {
       th {
         border-top-width: 0;
+
+        &.icon {
+          width: 30px;
+        }
+
+        &.owner {
+          width: 150px;
+        }
+
+        &.tracks {
+          width: 100px;
+        }
+
+        &.public,
+        &.collaborative {
+          width: 120px;
+        }
+
+        &.export {
+          width: 100px;
+        }
       }
     }
 

src/components/PlaylistTable.jsx

@@ -202,13 +202,13 @@ class PlaylistTable extends React.Component {
             <table className="table table-hover table-sm">
               <thead>
                 <tr>
-                  <th style={{ width: "30px" }}></th>
-                  <th>{this.props.i18n.t("playlist.name")}</th>
-                  <th style={{ width: "150px" }}>{this.props.i18n.t("playlist.owner")}</th>
-                  <th style={{ width: "100px" }} className="d-none d-sm-table-cell">{this.props.i18n.t("playlist.tracks")}</th>
-                  <th style={{ width: "120px" }} className="d-none d-sm-table-cell">{this.props.i18n.t("playlist.public")}</th>
-                  <th style={{ width: "120px" }} className="d-none d-md-table-cell">{this.props.i18n.t("playlist.collaborative")}</th>
-                  <th style={{ width: "100px" }} className="text-end">
+                  <th className="icon"></th>
+                  <th className="name">{this.props.i18n.t("playlist.name")}</th>
+                  <th className="owner">{this.props.i18n.t("playlist.owner")}</th>
+                  <th className="tracks d-none d-sm-table-cell">{this.props.i18n.t("playlist.tracks")}</th>
+                  <th className="public d-none d-sm-table-cell">{this.props.i18n.t("playlist.public")}</th>
+                  <th className="collaborative d-none d-md-table-cell">{this.props.i18n.t("playlist.collaborative")}</th>
+                  <th className="export text-end">
                     <PlaylistsExporter
                       accessToken={this.props.accessToken}
                       onPlaylistsExportDone={this.handlePlaylistsExportDone}

src/components/__snapshots__/PlaylistTable.test.jsx.snap

@@ -115,37 +115,35 @@ exports[`playlist loading 1`] = `
         <thead>
           <tr>
             <th
-              style="width: 30px;"
+              class="icon"
             />
-            <th>
+            <th
+              class="name"
+            >
               Name
             </th>
             <th
-              style="width: 150px;"
+              class="owner"
             >
               Owner
             </th>
             <th
-              class="d-none d-sm-table-cell"
-              style="width: 100px;"
+              class="tracks d-none d-sm-table-cell"
             >
               Tracks
             </th>
             <th
-              class="d-none d-sm-table-cell"
-              style="width: 120px;"
+              class="public d-none d-sm-table-cell"
             >
               Public?
             </th>
             <th
-              class="d-none d-md-table-cell"
-              style="width: 120px;"
+              class="collaborative d-none d-md-table-cell"
             >
               Collaborative?
             </th>
             <th
-              class="text-end"
-              style="width: 100px;"
+              class="export text-end"
             >
               <button
                 class="text-nowrap btn btn-outline-secondary btn-xs"