From 53d0420e2436e203e8467f22ea066ea13b2bce41 Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <Unknowngi@live.com>
Date: Fri, 10 Jul 2015 02:38:19 +0500
Subject: Improving mentions list and other UI improvements

---
 web/react/components/invite_member_modal.jsx | 22 ++++++++++++++--------
 web/react/components/mention_list.jsx        |  2 +-
 2 files changed, 15 insertions(+), 9 deletions(-)

(limited to 'web/react')

diff --git a/web/react/components/invite_member_modal.jsx b/web/react/components/invite_member_modal.jsx
index 9ff67ae1b..94be2acd6 100644
--- a/web/react/components/invite_member_modal.jsx
+++ b/web/react/components/invite_member_modal.jsx
@@ -162,25 +162,31 @@ module.exports = React.createClass({
                 invite_sections[index] = (
                     <div key={"key" + index}>
                     <div>
-                        <button type="button" className="btn remove__member" onClick={this.removeInviteFields.bind(this, index)}>×</button>
+                        <button type="button" className="btn btn-link remove__member" onClick={this.removeInviteFields.bind(this, index)}><span className="fa fa-trash"></span></button>
                     </div>
                     <div className={ email_error ? "form-group invite has-error" : "form-group invite" }>
                         <input onKeyUp={this.displayNameKeyUp} type="text" ref={"email"+index} className="form-control" placeholder="email@domain.com" maxLength="64" />
                         { email_error }
                     </div>
+                    <div className="row--invite">
                     { config.AllowInviteNames ?
-                    <div className={ first_name_error ? "form-group invite has-error" : "form-group invite" }>
-                        <input type="text" className="form-control" ref={"first_name"+index} placeholder="First name" maxLength="64" />
-                        { first_name_error }
+                    <div className="col-sm-6">
+                        <div className={ first_name_error ? "form-group has-error" : "form-group" }>
+                            <input type="text" className="form-control" ref={"first_name"+index} placeholder="First name" maxLength="64" />
+                            { first_name_error }
+                        </div>
                     </div>
                     : "" }
                     { config.AllowInviteNames ?
-                    <div className={ last_name_error ? "form-group invite has-error" : "form-group invite" }>
-                        <input type="text" className="form-control" ref={"last_name"+index} placeholder="Last name" maxLength="64" />
-                        { last_name_error }
+                    <div className="col-sm-6">
+                        <div className={ last_name_error ? "form-group has-error" : "form-group" }>
+                            <input type="text" className="form-control" ref={"last_name"+index} placeholder="Last name" maxLength="64" />
+                            { last_name_error }
+                        </div>
                     </div>
                     : "" }
                     </div>
+                    </div>
                 );
             }
 
@@ -203,7 +209,7 @@ module.exports = React.createClass({
                                 <button type="button" className="btn btn-default" onClick={this.addInviteFields}>Add another</button>
                                 <br/>
                                 <br/>
-                                <label className='control-label'>People invited automatically join Town Square channel.</label>
+                                <span>People invited automatically join Town Square channel.</span>
                             </div>
                             <div className="modal-footer">
                               <button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
diff --git a/web/react/components/mention_list.jsx b/web/react/components/mention_list.jsx
index 3fac41073..25834b9e5 100644
--- a/web/react/components/mention_list.jsx
+++ b/web/react/components/mention_list.jsx
@@ -129,7 +129,7 @@ module.exports = React.createClass({
 
         if (numMentions < 1) return (<div/>);
 
-        var height = (numMentions*37) + 2;
+        var height = (numMentions*36) + 4;
         var width = $('#'+this.props.id).parent().width();
         var bottom = $(window).height() - $('#'+this.props.id).offset().top;
         var left = $('#'+this.props.id).offset().left;
-- 
cgit v1.2.3-1-g7c22