Merge branch 'refactor/oauth_profiles_#45'

Closes #45

imports/ui/pages/Profile/Profile.js

@@ -116,8 +116,17 @@ class Profile extends React.Component {
  return !loading ? (<div className="OAuthProfile">
  {Object.keys(user.services).map(service => (
  <div key={service} className={`LoggedInWith ${service}`}>
- <div className="ServiceIcon"><i className={`fa fa-${service === 'facebook' ? 'facebook-official' : service}`} /></div>
+ <img src={`/${service}.svg`} alt={service} />
  <p>{`You're logged in with ${_.capitalize(service)} using the email address ${user.services[service].email}.`}</p>
+ <Button
+ className={`btn btn-${service}`}
+ href={{
+ facebook: 'https://www.facebook.com/settings',
+ google: 'https://myaccount.google.com/privacy#personalinfo',
+ github: 'https:/settings/profile',
+ }[service]}
+ target="_blank"
+ >Edit Profile on {_.capitalize(service)}</Button>
  </div>
  ))}
  </div>) : <div />;

imports/ui/pages/Profile/Profile.scss

@@ -2,38 +2,45 @@
 
 .OAuthProfile {
  .LoggedInWith {
- padding: 10px 20px;
+ padding: 20px;
  border-radius: 3px;
  color: #fff;
+ border: 1px solid $gray-lighter;
+ text-align: center;
 
- p {
- margin: 0;
+ img {
+ width: 100px;
  }
 
- .ServiceIcon {
- float: left;
- width: auto;
- margin-right: 15px;
- height: 30px;
- text-align: center;
-
- i {
- font-size: 30px;
- position: relative;
- top: 5px;
- }
+ &.github img {
+ width: 125px;
  }
 
- &.facebook {
- background: $facebook;
+ p {
+ margin: 20px 0 0 0;
+ color: $gray-light;
  }
 
- &.github {
- background: $github;
- }
+ .btn {
+ margin-top: 20px;
 
- &.google {
- background: $google;
+ &.btn-facebook {
+ background: $facebook;
+ border-color: $facebook;
+ color: #fff;
+ }
+
+ &.btn-google {
+ background: $google;
+ border-color: $google;
+ color: #fff;
+ }
+
+ &.btn-github {
+ background: $github;
+ border-color: $github;
+ color: #fff;
+ }
  }
  }
 }