update page tags outline

apps/app/src/components/PageTags/PageTags.tsx

@@ -1,5 +1,5 @@
 import type { FC } from 'react';
-import React from 'react';
+import React, { useState } from 'react';
 
 import { useTranslation } from 'next-i18next';
 
@@ -26,52 +26,60 @@ export const PageTags:FC<Props> = (props: Props) => {
   const {
     tags, isTagLabelsDisabled, onClickEditTagsButton,
   } = props;
+  const [isHovered, setIsHovered] = useState(false);
   const { t } = useTranslation();
 
   if (tags == null) {
     return <></>;
   }
 
-  const isTagsEmpty = tags.length === 0;
-  const printNoneClass = isTagsEmpty ? 'd-print-none' : '';
+  const printNoneClass = tags.length === 0 ? 'd-print-none' : '';
+
+  const onMouseEnterHandler = () => setIsHovered(true);
+  const onMouseLeaveHandler = () => setIsHovered(false);
 
   return (
-    <>
-      <div className={`${styles['grw-tag-labels']} grw-tag-labels d-flex align-items-center mb-2 ${printNoneClass}`} data-testid="grw-tag-labels">
-        <button
-          type="button"
-          className={`btn btn-sm btn-outline-secondary rounded-pill d-flex d-lg-none ${styles['grw-tag-icon-button']}`}
-          onClick={onClickEditTagsButton}
+    <div className={`${styles['grw-tag-labels']} grw-tag-labels d-flex align-items-center mb-2 ${printNoneClass}`} data-testid="grw-tag-labels">
+      <div className="d-flex d-lg-none">
+        <NotAvailableForGuest>
+          <NotAvailableForReadOnlyUser>
+            <button
+              type="button"
+              className={`btn btn-sm btn-outline-secondary rounded-pill ${styles['grw-tag-icon-button']}`}
+              onClick={onClickEditTagsButton}
+            >
+              <span className="material-symbols-outlined">local_offer</span>
+            </button>
+          </NotAvailableForReadOnlyUser>
+        </NotAvailableForGuest>
+      </div>
+      <div className="d-none d-lg-flex row">
+        <div
+          className="text-secondary mb-1"
+          onMouseEnter={onMouseEnterHandler}
+          onMouseLeave={onMouseLeaveHandler}
         >
-          <span className="material-symbols-outlined">local_offer</span>
-        </button>
-        <div className="d-none d-lg-flex row">
-          <div className="col text-secondary">
-            <span className="material-symbols-outlined me-1">local_offer</span>
-            <span className="me-1">{t('Tags')}</span>
+          <span className="material-symbols-outlined me-1">local_offer</span>
+          <span className="me-2">{t('Tags')}</span>
+          {(isHovered && !isTagLabelsDisabled) && (
             <NotAvailableForGuest>
               <NotAvailableForReadOnlyUser>
-                <span id="edit-tags-btn-wrapper-for-tooltip">
-                  <a
-                    className={
-                      `btn btn-link btn-edit-tags text-muted
-                        ${isTagsEmpty && 'no-tags'}
-                        ${isTagLabelsDisabled && 'disabled'}`
-                    }
-                    onClick={onClickEditTagsButton}
-                  >
-                    {isTagsEmpty && <span className="me-1">{ t('Add tags for this page') }</span>}
-                    <i className="icon-plus" />
-                  </a>
-                </span>
+                <button
+                  id="edit-tags-btn-wrapper-for-tooltip"
+                  type="button"
+                  className="btn btn-link text-secondary p-0 border-0"
+                  onClick={onClickEditTagsButton}
+                >
+                  <span className="material-symbols-outlined p-0">edit</span>
+                </button>
               </NotAvailableForReadOnlyUser>
             </NotAvailableForGuest>
-          </div>
-          <div className="d-flex flex-wrap align-items-center">
-            <RenderTagLabels tags={tags} />
-          </div>
+          )}
+        </div>
+        <div>
+          <RenderTagLabels tags={tags} />
         </div>
       </div>
-    </>
+    </div>
   );
 };