Simple 'about' window

app/App.js

@@ -28,7 +28,7 @@ import settingsConst from './constants/settings';
 
 import PlaylistsSubMenu from './components/PlaylistsSubMenu';
 import Footer from './components/Footer';
-import HelpButton from './components/HelpButton';
+import HelpModal from './components/HelpModal';
 import Navbar from './components/Navbar';
 import VerticalPanel from './components/VerticalPanel';
 import Spacer from './components/Spacer';
@@ -110,7 +110,7 @@ class App extends React.Component {
         <SearchBoxContainer />
         <Spacer />
         <Spacer />
-        <HelpButton />
+        <HelpModal />
         {this.props.settings.framelessWindow && <WindowControls />}
       </Navbar>
     );

app/components/Downloads/styles.scss

@@ -2,6 +2,7 @@
 
 .downloads_container {
   position: relative;
+  height: 100%;
 
   .empty_state {
     @include emptyState;

app/components/HelpButton/index.js

@@ -8,6 +8,7 @@ const HelpButton = props => {
   return (
     <Button icon
       className={styles.help_button}
+      { ...props }
     >
       <Icon name='question circle outline'/>
     </Button>

app/components/HelpModal/const.js

@@ -0,0 +1,7 @@
+module.exports = {
+  agplDisclaimer: 'This program is free software: you can redistribute'
+    + ' it and/or modify it under the terms of the GNU Affero General'
+    + ' Public License as published by the Free Software Foundation,'
+    + ' either version 3 of the License, or (at your option) any later'
+    + ' version. See the GNU Affero General Public License for more details.'
+};

app/components/HelpModal/index.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import {
+  Button,
+  Header,
+  Image,
+  Modal
+} from 'semantic-ui-react';
+
+import HelpButton from '../HelpButton';
+import { agplDisclaimer } from './const';
+
+import logoImg from '../../../resources/media/logo_full_light.png';
+import styles from './styles.scss';
+
+class HelpModal extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      open: false
+    };
+  }
+
+  handleOpen() {
+    this.setState({ open: true });
+  }
+
+  handleClose() {
+    this.setState({ open: false });
+  }
+
+  render() {
+    return (
+      <Modal
+        open={ this.state.open }
+        onClose={ this.handleClose.bind(this) }
+        basic
+        centered
+        dimmer='blurring'
+        trigger={ <HelpButton onClick={ this.handleOpen.bind(this) } /> }
+        className={ styles.help_modal }
+      >
+        <Modal.Header>About Nuclear Music Player</Modal.Header>
+        <Modal.Content image>
+          <Image wrapped size='medium' src={logoImg}/>
+          <Modal.Description>
+            <Header inverted>Desktop music player for streaming from free sources</Header>
+            <p>Copyright © <a href='https://github.com/nukeop/'>nukeop</a> 2019, released under AGPL-3.0</p>
+            <p>Many thanks to our contributors on Github, your help was vital in creating this program.</p>
+          </Modal.Description>
+        </Modal.Content>
+        <Modal.Content>
+          <Modal.Description>
+            { agplDisclaimer }
+          </Modal.Description>
+        </Modal.Content>
+      </Modal>
+    );
+  }
+}
+
+export default HelpModal;

app/components/HelpModal/styles.scss

@@ -0,0 +1,9 @@
+@import '../../vars.scss';
+
+.help_modal {
+  top: 25% !important;
+  color: rgba($white, 0.75) !important;
+  a {
+    color: $cyan;
+  }
+}

app/components/InputDialog/index.js

@@ -1,8 +1,6 @@
 import React from 'react';
 import { Button, Input, Modal } from 'semantic-ui-react';
 
-import styles from './styles.scss';
-
 class InputDialog extends React.Component {
   constructor(props) {
     super(props);

app/components/PlayQueue/QueueMenu/index.js

@@ -4,7 +4,6 @@ import FontAwesome from 'react-fontawesome';
 import _ from 'lodash';
 
 import InputDialog from '../../InputDialog';
-import Spacer from '../../Spacer';
 
 import styles from './styles.scss';
 import globalStyles from '../../../app.global.scss';