From 4b43a56c43a5f11501f403bd362916f8f7c4ed73 Mon Sep 17 00:00:00 2001
From: Ashish Gupta <ashish@getcollate.io>
Date: Wed, 28 Dec 2022 19:13:05 +0530
Subject: [PATCH] UI : Remove tailwind css dependency from Roles and Basic
 signup form (#9517)

* Remove tailwind css dependicy from Roles and Basic signup form

* change flex class to d-flex
---
 .../BotDetails/BotDetails.component.tsx       |  4 +-
 .../DisplayNameComponent.component.tsx        |  2 +-
 .../Ingestion/Ingestion.component.tsx         |  2 +-
 .../MlModelDetail/MlModelDetail.component.tsx |  4 +-
 .../DeployIngestionLoaderModal.tsx            |  2 +-
 .../components/Modals/WhatsNewModal/index.tsx |  2 +-
 .../ui/src/components/Reactions/Emoji.tsx     |  2 +-
 .../TableProfiler/TableProfilerV1.tsx         |  2 +-
 .../src/components/Users/Users.component.tsx  |  2 +-
 .../VersionTable/VersionTable.component.tsx   |  2 +-
 .../common/FilterPattern/FilterPattern.tsx    |  6 +--
 .../InheritedRolesCard.component.tsx          |  4 +-
 .../common/PopOverCard/EntityPopOverCard.tsx  |  2 +-
 .../RolesElement/RolesElement.component.tsx   |  4 +-
 .../common/facetfilter/FacetFilter.tsx        |  2 +-
 .../src/components/dropdown/DropDownList.tsx  |  6 +--
 .../RolesPage/AddRolePage/AddRolePage.tsx     | 12 ++---
 .../RolesDetailPage/RolesDetail.less          |  7 +++
 .../RolesDetailPage/RolesDetailPage.tsx       |  2 +-
 .../RolesDetailPageList.component.tsx         |  5 +-
 .../RolesPage/RolesListPage/RolesList.tsx     |  8 +--
 .../resources/ui/src/pages/login/index.tsx    |  6 +--
 .../resources/ui/src/pages/service/index.tsx  |  8 ++-
 .../pages/signup/basic-signup.component.tsx   | 24 ++++-----
 .../resources/ui/src/pages/tags/index.tsx     |  2 +-
 .../src/main/resources/ui/src/styles/app.less | 44 ++--------------
 .../ui/src/styles/components/size.less        | 12 +++++
 .../resources/ui/src/styles/position.less     | 51 ++++++++++++++++---
 .../main/resources/ui/src/styles/spacing.less | 33 ++++++++++--
 29 files changed, 148 insertions(+), 114 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/BotDetails/BotDetails.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/BotDetails/BotDetails.component.tsx
index ef1f7bf901b..fdb177ef6e7 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/BotDetails/BotDetails.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/BotDetails/BotDetails.component.tsx
@@ -202,7 +202,7 @@ const BotDetails: FC<BotsDetailProps> = ({
         <Col span={24}>
           <Card className="page-layout-v1-left-panel mt-2">
             <div data-testid="left-panel">
-              <div className="flex flex-col">
+              <div className="d-flex flex-col">
                 <SVGIcons
                   alt="bot-profile"
                   icon={Icons.BOT_PROFILE}
@@ -286,7 +286,7 @@ const BotDetails: FC<BotsDetailProps> = ({
       rightPanel={
         <Card className="page-layout-v1-left-panel mt-2">
           <div data-testid="right-panel">
-            <div className="flex flex-col">
+            <div className="d-flex flex-col">
               <Typography.Text className="mb-2 text-lg">
                 {t('label.token-security')}
               </Typography.Text>
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/BotDetails/DisplayNameComponent/DisplayNameComponent.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/BotDetails/DisplayNameComponent/DisplayNameComponent.component.tsx
index c4ef12a2d2e..da10fbdfc53 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/BotDetails/DisplayNameComponent/DisplayNameComponent.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/BotDetails/DisplayNameComponent/DisplayNameComponent.component.tsx
@@ -31,7 +31,7 @@ const DisplayNameComponent = ({
   const { t } = useTranslation();
 
   return (
-    <div className="mt-4 w-full flex">
+    <div className="mt-4 w-full d-flex">
       {isDisplayNameEdit ? (
         <div className="flex items-center gap-2">
           <Input
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Ingestion/Ingestion.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Ingestion/Ingestion.component.tsx
index b38c7a5d012..6abfaf839a6 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Ingestion/Ingestion.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Ingestion/Ingestion.component.tsx
@@ -307,7 +307,7 @@ const Ingestion: React.FC<IngestionProps> = ({
     return (
       <Fragment>
         <Button
-          className={classNames('h-8 rounded-4 m-b-xs flex items-center')}
+          className={classNames('h-8 rounded-4 m-b-xs d-flex items-center')}
           data-testid="add-new-ingestion-button"
           disabled={!permissions.Create}
           size="small"
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/MlModelDetail/MlModelDetail.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/MlModelDetail/MlModelDetail.component.tsx
index efe2e77ae0f..df93a1b9806 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/MlModelDetail/MlModelDetail.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/MlModelDetail/MlModelDetail.component.tsx
@@ -433,7 +433,7 @@ const MlModelDetail: FC<MlModelDetailProp> = ({
 
   const getMlHyperParameters = () => {
     return (
-      <div className="flex flex-col m-t-xs">
+      <div className="d-flex flex-col m-t-xs">
         <h6 className="font-medium text-base">
           {t('label.hyper-parameters')}{' '}
         </h6>
@@ -458,7 +458,7 @@ const MlModelDetail: FC<MlModelDetailProp> = ({
 
   const getMlModelStore = () => {
     return (
-      <div className="flex flex-col m-t-xs">
+      <div className="d-flex flex-col m-t-xs">
         <h6 className="font-medium text-base">{t('label.model-store')}</h6>
         {mlModelDetail.mlStore ? (
           <div className="m-t-xs tw-table-container">
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Modals/DeployIngestionLoaderModal/DeployIngestionLoaderModal.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Modals/DeployIngestionLoaderModal/DeployIngestionLoaderModal.tsx
index 459b9809055..9cb11a8c006 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Modals/DeployIngestionLoaderModal/DeployIngestionLoaderModal.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Modals/DeployIngestionLoaderModal/DeployIngestionLoaderModal.tsx
@@ -41,7 +41,7 @@ const DeployIngestionLoaderModal = ({
       data-testid="deploy-modal"
       footer={null}
       visible={visible}>
-      <div className="p-y-lg flex flex-col" data-testid="body-text">
+      <div className="p-y-lg d-flex flex-col" data-testid="body-text">
         <div className={classNames('ingestion-content relative', className)}>
           <Fragment>
             <Typography.Text
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Modals/WhatsNewModal/index.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Modals/WhatsNewModal/index.tsx
index d42a1587d71..86d17e084a3 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Modals/WhatsNewModal/index.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Modals/WhatsNewModal/index.tsx
@@ -86,7 +86,7 @@ export const WhatsNewModal: FunctionComponent<WhatsNewModalProps> = ({
         <div
           className="border-r-2 p-x-md p-y-md border-separate"
           style={{ width: '14%' }}>
-          <div className="flex flex-col-reverse">
+          <div className="d-flex flex-col-reverse">
             {WHATS_NEW.map((d) => (
               <div className="flex items-center justify-end mb-2.5" key={d.id}>
                 <VersionIndicatorIcon
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Reactions/Emoji.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Reactions/Emoji.tsx
index b1811fce17c..f2775ac352c 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Reactions/Emoji.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Reactions/Emoji.tsx
@@ -104,7 +104,7 @@ const Emoji: FC<EmojiProps> = ({
       zIndex={9999}
       onVisibleChange={setVisible}>
       <Button
-        className={classNames('ant-btn-reaction tw-mr-1 flex', {
+        className={classNames('ant-btn-reaction tw-mr-1 d-flex', {
           'ant-btn-isReacted': isReacted,
         })}
         data-testid="emoji-button"
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/TableProfilerV1.tsx b/openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/TableProfilerV1.tsx
index 752ff816b14..7dba3e8b626 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/TableProfilerV1.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/TableProfilerV1.tsx
@@ -429,7 +429,7 @@ const TableProfilerV1: FC<TableProfilerProps> = ({ permissions }) => {
                       : t('message.no-permission-for-action')
                   }>
                   <Button
-                    className="rounded-4 tw-w-8 flex justify-center manage-dropdown-button"
+                    className="rounded-4 tw-w-8 d-flex justify-center manage-dropdown-button"
                     data-testid="profiler-setting-btn"
                     disabled={!editTest}
                     type="primary"
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.component.tsx
index 4a14a32eddf..c149a76a38d 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.component.tsx
@@ -781,7 +781,7 @@ const Users = ({
   const getFeedTabData = () => {
     return (
       <Fragment>
-        <div className="px-1.5 flex justify-between">
+        <div className="px-1.5 d-flex justify-between">
           <div className="tw-relative">
             <AntDButton
               className="flex items-center p-0"
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/VersionTable/VersionTable.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/VersionTable/VersionTable.component.tsx
index 33c643eed9b..fc49958581c 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/VersionTable/VersionTable.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/VersionTable/VersionTable.component.tsx
@@ -90,7 +90,7 @@ const VersionTable = ({ columnName, columns, joins }: VersionTableProps) => {
         accessor: 'tags',
         width: 272,
         render: (tags: Column['tags']) => (
-          <div className="flex flex-wrap">
+          <div className="d-flex flex-wrap">
             <TagsViewer sizeCap={-1} tags={tags || []} />
           </div>
         ),
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/FilterPattern/FilterPattern.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/FilterPattern/FilterPattern.tsx
index 3bfb18a8333..dd2775169f4 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/FilterPattern/FilterPattern.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/FilterPattern/FilterPattern.tsx
@@ -60,7 +60,7 @@ const FilterPattern = ({
             onChange={(e) => handleChecked(e.target.checked)}
           />
         </Col>
-        <Col className="flex flex-col">
+        <Col className="d-flex flex-col">
           <label htmlFor={`${type}FilterPatternCheckbox`}>{`${capitalize(
             type
           )} Filter Pattern`}</label>
@@ -87,7 +87,7 @@ const FilterPattern = ({
       {checked && (
         <div data-testid="field-container">
           <Field>
-            <label className="flex flex-col">{t('label.include')}:</label>
+            <label className="d-flex flex-col">{t('label.include')}:</label>
             <Typography.Text
               className="text-grey-muted m-t-xss m-b-xss"
               data-testid="filter-pattern-include-info">
@@ -106,7 +106,7 @@ const FilterPattern = ({
             />
           </Field>
           <Field>
-            <label className="flex flex-col">{t('label.exclude')}:</label>
+            <label className="d-flex flex-col">{t('label.exclude')}:</label>
             <Typography.Text
               className="text-grey-muted m-t-xss m-b-xss"
               data-testid="filter-pattern-exclude-info">
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/InheritedRolesCard/InheritedRolesCard.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/InheritedRolesCard/InheritedRolesCard.component.tsx
index e7ab8ee0294..6e2125b0dde 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/InheritedRolesCard/InheritedRolesCard.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/InheritedRolesCard/InheritedRolesCard.component.tsx
@@ -42,9 +42,9 @@ const InheritedRolesCard = ({ userData }: InheritedRolesCardProps) => {
             </span>
           </div>
         ) : (
-          <div className="flex justify-between flex-col">
+          <div className="d-flex justify-between flex-col">
             {userData.inheritedRoles?.map((inheritedRole, i) => (
-              <div className="mb-2 flex items-center gap-2" key={i}>
+              <div className="mb-2 d-flex items-center gap-2" key={i}>
                 <SVGIcons alt="icon" className="w-4" icon={Icons.USERS} />
 
                 <Typography.Text
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/PopOverCard/EntityPopOverCard.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/PopOverCard/EntityPopOverCard.tsx
index d7b63e31ce4..b455b161567 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/PopOverCard/EntityPopOverCard.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/PopOverCard/EntityPopOverCard.tsx
@@ -218,7 +218,7 @@ const EntityPopOverCard: FC<Props> = ({ children, entityType, entityFQN }) => {
         {entityTags.length ? (
           <>
             <Divider className="m-b-xs m-t-sm" />
-            <div className="flex flex-start">
+            <div className="d-flex flex-start">
               <span className="w-5 m-r-xs">
                 <SVGIcons alt="icon-tag" icon="icon-tag-grey" width="14" />
               </span>
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/RolesElement/RolesElement.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/RolesElement/RolesElement.component.tsx
index 0979f7e513a..5c009cab114 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/RolesElement/RolesElement.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/RolesElement/RolesElement.component.tsx
@@ -27,13 +27,13 @@ const RolesElement = ({ userData }: RolesElementProps) => {
   return (
     <Fragment>
       {userData.isAdmin && (
-        <div className="mb-2 flex items-center gap-2">
+        <div className="mb-2 d-flex items-center gap-2">
           <SVGIcons alt="icon" className="w-4" icon={Icons.USERS} />
           <span>{TERM_ADMIN}</span>
         </div>
       )}
       {userData?.roles?.map((role, i) => (
-        <div className="mb-2 flex items-center gap-2" key={i}>
+        <div className="mb-2 d-flex items-center gap-2" key={i}>
           <SVGIcons alt="icon" className="w-4" icon={Icons.USERS} />
           <Typography.Text
             className="ant-typography-ellipsis-custom w-48"
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/facetfilter/FacetFilter.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/facetfilter/FacetFilter.tsx
index 300af5347b3..83a091373d1 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/facetfilter/FacetFilter.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/facetfilter/FacetFilter.tsx
@@ -143,7 +143,7 @@ const FacetFilter: React.FC<FacetFilterProps> = ({
           { length: aggregationsLength }
         ) => (
           <div data-testid={`filter-heading-${aggregationKey}`} key={index}>
-            <div className="flex justify-between flex-col">
+            <div className="d-flex justify-between flex-col">
               <h6 className="font-medium text-grey-body m-b-sm m-y-xs">
                 {translateAggregationKeyToTitle(aggregationKey)}
               </h6>
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/dropdown/DropDownList.tsx b/openmetadata-ui/src/main/resources/ui/src/components/dropdown/DropDownList.tsx
index 5c76179a2e3..6cdbdc12255 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/dropdown/DropDownList.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/dropdown/DropDownList.tsx
@@ -137,7 +137,7 @@ const DropDownList: FunctionComponent<DropDownListProp> = ({
       <div
         aria-disabled={item.disabled as boolean}
         className={classNames(
-          'text-body flex px-4 py-2 text-sm hover:tw-bg-body-hover',
+          'text-body d-flex px-4 py-2 text-sm hover:tw-bg-body-hover',
           !isNil(value) && item.value === value ? 'tw-bg-primary-lite' : null,
           {
             'opacity-60 cursor-not-allowed': item.disabled,
@@ -152,7 +152,7 @@ const DropDownList: FunctionComponent<DropDownListProp> = ({
           !item.disabled && item.value !== value && onSelect?.(e, item.value)
         }>
         {item.type === 'user' ? (
-          <div className="w-full flex justify-between items-center">
+          <div className="w-full d-flex justify-between items-center">
             <UserTag id={item.value as string} name={item.name as string} />
 
             {removeOwnerButton(item)}
@@ -162,7 +162,7 @@ const DropDownList: FunctionComponent<DropDownListProp> = ({
             {item.icon}
             <div
               className={classNames(
-                'tw-truncate flex items-center justify-between',
+                'tw-truncate d-flex items-center justify-between',
                 widthClass
               )}
               title={item.name as string}>
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/RolesPage/AddRolePage/AddRolePage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/RolesPage/AddRolePage/AddRolePage.tsx
index f31c5f09a80..4bf5c3fe4b3 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/RolesPage/AddRolePage/AddRolePage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/RolesPage/AddRolePage/AddRolePage.tsx
@@ -108,15 +108,13 @@ const AddRolePage = () => {
 
   return (
     <Row
-      className="tw-bg-body-main tw-h-full"
+      className="bg-body-main h-full"
       data-testid="add-role-container"
       gutter={[16, 16]}>
       <Col offset={4} span={12}>
         <TitleBreadcrumb className="m-y-md" 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-role')}
           </Typography.Paragraph>
           <Form
@@ -177,7 +175,7 @@ const AddRolePage = () => {
               </Select>
             </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"
@@ -195,8 +193,8 @@ const AddRolePage = () => {
           </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-role')}
         </Typography.Paragraph>
         <Typography.Text>{t('message.add-role-message')}</Typography.Text>
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/RolesPage/RolesDetailPage/RolesDetail.less b/openmetadata-ui/src/main/resources/ui/src/pages/RolesPage/RolesDetailPage/RolesDetail.less
index 066de589fc2..7667101f435 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/RolesPage/RolesDetailPage/RolesDetail.less
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/RolesPage/RolesDetailPage/RolesDetail.less
@@ -24,3 +24,10 @@
     }
   }
 }
+
+.link-hover {
+  &:hover {
+    text-decoration: underline;
+    cursor: pointer;
+  }
+}
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/RolesPage/RolesDetailPage/RolesDetailPage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/RolesPage/RolesDetailPage/RolesDetailPage.tsx
index 3bf9053db18..7ac6cd76f4f 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/RolesPage/RolesDetailPage/RolesDetailPage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/RolesPage/RolesDetailPage/RolesDetailPage.tsx
@@ -288,7 +288,7 @@ const RolesDetailPage = () => {
 
               <Tabs data-testid="tabs" defaultActiveKey="policies">
                 <TabPane key="policies" tab={t('label.policies')}>
-                  <Space className="tw-w-full" direction="vertical">
+                  <Space className="w-full" direction="vertical">
                     <Tooltip
                       title={
                         rolePermission.EditAll
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/RolesPage/RolesDetailPage/RolesDetailPageList.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/RolesPage/RolesDetailPage/RolesDetailPageList.component.tsx
index eacf4347d19..b79504f7fb9 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/RolesPage/RolesDetailPage/RolesDetailPageList.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/RolesPage/RolesDetailPage/RolesDetailPageList.component.tsx
@@ -66,10 +66,7 @@ const RolesDetailPageList = ({
           }
 
           return (
-            <Link
-              className="hover:tw-underline tw-cursor-pointer"
-              data-testid="entity-name"
-              to={link}>
+            <Link className="link-hover" data-testid="entity-name" to={link}>
               {getEntityName(record)}
             </Link>
           );
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/RolesPage/RolesListPage/RolesList.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/RolesPage/RolesListPage/RolesList.tsx
index 22f98e2e8dd..dfbad7dd4c2 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/RolesPage/RolesListPage/RolesList.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/RolesPage/RolesListPage/RolesList.tsx
@@ -73,7 +73,7 @@ const RolesList: FC<RolesListProps> = ({ roles, fetchRoles }) => {
         key: 'name',
         render: (_, record) => (
           <Link
-            className="hover:tw-underline tw-cursor-pointer"
+            className="link-hover"
             data-testid="role-name"
             to={getRoleWithFqnPath(record.fullyQualifiedName || '')}>
             {getEntityName(record)}
@@ -114,7 +114,7 @@ const RolesList: FC<RolesListProps> = ({ roles, fetchRoles }) => {
               )}
               {hasMore && (
                 <Popover
-                  className="tw-cursor-pointer"
+                  className="cursor-pointer"
                   content={
                     <Space wrap size={4}>
                       {record.policies.slice(LIST_CAP).map((policy) =>
@@ -136,9 +136,9 @@ const RolesList: FC<RolesListProps> = ({ roles, fetchRoles }) => {
                       )}
                     </Space>
                   }
-                  overlayClassName="tw-w-40 tw-text-center"
+                  overlayClassName="w-40 text-center"
                   trigger="click">
-                  <Tag className="tw-ml-1" data-testid="plus-more-count">{`+${
+                  <Tag className="m-l-xss" data-testid="plus-more-count">{`+${
                     listLength - LIST_CAP
                   } more`}</Tag>
                 </Popover>
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 ae1b2b71335..39ea9097554 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
@@ -181,7 +181,7 @@ const SigninPage = () => {
   const onClickForgotPassword = () => history.push(ROUTES.FORGOT_PASSWORD);
 
   return (
-    <div className="flex flex-col h-full">
+    <div className="d-flex flex-col h-full">
       <Row className="flex bg-body-main flex-grow" data-testid="signin-page">
         <Col span={10}>
           <div
@@ -240,7 +240,7 @@ const SigninPage = () => {
                 </Form>
                 {loginError && (
                   <div
-                    className="flex flex-col m-y-md"
+                    className="d-flex flex-col m-y-md"
                     data-testid="login-error-container">
                     <div className="flex border-1 border-main rounded-4 p-sm error-alert ">
                       <div className="m-r-xs">
@@ -271,7 +271,7 @@ const SigninPage = () => {
                       </Typography.Text>
                     </Divider>
 
-                    <div className="mt-4 flex flex-center">
+                    <div className="mt-4 d-flex flex-center">
                       <Typography.Text className="mr-4">
                         {t('label.new-to-the-platform')}
                       </Typography.Text>
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/service/index.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/service/index.tsx
index 9d0c9ddb0a0..a4816927554 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/service/index.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/service/index.tsx
@@ -933,9 +933,7 @@ const ServicePage: FunctionComponent = () => {
           !isUndefined(description) && description.trim() ? (
             <RichTextEditorPreviewer markdown={description} />
           ) : (
-            <span className="tw-no-description">
-              {t('label.no-description')}
-            </span>
+            <span className="text-grey-muted">{t('label.no-description')}</span>
           ),
       },
       {
@@ -1004,7 +1002,7 @@ const ServicePage: FunctionComponent = () => {
                         variant="outlined"
                         onClick={handleDelete}>
                         <IcDeleteColored
-                          className="tw-mr-1.5"
+                          className="m-r-xs"
                           height={14}
                           viewBox="0 0 24 24"
                           width={14}
@@ -1083,7 +1081,7 @@ const ServicePage: FunctionComponent = () => {
               <Col span={24}>
                 <TabsPane
                   activeTab={activeTab}
-                  className="tw-flex-initial"
+                  className="flex-initial"
                   setActiveTab={activeTabHandler}
                   tabs={tabs}
                 />
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/signup/basic-signup.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/signup/basic-signup.component.tsx
index f4eec49c8b6..1169759207c 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/signup/basic-signup.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/signup/basic-signup.component.tsx
@@ -69,14 +69,12 @@ const BasicSignUp = () => {
   };
 
   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="mt-4 tw-text-center flex-center flex-col">
+    <div className="d-flex flex-col h-full">
+      <div className="d-flex bg-body-main flex-grow" data-testid="signin-page">
+        <div className="w-5/12">
+          <div className="mt-4 text-center flex-center flex-col">
             <SVGIcons alt="OpenMetadata Logo" icon={Icons.LOGO} width="152" />
-            <Typography.Text className="mt-8 w-80 tw-text-xl font-medium tw-text-grey-muted">
+            <Typography.Text className="mt-8 w-80 text-xl font-medium text-grey-muted">
               Centralized Metadata Store, Discover, Collaborate and get your
               Data Right
             </Typography.Text>
@@ -160,7 +158,7 @@ const BasicSignUp = () => {
                           <Typography.Text type="secondary">or</Typography.Text>
                         </Divider>
 
-                        <div className="mt-4 flex flex-center">
+                        <div className="mt-4 d-flex flex-center">
                           <Typography.Text className="mr-4">
                             Already a user?
                           </Typography.Text>
@@ -180,17 +178,17 @@ const BasicSignUp = () => {
             ) : null}
           </div>
         </div>
-        <div className="tw-w-7/12 tw-relative">
-          <div className="tw-absolute tw-inset-0">
+        <div className="w-7/12 relative">
+          <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="d-flex justify-center mt-44 mb-10">
               <LoginCarousel />
             </div>
           </div>
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/tags/index.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/tags/index.tsx
index c0565f9c054..025a614f77d 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/tags/index.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/tags/index.tsx
@@ -570,7 +570,7 @@ const TagsPage = () => {
         key: 'description',
         render: (text: string, record: Tag) => (
           <div className="tw-group tableBody-cell">
-            <div className="cursor-pointer flex">
+            <div className="cursor-pointer d-flex">
               <div>
                 {text ? (
                   <RichTextEditorPreviewer markdown={text} />
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 7b9a593e9cf..8411fae8f5a 100644
--- a/openmetadata-ui/src/main/resources/ui/src/styles/app.less
+++ b/openmetadata-ui/src/main/resources/ui/src/styles/app.less
@@ -18,7 +18,6 @@
 @primary-hover-light: rgba(219, 209, 249);
 @white: #fff;
 @gray: #dde3ea;
-@grey-body: rgb(55, 53, 47);
 @trigger-btn-hover-bg: #efefef;
 
 //font weight
@@ -69,6 +68,9 @@
 .text-grey-muted {
   color: #6b7280;
 }
+.text-grey-body {
+  color: @text-color-secondary;
+}
 .text-body {
   color: @text-color-secondary;
 }
@@ -129,46 +131,6 @@
   border-radius: 6px;
 }
 
-// flex
-.flex {
-  display: flex;
-}
-.item-start {
-  align-items: flex-start;
-}
-.items-center {
-  align-items: center;
-}
-.justify-end {
-  justify-content: flex-end;
-}
-.justify-between {
-  justify-content: space-between;
-}
-.justify-center {
-  justify-content: center;
-}
-.self-center {
-  align-self: center;
-}
-.flex-col {
-  flex-direction: column;
-}
-.flex-initial {
-  flex: 0 1 auto;
-}
-.flex-center {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.flex-wrap {
-  flex-wrap: wrap;
-}
-.flex-grow {
-  flex-grow: 1;
-}
-
 .break-word {
   word-break: break-word;
 }
diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/components/size.less b/openmetadata-ui/src/main/resources/ui/src/styles/components/size.less
index 8b60db42101..12205a6f634 100644
--- a/openmetadata-ui/src/main/resources/ui/src/styles/components/size.less
+++ b/openmetadata-ui/src/main/resources/ui/src/styles/components/size.less
@@ -80,6 +80,12 @@
 .w-3\/5 {
   width: 60%;
 }
+.w-5\/12 {
+  width: 41.666667%;
+}
+.w-7\/12 {
+  width: 58.333333%;
+}
 .w-9\/10 {
   width: 90%;
 }
@@ -103,6 +109,9 @@
 }
 
 //Height
+.h-3 {
+  height: 12px;
+}
 .h-4 {
   height: 16px;
 }
@@ -118,6 +127,9 @@
 .h-9 {
   height: 36px;
 }
+.h-10 {
+  height: 2.5rem /* 40px */;
+}
 .h-100 {
   height: 400px;
 }
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 fe11f954cc2..2d406c63ce5 100644
--- a/openmetadata-ui/src/main/resources/ui/src/styles/position.less
+++ b/openmetadata-ui/src/main/resources/ui/src/styles/position.less
@@ -23,15 +23,21 @@
 .align-start {
   align-items: start;
 }
-
 .items-center {
   align-items: center;
 }
+.item-start {
+  align-items: flex-start;
+}
 
 // Display
 .d-flex {
   display: flex;
 }
+//flex class will be removed once all the element using this class change to d-flex
+.flex {
+  display: flex;
+}
 .d-inline-flex {
   display: inline-flex;
 }
@@ -79,8 +85,8 @@
   bottom: 100%;
 }
 
-.flex-shrink {
-  flex-shrink: 0;
+.gap-1 {
+  gap: 16px;
 }
 
 .align-middle {
@@ -92,13 +98,42 @@
 .flex-none {
   flex: none;
 }
-.justify-center {
-  justify-content: center;
-}
 .flex-col-reverse {
   flex-direction: column-reverse;
 }
 
-.gap-1 {
-  gap: 16px;
+// Justify Items
+.justify-center {
+  justify-content: center;
+}
+.justify-self-end {
+  justify-self: end;
+}
+.justify-end {
+  justify-content: flex-end;
+}
+.justify-between {
+  justify-content: space-between;
+}
+
+//  Flex Direction
+.flex-col {
+  flex-direction: column;
+}
+.flex-initial {
+  flex: 0 1 auto;
+}
+.flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.flex-wrap {
+  flex-wrap: wrap;
+}
+.flex-grow {
+  flex-grow: 1;
+}
+.flex-shrink {
+  flex-shrink: 0;
 }
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 6aaa824b4e7..0705b9b879f 100644
--- a/openmetadata-ui/src/main/resources/ui/src/styles/spacing.less
+++ b/openmetadata-ui/src/main/resources/ui/src/styles/spacing.less
@@ -74,6 +74,12 @@
   margin-top: @margin-lg;
   margin-bottom: @margin-lg;
 }
+
+.m-y-xlg {
+  margin-top: @margin-xlg;
+  margin-bottom: @margin-lg;
+}
+
 .m--r-7 {
   margin-right: -28px;
 }
@@ -220,6 +226,9 @@
 .mr-8 {
   margin-right: 2rem;
 }
+.mb-0 {
+  margin-bottom: 0;
+}
 .mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -229,6 +238,9 @@
 .mb-5 {
   margin-bottom: 1.25rem /* 20px */;
 }
+.mb-7 {
+  margin-bottom: 28px;
+}
 .mb-8 {
   margin-bottom: 2rem;
 }
@@ -241,15 +253,15 @@
 .m-16 {
   margin: 4rem;
 }
-.mb-0 {
-  margin-bottom: 0;
-}
 .mt-2\.5 {
   margin-top: 2.5rem;
 }
 .mt-12 {
   margin-top: 3rem;
 }
+.mb-10 {
+  margin-bottom: 2.5rem;
+}
 .mb-12 {
   margin-bottom: 3rem;
 }
@@ -274,6 +286,11 @@
   margin-bottom: 1rem;
 }
 
+.my-7 {
+  margin-top: 1.75rem /* 28px */;
+  margin-bottom: 1.75rem /* 28px */;
+}
+
 // padding
 .p-16 {
   padding: 4rem;
@@ -446,10 +463,20 @@
 .w-80 {
   width: 80%;
 }
+
+.px-8 {
+  padding-left: 2rem /* 32px */;
+  padding-right: 2rem /* 32px */;
+}
+
 .px-10 {
   padding-left: 2.5rem; /* 40px */
   padding-right: 2.5rem;
 }
+.p-y-36 {
+  padding-top: 9rem /* 144px */;
+  padding-bottom: 9rem /* 144px */;
+}
 .mr-1 {
   margin-right: 0.25rem;
 }