From c2abb78612c208ec84ab4579c26a6714a05e77df Mon Sep 17 00:00:00 2001
From: lawvs <18554747+lawvs@users.noreply.github.com>
Date: Tue, 9 Aug 2022 21:25:22 +0800
Subject: [PATCH] chore: update collasp page styles

---
 .../workspace/docs/collapsible-page-tree.tsx  | 38 +++++++++----------
 1 file changed, 17 insertions(+), 21 deletions(-)

diff --git a/apps/ligo-virgo/src/pages/workspace/docs/collapsible-page-tree.tsx b/apps/ligo-virgo/src/pages/workspace/docs/collapsible-page-tree.tsx
index ab903ab3ca..913f4024c9 100644
--- a/apps/ligo-virgo/src/pages/workspace/docs/collapsible-page-tree.tsx
+++ b/apps/ligo-virgo/src/pages/workspace/docs/collapsible-page-tree.tsx
@@ -1,34 +1,32 @@
-import React, { useCallback, useState } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
-import {
-    MuiBox as Box,
-    MuiButton as Button,
-    MuiCollapse as Collapse,
-    MuiIconButton as IconButton,
-    styled,
-} from '@toeverything/components/ui';
 import {
+    AddIcon,
     ArrowDropDownIcon,
     ArrowRightIcon,
 } from '@toeverything/components/icons';
-import { services } from '@toeverything/datasource/db-service';
 import {
-    usePageTree,
     useCalendarHeatmap,
+    usePageTree,
 } from '@toeverything/components/layout';
-import { AddIcon } from '@toeverything/components/icons';
+import {
+    MuiBox as Box,
+    MuiCollapse as Collapse,
+    styled,
+} from '@toeverything/components/ui';
+import { services } from '@toeverything/datasource/db-service';
+import React, { useCallback, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
 
-const StyledContainer = styled('div')({
+const StyledBtn = styled('div')({
     height: '32px',
     display: 'flex',
     alignItems: 'center',
-});
-
-const StyledBtn = styled('div')({
     color: '#98ACBD',
     textTransform: 'none',
     fontSize: '12px',
     fontWeight: '600',
+    cursor: 'pointer',
+    userSelect: 'none',
+    flex: 1,
 });
 
 export type CollapsiblePageTreeProps = {
@@ -81,16 +79,14 @@ export function CollapsiblePageTree(props: CollapsiblePageTreeProps) {
                 onMouseEnter={() => setNewPageBtnVisible(true)}
                 onMouseLeave={() => setNewPageBtnVisible(false)}
             >
-                <StyledContainer>
+                <StyledBtn onClick={() => setOpen(prev => !prev)}>
                     {open ? (
                         <ArrowDropDownIcon sx={{ color: '#566B7D' }} />
                     ) : (
                         <ArrowRightIcon sx={{ color: '#566B7D' }} />
                     )}
-                    <StyledBtn onClick={() => setOpen(prev => !prev)}>
-                        {title}
-                    </StyledBtn>
-                </StyledContainer>
+                    {title}
+                </StyledBtn>
 
                 {newPageBtnVisible && (
                     <AddIcon