Fix carousel image and image resolutions (#21332)

* fix carousel img and img resolutions

* update sizes

* update image styles

* update styles

* fix sonar failure

openmetadata-ui/src/main/resources/ui/src/constants/LoginClassBase.ts

@@ -30,20 +30,17 @@ class LoginClassBase {
         title: 'governance',
         image: governanceImg,
         descriptionKey: 'assess-data-reliability-with-data-profiler-lineage',
-        width: '500px',
+        imgClass: 'governance-image',
         image1: {
           image: governanceList,
-          width: '120px',
           position: 'governance-top-left',
         },
         image2: {
           image: governanceItems,
-          width: '160px',
           position: 'governance-middle-right',
         },
         image3: {
           image: governanceReviewer,
-          width: '220px',
           position: 'governance-bottom-right',
         },
       },
@@ -51,15 +48,13 @@ class LoginClassBase {
         title: 'data-collaboration',
         image: collaborationImg,
         descriptionKey: 'deeply-understand-table-relations-message',
-        width: '350px',
+        imgClass: 'collaboration-image',
         image1: {
           image: collaborationTabs,
-          width: '200px',
           position: 'collab-top-left',
         },
         image2: {
           image: collaborationMenu,
-          width: '200px',
           position: 'collab-middle-right',
         },
       },
@@ -68,10 +63,9 @@ class LoginClassBase {
         image: dataObservabilityImg,
         descriptionKey:
           'discover-your-data-and-unlock-the-value-of-data-assets',
-        width: '370px',
+        imgClass: 'observability-image',
         image1: {
           image: observabilityTestcase,
-          width: '250px',
           position: 'observability-bottom-right',
         },
       },
@@ -79,15 +73,13 @@ class LoginClassBase {
         title: 'data-discovery',
         image: discoveryImg,
         descriptionKey: 'enables-end-to-end-metadata-management',
-        width: '500px',
+        imgClass: 'discovery-image',
         image1: {
           image: discoveryLanguage,
-          width: '130px',
           position: 'discovery-top-right',
         },
         image2: {
           image: discoveryDataAssets,
-          width: '130px',
           position: 'discovery-middle-right',
         },
       },

openmetadata-ui/src/main/resources/ui/src/locale/languages/de-de.json

@@ -593,6 +593,7 @@
     "foreign": "Fremd",
     "foreign-key": "Fremdschlüssel",
     "forgot-password": "Passwort vergessen",
+    "forgot-your-password": "Glemt passordet ditt?",
     "format": "Format",
     "fqn-uppercase": "FQN",
     "frequently-joined-column-plural": "Häufig verwendete Spalten in Verknüpfungen",

openmetadata-ui/src/main/resources/ui/src/locale/languages/en-us.json

@@ -593,6 +593,7 @@
     "foreign": "Foreign",
     "foreign-key": "Foreign Key",
     "forgot-password": "Forgot Password",
+    "forgot-your-password": "Forgot your password?",
     "format": "Format",
     "fqn-uppercase": "FQN",
     "frequently-joined-column-plural": "Frequently Joined Columns",
@@ -1710,7 +1711,7 @@
     "enter-interval": "Enter interval",
     "enter-test-case-name": "Enter test case name",
     "enter-test-suite-name": "Enter test suite name",
-    "enter-your-registered-email": "Enter your registered email to receive password reset link",
+    "enter-your-registered-email": "Enter your registered email to get a password reset link.",
     "entity-already-exists": "{{entity}} already exists.",
     "entity-are-not-available": "{{entity}} are not available",
     "entity-customize-description": "Customize {{entity}} detail page with choice of your widget and tabs which is more useful for your use case.",

openmetadata-ui/src/main/resources/ui/src/locale/languages/es-es.json

@@ -593,6 +593,7 @@
     "foreign": "Foráneo",
     "foreign-key": "Llave Foránea",
     "forgot-password": "Olvidé mi contraseña",
+    "forgot-your-password": "¿Olvidaste tu contraseña?",
     "format": "Format",
     "fqn-uppercase": "FQN",
     "frequently-joined-column-plural": "Columnas frecuentemente unidas",

openmetadata-ui/src/main/resources/ui/src/locale/languages/fr-fr.json

@@ -593,6 +593,7 @@
     "foreign": "Étranger",
     "foreign-key": "Clé Étrangère",
     "forgot-password": "Mot de passe oublié",
+    "forgot-your-password": "Mot de passe oublié?",
     "format": "Format",
     "fqn-uppercase": "FQN",
     "frequently-joined-column-plural": "Colonnes fréquemment utilisées dans les jointures",

openmetadata-ui/src/main/resources/ui/src/locale/languages/gl-es.json

@@ -593,6 +593,7 @@
     "foreign": "Estranxeiro",
     "foreign-key": "Clave foránea",
     "forgot-password": "Esqueciches o contrasinal",
+    "forgot-your-password": "Esqueciches o teu contrasinal?",
     "format": "Formato",
     "fqn-uppercase": "FQN",
     "frequently-joined-column-plural": "Columnas frecuentemente unidas",

openmetadata-ui/src/main/resources/ui/src/locale/languages/he-he.json

@@ -593,6 +593,7 @@
     "foreign": "זר",
     "foreign-key": "מפתח זר",
     "forgot-password": "שכחת סיסמה",
+    "forgot-your-password": "שכחת את הסיסמה?",
     "format": "Format",
     "fqn-uppercase": "FQN",
     "frequently-joined-column-plural": "עמודות הצטרפות תדירות",

openmetadata-ui/src/main/resources/ui/src/locale/languages/ja-jp.json

@@ -593,6 +593,7 @@
     "foreign": "外部キー",
     "foreign-key": "外部キー",
     "forgot-password": "パスワードを忘れた場合はこちら",
+    "forgot-your-password": "パスワードをお忘れですか？",
     "format": "Format",
     "fqn-uppercase": "FQN",
     "frequently-joined-column-plural": "よく結合されるカラム",

openmetadata-ui/src/main/resources/ui/src/locale/languages/ko-kr.json

@@ -593,6 +593,7 @@
     "foreign": "외래",
     "foreign-key": "외래 키",
     "forgot-password": "비밀번호 찾기",
+    "forgot-your-password": "비밀번호를 잊으셨나요?",
     "format": "형식",
     "fqn-uppercase": "FQN",
     "frequently-joined-column-plural": "자주 조인되는 열들",

openmetadata-ui/src/main/resources/ui/src/locale/languages/mr-in.json

@@ -593,6 +593,7 @@
     "foreign": "परदेशी",
     "foreign-key": "विदेशी की",
     "forgot-password": "पासवर्ड विसरलात",
+    "forgot-your-password": "तुमचा पासवर्ड विसरलात का?",
     "format": "स्वरूप",
     "fqn-uppercase": "FQN",
     "frequently-joined-column-plural": "वारंवार सामील केलेले स्तंभ",

openmetadata-ui/src/main/resources/ui/src/locale/languages/nl-nl.json

@@ -593,6 +593,7 @@
     "foreign": "Buitenlands",
     "foreign-key": "Vreemde sleutel",
     "forgot-password": "Wachtwoord vergeten",
+    "forgot-your-password": "Wachtwoord vergeten?",
     "format": "Format",
     "fqn-uppercase": "VZV",
     "frequently-joined-column-plural": "Vaak gejoinde kolommen",

openmetadata-ui/src/main/resources/ui/src/locale/languages/pr-pr.json

@@ -593,6 +593,7 @@
     "foreign": "خارجی",
     "foreign-key": "کلید خارجی",
     "forgot-password": "فراموشی رمز عبور",
+    "forgot-your-password": "رمز عبور خود را فراموش کرده‌اید؟",
     "format": "قالب",
     "fqn-uppercase": "FQN",
     "frequently-joined-column-plural": "ستون‌های به‌طور مکرر پیوسته",

openmetadata-ui/src/main/resources/ui/src/locale/languages/pt-br.json

@@ -593,6 +593,7 @@
     "foreign": "Estrangeiro",
     "foreign-key": "Chave Estrangeira",
     "forgot-password": "Esqueceu a Senha",
+    "forgot-your-password": "Esqueceu sua senha?",
     "format": "Formatar",
     "fqn-uppercase": "FQN",
     "frequently-joined-column-plural": "Colunas Frequentemente Unidas",

openmetadata-ui/src/main/resources/ui/src/locale/languages/pt-pt.json

@@ -593,6 +593,7 @@
     "foreign": "Estrangeiro",
     "foreign-key": "Chave Estrangeira",
     "forgot-password": "Esqueceu a Senha",
+    "forgot-your-password": "Esqueceste a tua palavra-passe?",
     "format": "Format",
     "fqn-uppercase": "FQN",
     "frequently-joined-column-plural": "Colunas Frequentemente Unidas",

openmetadata-ui/src/main/resources/ui/src/locale/languages/ru-ru.json

@@ -593,6 +593,7 @@
     "foreign": "Внешний",
     "foreign-key": "Внешний ключ",
     "forgot-password": "Забыл пароль",
+    "forgot-your-password": "Забыли пароль?",
     "format": "Format",
     "fqn-uppercase": "FQN",
     "frequently-joined-column-plural": "Часто соединяемые столбцы",

openmetadata-ui/src/main/resources/ui/src/locale/languages/th-th.json

@@ -593,6 +593,7 @@
     "foreign": "ต่างประเทศ",
     "foreign-key": "คีย์ต่างประเทศ",
     "forgot-password": "ลืมรหัสผ่าน",
+    "forgot-your-password": "ลืมรหัสผ่านของคุณหรือไม่?",
     "format": "รูปแบบ",
     "fqn-uppercase": "FQN",
     "frequently-joined-column-plural": "คอลัมน์ที่เข้าร่วมบ่อย",

openmetadata-ui/src/main/resources/ui/src/locale/languages/tr-tr.json

@@ -593,6 +593,7 @@
     "foreign": "Yabancı",
     "foreign-key": "Yabancı Anahtar",
     "forgot-password": "Şifremi Unuttum",
+    "forgot-your-password": "Forgot your password?",
     "format": "Biçim",
     "fqn-uppercase": "FQN",
     "frequently-joined-column-plural": "Sık Birleştirilen Sütunlar",

openmetadata-ui/src/main/resources/ui/src/locale/languages/zh-cn.json

@@ -593,6 +593,7 @@
     "foreign": "外键",
     "foreign-key": "外键",
     "forgot-password": "忘记密码",
+    "forgot-your-password": "忘记密码了？",
     "format": "Format",
     "fqn-uppercase": "FQN",
     "frequently-joined-column-plural": "经常连接查询的列 (Frequently Joined Column)",

openmetadata-ui/src/main/resources/ui/src/pages/ForgotPassword/ForgotPassword.component.tsx

@@ -11,11 +11,12 @@
  *  limitations under the License.
  */
 
-import { Button, Card, Col, Divider, Form, Input, Row, Typography } from 'antd';
+import { Button, Card, Col, Form, Input, Row, Typography } from 'antd';
 import { AxiosError } from 'axios';
 import React, { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useHistory } from 'react-router-dom';
+import bgImg from '../../assets/img/forgot-password.png';
 import AlertBar from '../../components/AlertBar/AlertBar';
 import { useBasicAuth } from '../../components/Auth/AuthProviders/BasicAuthProvider';
 import BrandImage from '../../components/common/BrandImage/BrandImage';
@@ -62,6 +63,14 @@ const ForgotPassword = () => {
     <div
       className="h-full py-24 forgot-password-container "
       data-testid="forgot-password-container">
+      <div className="absolute inset-0">
+        <img
+          alt="bg-image"
+          className="w-full h-full"
+          data-testid="bg-image"
+          src={bgImg}
+        />
+      </div>
       <DocumentTitle title={t('label.forgot-password')} />
       <Card
         bodyStyle={{ padding: '48px' }}
@@ -69,10 +78,18 @@ const ForgotPassword = () => {
         style={{ maxWidth: '430px' }}>
         <Row gutter={[16, 24]}>
           <Col className="text-center" span={24}>
-            <BrandImage className="m-auto" height="auto" width={200} />
+            <BrandImage
+              isMonoGram
+              className="m-auto"
+              height="auto"
+              width={50}
+            />
           </Col>
-          <Col className="flex-center text-center mt-8" span={24}>
+          <Col className="text-center mt-4" span={24}>
-            <Typography.Text className="text-xl font-medium text-grey-muted">
+            <Typography.Title level={3}>
+              {t('label.forgot-your-password')}
+            </Typography.Title>
+            <Typography.Text className="text-lg text-grey-muted">
               {t('message.enter-your-registered-email')}
             </Typography.Text>
           </Col>
@@ -104,26 +121,29 @@ const ForgotPassword = () => {
                     }),
                   },
                 ]}>
