Update import statements for styles

packages/app/app/App.js

@@ -22,8 +22,8 @@ import * as NuclearConfigActions from './actions/nuclear/configuration';
 import * as DownloadActions from './actions/downloads';
 
 import './app.global.scss';
-import styles from './styles.scss';
-import compact from './compact.scss';
+import * as styles from './styles.scss';
+import * as compact from './compact.scss';
 
 import Navbar from './components/Navbar';
 import VerticalPanel from './components/VerticalPanel';

packages/app/app/components/AlbumCover/AlbumInfo/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 type AlbumInfoProps = {
   nameOnly: boolean;

packages/app/app/components/AlbumCover/AlbumOverlay/index.tsx

@@ -3,7 +3,7 @@ import FontAwesome from 'react-fontawesome';
 
 import Spacer from '../../Spacer';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 type AlbumOverlayProps = {
   handlePlay: React.MouseEventHandler;

packages/app/app/components/AlbumCover/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 import AlbumInfo from './AlbumInfo';
 import AlbumOverlay from './AlbumOverlay';

packages/app/app/components/AlbumView/index.tsx

@@ -4,7 +4,7 @@ import _ from 'lodash';
 import { Dimmer, Icon, Loader, Dropdown } from 'semantic-ui-react';
 import { useTranslation } from 'react-i18next';
 import { Loader as NuclearLoader, ContextPopup, PopupButton, PopupDropdown, InputDialog } from '@nuclear/ui';
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 import artPlaceholder from '../../../resources/media/art_placeholder.png';
 import TrackTableContainer from '../../containers/TrackTableContainer';
 import { AlbumDetailsState } from '../../reducers/search';

packages/app/app/components/ArtistView/ArtistHeader/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import ArtistTags from '../ArtistTags';
-import styles from '../styles.scss';
+import * as styles from '../styles.scss';
 import { ArtistDetailsState } from '../../../reducers/search';
 import artPlaceholder from '../../../../resources/media/art_placeholder.png';
 import { Icon } from 'semantic-ui-react';

packages/app/app/components/ArtistView/ArtistTags/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useHistory } from 'react-router';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 type ArtistTagsProps = {
   tags: string[];

packages/app/app/components/ArtistView/PopularTracks/index.tsx

@@ -12,7 +12,7 @@ import { Track } from '@nuclear/ui/lib/types';
 
 import trackRowStyles from '../../TrackRow/styles.scss';
 import TrackTableContainer from '../../../containers/TrackTableContainer';
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 type AddAllButtonProps = {
   handleAddAll: React.MouseEventHandler;

packages/app/app/components/ArtistView/SimilarArtists/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 import artPlaceholder from '../../../../resources/media/art_placeholder.png';
 
 type SimilarArtistsProps = {

packages/app/app/components/ArtistView/index.tsx

@@ -8,7 +8,7 @@ import { useHistory } from 'react-router';
 import SimilarArtists from './SimilarArtists';
 import PopularTracks from './PopularTracks';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 import artPlaceholder from '../../../resources/media/art_placeholder.png';
 import { ArtistDetailsState } from '../../reducers/search';
 import { SearchResultsAlbum } from '@nuclear/core/src/plugins/plugins.types';

packages/app/app/components/CommandPaletteReminder/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { isMac } from '../../hooks/usePlatform';
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 const CommandPaletteReminder = () => {
   const { t } = useTranslation('command-palette');

packages/app/app/components/Dashboard/ChartsTab/index.tsx

@@ -3,7 +3,7 @@ import { Tab } from 'semantic-ui-react';
 import { Track } from '@nuclear/ui/lib/types';
 
 import TrackTableContainer from '../../../containers/TrackTableContainer';
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 import { useTranslation } from 'react-i18next';
 import { InternalTopTrack } from '../../../reducers/dashboard';
 

packages/app/app/components/Dashboard/EditorialsTab/index.tsx

@@ -5,7 +5,7 @@ import { Tab } from 'semantic-ui-react';
 import { CardsRow } from '@nuclear/ui';
 import { DeezerEditorialCharts } from '@nuclear/core/src/rest/Deezer';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 import { PromotedArtistsContainer } from '../../../containers/PromotedArtistsContainer';
 
 type EditorialsTabProps = { 

packages/app/app/components/Dashboard/GenresTab/index.tsx

@@ -4,7 +4,7 @@ import { Tab } from 'semantic-ui-react';
 import _ from 'lodash';
 
 import genreToIcon from './mapGenres';
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 import { LastfmTopTag } from '@nuclear/core/src/rest/Lastfm.types';
 import { useHistory } from 'react-router-dom';
 

packages/app/app/components/Dashboard/index.tsx

@@ -6,7 +6,7 @@ import { Redirect, useHistory } from 'react-router-dom';
 import ChartsTab from './ChartsTab';
 import GenresTab from './GenresTab';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 import { DashboardReducerState } from '../../reducers/dashboard';
 import EditorialsTab from './EditorialsTab';
 

packages/app/app/components/Downloads/DownloadsHeader/index.tsx

@@ -8,7 +8,7 @@ import {
 import { useTranslation } from 'react-i18next';
 
 import { setStringOption } from '../../../actions/settings';
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 import { app, dialog } from 'electron';
 
 type DownloadsHeaderProps = {

packages/app/app/components/Downloads/DownloadsItem/index.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import { Icon, SemanticICONS, Table } from 'semantic-ui-react';
 import _ from 'lodash';
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 import { Download } from '@nuclear/ui/lib/types';
 
 type DownloadsItemProps = {

packages/app/app/components/Downloads/DownloadsList/index.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { Button, Icon, Segment, Table } from 'semantic-ui-react';
 import { useTranslation } from 'react-i18next';
 import DownloadsItem from '../DownloadsItem';
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 import { Download } from '@nuclear/ui/lib/types';
 
 type DownloadsListProps = {

packages/app/app/components/Downloads/index.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import Header from '../Header';
 import DownloadsList from './DownloadsList';
 import DownloadsHeader from './DownloadsHeader';
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 import { setStringOption } from '../../actions/settings';
 import { Download } from '@nuclear/ui/lib/types';
 

packages/app/app/components/Equalizer/PreAmp/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './index.scss';
+import * as styles from './index.scss';
 
 type PreAmpProps = {
   value: number;

packages/app/app/components/Equalizer/index.tsx

@@ -9,7 +9,7 @@ import { Radio, RadioProps  } from 'semantic-ui-react';
 import PreAmp from './PreAmp';
 import { createChart} from './chart';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 const mapGraphValueToData = (value: number) => value - 10;
 const mapDataValueToGraph = (value: number) => value + 10;

packages/app/app/components/EqualizerPresetList/index.tsx

@@ -3,7 +3,7 @@ import { List, Icon } from 'semantic-ui-react';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 type EqualizerPresetListProps ={
   presets: Array<Preset>;

packages/app/app/components/FavoriteAlbumsView/index.tsx

@@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next';
 import AlbumList from '../AlbumList';
 import Header from '../Header';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 type Tracklist = { 
   uuid:string;

packages/app/app/components/FavoriteArtistsView/index.tsx

@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next';
 import ArtistList from '../ArtistList';
 import Header from '../Header';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 const EmptyState = () => {
   const { t } = useTranslation('favorite-artists');

packages/app/app/components/FavoriteTracksView/index.tsx

@@ -7,7 +7,7 @@ import { Track } from '@nuclear/core';
 
 import TrackTableContainer from '../../containers/TrackTableContainer';
 import Header from '../Header';
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 import { Button, Tooltip } from '@nuclear/ui';
 
 export const EmptyState = () => {

packages/app/app/components/Header/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 type HeaderProps={
   children: React.ReactNode;

packages/app/app/components/HelpButton/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Button, Icon } from 'semantic-ui-react';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 type HelpButtonProps = {
   onClick: () => void;

packages/app/app/components/HelpModal/Contributors/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Loader, Card, Image } from 'semantic-ui-react';
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 export type GithubContributorData = {
   total: number;
@@ -60,7 +60,7 @@ const Contributors: React.FC<ContributorProps> = ({
               src={contributor.author?.avatar_url}
             />
             <Card.Header>{contributor.author?.login}</Card.Header>
-            <Card.Meta className={styles.meta_text}>
+            <Card.Meta>
               {contributor.author?.html_url}
             </Card.Meta>
             <Card.Description>

packages/app/app/components/HelpModal/index.tsx

@@ -10,7 +10,7 @@ import { agplDisclaimer } from './const';
 
 import logoImg from '../../../resources/media/logo_full_light.png';
 import mastodonImg from '../../../resources/media/mastodon.svg';
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 export type HelpModalProps = {
   githubContrib: ContributorState;
@@ -88,7 +88,7 @@ const HelpModal: React.FC<HelpModalProps> = ({
           />
           <div
             data-testid='mastodon-link'
-            className={cx(styles.mastodon, styles.icon)}
+            className={styles.mastodon}
             onClick={handleMastodonClick}
             dangerouslySetInnerHTML={{ __html: mastodonImg }}
           />

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Icon } from 'semantic-ui-react';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 export default () => {
   const { t } = useTranslation('library');

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

@@ -12,7 +12,7 @@ import {
 import { withTranslation } from 'react-i18next';
 import { compose, withHandlers } from 'recompose';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 const LibraryFolders = ({
   openLocalFolderPicker,
@@ -30,7 +30,6 @@ const LibraryFolders = ({
         icon
         inverted
         labelPosition='left'
-        className={styles.add_folder}
         onClick={openLocalFolderPicker}
       >
         <Icon name='folder open' />
@@ -60,7 +59,7 @@ const LibraryFolders = ({
         <List
           divided
           verticalAlign='middle'
-          className={styles.equalizer_list}>
+          className={styles.list}>
           {localFolders.map((folder, idx) => (
             <List.Item key={idx}>
               <List.Content floated='right'>

packages/app/app/components/LibraryView/LibraryFolders/styles.scss

@@ -4,9 +4,6 @@
   padding: 0;
   flex: 0 0 auto;
 
-  .add_folder {
-  }
-
   .control_bar {
     margin: 0;
     padding: 0;

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

@@ -8,7 +8,7 @@ import { withHandlers, withState, compose } from 'recompose';
 import Header from '../../Header';
 import LibraryFolders from '../LibraryFolders';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 const LibraryHeader = ({
   t,

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Icon } from 'semantic-ui-react';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 export default () => {
   const { t } = useTranslation('library');

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

@@ -7,7 +7,7 @@ import _ from 'lodash';
 import PropTypes from 'prop-types';
 import EmptyState from './EmptyState';
 import trackRowStyles from '../TrackRow/styles.scss';
-import styles from './index.scss';
+import * as styles from './index.scss';
 import NoSearchResults from './NoSearchResults';
 import LibrarySimpleList from './LibrarySimpleList';
 import LibraryFolderTree from './LibraryFolderTree';

packages/app/app/components/ListeningHistoryView/ListeningHistorySection.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { HistoryTableDate } from '@nuclear/ui';
 import { HistoryTableTrack } from '@nuclear/ui/lib/components/TrackTable/HistoryTable';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 import TrackTableContainer from '../../containers/TrackTableContainer';
 import { HistoryTable } from '@nuclear/ui';
 

packages/app/app/components/ListeningHistoryView/index.tsx

@@ -4,7 +4,7 @@ import { groupBy, map } from 'lodash';
 import { HistoryTableTrack } from '@nuclear/ui/lib/components/TrackTable/HistoryTable';
 
 import { ListeningHistorySection } from './ListeningHistorySection';
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 import Header from '../Header';
 import { useTranslation } from 'react-i18next';
 import { Button, ConfirmationModal } from '@nuclear/ui';

packages/app/app/components/LyricsView/LyricsHeader/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 type LyricsHeaderProps ={
   name : string;

packages/app/app/components/LyricsView/index.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 
 import LyricsHeader from './LyricsHeader';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 import { QueueItem } from '../../reducers/queue';
 import { getTrackArtist } from '@nuclear/ui';
 

packages/app/app/components/MainLayout/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import cx from 'classnames';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 const MainLayout = ({ className, children }) => (
   <div className={cx(styles.main_layout_container, className)}>

packages/app/app/components/NavButtons/index.tsx

@@ -3,7 +3,7 @@ import FontAwesome from 'react-fontawesome';
 import { useHistory } from 'react-router';
 import { History } from 'history';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 
 const NavButtons: React.FC = () => {