fix(sidebar): fix ordering and add hover state

internal_packages/github-contact-card/lib/github-contact-card-section.jsx

@@ -102,6 +102,10 @@ export default class GithubContactCardSection extends React.Component {
     );
   }
 
+  static containerStyles = {
+    order: 10,
+  }
+
   render() {
     return (
       <div className="sidebar-github-profile">

internal_packages/github-contact-card/stylesheets/sidebar-github-profile.less

@@ -1,6 +1,8 @@
 @import "ui-variables";
 
 .sidebar-github-profile {
+  margin-bottom: 20px;
+
   a{ text-decoration: none; }
 
   .logo {

internal_packages/participant-profile/lib/sidebar-participant-profile.jsx

@@ -80,14 +80,14 @@ export default class SidebarParticipantProfile extends React.Component {
       <div className="core-personal-info">
         <div className="selectable full-name" onClick={this._select}>{this.props.contact.fullName()}</div>
         <div className="selectable email" onClick={this._select}>{this.props.contact.email}</div>
-        <div className="social-profiles-wrap">{this._renderSocialProfiles()}</div>
+        {this._renderSocialProfiles()}
       </div>
     )
   }
 
   _renderSocialProfiles() {
     if (!this.state.socialProfiles) { return false }
-    return _.map(this.state.socialProfiles, (profile, type) => {
+    const profiles = _.map(this.state.socialProfiles, (profile, type) => {
       const linkFn = () => {shell.openExternal(profile.url)}
       return (
         <a className="social-profile-item" onClick={linkFn} key={type}>
@@ -96,6 +96,7 @@ export default class SidebarParticipantProfile extends React.Component {
         </a>
       )
     });
+    return <div className="social-profiles-wrap">{profiles}</div>
   }
 
   _renderAdditionalInfo() {

internal_packages/participant-profile/lib/sidebar-related-threads.jsx

@@ -16,7 +16,7 @@ export default class RelatedThreads extends React.Component {
   }
 
   static containerStyles = {
-    order: 1,
+    order: 99,
   }
 
   _onClick(thread) {

internal_packages/participant-profile/stylesheets/participant-profile.less

@@ -20,6 +20,10 @@
     padding: 0.5em 15px;
     border-top: 1px solid rgba(0,0,0,0.08);
 
+    &:hover {
+      background: darken(#f9fcfe, 5%);
+    }
+
     .subject {
       flex: 1;
       overflow: hidden;