Change google logo and take care that auth plugin logos are correctly shown

app/views/account/_password_login_form.html.erb

@@ -78,7 +78,7 @@ See docs/COPYRIGHT.rdoc for more details.
 
 <section data-augmented-model-wrapper
          data-activation-selector=".registration-modal--activation-link"
-         data-modal-class-name="registration-modal modal-wrapper -highlight">
+         data-modal-class-name="registration-modal -highlight">
   <% @user ||= User.new %>
   <%= render partial: '/account/register' %>
 </section>

frontend/src/global_styles/content/_accounts.sass

@@ -99,12 +99,7 @@
 
   a.auth-provider
     float: left
-    padding: 0.5rem 0.5rem 0.5rem 2rem
     margin-left: 10px
-    margin-bottom: 10px
-    background-size: 20px 20px
-    background-repeat: no-repeat
-    background-position: 5px center
     background-color: light-grey
     font-weight: normal
     color: var(--body-font-color)

frontend/src/global_styles/content/modules/_auth_plugins.sass

@@ -17,12 +17,17 @@
 //
 // See doc/COPYRIGHT.md for more details.
 
-// Defined by Google
-// see: https://developers.google.com/identity/branding-guidelines
-// !important is necessary to overwrite the default styling options
-#top-menu #nav-login-content .login-auth-providers a.auth-provider.auth-provider-google,
-#content .login-auth-providers a.auth-provider-google
-  padding: 8px 8px 8px 50px
-  background-position-x: 8px
-  background-size: 18px 18px
-  background-color: #FFF
+.op-app-header #nav-login-content,
+#content,
+.op-modal,
+  .login-auth-providers a.auth-provider
+    background-repeat: no-repeat
+    background-size: 18px 18px
+    background-position-x: 8px
+    background-position-y: center
+    background-color: #FFF
+
+    &.auth-provider-google,
+    &.auth-provider-azure,
+    &.auth-provider-heroku
+      padding: 9px 12px 9px 34px

modules/auth_plugins/app/views/hooks/login/_providers_css.html.erb

@@ -31,13 +31,13 @@ See docs/COPYRIGHT.rdoc for more details.
   <% if pro[:icon] %>
     <style type="text/css">
       #content .login-auth-providers a.auth-provider.auth-provider-<%= pro[:name] %> {
-        background-image: url('<%= image_path(pro[:icon]) %>');
+        background-image: url('<%= asset_path(pro[:icon]) %>');
       }
-      #top-menu #nav-login-content .login-auth-providers a.auth-provider.auth-provider-<%= pro[:name] %> {
-        background-image: url('<%= image_path(pro[:icon]) %>') ;
+      .op-app-header #nav-login-content .login-auth-providers a.auth-provider.auth-provider-<%= pro[:name] %> {
+        background-image:  url('<%= asset_path(pro[:icon]) %>') ;
       }
-      .modal-wrapper .login-auth-providers a.auth-provider.auth-provider-<%= pro[:name] %> {
-        background-image: url('<%= image_path(pro[:icon]) %>') ;
+      .op-modal .login-auth-providers a.auth-provider.auth-provider-<%= pro[:name] %> {
+        background-image: url('<%= asset_path(pro[:icon]) %>') ;
       }
     </style>
   <% end -%>