improvement: 1.left toolbar hover style#148;

libs/components/layout/src/header/EditorBoardSwitcher/StatusTrack.tsx

@@ -20,7 +20,6 @@ const Container = styled('div')(({ theme }) => {
     return {
         width: '64px',
         height: '32px',
-        backgroundColor: theme.affine.palette.textHover,
         border: '1px solid #ECF1FB',
         borderRadius: '8px',
         cursor: 'pointer',

libs/components/layout/src/header/LayoutHeader.tsx

@@ -31,6 +31,7 @@ export const LayoutHeader = () => {
                                 size="large"
                                 hoverColor={'transparent'}
                                 disabled={true}
+                                style={{ cursor: 'not-allowed' }}
                             >
                                 <SearchIcon />
                             </IconButton>
@@ -124,11 +125,11 @@ const StyledHelper = styled('div')({
     alignItems: 'center',
 });
 
-const StyledShare = styled(MuiButton)<{ disabled?: boolean }>({
+const StyledShare = styled('div')<{ disabled?: boolean }>({
     padding: '10px 12px',
     fontWeight: 600,
     fontSize: '14px',
-    cursor: 'pointer',
+    cursor: 'not-allowed',
     color: '#98ACBD',
     textTransform: 'none',
     /* disabled for current time */

libs/components/layout/src/workspace-sidebar/activities/activities.tsx

@@ -10,9 +10,10 @@ import {
 } from '@toeverything/components/ui';
 import { useNavigate } from 'react-router';
 import { formatDistanceToNow } from 'date-fns';
+import { DotIcon } from '../dot-icon';
 
 const StyledWrapper = styled('div')({
-    paddingLeft: '12px',
+    width: '100%',
     span: {
         textOverflow: 'ellipsis',
         overflow: 'hidden',
@@ -22,8 +23,8 @@ const StyledWrapper = styled('div')({
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'space-between',
-        paddingRight: '20px',
         whiteSpace: 'nowrap',
+        paddingLeft: '12px',
         '&:hover': {
             background: '#f5f7f8',
             borderRadius: '5px',
@@ -106,6 +107,8 @@ export const Activities = () => {
                     const { id, title, updated } = item;
                     return (
                         <ListItem className="item" key={id}>
+                            <DotIcon />
+
                             <StyledItemContent
                                 onClick={() => {
                                     navigate(`/${currentSpaceId}/${id}`);

libs/components/layout/src/workspace-sidebar/dot-icon/DotIcon.tsx

@@ -0,0 +1,9 @@
+import { PageInPageTreeIcon } from '@toeverything/components/icons';
+
+export const DotIcon = () => {
+    return (
+        <PageInPageTreeIcon
+            style={{ fill: '#98ACBD', width: '20px', height: '20px' }}
+        />
+    );
+};

libs/components/layout/src/workspace-sidebar/dot-icon/index.ts

@@ -0,0 +1 @@
+export { DotIcon } from './DotIcon';

libs/components/layout/src/workspace-sidebar/page-tree/DndTree.tsx

@@ -44,7 +44,7 @@ export type DndTreeProps = {
  */
 export function DndTree(props: DndTreeProps) {
     const {
-        indentationWidth = 12,
+        indentationWidth = 20,
         collapsible,
         removable,
         showDragIndicator,

libs/components/layout/src/workspace-sidebar/page-tree/PageTree.tsx

@@ -3,10 +3,8 @@ import { DndTree } from './DndTree';
 import { useDndTreeAutoUpdate } from './use-page-tree';
 
 const Root = styled('div')({
-    minWidth: 160,
-    maxWidth: 260,
-    marginLeft: 18,
-    marginRight: 6,
+    minWidth: '160px',
+    maxWidth: '276px',
 });
 
 export const PageTree = () => {

libs/components/layout/src/workspace-sidebar/page-tree/tree-item/TreeItem.tsx

@@ -8,6 +8,7 @@ import { useParams } from 'react-router-dom';
 import { useFlag } from '@toeverything/datasource/feature-flags';
 
 import MoreActions from './MoreActions';
+import { DotIcon } from '../../dot-icon';
 import {
     ActionButton,
     Counter,
@@ -76,24 +77,25 @@ export const TreeItem = forwardRef<HTMLDivElement, TreeItemProps>(
                 ghost={ghost}
                 disableSelection={disableSelection}
                 disableInteraction={disableInteraction}
-                spacing={`${indentationWidth * depth}px`}
+                spacing={`${indentationWidth * depth + 12}px`}
+                active={pageId === page_id}
                 {...props}
             >
                 <TreeItemContainer ref={ref} style={style} title={value}>
                     <ActionButton tabIndex={0} onClick={onCollapse}>
-                        {childCount !== 0 &&
-                            (collapsed ? (
+                        {childCount !== 0 ? (
+                            collapsed ? (
                                 <ArrowRightIcon />
                             ) : (
                                 <ArrowDropDownIcon />
-                            ))}
+                            )
+                        ) : (
+                            <DotIcon />
+                        )}
                     </ActionButton>
 
                     <TreeItemContent {...handleProps}>
-                        <TextLink
-                            to={`/${workspace_id}/${pageId}`}
-                            active={pageId === page_id}
-                        >
+                        <TextLink to={`/${workspace_id}/${pageId}`}>
                             {value}
                         </TextLink>
                         {BooleanPageTreeItemMoreActions && (

libs/components/layout/src/workspace-sidebar/page-tree/tree-item/styles.ts

@@ -15,11 +15,14 @@ export const Wrapper = styled('li')<{
     indicator?: boolean;
     disableSelection?: boolean;
     disableInteraction?: boolean;
+    active?: boolean;
 }>`
     box-sizing: border-box;
     padding-left: ${({ spacing }) => spacing};
     list-style: none;
     font-size: 14px;
+    background-color: ${({ active }) => (active ? '#f5f7f8' : 'transparent')};
+    border-radius: 5px;
 
     ${({ clone, disableSelection }) =>
         (clone || disableSelection) &&
@@ -126,8 +129,6 @@ export const ActionButton = styled('button')<{
     fill?: string;
 }>`
     display: flex;
-    width: 12px;
-    padding: 0 15px;
     align-items: center;
     justify-content: center;
     flex: 0 0 auto;
@@ -141,9 +142,10 @@ export const ActionButton = styled('button')<{
     -webkit-tap-highlight-color: transparent;
 
     svg {
+        width: 20px;
+        height: 20px;
         flex: 0 0 auto;
         margin: auto;
-        height: 100%;
         overflow: visible;
         fill: #919eab;
     }
@@ -182,8 +184,7 @@ export const TextLink = styled(Link, {
     appearance: none;
     text-decoration: none;
     user-select: none;
-    color: ${({ theme, active }) =>
-        active ? theme.affine.palette.primary : 'unset'};
+    color: #4c6275;
 `;
 
 export const TreeItemContent = styled('div')`
@@ -195,7 +196,7 @@ export const TreeItemContent = styled('div')`
     align-items: center;
     justify-content: space-around;
     color: #4c6275;
-    padding-right: 0.5rem;
+    padding-right: 12px;
     overflow: hidden;
 
     &:hover {