From 1803ca06d394949ababd2a80c6e9a3585c9be1d6 Mon Sep 17 00:00:00 2001
From: cleverbeagle <business@cleverbeagle.com>
Date: Thu, 7 Sep 2017 10:59:21 -0500
Subject: [PATCH] improve ux on edit profile view for OAuth users

---
 imports/ui/pages/Profile/Profile.js   | 11 +++++-
 imports/ui/pages/Profile/Profile.scss | 51 +++++++++++++++------------
 public/facebook.svg                   | 13 +++++++
 public/github.svg                     | 29 +++++++++++++++
 public/google.svg                     | 15 ++++++++
 5 files changed, 96 insertions(+), 23 deletions(-)
 create mode 100644 public/facebook.svg
 create mode 100644 public/github.svg
 create mode 100644 public/google.svg

diff --git a/imports/ui/pages/Profile/Profile.js b/imports/ui/pages/Profile/Profile.js
index 321e62c..f8c5684 100644
--- a/imports/ui/pages/Profile/Profile.js
+++ b/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 />;
diff --git a/imports/ui/pages/Profile/Profile.scss b/imports/ui/pages/Profile/Profile.scss
index c1a8971..84b579f 100644
--- a/imports/ui/pages/Profile/Profile.scss
+++ b/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;
+      }
     }
   }
 }
