Fix glossary ui bugs (#7330)

openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryV1.style.less

@@ -18,7 +18,7 @@
 }
 
 .edit-input {
-  padding: 1rem 0;
+  padding: 0 0 8px;
 }
 
 .icon-buttons {

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

@@ -290,7 +290,12 @@ const GlossaryDetails = ({ permissions, glossary, updateGlossary }: props) => {
           size="small"
           type="text"
           onClick={() => setShowRevieweModal(true)}>
-          <SVGIcons alt="edit" icon={Icons.EDIT} title="Edit" width="16px" />
+          <SVGIcons
+            alt="edit"
+            icon={Icons.IC_EDIT_PRIMARY}
+            title="Edit"
+            width="16px"
+          />
         </ButtonAntd>
       </Tooltip>
     );
@@ -313,7 +318,12 @@ const GlossaryDetails = ({ permissions, glossary, updateGlossary }: props) => {
             size="small"
             type="text"
             onClick={handleSelectOwnerDropdown}>
-            <SVGIcons alt="edit" icon={Icons.EDIT} title="Edit" width="16px" />
+            <SVGIcons
+              alt="edit"
+              icon={Icons.IC_EDIT_PRIMARY}
+              title="Edit"
+              width="16px"
+            />
           </ButtonAntd>
         </Tooltip>
         {listVisible && (
@@ -399,26 +409,24 @@ const GlossaryDetails = ({ permissions, glossary, updateGlossary }: props) => {
     <div
       className="tw-w-full tw-h-full tw-flex tw-flex-col"
       data-testid="glossary-details">
-      <div className="tw-flex tw-flex-wrap tw-group tw-mb-5" data-testid="tags">
-        {!isTagEditable && (
+      <div
+        className="tw-flex tw-items-center tw-flex-wrap tw-group tw-mb-5"
+        data-testid="tags">
+        {!isTagEditable && glossary?.tags && glossary.tags.length > 0 && (
           <>
-            {glossary?.tags && glossary.tags.length > 0 && (
-              <>
-                <SVGIcons
-                  alt="icon-tag"
-                  className="tw-mx-1"
-                  icon="icon-tag-grey"
-                  width="16"
-                />
-                <TagsViewer tags={glossary.tags} />
-              </>
-            )}
+            <SVGIcons
+              alt="icon-tag"
+              className="tw-mx-1"
+              icon="icon-tag-grey"
+              width="16"
+            />
+            <TagsViewer tags={glossary.tags} />
           </>
         )}
 
         <div className="tw-inline-block" onClick={handleTagContainerClick}>
           <TagsContainer
-            buttonContainerClass="tw--mt-0"
+            buttonContainerClass="tw-mt-0"
             containerClass="tw-flex tw-items-center tw-gap-2"
             dropDownHorzPosRight={false}
             editable={isTagEditable}
@@ -436,7 +444,7 @@ const GlossaryDetails = ({ permissions, glossary, updateGlossary }: props) => {
             }}>
             {glossary?.tags && glossary?.tags.length ? (
               <button
-                className=" tw-ml-1 focus:tw-outline-none"
+                className=" tw-ml-1 focus:tw-outline-none flex-center"
                 disabled={!(permissions.EditTags || permissions.EditAll)}>
                 <SVGIcons
                   alt="edit"
@@ -481,7 +489,10 @@ const GlossaryDetails = ({ permissions, glossary, updateGlossary }: props) => {
           </div>
         </div>
         <div className="tw-w-3/12 tw-px-2">
-          <Card action={ownerAction()} heading="Owner">
+          <Card
+            action={ownerAction()}
+            className="shadow-custom"
+            heading="Owner">
             <div className="tw-flex tw-items-center">
               {glossary.owner && getEntityName(glossary.owner) && (
                 <div className="tw-inline-block tw-mr-2">
@@ -505,7 +516,7 @@ const GlossaryDetails = ({ permissions, glossary, updateGlossary }: props) => {
           </Card>
           <Card
             action={AddReviewerButton()}
-            className="tw-mt-4"
+            className="tw-mt-4 shadow-custom"
             heading="Reviewer">
             <div>{getReviewerTabData()}</div>
           </Card>

openmetadata-ui/src/main/resources/ui/src/components/GlossaryTerms/GlossaryTermsV1.component.tsx

@@ -329,12 +329,17 @@ const GlossaryTermsV1 = ({
         placement="topRight"
         title={permissions.EditAll ? 'Add Reviewer' : NO_PERMISSION_FOR_ACTION}>
         <Button
-          className="tw-p-0"
+          className="tw-p-0 flex-center"
           data-testid="add-new-reviewer"
           disabled={!permissions.EditAll}
           type="text"
           onClick={() => setShowRevieweModal(true)}>
-          <SVGIcons alt="edit" icon={Icons.EDIT} title="Edit" width="16px" />
+          <SVGIcons
+            alt="edit"
+            icon={Icons.IC_EDIT_PRIMARY}
+            title="Edit"
+            width="16px"
+          />
         </Button>
       </Tooltip>
     );
@@ -534,13 +539,9 @@ const GlossaryTermsV1 = ({
         </Col>
         <Col className="tw-px-10" flex="25%">
           <Card
-            className="glossary-card right-card"
+            className="glossary-card right-card tw-border tw-border-border-gray"
             extra={addReviewerButton()}
-            title={
-              <Text strong className="p-bt-3">
-                Reviewer
-              </Text>
-            }>
+            title={<Text>Reviewer</Text>}>
             <div>{getReviewerTabData()}</div>
           </Card>
         </Col>

openmetadata-ui/src/main/resources/ui/src/components/common/Card/Card.tsx

@@ -27,7 +27,7 @@ const Card = ({ children, heading, action, className }: CardProps) => {
   return (
     <div
       className={classNames(
-        'tw-bg-white tw-border tw-border-border-gray tw-rounded-md tw-shadow-box tw-w-full',
+        'tw-bg-white tw-border tw-border-border-gray tw-rounded-md tw-w-full',
         className
       )}
       data-testid={`${lowerCase(heading)}-card-container`}>

openmetadata-ui/src/main/resources/ui/src/pages/ActivityFeedSettingsPage/ActivityFeedSettingsPage.tsx

@@ -273,7 +273,7 @@ const ActivityFeedSettingsPage: React.FC = () => {
                     disabled={!createPermission}
                     type="text"
                     onClick={handleResetClick}>
-                    Reset all
+                    Reset to default
                   </Button>
                 </Tooltip>
               </Space>

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

@@ -64,6 +64,10 @@
   margin-top: 6rem;
 }
 
+.shadow-custom {
+  box-shadow: 1px 1px 8px rgb(0 0 0 / 6%);
+}
+
 .opacity-60 {
   opacity: 0.6;
 }

openmetadata-ui/src/main/resources/ui/src/styles/components/glossary.less

@@ -12,7 +12,19 @@
  */
 
 .glossary-card {
-  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.12);
+  box-shadow: 1px 1px 8px rgb(0 0 0 / 6%);
+  .ant-card-body {
+    padding: 8px 14px;
+  }
+
+  .ant-card-head {
+    .ant-card-head-wrapper {
+      padding: 0;
+      .ant-card-head-title {
+        padding: 10px 0;
+      }
+    }
+  }
 }
 
 .m-r-1 {

openmetadata-ui/src/main/resources/ui/src/styles/x-master.css

@@ -16,6 +16,8 @@
 body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  overflow: hidden;
+  background: #f8f9fa;
 }
 a {
   color: #2eaadc;