10 files changed, 21 insertions, 32 deletions
diff --git a/app/assets/javascripts/pages/sessions/new/signin_tabs_memoizer.js b/app/assets/javascripts/pages/sessions/new/signin_tabs_memoizer.js
index 08f0afdcce3..d321892d2d2 100644
--- a/app/assets/javascripts/pages/sessions/new/signin_tabs_memoizer.js
+++ b/app/assets/javascripts/pages/sessions/new/signin_tabs_memoizer.js
@@ -5,7 +5,7 @@ import AccessorUtilities from '~/lib/utils/accessor';
  * Does that setting the current selected tab in the localStorage
  */
 export default class SigninTabsMemoizer {
-  constructor({ currentTabKey = 'current_signin_tab', tabSelector = 'ul.nav-tabs' } = {}) {
+  constructor({ currentTabKey = 'current_signin_tab', tabSelector = 'ul.new-session-tabs' } = {}) {
     this.currentTabKey = currentTabKey;
     this.tabSelector = tabSelector;
     this.isLocalStorageAvailable = AccessorUtilities.isLocalStorageAccessSafe();
diff --git a/app/assets/stylesheets/pages/login.scss b/app/assets/stylesheets/pages/login.scss
index b2250a1ce2f..97303d02666 100644
--- a/app/assets/stylesheets/pages/login.scss
+++ b/app/assets/stylesheets/pages/login.scss
@@ -154,26 +154,10 @@
       a {
         width: 100%;
         font-size: 18px;
-        margin-right: 0;
-
-        &:hover {
-          border: 1px solid transparent;
-        }
       }
 
-      &.active {
-        border-bottom: 1px solid $border-color;
-
-        a {
-          border: 0;
-          border-bottom: 2px solid $link-underline-blue;
-          margin-right: 0;
-          color: $black;
-
-          &:hover {
-            border-bottom: 2px solid $link-underline-blue;
-          }
-        }
+      &.active > a {
+        cursor: default;
       }
     }
   }
diff --git a/app/views/devise/shared/_tab_single.html.haml b/app/views/devise/shared/_tab_single.html.haml
index f943d25e41a..7bd414d64c3 100644
--- a/app/views/devise/shared/_tab_single.html.haml
+++ b/app/views/devise/shared/_tab_single.html.haml
@@ -1,3 +1,3 @@
-%ul.nav-links.nav-tabs.new-session-tabs.single-tab
+%ul.nav-links.new-session-tabs.single-tab
   %li.active
     %a= tab_title
diff --git a/app/views/devise/shared/_tabs_ldap.html.haml b/app/views/devise/shared/_tabs_ldap.html.haml
index 270191f9452..f50e0724e09 100644
--- a/app/views/devise/shared/_tabs_ldap.html.haml
+++ b/app/views/devise/shared/_tabs_ldap.html.haml
@@ -1,4 +1,4 @@
-%ul.new-session-tabs.nav-links.nav-tabs{ class: ('custom-provider-tabs' if form_based_providers.any?) }
+%ul.nav-links.new-session-tabs{ class: ('custom-provider-tabs' if form_based_providers.any?) }
   - if crowd_enabled?
     %li.active
       = link_to "Crowd", "#crowd", 'data-toggle' => 'tab'
diff --git a/app/views/devise/shared/_tabs_normal.html.haml b/app/views/devise/shared/_tabs_normal.html.haml
index 1ba6d390875..fa3c3df7f60 100644
--- a/app/views/devise/shared/_tabs_normal.html.haml
+++ b/app/views/devise/shared/_tabs_normal.html.haml
@@ -1,4 +1,4 @@
-%ul.nav-links.new-session-tabs.nav-tabs{ role: 'tablist' }
+%ul.nav-links.new-session-tabs{ role: 'tablist' }
   %li.active{ role: 'presentation' }
     %a{ href: '#login-pane', data: { toggle: 'tab' }, role: 'tab' } Sign in
   - if allow_signup?
diff --git a/changelogs/unreleased/41748-vertical-misalignment-login-box.yml b/changelogs/unreleased/41748-vertical-misalignment-login-box.yml
new file mode 100644
index 00000000000..77a97400323
--- /dev/null
+++ b/changelogs/unreleased/41748-vertical-misalignment-login-box.yml
@@ -0,0 +1,5 @@
+---
+title: Refactor CSS to eliminate vertical misalignment of login nav
+merge_request: 16275
+author: Takuya Noguchi
+type: fixed
diff --git a/spec/features/users/login_spec.rb b/spec/features/users/login_spec.rb
index bc75dc5d19b..9e10bfb2adc 100644
--- a/spec/features/users/login_spec.rb
+++ b/spec/features/users/login_spec.rb
@@ -392,7 +392,7 @@ feature 'Login' do
     end
 
     def ensure_one_active_tab
-      expect(page).to have_selector('.nav-tabs > li.active', count: 1)
+      expect(page).to have_selector('ul.new-session-tabs > li.active', count: 1)
     end
 
     def ensure_one_active_pane
diff --git a/spec/javascripts/fixtures/linked_tabs.html.haml b/spec/javascripts/fixtures/linked_tabs.html.haml
index 93c0cf97ff0..c38fe8b1f25 100644
--- a/spec/javascripts/fixtures/linked_tabs.html.haml
+++ b/spec/javascripts/fixtures/linked_tabs.html.haml
@@ -1,4 +1,4 @@
-%ul.nav.nav-tabs.linked-tabs
+%ul.nav-links.new-session-tabs.linked-tabs
   %li
     %a{ href: 'foo/bar/1', data: { target: 'div#tab1', action: 'tab1', toggle: 'tab' } }
       Tab 1
diff --git a/spec/javascripts/fixtures/signin_tabs.html.haml b/spec/javascripts/fixtures/signin_tabs.html.haml
index 12b8d423cbe..2e00fe7865e 100644
--- a/spec/javascripts/fixtures/signin_tabs.html.haml
+++ b/spec/javascripts/fixtures/signin_tabs.html.haml
@@ -1,5 +1,5 @@
-%ul.nav-tabs
+%ul.nav-links.new-session-tabs
+  %li.active
+    %a{ href: '#ldap' } LDAP
   %li
-    %a.active{ id: 'standard', href: '#standard'} Standard
-  %li
-    %a{ id: 'ldap', href: '#ldap'} Ldap
+    %a{ href: '#login-pane'} Standard
diff --git a/spec/javascripts/signin_tabs_memoizer_spec.js b/spec/javascripts/signin_tabs_memoizer_spec.js
index b1b03ef1e09..423432c9e5d 100644
--- a/spec/javascripts/signin_tabs_memoizer_spec.js
+++ b/spec/javascripts/signin_tabs_memoizer_spec.js
@@ -4,7 +4,7 @@ import SigninTabsMemoizer from '~/pages/sessions/new/signin_tabs_memoizer';
 (() => {
   describe('SigninTabsMemoizer', () => {
     const fixtureTemplate = 'static/signin_tabs.html.raw';
-    const tabSelector = 'ul.nav-tabs';
+    const tabSelector = 'ul.new-session-tabs';
     const currentTabKey = 'current_signin_tab';
     let memo;
 
@@ -27,7 +27,7 @@ import SigninTabsMemoizer from '~/pages/sessions/new/signin_tabs_memoizer';
     it('does nothing if no tab was previously selected', () => {
       createMemoizer();
 
-      expect(document.querySelector('li a.active').getAttribute('id')).toEqual('standard');
+      expect(document.querySelector(`${tabSelector} > li.active a`).getAttribute('href')).toEqual('#ldap');
     });
 
     it('shows last selected tab on boot', () => {
@@ -48,9 +48,9 @@ import SigninTabsMemoizer from '~/pages/sessions/new/signin_tabs_memoizer';
     it('saves last selected tab on change', () => {
       createMemoizer();
 
-      document.getElementById('standard').click();
+      document.querySelector('a[href="#login-pane"]').click();
 
-      expect(memo.readData()).toEqual('#standard');
+      expect(memo.readData()).toEqual('#login-pane');
     });
 
     it('overrides last selected tab with hash tag when given', () => {