From 7ed607f291c2bb54a1c91d571b31cf7d483e8f6a Mon Sep 17 00:00:00 2001
From: Shailesh Parmar <shailesh.parmar.webdev@gmail.com>
Date: Wed, 30 Nov 2022 16:43:42 +0530
Subject: [PATCH] Removed tailwind class from pages component part 1 (#9054)

* Removed tailwind class from pages component part 1

* Addressing comments
---
 .../AddDataQualityTestPage.tsx                |  2 +-
 .../AddGlossary/AddGlossaryPage.component.tsx |  2 +-
 .../AddGlossaryTermPage.component.tsx         |  2 +-
 .../AddIngestionPage.component.tsx            |  6 +-
 .../AddWebhookPage.component.tsx              |  2 +-
 .../pages/BotDetailsPage/BotDetailsPage.tsx   |  6 +-
 .../CreateUserPage.component.tsx              |  2 +-
 .../CustomPropertiesPageV1.less               |  5 ++
 .../CustomPropertiesPageV1.tsx                |  8 +--
 .../DatabaseSchemaPage.component.tsx          | 10 +--
 .../EditConnectionFormPage.component.tsx      | 15 ++--
 .../EditIngestionPage.component.tsx           |  6 +-
 .../EditWebhookPage.component.tsx             |  2 +-
 .../ElasticSearchReIndexPage.component.tsx    | 70 +++++++++----------
 .../ui/src/pages/KPIPage/AddKPIPage.tsx       | 12 ++--
 .../ui/src/pages/KPIPage/EditKPIPage.tsx      | 10 +--
 .../ui/src/pages/database-details/index.tsx   |  8 +--
 .../forgot-password.component.tsx             | 12 ++--
 .../ui/src/pages/login/LoginCarousel.tsx      |  6 +-
 .../resources/ui/src/pages/login/index.tsx    | 38 +++++-----
 .../ui/src/pages/login/login.style.less       |  4 ++
 .../resources/ui/src/styles/antd-master.less  |  1 +
 .../src/main/resources/ui/src/styles/app.less | 26 +++++++
 .../ui/src/styles/components/form.less        | 22 ++++++
 .../resources/ui/src/styles/position.less     | 11 ++-
 .../main/resources/ui/src/styles/spacing.less | 23 ++++++
 26 files changed, 199 insertions(+), 112 deletions(-)
 create mode 100644 openmetadata-ui/src/main/resources/ui/src/styles/components/form.less

diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/AddDataQualityTestPage/AddDataQualityTestPage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/AddDataQualityTestPage/AddDataQualityTestPage.tsx
index b2c2beb0a42..461d928b7fd 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/AddDataQualityTestPage/AddDataQualityTestPage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/AddDataQualityTestPage/AddDataQualityTestPage.tsx
@@ -45,7 +45,7 @@ const AddDataQualityTestPage = () => {
 
   return (
     <PageContainerV1>
-      <div className="tw-self-center">
+      <div className="self-center">
         <AddDataQualityTestV1 table={table} />
       </div>
     </PageContainerV1>
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/AddGlossary/AddGlossaryPage.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/AddGlossary/AddGlossaryPage.component.tsx
index 5a115b3f380..22430e09e8a 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/AddGlossary/AddGlossaryPage.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/AddGlossary/AddGlossaryPage.component.tsx
@@ -106,7 +106,7 @@ const AddGlossaryPage: FunctionComponent = () => {
 
   return (
     <PageContainerV1>
-      <div className="tw-self-center">
+      <div className="self-center">
         <AddGlossary
           allowAccess={createPermission}
           fetchTags={fetchTags}
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/AddGlossaryTermPage/AddGlossaryTermPage.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/AddGlossaryTermPage/AddGlossaryTermPage.component.tsx
index 2f88049fefa..6bbd556f40d 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/AddGlossaryTermPage/AddGlossaryTermPage.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/AddGlossaryTermPage/AddGlossaryTermPage.component.tsx
@@ -207,7 +207,7 @@ const AddGlossaryTermPage = () => {
       {isLoading ? (
         <Loader />
       ) : (
-        <div className="tw-self-center">
+        <div className="self-center">
           <AddGlossaryTerm
             allowAccess={createPermission}
             glossaryData={glossaryData as Glossary}
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/AddIngestionPage/AddIngestionPage.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/AddIngestionPage/AddIngestionPage.component.tsx
index 43ede1f36fa..e519769e83a 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/AddIngestionPage/AddIngestionPage.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/AddIngestionPage/AddIngestionPage.component.tsx
@@ -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}
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/AddWebhookPage/AddWebhookPage.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/AddWebhookPage/AddWebhookPage.component.tsx
index 1c7e89c421b..7628ecaa67c 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/AddWebhookPage/AddWebhookPage.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/AddWebhookPage/AddWebhookPage.component.tsx
@@ -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]}`}
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/BotDetailsPage/BotDetailsPage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/BotDetailsPage/BotDetailsPage.tsx
index 0e274ac3e49..ab4b4d8ba84 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/BotDetailsPage/BotDetailsPage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/BotDetailsPage/BotDetailsPage.tsx
@@ -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 />
       ) : (
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/CreateUserPage/CreateUserPage.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/CreateUserPage/CreateUserPage.component.tsx
index 0791694de8b..d99d56d9dba 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/CreateUserPage/CreateUserPage.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/CreateUserPage/CreateUserPage.component.tsx
@@ -183,7 +183,7 @@ const CreateUserPage = () => {
 
   return (
     <PageContainerV1>
-      <div className="tw-self-center">
+      <div className="self-center">
         <CreateUserComponent
           forceBot={Boolean(bot)}
           roles={roles}
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/CustomPropertiesPageV1/CustomPropertiesPageV1.less b/openmetadata-ui/src/main/resources/ui/src/pages/CustomPropertiesPageV1/CustomPropertiesPageV1.less
index 9fa9ba103b7..fffe2ba70cc 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/CustomPropertiesPageV1/CustomPropertiesPageV1.less
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/CustomPropertiesPageV1/CustomPropertiesPageV1.less
@@ -16,3 +16,8 @@
     padding-top: 0px;
   }
 }
+
+.custom-properties-schemaEditor {
+  border: 1px solid #dce3ec;
+  border-radius: 6px;
+}
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/CustomPropertiesPageV1/CustomPropertiesPageV1.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/CustomPropertiesPageV1/CustomPropertiesPageV1.tsx
index 8f0ebdcf3de..6a09e6b61ed 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/CustomPropertiesPageV1/CustomPropertiesPageV1.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/CustomPropertiesPageV1/CustomPropertiesPageV1.tsx
@@ -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"
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/DatabaseSchemaPage/DatabaseSchemaPage.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/DatabaseSchemaPage/DatabaseSchemaPage.component.tsx
index 068caf706e8..c68b7eaddbc 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/DatabaseSchemaPage/DatabaseSchemaPage.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/DatabaseSchemaPage/DatabaseSchemaPage.component.tsx
@@ -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
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/EditConnectionFormPage/EditConnectionFormPage.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/EditConnectionFormPage/EditConnectionFormPage.component.tsx
index b4d53c97375..c7f3d26afcf 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/EditConnectionFormPage/EditConnectionFormPage.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/EditConnectionFormPage/EditConnectionFormPage.component.tsx
@@ -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>
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/EditIngestionPage/EditIngestionPage.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/EditIngestionPage/EditIngestionPage.component.tsx
index 396ad69c48c..154c9217e22 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/EditIngestionPage/EditIngestionPage.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/EditIngestionPage/EditIngestionPage.component.tsx
@@ -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}
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/EditWebhookPage/EditWebhookPage.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/EditWebhookPage/EditWebhookPage.component.tsx
index fff689f3fc2..f6dc11caf80 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/EditWebhookPage/EditWebhookPage.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/EditWebhookPage/EditWebhookPage.component.tsx
@@ -153,7 +153,7 @@ const EditWebhookPage: FunctionComponent = () => {
 
   return (
     <PageContainerV1>
-      <div className="tw-self-center">
+      <div className="self-center">
         {!isLoading ? (
           <AddWebhook
             allowAccess={createPermission || editPermission}
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/ElasticSearchIndexPage/ElasticSearchReIndexPage.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/ElasticSearchIndexPage/ElasticSearchReIndexPage.component.tsx
index b9f3f185afa..e04f9ff33d6 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/ElasticSearchIndexPage/ElasticSearchReIndexPage.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/ElasticSearchIndexPage/ElasticSearchReIndexPage.component.tsx
@@ -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)}
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/KPIPage/AddKPIPage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/KPIPage/AddKPIPage.tsx
index 784e76601d9..232e79e00d6 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/KPIPage/AddKPIPage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/KPIPage/AddKPIPage.tsx
@@ -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>
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/KPIPage/EditKPIPage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/KPIPage/EditKPIPage.tsx
index 9bd30463f66..f9e5a976f49 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/KPIPage/EditKPIPage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/KPIPage/EditKPIPage.tsx
@@ -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>
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/database-details/index.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/database-details/index.tsx
index 71f8272bc08..06d98c6a73b 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/database-details/index.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/database-details/index.tsx
@@ -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
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/forgot-password/forgot-password.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/forgot-password/forgot-password.component.tsx
index 412c40450c8..dbc3ec7add0 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/forgot-password/forgot-password.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/forgot-password/forgot-password.component.tsx
@@ -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}
                     />
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/login/LoginCarousel.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/login/LoginCarousel.tsx
index 4349bc96517..99daf932b95 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/login/LoginCarousel.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/login/LoginCarousel.tsx
@@ -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>
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/login/index.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/login/index.tsx
index c177e0142c5..84345ad8811 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/login/index.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/login/index.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 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>
   );
 };
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/login/login.style.less b/openmetadata-ui/src/main/resources/ui/src/pages/login/login.style.less
index 7b302ff68d8..a637ffb20b5 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/login/login.style.less
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/login/login.style.less
@@ -31,3 +31,7 @@
     border-color: #fbb4ae;
   }
 }
+.carousal-description {
+  margin-left: 13%;
+  margin-right: 13%;
+}
diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/antd-master.less b/openmetadata-ui/src/main/resources/ui/src/styles/antd-master.less
index 49f4d5a7298..b12363f014b 100644
--- a/openmetadata-ui/src/main/resources/ui/src/styles/antd-master.less
+++ b/openmetadata-ui/src/main/resources/ui/src/styles/antd-master.less
@@ -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');
diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/app.less b/openmetadata-ui/src/main/resources/ui/src/styles/app.less
index 21f8d80ad87..7f101769676 100644
--- a/openmetadata-ui/src/main/resources/ui/src/styles/app.less
+++ b/openmetadata-ui/src/main/resources/ui/src/styles/app.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;
 }
diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/components/form.less b/openmetadata-ui/src/main/resources/ui/src/styles/components/form.less
new file mode 100644
index 00000000000..a78d8021553
--- /dev/null
+++ b/openmetadata-ui/src/main/resources/ui/src/styles/components/form.less
@@ -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;
+}
diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/position.less b/openmetadata-ui/src/main/resources/ui/src/styles/position.less
index 19f49027127..ef1b6f0f452 100644
--- a/openmetadata-ui/src/main/resources/ui/src/styles/position.less
+++ b/openmetadata-ui/src/main/resources/ui/src/styles/position.less
@@ -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;
 }
diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/spacing.less b/openmetadata-ui/src/main/resources/ui/src/styles/spacing.less
index df5937f48f3..0e6ca27adb2 100644
--- a/openmetadata-ui/src/main/resources/ui/src/styles/spacing.less
+++ b/openmetadata-ui/src/main/resources/ui/src/styles/spacing.less
@@ -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;
 }