Merge branch 'fix/create-modal-style' of https://github.com/weseek/growi into fix/create-modal-style

packages/app/src/components/Navbar/GrowiSubNavigation.module.scss

@@ -119,17 +119,15 @@
         isolation: isolate;
       }
     }
-  }
 
-  &:global {
-    &:hover {
-      .btn-copy,
-      .btn-edit-tags {
-        // change button opacity
-        opacity: unset;
-      }
+    .btn-copy,
+    .btn-edit-tags:hover {
+      // change button opacity
+      opacity: unset;
     }
+  }
 
+  &:global {
     /*
      * Compact Mode
      */

packages/app/src/components/Page/RenderTagLabels.tsx

@@ -23,7 +23,7 @@ const RenderTagLabels = React.memo((props: RenderTagLabelsProps) => {
   const isTagsEmpty = tags.length === 0;
   const tagElements = tags.map((tag) => {
     return (
-      <a key={tag} href={`/_search?q=tag:${tag}`} className="grw-tag-label badge badge-secondary mr-2">
+      <a key={tag} href={`/_search?q=tag:${tag}`} className="ml-2 grw-tag-label badge badge-secondary">
         {tag}
       </a>
     );
@@ -32,16 +32,14 @@ const RenderTagLabels = React.memo((props: RenderTagLabelsProps) => {
   return (
     <>
       {tagElements}
-
-      <div id="edit-tags-btn-wrapper-for-tooltip">
-        <a
-          className={`btn btn-link btn-edit-tags p-0 text-muted d-flex ${isTagsEmpty ? 'no-tags' : ''} ${isGuestUser ? 'disabled' : ''}`}
-          onClick={openEditorHandler}
-        >
-          { isTagsEmpty && <>{ t('Add tags for this page') }</>}
-          <i className="ml-1 icon-plus"></i>
-        </a>
-      </div>
+      <a
+        id="edit-tags-btn-wrapper-for-tooltip"
+        className={`ml-2 p-0 btn btn-link btn-edit-tags text-muted d-flex align-items-center ${isTagsEmpty ? 'no-tags' : ''} ${isGuestUser ? 'disabled' : ''}`}
+        onClick={openEditorHandler}
+      >
+        { isTagsEmpty && <span>{t('Add tags for this page')}</span>}
+        <span className="ml-1 icon-plus"></span>
+      </a>
       {isGuestUser && (
         <UncontrolledTooltip placement="top" target="edit-tags-btn-wrapper-for-tooltip" fade={false}>
           {t('Not available for guest')}

packages/app/src/components/Page/TagLabels.tsx

@@ -37,7 +37,7 @@ export const TagLabels:FC<Props> = (props: Props) => {
   return (
     <>
       <div className={`${styles['grw-tag-labels']} grw-tag-labels d-flex align-items-center`} data-testid="grw-tag-labels">
-        <i className="tag-icon icon-tag mr-2"></i>
+        <span className="icon-tag" />
         <RenderTagLabels
           tags={tags}
           openEditorModal={openEditorModal}