update header tags style

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

@@ -21,33 +21,30 @@ 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">
-        {tag}
-      </a>
-    );
-  });
 
   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>
+    <div className='d-flex align-items-center'>
+      {tags.map((tag) => {
+        return (
+          <a key={tag} href={`/_search?q=tag:${tag}`} className="ml-2 grw-tag-label badge badge-secondary">
+            {tag}
+          </a>
+        );
+      })}
+      <a
+        id="edit-tags-btn-wrapper-for-tooltip"
+        className={`p-0 btn btn-link btn-edit-tags text-muted d-flex align-items-center ${isTagsEmpty ? 'ml-2 no-tags' : ''} ${isGuestUser ? 'disabled' : ''}`}
+        onClick={openEditorHandler}
+      >
+        { isTagsEmpty && <>{ t('Add tags for this page') }</>}
+        <span className="ml-2 icon-plus"/>
+      </a>
       {isGuestUser && (
         <UncontrolledTooltip placement="top" target="edit-tags-btn-wrapper-for-tooltip" fade={false}>
           {t('Not available for guest')}
         </UncontrolledTooltip>
       )}
-    </>
+    </div>
   );
 
 });

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="tag-icon icon-tag"/>
         <RenderTagLabels
           tags={tags}
           openEditorModal={openEditorModal}