Merge pull request #179 from toeverything/opti-issue176-mitsuha-dev

opti: 1.right panel trigger button cannot click#176;

apps/ligo-virgo/src/pages/workspace/docs/components/tabs/Tabs.tsx

@@ -10,7 +10,6 @@ const StyledTabs = styled('div')(({ theme }) => {
         display: 'flex',
         fontSize: '12px',
         fontWeight: '600',
-        color: theme.affine.palette.primary,
     };
 });
 
@@ -26,13 +25,18 @@ const StyledTabTitle = styled('div', {
     padding-top: 4px;
     border-top: 2px solid #ecf1fb;
     position: relative;
+    cursor: pointer;
+    color: ${({ theme, isActive }) =>
+        isActive ? theme.affine.palette.primary : 'rgba(62, 111, 219, 0.6)'};
 
     &::after {
         content: '';
         width: 0;
         height: 2px;
         background-color: ${({ isActive, theme }) =>
-            isActive ? theme.affine.palette.primary : ''};
+            isActive
+                ? theme.affine.palette.primary
+                : 'rgba(62, 111, 219, 0.6)'};
         position: absolute;
         left: 100%;
         top: -2px;

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

@@ -17,16 +17,20 @@ export const StatusIcon = ({ mode }: StatusIconProps) => {
 const IconWrapper = styled('div')<Pick<StatusIconProps, 'mode'>>(
     ({ theme, mode }) => {
         return {
-            width: '20px',
+            width: '24px',
-            height: '20px',
+            height: '24px',
             borderRadius: '5px',
             boxShadow: theme.affine.shadows.shadow1,
             color: theme.affine.palette.primary,
             cursor: 'pointer',
             backgroundColor: theme.affine.palette.white,
-            transform: `translateX(${mode === DocMode.doc ? 0 : 20}px)`,
+            transform: `translateX(${mode === DocMode.doc ? 0 : 30}px)`,
             transition: 'transform 300ms ease',
 
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+
             '& > svg': {
                 fontSize: '20px',
             },

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

@@ -2,26 +2,37 @@ import { styled } from '@toeverything/components/ui';
 
 type StatusTextProps = {
     children: string;
+    width?: string;
     active?: boolean;
     onClick?: () => void;
 };
 
-export const StatusText = ({ children, active, onClick }: StatusTextProps) => {
+export const StatusText = ({
+    children,
+    width,
+    active,
+    onClick,
+}: StatusTextProps) => {
     return (
-        <StyledText active={active} onClick={onClick}>
+        <StyledText width={width} active={active} onClick={onClick}>
             {children}
         </StyledText>
     );
 };
 
-const StyledText = styled('div')<StatusTextProps>(({ theme, active }) => {
+const StyledText = styled('div')<StatusTextProps>(
+    ({ theme, width, active }) => {
         return {
             display: 'inline-flex',
             alignItems: 'center',
-        color: theme.affine.palette.primary,
+            color: active
-        fontWeight: active ? '500' : '300',
+                ? theme.affine.palette.primary
-        fontSize: '15px',
+                : 'rgba(62, 111, 219, 0.6)',
+            fontWeight: active ? '600' : '400',
+            fontSize: '16px',
+            lineHeight: '22px',
             cursor: 'pointer',
-        padding: '0 6px',
+            ...(!!width && { width }),
         };
-});
+    }
+);

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

@@ -18,11 +18,15 @@ export const StatusTrack: FC<StatusTrackProps> = ({ mode, onClick }) => {
 
 const Container = styled('div')(({ theme }) => {
     return {
+        width: '64px',
+        height: '32px',
         backgroundColor: theme.affine.palette.textHover,
-        borderRadius: '5px',
+        border: '1px solid #ECF1FB',
-        height: '30px',
+        borderRadius: '8px',
-        width: '50px',
         cursor: 'pointer',
-        padding: '5px',
+        margin: '0 8px',
+        display: 'flex',
+        alignItems: 'center',
+        padding: '0 4px',
     };
 });

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

@@ -32,6 +32,7 @@ export const Switcher = () => {
     return (
         <StyledContainerForSwitcher>
             <StatusText
+                width={'44px'}
                 active={pageViewMode === DocMode.doc}
                 onClick={() => switchToPageView(DocMode.doc)}
             >
@@ -48,6 +49,7 @@ export const Switcher = () => {
                 }}
             />
             <StatusText
+                width={'56px'}
                 active={pageViewMode === DocMode.board}
                 onClick={() => switchToPageView(DocMode.board)}
             >

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

@@ -1,4 +1,4 @@
-import { IconButton, styled } from '@toeverything/components/ui';
+import { IconButton, styled, MuiButton } from '@toeverything/components/ui';
 import {
     LogoIcon,
     SideBarViewIcon,
@@ -24,9 +24,13 @@ export const LayoutHeader = () => {
                 </FlexContainer>
                 <FlexContainer>
                     <StyledHelper>
-                        <StyledShare>Share</StyledShare>
+                        <StyledShare disabled={true}>Share</StyledShare>
                         <div style={{ margin: '0px 12px' }}>
-                            <IconButton size="large">
+                            <IconButton
+                                size="large"
+                                hoverColor={'transparent'}
+                                disabled={true}
+                            >
                                 <SearchIcon />
                             </IconButton>
                         </div>
@@ -119,17 +123,19 @@ const StyledHelper = styled('div')({
     alignItems: 'center',
 });
 
-const StyledShare = styled('div')({
+const StyledShare = styled(MuiButton)<{ disabled?: boolean }>({
     padding: '10px 12px',
     fontWeight: 600,
     fontSize: '14px',
-    color: '#3E6FDB',
     cursor: 'pointer',
-
+    color: '#98ACBD',
-    '&:hover': {
+    textTransform: 'none',
-        background: '#F5F7F8',
+    /* disabled for current time */
-        borderRadius: '5px',
+    // color: '#3E6FDB',
-    },
+    // '&:hover': {
+    //     background: '#F5F7F8',
+    //     borderRadius: '5px',
+    // },
 });
 
 const StyledLogoIcon = styled(LogoIcon)(({ theme }) => {
@@ -141,9 +147,7 @@ const StyledLogoIcon = styled(LogoIcon)(({ theme }) => {
 
 const StyledContainerForEditorBoardSwitcher = styled('div')(({ theme }) => {
     return {
-        width: '100%',
         position: 'absolute',
-        display: 'flex',
+        left: '50%',
-        justifyContent: 'center',
     };
 });