Merge pull request #91 from toeverything/fix/lighter-box-shadow

fix: lighter box shadow
2024-12-18 08:01:37 +03:00 · 2022-08-04 18:15:16 +08:00 · 2022-08-04 18:15:16 +08:00 · 4b81cdbf27
commit 4b81cdbf27
parent e46da42fac ce5a523b12
15 changed files with 81 additions and 80 deletions
--- a/apps/ligo-virgo/src/pages/workspace/docs/Page.tsx
+++ b/apps/ligo-virgo/src/pages/workspace/docs/Page.tsx
@ -193,7 +193,7 @@ const LigoLeftContainer = styled('div')({
    position: 'relative',
 });

-const WorkspaceSidebar = styled('div')(({ hidden }) => ({
+const WorkspaceSidebar = styled('div')(({ theme }) => ({
    position: 'absolute',
    bottom: '48px',
    top: '12px',
@ -203,7 +203,7 @@ const WorkspaceSidebar = styled('div')(({ hidden }) => ({
    width: 300,
    minWidth: 300,
    borderRadius: '0px 10px 10px 0px',
-    boxShadow: '0px 1px 10px rgba(152, 172, 189, 0.6)',
+    boxShadow: theme.affine.shadows.shadow1,
    backgroundColor: '#FFFFFF',
    transitionProperty: 'left',
    transitionDuration: '0.35s',
--- a/libs/components/common/src/lib/text/plugins/link.tsx
+++ b/libs/components/common/src/lib/text/plugins/link.tsx
@ -121,11 +121,11 @@ const isLinkActive = (editor: ReactEditor) => {

 const LinkStyledTooltip = styled(({ className, ...props }: MuiTooltipProps) => (
    <Tooltip {...props} classes={{ popper: className }} />
-))(() => ({
+))(({ theme }) => ({
    [`& .${muiTooltipClasses.tooltip}`]: {
        backgroundColor: '#fff',
        color: '#4C6275',
-        boxShadow: '0px 1px 10px rgba(152, 172, 189, 0.6)',
+        boxShadow: theme.affine.shadows.shadow1,
        fontSize: '14px',
    },
    [`& .MuiTooltip-tooltipPlacementBottom`]: {
@ -412,8 +412,7 @@ export const LinkModal = memo((props: LinkModalProps) => {
        visible && (
            <>
                <LinkBehavior onMousedown={handle_mouse_down} rects={rects} />
-                <div
-                    className={styles('linkModalContainer')}
+                <LinkModalContainer
                    style={{
                        top: top + height + GAP_BETWEEN_CONTENT_AND_MODAL,
                        left,
@ -431,7 +430,7 @@ export const LinkModal = memo((props: LinkModalProps) => {
                        autoComplete="off"
                        ref={inputEl}
                    />
-                </div>
+                </LinkModalContainer>
            </>
        ),
        body
@ -491,19 +490,20 @@ const LinkBehavior = (props: {
    );
 };

+const LinkModalContainer = styled('div')(({ theme }) => ({
+    position: 'fixed',
+    width: '354px',
+    height: '40px',
+    padding: '12px',
+    display: 'flex',
+    borderRadius: '4px',
+    boxShadow: theme.affine.shadows.shadow1,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    zIndex: '1',
+}));
+
 const styles = style9.create({
-    linkModalContainer: {
-        position: 'fixed',
-        width: '354px',
-        height: '40px',
-        padding: '12px',
-        display: 'flex',
-        borderRadius: '4px',
-        boxShadow: '0px 1px 10px rgba(152, 172, 189, 0.6)',
-        backgroundColor: '#fff',
-        alignItems: 'center',
-        zIndex: '1',
-    },
    linkModalContainerIcon: {
        width: '16px',
        margin: '0 16px 0 4px',
--- a/libs/components/editor-blocks/src/blocks/group/GroupView.tsx
+++ b/libs/components/editor-blocks/src/blocks/group/GroupView.tsx
@ -69,7 +69,7 @@ const GroupContainer = styled('div')<{ isSelect?: boolean }>(
              }
            : {
                  '&:hover': {
-                      boxShadow: '0px 1px 10px rgb(152 172 189 / 60%)',
+                      boxShadow: theme.affine.shadows.shadow1,
                  },
              }),
    })
--- a/libs/components/editor-blocks/src/blocks/group/components/Panel.tsx
+++ b/libs/components/editor-blocks/src/blocks/group/components/Panel.tsx
@ -2,11 +2,11 @@ import { styled } from '@toeverything/components/ui';
 import type { ComponentPropsWithRef, MouseEvent } from 'react';
 import { forwardRef } from 'react';

-const StyledPanel = styled('div')(() => ({
+const StyledPanel = styled('div')(({ theme }) => ({
    position: 'absolute',
    top: 50,
    background: '#FFFFFF',
-    boxShadow: '0px 1px 10px rgba(152, 172, 189, 0.6)',
+    boxShadow: theme.affine.shadows.shadow1,
    borderRadius: 10,
    padding: '12px 24px',
 }));
--- a/libs/components/editor-plugins/src/comment/Container.tsx
+++ b/libs/components/editor-plugins/src/comment/Container.tsx
@ -64,7 +64,7 @@ const StyledContainerForAddCommentContainer = styled('div')(({ theme }) => {
        zIndex: 1,
        display: 'flex',
        borderRadius: theme.affine.shape.borderRadius,
-        boxShadow: theme.affine.shadows.shadowSxDownLg,
+        boxShadow: theme.affine.shadows.shadow1,
        backgroundColor: theme.affine.palette.white,
    };
 });
--- a/libs/components/editor-plugins/src/menu/command-menu/Container.tsx
+++ b/libs/components/editor-plugins/src/menu/command-menu/Container.tsx
@ -31,7 +31,7 @@ const RootContainer = styled('div')(({ theme }) => {
        width: 352,
        maxHeight: 525,
        borderRadius: '10px',
-        boxShadow: '0px 1px 10px rgba(152, 172, 189, 0.6)',
+        boxShadow: theme.affine.shadows.shadow1,
        backgroundColor: '#fff',
        padding: '8px 4px',
    };
--- a/libs/components/editor-plugins/src/menu/inline-menu/Container.tsx
+++ b/libs/components/editor-plugins/src/menu/inline-menu/Container.tsx
@ -75,13 +75,13 @@ export const InlineMenuContainer = ({ editor }: InlineMenuContainerProps) => {
    ) : null;
 };

-const ToolbarContainer = styled('div')({
+const ToolbarContainer = styled('div')(({ theme }) => ({
    position: 'absolute',
    zIndex: 1,
    display: 'flex',
    alignItems: 'center',
    padding: '0 12px',
    borderRadius: '10px',
-    boxShadow: '0px 1px 10px rgba(152, 172, 189, 0.6)',
+    boxShadow: theme.affine.shadows.shadow1,
    backgroundColor: '#fff',
-});
+}));
--- a/libs/components/editor-plugins/src/menu/reference-menu/Container.tsx
+++ b/libs/components/editor-plugins/src/menu/reference-menu/Container.tsx
@ -8,6 +8,7 @@ import {
    commonListContainer,
 } from '@toeverything/components/common';
 import { domToRect } from '@toeverything/utils';
+import { styled } from '@toeverything/components/ui';

 import { QueryResult } from '../../search';

@ -152,13 +153,12 @@ export const ReferenceMenuContainer = ({
    }, [hooks, handle_key_down]);

    return isShow ? (
-        <div
+        <RootContainer
            ref={menu_ref}
-            className={styles('rootContainer')}
            onKeyDownCapture={handle_key_down}
            style={style}
        >
-            <div className={styles('contentContainer')}>
+            <ContentContainer>
                <CommonList
                    items={
                        searchBlocks?.map(
@ -169,24 +169,23 @@ export const ReferenceMenuContainer = ({
                    currentItem={current_item}
                    setCurrentItem={set_current_item}
                />
-            </div>
-        </div>
+            </ContentContainer>
+        </RootContainer>
    ) : null;
 };

-const styles = style9.create({
-    rootContainer: {
-        position: 'fixed',
-        zIndex: 1,
-        maxHeight: 525,
-        borderRadius: '10px',
-        boxShadow: '0px 1px 10px rgba(152, 172, 189, 0.6)',
-        backgroundColor: '#fff',
-        padding: '8px 4px',
-    },
-    contentContainer: {
-        display: 'flex',
-        overflow: 'hidden',
-        maxHeight: 493,
-    },
-});
+const RootContainer = styled('div')(({ theme }) => ({
+    position: 'fixed',
+    zIndex: 1,
+    maxHeight: '525px',
+    borderRadius: '10px',
+    boxShadow: theme.affine.shadows.shadow1,
+    backgroundColor: '#fff',
+    padding: '8px 4px',
+}));
+
+const ContentContainer = styled('div')(({ theme }) => ({
+    display: 'flex',
+    overflow: 'hidden',
+    maxHeight: '493px',
+}));
--- a/libs/components/editor-plugins/src/search/Search.tsx
+++ b/libs/components/editor-plugins/src/search/Search.tsx
@ -7,6 +7,7 @@ import {
    TransitionsModal,
    MuiBox as Box,
    MuiBox,
+    styled,
 } from '@toeverything/components/ui';
 import { Virgo, BlockEditor } from '@toeverything/framework/virgo';
 import { throttle } from '@toeverything/utils';
@ -21,26 +22,6 @@ const styles = style9.create({
        display: 'flex',
        flexDirection: 'column',
    },
-    search: {
-        margin: '0.5em',
-        backgroundColor: 'white',
-        boxShadow: '0px 1px 10px rgb(152 172 189 / 60%)',
-        padding: '16px 32px',
-        borderRadius: '10px',
-    },
-    result: {
-        margin: '0.5em',
-        backgroundColor: 'white',
-        boxShadow: '0px 1px 10px rgb(152 172 189 / 60%)',
-        padding: '16px 32px',
-        borderRadius: '10px',
-        transitionProperty: 'max-height',
-        transitionDuration: '300ms',
-        transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
-        transitionDelay: '0ms',
-        overflowX: 'hidden',
-        overflowY: 'hidden',
-    },
    resultItem: {
        width: '100%',
    },
@ -96,15 +77,14 @@ export const Search = (props: SearchProps) => {
            }}
        >
            <Box className={styles('wrapper')}>
-                <input
-                    className={styles('search')}
+                <SearchInput
                    autoFocus
                    value={search}
                    onChange={e => set_search(e.target.value)}
                />
-                <MuiBox
+                <ResultContainer
                    sx={{ maxHeight: `${result.length * 28 + 32 + 20}px` }}
-                    className={styles('result', {
+                    className={styles({
                        resultHide: !result.length,
                    })}
                >
@ -119,8 +99,30 @@ export const Search = (props: SearchProps) => {
                            }}
                        />
                    ))}
-                </MuiBox>
+                </ResultContainer>
            </Box>
        </TransitionsModal>
    );
 };
+
+const SearchInput = styled('input')(({ theme }) => ({
+    margin: '0.5em',
+    backgroundColor: 'white',
+    boxShadow: theme.affine.shadows.shadow1,
+    padding: '16px 32px',
+    borderRadius: '10px',
+}));
+
+const ResultContainer = styled(MuiBox)(({ theme }) => ({
+    margin: '0.5em',
+    backgroundColor: 'white',
+    boxShadow: theme.affine.shadows.shadow1,
+    padding: '16px 32px',
+    borderRadius: '10px',
+    transitionProperty: 'max-height',
+    transitionDuration: '300ms',
+    transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
+    transitionDelay: '0ms',
+    overflowX: 'hidden',
+    overflowY: 'hidden',
+}));
--- a/libs/components/layout/src/header/EditorBoardSwitcher/StatusIcon.tsx
+++ b/libs/components/layout/src/header/EditorBoardSwitcher/StatusIcon.tsx
@ -20,7 +20,7 @@ const IconWrapper = styled('div')<Pick<StatusIconProps, 'mode'>>(
            width: '20px',
            height: '20px',
            borderRadius: '5px',
-            boxShadow: '0px 1px 10px rgba(152, 172, 189, 0.6)',
+            boxShadow: theme.affine.shadows.shadow1,
            color: theme.affine.palette.primary,
            cursor: 'pointer',
            backgroundColor: theme.affine.palette.white,
--- a/libs/components/layout/src/settings-sidebar/Comments/CommentItem.tsx
+++ b/libs/components/layout/src/settings-sidebar/Comments/CommentItem.tsx
@ -94,7 +94,7 @@ const StyledContainerForCommentItem = styled('div', {
        transition: 'left 150ms ease-in-out',
        backgroundColor: theme.affine.palette.white,
        '&:hover': {
-            boxShadow: theme.affine.shadows.shadowSxDownLg,
+            boxShadow: theme.affine.shadows.shadow1,
        },
    };
 });
--- a/libs/components/ui/src/cascader/Cascader.tsx
+++ b/libs/components/ui/src/cascader/Cascader.tsx
@ -133,7 +133,7 @@ export function Cascader(props: CascaderProps) {
 const MenuPaper = styled('div')(({ theme }) => ({
    fontFamily: 'PingFang SC',
    background: '#FFF',
-    boxShadow: '0px 1px 10px rgba(152, 172, 189, 0.6)',
+    boxShadow: theme.affine.shadows.shadow1,
    borderRadius: '10px 0px 10px 10px',
    color: '#4C6275',
    fontWeight: '400',
--- a/libs/components/ui/src/popover/Container.tsx
+++ b/libs/components/ui/src/popover/Container.tsx
@ -12,7 +12,7 @@ const border_radius_map: Record<PopoverContainerProps['direction'], string> = {
 export const PopoverContainer = styled('div')<
    Pick<PopoverContainerProps, 'direction'>
 >(({ theme, direction, style }) => {
-    const shadow = theme.affine.shadows.shadowSxDownLg;
+    const shadow = theme.affine.shadows.shadow1;
    const white = theme.affine.palette.white;

    const borderRadius =
--- a/libs/components/ui/src/select/Select.tsx
+++ b/libs/components/ui/src/select/Select.tsx
@ -117,7 +117,7 @@ const StyledListbox = styled('ul')(({ theme }) => ({
    background: '#fff',
    borderRadius: '10px',
    overflow: 'auto',
-    boxShadow: theme.affine.shadows.shadowSxDownLg,
+    boxShadow: theme.affine.shadows.shadow1,
 }));

 const StyledPopper = styled(PopperUnstyled)`
--- a/libs/components/ui/src/theme/theme.ts
+++ b/libs/components/ui/src/theme/theme.ts
@ -70,7 +70,7 @@ interface Typography {

 interface Shadows {
    none: 'none';
-    shadowSxDownLg: string;
+    shadow1: string;
 }

 type StringWithNone = [
@ -225,7 +225,7 @@ export const Theme = {
    },
    shadows: {
        none: 'none',
-        shadowSxDownLg: '0px 1px 10px rgba(152, 172, 189, 0.6)',
+        shadow1: '0px 1px 5px rgba(152, 172, 189, 0.2)',
    },
    border: ['none'],
    spacing: {