From 159685b2b241a085239436aa4f2a47b0c3d085fa Mon Sep 17 00:00:00 2001
From: Waheed Ahmed <waheed.ahmed@arbisoft.com>
Date: Wed, 10 Apr 2019 18:47:09 +0500
Subject: [PATCH] Fix Facebook and Google social auth buttons.

Facebook emailed that edX doesn't comply with Platform Policy 8.3, also fixed
Google button according to their policy.

PROD-174
---
 common/static/sass/_mixins.scss               |  4 +-
 lms/static/sass/multicourse/_account.scss     | 12 +++---
 .../partials/lms/theme/_variables-v1.scss     |  9 +++--
 lms/static/sass/views/_login-register.scss    | 38 +++++++++++++------
 4 files changed, 40 insertions(+), 23 deletions(-)

diff --git a/common/static/sass/_mixins.scss b/common/static/sass/_mixins.scss
index 0e2813edc4..c530acb4d5 100644
--- a/common/static/sass/_mixins.scss
+++ b/common/static/sass/_mixins.scss
@@ -471,8 +471,8 @@
   .icon-image {
     width: auto;
     height: auto;
-    max-height: 1.4em;
-    max-width: 1.4em;
+    max-height: 2em;
+    max-width: 2em;
     margin-top: -2px;
   }
 }
diff --git a/lms/static/sass/multicourse/_account.scss b/lms/static/sass/multicourse/_account.scss
index 0899945a14..e418ec72d6 100644
--- a/lms/static/sass/multicourse/_account.scss
+++ b/lms/static/sass/multicourse/_account.scss
@@ -593,22 +593,22 @@
 
       &.button-oa2-google-oauth2:hover,
       &.button-oa2-google-oauth2:focus {
-        background-color: $google-red;
-        border: 1px solid #a5382b;
+        background-color: $google-focus-blue;
+        border: 1px solid $google-focus-blue;
       }
 
       &.button-oa2-google-oauth2:hover {
-        box-shadow: 0 2px 1px 0 #8d3024;
+        box-shadow: 0 2px 1px 0 $google-focus-blue;
       }
 
       &.button-oa2-facebook:hover,
       &.button-oa2-facebook:focus {
-        background-color: $facebook-blue;
-        border: 1px solid #263a62;
+        background-color: $facebook-focus-blue;
+        border: 1px solid $facebook-focus-blue;
       }
 
       &.button-oa2-facebook:hover {
-        box-shadow: 0 2px 1px 0 #30487c;
+        box-shadow: 0 2px 1px 0 $facebook-focus-blue;
       }
 
       &.button-oa2-linkedin-oauth2:hover,
diff --git a/lms/static/sass/partials/lms/theme/_variables-v1.scss b/lms/static/sass/partials/lms/theme/_variables-v1.scss
index db3a5e8d44..971b195100 100644
--- a/lms/static/sass/partials/lms/theme/_variables-v1.scss
+++ b/lms/static/sass/partials/lms/theme/_variables-v1.scss
@@ -186,10 +186,13 @@ $ui-notification-height: ($baseline*10);
 
 // social platforms
 $twitter-blue: #55acee;
-$facebook-blue: #3b5998;
+$facebook-blue: #4267b2;
+$facebook-focus-blue: #29487d;
 $linkedin-blue: #0077b5;
-$google-red: #d73924;
-$microsoft-black: #000;
+$google-blue: #4285f4;
+$google-focus-blue: #287ae6;
+$microsoft-black: #2f2f2f;
+$microsoft-focus-black: #000;
 
 // shadows
 $shadow: rgba(0, 0, 0, 0.2) !default;
diff --git a/lms/static/sass/views/_login-register.scss b/lms/static/sass/views/_login-register.scss
index 274f75eb2d..e0867237e0 100644
--- a/lms/static/sass/views/_login-register.scss
+++ b/lms/static/sass/views/_login-register.scss
@@ -557,31 +557,43 @@
     }
 
     &.button-oa2-google-oauth2 {
-      color: $google-red;
+      color: white;
+      border-color: $google-blue;
+      background-color: $google-blue;
 
       .icon {
-        background: $google-red;
+        background: transparent;
+
+        .icon-image {
+          margin-left: 2px;
+        }
       }
 
       &:hover,
       &:focus {
-        background-color: $google-red;
-        border: 1px solid #a5382b;
+        background-color: $google-focus-blue;
+        border: 1px solid $google-focus-blue;
         color: $white;
       }
     }
 
     &.button-oa2-facebook {
-      color: $facebook-blue;
+      color: white;
+      border-color: $facebook-blue;
+      background-color: $facebook-blue;
 
       .icon {
-        background: $facebook-blue;
+        background: transparent;
+
+        .icon-image {
+          margin-left: 2px;
+        }
       }
 
       &:hover,
       &:focus {
-        background-color: $facebook-blue;
-        border: 1px solid #263a62;
+        background-color: $facebook-focus-blue;
+        border: 1px solid $facebook-focus-blue;
         color: $white;
       }
     }
@@ -602,16 +614,18 @@
     }
 
     &.button-oa2-azuread-oauth2 {
-      color: $microsoft-black;
+      color: white;
+      border-color: $microsoft-black;
+      background-color: $microsoft-black;
 
       .icon {
-        background: $microsoft-black;
+        background: transparent;
       }
 
       &:hover,
       &:focus {
-        background-color: $microsoft-black;
-        border: 1px solid $microsoft-black;
+        background-color: $microsoft-focus-black;
+        border: 1px solid $microsoft-focus-black;
         color: $white;
       }
     }