fix(ui): update social login design

* Update social login design 

- Responsive images
- Mobile layout as well

* changes according to hyperreality advices

Author: lirantal

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;
+}

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>

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>

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>