Multiple UI changes

web/react/components/get_link_modal.jsx

@@ -34,7 +34,7 @@ module.exports = React.createClass({
         var copyLinkConfirm = null;
 
         if (this.state.copiedLink) {
-            copyLinkConfirm = <p className='copy-link-confirm'>Link copied to clipboard.</p>;
+            copyLinkConfirm = <p className='alert alert-success copy-link-confirm'><i className="fa fa-check"></i> Link copied to clipboard.</p>;
         }
 
         if (currentUser != null) {

web/react/components/post_list.jsx

@@ -42,6 +42,9 @@ module.exports = React.createClass({
             utils.changeCss('.modal .modal-header', 'background: ' + user.props.theme+';');
             utils.changeCss('.mention', 'background: ' + user.props.theme+';');
             utils.changeCss('.mention-link', 'color: ' + user.props.theme+';');
+            utils.changeCss('.mention-link', 'color: ' + user.props.theme+';');
+            utils.changeCss('.mention-link', 'color: ' + user.props.theme+';');
+            utils.changeCss('.search-item-container:hover', 'background: ' + utils.changeOpacity(user.props.theme, 0.05)  +';');
             utils.changeCss('@media(max-width: 768px){.search-bar__container', 'background: ' + user.props.theme+';}');
         }
         if (user.props.theme != '#000000' && user.props.theme != '#585858') {

web/react/components/sidebar.jsx

@@ -363,8 +363,8 @@ module.exports = React.createClass({
                 <li key={channel.name} ref={channel.name} className={linkClass}>
                     <a className={'sidebar-channel ' + titleClass} href={href} onClick={clickHandler}>
                         {status}
-                        {badge}
                         {channel.display_name}
+                        {badge}
                     </a>
                 </li>
             );

web/react/utils/utils.jsx

@@ -855,6 +855,20 @@ module.exports.changeColor =function(col, amt) {
     return (usePound?"#":"") + String("000000" + (g | (b << 8) | (r << 16)).toString(16)).slice(-6);
 };
 
+module.exports.changeOpacity = function(oldColor, opacity) {
+
+    var col = oldColor;
+    if (col[0] === '#') {
+        col = col.slice(1);
+    }
+
+    var r = parseInt(col.substring(0, 2), 16);
+    var g = parseInt(col.substring(2, 4), 16);
+    var b = parseInt(col.substring(4, 6), 16);
+
+    return 'rgba(' + r + ',' + g + ',' + b + ',' + opacity + ')';
+};
+
 module.exports.getFullName = function(user) {
     if (user.first_name && user.last_name) {
         return user.first_name + " " + user.last_name;

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

@@ -10,7 +10,7 @@
     display: inline-block;
     width: 120px;
     height: 100px;
-    margin: 7px 10px 0 0;
+    margin: 7px 0 0 5px;
     vertical-align: top;
     position: relative;
     border: 1px solid #DDD;
@@ -18,6 +18,9 @@
     &:hover .remove-preview:after {
       @include opacity(1);
     }
+    &:first-child {
+      margin-left: 0;
+    }
     .spinner {
       position:absolute;
       top:50%;
@@ -58,6 +61,8 @@
       cursor: pointer;
       z-index: 5;
       opacity: inherit;
+        text-shadow: 0 0px 3px #444;
+        text-shadow: 0 0px 3px rgba(0, 0, 0, 0.7);
     }
   }
 }

web/sass-files/sass/partials/_get-link.scss

@@ -1,6 +1,6 @@
 .copy-link-confirm {
-	position: fixed;
-	color: rgb(153, 230, 153);
-	top: 84%;
-	left: 130px;
+	display: inline-block;
+	float: left;
+	padding: 4px 10px;
+	margin: 3px 0 0 10px;
 }

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

@@ -55,7 +55,7 @@
 	font-size: 20px;
 	text-align: center;
 	color: #555;
-	@include border-radius(3px);
+	@include border-radius(32px);
 }
 
 .mention-fullname {

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

@@ -214,9 +214,6 @@ body.ios {
 			.dropdown, .comment-icon__container {
 				@include opacity(1);
 			}
-			.dropdown-toggle:after {
-				content: '[...]';
-			}
 		}
 		background: #f5f5f5;
 	}
@@ -383,6 +380,9 @@ body.ios {
 					display: inline-block;
 					@include opacity(0);
 				}
+				.dropdown-toggle:after {
+					content: '[...]';
+				}
 			}
 		}
 		.post-profile-time {

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

@@ -11,8 +11,8 @@
 
 	.post {
 		&.post--root {
-			padding: 0 1em 0;
-			margin: 1em 0;
+			padding: 1em 1em 0;
+			margin: 0 0 1em;
 			hr {
 				border-color: #DDD;
 				margin: 1em 0 0 0;

web/sass-files/sass/partials/_sidebar--left.scss

@@ -26,7 +26,9 @@
     .status {
         position:relative;
         top:1px;
-        margin-right: 3px;
+        margin-right: 6px;
+        width: 12px;
+        display: inline-block;
         .online--icon {
             fill: #7DBE00;
         }
@@ -79,6 +81,9 @@
                 line-height: 1.5;
                 border-radius: 0;
                 color: #999;
+                &.nav-more {
+                    text-decoration: underline;
+                }
                 &.unread-title {
                     color: #333;
                     font-weight: 600;