From 614865c4391e1d884bb2b3f03c360b5f8d60b5aa Mon Sep 17 00:00:00 2001
From: Evan Morikawa <evan@evanmorikawa.com>
Date: Wed, 9 Mar 2016 20:57:13 -0500
Subject: [PATCH] fix(sidebar): fix ordering and add hover state

---
 .../github-contact-card/lib/github-contact-card-section.jsx  | 4 ++++
 .../stylesheets/sidebar-github-profile.less                  | 2 ++
 .../participant-profile/lib/sidebar-participant-profile.jsx  | 5 +++--
 .../participant-profile/lib/sidebar-related-threads.jsx      | 2 +-
 .../participant-profile/stylesheets/participant-profile.less | 4 ++++
 5 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/internal_packages/github-contact-card/lib/github-contact-card-section.jsx b/internal_packages/github-contact-card/lib/github-contact-card-section.jsx
index 49c9530b5..6e19745f2 100644
--- a/internal_packages/github-contact-card/lib/github-contact-card-section.jsx
+++ b/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">
diff --git a/internal_packages/github-contact-card/stylesheets/sidebar-github-profile.less b/internal_packages/github-contact-card/stylesheets/sidebar-github-profile.less
index 7665e3181..6d894a11e 100644
--- a/internal_packages/github-contact-card/stylesheets/sidebar-github-profile.less
+++ b/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 {
diff --git a/internal_packages/participant-profile/lib/sidebar-participant-profile.jsx b/internal_packages/participant-profile/lib/sidebar-participant-profile.jsx
index 17f363143..c520b91be 100644
--- a/internal_packages/participant-profile/lib/sidebar-participant-profile.jsx
+++ b/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() {
diff --git a/internal_packages/participant-profile/lib/sidebar-related-threads.jsx b/internal_packages/participant-profile/lib/sidebar-related-threads.jsx
index 5b9fcf95b..6447d753d 100644
--- a/internal_packages/participant-profile/lib/sidebar-related-threads.jsx
+++ b/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) {
diff --git a/internal_packages/participant-profile/stylesheets/participant-profile.less b/internal_packages/participant-profile/stylesheets/participant-profile.less
index 08b482c40..77ed9f1df 100644
--- a/internal_packages/participant-profile/stylesheets/participant-profile.less
+++ b/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;