opti: topbar style

apps/ligo-virgo/src/pages/workspace/docs/Page.tsx

@@ -173,7 +173,6 @@ const LigoApp = styled('div')({
     display: 'flex',
     flex: '1 1 0%',
     backgroundColor: 'white',
-    margin: '10px 0',
 });
 
 const LigoLeftContainer = styled('div')({
@@ -184,7 +183,7 @@ const LigoLeftContainer = styled('div')({
 const WorkspaceSidebar = styled('div')(({ hidden }) => ({
     position: 'absolute',
     bottom: '48px',
-    top: '8px',
+    top: '12px',
     zIndex: 1,
     display: 'flex',
     flexDirection: 'column',

libs/components/editor-core/src/RenderRoot.tsx

@@ -257,7 +257,7 @@ const Container = styled('div')(
         isOnDrag: boolean;
     }) => ({
         width: '100%',
-        padding: isWhiteboard ? 0 : `96px ${PADDING_X}px 0 ${PADDING_X}px`,
+        padding: isWhiteboard ? 0 : `72px ${PADDING_X}px 0 ${PADDING_X}px`,
         minWidth: isWhiteboard ? 'unset' : '940px',
         position: 'relative',
         ...(isOnDrag && {

libs/components/icons/src/auto-icons/index.ts

@@ -1,4 +1,4 @@
-export const timestamp = 1658999074664;
+export const timestamp = 1659000896562;
 export * from './image/image';
 export * from './format-clear/format-clear';
 export * from './backward-undo/backward-undo';

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}>
+                    <StyledHelper>
-                        <SideBarViewIcon />
+                        <StyledShare>Share</StyledShare>
-                    </IconButton>
+                        <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,

libs/components/ui/src/button/IconButton.tsx

@@ -35,6 +35,7 @@ interface IconButtonProps {
     disabled?: boolean;
     style?: CSSProperties;
     className?: string;
+    size?: SizeType;
 }
 
 export const IconButton: FC<PropsWithChildren<IconButtonProps>> = ({
@@ -56,43 +57,47 @@ export const IconButton: FC<PropsWithChildren<IconButtonProps>> = ({
     );
 };
 
-const Container = styled('button')(({ theme }) => {
+const Container = styled('button')<{ size?: SizeType }>(
-    return {
+    ({ theme, size = SIZE_MIDDLE }) => {
-        display: 'flex',
+        const { iconSize, areaSize } = SIZE_CONFIG[size];
-        justifyContent: 'center',
-        alignItems: 'center',
-        width: '32px',
-        height: '32px',
-        backgroundColor: theme.affine.palette.white,
-        color: theme.affine.palette.icons,
-        padding: theme.affine.spacing.iconPadding,
-        borderRadius: '5px',
 
-        '& svg': {
+        return {
-            width: '20px',
-            height: '20px',
             display: 'flex',
             justifyContent: 'center',
             alignItems: 'center',
-        },
+            width: areaSize,
+            height: areaSize,
+            backgroundColor: theme.affine.palette.white,
+            color: theme.affine.palette.icons,
+            padding: theme.affine.spacing.iconPadding,
+            borderRadius: '5px',
 
-        '&:hover': {
+            '& svg': {
-            backgroundColor: theme.affine.palette.hover,
+                width: iconSize,
-        },
+                height: iconSize,
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+            },
 
-        [`&${buttonStatus.hover}`]: {
+            '&:hover': {
-            backgroundColor: theme.affine.palette.hover,
+                backgroundColor: theme.affine.palette.hover,
-        },
+            },
 
-        '&:focus': {
+            [`&${buttonStatus.hover}`]: {
-            color: theme.affine.palette.primary,
+                backgroundColor: theme.affine.palette.hover,
-        },
+            },
-        [`&.${buttonStatus.focus}`]: {
-            color: theme.affine.palette.primary,
-        },
 
-        [`&${buttonStatus.disabled}`]: {
+            '&:focus': {
-            cursor: 'not-allowed',
+                color: theme.affine.palette.primary,
-        },
+            },
-    };
+            [`&.${buttonStatus.focus}`]: {
-});
+                color: theme.affine.palette.primary,
+            },
+
+            [`&${buttonStatus.disabled}`]: {
+                cursor: 'not-allowed',
+            },
+        };
+    }
+);