Fix sso button style for login page (#21284)

* fix sso button style for login page

* update styles

* update styles

openmetadata-ui/src/main/resources/ui/src/components/common/LoginButton/login-button.style.less

@@ -14,17 +14,15 @@
 
 .signin-button.ant-btn {
   display: flex;
-  height: 4rem;
-  width: 20rem;
+  width: 100%;
   align-items: center;
-  justify-content: space-evenly;
+  justify-content: center;
+  gap: @size-sm;
   border-radius: 0.5rem;
   background-color: @white;
-  padding-left: 1rem;
-  padding-right: 1rem;
   font-weight: 500;
-  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
-  border: unset;
+  border-color: @blue-17 !important;
+  padding: 1.8rem;
 }
 
 .anchor-drop-down {

openmetadata-ui/src/main/resources/ui/src/pages/LoginPage/SignInPage.tsx

@@ -256,10 +256,11 @@ const SignInPage = () => {
                   <>
                     {authConfig?.enableSelfSignup && (
                       <div className="mt-4 d-flex flex-center">
-                        <Typography.Text className="mr-1">
+                        <Typography.Text>
                           {t('message.new-to-the-platform')}
                         </Typography.Text>
                         <Button
+                          className="link-btn"
                           data-testid="signup"
                           type="link"
                           onClick={onClickSignUp}>
@@ -273,7 +274,12 @@ const SignInPage = () => {
                 )}
               </div>
             ) : (
-              <div className="">{getSignInButton()}</div>
+              <div className="m-t-md">
+                <Typography.Text className="text-lg text-grey-muted m-t-lg">
+                  {t('message.om-description')}
+                </Typography.Text>
+                <div className="sso-signup">{getSignInButton()}</div>
+              </div>
             )}
           </div>
         </Col>

openmetadata-ui/src/main/resources/ui/src/pages/LoginPage/login.style.less

@@ -31,7 +31,7 @@
     position: fixed;
     right: @size-md;
     top: @size-md;
-    width: calc(58.33% - @size-md * 2);
+    width: calc(58.33% - @size-md);
     height: calc(100vh - @size-md * 2);
     overflow: hidden;
 
@@ -53,7 +53,6 @@
     text-align: center;
     height: auto;
     max-width: 500px;
-    margin-left: @size-2xl;
 
     @media screen and (max-width: 1200px) {
       margin: @size-md;
@@ -389,3 +388,12 @@
     }
   }
 }
+
+.sso-signup {
+  margin-top: @size-xl;
+  margin-bottom: @size-lg;
+}
+
+.ant-btn-link.link-btn {
+  padding: @size-xs;
+}

openmetadata-ui/src/main/resources/ui/src/pages/SignUp/BasicSignup.component.tsx

@@ -26,6 +26,7 @@ import { passwordRegex } from '../../constants/regex.constants';
 import { AuthProvider } from '../../generated/settings/settings';
 import { useAlertStore } from '../../hooks/useAlertStore';
 import { useApplicationStore } from '../../hooks/useApplicationStore';
+import brandClassBase from '../../utils/BrandData/BrandClassBase';
 import LoginCarousel from '../LoginPage/LoginCarousel';
 import './../LoginPage/login.style.less';
 
@@ -47,6 +48,8 @@ const BasicSignUp = () => {
   const [form] = Form.useForm();
   const password = Form.useWatch('password', form);
 
+  const brandName = brandClassBase.getPageTitle();
+
   const { isAuthProviderBasic } = useMemo(() => {
     return {
       isAuthProviderBasic:
@@ -78,10 +81,10 @@ const BasicSignUp = () => {
       <Row className="login-form-container" data-testid="signin-page">
         <Col lg={10} sm={24}>
           <div className="form-item">
-            <BrandImage height="auto" width={160} />
-            <Typography.Text className="text-lg text-grey-muted m-t-lg">
-              {t('message.om-description')}
-            </Typography.Text>
+            <BrandImage isMonoGram height="auto" width={50} />
+            <Typography.Title className="header-text" level={3}>
+              {t('label.welcome-to')} {brandName}
+            </Typography.Title>
 
             {alert && (
               <div className="login-alert">
@@ -199,11 +202,12 @@ const BasicSignUp = () => {
                   </Button>
 
                   <div className="mt-4 d-flex flex-center">
-                    <Typography.Text className="mr-4">
+                    <Typography.Text>
                       {t('message.already-a-user')}
                     </Typography.Text>
                     <Button
                       ghost
+                      className="link-btn"
                       data-testid="login"
                       type="link"
                       onClick={handleLogin}>