toeverything/AFFiNE
1
1
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2024-12-28 11:53:24 +03:00
Code Issues Packages Projects Releases Wiki Activity

chore: update General delete button style

Browse Source
This commit is contained in:
JimmFly 2023-01-18 16:00:00 +08:00
parent 74d7b7ab9d
commit 48ac7aad60
3 changed files with 43 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/app/src/components/workspace-setting/general/delete/Delete.tsx
View File

@ -46,7 +46,7 @@ export const WorkspaceDelete = ({
<Modal open={open} onClose={onClose}>
<StyledModalWrapper>
<ModalCloseButton onClick={onClose} />
<StyledModalHeader>{t('Delete Workspace')}</StyledModalHeader>
<StyledModalHeader>{t('Delete Workspace')}?</StyledModalHeader>
{workspace.provider === 'local' ? (
<StyledTextContent>
<Trans i18nKey="Delete Workspace Description">
@ -75,6 +75,8 @@ export const WorkspaceDelete = ({
onChange={handlerInputChange}
placeholder={t('Delete Workspace placeholder')}
value={deleteStr}
width={284}
height={42}
></Input>
</StyledInputContent>
<StyledButtonContent>

18
packages/app/src/components/workspace-setting/general/delete/style.ts
View File

@ -4,20 +4,20 @@ export const StyledModalWrapper = styled('div')(({ theme }) => {
return {
position: 'relative',
padding: '0px',
width: '460px',
width: '560px',
background: theme.colors.popoverBackground,
borderRadius: '12px',
height: '312px',
};
});
export const StyledModalHeader = styled('div')(({ theme }) => {
return {
margin: '44px 0px 12px 0px',
width: '460px',
width: '560px',
fontWeight: '600',
fontSize: '20px;',
textAlign: 'left',
paddingLeft: '20px',
textAlign: 'center',
color: theme.colors.popoverColor,
};
});
@ -37,21 +37,25 @@ export const StyledTextContent = styled('div')(() => {
};
});
export const StyledInputContent = styled('div')(() => {
export const StyledInputContent = styled('div')(({ theme }) => {
return {
display: 'flex',
flexDirection: 'row',
justifyContent: 'center',
margin: '20px 0 24px 0',
margin: '32px 0',
fontSize: theme.font.base,
};
});
export const StyledButtonContent = styled('div')(() => {
return {
position: 'absolute',
left: '50%',
transform: 'translateX(-50%)',
bottom: '32px',
display: 'flex',
flexDirection: 'row',
justifyContent: 'center',
margin: '0px 0 32px 0',
};
});

31
packages/app/src/components/workspace-setting/general/style.ts
View File

@ -1,15 +1,42 @@
import { styled } from '@/styles';
import { displayFlex, styled } from '@/styles';
import MuiAvatar from '@mui/material/Avatar';
import IconButton from '@/ui/button/IconButton';
import Input from '@/ui/input';
export const StyledSettingInputContainer = styled('div')(() => {
return {
marginTop: '12px',
width: '100%',
...displayFlex('flex-start', 'center'),
};
});
export const StyledDeleteButtonContainer = styled('div')(() => {
return {
marginTop: '30px',
position: 'absolute',
bottom: '0',
left: '50%',
marginBottom: '20px',
transform: 'translateX(-50%)',
};
});
export const StyledDoneButtonContainer = styled(IconButton)(({ theme }) => {
return {
border: `1px solid ${theme.colors.borderColor}`,
borderRadius: '10px',
height: '32px',
overflow: 'hidden',
marginLeft: '20px',
':hover': {
borderColor: theme.colors.primaryColor,
},
};
});
export const StyledInput = styled(Input)(({ theme }) => {
return {
border: `1px solid ${theme.colors.borderColor}`,
borderRadius: '10px',
fontSize: theme.font.sm,
};
});