opti: topbar style

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

@@ -24,7 +24,7 @@ const IconWrapper = styled('div')<Pick<StatusIconProps, 'mode'>>(
             color: theme.affine.palette.primary,
             cursor: 'pointer',
             backgroundColor: theme.affine.palette.white,
-            transform: `translateX(${mode === DocMode.doc ? 0 : 33}px)`,
+            transform: `translateX(${mode === DocMode.doc ? 0 : 20}px)`,
             transition: 'transform 300ms ease',
 
             '& > svg': {

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

@@ -21,7 +21,7 @@ const Container = styled('div')(({ theme }) => {
         backgroundColor: theme.affine.palette.textHover,
         borderRadius: '5px',
         height: '30px',
-        width: '63px',
+        width: '50px',
         cursor: 'pointer',
         padding: '5px',
     };

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

@@ -1,5 +1,9 @@
 import { IconButton, styled } from '@toeverything/components/ui';
-import { LogoIcon, SideBarViewIcon } from '@toeverything/components/icons';
+import {
+    LogoIcon,
+    SideBarViewIcon,
+    SearchIcon,
+} from '@toeverything/components/icons';
 import { useShowSettingsSidebar } from '@toeverything/datasource/state';
 import { CurrentPageTitle } from './Title';
 import { EditorBoardSwitcher } from './EditorBoardSwitcher';
@@ -18,9 +22,18 @@ export const LayoutHeader = () => {
                     </TitleContainer>
                 </FlexContainer>
                 <FlexContainer>
-                    <IconButton onClick={toggleInfoSidebar}>
-                        <SideBarViewIcon />
-                    </IconButton>
+                    <StyledHelper>
+                        <StyledShare>Share</StyledShare>
+                        <div style={{ margin: '0px 12px' }}>
+                            <IconButton size="large">
+                                <SearchIcon />
+                            </IconButton>
+                        </div>
+
+                        <IconButton onClick={toggleInfoSidebar} size="large">
+                            <SideBarViewIcon />
+                        </IconButton>
+                    </StyledHelper>
                 </FlexContainer>
                 <StyledContainerForEditorBoardSwitcher>
                     <EditorBoardSwitcher />
@@ -69,6 +82,24 @@ const TitleContainer = styled('div')(({ theme }) => {
     };
 });
 
+const StyledHelper = styled('div')({
+    display: 'flex',
+    alignItems: 'center',
+});
+
+const StyledShare = styled('div')({
+    padding: '10px 12px',
+    fontWeight: 600,
+    fontSize: '14px',
+    color: '#3E6FDB',
+    cursor: 'pointer',
+
+    '&:hover': {
+        background: '#F5F7F8',
+        borderRadius: '5px',
+    },
+});
+
 const StyledLogoIcon = styled(LogoIcon)(({ theme }) => {
     return {
         color: theme.affine.palette.primary,