Minor styling improvements to the file sharing tab

app/lib/components/FileSharing/FileEntry.jsx

@@ -5,6 +5,8 @@ import * as requestActions from '../../redux/requestActions';
 import { saveAs } from 'file-saver/FileSaver';
 import { client } from './index';
 
+const DEFAULT_PICTURE = 'resources/images/avatar-empty.jpeg';
+
 class FileEntry extends Component
 {
 	state = {
@@ -91,28 +93,30 @@ class FileEntry extends Component
 	render()
 	{
 		return (
-			<Fragment>
-				<div>
+			<div className='file-entry'>
+				<img className='file-avatar' src={this.props.data.picture || DEFAULT_PICTURE} />
+	
+				<div className='file-content'>
+					{this.props.data.me ? (
+						<p>You shared a file.</p>
+					) : (
+						<p>{this.props.data.name} shared a file.</p>
+					)}
+
 					{!this.state.active && !this.state.files && (
-						<Fragment>
-							{this.props.data.me ? (
-								<p>You shared a file.</p>
-							) : (
-								<p>A new file was shared.</p>
-							)}
+						<div className='file-info'>
+							<span className='button' onClick={this.download}>
+								<img src='resources/images/download-icon.svg' />
+							</span>
 
 							<p>{magnet.decode(this.props.data.file.magnet).dn}</p>
-
-							<button onClick={this.download}>
-								Download
-							</button>
-						</Fragment>
+						</div>
 					)}
 
 					{this.state.active && this.state.numPeers === 0 && (
-						<div>
+						<p>
 							Locating peers
-						</div>
+						</p>
 					)}
 
 					{this.state.active && this.state.numPeers > 0 && (
@@ -120,22 +124,22 @@ class FileEntry extends Component
 					)}
 
 					{this.state.files && (
-						<div>
+						<Fragment>
 							<p>Torrent finished downloading.</p>
 
 							{this.state.files.map((file, i) => (
-								<div key={i}>
-									{file.name}
+								<div className='file-info' key={i}>
+									<span className='button' onClick={() => this.saveFile(file)}>
+										<img src='resources/images/save-icon.svg' />
+									</span>
 
-									<button onClick={() => this.saveFile(file)}>
-										Save
-									</button>
+									<p>{file.name}</p>
 								</div>
 							))}
-						</div>
+						</Fragment>
 					)}
 				</div>
-			</Fragment>
+			</div>
 		);
 	}
 }

app/lib/components/FileSharing/index.jsx

@@ -25,7 +25,7 @@ const notifyPeers = (file) =>
 	store.dispatch(requestActions.sendFile(file, displayName, picture));
 };
 
-const shareFiles = async (files) =>
+const shareFiles = async(files) =>
 {
 	const notification =
 	{
@@ -98,8 +98,8 @@ class FileSharing extends Component
 	render()
 	{
 		return (
-			<div>
-				<div>
+			<div data-component='FileSharing'>
+				<div className='sharing-toolbar'>
 					<input
 						style={{ display: 'none' }}
 						ref={this.fileInput}
@@ -108,18 +108,20 @@ class FileSharing extends Component
 						multiple
 					/>
 
-					<button
+					<div
 						type='button'
 						onClick={this.handleClick}
+						className='share-file'
 					>
-						share file
-					</button>
+						<span>Share file</span>
+					</div>
 				</div>
 
-				<div>
-					{this.props.sharing.map((entry) => (
+				<div className='shared-files'>
+					{this.props.sharing.map((entry, i) => (
 						<FileEntry
 							data={entry}
+							key={i}
 						/>
 					))}
 				</div>
@@ -130,7 +132,7 @@ class FileSharing extends Component
 
 const mapStateToProps = (state) =>
 	({
-		sharing: state.sharing
+		sharing : state.sharing
 	});
 
 export default connect(