From c2cfc388bf69f6bb974a8756bcfbf250b28f10ea Mon Sep 17 00:00:00 2001
From: hyperreality <hyperreality@users.noreply.github.com>
Date: Sat, 3 Sep 2016 23:29:43 +0100
Subject: [PATCH] feat(ui): improved social login buttons UI (#1471)

---
 modules/users/client/css/users.css            | 45 +++++-----------
 .../authentication.client.view.html           | 18 +++----
 .../authentication/signin.client.view.html    |  3 ++
 .../manage-social-accounts.client.view.html   | 52 ++++++++++++-------
 4 files changed, 56 insertions(+), 62 deletions(-)

diff --git a/modules/users/client/css/users.css b/modules/users/client/css/users.css
index cd0141635b..868b6f932b 100644
--- a/modules/users/client/css/users.css
+++ b/modules/users/client/css/users.css
@@ -7,46 +7,27 @@
   display: inline-block;
   position: relative;
 }
-.btn-remove-account {
+.btn-add-remove-account {
   top: 10px;
   right: 10px;
   position: absolute;
-}
-.btn-file {
-  position: relative;
-  overflow: hidden;
-}
-.btn-file input[type=file] {
-  position: absolute;
-  top: 0;
-  right: 0;
-  min-width: 100%;
-  min-height: 100%;
-  font-size: 100px;
-  text-align: right;
-  filter: alpha(opacity=0);
-  opacity: 0;
-  background: white;
-  cursor: inherit;
-  display: block;
+  pointer-events: none;
 }
 .user-profile-picture {
   min-height: 150px;
   max-height: 150px;
 }
 .cropArea {
-    background: #E4E4E4;
-    width: 300px;
-    height: 300px;
+  background: #E4E4E4;
+  width: 300px;
+  height: 300px;
+}
+.social-button {
+  -webkit-transition-duration: 0.4s;
+  -moz-transition-duration: 0.4s;
+  -o-transition-duration: 0.4s;
+  transition-duration: 0.4s;
 }
-
-.social {
-   -webkit-transition-duration: 0.4s;
-   -moz-transition-duration: 0.4s;
-   -o-transition-duration: 0.4s;
-   transition-duration: 0.4s;
+.social-button:hover {
+  opacity: 0.65;
 }
-
-.social:hover {
-    opacity: 0.65;
-}
\ No newline at end of file
diff --git a/modules/users/client/views/authentication/authentication.client.view.html b/modules/users/client/views/authentication/authentication.client.view.html
index f0e9488749..eb18e06cb6 100644
--- a/modules/users/client/views/authentication/authentication.client.view.html
+++ b/modules/users/client/views/authentication/authentication.client.view.html
@@ -1,14 +1,12 @@
 <section class="row">
-  <h3 class="col-xs-12 text-center">Sign in using your social accounts</h3>
-  <div class="row col-xs-12 col-md-6 text-center">
-    <div class="col-xs-4 social"><a class="btn"><img class="img-responsive" ng-click="vm.callOauthProvider('/api/auth/facebook')" ng-src="/modules/users/client/img/buttons/facebook.png"></a></div>
-    <div class="col-xs-4 social"><a class="btn"><img class="img-responsive" ng-click="vm.callOauthProvider('/api/auth/twitter')" ng-src="/modules/users/client/img/buttons/twitter.png"></a></div>
-    <div class="col-xs-4 social"><a class="btn"><img class="img-responsive" ng-click="vm.callOauthProvider('/api/auth/google')" ng-src="/modules/users/client/img/buttons/google.png"></a></div>
-  </div>
-  <div class="row col-xs-12 col-md-6 text-center">
-    <div class="col-xs-4 social"><a class="btn"><img class="img-responsive" ng-click="vm.callOauthProvider('/api/auth/linkedin')" ng-src="/modules/users/client/img/buttons/linkedin.png"></a></div>
-    <div class="col-xs-4 social"><a class="btn"><img class="img-responsive" ng-click="vm.callOauthProvider('/api/auth/github')" ng-src="/modules/users/client/img/buttons/github.png"></a></div>
-    <div class="col-xs-4 social"><a class="btn"><img class="img-responsive" ng-click="vm.callOauthProvider('/api/auth/paypal')"  ng-src="/modules/users/client/img/buttons/paypal.png"></a></div>
+  <h3 class="col-md-12 text-center">Sign in using your social accounts</h3>
+  <div class="col-md-12 text-center">
+    <div class="social-account-container social-button"><a class="btn"><img class="img-responsive" ng-click="vm.callOauthProvider('/api/auth/facebook')" ng-src="/modules/users/client/img/buttons/facebook.png"></a></div>
+    <div class="social-account-container social-button"><a class="btn"><img class="img-responsive" ng-click="vm.callOauthProvider('/api/auth/twitter')" ng-src="/modules/users/client/img/buttons/twitter.png"></a></div>
+    <div class="social-account-container social-button"><a class="btn"><img class="img-responsive" ng-click="vm.callOauthProvider('/api/auth/google')" ng-src="/modules/users/client/img/buttons/google.png"></a></div>
+    <div class="social-account-container social-button"><a class="btn"><img class="img-responsive" ng-click="vm.callOauthProvider('/api/auth/linkedin')" ng-src="/modules/users/client/img/buttons/linkedin.png"></a></div>
+    <div class="social-account-container social-button"><a class="btn"><img class="img-responsive" ng-click="vm.callOauthProvider('/api/auth/github')" ng-src="/modules/users/client/img/buttons/github.png"></a></div>
+    <div class="social-account-container social-button"><a class="btn"><img class="img-responsive" ng-click="vm.callOauthProvider('/api/auth/paypal')"  ng-src="/modules/users/client/img/buttons/paypal.png"></a></div>
   </div>
   <div ui-view></div>
 </section>
diff --git a/modules/users/client/views/authentication/signin.client.view.html b/modules/users/client/views/authentication/signin.client.view.html
index c30190c6ce..061677fc13 100644
--- a/modules/users/client/views/authentication/signin.client.view.html
+++ b/modules/users/client/views/authentication/signin.client.view.html
@@ -25,6 +25,9 @@ <h3 class="col-xs-12 text-center">Or with your account</h3>
         <div class="text-center forgot-password">
           <a ui-sref="password.forgot">Forgot your password?</a>
         </div>
+        <p> 
+          &nbsp;
+        </p>
         <uib-alert type="danger" ng-show="vm.error" class="text-center text-danger">
           <span ng-bind="vm.error"></span>
         </uib-alert>
diff --git a/modules/users/client/views/settings/manage-social-accounts.client.view.html b/modules/users/client/views/settings/manage-social-accounts.client.view.html
index 1aea1f156e..abf706b242 100644
--- a/modules/users/client/views/settings/manage-social-accounts.client.view.html
+++ b/modules/users/client/views/settings/manage-social-accounts.client.view.html
@@ -8,47 +8,59 @@ <h3 class="col-md-12 text-center" ng-show="vm.hasConnectedAdditionalSocialAccoun
     </div>
     <div ng-repeat="(providerName, providerData) in vm.user.additionalProvidersData" class="social-account-container">
       <img ng-src="/modules/users/client/img/buttons/{{providerName}}.png">
-      <a class="btn btn-danger btn-remove-account" ng-click="vm.removeUserSocialAccount(providerName)">
+      <a class="btn btn-danger btn-add-remove-account" ng-click="vm.removeUserSocialAccount(providerName)">
         <i class="glyphicon glyphicon-trash"></i>
       </a>
     </div>
   </div>
-  <h3 class="col-md-12 text-center" ng-show="vm.hasConnectedAdditionalSocialAccounts()">Unconnected social accounts:</h3>
+  <h3 class="col-md-12 text-center" ng-show="!vm.hasConnectedAdditionalSocialAccounts()">Unconnected social accounts:</h3>
   <div class="col-md-12 text-center">
     <div class="social-account-container" ng-hide="vm.isConnectedSocialAccount('facebook')">
-      <img ng-src="/modules/users/client/img/buttons/facebook.png">
-      <a class="btn btn-success btn-remove-account" href="/api/auth/facebook" target="_self">
-        <i class="glyphicon glyphicon-plus"></i>
+      <a href="/api/auth/facebook" target="_self">
+        <img class="social-button" ng-src="/modules/users/client/img/buttons/facebook.png">
+        <span class="btn btn-success btn-add-remove-account">
+          <i class="glyphicon glyphicon-plus"></i>
+        </span>
       </a>
     </div>
     <div class="social-account-container" ng-hide="vm.isConnectedSocialAccount('twitter')">
-      <img ng-src="/modules/users/client/img/buttons/twitter.png">
-      <a class="btn btn-success btn-remove-account" href="/api/auth/twitter" target="_self">
-        <i class="glyphicon glyphicon-plus"></i>
+      <a href="/api/auth/twitter" target="_self">
+        <img class="social-button" ng-src="/modules/users/client/img/buttons/twitter.png">
+        <span class="btn btn-success btn-add-remove-account">
+          <i class="glyphicon glyphicon-plus"></i>
+        </span>
       </a>
     </div>
     <div class="social-account-container" ng-hide="vm.isConnectedSocialAccount('google')">
-      <img ng-src="/modules/users/client/img/buttons/google.png">
-      <a class="btn btn-success btn-remove-account" href="/api/auth/google" target="_self">
-        <i class="glyphicon glyphicon-plus"></i>
+      <a href="/api/auth/google" target="_self">
+        <img class="social-button" ng-src="/modules/users/client/img/buttons/google.png">
+        <span class="btn btn-success btn-add-remove-account">
+          <i class="glyphicon glyphicon-plus"></i>
+        </span>
       </a>
     </div>
     <div class="social-account-container" ng-hide="vm.isConnectedSocialAccount('linkedin')">
-      <img ng-src="/modules/users/client/img/buttons/linkedin.png">
-      <a class="btn btn-success btn-remove-account" href="/api/auth/linkedin" target="_self">
-        <i class="glyphicon glyphicon-plus"></i>
+      <a href="/api/auth/linkedin" target="_self">
+        <img class="social-button" ng-src="/modules/users/client/img/buttons/linkedin.png">
+        <span class="btn btn-success btn-add-remove-account">
+          <i class="glyphicon glyphicon-plus"></i>
+        </span>
       </a>
     </div>
     <div class="social-account-container" ng-hide="vm.isConnectedSocialAccount('github')">
-      <img ng-src="/modules/users/client/img/buttons/github.png">
-      <a class="btn btn-success btn-remove-account" href="/api/auth/github" target="_self">
-        <i class="glyphicon glyphicon-plus"></i>
+      <a href="/api/auth/github" target="_self">
+        <img class="social-button" ng-src="/modules/users/client/img/buttons/github.png">
+        <span class="btn btn-success btn-add-remove-account">
+          <i class="glyphicon glyphicon-plus"></i>
+        </span>
       </a>
     </div>
     <div class="social-account-container" ng-hide="vm.isConnectedSocialAccount('paypal')">
-      <img ng-src="/modules/users/client/img/buttons/paypal.png">
-      <a class="btn btn-success btn-remove-account" href="/api/auth/paypal" target="_self">
-        <i class="glyphicon glyphicon-plus"></i>
+      <a href="/api/auth/paypal" target="_self">
+        <img class="social-button" ng-src="/modules/users/client/img/buttons/paypal.png">
+        <span class="btn btn-success btn-add-remove-account">
+          <i class="glyphicon glyphicon-plus"></i>
+        </span>
       </a>
     </div>
   </div>