Merge pull request #240 from asaadmahmoodspin/master

Minor UI Improvements

api/templates/post_body.html

@@ -18,7 +18,7 @@
                                         <tr>
                                             <td style="border-bottom: 1px solid #ddd; padding: 0 0 20px;">
                                                 <h2 style="font-weight: normal; margin-top: 10px;">You were mentioned</h2>
-                                                <p>CHANNEL: {{.Props.ChannelName}}<br>{{.Props.SenderName}} - {{.Props.Hour}}:{{.Props.Minute}} GMT, {{.Props.Month}} {{.Props.Day}}<br><pre style="text-align:left;font-family: 'Lato', sans-serif;">{{.Props.PostMessage}}</pre></p>
+                                                <p>CHANNEL: {{.Props.ChannelName}}<br>{{.Props.SenderName}} - {{.Props.Hour}}:{{.Props.Minute}} GMT, {{.Props.Month}} {{.Props.Day}}<br><pre style="text-align:left;font-family: 'Lato', sans-serif; white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word;">{{.Props.PostMessage}}</pre></p>
                                                 <p style="margin: 20px 0 15px">
                                                     <a href="{{.Props.TeamLink}}" style="background: #2389D7; display: inline-block; border-radius: 3px; color: #fff; border: none; outline: none; min-width: 170px; padding: 15px 25px; font-size: 14px; font-family: inherit; cursor: pointer; -webkit-appearance: none;text-decoration: none;">Go To Channel</a>
                                                 </p>

web/react/components/access_history_modal.jsx

