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

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>

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

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"

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

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

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

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"

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"

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"

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>
         ),

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

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

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>

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"

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>

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

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
+          <Typography.Paragraph className="text-base" data-testid="form-title">
-            className="tw-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}>
+      <Col className="m-t-md" span={4}>
-        <Typography.Paragraph className="tw-text-base tw-font-medium">
+        <Typography.Paragraph className="text-base font-medium">
           {t('label.add-role')}
         </Typography.Paragraph>
         <Typography.Text>{t('message.add-role-message')}</Typography.Text>

openmetadata-ui/src/main/resources/ui/src/pages/RolesPage/RolesDetailPage/RolesDetail.less

@@ -24,3 +24,10 @@
     }
   }
 }
+
+.link-hover {
+  &:hover {
+    text-decoration: underline;
+    cursor: pointer;
+  }
+}

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

openmetadata-ui/src/main/resources/ui/src/pages/RolesPage/RolesDetailPage/RolesDetailPageList.component.tsx

@@ -66,10 +66,7 @@ const RolesDetailPageList = ({
           }
 
           return (
-            <Link
+            <Link className="link-hover" data-testid="entity-name" to={link}>
-              className="hover:tw-underline tw-cursor-pointer"
-              data-testid="entity-name"
-              to={link}>
               {getEntityName(record)}
             </Link>
           );

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>

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>

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">
+            <span className="text-grey-muted">{t('label.no-description')}</span>
-              {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}
                 />

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="d-flex flex-col h-full">
-      <div
+      <div className="d-flex bg-body-main flex-grow" data-testid="signin-page">
-        className="tw-flex tw-bg-body-main tw-flex-grow"
+        <div className="w-5/12">
-        data-testid="signin-page">
+          <div className="mt-4 text-center flex-center flex-col">
-        <div className="tw-w-5/12">
-          <div className="mt-4 tw-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="w-7/12 relative">
-          <div className="tw-absolute tw-inset-0">
+          <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="relative">
-            <div className="tw-flex tw-justify-center tw-mt-44 tw-mb-10">
+            <div className="d-flex justify-center mt-44 mb-10">
               <LoginCarousel />
             </div>
           </div>

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} />

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

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

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 {
+.gap-1 {
-  flex-shrink: 0;
+  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 {
+// Justify Items
-  gap: 16px;
+.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;
 }

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