Merge pull request #8691 from weseek/fix/143853-lsx-icon

fix: lsx icon layout and color

packages/remark-lsx/src/client/components/Lsx.tsx

@@ -1,6 +1,5 @@
 import React, { useCallback, useMemo } from 'react';
 
-
 import { LoadingSpinner } from '@growi/ui/dist/components';
 
 import { useSWRxLsx } from '../stores/lsx';
@@ -117,7 +116,9 @@ const LsxSubstance = React.memo(({
             onClick={() => setSize(size => size + 1)}
           >
             Load more<br />
-            <span className="text-muted small start-items-label">({leftItemsNum} pages left)</span>
+            <span className="text-muted small start-items-label">
+              {leftItemsNum} pages left
+            </span>
           </button>
         </div>
       </div>

packages/remark-lsx/src/client/components/LsxPageList/LsxListView.module.scss

@@ -1,7 +1,20 @@
 @use '@growi/ui/scss/molecules/page_list';
 
 .page-list :global {
-  .page-list-ul > li > a:not(:hover) {
-    text-decoration: none;
+  .page-list-li  {
+    line-height: inherit;
+  }
+
+  .page-list-ul > li > div > a {
+    padding: 0px;
+    color: inherit;
+
+    &:not(:hover) {
+      text-decoration: none;
+    }
+
+    &:hover {
+      color: inherit;
+    }
   }
 }

packages/remark-lsx/src/client/components/LsxPageList/LsxPage.tsx

@@ -65,8 +65,8 @@ export const LsxPage = React.memo((props: Props): JSX.Element => {
   const iconElement: JSX.Element = useMemo(() => {
     const isExists = pageId != null;
     return (isExists)
-      ? <span className="material-symbols-outlined" aria-hidden="true">description</span>
-      : <span className="material-symbols-outlined" aria-hidden="true">draft</span>;
+      ? <span className="material-symbols-outlined fs-5 me-1" aria-hidden="true">description</span>
+      : <span className="material-symbols-outlined fs-5 me-1" aria-hidden="true">draft</span>;
   }, [pageId]);
 
   const pagePathElement: JSX.Element = useMemo(() => {
@@ -110,9 +110,11 @@ export const LsxPage = React.memo((props: Props): JSX.Element => {
   }, [basisViewersCount, pageNode]);
 
   return (
-    <li className={`page-list-li ${styles['page-list-li']}`}>
-      <small>{iconElement}</small> {pagePathElement}
-      <span className="ms-2">{pageListMetaElement}</span>
+    <li className={`page-list-li ${styles['page-list-li']} my-2`}>
+      <div className="d-flex align-items-center">
+        {iconElement} {pagePathElement}
+        <span className="ms-2">{pageListMetaElement}</span>
+      </div>
       {childrenElements}
     </li>
   );