@@ -64,7 +64,7 @@ module.exports = React.createClass({
                                 <div>{"URL: " + currentAudit.action.replace("/api/v1", "")}</div>
                             </div>
                             :
-                            <a href="#" onClick={this.handleMoreInfo.bind(this, i)}>More info</a>
+                            <a href="#" className="theme" onClick={this.handleMoreInfo.bind(this, i)}>More info</a>
                             }
                         </div>
                         {i < this.state.audits.length - 1 ?

web/react/components/activity_log_modal.jsx

@@ -68,6 +68,9 @@ module.exports = React.createClass({
             else if (currentSession.props.platform === "Macintosh" || currentSession.props.platform === "iPhone") {
                 devicePicture = "fa fa-apple";
             }
+            else if (currentSession.props.platform === "Linux") {
+                devicePicture = "fa fa-linux";
+            }
 
             activityList[i] = (
                 <div className="activity-log__table">
@@ -83,7 +86,7 @@ module.exports = React.createClass({
                                 <div>{"Session ID: " + currentSession.alt_id}</div>
                             </div>
                             :
-                            <a href="#" onClick={this.handleMoreInfo.bind(this, i)}>More info</a>
+                            <a className="theme" href="#" onClick={this.handleMoreInfo.bind(this, i)}>More info</a>
                             }
                         </div>
                     </div>

web/react/components/setting_picture.jsx

@@ -25,9 +25,9 @@ module.exports = React.createClass({
 
         var img = null;
         if (this.props.picture) {
-            img = (<img ref="image" className="col-xs-5 profile-img" src=""/>);
+            img = (<img ref="image" className="profile-img" src=""/>);
         } else {
-            img = (<img ref="image" className="col-xs-5 profile-img" src={this.props.src}/>);
+            img = (<img ref="image" className="profile-img" src={this.props.src}/>);
         }
 
         var self = this;
@@ -37,7 +37,7 @@ module.exports = React.createClass({
                 <li className="col-xs-12 section-title">{this.props.title}</li>
                 <li className="col-xs-offset-3 col-xs-8">
                     <ul className="setting-list">
-                        <li className="row setting-list-item">
+                        <li className="setting-list-item">
                             {img}
                         </li>
                         <li className="setting-list-item">

web/react/components/signup_team.jsx

@@ -69,7 +69,9 @@ module.exports = React.createClass({
                     { name_error }
                 </div>
                 { server_error }
-                <button className="btn btn-md btn-primary" type="submit">Sign up for Free</button>
+                <div className="form-group">
+                    <button className="btn btn-md btn-primary" type="submit">Sign up for Free</button>
+                </div>
                 <div className="form-group form-group--small">
                     <span><a href="/find_team">{"Find my " + strings.Team}</a></span>
                 </div>

web/react/components/signup_team_complete.jsx

@@ -246,7 +246,7 @@ TeamURLPage = React.createClass({
                 <h2>{utils.toTitleCase(strings.Team) + " URL"}</h2>
                 <div className={ name_error ? "form-group has-error" : "form-group" }>
                <div className="row">
-                    <div className="col-sm-9">
+                    <div className="col-sm-11">
                         <div className="input-group">
                             <span className="input-group-addon">{ window.location.origin + "/" }</span>
                             <input type="text" ref="name" className="form-control" placeholder="" maxLength="128" defaultValue={this.props.state.team.name} autoFocus={true} onFocus={this.handleFocus}/>

web/react/components/team_settings.jsx

@@ -73,13 +73,12 @@ var FeatureTab = React.createClass({
             var inputs = [];
 
             inputs.push(
-                <div className="col-sm-12">
+                <div>
                     <div className="btn-group" data-toggle="buttons-radio">
                         <button className={"btn btn-default "+valetActive[0]} onClick={function(){self.handleValetRadio("true")}}>On</button>
                         <button className={"btn btn-default "+valetActive[1]} onClick={function(){self.handleValetRadio("false")}}>Off</button>
                     </div>
                     <div><br/>Valet is a preview feature for enabling a non-user account limited to basic member permissions that can be manipulated by 3rd parties.<br/><br/>IMPORTANT: The preview version of Valet should not be used without a secure connection and a trusted 3rd party, since user credentials are used to connect. OAuth2 will be used in the final release.</div>
-                    <br></br>
                 </div>
             );
 

web/react/components/user_settings.jsx

@@ -577,9 +577,9 @@ var SecurityTab = React.createClass({
                     { passwordSection }
                     <div className="divider-dark"/>
                     <br></br>
-                    <a data-toggle="modal" className="security-links" data-target="#access-history" href="#" onClick={this.handleHistoryOpen}><i className="fa fa-clock-o"></i>View Access History</a>
+                    <a data-toggle="modal" className="security-links theme" data-target="#access-history" href="#" onClick={this.handleHistoryOpen}><i className="fa fa-clock-o"></i>View Access History</a>
                     <b>   </b>
-                    <a data-toggle="modal" className="security-links" data-target="#activity-log" href="#" onClick={this.handleDevicesOpen}><i className="fa fa-globe"></i>View and Logout of Active Devices</a>
+                    <a data-toggle="modal" className="security-links theme" data-target="#activity-log" href="#" onClick={this.handleDevicesOpen}><i className="fa fa-globe"></i>View and Logout of Active Devices</a>
                 </div>
             </div>
         );

web/sass-files/sass/partials/_access-history.scss

@@ -12,7 +12,7 @@
     }
     .access__date {
         font-weight: 600;
-        font-size: 16px;
+        font-size: 15px;
         width: 190px;
     }
     .access__report {
@@ -21,7 +21,7 @@
     }
     .report__time {
         font-weight: 600;
-        font-size: 16px;
+        font-size: 15px;
     }
     .report__info {
         color: #999;

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

@@ -92,10 +92,10 @@
 		.navbar-right {
 			font-size: 0.85em;
 			position: absolute;
-			top: 20px;
+			top: 10px;
 			right: 22px;
 			.dropdown-toggle {
-				padding: 0 10px;
+				padding: 10px;
 			}
 			.dropdown-menu {
 				li a {
@@ -119,6 +119,7 @@
 		}
 		.header__info {
 			color: #fff;
+			 padding-left: 3px
 		}
 		.team__name, .user__name {
 			display: block;

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

@@ -451,13 +451,15 @@
         color: #fff;
         .search__form {
             border: none;
-            padding: 0 60px 0 25px;
+            padding: 0 60px 0 35px;
             .form-control {
-                line-height: 31px;
+                line-height: normal;
                 background: none;
                 color: #fff;
                 border-radius: 0;
-                padding: 0 10px 0;
+                padding: 0;
+                border-bottom: 1px solid #FFF;
+                border-bottom: 1px solid rgba(#fff, 0.6);
                 @include input-placeholder {
                     color: rgba(#fff, 0.6);
                 }

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

@@ -163,8 +163,10 @@
 }
 
 .profile-img {
-    width:158px;
+    width:128px;
-    max-height:128px;
+    height:128px;
+    margin-bottom: 10px;
+    @include border-radius(128px);
 }
 
 .sel-btn {
@@ -232,4 +234,4 @@
 
 .color-btn {
     margin:4px;
-}
+}

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

@@ -6,7 +6,7 @@
 }
 .signup-team__container {
     padding: 100px 0px 50px 0px;
-    max-width: 600px;
+    max-width: 380px;
     margin: 0 auto;
     font-size: 1.1em;
     position: relative;