Minor styling improvements to the file sharing tab

app/lib/RoomClient.js

@@ -211,14 +211,14 @@ export default class RoomClient
 
 		return this._protoo.send('send-file', { file })
 			.catch((error) =>
-		{
-			logger.error('sendFile() | failed: %o', error);
+			{
+				logger.error('sendFile() | failed: %o', error);
 
-			this._dispatch(requestActions.notify({
-				typ: 'error',
-				text: 'An error occurred while sharing a file'
-			}));
-		});
+				this._dispatch(requestActions.notify({
+					typ  : 'error',
+					text : 'An error occurred while sharing a file'
+				}));
+			});
 	}
 
 	getChatHistory()
@@ -1171,7 +1171,7 @@ export default class RoomClient
 					this._dispatch(stateActions.addFile(payload));
 
 					this._dispatch(requestActions.notify({
-						text: `${payload.name} shared a file`
+						text : `${payload.name} shared a file`
 					}));
 
 					break;

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(

app/lib/redux/reducers/chatmessages.js

@@ -1,7 +1,6 @@
 import
 {
-	createNewMessage,
-	createNewFile
+	createNewMessage
 } from './helper';
 
 const chatmessages = (state = [], action) =>

app/lib/redux/reducers/sharing.js

@@ -1,16 +1,16 @@
 const sharing = (state = [], action) =>
 {
-  switch (action.type)
-  {
-    case 'SEND_FILE':
-      return [ ...state, { ...action.payload, me: true }];
+	switch (action.type)
+	{
+		case 'SEND_FILE':
+			return [ ...state, { ...action.payload, me: true } ];
 
-    case 'ADD_FILE':
-      return [ ...state, action.payload ];
+		case 'ADD_FILE':
+			return [ ...state, action.payload ];
 
-    default:
-      return state;
-  }
+		default:
+			return state;
+	}
 };
 
 export default sharing;

app/lib/redux/requestActions.js

@@ -2,8 +2,7 @@ import randomString from 'random-string';
 import * as stateActions from './stateActions';
 import
 {
-	createNewMessage,
-	createNewFile
+	createNewMessage
 } from './reducers/helper';
 
 export const joinRoom = (
@@ -217,8 +216,8 @@ export const sendChatMessage = (text, name, picture) =>
 export const sendFile = (file, name, picture) =>
 {
 	return {
-		type: 'SEND_FILE',
-		payload: { file, name, picture }
+		type    : 'SEND_FILE',
+		payload : { file, name, picture }
 	};
 };
 

app/lib/redux/stateActions.js

@@ -444,7 +444,7 @@ export const dropMessages = () =>
 export const addFile = (payload) =>
 {
 	return {
-		type: 'ADD_FILE',
+		type : 'ADD_FILE',
 		payload
 	};
 };