diff --git a/public/facebook.svg b/public/facebook.svg
new file mode 100644
index 0000000..d8a6181
--- /dev/null
+++ b/public/facebook.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="137px" height="137px" viewBox="0 0 137 137" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
+    <title>facebook-icon</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="facebook-icon" fill-rule="nonzero">
+            <path d="M129.439393,137 C133.614692,137 137,133.614204 137,129.438937 L137,7.56106334 C137,3.38425598 133.614179,0 129.439393,0 L7.56112,0 C3.38428134,0 0,3.38476929 0,7.56106334 L0,129.438423 C0,133.614204 3.38428134,136.999487 7.56112,136.999487 L129.439393,136.999487 L129.439393,137 Z" id="Shape" fill="#485A96"></path>
+            <path d="M93.9458476,137 L93.9458476,84.0869828 L111.635619,84.0869828 L114.284087,63.4656707 L93.9453377,63.4656707 L93.9453377,50.2998742 C93.9453377,44.3295231 95.5964238,40.2610632 104.124146,40.2610632 L115,40.2559437 L115,21.8124633 C113.118945,21.5616082 106.662474,21 99.1520209,21 C83.4707822,21 72.7351531,30.6097976 72.7351531,48.258221 L72.7351531,63.4656707 L55,63.4656707 L55,84.0869828 L72.7351531,84.0869828 L72.7351531,136.999488 L93.9458476,136.999488 L93.9458476,137 Z" id="Shape" fill="#FFFFFF"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/public/github.svg b/public/github.svg
new file mode 100644
index 0000000..ace7635
--- /dev/null
+++ b/public/github.svg
@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="155px" height="137px" viewBox="0 0 155 137" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
+    <title>github-octocat</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <path d="M6.10987654,32.7478261 C7.07777778,37.3130435 9.43703704,39.9913043 11.7962963,41.573913 L36.6592593,41.573913 C39.6839506,39.5043478 42.7691358,35.6086957 42.7691358,28.3043478 L42.7691358,9.43478261 C42.7691358,9.43478261 43.1320988,4.74782609 47.4271605,3.22608696 C47.4271605,3.22608696 49.9074074,1.46086957 47.245679,0.486956522 C47.245679,0.486956522 35.4493827,-0.486956522 35.4493827,9.25217391 L35.4493827,23.6173913 C35.4493827,23.6173913 35.9333333,28.9130435 33.1506173,31.1043478 L33.1506173,13.3304348 C33.1506173,13.3304348 33.3320988,7.66956522 36.2358025,5.53913043 C36.2358025,5.53913043 38.1716049,2.06956522 33.937037,2.9826087 C33.937037,2.9826087 25.8308642,4.13913043 25.4679012,13.6956522 L25.2864198,31.9565217 L23.3506173,31.9565217 L23.1691358,13.6956522 C22.8061728,4.2 14.7,2.9826087 14.7,2.9826087 C10.4654321,2.00869565 12.4012346,5.53913043 12.4012346,5.53913043 C15.3049383,7.66956522 15.4864198,13.3304348 15.4864198,13.3304348 L15.4864198,31.2869565 C12.7037037,29.2782609 13.1876543,23.6173913 13.1876543,23.6173913 L13.1876543,9.25217391 C13.1876543,-0.486956522 1.39135802,0.486956522 1.39135802,0.486956522 C-1.3308642,1.46086957 1.20987654,3.22608696 1.20987654,3.22608696 C5.44444444,4.80869565 5.86790123,9.43478261 5.86790123,9.43478261 L5.86790123,22.6434783 L6.10987654,32.7478261 L6.10987654,32.7478261 Z" id="path-1"></path>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="github-octocat">
+            <path d="M122,121.5 C122,130.083665 102.518776,137 78.5,137 C54.4812239,137 35,130.021912 35,121.5 C35,112.916335 54.4812239,106 78.5,106 C102.518776,106 122,112.916335 122,121.5 Z" id="Shape" fill="#9EDCF2" fill-rule="nonzero"></path>
+            <g id="Clipped" transform="translate(54.000000, 116.000000)">
+                <mask id="mask-2" fill="white">
+                    <use xlink:href="#path-1"></use>
+                </mask>
+                <g id="a"></g>
+                <path d="M68.2975309,5.35652174 C68.2975309,13.8173913 48.8185185,20.6347826 24.8024691,20.6347826 C0.786419753,20.6347826 -18.6925926,13.7565217 -18.6925926,5.35652174 C-18.6925926,-3.10434783 0.786419753,-9.92173913 24.8024691,-9.92173913 C48.8185185,-9.92173913 68.2975309,-3.10434783 68.2975309,5.35652174 Z" id="Shape" fill="#7DBCE7" fill-rule="nonzero" mask="url(#mask-2)"></path>
+            </g>
+            <path d="M28.5128283,77 L27.0305301,81.1941748 C27.0305301,81.1941748 26.677602,82.7087379 28.371657,83 C30.2068833,82.9417476 30.065712,81.5436893 29.9245408,81.1359223 L28.5128283,77 Z" id="Shape" fill="#9EDCF2" fill-rule="nonzero"></path>
+            <path d="M154.878906,58.1706722 L155,57.6228591 C142.224609,55.0663978 129.146484,55.0055297 121.214844,55.3707385 C122.486328,50.6838928 122.910156,45.2057615 122.910156,39.1798171 C122.910156,30.4756751 119.640625,23.5367088 114.433594,18.30205 C115.341797,15.3195118 116.552734,8.68488614 113.222656,0.224216684 C113.222656,0.224216684 107.289062,-1.66269521 93.7871094,7.4066555 C88.5195312,6.06755674 82.8886719,5.39800736 77.2578125,5.39800736 C71.0820312,5.39800736 64.8457031,6.18929299 58.9726562,7.77186426 C45.046875,-1.78443146 38.9316406,0.163348559 38.9316406,0.163348559 C34.9355469,10.2065893 37.4179687,17.6933687 38.1445312,19.5194125 C33.421875,24.632335 30.5761719,31.1452245 30.5761719,39.1189489 C30.5761719,45.1448934 31.2421875,50.5621565 32.9375,55.2490022 C24.9453125,54.9446616 12.3515625,55.0663978 0,57.561991 L0.12109375,58.1098041 C12.4726562,55.614211 25.1875,55.5533428 33.1191406,55.8576835 C33.4824219,56.8315735 33.90625,57.8054635 34.3300781,58.7184854 C26.4589844,58.9619579 13.078125,59.996716 0.2421875,63.6488035 L0.423828125,64.1966167 C13.3808594,60.5445291 26.8828125,59.5706391 34.6933594,59.3271666 C39.4160156,68.0921767 48.6191406,73.8137805 65.0878906,75.5789562 C62.7265625,77.1615274 60.3652344,79.839725 59.3964844,84.4048344 C56.1875,85.9265375 46.1367187,89.7003613 40.0820312,79.2310437 C40.0820312,79.2310437 36.6914062,73.0224949 30.2128906,72.5355499 C30.2128906,72.5355499 23.9160156,72.4138136 29.7890625,76.491978 C29.7890625,76.491978 33.9667969,78.5006262 36.8730469,85.9874056 C36.8730469,85.9874056 40.6875,98.769712 58.9121094,94.6306795 L58.9121094,107.717326 C58.9121094,107.717326 58.5488281,112.404172 54.25,113.925875 C54.25,113.925875 51.7070312,115.691051 54.4316406,116.664941 C54.4316406,116.664941 66.2382812,117.638831 66.2382812,107.899931 L66.2382812,93.5350532 C66.2382812,93.5350532 65.7539062,87.8134494 68.5390625,85.8656694 L68.5390625,109.482502 C68.5390625,109.482502 68.3574219,115.143238 65.4511719,117.273622 C65.4511719,117.273622 63.5136719,120.743105 67.7519531,119.830083 C67.7519531,119.830083 75.8652344,118.673589 76.2285156,109.117293 L76.4101562,85.19612 L78.3476562,85.19612 L78.5292969,109.117293 C78.8925781,118.612721 87.0058594,119.830083 87.0058594,119.830083 C91.2441406,120.803973 89.3066406,117.273622 89.3066406,117.273622 C86.4003906,115.143238 86.21875,109.482502 86.21875,109.482502 L86.21875,86.0482738 C89.0039062,88.2395263 88.5195312,93.5350532 88.5195312,93.5350532 L88.5195312,107.899931 C88.5195312,117.638831 100.326172,116.664941 100.326172,116.664941 C103.050781,115.691051 100.507812,113.925875 100.507812,113.925875 C96.2695312,112.343304 95.8457031,107.717326 95.8457031,107.717326 L95.8457031,88.8482075 C95.8457031,81.4831643 92.7578125,77.5876043 89.7304687,75.5789562 C107.289062,73.8137805 115.705078,68.1530448 119.580078,59.2662985 C127.269531,59.4489029 141.134766,60.4227929 154.333984,64.1966167 L154.515625,63.6488035 C141.376953,59.9358479 127.632812,58.9619579 119.822266,58.7184854 C120.185547,57.8054635 120.488281,56.8924416 120.791016,55.9185516 C128.904297,55.614211 142.042969,55.614211 154.878906,58.1706722 L154.878906,58.1706722 Z" id="Shape" fill="#010101" fill-rule="nonzero"></path>
+            <path d="M106.028846,38.4583817 C109.768357,41.9282043 112,46.0676418 112,50.5114497 C112,71.4521333 96.5594406,72 77.5,72 C58.4405594,72 43,69.0780441 43,50.5114497 C43,46.0676418 45.1713287,41.9282043 48.9108392,38.5192558 C55.1232517,32.7970923 65.618007,35.8407963 77.5,35.8407963 C89.381993,35.8407963 99.8164336,32.7362182 106.028846,38.4583817 L106.028846,38.4583817 Z" id="Shape" fill="#F5CCB3" fill-rule="nonzero"></path>
+            <path d="M65,52.0002816 C65,57.5556807 61.8823529,62 58,62 C54.1176471,62 51,57.4972028 51,52.0002816 C51,46.4448825 54.1176471,42.0005632 58,42.0005632 C61.8823529,41.9420853 65,46.4448825 65,52.0002816 L65,52.0002816 Z" id="Shape" fill="#FFFFFF" fill-rule="nonzero"></path>
+            <path d="M63,52 C63,55.8684211 60.9493671,59 58.5,59 C55.9936709,59 54,55.8684211 54,52 C54,48.1315789 56.0506329,45 58.5,45 C60.9493671,45 63,48.1315789 63,52 Z" id="Shape" fill="#AF5C51" fill-rule="nonzero"></path>
+            <path d="M104,52.0002816 C104,57.5556807 100.882353,62 97,62 C93.1176471,62 90,57.4972028 90,52.0002816 C90,46.4448825 93.1176471,42.0005632 97,42.0005632 C100.823529,41.9420853 104,46.4448825 104,52.0002816 L104,52.0002816 Z" id="Shape" fill="#FFFFFF" fill-rule="nonzero"></path>
+            <path d="M102,52.0515464 C102,55.9484536 99.8141915,59.1030928 97.2033646,59.1030928 C94.5318208,59.1030928 92.4067292,55.9484536 92.4067292,52.0515464 C92.4067292,48.1546392 94.5925377,45 97.2033646,45 C99.8749084,45 102,48.1546392 102,52.0515464 Z M79.0490103,61.3298969 C79.0490103,62.3195876 78.2596906,63.185567 77.2275032,63.185567 C76.2560328,63.185567 75.4059961,62.3814433 75.4059961,61.3298969 C75.4059961,60.2783505 76.1953158,59.4742268 77.2275032,59.4742268 C78.1989737,59.4742268 79.0490103,60.2783505 79.0490103,61.3298969 Z M73.0380368,65.9690722 C72.916603,65.6597938 73.0987537,65.3505155 73.4023383,65.2268041 C73.7059228,65.1030928 74.0095073,65.2886598 74.1309411,65.5979381 C74.6166763,66.9587629 75.8310144,67.8247423 77.2275032,67.8247423 C78.623992,67.8247423 79.8383301,66.8969072 80.3240653,65.5979381 C80.4454991,65.2886598 80.7490836,65.1030928 81.0526682,65.2268041 C81.3562527,65.3505155 81.5384034,65.6597938 81.4169696,65.9690722 C80.8098005,67.7628866 79.1097272,69 77.2275032,69 C75.3452792,69 73.6452059,67.7628866 73.0380368,65.9690722 L73.0380368,65.9690722 Z" id="Shape" fill="#AF5C51" fill-rule="nonzero"></path>
+            <path d="M33.5088496,73.8139535 C33.5088496,74.2790698 32.9712389,74.627907 32.2544248,74.627907 C31.5973451,74.627907 31,74.2790698 31,73.8139535 C31,73.3488372 31.5376106,73 32.2544248,73 C32.9712389,73 33.5088496,73.3488372 33.5088496,73.8139535 Z M36.9734513,75.6744186 C36.9734513,76.1395349 36.4358407,76.4883721 35.7190265,76.4883721 C35.0619469,76.4883721 34.4646018,76.1395349 34.4646018,75.6744186 C34.4646018,75.2093023 35.0022124,74.8604651 35.7190265,74.8604651 C36.4358407,74.8604651 36.9734513,75.2093023 36.9734513,75.6744186 Z M39.0641593,78.1162791 C39.0641593,78.5813953 38.5265487,78.9302326 37.8097345,78.9302326 C37.1526549,78.9302326 36.5553097,78.5813953 36.5553097,78.1162791 C36.5553097,77.6511628 37.0929204,77.3023256 37.8097345,77.3023256 C38.5265487,77.244186 39.0641593,77.6511628 39.0641593,78.1162791 Z M40.9756637,80.9069767 C40.9756637,81.372093 40.4380531,81.7209302 39.7212389,81.7209302 C39.0641593,81.7209302 38.4668142,81.372093 38.4668142,80.9069767 C38.4668142,80.4418605 39.0044248,80.0930233 39.7212389,80.0930233 C40.4380531,80.0348837 40.9756637,80.4418605 40.9756637,80.9069767 Z M43.0663717,83.4651163 C43.0663717,83.9302326 42.5287611,84.2790698 41.8119469,84.2790698 C41.1548673,84.2790698 40.5575221,83.9302326 40.5575221,83.4651163 C40.5575221,83 41.0951327,82.6511628 41.8119469,82.6511628 C42.5287611,82.6511628 43.0663717,83 43.0663717,83.4651163 Z M45.9336283,85.7325581 C45.9336283,86.1976744 45.3960177,86.5465116 44.6792035,86.5465116 C44.0221239,86.5465116 43.4247788,86.1976744 43.4247788,85.7325581 C43.4247788,85.2674419 43.9623894,84.9186047 44.6792035,84.9186047 C45.3960177,84.8604651 45.9336283,85.2674419 45.9336283,85.7325581 Z M49.9358407,87.1860465 C49.9358407,87.6511628 49.3982301,88 48.6814159,88 C48.0243363,88 47.4269912,87.6511628 47.4269912,87.1860465 C47.4269912,86.7209302 47.9646018,86.372093 48.6814159,86.372093 C49.3982301,86.372093 49.9358407,86.7209302 49.9358407,87.1860465 Z M53.9380531,87.1860465 C53.9380531,87.6511628 53.4004425,88 52.6836283,88 C52.0265487,88 51.4292035,87.6511628 51.4292035,87.1860465 C51.4292035,86.7209302 51.9668142,86.372093 52.6836283,86.372093 C53.4004425,86.372093 53.9380531,86.7209302 53.9380531,87.1860465 Z M58,86.5465116 C58,87.0116279 57.4623894,87.3604651 56.7455752,87.3604651 C56.0884956,87.3604651 55.4911504,87.0116279 55.4911504,86.5465116 C55.4911504,86.0813953 56.0287611,85.7325581 56.7455752,85.7325581 C57.4026549,85.7325581 58,86.0813953 58,86.5465116 Z" id="Shape" fill="#C4E5D9" fill-rule="nonzero"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/public/google.svg b/public/google.svg
new file mode 100644
index 0000000..67dec77
--- /dev/null
+++ b/public/google.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="134px" height="137px" viewBox="0 0 134 137" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
+    <title>google-icon</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="google-icon" fill-rule="nonzero">
+            <path d="M134,69.9195059 C134,64.3214551 133.541316,60.2363487 132.54864,56 L68,56 L68,81.2668497 L105.888596,81.2668497 C105.125,87.5460124 101,97.0023061 91.8331578,103.356568 L91.704663,104.202482 L112.11375,119.860231 L113.527719,120 C126.513596,108.122787 134,90.6475223 134,69.9195059" id="Shape" fill="#4285F4"></path>
+            <path d="M67.8743931,137 C86.2726834,137 101.718207,130.905519 113,120.393393 L91.4970504,103.633964 C85.742887,107.671393 78.0198643,110.489926 67.8743931,110.489926 C49.8545288,110.489926 34.5603758,98.5304593 29.1084312,82 L28.3092999,82.0682708 L7.27507657,98.4464337 L7,99.215793 C18.205586,121.611764 41.2227617,137 67.8743931,137" id="Shape" fill="#34A853"></path>
+            <path d="M29,81.7521724 C27.5799115,77.4783605 26.7580533,72.8988629 26.7580533,68.1673116 C26.7580533,63.4352342 27.5799115,58.8562627 28.9252856,54.5824508 L28.8876708,53.6722335 L7.86304437,37 L7.1751568,37.3340971 C2.61603383,46.645146 0,57.1010692 0,68.1673116 C0,79.233554 2.61603383,89.6889511 7.1751568,99 L29,81.7521724" id="Shape" fill="#FBBC05"></path>
+            <path d="M68.1865525,26.5095484 C81.0476641,26.5095484 89.7231696,32.0704669 94.6700335,36.7176072 L114,17.8255037 C102.128366,6.77981476 86.6791878,0 68.1865525,0 C41.3982535,0 18.2630474,15.3877113 7,37.7836818 L29.1457283,55 C34.7017034,38.4695407 50.0742836,26.5095484 68.1865525,26.5095484" id="Shape" fill="#EB4335"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file