Move Social connect button to new GitLab UI

app/assets/stylesheets/pages/profile.scss

@@ -138,6 +138,13 @@
   }
 }
 
+.social-provider-btn-image {
+  > img {
+    width: 16px;
+    vertical-align: inherit;
+  }
+}
+
 .provider-btn-image {
   display: inline-block;
   padding: 5px 10px;

app/views/profiles/accounts/_providers.html.haml

+- button_class = 'btn btn-default gl-button'
+
 %label.label-bold
   = s_('Profiles|Connected Accounts')
   %p= s_('Profiles|Click on icon to activate signin with one of the following services')
@@ -5,17 +7,19 @@
     - unlink_allowed = unlink_provider_allowed?(provider)
     - link_allowed = link_provider_allowed?(provider)
     - if unlink_allowed || link_allowed
-      .provider-btn-group
-        .provider-btn-image
-          = provider_image_tag(provider)
-        - if auth_active?(provider)
-          - if unlink_allowed
-            = link_to unlink_profile_account_path(provider: provider), method: :delete, class: 'provider-btn' do
+      - if auth_active?(provider)
+        - if unlink_allowed
+          = link_to unlink_profile_account_path(provider: provider), method: :delete, class: button_class do
+            .social-provider-btn-image.gl-button-icon= provider_image_tag(provider)
+            .gl-button-text
               = s_('Profiles|Disconnect %{provider}') % { provider: label_for_provider(provider) }
-          - else
-            %a.provider-btn
+        - else
+          %a{ class: button_class }
+            .gl-button-text
               = s_('Profiles|%{provider} Active') % { provider: label_for_provider(provider) }
-        - elsif link_allowed
-          = link_to omniauth_authorize_path(:user, provider), method: :post, class: 'provider-btn gl-text-blue-500' do
+      - elsif link_allowed
+        = link_to omniauth_authorize_path(:user, provider), method: :post, class: button_class do
+          .social-provider-btn-image.gl-button-icon= provider_image_tag(provider)
+          .gl-button-text
             = s_('Profiles|Connect %{provider}') % { provider: label_for_provider(provider) }
   = render_if_exists 'profiles/accounts/group_saml_unlink_buttons', group_saml_identities: group_saml_identities

changelogs/unreleased/yo-fix-social-buttons.yml

+---
+title: Move Social connect button to new GitLab UI
+merge_request: 51835
+author: Yogi (@yo)
+type: fixed