change login screen images as per new layout (#15526)

* change login screen images as per new layout

* fix the image size and layout background color

* class naming change

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

@@ -12,36 +12,40 @@
  */
 
 import { CarouselProps } from 'antd';
-import collaborationImg from '../assets/img/data-collaboration.png';
-import discoveryImg from '../assets/img/data-discovery.png';
-import governanceImg from '../assets/img/data-governance.png';
-import insightImg from '../assets/img/data-insights.png';
-import dataQualityImg from '../assets/img/data-qauality.png';
+import loginClassBase from './LoginClassBase';
+
+const {
+  dataDiscovery,
+  dataQuality,
+  governance,
+  dataInsightPlural,
+  dataCollaboration,
+} = loginClassBase.carouselImages();
 
 export const LOGIN_SLIDE = [
   {
     title: 'data-discovery',
-    image: discoveryImg,
+    image: dataDiscovery,
     descriptionKey: 'enables-end-to-end-metadata-management',
   },
   {
     title: 'data-quality',
-    image: dataQualityImg,
+    image: dataQuality,
     descriptionKey: 'discover-your-data-and-unlock-the-value-of-data-assets',
   },
   {
     title: 'governance',
-    image: governanceImg,
+    image: governance,
     descriptionKey: 'assess-data-reliability-with-data-profiler-lineage',
   },
   {
     title: 'data-insight-plural',
-    image: insightImg,
+    image: dataInsightPlural,
     descriptionKey: 'fosters-collaboration-among-producers-and-consumers',
   },
   {
     title: 'data-collaboration',
-    image: collaborationImg,
+    image: dataCollaboration,
     descriptionKey: 'deeply-understand-table-relations-message',
   },
 ];

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

@@ -0,0 +1,35 @@
+/*
+ *  Copyright 2024 Collate.
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+
+import collaborationImg from '../assets/img/login-screen/data-collaboration.png';
+import discoveryImg from '../assets/img/login-screen/data-discovery.png';
+import governanceImg from '../assets/img/login-screen/data-governance.png';
+import insightImg from '../assets/img/login-screen/data-insights.png';
+import dataQualityImg from '../assets/img/login-screen/data-quality.png';
+
+class LoginClassBase {
+  public carouselImages() {
+    return {
+      dataDiscovery: discoveryImg,
+      dataQuality: dataQualityImg,
+      governance: governanceImg,
+      dataInsightPlural: insightImg,
+      dataCollaboration: collaborationImg,
+    };
+  }
+}
+
+const loginClassBase = new LoginClassBase();
+
+export default loginClassBase;
+export { LoginClassBase };

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

@@ -190,9 +190,8 @@ const SignInPage = () => {
   const onClickForgotPassword = () => history.push(ROUTES.FORGOT_PASSWORD);
 
   return (
-    <div className="d-flex flex-col h-full bg-white">
-      <Row className="flex flex-grow" data-testid="signin-page">
-        <Col span={8}>
+    <Row className="h-full" data-testid="signin-page">
+      <Col className="bg-white" span={8}>
         <div
           className={classNames('mt-24 text-center flex-center flex-col', {
             'sso-container': !isAuthProviderBasic,
@@ -319,7 +318,6 @@ const SignInPage = () => {
         <LoginCarousel />
       </Col>
     </Row>
-    </div>
   );
 };
 

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

@@ -49,6 +49,7 @@
   transform: translate(-50%, -50%);
 
   .slick-dots.slick-dots-bottom {
+    position: initial;
     .slick-active {
       button {
         background-color: @primary-color;

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

@@ -11,7 +11,7 @@
  *  limitations under the License.
  */
 
-import { Button, Divider, Form, Input, Typography } from 'antd';
+import { Button, Col, Divider, Form, Input, Row, Typography } from 'antd';
 import { isEmpty } from 'lodash';
 import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -66,9 +66,8 @@ const BasicSignUp = () => {
   const handleLogin = () => history.push(ROUTES.SIGNIN);
 
   return (
-    <div className="d-flex flex-col h-full bg-white">
-      <div className="d-flex flex-grow" data-testid="signin-page">
-        <div className="w-5/12">
+    <Row className="h-full" data-testid="signin-page">
+      <Col className="bg-white" span={10}>
         <div className="mt-4 text-center flex-center flex-col">
           <BrandImage height="auto" width={200} />
           <Typography.Text className="mt-8 w-80 text-xl font-medium text-grey-muted">
@@ -151,9 +150,7 @@ const BasicSignUp = () => {
                           );
                         }
                         if (value !== password) {
-                            return Promise.reject(
-                              t('label.password-not-match')
-                            );
+                          return Promise.reject(t('label.password-not-match'));
                         }
 
                         return Promise.resolve();
@@ -194,8 +191,9 @@ const BasicSignUp = () => {
             </div>
           ) : null}
         </div>
-        </div>
-        <div className="w-7/12 relative">
+      </Col>
+
+      <Col className="relative" span={14}>
         <div className="absolute inset-0">
           <img
             alt="bg-image"
@@ -206,9 +204,8 @@ const BasicSignUp = () => {
         </div>
 
         <LoginCarousel />
-        </div>
-      </div>
-    </div>
+      </Col>
+    </Row>
   );
 };