yujunjun/OpenMetadata
1
0
Fork 0
mirror of https://github.com/open-metadata/OpenMetadata.git synced 2025-12-12 15:57:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix carousel image and image resolutions (#21332)

Browse Source 
* fix carousel img and img resolutions

* update sizes

* update image styles

* update styles

* fix sonar failure
This commit is contained in:
Sweta Agarwalla 2025-05-21 20:56:13 +05:30 committed by GitHub
parent 5cb18f5fa6
commit fd927130a5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
27 changed files with 265 additions and 213 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
openmetadata-ui/src/main/resources/ui/src/assets/img/forgot-password.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 338 KiB

BIN
openmetadata-ui/src/main/resources/ui/src/assets/img/login-bg.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 834 KiB

16
openmetadata-ui/src/main/resources/ui/src/constants/LoginClassBase.ts
View File

@ -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',
},
},

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

@ -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",

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

@ -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.",

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

@ -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",

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

@ -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",

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

@ -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",

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

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

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

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

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

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

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

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

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

@ -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",

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

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

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

@ -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",

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

@ -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",

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

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

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

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

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

@ -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",

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

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

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

@ -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}>
<Typography.Text className="text-xl font-medium text-grey-muted">
<Col className="text-center mt-4" span={24}>
<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">
<Typography.Text className="text-sm" type="secondary">
{t('label.or-lowercase')}
</Typography.Text>
</Divider>
<Col span={24}>
<Col className="d-flex flex-center" span={24}>
<Button
ghost
className="w-full"
className="p-0"
data-testid="go-back-button"
type="primary"
type="link"
onClick={handleLogin}>
{t('message.go-back-to-login-page')}
</Button>

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

@ -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;
}

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

@ -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>

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

@ -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();
});

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

@ -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>

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

@ -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) {
margin: auto;
.ant-btn-link.link-btn {
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;
@media screen and (min-width: 1700px) {
left: 22%;
}
@media screen and (max-width: 1400px) {
left: 10%;
}
@media screen and (max-width: 1200px) {
left: 5%;
}
width: 14%;
}
.governance-middle-right {
@ -233,18 +323,7 @@
top: 50%;
right: 16%;
animation: slideInFromRight 1.5s ease-in-out;
@media screen and (min-width: 1700px) {
right: 22%;
}
@media screen and (max-width: 1400px) {
right: 10%;
}
@media screen and (max-width: 1200px) {
right: 5%;
}
width: 20%;
}
.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) {
right: 22%;
}
@media screen and (max-width: 1400px) {
right: 10%;
}
@media screen and (max-width: 1200px) {
right: 5%;
}
.collaboration-image {
width: 46%;
}
.collab-top-left {
@ -271,18 +343,7 @@
top: -20px;
left: 23%;
animation: slideInFromLeft 1.5s ease-in-out;
@media screen and (min-width: 1700px) {
left: 30%;
}
@media screen and (max-width: 1400px) {
left: 20%;
}
@media screen and (max-width: 1200px) {
left: 16%;
}
width: 25%;
}
.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) {
right: 30%;
}
@media screen and (max-width: 1400px) {
right: 16%;
}
@media screen and (max-width: 1200px) {
right: 12%;
}
.observability-image {
width: 50%;
}
.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) {
right: 28%;
}
@media screen and (max-width: 1400px) {
right: 18%;
}
@media screen and (max-width: 1200px) {
right: 16%;
}
.discovery-image {
width: 64%;
}
.discovery-top-right {
@ -328,14 +375,7 @@
top: -16px;
right: 16%;
animation: slideInFromRight 1.5s ease-in-out;
@media screen and (min-width: 1700px) {
right: 22%;
}
@media screen and (max-width: 1300px) {
right: 10%;
}
width: 15%;
}
.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) {
right: 22%;
}
@media screen and (max-width: 1300px) {
right: 10%;
}
.collate-ai-img {
width: 50%;
}
.ai-top-right {
@ -358,29 +395,15 @@
top: 12px;
right: 20%;
animation: slideInFromRight 1.5s ease-in-out;
@media screen and (min-width: 1700px) {
right: 28%;
}
@media screen and (max-width: 1300px) {
right: 14%;
}
width: 30%;
}
.ai-bottom-right {
position: absolute;
bottom: -28px;
bottom: -16px;
right: 16%;
animation: slideInFromRight 1.5s ease-in-out;
@media screen and (min-width: 1700px) {
right: 22%;
}
@media screen and (max-width: 1300px) {
right: 12%;
}
width: 30%;
}
img {
@ -389,11 +412,9 @@
}
}
.sso-signup {
margin-top: @size-xl;
margin-bottom: @size-lg;
}
.ant-btn-link.link-btn {
padding: @size-xs;
@media screen and (min-width: 1650px) {
#password,
#confirmPassword {
font-size: 18px;
}
}

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

@ -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>