Major cleanup. Moved a lot of CSS variables out too root of CSS for easier styling.

app/lib/components/ToolArea/FileSharing/DragDropSharing.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import WebTorrent from 'webtorrent';
+import dragDrop from 'drag-drop';
+import { shareFiles } from './index';
+
+export const configureDragDrop = () =>
+{
+	if (WebTorrent.WEBRTC_SUPPORT)
+	{
+		dragDrop('body', async (files) => await shareFiles(files));
+	}
+};
+
+export const HoldingOverlay = () => (
+	<div id='holding-overlay'>
+		Drop files here to share them
+	</div>
+);

app/lib/components/ToolArea/FileSharing/File.jsx

@@ -0,0 +1,113 @@
+import React, { Component, Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { withRoomContext } from '../../../RoomContext';
+import magnet from 'magnet-uri';
+
+const DEFAULT_PICTURE = 'resources/images/avatar-empty.jpeg';
+
+class File extends Component
+{
+	render()
+	{
+		const {
+			roomClient,
+			torrentSupport,
+			file
+		} = this.props;
+
+		return (
+			<div className='file-entry'>
+				<img className='file-avatar' src={file.picture || DEFAULT_PICTURE} />
+	
+				<div className='file-content'>
+					<Choose>
+						<When condition={file.me}>
+							<p>You shared a file.</p>
+						</When>
+						<Otherwise>
+							<p>{file.displayName} shared a file.</p>
+						</Otherwise>
+					</Choose>
+
+					<If condition={!file.active && !file.files}>
+						<div className='file-info'>
+							<Choose>
+								<When condition={torrentSupport}>
+									<span
+										className='button'
+										onClick={() =>
+										{
+											roomClient.handleDownload(file.magnetUri);
+										}}
+									>
+										<img src='resources/images/download-icon.svg' />
+									</span>
+								</When>
+								<Otherwise>
+									<p>
+										Your browser does not support downloading files using WebTorrent.
+									</p>
+								</Otherwise>
+							</Choose>
+							<p>{magnet.decode(file.magnetUri).dn}</p>
+						</div>
+					</If>
+
+					<If condition={file.timeout}>
+						<Fragment>
+							<p>
+								If this process takes a long time, there might not be anyone seeding
+								this torrent. Try asking someone to reupload the file that you want.
+							</p>
+						</Fragment>
+					</If>
+
+					<If condition={file.active}>
+						<progress value={file.progress} />
+					</If>
+
+					<If condition={file.files}>
+						<Fragment>
+							<p>File finished downloading.</p>
+
+							{file.files.map((sharedFile, i) => (
+								<div className='file-info' key={i}>
+									<span
+										className='button'
+										onClick={() =>
+										{
+											roomClient.saveFile(sharedFile);
+										}}
+									>
+										<img src='resources/images/save-icon.svg' />
+									</span>
+
+									<p>{sharedFile.name}</p>
+								</div>
+							))}
+						</Fragment>
+					</If>
+				</div>
+			</div>
+		);
+	}
+}
+
+File.propTypes = {
+	roomClient     : PropTypes.object.isRequired,
+	torrentSupport : PropTypes.bool.isRequired,
+	file           : PropTypes.object.isRequired
+};
+
+const mapStateToProps = (state, { magnetUri }) =>
+{
+	return {
+		file           : state.files[magnetUri],
+		torrentSupport : state.room.torrentSupport
+	};
+};
+
+export default withRoomContext(connect(
+	mapStateToProps
+)(File));

app/lib/components/ToolArea/FileSharing/FileList.jsx

@@ -0,0 +1,40 @@
+import React, { Component } from 'react';
+import { compose } from 'redux';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import scrollToBottom from '../scrollToBottom';
+import File from './File';
+
+class FileList extends Component
+{
+	render()
+	{
+		const {
+			files
+		} = this.props;
+
+		return (
+			<div className='shared-files'>
+				{ Object.keys(files).map((magnetUri) =>
+					<File key={magnetUri} magnetUri={magnetUri} />
+				)}
+			</div>
+		);
+	}
+}
+
+FileList.propTypes = {
+	files : PropTypes.object.isRequired
+};
+
+const mapStateToProps = (state) =>
+{
+	return {
+		files : state.files
+	};
+};
+
+export default compose(
+	connect(mapStateToProps),
+	scrollToBottom()
+)(FileList);

app/lib/components/ToolArea/FileSharing/FileSharing.jsx

@@ -0,0 +1,88 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import classNames from 'classnames';
+import { withRoomContext } from '../../../RoomContext';
+import FileList from './FileList';
+
+class FileSharing extends Component
+{
+	constructor(props)
+	{
+		super(props);
+
+		this._fileInput = React.createRef();
+	}
+
+	handleFileChange = async (event) =>
+	{
+		if (event.target.files.length > 0)
+		{
+			this.props.roomClient.shareFiles(event.target.files);
+		}
+	};
+
+	handleClick = () =>
+	{
+		if (this.props.torrentSupport)
+		{
+			// We want to open the file dialog when we click a button
+			// instead of actually rendering the input element itself.
+			this._fileInput.current.click();
+		}
+	};
+
+	render()
+	{
+		const {
+			torrentSupport
+		} = this.props;
+
+		const buttonDescription = torrentSupport ?
+			'Share file' : 'File sharing not supported';
+
+		return (
+			<div data-component='FileSharing'>
+				<div className='sharing-toolbar'>
+					<input
+						style={{ display: 'none' }}
+						ref={this._fileInput}
+						type='file'
+						onChange={this.handleFileChange}
+						multiple
+					/>
+
+					<div
+						type='button'
+						onClick={this.handleClick}
+						className={classNames('share-file', {
+							disabled : !torrentSupport
+						})}
+					>
+						<span>{buttonDescription}</span>
+					</div>
+				</div>
+
+				<FileList />
+			</div>
+		);
+	}
+}
+
+FileSharing.propTypes = {
+	roomClient     : PropTypes.any.isRequired,
+	torrentSupport : PropTypes.bool.isRequired,
+	tabOpen        : PropTypes.bool.isRequired
+};
+
+const mapStateToProps = (state) =>
+{
+	return {
+		torrentSupport : state.room.torrentSupport,
+		tabOpen        : state.toolarea.currentToolTab === 'files'
+	};
+};
+
+export default withRoomContext(connect(
+	mapStateToProps
+)(FileSharing));