-                <Input type="email" />
+                <Input
+                  className="input-field"
+                  placeholder={t('label.email')}
+                  type="email"
+                />
               </Form.Item>
             </Col>
             <Col className="m-t-md" span={24}>
-              <Button block htmlType="submit" loading={loading} type="primary">
+              <Button
+                block
+                className="p-y-lg d-flex flex-center"
+                htmlType="submit"
+                loading={loading}
+                type="primary">
                 {t('label.submit')}
               </Button>
             </Col>
           </Form>
-          <Divider className="w-min-0 mt-8 mb-12 justify-center items-start p-x-xs">
+          <Col className="d-flex flex-center" span={24}>
-            <Typography.Text className="text-sm" type="secondary">
-              {t('label.or-lowercase')}
-            </Typography.Text>
-          </Divider>
-          <Col span={24}>
             <Button
-              ghost
+              className="p-0"
-              className="w-full"
               data-testid="go-back-button"
-              type="primary"
+              type="link"
               onClick={handleLogin}>
               {t('message.go-back-to-login-page')}
             </Button>

openmetadata-ui/src/main/resources/ui/src/pages/ForgotPassword/forgot-password.styles.less

@@ -14,6 +14,36 @@
 @import (reference) url('../../styles/variables.less');
 
 .forgot-password-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .ant-card-bordered {
+    box-shadow: 0px 24px 48px -12px rgba(10, 13, 18, 0.18);
+    border: none;
+    border-radius: 20px;
+
+    label {
+      color: @grey-text;
+      font-weight: 600;
+
+      @media screen and (min-width: 1650px) {
+        font-size: 20px;
+      }
+    }
+
+    .input-field {
+      padding: @size-sm @size-md;
+      border-radius: @border-radius-xs;
+      border: 1px solid @grey-22;
+      background-color: @grey-23 !important;
+
+      @media screen and (min-width: 1650px) {
+        padding: @size-md @size-lg;
+      }
+    }
+  }
+
   .success-alert {
     border-color: #a9dcb5;
   }

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

