Clean up oauth buttons on sign in/up

Replicate the UI from the sign in
page on the sign up page.

Changelog: changed

app/assets/javascripts/pages/sessions/new/oauth_remember_me.js

@@ -20,7 +20,7 @@ export default class OAuthRememberMe {
   toggleRememberMe(event) {
     const rememberMe = $(event.target).is(':checked');
 
-    $('.oauth-login', this.container).each((i, element) => {
+    $('.js-oauth-login', this.container).each((i, element) => {
       const $form = $(element).parent('form');
       const href = $form.attr('action');
 

app/assets/stylesheets/page_bundles/signup.scss

@@ -26,14 +26,6 @@
     }
   }
 
-  .omniauth-btn {
-    width: 48%;
-
-    @include media-breakpoint-down(md) {
-      width: 100%;
-    }
-  }
-
   .decline-page {
     width: 350px;
   }

app/assets/stylesheets/pages/login.scss

@@ -99,11 +99,6 @@
       padding: 0;
       border: 0;
       background: none;
-      margin-bottom: $gl-padding;
-    }
-
-    .omniauth-btn {
-      width: 100%;
     }
   }
 

app/assets/stylesheets/startup/startup-signin.scss

@@ -264,12 +264,6 @@ fieldset:disabled a.btn {
 .d-flex {
   display: flex !important;
 }
-.flex-wrap {
-  flex-wrap: wrap !important;
-}
-.justify-content-between {
-  justify-content: space-between !important;
-}
 .align-items-center {
   align-items: center !important;
 }
@@ -280,9 +274,6 @@ fieldset:disabled a.btn {
   left: 0;
   z-index: 1030;
 }
-.ml-2 {
-  margin-left: 0.5rem !important;
-}
 .mt-3 {
   margin-top: 1rem !important;
 }
@@ -349,6 +340,15 @@ fieldset:disabled a.btn {
   font-size: 0.875rem;
   border-radius: 0.25rem;
 }
+.gl-button.gl-button .gl-button-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding-top: 1px;
+  padding-bottom: 1px;
+  margin-top: -1px;
+  margin-bottom: -1px;
+}
 .gl-button.gl-button .gl-button-icon {
   height: 1rem;
   width: 1rem;
@@ -637,10 +637,6 @@ svg {
   padding: 0;
   border: 0;
   background: none;
-  margin-bottom: 16px;
-}
-.login-page .omniauth-container .omniauth-btn {
-  width: 100%;
 }
 .login-page .new-session-tabs {
   display: flex;
@@ -768,24 +764,18 @@ svg {
 .gl-display-block {
   display: block;
 }
-.gl-align-items-center {
-  align-items: center;
+.gl-flex-wrap {
+  flex-wrap: wrap;
 }
 .gl-w-full {
   width: 100%;
 }
-.gl-p-2 {
-  padding: 0.25rem;
-}
 .gl-p-4 {
   padding: 0.75rem;
 }
 .gl-mt-2 {
   margin-top: 0.25rem;
 }
-.gl-mb-2 {
-  margin-bottom: 0.25rem;
-}
 .gl-mb-3 {
   margin-bottom: 0.5rem;
 }
@@ -797,9 +787,6 @@ svg {
     margin-top: 0;
   }
 }
-.gl-text-left {
-  text-align: left;
-}
 
 @import "startup/cloaking";
 @include cloak-startup-scss(none);

app/views/devise/shared/_omniauth_box.html.haml

@@ -7,7 +7,7 @@
   .d-flex.justify-content-between.flex-wrap
     - providers.each do |provider|
       - has_icon = provider_has_icon?(provider)
-      = button_to omniauth_authorize_path(:user, provider), id: "oauth-login-#{provider}", class: "btn gl-button btn-default omniauth-btn oauth-login #{qa_class_for_provider(provider)}", form: { class: 'gl-w-full' } do
+      = button_to omniauth_authorize_path(:user, provider), id: "oauth-login-#{provider}", class: "btn gl-button btn-default gl-w-full js-oauth-login #{qa_class_for_provider(provider)}", form: { class: 'gl-w-full gl-mb-3' } do
         - if has_icon
           = provider_image_tag(provider)
         %span.gl-button-text

app/views/devise/shared/_signup_omniauth_provider_list.haml

 %label.label-bold.d-block
   = _("Create an account using:")
-.d-flex.justify-content-between.flex-wrap
+.gl-display-flex.gl-justify-content-between.gl-flex-wrap
   - providers.each do |provider|
-    = link_to omniauth_authorize_path(:user, provider), method: :post, class: "btn gl-button btn-default gl-display-flex gl-align-items-center gl-text-left gl-mb-2 gl-p-2 omniauth-btn oauth-login #{qa_class_for_provider(provider)}", id: "oauth-login-#{provider}" do
+    = link_to omniauth_authorize_path(:user, provider), method: :post, class: "btn gl-button btn-default gl-w-full gl-mb-3 js-oauth-login #{qa_class_for_provider(provider)}", id: "oauth-login-#{provider}" do
       - if provider_has_icon?(provider)
         = provider_image_tag(provider)
-      %span.ml-2
+      %span.gl-button-text
         = label_for_provider(provider)

ee/app/assets/stylesheets/startup/startup-signin.scss

@@ -264,12 +264,6 @@ fieldset:disabled a.btn {
 .d-flex {
   display: flex !important;
 }
-.flex-wrap {
-  flex-wrap: wrap !important;
-}
-.justify-content-between {
-  justify-content: space-between !important;
-}
 .align-items-center {
   align-items: center !important;
 }
@@ -280,9 +274,6 @@ fieldset:disabled a.btn {
   left: 0;
   z-index: 1030;
 }
-.ml-2 {
-  margin-left: 0.5rem !important;
-}
 .mt-3 {
   margin-top: 1rem !important;
 }
@@ -349,6 +340,15 @@ fieldset:disabled a.btn {
   font-size: 0.875rem;
   border-radius: 0.25rem;
 }
+.gl-button.gl-button .gl-button-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding-top: 1px;
+  padding-bottom: 1px;
+  margin-top: -1px;
+  margin-bottom: -1px;
+}
 .gl-button.gl-button .gl-button-icon {
   height: 1rem;
   width: 1rem;
@@ -637,10 +637,6 @@ svg {
   padding: 0;
   border: 0;
   background: none;
-  margin-bottom: 16px;
-}
-.login-page .omniauth-container .omniauth-btn {
-  width: 100%;
 }
 .login-page .new-session-tabs {
   display: flex;
@@ -768,24 +764,18 @@ svg {
 .gl-display-block {
   display: block;
 }
-.gl-align-items-center {
-  align-items: center;
+.gl-flex-wrap {
+  flex-wrap: wrap;
 }
 .gl-w-full {
   width: 100%;
 }
-.gl-p-2 {
-  padding: 0.25rem;
-}
 .gl-p-4 {
   padding: 0.75rem;
 }
 .gl-mt-2 {
   margin-top: 0.25rem;
 }
-.gl-mb-2 {
-  margin-bottom: 0.25rem;
-}
 .gl-mb-3 {
   margin-bottom: 0.5rem;
 }
@@ -797,9 +787,6 @@ svg {
     margin-top: 0;
   }
 }
-.gl-text-left {
-  text-align: left;
-}
 
 @import "startup/cloaking";
 @include cloak-startup-scss(none);

spec/frontend/fixtures/static/oauth_remember_me.html

 <div id="oauth-container">
-<input id="remember_me" type="checkbox">
+  <input id="remember_me" type="checkbox" />
 
-<form method="post" action="http://example.com/">
-  <button class="oauth-login twitter" type="submit">
-    <span>Twitter</span>
-  </button>
-</form>
+  <form method="post" action="http://example.com/">
+    <button class="js-oauth-login twitter" type="submit">
+      <span>Twitter</span>
+    </button>
+  </form>
 
-<form method="post" action="http://example.com/">
-  <button class="oauth-login github" type="submit">
-    <span>GitHub</span>
-  </button>
-</form>
-
-<form method="post" action="http://example.com/?redirect_fragment=L1">
-  <button class="oauth-login facebook" type="submit">
-    <span>Facebook</span>
-  </button>
-</form>
+  <form method="post" action="http://example.com/">
+    <button class="js-oauth-login github" type="submit">
+      <span>GitHub</span>
+    </button>
+  </form>
 
+  <form method="post" action="http://example.com/?redirect_fragment=L1">
+    <button class="js-oauth-login facebook" type="submit">
+      <span>Facebook</span>
+    </button>
+  </form>
 </div>

spec/frontend/oauth_remember_me_spec.js

@@ -3,7 +3,7 @@ import OAuthRememberMe from '~/pages/sessions/new/oauth_remember_me';
 
 describe('OAuthRememberMe', () => {
   const findFormAction = (selector) => {
-    return $(`#oauth-container .oauth-login${selector}`).parent('form').attr('action');
+    return $(`#oauth-container .js-oauth-login${selector}`).parent('form').attr('action');
   };
 
   beforeEach(() => {

spec/frontend/pages/sessions/new/preserve_url_fragment_spec.js

@@ -44,7 +44,7 @@ describe('preserve_url_fragment', () => {
     });
 
     it('when "remember-me" is present', () => {
-      $('.omniauth-btn')
+      $('.js-oauth-login')
         .parent('form')
         .attr('action', (i, href) => `${href}?remember_me=1`);