Remove unused classnames

packages/app/app/components/LibraryView/index.js

@@ -6,7 +6,7 @@ import { LIST_TYPE } from '@nuclear/ui/lib/components/LibraryListTypeToggle';
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 import EmptyState from './EmptyState';
-import trackRowStyles from '../TrackRow/styles.scss';
+import * as trackRowStyles from '../TrackRow/styles.scss';
 import * as styles from './index.scss';
 import NoSearchResults from './NoSearchResults';
 import LibrarySimpleList from './LibrarySimpleList';

packages/app/app/components/PlaylistsSubMenu/index.js

@@ -4,7 +4,7 @@ import FontAwesome from 'react-fontawesome';
 import { NavLink } from 'react-router-dom';
 import _ from 'lodash';
 
-import appStyles from '../../styles.scss';
+import * as appStyles from '../../styles.scss';
 import * as styles from './styles.scss';
 
 const PlaylistsSubMenu = props => {

packages/app/app/components/SearchResults/TracksResults/index.js

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 
 import TrackRow from '../../TrackRow';
 
-import trackRowStyles from '../../TrackRow/styles.scss';
+import * as trackRowStyles from '../../TrackRow/styles.scss';
 
 const TracksResults = ({ tracks, limit }) => {
   const { t } = useTranslation('search');

packages/app/app/components/TagView/index.js

@@ -93,7 +93,7 @@ class TagView extends React.Component {
         <Dimmer.Dimmable>
           {this.renderDimmer()}
           {typeof tags[tag] === 'undefined' || tags[tag].loading ? null : (
-            <div className={styles.tag_view}>
+            <div>
               {this.renderTagHeader(tagInfo, topArtists)}
               <TagDescription tagInfo={tagInfo} />
               {this.renderTopArtistsAndTopAlbums(topArtists, topAlbums)}

packages/app/app/components/TrackRow/index.js

@@ -20,7 +20,7 @@ class TrackRow extends React.Component {
   // this function should be moved onto interface for 'track'
   renderAlbum(track) {
     return (
-      <td className={styles.track_album}>
+      <td>
         {track.album}
       </td>
     );
@@ -99,11 +99,11 @@ class TrackRow extends React.Component {
           </td>
         }
         {displayTrackNumber && <td className={styles.track_number}>{track.position}</td>}
-        {displayArtist && <td className={styles.track_artist}>{track.artist.name}</td>}
-        <td className={styles.track_name}>{track.name}</td>
+        {displayArtist && <td>{track.artist.name}</td>}
+        <td>{track.name}</td>
         {displayAlbum && this.renderAlbum(track)}
         {displayDuration && this.renderDuration(track)}
-        {displayPlayCount && <td className={styles.playcount}>{numeral(track.playcount).format('0,0')}</td>}
+        {displayPlayCount && <td>{numeral(track.playcount).format('0,0')}</td>}
       </tr>
     );
   }

packages/ui/lib/components/CommandPalette/CommandPaletteAction/index.tsx

@@ -45,7 +45,7 @@ export const CommandPaletteAction: React.FC<CommandPaletteActionProps> = ({
     <div className={styles.action_right}>
       {
         shortcut && shortcut.length > 0 && 
-        <kbd className={styles.shortcut}>{shortcut}</kbd>
+        <kbd>{shortcut}</kbd>
       }
     </div>
   </button>;

packages/ui/lib/components/Playlists/Cells/ModificationDateCell.tsx

@@ -17,19 +17,18 @@ const ModificationDateCell: React.FC<CellProps<Playlist> & PlaylistsStrings & Pl
   serverModifiedAt  
 }) => <td
   {...cell.getCellProps() as TdHTMLAttributes<HTMLTableCellElement>}
-  className={styles.modification_date_cell}
 >
   <div className={styles.modification_date_cell_content}>
     <div className={styles.modified_dates}>
-      <div className={styles.modified_at_row}>
+      <div>
         {modifiedAt}
         {
           value?.lastModified
             ? timestampToDateString(value.lastModified, locale)
             : neverModified
         }
       </div>
-      <div className={styles.modified_at_row}>
+      <div>
         {serverModifiedAt}
         {
           value?.serverModified

packages/ui/lib/components/Playlists/Cells/TitleCell.tsx

@@ -10,7 +10,6 @@ const TitleCell: React.FC<CellProps<Playlist>> =({
   value
 }) => <td
   {...cell.getCellProps() as TdHTMLAttributes<HTMLTableCellElement>}
-  className={styles.title_cell}
 >
   {value}
 </td>;

packages/ui/lib/components/Playlists/index.tsx

@@ -115,7 +115,6 @@ const Playlists: React.FC<PlaylistsProps> = ({
                     {(provided, snapshot) => (
                       <tr
                         ref={provided.innerRef}
-                        className={cx({ [styles.is_dragging]: snapshot.isDragging })}
                         onClick={() => extra.onPlaylistClick(row.original.id)}
                         {...row.getRowProps() as TableHTMLAttributes<HTMLTableRowElement>}
                         {...provided.draggableProps}

packages/ui/lib/components/PopupDropdown/index.tsx

@@ -3,7 +3,7 @@ import cx from 'classnames';
 import { Dropdown as SemanticDropdown, DropdownProps } from 'semantic-ui-react';
 
 import Dropdown from '../Dropdown';
-import popupButtonStyles from '../PopupButton/styles.scss';
+import * as popupButtonStyles from '../PopupButton/styles.scss';
 import './styles.scss';
 
 export type PopupDropdownProps = {

packages/ui/lib/components/PromotedArtist/index.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import cx from 'classnames';
 import { Icon } from 'semantic-ui-react';
 import Button from '../Button';
 
@@ -52,7 +51,7 @@ const PromotedArtist: React.FC<PromotedArtistProps> = ({
           Check out 
         </Button>
         <Button 
-          className={cx(styles.promoted_artist_button, styles.external_link)}
+          className={styles.promoted_artist_button}
           text
           onClick={onExternalUrlClick}
         >

packages/ui/lib/components/TrackRow/index.tsx

@@ -80,20 +80,20 @@ const TrackRow: React.FC<TrackRowProps> = ({
     }
     {
       displayArtist &&
-      <td className={styles.track_row_artist}>
+      <td>
         { 
           _.isString(track.artist) 
             ? track.artist
             : track.artist.name 
         }
       </td>
     }
-    <td className={styles.track_row_name}>
+    <td>
       { track.title ?? track.name }
     </td>
     {
       displayAlbum &&
-      <td className={styles.track_row_album}>
+      <td>
         { track.album }
       </td>
     }
@@ -105,7 +105,7 @@ const TrackRow: React.FC<TrackRowProps> = ({
     }
     {
       displayPlayCount &&
-      <td className={styles.track_row_playcount}>
+      <td>
         { numeral(track.playcount).format('0,0') }
       </td>
     }

packages/ui/lib/components/UserPluginsItem/index.js

@@ -44,31 +44,30 @@ const UserPluginsItem = ({
         <div className={styles.plugin_name}>
           {name}
         </div>
-        <div className={styles.plugin_path}>
+        <div>
           <label>Installed from:</label>
           <span>{path}</span>
         </div>
-        <div className={styles.plugin_description}>
+        <div>
           {description}
         </div>
 
         <div className={styles.plugin_footer}>
-          <div className={styles.plugin_author}>
+          <div>
             <label>Author:</label>
             <span className={styles.link} onClick={handleAuthorClick}>
               {author}
             </span>
           </div>
           <Button basic inverted icon
-            className={styles.delete_button}
             onClick={handleDelete}
           >
             <Icon name='trash alternate outline' />
             Uninstall
           </Button>
         </div>
 
-        <div className={styles.error_footer}>
+        <div>
           {error &&
           <div className={styles.error_message}>
             This plugin could not be loaded correctly.