From 2f394ecb97657982e852762dfff98d27120df2cd Mon Sep 17 00:00:00 2001
From: Liran Tal <liran.tal@gmail.com>
Date: Fri, 26 Aug 2016 21:27:58 +0300
Subject: [PATCH] fix(ui): update social login design

* Update social login design

- Responsive images
- Mobile layout as well

* changes according to hyperreality advices
---
 modules/users/client/css/users.css             | 11 +++++++++++
 .../authentication.client.view.html            | 18 ++++++++++--------
 .../authentication/signin.client.view.html     |  2 +-
 .../authentication/signup.client.view.html     |  2 +-
 4 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/modules/users/client/css/users.css b/modules/users/client/css/users.css
index 3a196c58..cd014163 100644
--- a/modules/users/client/css/users.css
+++ b/modules/users/client/css/users.css
@@ -39,3 +39,14 @@
     width: 300px;
     height: 300px;
 }
+
+.social {
+   -webkit-transition-duration: 0.4s;
+   -moz-transition-duration: 0.4s;
+   -o-transition-duration: 0.4s;
+   transition-duration: 0.4s;
+}
+
+.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 5110d714..f0e94887 100644
--- a/modules/users/client/views/authentication/authentication.client.view.html
+++ b/modules/users/client/views/authentication/authentication.client.view.html
@@ -1,12 +1,14 @@
 <section class="row">
-  <h3 class="col-md-12 text-center">Sign in using your social accounts</h3>
-  <div class="col-md-12 text-center">
-    <img ng-click="vm.callOauthProvider('/api/auth/facebook')" ng-src="/modules/users/client/img/buttons/facebook.png">
-    <img ng-click="vm.callOauthProvider('/api/auth/twitter')" ng-src="/modules/users/client/img/buttons/twitter.png">
-    <img ng-click="vm.callOauthProvider('/api/auth/google')" ng-src="/modules/users/client/img/buttons/google.png">
-    <img ng-click="vm.callOauthProvider('/api/auth/linkedin')" ng-src="/modules/users/client/img/buttons/linkedin.png">
-    <img ng-click="vm.callOauthProvider('/api/auth/github')" ng-src="/modules/users/client/img/buttons/github.png">
-    <img ng-click="vm.callOauthProvider('/api/auth/paypal')"  ng-src="/modules/users/client/img/buttons/paypal.png">
+  <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>
   </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 c9ac85d7..c30190c6 100644
--- a/modules/users/client/views/authentication/signin.client.view.html
+++ b/modules/users/client/views/authentication/signin.client.view.html
@@ -1,5 +1,5 @@
 <div>
-  <h3 class="col-md-12 text-center">Or with your account</h3>
+  <h3 class="col-xs-12 text-center">Or with your account</h3>
   <div class="col-xs-offset-2 col-xs-8 col-md-offset-4 col-md-4">
     <form name="vm.userForm" ng-submit="vm.signin(vm.userForm.$valid)" class="signin" novalidate autocomplete="off">
       <fieldset>
diff --git a/modules/users/client/views/authentication/signup.client.view.html b/modules/users/client/views/authentication/signup.client.view.html
index fe6c33a3..927f59bf 100644
--- a/modules/users/client/views/authentication/signup.client.view.html
+++ b/modules/users/client/views/authentication/signup.client.view.html
@@ -1,5 +1,5 @@
 <div>
-  <h3 class="col-md-12 text-center">Or sign up using your email</h3>
+  <h3 class="col-xs-12 text-center">Or sign up using your email</h3>
   <div class="col-xs-offset-2 col-xs-8 col-md-offset-4 col-md-4">
     <form name="vm.userForm" ng-submit="vm.signup(vm.userForm.$valid)" class="signin" novalidate autocomplete="off">
       <fieldset>