Fixed: UI styling of the app (#5746)

* Fixed ui styling

* addressing comment

openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCard/ActivityFeedCard.tsx

@@ -121,9 +121,13 @@ const ActivityFeedCard: FC<ActivityFeedCardProp> = ({
 
   return (
     <div
-      className={classNames(className, 'hover:tw-bg-gray-100', {
+      className={classNames(
+        className,
+        'hover:tw-bg-gray-100 tw--mx-2.5 tw-px-2.5 tw--mt-1 tw-py-1 tw-mb-1 tw-rounded',
+        {
           'tw-bg-gray-100': visible,
-      })}>
+        }
+      )}>
       <Popover
         destroyTooltipOnHide
         align={{ targetOffset: [0, -35] }}
@@ -147,7 +151,7 @@ const ActivityFeedCard: FC<ActivityFeedCardProp> = ({
         visible={visible}
         zIndex={9999}
         onVisibleChange={handleVisibleChange}>
-        <div className="tw-flex tw-p-2 tw-mb-1">
+        <div className="tw-flex tw-mb-1">
           <UserPopOverCard userName={feedDetail.from}>
             <span className="tw-cursor-pointer" data-testid="authorAvatar">
               <ProfilePicture id="" name={feedDetail.from} width="32" />

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

@@ -37,7 +37,6 @@ import CopyToClipboardButton from '../buttons/CopyToClipboardButton/CopyToClipbo
 import Description from '../common/description/Description';
 import { reactSingleSelectCustomStyle } from '../common/react-select-component/reactSelectCustomStyle';
 import TitleBreadcrumb from '../common/title-breadcrumb/title-breadcrumb.component';
-import PageContainerV1 from '../containers/PageContainerV1';
 import PageLayout, { leftPanelAntCardStyle } from '../containers/PageLayout';
 import ConfirmationModal from '../Modals/ConfirmationModal/ConfirmationModal';
 import { UserDetails } from '../Users/Users.interface';
@@ -161,11 +160,11 @@ const BotsDetail: FC<BotsDetailProp> = ({
 
   const getDisplayNameComponent = () => {
     return (
-      <div className="tw-mt-4 tw-w-full tw-flex tw-items-center tw-justify-between">
+      <div className="tw-mt-4 tw-w-full">
         {isDisplayNameEdit ? (
-          <div className="tw-flex tw-items-center tw-gap-1">
+          <div className="tw-flex tw-items-center tw-gap-2">
             <input
-              className="tw-form-inputs tw-form-inputs-padding tw-py-0.5 tw-w-64"
+              className="tw-form-inputs tw-form-inputs-padding tw-py-0.5 tw-w-full"
               data-testid="displayName"
               id="displayName"
               name="displayName"
@@ -241,7 +240,7 @@ const BotsDetail: FC<BotsDetailProp> = ({
         className="ant-card-feed"
         style={{
           ...leftPanelAntCardStyle,
-          marginTop: '20px',
+          marginTop: '16px',
         }}>
         <div data-testid="left-panel">
           <div className="tw-flex tw-flex-col">
@@ -267,7 +266,7 @@ const BotsDetail: FC<BotsDetailProp> = ({
         className="ant-card-feed"
         style={{
           ...leftPanelAntCardStyle,
-          marginTop: '20px',
+          marginTop: '16px',
         }}>
         <div data-testid="right-panel">
           <div className="tw-flex tw-flex-col">
@@ -377,7 +376,7 @@ const BotsDetail: FC<BotsDetailProp> = ({
   const getCenterLayout = () => {
     return (
       <div
-        className="tw-w-full tw-bg-white tw-shadow tw-rounded tw-p-4"
+        className="tw-w-full tw-bg-white tw-shadow tw-rounded tw-p-4 tw-mt-4"
         data-testid="center-panel">
         <div className="tw-flex tw-justify-between tw-items-center">
           <h6 className="tw-mb-2 tw-self-center">
@@ -423,7 +422,9 @@ const BotsDetail: FC<BotsDetailProp> = ({
   }, [botsData]);
 
   return (
-    <PageContainerV1 className="tw-py-4">
+    <PageLayout
+      classes="tw-h-full tw-px-4"
+      header={
         <TitleBreadcrumb
           className="tw-px-6"
           titleLinks={[
@@ -434,12 +435,10 @@ const BotsDetail: FC<BotsDetailProp> = ({
             { name: botsData.name || '', url: '', activeTitle: true },
           ]}
         />
-      <PageLayout
-        classes="tw-h-full tw-px-4"
+      }
       leftPanel={fetchLeftPanel()}
       rightPanel={fetchRightPanel()}>
       {getCenterLayout()}
-      </PageLayout>
       {isRevokingToken ? (
         <ConfirmationModal
           bodyText="Are you sure you want to revoke access for JWT token?"
@@ -466,7 +465,7 @@ const BotsDetail: FC<BotsDetailProp> = ({
           }}
         />
       ) : null}
-    </PageContainerV1>
+    </PageLayout>
   );
 };
 

openmetadata-ui/src/main/resources/ui/src/components/Reactions/Emoji.jsx

@@ -92,7 +92,9 @@ const Emoji = ({ reaction, reactionList, onReactionSelect }) => {
           fallback-src={image}>
           {reactionObject.emoji}
         </g-emoji>
-        <span data-testid="emoji-count">{reactionList.length}</span>
+        <span className="tw-text-sm tw-ml-1" data-testid="emoji-count">
+          {reactionList.length}
+        </span>
       </Button>
     </Popover>
   );

openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamDetails.tsx

@@ -365,7 +365,7 @@ const TeamDetails = ({
             ) : (
               <Fragment>
                 <div
-                  className="tw-grid xxl:tw-grid-cols-4 lg:tw-grid-cols-3 md:tw-grid-cols-2 tw-gap-4"
+                  className="tw-grid lg:tw-grid-cols-4 md:tw-grid-cols-2 tw-gap-4"
                   data-testid="user-data-container">
                   {sortedUser.map((user, index) => {
                     const User = {

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

@@ -225,11 +225,11 @@ const Users = ({
   const getDisplayNameComponent = () => {
     if (isAdminUser || isLoggedinUser || isAuthDisabled) {
       return (
-        <div className="tw-mt-4 tw-w-full tw-flex tw-items-center tw-justify-between tw-px-3">
+        <div className="tw-mt-4 tw-w-full tw-px-3">
           {isDisplayNameEdit ? (
-            <div className="tw-flex tw-items-center tw-gap-1 ">
+            <div className="tw-flex tw-justify-between tw-items-center tw-gap-2">
               <input
-                className="tw-form-inputs tw-form-inputs-padding tw-py-0.5 tw-w-64"
+                className="tw-form-inputs tw-form-inputs-padding tw-py-0.5 tw-w-full"
                 data-testid="displayName"
                 id="displayName"
                 name="displayName"
@@ -281,7 +281,7 @@ const Users = ({
       );
     } else {
       return (
-        <p className="tw-mt-2">
+        <p className="tw-mt-2 tw-px-3">
           {getEntityName(userData as unknown as EntityReference)}
         </p>
       );
@@ -305,7 +305,7 @@ const Users = ({
       );
     } else {
       return (
-        <div className="tw--ml-2">
+        <div className="tw--ml-2 tw-px-3">
           <p className="tw-mt-2">
             {userData.description || (
               <span className="tw-no-description tw-p-2">No description </span>
@@ -335,7 +335,7 @@ const Users = ({
       return (
         <Card
           className="ant-card-feed tw-relative"
-          key="inherited-roles-card"
+          key="teams-card"
           style={{
             ...leftPanelAntCardStyle,
             marginTop: '20px',
@@ -345,14 +345,14 @@ const Users = ({
               <h6 className="tw-heading tw-mb-0">Teams</h6>
             </div>
           }>
-          <div>{teamsElement}</div>
+          <div className="tw-mb-4">{teamsElement}</div>
         </Card>
       );
     } else {
       return (
         <Card
           className="ant-card-feed tw-relative"
-          key="inherited-roles-card"
+          key="teams-card"
           style={{
             ...leftPanelAntCardStyle,
             marginTop: '20px',
@@ -375,15 +375,14 @@ const Users = ({
               )}
             </div>
           }>
-          <Fragment>
-            <div>
+          <div className="tw-mb-4">
             {isTeamsEdit ? (
-                <Fragment>
+              <div className="tw-flex tw-justify-between tw-items-center tw-gap-2">
                 <Select
                   isClearable
                   isMulti
                   aria-label="Select teams"
-                    className="tw-ml-1"
+                  className="tw-w-full"
                   isSearchable={false}
                   options={teams?.map((team) => ({
                     label: getEntityName(team as unknown as EntityReference),
@@ -394,9 +393,7 @@ const Users = ({
                   value={selectedTeams}
                   onChange={handleOnTeamsChange}
                 />
-                  <div
-                    className="tw-flex tw-justify-end tw-mt-2"
-                    data-testid="buttons">
+                <div className="tw-flex tw-justify-end" data-testid="buttons">
                   <Button
                     className="tw-px-1 tw-py-1 tw-rounded tw-text-sm tw-mr-1"
                     data-testid="cancel-teams"
@@ -422,12 +419,11 @@ const Users = ({
                     />
                   </Button>
                 </div>
-                </Fragment>
+              </div>
             ) : (
               teamsElement
             )}
           </div>
-          </Fragment>
         </Card>
       );
     }
@@ -466,7 +462,7 @@ const Users = ({
       return (
         <Card
           className="ant-card-feed tw-relative"
-          key="inherited-roles-card"
+          key="roles-card"
           style={{
             ...leftPanelAntCardStyle,
             marginTop: '20px',
@@ -476,7 +472,7 @@ const Users = ({
               <h6 className="tw-heading tw-mb-0">Roles</h6>
             </div>
           }>
-          <div className="tw-flex tw-items-center tw-justify-between">
+          <div className="tw-flex tw-items-center tw-justify-between tw-mb-4">
             {rolesElement}
           </div>
         </Card>
@@ -485,7 +481,7 @@ const Users = ({
       return (
         <Card
           className="ant-card-feed tw-relative"
-          key="inherited-roles-card"
+          key="roles-card"
           style={{
             ...leftPanelAntCardStyle,
             marginTop: '20px',
@@ -508,15 +504,14 @@ const Users = ({
               )}
             </div>
           }>
-          <Fragment>
-            <div className="tw-flex tw-items-center tw-justify-between">
+          <div className="tw-mb-4">
             {isRolesEdit ? (
-                <Fragment>
+              <div className="tw-flex tw-items-center tw-justify-between tw-gap-2">
                 <Select
                   isClearable
                   isMulti
                   aria-label="Select roles"
-                    className="tw-ml-1"
+                  className="tw-w-full"
                   id="select-role"
                   isSearchable={false}
                   options={userRolesOption}
@@ -525,9 +520,7 @@ const Users = ({
                   value={selectedRoles}
                   onChange={handleOnRolesChange}
                 />
-                  <div
-                    className="tw-flex tw-justify-end tw-mt-2"
-                    data-testid="buttons">
+                <div className="tw-flex tw-justify-end" data-testid="buttons">
                   <Button
                     className="tw-px-1 tw-py-1 tw-rounded tw-text-sm tw-mr-1"
                     data-testid="cancel-roles"
@@ -553,12 +546,11 @@ const Users = ({
                     />
                   </Button>
                 </div>
-                </Fragment>
+              </div>
             ) : (
               rolesElement
             )}
           </div>
-          </Fragment>
         </Card>
       );
     }
@@ -605,7 +597,7 @@ const Users = ({
       <div className="user-profile-antd-card" data-testid="left-panel">
         <Card
           className="ant-card-feed tw-relative"
-          key="inherited-roles-card"
+          key="left-panel"
           style={{
             ...leftPanelAntCardStyle,
             marginTop: '12px',

openmetadata-ui/src/main/resources/ui/src/pages/BotsPage/BotsPage.component.tsx

@@ -13,7 +13,7 @@
 
 import { AxiosError, AxiosResponse } from 'axios';
 import { compare } from 'fast-json-patch';
-import React, { Fragment, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import {
   getUserByName,
@@ -21,6 +21,7 @@ import {
   updateUserDetail,
 } from '../../axiosAPIs/userAPI';
 import BotsDetail from '../../components/BotsDetail/BotsDetail.component';
+import PageContainerV1 from '../../components/containers/PageContainerV1';
 import Loader from '../../components/Loader/Loader';
 import { UserDetails } from '../../components/Users/Users.interface';
 import { User } from '../../generated/entity/teams/user';
@@ -114,13 +115,9 @@ const BotsPage = () => {
   }, [botsName]);
 
   return (
-    <Fragment>
-      {isLoading ? (
-        <Loader />
-      ) : (
-        <div className="tw-self-center">{getBotsDetailComponent()}</div>
-      )}
-    </Fragment>
+    <PageContainerV1 className="tw-py-4">
+      {isLoading ? <Loader /> : getBotsDetailComponent()}
+    </PageContainerV1>
   );
 };
 

openmetadata-ui/src/main/resources/ui/src/pages/teams/CheckboxUserCard.tsx

@@ -78,12 +78,11 @@ const CheckboxUserCard = ({
           )}
         </>
       </div>
-      {isActionVisible && (
-        <div className="tw-flex-none">
-          {isCheckBoxes ? (
+      {isActionVisible &&
+        (isCheckBoxes ? (
           <input
             checked={isChecked}
-              className="tw-p-1 custom-checkbox"
+            className="tw-p-1 custom-checkbox tw-self-center"
             data-testid="checkboxAddUser"
             type="checkbox"
             onChange={(e) => {
@@ -93,6 +92,7 @@ const CheckboxUserCard = ({
           />
         ) : (
           <span
+            className="tw-flex-none"
             data-testid="remove"
             onClick={() => onRemove?.(item.id as string)}>
             <SVGIcons
@@ -103,9 +103,7 @@ const CheckboxUserCard = ({
               width="16px"
             />
           </span>
-          )}
-        </div>
-      )}
+        ))}
     </div>
   );
 };

openmetadata-ui/src/main/resources/ui/src/pages/teams/UserCard.tsx

@@ -186,7 +186,7 @@ const UserCard = ({
             <Fragment>
               <span
                 className={classNames(
-                  'tw-font-normal tw-my-1',
+                  'tw-font-normal',
                   isActionVisible ? 'tw-truncate tw-w-32' : null,
                   {
                     'tw-cursor-pointer hover:tw-underline':
@@ -202,7 +202,7 @@ const UserCard = ({
               {item.name && item.name !== item.displayName && (
                 <span
                   className={classNames(
-                    isActionVisible ? 'tw-truncate tw-w-32 tw-my-1' : null
+                    isActionVisible ? 'tw-truncate tw-w-32' : null
                   )}
                   title={isIconVisible ? item.name : capitalize(item.name)}>
                   {isIconVisible ? item.name : capitalize(item.name)}
@@ -212,11 +212,10 @@ const UserCard = ({
           )}
         </div>
       </div>
-      {isActionVisible && (
-        <div className="tw-flex-none">
-          {isCheckBoxes ? (
+      {isActionVisible &&
+        (isCheckBoxes ? (
           <input
-              className="tw-p-1 custom-checkbox"
+            className="tw-p-1 custom-checkbox tw-self-center"
             data-testid="checkboxAddUser"
             type="checkbox"
             onChange={() => {
@@ -224,6 +223,7 @@ const UserCard = ({
             }}
           />
         ) : (
+          <div className="tw-flex-none">
             <NonAdminAction
               html={<>You do not have permission to update the team.</>}
               isOwner={isOwner}
@@ -245,9 +245,8 @@ const UserCard = ({
                 />
               </span>
             </NonAdminAction>
-          )}
           </div>
-      )}
+        ))}
     </div>
   );
 };