mirror of
https://github.com/open-metadata/OpenMetadata.git
synced 2025-12-09 05:55:55 +00:00
Removed tailwind class from pages component part 1 (#9054)
* Removed tailwind class from pages component part 1 * Addressing comments
This commit is contained in:
Shailesh Parmar
GitHub
parent
c855af6167
commit
7ed607f291
@ -45,7 +45,7 @@ const AddDataQualityTestPage = () => {
|
||||
|
||||
return (
|
||||
<PageContainerV1>
|
||||
<div className="tw-self-center">
|
||||
<div className="self-center">
|
||||
<AddDataQualityTestV1 table={table} />
|
||||
</div>
|
||||
</PageContainerV1>
|
||||
|
||||
@ -106,7 +106,7 @@ const AddGlossaryPage: FunctionComponent = () => {
|
||||
|
||||
return (
|
||||
<PageContainerV1>
|
||||
<div className="tw-self-center">
|
||||
<div className="self-center">
|
||||
<AddGlossary
|
||||
allowAccess={createPermission}
|
||||
fetchTags={fetchTags}
|
||||
|
||||
@ -207,7 +207,7 @@ const AddGlossaryTermPage = () => {
|
||||
{isLoading ? (
|
||||
<Loader />
|
||||
) : (
|
||||
<div className="tw-self-center">
|
||||
<div className="self-center">
|
||||
<AddGlossaryTerm
|
||||
allowAccess={createPermission}
|
||||
glossaryData={glossaryData as Glossary}
|
||||
|
||||
@ -251,9 +251,9 @@ const AddIngestionPage = () => {
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<div className="tw-self-center">
|
||||
<div className="self-center">
|
||||
<PageLayout
|
||||
classes="tw-max-w-full-hd tw-h-full tw-pt-4"
|
||||
classes="w-max-1080 h-full p-t-md"
|
||||
header={<TitleBreadcrumb titleLinks={slashedBreadcrumb} />}
|
||||
layout={PageLayoutType['2ColRTL']}
|
||||
rightPanel={getServiceIngestionStepGuide(
|
||||
@ -266,7 +266,7 @@ const AddIngestionPage = () => {
|
||||
false,
|
||||
isAirflowRunning
|
||||
)}>
|
||||
<div className="tw-form-container">
|
||||
<div className="form-container">
|
||||
<AddIngestion
|
||||
activeIngestionStep={activeIngestionStep}
|
||||
handleCancelClick={goToService}
|
||||
|
||||
@ -116,7 +116,7 @@ const AddWebhookPage: FunctionComponent = () => {
|
||||
|
||||
return (
|
||||
<PageContainerV1>
|
||||
<div className="tw-self-center">
|
||||
<div className="self-center">
|
||||
<AddWebhook
|
||||
allowAccess={createPermission}
|
||||
header={`Add ${HEADER_TEXT_WEBHOOK[webhookType]}`}
|
||||
|
||||
@ -139,10 +139,10 @@ const BotDetailsPage = () => {
|
||||
return (
|
||||
<ErrorPlaceHolder>
|
||||
<Typography.Paragraph
|
||||
className="tw-text-base"
|
||||
className="text-base"
|
||||
data-testid="error-message">
|
||||
No bots available with name{' '}
|
||||
<span className="tw-font-medium" data-testid="username">
|
||||
<span className="font-medium" data-testid="username">
|
||||
{botsName}
|
||||
</span>{' '}
|
||||
</Typography.Paragraph>
|
||||
@ -174,7 +174,7 @@ const BotDetailsPage = () => {
|
||||
}, [botsName]);
|
||||
|
||||
return (
|
||||
<PageContainerV1 className="tw-py-4">
|
||||
<PageContainerV1 className="p-y-md">
|
||||
{isLoading ? (
|
||||
<Loader />
|
||||
) : (
|
||||
|
||||
@ -183,7 +183,7 @@ const CreateUserPage = () => {
|
||||
|
||||
return (
|
||||
<PageContainerV1>
|
||||
<div className="tw-self-center">
|
||||
<div className="self-center">
|
||||
<CreateUserComponent
|
||||
forceBot={Boolean(bot)}
|
||||
roles={roles}
|
||||
|
||||
@ -16,3 +16,8 @@
|
||||
padding-top: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-properties-schemaEditor {
|
||||
border: 1px solid #dce3ec;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
@ -167,7 +167,7 @@ const CustomEntityDetailV1 = () => {
|
||||
|
||||
return viewPermission ? (
|
||||
<Row
|
||||
className="tw-my-2"
|
||||
className="m-y-xs"
|
||||
data-testid="custom-entity-container"
|
||||
gutter={[16, 16]}>
|
||||
<Col className="global-settings-tabs" span={24}>
|
||||
@ -181,7 +181,7 @@ const CustomEntityDetailV1 = () => {
|
||||
{activeTab === 2 && (
|
||||
<div data-testid="entity-schema">
|
||||
<SchemaEditor
|
||||
className="tw-border tw-border-main tw-rounded-md tw-py-4"
|
||||
className="custom-properties-schemaEditor p-y-md"
|
||||
editorClass="custom-entity-schema"
|
||||
value={JSON.parse(selectedEntityTypeDetail.schema ?? '{}')}
|
||||
/>
|
||||
@ -211,11 +211,11 @@ const CustomEntityDetailV1 = () => {
|
||||
</div>
|
||||
) : (
|
||||
<div data-testid="entity-custom-fields">
|
||||
<div className="tw-flex tw-justify-end">
|
||||
<div className="flex justify-end">
|
||||
<Tooltip
|
||||
title={editPermission ? 'Add' : NO_PERMISSION_FOR_ACTION}>
|
||||
<Button
|
||||
className="tw-mb-4 tw-py-1 tw-px-2 tw-rounded"
|
||||
className="m-b-md p-y-xss p-x-xs rounded-4"
|
||||
data-testid="add-field-button"
|
||||
disabled={!editPermission}
|
||||
size="custom"
|
||||
|
||||
@ -570,7 +570,7 @@ const DatabaseSchemaPage: FunctionComponent = () => {
|
||||
text?.trim() ? (
|
||||
<RichTextEditorPreviewer markdown={text} />
|
||||
) : (
|
||||
<span className="tw-no-description">No description</span>
|
||||
<span className="text-grey-muted">No description</span>
|
||||
),
|
||||
},
|
||||
],
|
||||
@ -706,22 +706,22 @@ const DatabaseSchemaPage: FunctionComponent = () => {
|
||||
/>
|
||||
</Col>
|
||||
<Col span={24}>
|
||||
<Row className="tw-mt-4">
|
||||
<Row className="m-t-xss">
|
||||
<Col span={24}>
|
||||
<TabsPane
|
||||
activeTab={activeTab}
|
||||
className="tw-flex-initial"
|
||||
className="flex-initial"
|
||||
setActiveTab={activeTabHandler}
|
||||
tabs={tabs}
|
||||
/>
|
||||
</Col>
|
||||
<Col className="tw-py-4" span={24}>
|
||||
<Col className="p-y-md" span={24}>
|
||||
{activeTab === 1 && (
|
||||
<Fragment>{getSchemaTableList()}</Fragment>
|
||||
)}
|
||||
{activeTab === 2 && (
|
||||
<Row
|
||||
className="tw-py-4 entity-feed-list tw-bg-white tw-border tw-rounded tw-shadow tw-h-full"
|
||||
className="p-t-xss entity-feed-list bg-white border-1 rounded-4 shadow-base h-full"
|
||||
id="activityfeed">
|
||||
<Col offset={4} span={16}>
|
||||
<ActivityFeedList
|
||||
|
||||
@ -11,6 +11,7 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { Typography } from 'antd';
|
||||
import { AxiosError } from 'axios';
|
||||
import { startCase } from 'lodash';
|
||||
import { ServiceOption, ServicesData, ServiceTypes } from 'Models';
|
||||
@ -54,8 +55,8 @@ function EditConnectionFormPage() {
|
||||
return (
|
||||
guide && (
|
||||
<>
|
||||
<h6 className="tw-heading tw-text-base">{guide.title}</h6>
|
||||
<div className="tw-mb-5">{guide.description}</div>
|
||||
<Typography.Title level={5}>{guide.title}</Typography.Title>
|
||||
<div className="mb-5">{guide.description}</div>
|
||||
</>
|
||||
)
|
||||
);
|
||||
@ -150,14 +151,14 @@ function EditConnectionFormPage() {
|
||||
</ErrorPlaceHolder>
|
||||
) : (
|
||||
<PageLayout
|
||||
classes="tw-max-w-full-hd tw-h-full tw-pt-4"
|
||||
classes="w-max-1080 h-full p-t-xss"
|
||||
header={<TitleBreadcrumb titleLinks={slashedBreadcrumb} />}
|
||||
layout={PageLayoutType['2ColRTL']}
|
||||
rightPanel={fetchRightPanel()}>
|
||||
<div className="tw-form-container">
|
||||
<h6 className="tw-heading tw-text-base">
|
||||
<div className="form-container">
|
||||
<Typography.Title level={5}>
|
||||
{`Edit ${serviceFQN} Service Connection`}
|
||||
</h6>
|
||||
</Typography.Title>
|
||||
<ServiceConfig
|
||||
data={serviceDetails as ServicesData}
|
||||
disableTestConnection={
|
||||
@ -176,7 +177,7 @@ function EditConnectionFormPage() {
|
||||
|
||||
return (
|
||||
<PageContainerV1>
|
||||
<div className="tw-self-center">
|
||||
<div className="self-center">
|
||||
<>{isLoading ? <Loader /> : renderPage()}</>
|
||||
</div>
|
||||
</PageContainerV1>
|
||||
|
||||
@ -281,9 +281,9 @@ const EditIngestionPage = () => {
|
||||
return <ErrorPlaceHolder>{errorMsg}</ErrorPlaceHolder>;
|
||||
} else {
|
||||
return (
|
||||
<div className="tw-self-center">
|
||||
<div className="self-center">
|
||||
<PageLayout
|
||||
classes="tw-max-w-full-hd tw-h-full tw-pt-4"
|
||||
classes="w-max-1080 h-full p-t-xss"
|
||||
header={<TitleBreadcrumb titleLinks={slashedBreadcrumb} />}
|
||||
layout={PageLayoutType['2ColRTL']}
|
||||
rightPanel={getServiceIngestionStepGuide(
|
||||
@ -296,7 +296,7 @@ const EditIngestionPage = () => {
|
||||
true,
|
||||
isAirflowRunning
|
||||
)}>
|
||||
<div className="tw-form-container">
|
||||
<div className="form-container">
|
||||
<AddIngestion
|
||||
activeIngestionStep={activeIngestionStep}
|
||||
data={ingestionData}
|
||||
|
||||
@ -153,7 +153,7 @@ const EditWebhookPage: FunctionComponent = () => {
|
||||
|
||||
return (
|
||||
<PageContainerV1>
|
||||
<div className="tw-self-center">
|
||||
<div className="self-center">
|
||||
{!isLoading ? (
|
||||
<AddWebhook
|
||||
allowAccess={createPermission || editPermission}
|
||||
|
||||
@ -158,16 +158,16 @@ const ElasticSearchIndexPage = () => {
|
||||
<Row gutter={[16, 8]}>
|
||||
<Col span={24}>
|
||||
<Space wrap direction="horizontal" size={0}>
|
||||
<div className="tw-flex">
|
||||
<span className="tw-text-grey-muted">Mode</span> :
|
||||
<span className="tw-ml-2">
|
||||
<div className="flex">
|
||||
<span className="text-grey-muted">Mode</span> :
|
||||
<span className="m-l-xs">
|
||||
{startCase(batchJobData?.runMode) || '--'}
|
||||
</span>
|
||||
</div>
|
||||
<Divider type="vertical" />
|
||||
<div className="tw-flex">
|
||||
<span className="tw-text-grey-muted">Status</span> :
|
||||
<span className="tw-ml-2">
|
||||
<div className="flex">
|
||||
<span className="text-grey-muted">Status</span> :
|
||||
<span className="m-l-xs">
|
||||
<Space size={8}>
|
||||
{batchJobData?.status && (
|
||||
<SVGIcons
|
||||
@ -186,9 +186,9 @@ const ElasticSearchIndexPage = () => {
|
||||
</span>
|
||||
</div>
|
||||
<Divider type="vertical" />
|
||||
<div className="tw-flex">
|
||||
<span className="tw-text-grey-muted">Index stats</span> :
|
||||
<span className="tw-ml-2">
|
||||
<div className="flex">
|
||||
<span className="text-grey-muted">Index stats</span> :
|
||||
<span className="m-l-xs">
|
||||
{!isEmpty(batchJobData) ? (
|
||||
<Space size={8}>
|
||||
<Badge
|
||||
@ -219,9 +219,9 @@ const ElasticSearchIndexPage = () => {
|
||||
</span>
|
||||
</div>
|
||||
<Divider type="vertical" />
|
||||
<div className="tw-flex">
|
||||
<span className="tw-text-grey-muted">Last Updated</span> :
|
||||
<span className="tw-ml-2">
|
||||
<div className="flex">
|
||||
<span className="text-grey-muted">Last Updated</span> :
|
||||
<span className="m-l-xs">
|
||||
{batchJobData?.timestamp
|
||||
? getDateTimeByTimeStampWithZone(
|
||||
batchJobData?.timestamp
|
||||
@ -230,9 +230,9 @@ const ElasticSearchIndexPage = () => {
|
||||
</span>
|
||||
</div>
|
||||
<Divider type="vertical" />
|
||||
<div className="tw-flex">
|
||||
<span className="tw-text-grey-muted">Last Failed At:</span>
|
||||
<p className="tw-ml-2">
|
||||
<div className="flex">
|
||||
<span className="text-grey-muted">Last Failed At:</span>
|
||||
<p className="m-l-xs">
|
||||
{batchJobData?.failureDetails?.lastFailedAt
|
||||
? getDateTimeByTimeStampWithZone(
|
||||
batchJobData?.failureDetails?.lastFailedAt
|
||||
@ -243,8 +243,8 @@ const ElasticSearchIndexPage = () => {
|
||||
</Space>
|
||||
</Col>
|
||||
<Col span={24}>
|
||||
<span className="tw-text-grey-muted">Failure Context:</span>
|
||||
<span className="tw-ml-2">
|
||||
<span className="text-grey-muted">Failure Context:</span>
|
||||
<span className="m-l-xs">
|
||||
{batchJobData?.failureDetails?.context ? (
|
||||
<RichTextEditorPreviewer
|
||||
enableSeeMoreVariant={Boolean(batchJobData)}
|
||||
@ -256,8 +256,8 @@ const ElasticSearchIndexPage = () => {
|
||||
</span>
|
||||
</Col>
|
||||
<Col span={24}>
|
||||
<span className="tw-text-grey-muted">Last error:</span>
|
||||
<span className="tw-ml-2">
|
||||
<span className="text-grey-muted">Last error:</span>
|
||||
<span className="m-l-xs">
|
||||
{batchJobData?.failureDetails?.lastFailedReason ? (
|
||||
<RichTextEditorPreviewer
|
||||
enableSeeMoreVariant={Boolean(batchJobData)}
|
||||
@ -289,15 +289,15 @@ const ElasticSearchIndexPage = () => {
|
||||
<Row gutter={[16, 8]}>
|
||||
<Col span={24}>
|
||||
<Space direction="horizontal" size={16}>
|
||||
<div className="tw-flex">
|
||||
<span className="tw-text-grey-muted">Mode</span> :
|
||||
<span className="tw-ml-2">
|
||||
<div className="flex">
|
||||
<span className="text-grey-muted">Mode</span> :
|
||||
<span className="m-l-xs">
|
||||
{startCase(streamJobData?.runMode) || '--'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="tw-flex">
|
||||
<span className="tw-text-grey-muted">Status</span> :
|
||||
<span className="tw-ml-2">
|
||||
<div className="flex">
|
||||
<span className="text-grey-muted">Status</span> :
|
||||
<span className="m-l-xs">
|
||||
<Space size={8}>
|
||||
{streamJobData?.status && (
|
||||
<SVGIcons
|
||||
@ -316,9 +316,9 @@ const ElasticSearchIndexPage = () => {
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="tw-flex">
|
||||
<span className="tw-text-grey-muted">Last Updated</span> :
|
||||
<span className="tw-ml-2">
|
||||
<div className="flex">
|
||||
<span className="text-grey-muted">Last Updated</span> :
|
||||
<span className="m-l-xs">
|
||||
{streamJobData?.timestamp
|
||||
? getDateTimeByTimeStampWithZone(
|
||||
streamJobData?.timestamp
|
||||
@ -326,9 +326,9 @@ const ElasticSearchIndexPage = () => {
|
||||
: '--'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="tw-flex">
|
||||
<span className="tw-text-grey-muted">Last Failed At:</span>
|
||||
<p className="tw-ml-2">
|
||||
<div className="flex">
|
||||
<span className="text-grey-muted">Last Failed At:</span>
|
||||
<p className="m-l-xs">
|
||||
{streamJobData?.failureDetails?.lastFailedAt
|
||||
? getDateTimeByTimeStampWithZone(
|
||||
streamJobData?.failureDetails?.lastFailedAt
|
||||
@ -339,8 +339,8 @@ const ElasticSearchIndexPage = () => {
|
||||
</Space>
|
||||
</Col>
|
||||
<Col span={24}>
|
||||
<span className="tw-text-grey-muted">Failure Context:</span>
|
||||
<span className="tw-ml-2">
|
||||
<span className="text-grey-muted">Failure Context:</span>
|
||||
<span className="m-l-xs">
|
||||
{streamJobData?.failureDetails?.context ? (
|
||||
<RichTextEditorPreviewer
|
||||
enableSeeMoreVariant={Boolean(streamJobData)}
|
||||
@ -352,8 +352,8 @@ const ElasticSearchIndexPage = () => {
|
||||
</span>
|
||||
</Col>
|
||||
<Col span={24}>
|
||||
<span className="tw-text-grey-muted">Last error:</span>
|
||||
<span className="tw-ml-2">
|
||||
<span className="text-grey-muted">Last error:</span>
|
||||
<span className="m-l-xs">
|
||||
{streamJobData?.failureDetails?.lastFailedReason ? (
|
||||
<RichTextEditorPreviewer
|
||||
enableSeeMoreVariant={Boolean(streamJobData)}
|
||||
|
||||
@ -207,15 +207,13 @@ const AddKPIPage = () => {
|
||||
|
||||
return (
|
||||
<Row
|
||||
className="tw-bg-body-main tw-h-full"
|
||||
className="bg-body-main h-full"
|
||||
data-testid="add-kpi-container"
|
||||
gutter={[16, 16]}>
|
||||
<Col offset={4} span={12}>
|
||||
<TitleBreadcrumb titleLinks={breadcrumb} />
|
||||
<Card>
|
||||
<Typography.Paragraph
|
||||
className="tw-text-base"
|
||||
data-testid="form-title">
|
||||
<Typography.Paragraph className="text-base" data-testid="form-title">
|
||||
{t('label.add-new-kpi')}
|
||||
</Typography.Paragraph>
|
||||
<Form
|
||||
@ -425,7 +423,7 @@ const AddKPIPage = () => {
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Space align="center" className="tw-w-full tw-justify-end">
|
||||
<Space align="center" className="w-full justify-end">
|
||||
<Button
|
||||
data-testid="cancel-btn"
|
||||
type="link"
|
||||
@ -444,8 +442,8 @@ const AddKPIPage = () => {
|
||||
</Form>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col className="tw-mt-4" span={4}>
|
||||
<Typography.Paragraph className="tw-text-base tw-font-medium">
|
||||
<Col className="m-t-md" span={4}>
|
||||
<Typography.Paragraph className="text-base font-medium">
|
||||
{t('label.add-kpi')}
|
||||
</Typography.Paragraph>
|
||||
<Typography.Text>{ADD_KPI_TEXT}</Typography.Text>
|
||||
|
||||
@ -233,14 +233,14 @@ const AddKPIPage = () => {
|
||||
<>
|
||||
{kpiData ? (
|
||||
<Row
|
||||
className="tw-bg-body-main tw-h-full"
|
||||
className="bg-body-main h-full"
|
||||
data-testid="add-kpi-container"
|
||||
gutter={[16, 16]}>
|
||||
<Col offset={4} span={12}>
|
||||
<TitleBreadcrumb titleLinks={breadcrumb} />
|
||||
<Card>
|
||||
<Typography.Paragraph
|
||||
className="tw-text-base"
|
||||
className="text-base"
|
||||
data-testid="form-title">
|
||||
{t('label.add-new-kpi')}
|
||||
</Typography.Paragraph>
|
||||
@ -400,7 +400,7 @@ const AddKPIPage = () => {
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Space align="center" className="tw-w-full tw-justify-end">
|
||||
<Space align="center" className="w-full justify-end">
|
||||
<Button
|
||||
data-testid="cancel-btn"
|
||||
type="link"
|
||||
@ -425,8 +425,8 @@ const AddKPIPage = () => {
|
||||
</Form>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col className="tw-mt-4" span={4}>
|
||||
<Typography.Paragraph className="tw-text-base tw-font-medium">
|
||||
<Col className="m-t-md" span={4}>
|
||||
<Typography.Paragraph className="text-base font-medium">
|
||||
{t('label.edit-kpi')}
|
||||
</Typography.Paragraph>
|
||||
<Typography.Text>{ADD_KPI_TEXT}</Typography.Text>
|
||||
|
||||
@ -645,7 +645,7 @@ const DatabaseDetails: FunctionComponent = () => {
|
||||
text?.trim() ? (
|
||||
<RichTextEditorPreviewer markdown={text} />
|
||||
) : (
|
||||
<span className="tw-no-description">No description</span>
|
||||
<span className="text-grey-muted">No description</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
@ -735,11 +735,11 @@ const DatabaseDetails: FunctionComponent = () => {
|
||||
/>
|
||||
</Col>
|
||||
<Col span={24}>
|
||||
<Row className="tw-mt-4">
|
||||
<Row className="m-t-md">
|
||||
<Col span={24}>
|
||||
<TabsPane
|
||||
activeTab={activeTab}
|
||||
className="tw-flex-initial"
|
||||
className="flex-initial"
|
||||
setActiveTab={activeTabHandler}
|
||||
tabs={tabs}
|
||||
/>
|
||||
@ -773,7 +773,7 @@ const DatabaseDetails: FunctionComponent = () => {
|
||||
)}
|
||||
{activeTab === 2 && (
|
||||
<Row
|
||||
className=" tw-pt-4 entity-feed-list tw-bg-white tw-border tw-rounded tw-shadow tw-h-full"
|
||||
className="p-t-xss entity-feed-list bg-white border-1 rounded-4 shadow-base h-full"
|
||||
id="activityfeed">
|
||||
<Col offset={4} span={16}>
|
||||
<ActivityFeedList
|
||||
|
||||
@ -35,7 +35,7 @@ const ForgotPassword = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="h-full tw-py-24 forgot-password-container ">
|
||||
<div className="h-full py-24 forgot-password-container ">
|
||||
<Card
|
||||
bodyStyle={{ padding: '48px' }}
|
||||
className="m-auto"
|
||||
@ -45,7 +45,7 @@ const ForgotPassword = () => {
|
||||
<SVGIcons alt="OpenMetadata Logo" icon={Icons.LOGO} width="152" />
|
||||
</Col>
|
||||
<Col className="flex-center text-center mt-8" span={24}>
|
||||
<Typography.Text className="tw-text-xl text-semi-bold tw-text-grey-muted">
|
||||
<Typography.Text className="text-xl text-semi-bold text-grey-muted">
|
||||
Enter your registered email to receive password reset link
|
||||
</Typography.Text>
|
||||
</Col>
|
||||
@ -78,13 +78,13 @@ const ForgotPassword = () => {
|
||||
{showResetLinkSentAlert && (
|
||||
<Col span={24}>
|
||||
<div
|
||||
className="tw-flex tw-flex-col "
|
||||
className="flex flex-col"
|
||||
data-testid="success-screen-container">
|
||||
<div className="tw-flex tw-border tw-border-main tw-rounded tw-p-3 success-alert">
|
||||
<div className="tw-mr-2">
|
||||
<div className="flex border-1 border-main rounded-4 p-sm success-alert">
|
||||
<div className="m-r-xs">
|
||||
<SVGIcons
|
||||
alt="success"
|
||||
className="tw-w-5"
|
||||
className="w-5"
|
||||
data-testid="success-icon"
|
||||
icon={Icons.SUCCESS_BADGE}
|
||||
/>
|
||||
|
||||
@ -28,14 +28,14 @@ const LoginCarousel = () => {
|
||||
<div>
|
||||
<img
|
||||
alt="slider"
|
||||
className="tw-w-full"
|
||||
className="w-full"
|
||||
loading="lazy"
|
||||
src={data.image}
|
||||
/>
|
||||
</div>
|
||||
<div className="tw-mt-24 tw-mb-11">
|
||||
<div className="mt-24 mb-11">
|
||||
<p
|
||||
className="tw-text-center tw-w-5/6 tw-mx-auto tw-font-medium tw-text-white tw-text-xl"
|
||||
className="text-center carousal-description font-medium text-white text-xl"
|
||||
data-testid="carousel-slide-description">
|
||||
{data.description}
|
||||
</p>
|
||||
|
||||
@ -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 classNames from 'classnames';
|
||||
import jwtDecode, { JwtPayload } from 'jwt-decode';
|
||||
import { observer } from 'mobx-react';
|
||||
@ -181,17 +181,15 @@ const SigninPage = () => {
|
||||
const onClickForgotPassword = () => history.push(ROUTES.FORGOT_PASSWORD);
|
||||
|
||||
return (
|
||||
<div className="tw-flex tw-flex-col tw-h-full">
|
||||
<div
|
||||
className="tw-flex tw-bg-body-main tw-flex-grow"
|
||||
data-testid="signin-page">
|
||||
<div className="tw-w-5/12">
|
||||
<div className="flex flex-col h-full">
|
||||
<Row className="flex bg-body-main flex-grow" data-testid="signin-page">
|
||||
<Col span={10}>
|
||||
<div
|
||||
className={classNames('mt-24 tw-text-center flex-center flex-col', {
|
||||
className={classNames('mt-24 text-center flex-center flex-col', {
|
||||
'sso-container': !isAuthProviderBasic,
|
||||
})}>
|
||||
<SVGIcons alt="OpenMetadata Logo" icon={Icons.LOGO} width="152" />
|
||||
<Typography.Text className="mt-8 w-80 tw-text-xl text-semi-bold tw-text-grey-muted">
|
||||
<Typography.Text className="mt-8 w-80 text-xl text-semi-bold text-grey-muted">
|
||||
{t('label.om-description')}{' '}
|
||||
</Typography.Text>
|
||||
|
||||
@ -242,13 +240,13 @@ const SigninPage = () => {
|
||||
</Form>
|
||||
{loginError && (
|
||||
<div
|
||||
className="tw-flex tw-flex-col m-y-md"
|
||||
className="flex flex-col m-y-md"
|
||||
data-testid="login-error-container">
|
||||
<div className="tw-flex tw-border tw-border-main tw-rounded tw-p-3 error-alert ">
|
||||
<div className="tw-mr-2">
|
||||
<div className="flex border-1 border-main rounded-4 p-sm error-alert ">
|
||||
<div className="m-r-xs">
|
||||
<SVGIcons
|
||||
alt="failed"
|
||||
className="tw-w-5"
|
||||
className="w-5"
|
||||
data-testid="failed-icon"
|
||||
icon={Icons.FAIL_BADGE}
|
||||
/>
|
||||
@ -291,23 +289,23 @@ const SigninPage = () => {
|
||||
<div className="">{getSignInButton()}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="tw-w-7/12 tw-relative">
|
||||
<div className="tw-absolute tw-inset-0">
|
||||
</Col>
|
||||
<Col className="relative" span={14}>
|
||||
<div className="absolute inset-0">
|
||||
<img
|
||||
alt="bg-image"
|
||||
className="tw-w-full tw-h-full"
|
||||
className="w-full h-full"
|
||||
data-testid="bg-image"
|
||||
src={loginBG}
|
||||
/>
|
||||
</div>
|
||||
<div className="tw-relative">
|
||||
<div className="tw-flex tw-justify-center tw-mt-44 tw-mb-10">
|
||||
<div className="relative">
|
||||
<div className="flex justify-center mt-44 mb-10">
|
||||
<LoginCarousel />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -31,3 +31,7 @@
|
||||
border-color: #fbb4ae;
|
||||
}
|
||||
}
|
||||
.carousal-description {
|
||||
margin-left: 13%;
|
||||
margin-right: 13%;
|
||||
}
|
||||
|
||||
@ -16,6 +16,7 @@
|
||||
@import url('./position.less');
|
||||
@import url('./spacing.less');
|
||||
@import url('./components/table.less');
|
||||
@import url('./components/form.less');
|
||||
@import url('./components/tabs.less');
|
||||
@import url('./components/toggle-switch.less');
|
||||
@import url('./components/button.less');
|
||||
|
||||
@ -41,6 +41,10 @@
|
||||
font-size: 1rem /* 16px */;
|
||||
line-height: 1.5rem /* 24px */;
|
||||
}
|
||||
.text-xl {
|
||||
font-size: 1.25rem /* 20px */;
|
||||
line-height: 1.75rem /* 28px */;
|
||||
}
|
||||
|
||||
.text-2xl {
|
||||
font-size: 1.5rem /* 24px */;
|
||||
@ -93,6 +97,9 @@
|
||||
.w-4 {
|
||||
width: 16px;
|
||||
}
|
||||
.w-5 {
|
||||
width: 20px;
|
||||
}
|
||||
.w-8 {
|
||||
width: 32px;
|
||||
}
|
||||
@ -132,6 +139,9 @@
|
||||
.w-max-500 {
|
||||
max-width: 500px;
|
||||
}
|
||||
.w-max-1080 {
|
||||
max-width: 1080px;
|
||||
}
|
||||
.w-500 {
|
||||
width: 500px;
|
||||
}
|
||||
@ -224,6 +234,9 @@
|
||||
.flex-col {
|
||||
flex-direction: column;
|
||||
}
|
||||
.flex-initial {
|
||||
flex: 0 1 auto;
|
||||
}
|
||||
.flex-center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -248,6 +261,10 @@
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.border-1 {
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
.border-l-2 {
|
||||
border-left: 2px;
|
||||
}
|
||||
@ -258,7 +275,13 @@
|
||||
.border-gray {
|
||||
border-color: @gray;
|
||||
}
|
||||
.border-main {
|
||||
border-color: @border-color;
|
||||
}
|
||||
|
||||
.bg-body-main {
|
||||
background: @body-bg-color;
|
||||
}
|
||||
.bg-primary-lite {
|
||||
background: @primary-light;
|
||||
}
|
||||
@ -281,6 +304,9 @@
|
||||
.card-box-shadow {
|
||||
box-shadow: rgba(0, 0, 0, 0.06) 1px 1px 8px;
|
||||
}
|
||||
.shadow-base {
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
.opacity-60 {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
@ -0,0 +1,22 @@
|
||||
/*
|
||||
* Copyright 2022 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 url('../variables.less');
|
||||
|
||||
.form-container {
|
||||
background-color: @white;
|
||||
padding: 28px 20px;
|
||||
border-width: 1px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.04);
|
||||
width: 700px;
|
||||
}
|
||||
@ -42,6 +42,13 @@
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.inset-0 {
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
//top
|
||||
.top-1 {
|
||||
top: 4px;
|
||||
@ -67,7 +74,9 @@
|
||||
.align-middle {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.self-center {
|
||||
align-self: center;
|
||||
}
|
||||
.flex-none {
|
||||
flex: none;
|
||||
}
|
||||
|
||||
@ -140,6 +140,9 @@
|
||||
.m-t-lg {
|
||||
margin-top: @margin-lg;
|
||||
}
|
||||
.mt-44 {
|
||||
margin-top: 11rem /* 176px */;
|
||||
}
|
||||
.m-b-0 {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
@ -161,6 +164,12 @@
|
||||
.m-b-xlg {
|
||||
margin-bottom: @margin-xlg;
|
||||
}
|
||||
.mb-10 {
|
||||
margin-bottom: 2.5rem /* 40px */;
|
||||
}
|
||||
.mb-11 {
|
||||
margin-bottom: 2.75rem /* 44px */;
|
||||
}
|
||||
.m-auto {
|
||||
margin: auto;
|
||||
}
|
||||
@ -213,6 +222,9 @@
|
||||
.mb-4 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.mb-4 {
|
||||
margin-bottom: 1.25rem /* 20px */;
|
||||
}
|
||||
.mb-8 {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
@ -306,6 +318,10 @@
|
||||
padding-top: @padding-xs;
|
||||
padding-bottom: @padding-xs;
|
||||
}
|
||||
.p-y-xss {
|
||||
padding-top: @padding-xss;
|
||||
padding-bottom: @padding-xss;
|
||||
}
|
||||
.p-y-sm {
|
||||
padding-top: @padding-sm;
|
||||
padding-bottom: @padding-sm;
|
||||
@ -322,6 +338,10 @@
|
||||
padding-top: 2px;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
.py-24 {
|
||||
padding-top: 6rem /* 96px */;
|
||||
padding-bottom: 6rem /* 96px */;
|
||||
}
|
||||
|
||||
.p-x-0 {
|
||||
padding-right: 0 !important;
|
||||
@ -367,6 +387,9 @@
|
||||
.p-t-xs {
|
||||
padding-top: @padding-xs;
|
||||
}
|
||||
.p-t-xss {
|
||||
padding-top: @padding-xss;
|
||||
}
|
||||
.p-t-sm {
|
||||
padding-top: @padding-sm;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user