Merge pull request #8643 from weseek/imprv/page-path-nav-styles

imprv: PagePathNav and PagePathHeader styles

apps/app/src/components/Common/PagePathNav/PagePathNav.module.scss

@@ -36,3 +36,20 @@
     @include btn-muted.colorize(bs.$orange);
   }
 }
+
+// == Colors
+.grw-former-link :global {
+  .separator {
+    opacity: 0.75;
+  }
+}
+
+.grw-former-link a {
+  --bs-link-opacity: 0.75;
+
+  &:global {
+    &:hover {
+      --bs-link-opacity: 1;
+    }
+  }
+}

apps/app/src/components/Common/PagePathNav/PagePathNav.tsx

@@ -29,8 +29,8 @@ type Props = {
 
 const CopyDropdown = dynamic(() => import('../CopyDropdown').then(mod => mod.CopyDropdown), { ssr: false });
 
-const Separator = (): JSX.Element => {
-  return <span className={styles['grw-mx-02em']}>/</span>;
+const Separator = ({ className }: {className?: string}): JSX.Element => {
+  return <span className={`separator ${className ?? ''} ${styles['grw-mx-02em']}`}>/</span>;
 };
 
 export const PagePathNav: FC<Props> = (props: Props) => {
@@ -69,10 +69,10 @@ export const PagePathNav: FC<Props> = (props: Props) => {
     const linkedPagePathFormer = new LinkedPagePath(dPagePath.former);
     const linkedPagePathLatter = new LinkedPagePath(dPagePath.latter);
     formerLink = (
-      <div className="fs-5">
+      <>
         <PagePathHierarchicalLink linkedPagePath={linkedPagePathFormer} isInTrash={isInTrash} />
         <Separator />
-      </div>
+      </>
     );
     latterLink = (
       <PagePathHierarchicalLink linkedPagePath={linkedPagePathLatter} basePath={dPagePath.former} isInTrash={isInTrash} />
@@ -83,7 +83,7 @@ export const PagePathNav: FC<Props> = (props: Props) => {
 
   return (
     <div>
-      <span className={formerLinkClassName}>{formerLink}</span>
+      <span className={`${formerLinkClassName ?? ''} ${styles['grw-former-link']}`}>{formerLink}</span>
       <div className="d-flex align-items-center">
         <h1 className={`m-0 ${latterLinkClassName}`}>
           {latterLink}

apps/app/src/components/PageHeader/PagePathHeader.module.scss

@@ -3,9 +3,9 @@
   input {
     min-width: 20px;
     min-height: unset;
-    padding-top: 0;
-    padding-bottom: 0;
-    line-height: 1em;
+    padding-top: 2px;
+    padding-bottom: 2px;
+    line-height: 1.2em;
   }
 
   .page-path-header-buttons {

apps/app/src/components/PageHeader/PagePathHeader.tsx

@@ -1,7 +1,7 @@
 import {
-  useState, useEffect, useCallback, memo, useMemo,
+  useState, useCallback, memo,
 } from 'react';
-import type { CSSProperties, FC } from 'react';
+import type { FC } from 'react';
 
 import type { IPagePopulatedToShowRevision } from '@growi/core';
 import { DevidedPagePath } from '@growi/core/dist/models';