@@ -46,20 +46,17 @@ const LoginCarousel = () => {
             <div className="image-container">
               <img
                 alt="slider"
+                className={data.imgClass}
                 key={`main-${currentIndex}-${idx}`}
-                loading="lazy"
                 src={data.image}
                 style={{ display: 'initial' }}
-                width={data.width}
               />
               {data.image1 && (
                 <img
                   alt="slider"
                   className={data.image1.position}
                   key={`img1-${currentIndex}-${idx}`}
-                  loading="lazy"
                   src={data.image1.image}
-                  width={data.image1.width}
                 />
               )}
               {data.image2 && (
@@ -67,9 +64,7 @@ const LoginCarousel = () => {
                   alt="slider"
                   className={data.image2.position}
                   key={`img2-${currentIndex}-${idx}`}
-                  loading="lazy"
                   src={data.image2.image}
-                  width={data.image2.width}
                 />
               )}
               {data.image3 && (
@@ -77,9 +72,7 @@ const LoginCarousel = () => {
                   alt="slider"
                   className={data.image3.position}
                   key={`img3-${currentIndex}-${idx}`}
-                  loading="lazy"
                   src={data.image3.image}
-                  width={data.image3.width}
                 />
               )}
             </div>

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

@@ -74,11 +74,9 @@ describe('Test SignInPage Component', () => {
       wrapper: MemoryRouter,
     });
     const signInPage = await findByTestId(container, 'signin-page');
-    const bgImg = await findByTestId(container, 'bg-image');
     const LoginCarousel = await findByText(container, /LoginCarousel/i);
 
     expect(signInPage).toBeInTheDocument();
-    expect(bgImg).toBeInTheDocument();
     expect(LoginCarousel).toBeInTheDocument();
   });
 

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

@@ -21,7 +21,6 @@ import IconCognito from '../../assets/img/icon-aws-cognito.png';
 import IconAzure from '../../assets/img/icon-azure.png';
 import IconGoogle from '../../assets/img/icon-google.png';
 import IconOkta from '../../assets/img/icon-okta.png';
-import loginBG from '../../assets/img/login-bg.png';
 import AlertBar from '../../components/AlertBar/AlertBar';
 import { useBasicAuth } from '../../components/Auth/AuthProviders/BasicAuthProvider';
 import BrandImage from '../../components/common/BrandImage/BrandImage';
@@ -226,6 +225,7 @@ const SignInPage = () => {
                           {t('label.password')}
                         </Typography.Text>
                         <Typography.Link
+                          className="forgot-password-link"
                           data-testid="forgot-password"
                           onClick={onClickForgotPassword}>
                           {t('label.forgot-password')}
@@ -243,7 +243,7 @@ const SignInPage = () => {
                   </Form.Item>
 
                   <Button
-                    className="w-full p-y-lg d-flex flex-center"
+                    className="w-full p-y-lg d-flex flex-center login-btn"
                     data-testid="login"
                     disabled={loading}
                     htmlType="submit"
@@ -255,7 +255,7 @@ const SignInPage = () => {
                 {!isAuthProviderLDAP && (
                   <>
                     {authConfig?.enableSelfSignup && (
-                      <div className="mt-4 d-flex flex-center">
+                      <div className="mt-4 d-flex flex-center signup-text">
                         <Typography.Text>
                           {t('message.new-to-the-platform')}
                         </Typography.Text>
@@ -275,7 +275,7 @@ const SignInPage = () => {
               </div>
             ) : (
               <div className="m-t-md">
-                <Typography.Text className="text-lg text-grey-muted m-t-lg">
+                <Typography.Text className="text-xl text-grey-muted m-t-lg">
                   {t('message.om-description')}
                 </Typography.Text>
                 <div className="sso-signup">{getSignInButton()}</div>
@@ -284,15 +284,6 @@ const SignInPage = () => {
           </div>
         </Col>
         <Col className="form-carousel-container" span={14}>
-          <div className="absolute inset-0">
-            <img
-              alt="Login Background"
-              className="w-full h-max-full"
-              data-testid="bg-image"
-              src={loginBG}
-            />
-          </div>
-
           <LoginCarousel />
         </Col>
       </Row>

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

@@ -27,19 +27,6 @@
     justify-content: center;
   }
 
-  .form-carousel-container {
-    position: fixed;
-    right: @size-md;
-    top: @size-md;
-    width: calc(58.33% - @size-md);
-    height: calc(100vh - @size-md * 2);
-    overflow: hidden;
-
-    @media screen and (max-width: 1024px) {
-      display: none;
-    }
-  }
-
   .form-item {
     background-color: @white;
     border-radius: @border-radius-lg;
@@ -48,12 +35,17 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    margin: @size-2xl;
+    margin: @size-2xl auto;
     padding: @size-xl @size-2xl;
     text-align: center;
     height: auto;
     max-width: 500px;
 
+    @media screen and (min-width: 1650px) {
+      min-width: 650px;
+      margin: auto;
+    }
+
     @media screen and (max-width: 1200px) {
       margin: @size-md;
       padding: @size-lg;
@@ -79,11 +71,44 @@
         font-size: 24px;
         margin-top: @size-lg;
       }
+
+      @media screen and (min-width: 1650px) {
+        font-size: 40px;
+      }
+    }
+
+    .login-form {
+      margin-top: 3rem;
+      width: 380px;
+
+      @media screen and (min-width: 1650px) {
+        width: 550px;
+      }
+
+      @media screen and (max-width: 1024px) {
+        width: 100%;
+        max-width: 380px;
+        margin: 2rem auto 0;
+      }
+
+      .error-alert {
+        border-color: #fbb4ae;
+      }
+
+      .login-btn {
+        @media screen and (min-width: 1650px) {
+          font-size: 18px;
+        }
+      }
     }
 
     label {
       color: @grey-text;
       font-weight: 600;
+
+      @media screen and (min-width: 1650px) {
+        font-size: 20px;
+      }
     }
 
     .input-field {
@@ -91,10 +116,18 @@
       border-radius: @border-radius-xs;
       border: 1px solid @grey-22;
       background-color: @grey-23 !important;
+
+      @media screen and (min-width: 1650px) {
+        padding: @size-md @size-lg;
+      }
     }
 
     .input-field::placeholder {
       color: @grey-24;
+
+      @media screen and (min-width: 1650px) {
+        font-size: 18px;
+      }
     }
 
     #password,
@@ -109,20 +142,108 @@
       justify-content: space-between;
       align-items: center;
 
+      .forgot-password-link {
+        @media screen and (min-width: 1650px) {
+          font-size: 18px;
+        }
+      }
+
       @media screen and (max-width: 768px) {
         width: 100%;
       }
+
+      @media screen and (min-width: 1650px) {
+        width: 600px;
+      }
     }
 
-    @media screen and (min-width: 1600px) {
+    .ant-btn-link.link-btn {
-      margin: auto;
+      padding: @size-xs;
     }
+
+    .signup-text,
+    .ant-btn-link.link-btn {
+      @media screen and (min-width: 1650px) {
+        font-size: 18px;
+        padding: 0 @size-xs;
+      }
+    }
+
+    .sso-signup {
+      margin-top: @size-xl;
+      margin-bottom: @size-lg;
+    }
+  }
+
+  .form-carousel-container {
+    position: fixed;
+    right: @size-lg;
+    top: @size-lg;
+    width: calc(58.33% - @size-lg);
+    height: calc(100vh - @size-lg * 2);
+    overflow: hidden;
+    background: linear-gradient(45deg, #194185 0%, #2e90fa 100%);
+    border-radius: @size-mlg;
+
+    @media screen and (min-width: 1710px) {
+      right: @size-xl;
+      top: @size-xl;
+      width: calc(58.33% - @size-xl);
+      height: calc(100vh - @size-xl * 2);
+    }
+
+    @media screen and (max-width: 1024px) {
+      display: none;
+    }
+  }
+
+  .ant-carousel .slick-dots li {
+    width: 3% !important;
+    height: 5% !important;
   }
 
   .carousel-header {
     color: @white;
     font-weight: 700;
-    font-size: 42px;
+    font-size: max(32px, 2.5vw);
+    line-height: 1.2;
+
+    @media screen and (min-width: 1650px) {
+      font-size: 50px;
+    }
+
+    @media screen and (min-width: 2400px) {
+      font-size: 64px;
+    }
+
+    @media screen and (min-width: 3600px) {
+      font-size: 80px;
+    }
+  }
+
+  .carousal-description {
+    width: min(600px, 80%);
+    text-align: center;
+    margin: 16px auto 5%;
+    padding: 0 48px;
+    color: @grey-50;
+    font-size: max(14px, 1vw);
+    line-height: 1.5;
+
+    @media screen and (min-width: 1650px) {
+      font-size: 20px;
+      width: 720px;
+    }
+
+    @media screen and (min-width: 2400px) {
+      font-size: 28px;
+      width: 940px;
+    }
+
+    @media screen and (min-width: 3600px) {
+      font-size: 48px;
+      width: 1800px;
+    }
   }
 }
 
@@ -139,31 +260,9 @@
     }
   }
 }
-.login-form {
-  margin-top: 3rem;
-  width: 380px;
-
-  @media screen and (max-width: 1024px) {
-    width: 100%;
-    max-width: 380px;
-    margin: 2rem auto 0;
-  }
-
-  .error-alert {
-    border-color: #fbb4ae;
-  }
-}
 .login-alert {
   margin-top: 1rem;
 }
-.carousal-description {
-  width: 600px;
-  text-align: center;
-  margin: 16px auto;
-  padding: 0 48px;
-  color: @grey-200;
-  font-size: @size-md;
-}
 
 @keyframes fadeIn {
   from {
@@ -206,26 +305,17 @@
 
   .image-container {
     position: relative;
-    z-index: 8;
+
-    top: 10px;
+    .governance-image {
+      width: 60%;
+    }
 
     .governance-top-left {
       position: absolute;
       top: -12px;
       left: 16%;
       animation: slideInFromLeft 1.5s ease-in-out;
-
+      width: 14%;
-      @media screen and (min-width: 1700px) {
-        left: 22%;
-      }
-
-      @media screen and (max-width: 1400px) {
-        left: 10%;
-      }
-
-      @media screen and (max-width: 1200px) {
-        left: 5%;
-      }
     }
 
     .governance-middle-right {
@@ -233,18 +323,7 @@
       top: 50%;
       right: 16%;
       animation: slideInFromRight 1.5s ease-in-out;
-
+      width: 20%;
-      @media screen and (min-width: 1700px) {
-        right: 22%;
-      }
-
-      @media screen and (max-width: 1400px) {
-        right: 10%;
-      }
-
-      @media screen and (max-width: 1200px) {
-        right: 5%;
-      }
     }
 
     .governance-bottom-right {
@@ -252,18 +331,11 @@
       bottom: -4%;
       right: 16%;
       animation: slideInFromRight 1.5s ease-in-out;
+      width: 20%;
+    }
 
-      @media screen and (min-width: 1700px) {
+    .collaboration-image {
-        right: 22%;
+      width: 46%;
-      }
-
-      @media screen and (max-width: 1400px) {
-        right: 10%;
-      }
-
-      @media screen and (max-width: 1200px) {
-        right: 5%;
-      }
     }
 
     .collab-top-left {
@@ -271,18 +343,7 @@
       top: -20px;
       left: 23%;
       animation: slideInFromLeft 1.5s ease-in-out;
-
+      width: 25%;
-      @media screen and (min-width: 1700px) {
-        left: 30%;
-      }
-
-      @media screen and (max-width: 1400px) {
-        left: 20%;
-      }
-
-      @media screen and (max-width: 1200px) {
-        left: 16%;
-      }
     }
 
     .collab-middle-right {
@@ -290,37 +351,23 @@
       top: 44%;
       right: 20%;
       animation: slideInFromRight 1.5s ease-in-out;
+      width: 25%;
+    }
 
-      @media screen and (min-width: 1700px) {
+    .observability-image {
-        right: 30%;
+      width: 50%;
-      }
-
-      @media screen and (max-width: 1400px) {
-        right: 16%;
-      }
-
-      @media screen and (max-width: 1200px) {
-        right: 12%;
-      }
     }
 
     .observability-bottom-right {
       position: absolute;
-      bottom: -26px;
+      bottom: -32px;
       right: 22%;
       animation: slideInFromRight 1.5s ease-in-out;
+      width: 28%;
+    }
 
-      @media screen and (min-width: 1700px) {
+    .discovery-image {
-        right: 28%;
+      width: 64%;
-      }
-
-      @media screen and (max-width: 1400px) {
-        right: 18%;
-      }
-
-      @media screen and (max-width: 1200px) {
-        right: 16%;
-      }
     }
 
     .discovery-top-right {
@@ -328,14 +375,7 @@
       top: -16px;
       right: 16%;
       animation: slideInFromRight 1.5s ease-in-out;
-
+      width: 15%;
-      @media screen and (min-width: 1700px) {
-        right: 22%;
-      }
-
-      @media screen and (max-width: 1300px) {
-        right: 10%;
-      }
     }
 
     .discovery-middle-right {
@@ -343,14 +383,11 @@
       top: 40%;
       right: 16%;
       animation: slideInFromRight 1.5s ease-in-out;
+      width: 15%;
+    }
 
-      @media screen and (min-width: 1700px) {
+    .collate-ai-img {
-        right: 22%;
+      width: 50%;
-      }
-
-      @media screen and (max-width: 1300px) {
-        right: 10%;
-      }
     }
 
     .ai-top-right {
@@ -358,29 +395,15 @@
       top: 12px;
       right: 20%;
       animation: slideInFromRight 1.5s ease-in-out;
-
+      width: 30%;
-      @media screen and (min-width: 1700px) {
-        right: 28%;
-      }
-
-      @media screen and (max-width: 1300px) {
-        right: 14%;
-      }
     }
 
     .ai-bottom-right {
       position: absolute;
-      bottom: -28px;
+      bottom: -16px;
       right: 16%;
       animation: slideInFromRight 1.5s ease-in-out;
-
+      width: 30%;
-      @media screen and (min-width: 1700px) {
-        right: 22%;
-      }
-
-      @media screen and (max-width: 1300px) {
-        right: 12%;
-      }
     }
 
     img {
@@ -389,11 +412,9 @@
   }
 }
 
-.sso-signup {
+@media screen and (min-width: 1650px) {
-  margin-top: @size-xl;
+  #password,
-  margin-bottom: @size-lg;
+  #confirmPassword {
-}
+    font-size: 18px;
-
+  }
-.ant-btn-link.link-btn {
-  padding: @size-xs;
 }

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

@@ -16,7 +16,6 @@ import { isEmpty } from 'lodash';
 import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useHistory } from 'react-router-dom';
-import loginBG from '../../assets/img/login-bg.png';
 import AlertBar from '../../components/AlertBar/AlertBar';
 import { useBasicAuth } from '../../components/Auth/AuthProviders/BasicAuthProvider';
 import BrandImage from '../../components/common/BrandImage/BrandImage';
@@ -193,7 +192,7 @@ const BasicSignUp = () => {
                   </Form.Item>
 
                   <Button
-                    className="w-full p-y-lg d-flex flex-center"
+                    className="w-full p-y-lg d-flex flex-center login-btn"
                     htmlType="submit"
                     type="primary">
                     {t('label.create-entity', {
@@ -201,7 +200,7 @@ const BasicSignUp = () => {
                     })}
                   </Button>
 
-                  <div className="mt-4 d-flex flex-center">
+                  <div className="mt-4 d-flex flex-center signup-text">
                     <Typography.Text>
                       {t('message.already-a-user')}
                     </Typography.Text>
@@ -221,15 +220,6 @@ const BasicSignUp = () => {
         </Col>
 
         <Col className="form-carousel-container" lg={14} sm={0}>
-          <div className="absolute inset-0">
-            <img
-              alt="bg-image"
-              className="w-full h-full"
-              data-testid="bg-image"
-              src={loginBG}
-            />
-          </div>
-
           <LoginCarousel />
         </Col>
       </Row>