From 9f1404586671854f9bc18bf6d8d89a81bd21f419 Mon Sep 17 00:00:00 2001
From: Guillaume Peoc'h <guillaume.peoch@sonarsource.com>
Date: Fri, 21 Jan 2022 10:53:01 +0100
Subject: [PATCH] SONAR-15900 Style Log In button

---
 .../js/apps/sessions/components/Login.css     |  3 +
 .../sessions/components/OAuthProviders.css    | 10 ---
 .../sessions/components/OAuthProviders.tsx    | 37 ++++++----
 .../OAuthProviders-test.tsx.snap              | 68 +++++++++----------
 .../controls/IdentityProviderLink.css         |  3 -
 5 files changed, 59 insertions(+), 62 deletions(-)

diff --git a/server/sonar-web/src/main/js/apps/sessions/components/Login.css b/server/sonar-web/src/main/js/apps/sessions/components/Login.css
index b724dee0dff..c697b4f0ece 100644
--- a/server/sonar-web/src/main/js/apps/sessions/components/Login.css
+++ b/server/sonar-web/src/main/js/apps/sessions/components/Login.css
@@ -21,6 +21,9 @@
   padding-top: 10vh;
   max-width: 300px;
   margin: 0 auto;
+  align-items: center;
+  display: flex;
+  flex-direction: column;
 }
 
 .login-title {
diff --git a/server/sonar-web/src/main/js/apps/sessions/components/OAuthProviders.css b/server/sonar-web/src/main/js/apps/sessions/components/OAuthProviders.css
index d1fc6cb75ea..81dff76a2c2 100644
--- a/server/sonar-web/src/main/js/apps/sessions/components/OAuthProviders.css
+++ b/server/sonar-web/src/main/js/apps/sessions/components/OAuthProviders.css
@@ -17,16 +17,6 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-.oauth-providers > ul {
-  width: 200px;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.oauth-providers > ul > li {
-  position: relative;
-  margin-bottom: 30px;
-}
 
 .oauth-providers-help {
   position: absolute;
diff --git a/server/sonar-web/src/main/js/apps/sessions/components/OAuthProviders.tsx b/server/sonar-web/src/main/js/apps/sessions/components/OAuthProviders.tsx
index 4b773abb37d..59724f58607 100644
--- a/server/sonar-web/src/main/js/apps/sessions/components/OAuthProviders.tsx
+++ b/server/sonar-web/src/main/js/apps/sessions/components/OAuthProviders.tsx
@@ -17,6 +17,7 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+import styled from '@emotion/styled';
 import classNames from 'classnames';
 import * as React from 'react';
 import HelpTooltip from '../../../components/controls/HelpTooltip';
@@ -35,18 +36,16 @@ interface Props {
 export default function OAuthProviders(props: Props) {
   const formatFunction = props.formatLabel || defaultFormatLabel;
   return (
-    <section className={classNames('oauth-providers', props.className)}>
-      <ul>
-        {props.identityProviders.map(identityProvider => (
-          <OAuthProvider
-            format={formatFunction}
-            identityProvider={identityProvider}
-            key={identityProvider.key}
-            returnTo={props.returnTo}
-          />
-        ))}
-      </ul>
-    </section>
+    <Container className={classNames('oauth-providers', props.className)}>
+      {props.identityProviders.map(identityProvider => (
+        <OAuthProvider
+          format={formatFunction}
+          identityProvider={identityProvider}
+          key={identityProvider.key}
+          returnTo={props.returnTo}
+        />
+      ))}
+    </Container>
   );
 }
 
@@ -58,7 +57,7 @@ interface ItemProps {
 
 function OAuthProvider({ format, identityProvider, returnTo }: ItemProps) {
   return (
-    <li>
+    <IdentityProviderWrapper>
       <IdentityProviderLink
         backgroundColor={identityProvider.backgroundColor}
         iconPath={identityProvider.iconPath}
@@ -72,10 +71,20 @@ function OAuthProvider({ format, identityProvider, returnTo }: ItemProps) {
       {identityProvider.helpMessage && (
         <HelpTooltip className="oauth-providers-help" overlay={identityProvider.helpMessage} />
       )}
-    </li>
+    </IdentityProviderWrapper>
   );
 }
 
 function defaultFormatLabel(name: string) {
   return translateWithParameters('login.login_with_x', name);
 }
+
+const Container = styled.div`
+  display: inline-flex;
+  flex-direction: column;
+  align-items: stretch;
+`;
+
+const IdentityProviderWrapper = styled.div`
+  margin-bottom: 30px;
+`;
diff --git a/server/sonar-web/src/main/js/apps/sessions/components/__tests__/__snapshots__/OAuthProviders-test.tsx.snap b/server/sonar-web/src/main/js/apps/sessions/components/__tests__/__snapshots__/OAuthProviders-test.tsx.snap
index 74f6d72d757..156489e9ba5 100644
--- a/server/sonar-web/src/main/js/apps/sessions/components/__tests__/__snapshots__/OAuthProviders-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/sessions/components/__tests__/__snapshots__/OAuthProviders-test.tsx.snap
@@ -1,43 +1,41 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render correctly 1`] = `
-<section
+<Styled(div)
   className="oauth-providers"
 >
-  <ul>
-    <OAuthProvider
-      format={[Function]}
-      identityProvider={
-        Object {
-          "backgroundColor": "#000",
-          "iconPath": "/some/path",
-          "key": "foo",
-          "name": "Foo",
-        }
+  <OAuthProvider
+    format={[Function]}
+    identityProvider={
+      Object {
+        "backgroundColor": "#000",
+        "iconPath": "/some/path",
+        "key": "foo",
+        "name": "Foo",
       }
-      key="foo"
-      returnTo=""
-    />
-    <OAuthProvider
-      format={[Function]}
-      identityProvider={
-        Object {
-          "backgroundColor": "#00F",
-          "helpMessage": "Help message!",
-          "iconPath": "/icon/path",
-          "key": "bar",
-          "name": "Bar",
-        }
+    }
+    key="foo"
+    returnTo=""
+  />
+  <OAuthProvider
+    format={[Function]}
+    identityProvider={
+      Object {
+        "backgroundColor": "#00F",
+        "helpMessage": "Help message!",
+        "iconPath": "/icon/path",
+        "key": "bar",
+        "name": "Bar",
       }
-      key="bar"
-      returnTo=""
-    />
-  </ul>
-</section>
+    }
+    key="bar"
+    returnTo=""
+  />
+</Styled(div)>
 `;
 
 exports[`should render correctly 2`] = `
-<li>
+<Styled(div)>
   <IdentityProviderLink
     backgroundColor="#000"
     iconPath="/some/path"
@@ -48,11 +46,11 @@ exports[`should render correctly 2`] = `
       login.login_with_x.Foo
     </span>
   </IdentityProviderLink>
-</li>
+</Styled(div)>
 `;
 
 exports[`should render correctly 3`] = `
-<li>
+<Styled(div)>
   <IdentityProviderLink
     backgroundColor="#00F"
     iconPath="/icon/path"
@@ -67,11 +65,11 @@ exports[`should render correctly 3`] = `
     className="oauth-providers-help"
     overlay="Help message!"
   />
-</li>
+</Styled(div)>
 `;
 
 exports[`should use the custom label formatter 1`] = `
-<li>
+<Styled(div)>
   <IdentityProviderLink
     backgroundColor="#000"
     iconPath="/some/path"
@@ -82,5 +80,5 @@ exports[`should use the custom label formatter 1`] = `
       custom_format.Foo
     </span>
   </IdentityProviderLink>
-</li>
+</Styled(div)>
 `;
diff --git a/server/sonar-web/src/main/js/components/controls/IdentityProviderLink.css b/server/sonar-web/src/main/js/components/controls/IdentityProviderLink.css
index 889f14acf90..19374a17d25 100644
--- a/server/sonar-web/src/main/js/components/controls/IdentityProviderLink.css
+++ b/server/sonar-web/src/main/js/components/controls/IdentityProviderLink.css
@@ -19,7 +19,6 @@
  */
 a.identity-provider-link {
   display: block;
-  width: auto;
   line-height: 22px;
   padding: var(--gridSize) calc(1.5 * var(--gridSize));
   border: 1px solid rgba(0, 0, 0, 0.15);
@@ -28,8 +27,6 @@ a.identity-provider-link {
   background-color: var(--darkBlue);
   color: #fff;
   white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
 }
 
 a.identity-provider-link.small {
-- 
2.39.5