style: move trash button group to page bottom (#3352)

This commit is contained in:
JimmFly
2023-07-25 13:21:16 +08:00
committed by GitHub
parent be81e63eed
commit e3f66d7e22
12 changed files with 136 additions and 103 deletions

View File

@@ -37,7 +37,7 @@
"@radix-ui/react-toast": "^1.1.4",
"@toeverything/hooks": "workspace:*",
"@toeverything/plugin-infra": "workspace:*",
"@toeverything/theme": "^0.7.7",
"@toeverything/theme": "^0.7.9",
"@vanilla-extract/dynamic": "^2.0.3",
"clsx": "^2.0.0",
"dayjs": "^1.11.9",

View File

@@ -70,7 +70,7 @@ export const button = style({
color: 'var(--affine-white)',
background: 'var(--affine-primary-color)',
borderColor: 'var(--affine-black-10)',
boxShadow: '0px 1px 2px 0px rgba(255, 255, 255, 0.25) inset',
boxShadow: 'var(--affine-button-inner-shadow)',
},
'&.primary:hover': {
background:
@@ -85,10 +85,10 @@ export const button = style({
},
'&.error': {
color: 'var(--affine-white)',
color: 'var(--affine-pure-white)',
background: 'var(--affine-error-color)',
borderColor: 'var(--affine-black-10)',
boxShadow: '0px 1px 2px 0px rgba(255, 255, 255, 0.25) inset',
boxShadow: 'var(--affine-button-inner-shadow)',
},
'&.error:hover': {
background:
@@ -106,7 +106,7 @@ export const button = style({
color: 'var(--affine-white)',
background: 'var(--affine-warning-color)',
borderColor: 'var(--affine-black-10)',
boxShadow: '0px 1px 2px 0px rgba(255, 255, 255, 0.25) inset',
boxShadow: 'var(--affine-button-inner-shadow)',
},
'&.warning:hover': {
background:
@@ -121,10 +121,10 @@ export const button = style({
},
'&.success': {
color: 'var(--affine-white)',
color: 'var(--affine-pure-white)',
background: 'var(--affine-success-color)',
borderColor: 'var(--affine-black-10)',
boxShadow: '0px 1px 2px 0px rgba(255, 255, 255, 0.25) inset',
boxShadow: 'var(--affine-button-inner-shadow)',
},
'&.success:hover': {
background:
@@ -139,10 +139,10 @@ export const button = style({
},
'&.processing': {
color: 'var(--affine-white)',
color: 'var(--affine-pure-white)',
background: 'var(--affine-processing-color)',
borderColor: 'var(--affine-black-10)',
boxShadow: '0px 1px 2px 0px rgba(255, 255, 255, 0.25) inset',
boxShadow: 'var(--affine-button-inner-shadow)',
},
'&.processing:hover': {
background:

View File

@@ -52,10 +52,10 @@ export const Confirm = ({
{buttonDirection === 'row' ? (
<StyledRowButtonWrapper>
<Button
shape="round"
onClick={() => {
onCancel?.();
}}
size="large"
style={{ marginRight: '24px' }}
data-testid={cancelButtonTestId}
>
@@ -63,10 +63,10 @@ export const Confirm = ({
</Button>
<Button
type={confirmType}
shape="round"
onClick={() => {
onConfirm?.();
}}
size="large"
data-testid={confirmButtonTestId}
>
{confirmText}
@@ -76,7 +76,6 @@ export const Confirm = ({
<StyledColumnButtonWrapper>
<Button
type={confirmType}
shape="round"
onClick={() => {
onConfirm?.();
}}
@@ -86,7 +85,6 @@ export const Confirm = ({
{confirmText}
</Button>
<Button
shape="round"
onClick={() => {
onCancel?.();
}}

View File

@@ -11,7 +11,7 @@ export const ModalWrapper = styled('div')<{
width,
height,
minHeight,
backgroundColor: 'var(--affine-background-secondary-color)',
backgroundColor: 'var(--affine-background-overlay-panel-color)',
boxShadow: 'var(--affine-shadow-3)',
borderRadius: '12px',
position: 'relative',