fix(ui): login page update (#12213)

* fix(ui): login page update
task related feedback

* update login styling

* fix config tab for topics

openmetadata-ui/src/main/resources/ui/src/components/Task/TaskTab/TaskTab.component.tsx

@@ -84,16 +84,6 @@ export const TaskTab = ({
   const [showEditTaskModel, setShowEditTaskModel] = useState(false);
   const [comment, setComment] = useState('');
 
-  useEffect(() => {
-    if (
-      (taskDetails?.type === 'RequestDescription' ||
-        taskDetails?.type === 'RequestTag') &&
-      isEmpty(taskDetails.suggestion)
-    ) {
-      setTaskAction(TASK_ACTION_LIST[1]);
-    }
-  }, [taskDetails]);
-
   // get current user details
   const currentUser = useMemo(
     () => AppState.getCurrentUserDetails(),
@@ -281,6 +271,63 @@ export const TaskTab = ({
     }
   };
 
+  const actionButtons = useMemo(() => {
+    if (isTaskClosed) {
+      return null;
+    }
+
+    return (
+      <Space
+        className="m-t-sm items-end w-full"
+        data-testid="task-cta-buttons"
+        size="small">
+        {isCreator && (
+          <Button onClick={onTaskReject}>{t('label.close')}</Button>
+        )}
+        {hasTaskUpdateAccess() ? (
+          <>
+            {['RequestDescription', 'RequestTag'].includes(
+              taskDetails?.type ?? ''
+            ) && isEmpty(taskDetails?.suggestion) ? (
+              <Button
+                type="primary"
+                onClick={() =>
+                  handleMenuItemClick({ key: TaskActionMode.EDIT } as MenuInfo)
+                }>
+                {t('label.add-suggestion')}
+              </Button>
+            ) : (
+              <Dropdown.Button
+                menu={{
+                  items: TASK_ACTION_LIST,
+                  selectable: true,
+                  selectedKeys: [taskAction.key],
+                  onClick: handleMenuItemClick,
+                }}
+                type="primary"
+                onClick={() =>
+                  taskAction.key === TaskActionMode.EDIT
+                    ? handleMenuItemClick({ key: taskAction.key } as MenuInfo)
+                    : onTaskResolve()
+                }>
+                {taskAction.label}
+              </Dropdown.Button>
+            )}
+          </>
+        ) : (
+          <></>
+        )}
+      </Space>
+    );
+  }, [
+    taskDetails,
+    onTaskResolve,
+    handleMenuItemClick,
+    taskAction,
+    isTaskClosed,
+    isCreator,
+  ]);
+
   return (
     <Row className="p-y-sm p-x-md" gutter={[0, 24]}>
       <Col className="d-flex items-center" span={24}>
@@ -358,34 +405,7 @@ export const TaskTab = ({
           <ActivityFeedEditor onSave={onSave} onTextChange={setComment} />
         )}
 
-        <Space
-          className="m-t-sm items-end w-full"
-          data-testid="task-cta-buttons"
-          size="small">
-          {(hasTaskUpdateAccess() || isCreator) && !isTaskClosed && (
-            <Button onClick={onTaskReject}>{t('label.close')}</Button>
-          )}
-
-          {!isTaskClosed && hasTaskUpdateAccess() && (
-            <>
-              <Dropdown.Button
-                menu={{
-                  items: TASK_ACTION_LIST,
-                  selectable: true,
-                  selectedKeys: [taskAction.key],
-                  onClick: handleMenuItemClick,
-                }}
-                type="primary"
-                onClick={() =>
-                  taskAction.key === TaskActionMode.EDIT
-                    ? handleMenuItemClick({ key: taskAction.key } as MenuInfo)
-                    : onTaskResolve()
-                }>
-                {taskAction.label}
-              </Dropdown.Button>
-            </>
-          )}
-        </Space>
+        {actionButtons}
       </Col>
       <Modal
         maskClosable
@@ -397,7 +417,7 @@ export const TaskTab = ({
         })} #${taskDetails?.id} ${task.message}`}
         width={768}
         onCancel={() => setShowEditTaskModel(false)}
-        onOk={() => form.submit()}>
+        onOk={form.submit}>
         <Form form={form} layout="vertical" onFinish={onEditAndSuggest}>
           {isTaskTags ? (
             <Form.Item

openmetadata-ui/src/main/resources/ui/src/components/TopicDetails/TopicDetails.component.tsx

@@ -19,6 +19,7 @@ import ActivityFeedProvider, {
 import { ActivityFeedTab } from 'components/ActivityFeed/ActivityFeedTab/ActivityFeedTab.component';
 import DescriptionV1 from 'components/common/description/DescriptionV1';
 import ErrorPlaceHolder from 'components/common/error-with-placeholder/ErrorPlaceHolder';
+import QueryViewer from 'components/common/QueryViewer/QueryViewer.component';
 import PageLayoutV1 from 'components/containers/PageLayoutV1';
 import { DataAssetsHeader } from 'components/DataAssets/DataAssetsHeader/DataAssetsHeader.component';
 import { EntityName } from 'components/Modals/EntityNameModal/EntityNameModal.interface';
@@ -52,7 +53,6 @@ import { CustomPropertyTable } from '../common/CustomPropertyTable/CustomPropert
 import { CustomPropertyProps } from '../common/CustomPropertyTable/CustomPropertyTable.interface';
 import EntityLineageComponent from '../EntityLineage/EntityLineage.component';
 import SampleDataTopic from '../SampleDataTopic/SampleDataTopic';
-import SchemaEditor from '../schema-editor/SchemaEditor';
 import { TopicDetailsProps } from './TopicDetails.interface';
 import TopicSchemaFields from './TopicSchema/TopicSchema';
 
@@ -383,13 +383,10 @@ const TopicDetails: React.FC<TopicDetailsProps> = ({
         label: <TabsLabel id={EntityTabs.CONFIG} name={t('label.config')} />,
         key: EntityTabs.CONFIG,
         children: (
-          <Card className="m-md w-auto" data-testid="config-details">
-            <SchemaEditor
-              className="custom-code-mirror-theme"
-              editorClass="table-query-editor"
-              value={JSON.stringify(topicDetails.topicConfig)}
-            />
-          </Card>
+          <QueryViewer
+            sqlQuery={JSON.stringify(topicDetails.topicConfig)}
+            title={t('label.config')}
+          />
         ),
       },
       {

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

@@ -12,31 +12,36 @@
  */
 
 import { CarouselProps } from 'antd';
-import lineage from '../assets/img/lineage.png';
-import screenShot2 from '../assets/img/screenShot1.png';
-import screenShot1 from '../assets/img/screenShot2.png';
-import screenShot3 from '../assets/img/screenShot3.png';
-import screenShot4 from '../assets/img/screenShot4.png';
+import collaborationImg from '../assets/img/screenShot1.png';
+import discoveryImg from '../assets/img/screenShot2.png';
+import dataQualityImg from '../assets/img/screenShot3.png';
+import governanceImg from '../assets/img/screenShot4.png';
+import insightImg from '../assets/img/screenShot5.png';
 
 export const LOGIN_SLIDE = [
   {
-    image: screenShot1,
+    title: 'discovery',
+    image: discoveryImg,
     descriptionKey: 'enables-end-to-end-metadata-management',
   },
   {
-    image: screenShot2,
+    title: 'data-quality',
+    image: dataQualityImg,
     descriptionKey: 'discover-your-data-and-unlock-the-value-of-data-assets',
   },
   {
-    image: screenShot3,
+    title: 'governance',
+    image: governanceImg,
     descriptionKey: 'assess-data-reliability-with-data-profiler-lineage',
   },
   {
-    image: screenShot4,
+    title: 'data-insight',
+    image: insightImg,
     descriptionKey: 'fosters-collaboration-among-producers-and-consumers',
   },
   {
-    image: lineage,
+    title: 'collaboration',
+    image: collaborationImg,
     descriptionKey: 'deeply-understand-table-relations-message',
   },
 ];

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

@@ -23,6 +23,7 @@
     "add-entity": "Add {{entity}}",
     "add-entity-test": "Add {{entity}} test",
     "add-new-entity": "Add New {{entity}}",
+    "add-suggestion": "Add suggestion",
     "add-workflow-ingestion": "Add {{workflow}} Ingestion",
     "added": "Added",
     "added-lowercase": "added",
@@ -129,6 +130,7 @@
     "closed-task-plural": "Closed Tasks",
     "closed-this-task-lowercase": "closed this task",
     "cloud-config-source": "Cloud Config Source",
+    "collaboration": "Collaboration",
     "collapse-all": "Collapse All",
     "column": "Column",
     "column-entity": "Column {{entity}}",
@@ -276,6 +278,7 @@
     "disable-tag": "Disable Tag",
     "disabled": "Disabled",
     "discover": "Discover",
+    "discovery": "Discovery",
     "display-name": "Display Name",
     "display-name-lowercase": "display name",
     "distinct": "Distinct",
@@ -1056,7 +1059,7 @@
     "are-you-sure-want-to-text": "Are you sure you want to {{text}}?",
     "are-you-sure-you-want-to-remove-child-from-parent": "Are you sure you want to remove the {{child}} from {{parent}}?",
     "are-you-want-to-restore": "Are you sure you want to restore {{entity}}?",
-    "assess-data-reliability-with-data-profiler-lineage": "Assess data reliability with data profiler, lineage, sample data, and more.",
+    "assess-data-reliability-with-data-profiler-lineage": "Gain a competitive edge in the data-driven world with the right approach to data governance. Secure your data and empower your business to fuel innovation and growth.",
     "assigned-you-a-new-task-lowercase": "a new task has been assigned to you",
     "assigning-team-entity-description": "Add a {{entity}} to {{name}}. This {{entity}} will be inherited by all the Users in the Team {{name}} as well as all the Teams under {{name}}",
     "at-least-one-policy": "Enter at least one policy",
@@ -1107,7 +1110,7 @@
     "dbt-optional-config": "Optional configuration to update the description from dbt or not",
     "dbt-result-file-path": "dbt run results file path to extract the test results information.",
     "dbt-run-result-http-path-message": "dbt runs the results on an http path to extract the test results.",
-    "deeply-understand-table-relations-message": "Deeply understand table relations; thanks to column-level lineage.",
+    "deeply-understand-table-relations-message": "Get the Producers and Consumers of data in a single platform and accelerate productivity. Collaboration just gets better with people and data from multiple tools in a centralized location.",
     "define-custom-property-for-entity": "Define custom properties for {{entity}} to serve your organizational needs.",
     "delete-action-description": "Deleting this {{entityType}} will permanently remove its metadata from OpenMetadata.",
     "delete-entity-permanently": "Once you delete this {{entityType}}, it will be removed permanently.",
@@ -1117,7 +1120,7 @@
     "delete-webhook-permanently": "You want to delete webhook {{webhookName}} permanently? This action cannot be reverted.",
     "disable-classification-description": "By disabling classification, you will not be able to search by, or assign associated tags to any entity.",
     "disabled-classification-actions-message": "You can not perform this action on disabled classifications.",
-    "discover-your-data-and-unlock-the-value-of-data-assets": "Discover your data and unlock the value of data assets.",
+    "discover-your-data-and-unlock-the-value-of-data-assets": "Things got easier with no-code data quality. Simple steps to test, deploy, and gather results, with instant test failure notifications. Stay up-to-date with reliable data that you can trust.",
     "downstream-depth-message": "Please select a value for downstream depth",
     "downstream-depth-tooltip": "Display up to 3 nodes of downstream lineage to identify the target (child levels).",
     "drag-and-drop-files-here": "Drag & drop files here",
@@ -1134,7 +1137,7 @@
     "enable-classification-description": "By enabling classification, you will be able to search by, or assign associated tags to any entity.",
     "enable-column-profile": "Enable column profile",
     "enable-debug-logging": "Enable debug logging",
-    "enables-end-to-end-metadata-management": "Enables end-to-end metadata management with data discovery, data quality, observability, and people collaboration",
+    "enables-end-to-end-metadata-management": "Discover all your data assets in a single place. Gain crucial insights with the right data at your fingertips. Now, unlock your data potential and make informed business decisions!",
     "endpoint-should-be-valid": "Endpoint should be valid URL.",
     "ensure-airflow-set-up-correctly-before-heading-to-ingest-metadata": "Ensure that you have Airflow set up correctly before heading to ingest metadata.",
     "ensure-elasticsearch-is-up-and-running": "Ensure that the Elasticsearch docker is up and running.",
@@ -1183,7 +1186,7 @@
     "filter-pattern-info": "Choose to include or exclude {{filterPattern}} as part of the metadata ingestion.",
     "filter-pattern-placeholder": "To add a filter pattern, simply type it in and press Enter",
     "find-in-table": "Find in table",
-    "fosters-collaboration-among-producers-and-consumers": "Fosters collaboration among the producers and consumers of data.",
+    "fosters-collaboration-among-producers-and-consumers": "Set organizational goals and KPIs to proactively drive the data culture of your company. Foster a culture of continuous improvement with timely reports to monitor data health.",
     "get-started-with-open-metadata": "Get started with OpenMetadata",
     "glossary-term-description": "Every term in the glossary has a unique definition. Along with defining the standard term for a concept, the synonyms as well as related terms (for e.g., parent and child terms) can be specified. References can be added to the assets related to the terms. New terms can be added or updated to the Glossary. The glossary terms can be reviewed by certain users, who can accept or reject the terms.",
     "go-back-to-login-page": "Go back to Login page",

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

@@ -23,6 +23,7 @@
     "add-entity": "Añadir {{entity}}",
     "add-entity-test": "Añadir test de {{entity}}",
     "add-new-entity": "Añadir nueva {{entity}}",
+    "add-suggestion": "Add suggestion",
     "add-workflow-ingestion": "Añadir proceso de {{workflow}}",
     "added": "Añadido",
     "added-lowercase": "añadido",
@@ -129,6 +130,7 @@
     "closed-task-plural": "Tareas cerradas",
     "closed-this-task-lowercase": "cerró esta tarea",
     "cloud-config-source": "Fuente de configuración en el cloud",
+    "collaboration": "Collaboration",
     "collapse-all": "Contraer todo",
     "column": "Columna",
     "column-entity": "Columna {{entity}}",
@@ -276,6 +278,7 @@
     "disable-tag": "Disable Tag",
     "disabled": "Disabled",
     "discover": "Descubrir",
+    "discovery": "Discovery",
     "display-name": "Nombre de visualización",
     "display-name-lowercase": "display name",
     "distinct": "Distinto",

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

@@ -23,6 +23,7 @@
     "add-entity": "Ajouter {{entity}}",
     "add-entity-test": "Ajouter un test de {{entity}}",
     "add-new-entity": "Ajouter un·e {{entity}}",
+    "add-suggestion": "Add suggestion",
     "add-workflow-ingestion": "Ajouter {{workflow}} Ingestion",
     "added": "Ajouté",
     "added-lowercase": "ajouté",
@@ -129,6 +130,7 @@
     "closed-task-plural": "Tâches Clôturées",
     "closed-this-task-lowercase": "fermer cette tâche",
     "cloud-config-source": "Source de Config Cloud",
+    "collaboration": "Collaboration",
     "collapse-all": "Tout Réduire",
     "column": "Colonne",
     "column-entity": "{{entity}} Colonnes",
@@ -276,6 +278,7 @@
     "disable-tag": "Disable Tag",
     "disabled": "Disabled",
     "discover": "Découvrir",
+    "discovery": "Discovery",
     "display-name": "Nom d'Affichage",
     "display-name-lowercase": "nom d'affichage",
     "distinct": "Distinct",

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

@@ -23,6 +23,7 @@
     "add-entity": "{{entity}}を追加",
     "add-entity-test": "{{entity}}のテストを追加",
     "add-new-entity": "新しい{{entity}}を追加",
+    "add-suggestion": "Add suggestion",
     "add-workflow-ingestion": "{{workflow}}インジェスチョンを追加",
     "added": "追加済",
     "added-lowercase": "追加済",
@@ -129,6 +130,7 @@
     "closed-task-plural": "終了したタスク",
     "closed-this-task-lowercase": "このタスクを終了する",
     "cloud-config-source": "Cloud Config Source",
+    "collaboration": "Collaboration",
     "collapse-all": "全て折り畳む",
     "column": "カラム",
     "column-entity": "カラム {{entity}}",
@@ -276,6 +278,7 @@
     "disable-tag": "Disable Tag",
     "disabled": "Disabled",
     "discover": "発見",
+    "discovery": "Discovery",
     "display-name": "表示名",
     "display-name-lowercase": "display name",
     "distinct": "Distinct",

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

@@ -23,6 +23,7 @@
     "add-entity": "Adicionar {{entity}}",
     "add-entity-test": "Adicionar teste de {{entity}}",
     "add-new-entity": "Adicionar novo {{entity}}",
+    "add-suggestion": "Add suggestion",
     "add-workflow-ingestion": "Adicionar ingestão de fluxo de trabalho",
     "added": "Adicionado",
     "added-lowercase": "adicionado",
@@ -129,6 +130,7 @@
     "closed-task-plural": "Tarefas fechadas",
     "closed-this-task-lowercase": "esta tarefa foi fechada",
     "cloud-config-source": "Origem de configurações de Cloud",
+    "collaboration": "Collaboration",
     "collapse-all": "Recolher todas",
     "column": "Coluna",
     "column-entity": "Coluna {{entity}}",
@@ -276,6 +278,7 @@
     "disable-tag": "Disable Tag",
     "disabled": "Disabled",
     "discover": "Descobrir",
+    "discovery": "Discovery",
     "display-name": "Nome de exibição",
     "display-name-lowercase": "display name",
     "distinct": "Distinto",

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

@@ -23,6 +23,7 @@
     "add-entity": "添加{{entity}}",
     "add-entity-test": "添加{{entity}}测试",
     "add-new-entity": "添加新{{entity}}",
+    "add-suggestion": "Add suggestion",
     "add-workflow-ingestion": "添加{{workflow}}提取",
     "added": "已添加",
     "added-lowercase": "已添加",
@@ -129,6 +130,7 @@
     "closed-task-plural": "已关闭任务",
     "closed-this-task-lowercase": "关闭此任务",
     "cloud-config-source": "云配置源",
+    "collaboration": "Collaboration",
     "collapse-all": "全部折叠",
     "column": "列",
     "column-entity": "列{{entity}}",
@@ -276,6 +278,7 @@
     "disable-tag": "Disable Tag",
     "disabled": "Disabled",
     "discover": "发现",
+    "discovery": "Discovery",
     "display-name": "显示名称",
     "display-name-lowercase": "显示名称",
     "distinct": "去重",

openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/RequestTagPage/RequestTagPage.tsx

@@ -224,17 +224,7 @@ const RequestTag = () => {
                   label={`${t('label.suggest-entity', {
                     entity: t('label.tag-plural'),
                   })}:`}
-                  name="suggestTags"
-                  rules={[
-                    {
-                      required: true,
-                      message: t('message.field-text-is-required', {
-                        fieldText: t('label.suggest-entity', {
-                          entity: t('label.tag-plural'),
-                        }),
-                      }),
-                    },
-                  ]}>
+                  name="suggestTags">
                   <TagSuggestion />
                 </Form.Item>
 

openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/UpdateTagPage/UpdateTagPage.tsx

@@ -219,7 +219,6 @@ const UpdateTag = () => {
                   />
                 </Form.Item>
                 <Form.Item
-                  className="m-y-0"
                   data-testid="assignees"
                   label={`${t('label.assignee-plural')}:`}
                   name="assignees"

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

@@ -11,7 +11,7 @@
  *  limitations under the License.
  */
 
-import { Carousel } from 'antd';
+import { Carousel, Typography } from 'antd';
 import { t } from 'i18next';
 import { uniqueId } from 'lodash';
 import React from 'react';
@@ -20,12 +20,20 @@ import { LOGIN_SLIDE } from '../../constants/Login.constants';
 const LoginCarousel = () => {
   return (
     <div className="carousal-container" data-testid="carousel-container">
-      <Carousel autoplay dots autoplaySpeed={1500}>
+      <Carousel autoplay dots autoplaySpeed={1500} easing="ease-in-out">
         {LOGIN_SLIDE.map((data) => (
           <div
             className="text-center"
             data-testid="slider-container"
             key={uniqueId()}>
+            <Typography.Title className="text-primary" level={1}>
+              {t(`label.${data.title}`)}
+            </Typography.Title>
+            <p
+              className="m-b-lg carousal-description text-grey-muted"
+              data-testid="carousel-slide-description">
+              {t(`message.${data.descriptionKey}`)}
+            </p>
             <img
               alt="slider"
               loading="lazy"
@@ -33,12 +41,6 @@ const LoginCarousel = () => {
               style={{ display: 'initial' }}
               width="750px"
             />
-
-            <p
-              className="text-center m-t-md carousal-description font-medium text-white text-xl"
-              data-testid="carousel-slide-description">
-              {t(`message.${data.descriptionKey}`)}
-            </p>
           </div>
         ))}
       </Carousel>

openmetadata-ui/src/main/resources/ui/src/pages/login/index.tsx

@@ -194,9 +194,9 @@ const SigninPage = () => {
   const onClickForgotPassword = () => history.push(ROUTES.FORGOT_PASSWORD);
 
   return (
-    <div className="d-flex flex-col h-full">
-      <Row className="flex bg-body-main flex-grow" data-testid="signin-page">
-        <Col span={10}>
+    <div className="d-flex flex-col h-full bg-white">
+      <Row className="flex flex-grow" data-testid="signin-page">
+        <Col span={8}>
           <div
             className={classNames('mt-24 text-center flex-center flex-col', {
               'sso-container': !isAuthProviderBasic,
@@ -308,7 +308,7 @@ const SigninPage = () => {
             )}
           </div>
         </Col>
-        <Col className="relative" span={14}>
+        <Col className="relative" span={16}>
           <div className="absolute inset-0">
             <img
               alt="bg-image"

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

@@ -11,6 +11,8 @@
  *  limitations under the License.
  */
 
+@import (reference) url('./../../styles/variables.less');
+
 .ant-form-item-explain-error {
   text-align: left;
 }
@@ -32,8 +34,10 @@
   }
 }
 .carousal-description {
-  margin-left: 13%;
-  margin-right: 13%;
+  width: 750px;
+  text-align: center;
+  margin: 16px auto;
+  padding: 0 48px;
 }
 
 .carousal-container {
@@ -43,4 +47,21 @@
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
+
+  .slick-dots.slick-dots-bottom {
+    .slick-active {
+      button {
+        background-color: @primary-color;
+        width: inherit;
+        border-radius: 5px;
+      }
+    }
+    button {
+      background-color: @primary-color;
+      opacity: 0.7;
+      height: 10px;
+      width: 10px;
+      border-radius: 50%;
+    }
+  }
 }

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

@@ -11,7 +11,7 @@
  *  limitations under the License.
  */
 
-import { Button, Col, Divider, Form, Input, Row, Typography } from 'antd';
+import { Button, Divider, Form, Input, Typography } from 'antd';
 import { useAuthContext } from 'components/authentication/auth-provider/AuthProvider';
 import { useBasicAuth } from 'components/authentication/auth-provider/basic-auth.provider';
 import BrandImage from 'components/common/BrandImage/BrandImage';
@@ -66,8 +66,8 @@ const BasicSignUp = () => {
   const handleLogin = () => history.push(ROUTES.SIGNIN);
 
   return (
-    <div className="d-flex flex-col h-full">
-      <div className="d-flex bg-body-main flex-grow" data-testid="signin-page">
+    <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">
           <div className="mt-4 text-center flex-center flex-col">
             <BrandImage height="auto" width={152} />
@@ -76,130 +76,120 @@ const BasicSignUp = () => {
             </Typography.Text>
 
             {isAuthProviderBasic ? (
-              <div style={{ width: '334px' }}>
-                <Row>
-                  <Col span={24}>
-                    <>
-                      <Form
-                        autoComplete="off"
-                        className="mt-20"
-                        form={form}
-                        layout="vertical"
-                        validateMessages={VALIDATION_MESSAGES}
-                        onFinish={handleSubmit}>
-                        <Form.Item
-                          label={t('label.entity-name', {
-                            entity: t('label.first'),
-                          })}
-                          name="firstName"
-                          rules={[{ whitespace: true, required: true }]}>
-                          <Input
-                            placeholder={t('label.enter-entity-name', {
-                              entity: t('label.first-lowercase'),
-                            })}
-                          />
-                        </Form.Item>
-                        <Form.Item
-                          label={t('label.entity-name', {
-                            entity: t('label.last'),
-                          })}
-                          name="lastName"
-                          rules={[{ whitespace: true, required: true }]}>
-                          <Input
-                            placeholder={t('label.enter-entity', {
-                              entity: t('label.last-name-lowercase'),
-                            })}
-                          />
-                        </Form.Item>
-                        <Form.Item
-                          label={t('label.email')}
-                          name="email"
-                          rules={[{ type: 'email', required: true }]}>
-                          <Input
-                            placeholder={t('label.enter-entity', {
-                              entity: t('label.email-lowercase'),
-                            })}
-                          />
-                        </Form.Item>
-                        <Form.Item
-                          label={t('label.password')}
-                          name="password"
-                          rules={[
-                            {
-                              required: true,
-                            },
-                            {
-                              pattern: passwordRegex,
-                              message: t('message.password-error-message'),
-                            },
-                          ]}>
-                          <Input.Password
-                            autoComplete="off"
-                            placeholder={t('label.enter-entity', {
-                              entity: t('label.password-lowercase'),
-                            })}
-                          />
-                        </Form.Item>
-                        <Form.Item
-                          label={t('label.password-type', {
-                            type: t('label.confirm'),
-                          })}
-                          name="confirmPassword"
-                          rules={[
-                            {
-                              validator: (_, value) => {
-                                if (isEmpty(password)) {
-                                  return Promise.reject(
-                                    t('label.please-password-type-first')
-                                  );
-                                }
-                                if (value !== password) {
-                                  return Promise.reject(
-                                    t('label.password-not-match')
-                                  );
-                                }
+              <div className="m-t-lg" style={{ width: '334px' }}>
+                <Form
+                  autoComplete="off"
+                  form={form}
+                  layout="vertical"
+                  validateMessages={VALIDATION_MESSAGES}
+                  onFinish={handleSubmit}>
+                  <Form.Item
+                    label={t('label.entity-name', {
+                      entity: t('label.first'),
+                    })}
+                    name="firstName"
+                    rules={[{ whitespace: true, required: true }]}>
+                    <Input
+                      placeholder={t('label.enter-entity-name', {
+                        entity: t('label.first-lowercase'),
+                      })}
+                    />
+                  </Form.Item>
+                  <Form.Item
+                    label={t('label.entity-name', {
+                      entity: t('label.last'),
+                    })}
+                    name="lastName"
+                    rules={[{ whitespace: true, required: true }]}>
+                    <Input
+                      placeholder={t('label.enter-entity', {
+                        entity: t('label.last-name-lowercase'),
+                      })}
+                    />
+                  </Form.Item>
+                  <Form.Item
+                    label={t('label.email')}
+                    name="email"
+                    rules={[{ type: 'email', required: true }]}>
+                    <Input
+                      placeholder={t('label.enter-entity', {
+                        entity: t('label.email-lowercase'),
+                      })}
+                    />
+                  </Form.Item>
+                  <Form.Item
+                    label={t('label.password')}
+                    name="password"
+                    rules={[
+                      {
+                        required: true,
+                      },
+                      {
+                        pattern: passwordRegex,
+                        message: t('message.password-error-message'),
+                      },
+                    ]}>
+                    <Input.Password
+                      autoComplete="off"
+                      placeholder={t('label.enter-entity', {
+                        entity: t('label.password-lowercase'),
+                      })}
+                    />
+                  </Form.Item>
+                  <Form.Item
+                    label={t('label.password-type', {
+                      type: t('label.confirm'),
+                    })}
+                    name="confirmPassword"
+                    rules={[
+                      {
+                        validator: (_, value) => {
+                          if (isEmpty(password)) {
+                            return Promise.reject(
+                              t('label.please-password-type-first')
+                            );
+                          }
+                          if (value !== password) {
+                            return Promise.reject(
+                              t('label.password-not-match')
+                            );
+                          }
 
-                                return Promise.resolve();
-                              },
-                            },
-                          ]}>
-                          <Input.Password
-                            autoComplete="off"
-                            placeholder={t('label.confirm-password')}
-                          />
-                        </Form.Item>
+                          return Promise.resolve();
+                        },
+                      },
+                    ]}>
+                    <Input.Password
+                      autoComplete="off"
+                      placeholder={t('label.confirm-password')}
+                    />
+                  </Form.Item>
 
-                        <Button
-                          className="w-full"
-                          htmlType="submit"
-                          type="primary">
-                          {t('label.create-entity', {
-                            entity: t('label.account'),
-                          })}
-                        </Button>
+                  <Button className="w-full" htmlType="submit" type="primary">
+                    {t('label.create-entity', {
+                      entity: t('label.account'),
+                    })}
+                  </Button>
 
-                        <Divider className="w-min-0  mt-8 mb-12 justify-center">
-                          <Typography.Text type="secondary">
-                            {t('label.or-lowercase')}
-                          </Typography.Text>
-                        </Divider>
+                  <Divider className="w-min-0  mt-8 mb-12 justify-center">
+                    <Typography.Text type="secondary">
+                      {t('label.or-lowercase')}
+                    </Typography.Text>
+                  </Divider>
 
-                        <div className="mt-4 d-flex flex-center">
-                          <Typography.Text className="mr-4">
-                            {t('message.already-a-user')}
-                          </Typography.Text>
-                          <Button
-                            ghost
-                            data-testid="login"
-                            type="link"
-                            onClick={handleLogin}>
-                            {t('label.login')}
-                          </Button>
-                        </div>
-                      </Form>
-                    </>
-                  </Col>
-                </Row>
+                  <div className="mt-4 d-flex flex-center">
+                    <Typography.Text className="mr-4">
+                      {t('message.already-a-user')}
+                    </Typography.Text>
+                    <Button
+                      ghost
+                      data-testid="login"
+                      type="link"
+                      onClick={handleLogin}>
+                      {t('label.login')}
+                    </Button>
+                  </div>
+                </Form>
               </div>
             ) : null}
           </div>

openmetadata-ui/src/main/resources/ui/src/styles/fonts.less

@@ -76,7 +76,7 @@ pre {
 }
 
 .text-primary {
-  color: @primary-color;
+  color: @primary-color !important;
   &:hover {
     color: @primary-color;
   }