improve ux on edit profile view for OAuth users

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://github.com/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;
+
+    img {
+      width: 100px;
+    }
+
+    &.github img {
+      width: 125px;
+    }
 
     p {
-      margin: 0;
+      margin: 20px 0 0 0;
+      color: $gray-light;
     }
 
-    .ServiceIcon {
-      float: left;
-      width: auto;
-      margin-right: 15px;
-      height: 30px;
-      text-align: center;
+    .btn {
+      margin-top: 20px;
 
-      i {
-        font-size: 30px;
-        position: relative;
-        top: 5px;
+      &.btn-facebook {
+        background: $facebook;
+        border-color: $facebook;
+        color: #fff;
       }
-    }
 
-    &.facebook {
-      background: $facebook;
-    }
+      &.btn-google {
+        background: $google;
+        border-color: $google;
+        color: #fff;
+      }
 
-    &.github {
-      background: $github;
-    }
-
-    &.google {
-      background: $google;
+      &.btn-github {
+        background: $github;
+        border-color: $github;
+        color: #fff;
+      }
     }
   }
 }