UI Upgrades to file overlay for uploads

web/react/components/post_list.jsx

@@ -465,8 +465,10 @@ module.exports = React.createClass({
         return (
             <div>
                 <div className='center-file-overlay invisible'>
-                    <span className='center-file-help-text'>Drop a file to upload it.</span>
+                    <div>
-                    <img className='center-file-help-picture' />
+                        <i className="fa fa-upload"></i>
+                        <span>Drop a file to upload it.</span>
+                    </div>
                 </div>
                 <div ref="postlist" className="post-list-holder-by-time">
                     <div className="post-list__table">

web/react/components/post_right.jsx

@@ -296,9 +296,11 @@ module.exports = React.createClass({
 
         return (
             <div className="post-right__container">
-                <div className='right-file-overlay invisible'>
+                <div className='center-file-overlay right-file-overlay invisible'>
-                    <span className='right-file-help-text'>Drop a file to upload it.</span>
+                    <div>
-                    <img className='right-file-help-picture' />
+                        <i className="fa fa-upload"></i>
+                        <span>Drop a file to upload it.</span>
+                    </div>
                 </div>
                 <div className="search-bar__container sidebar--right__search-header">{searchForm}</div>
                 <div className="sidebar-right__body">

web/sass-files/sass/partials/_post.scss

@@ -106,30 +106,40 @@ body.ios {
 	}
 }
 
-#post-list {
+.center-file-overlay {
-	.center-file-overlay {
+	position: fixed;
-		top: 0px;
+	top: 0;
-		height: 100%;
+	left: 0;
-		width: 59.7%;
+	width: 100%;
-		position: fixed;
+	height: 100%;
-		z-index: 2147483646;
+	background-color: rgba(0, 0, 0, 0.8);
-		-moz-box-shadow: 0px 0px 3px #8a8a8a;
+	text-align: center;
-		-webkit-box-shadow: 0px 0px 3px #8a8a8a;
+	color: #FFF;
-		box-shadow: 0px 0px 3px #8a8a8a;
+	display: table;
+	font-size: 1.7em;
+	font-weight: 600;
+	z-index: 6;
 
-		.invisible {
+	> div {
-			visibility: hidden;
+		display: table-cell;
-		}
+		vertical-align: middle;
-		.visible {
-			visibility: visible;
-		}
-		.center-file-help-text {
-
-		}
-		.center-file-help-picture {
-
-		}
 	}
+
+	.fa {
+		display: block;
+		font-size: 2em;
+		margin: 0 0 0.3em;
+	}
+
+	.invisible {
+		visibility: hidden;
+	}
+	.visible {
+		visibility: visible;
+	}
+}
+
+#post-list {
 	.post-list-holder-by-time {
 		background: #fff;
 		overflow-y: scroll;

web/sass-files/sass/partials/_post_right.scss

@@ -1,28 +1,5 @@
 .post-right__container {
 
-	.right-file-overlay {
-		height: 100%;
-		width: 100%;
-		position: fixed;
-		z-index: 2147483646;
-		-moz-box-shadow: 0px 0px 3px #8a8a8a;
-		-webkit-box-shadow: 0px 0px 3px #8a8a8a;
-		box-shadow: 0px 0px 3px #8a8a8a;
-
-		.invisible {
-			visibility: hidden;
-		}
-		.visible {
-			visibility: visible;
-		}
-		.right-file-help-text {
-
-		}
-		.right-file-help-picture {
-
-		}
-	}
-
 	.post-right-root-message {
 		padding: 1em 1em 0;
 	}

web/sass-files/sass/partials/_responsive.scss

@@ -189,6 +189,9 @@
 }
 
 @media screen and (max-width: 960px) {
+    .center-file-overlay {
+        font-size: 1.5em;
+    }
     .post {
         .post-header .post-header-col.post-header__reply {
             .comment-icon__container__hide {
@@ -240,6 +243,9 @@
     }
 }
 @media screen and (max-width: 768px) {
+    .center-file-overlay {
+        font-size: 1.3em;
+    }
     .date-separator, .new-separator {
         &.hovered--after {
             &:before {